/*
Theme Name: HMC Custom Theme
Theme URI: https://yourdomain.com
Description: Custom standalone theme for HMC website with full design control
Author: Pouya Matpo
Author URI: https://yourdomain.com
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hmc-custom
*/

/* ==========================================================================
   Custom Font - Montserrat
   ========================================================================== */

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Your Custom CSS Styles Start Here
   ========================================================================== */

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* clip, not hidden - overflow-x:hidden forces the OTHER axis
       (overflow-y, left at its default "visible") to compute as "auto" per
       the CSS Overflow spec, which turns html/body into scroll containers
       and broke position:sticky sitewide (e.g. the blog single sidebar) -
       clip is explicitly exempted from that auto-conversion rule, so it
       clips the same horizontal overflow without that side effect. */
    overflow-x: clip;
}

body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #333;
    background: #faf9f7;
    /* .hmc-consultation-form etc. get a pre-reveal translateX(±44px) from
       scroll-animations.js/animations.css until scrolled into view - near a
       viewport edge that transform genuinely inflates document width, so
       clip it here rather than patch every individual reveal element. See
       the .html rule above for why this is "clip" and not "hidden". */
    overflow-x: clip;
}

/* Container */
.custom-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   HEADER & NAVIGATION - DentSpa Style
   ========================================================================== */

/* Main Header - floating, container-width rounded bar (desktop). Mobile
   resets this back to the original edge-to-edge bar, in the existing
   768px breakpoint below - the floating pill treatment doesn't fit the
   full-screen accordion menu mobile uses instead. */
.main-header {
    position: fixed;
    top: 16px;
    left: 50%;
    /* Matches every content section's own alignment exactly (they're all
       `max-width: 1550px; padding: 0 40px`, e.g. .why-choose-container) -
       subtracting 80px upfront and capping at 1470px (= 1550 - 80) means
       this bar's outer edge lands at precisely the same X position as
       where those sections' own padding puts their text/images, at every
       viewport width, not just at the couple of sizes it happened to
       line up at before. Also used by .nav-menu .sub-menu below, so the
       whole header stack (bar, dropdown) and the page content all share
       one edge. */
    width: calc(100vw - 80px);
    max-width: 1470px;
    z-index: 1000;
    /* Transparent (just the logo/text, no panel) at the top of the page;
       .is-scrolled (JS, toggled past a small scroll threshold - see
       custom.js) or a plain :hover brings in the glass panel below. Only
       the bar itself goes glass - the mega-menu dropdown, mobile drawer and
       language dropdown stay flat solid navy (unchanged), which is also
       what keeps this safe from a real Chromium bug found earlier: a
       backdrop-filter on a fixed element nested inside an ALSO-blurred
       fixed ancestor fails to paint blur for either one. Since those
       dropdowns never get their own backdrop-filter, that nesting never
       happens here. */
    background: transparent;
    border: 1px solid transparent;
    padding: 0;
    border-radius: 22px;
    box-shadow: none;
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    /* The transform below re-centers the bar (it's positioned via `left: 50%`)
       and, as a side effect, establishes a containing block for the
       fixed-position mega-menu dropdown, so its `top: 100%` resolves against
       the header's own box instead of the full viewport. */
    transform: translateX(-50%);
}

.main-header.is-scrolled,
.main-header:hover {
    background: rgba(248, 247, 242, 0.995);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(180, 182, 186, 0.8);
    box-shadow: 0 18px 40px -20px rgba(43, 38, 32, 0.25);
}

/* Text switches dark once the glass panel is showing (white-on-white would
   be unreadable) - scoped to just the idle bar's own content (logo,
   top-level links, language switcher, mobile toggle bars). The mega-menu
   dropdown and language dropdown panel are unaffected by this rule (not
   matched by any of the selectors below) - both are opaque white panels
   with their own dark text at all times, see their own rules. The mobile
   drawer's top-level items (`.nav-menu > li > a`, shared with the desktop
   bar) DO get incidentally matched here whenever the cursor is anywhere
   over #main-header, including over the open drawer nested inside it -
   harmless since the drawer is always white and this resolves to the same
   dark color its own rule already sets, just worth knowing about if that
   color ever needs to diverge from the desktop bar's. */
:is(.main-header.is-scrolled, .main-header:hover) .site-logo-text,
:is(.main-header.is-scrolled, .main-header:hover) .nav-menu > li > a,
:is(.main-header.is-scrolled, .main-header:hover) .lang-button {
    color: #191f2d;
}

:is(.main-header.is-scrolled, .main-header:hover) .mobile-menu-toggle {
    color: #191f2d;
}

:is(.main-header.is-scrolled, .main-header:hover) .lang-button:hover {
    background: rgba(25, 31, 45, 0.06);
}

/* Darker text on hover instead of bold - needs this same :is(...) prefix
   to out-specificity the base #191f2d rule above, since a plain
   `.nav-menu > li > a:hover` selector alone isn't specific enough to win. */
:is(.main-header.is-scrolled, .main-header:hover) .nav-menu > li > a:hover,
:is(.main-header.is-scrolled, .main-header:hover) .nav-menu .menu-item-has-children.mega-menu-open > a {
    color: #2B2620;
}

/* Idle-state-only: while the bar is still transparent (not scrolled, not
   hovered - those two already force dark text above, unconditionally),
   .header-on-light (set once on load by custom.js, based on what's really
   behind the bar) switches text dark too, for pages whose top section is a
   plain light background rather than a dark photo/video. */
.main-header.header-on-light:not(.is-scrolled):not(:hover) .site-logo-text,
.main-header.header-on-light:not(.is-scrolled):not(:hover) .nav-menu > li > a,
.main-header.header-on-light:not(.is-scrolled):not(:hover) .lang-button {
    color: #191f2d;
}

.main-header.header-on-light:not(.is-scrolled):not(:hover) .mobile-menu-toggle {
    color: #191f2d;
}


/* Header Container - inner content, same max-width + padding as every other section
   so the logo/nav/lang-switcher align with hero, gallery, reels, get-started and footer */
.header-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 15px 15px 15px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Header Container */
/* Styles moved above */

/* Logo Styling */
.site-logo a {
    text-decoration: none;
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
}

.site-logo img,
.site-logo .custom-logo {
    max-height: 50px;
    width: auto;
}

.logo-text .logo-part1 {
    color: #ffffff;
}

.logo-text .logo-part2 {
    color: #00d4d4;
}

/* Nav logo: the HMC.png icon plus a plain text wordmark, rather than an
   uploaded logo image. */
.site-logo-link {
    gap: 10px;
}

.site-logo-icon-wrap {
    display: inline-flex;
    align-items: center;
}

.site-logo-icon {
    height: 34px;
    width: auto;
}

.site-logo-text {
    color: #ffffff;
    transition: color 0.4s ease;
}

/* Main Navigation */
.main-navigation {
    padding-right: 35px;
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-menu {
    list-style: none;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.nav-menu > li {
    position: relative;
}

.nav-menu > li > a {
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    padding: 10px 18px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
    position: relative;
}

/* Rounded pill background on hover, rather than an underline - the header
   is always in its glass/dark-text state by the time a hover on a child
   link can fire (hovering a link means hovering .main-header itself,
   which already forces glass+dark-text - see the comment block above),
   so one subtle dark-tint pill covers every case; no separate light-on-
   transparent variant is needed. Same tint .lang-button:hover already
   uses in that state, for consistency. Also applied while the item's mega
   menu is open (.mega-menu-open), not just on :hover, so the pill stays
   visible while browsing the dropdown below it. No weight change here -
   see the darker-text-color rule below instead (needs the same :is(...)
   specificity as the base dark-text rule to actually win). */
.nav-menu > li > a:hover,
.nav-menu .menu-item-has-children.mega-menu-open > a {
    background: rgba(26, 31, 46, 0.06);
}

/* Dropdown Arrow Icon */
.nav-menu .menu-item-has-children > a::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.nav-menu .menu-item-has-children:hover > a::after,
.nav-menu .menu-item-has-children.mega-menu-open > a::after {
    transform: rotate(180deg);
}

/* Mega Dropdown Menu Panel */
.nav-menu .sub-menu {
    position: fixed;
    /* A real gap below the floating header bar now, rather than sitting
       flush against it - the header stays fully rounded at all times (see
       the now-removed corner-squaring rule that used to compensate for
       zero gap here) and this panel is its own separate floating card. */
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    /* Static, always - unlike .main-header (which now goes glass on
       scroll/hover), this panel stays flat on purpose: a backdrop-filter
       here too, nested inside the header's own, is a CONFIRMED Chromium
       bug (re-tested directly - backdrop-filter: blur(30px) was added here
       and produced zero visible blur, verified via screenshot) that fails
       to paint blur for either one, since hovering open this dropdown
       necessarily also triggers .main-header's own backdrop-filter at the
       same time. Without backdrop-filter, a fully transparent fill
       (rgba(255,255,255,0), the original spec) has no "glass" softening at
       all - it's just raw page content showing through with nothing to
       distinguish the panel as its own surface, which reads as "no
       background". This near-white translucent fill is the closest
       working equivalent: the centered gold glow (::before below) still
       shows through it, but text stays legible over busy photo/video
       backgrounds underneath. */
    background: rgba(248, 247, 242, 0.995);
    border: 1px solid rgba(180, 182, 186, 0.8);
    box-shadow: 0px 40px 90px -30px rgba(43, 38, 32, 0.35);
    /* Clips the glow's blur to the panel's own rounded shape instead of
       letting it bleed past the corners. */
    overflow: hidden;
    /* Same width formula as .main-header, so the dropdown lines up exactly
       with the bar it opens from instead of stepping in/out at the edges. */
    width: calc(100vw - 80px);
    max-width: 1470px;
    padding: 40px 40px 20px 40px;
    /* All 4 corners rounded - the "Approved by" ratings row (see
       hmc_render_mega_menu_footer_html()) is now a real in-flow last <li>
       inside this same box, not a separate element bolted on below it, so
       this is the one and only rounded card for the whole dropdown.
       .mega-menu-compact overrides this with its own radius, since it's a
       self-contained box with no footer attached. */
    border-radius: 22px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    display: flex;
    /* Columns sit at their own natural height instead of stretching to
       match the tallest sibling - matters now that a video card (a fixed,
       much taller height than a short 2-3 link list) can be one of those
       siblings, on Stories & Gallery/Discover. Treatments' own columns
       still end up even-height via alignMegaMenuColumns() in custom.js,
       which sets explicit padding directly and doesn't depend on this. */
    align-items: flex-start;
    /* column-gap/row-gap kept separate on purpose: this only ever wraps
       because of .mega-menu-footer-row's own 100% flex-basis forcing it
       onto a new line beneath the real columns (regular columns stay
       side-by-side within the panel's own width) - a plain `gap: 40px`
       shorthand would also apply that 40px as the row-gap above that
       wrapped footer row, stacking on top of its own margin-top: 6px for a
       ~46px gap there instead of the intended ~6px.
       Column-to-column horizontal spacing is unaffected. */
    column-gap: 40px;
    row-gap: 0;
    list-style: none;
    flex-wrap: wrap;
}

/* Soft gold ambient glow, centered on the panel - two layered radial
   gradients (same recipe, different opacity/size, per the Figma spec)
   blurred into one big diffuse blob rather than a hard-edged circle. A
   separate absolutely-positioned layer behind the real content (not a
   filter/background directly on .sub-menu itself) so the 30px blur only
   softens the glow, never the actual menu text/cards above it. */
.nav-menu .sub-menu::before {
    content: '';
    position: absolute;
    top: 40%;
    left: 35%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    max-width: 100%;
    background: radial-gradient(circle, rgba(196, 158, 78, 0.1) 0%, rgba(196, 158, 78, 0) 60%), radial-gradient(circle, rgba(196, 158, 78, 0.1) 0%, rgba(196, 158, 78, 0) 70%);
    filter: blur(30px);
    pointer-events: none;
    z-index: 0;
}

.nav-menu .sub-menu > li {
    position: relative;
    z-index: 1;
}

.nav-menu .menu-item-has-children:hover > .sub-menu,
.nav-menu .menu-item-has-children.mega-menu-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Auto Footer at bottom of mega menu */
.nav-menu .sub-menu::after {
    display: none;
}

/* Category Columns in Mega Menu */
.nav-menu .sub-menu > li {
    flex: 1;
    min-width: 200px;
}

/* "Smile Gallery" is nested as a real DOM child of "Smile Stories" (see
   the menu structure in wp-admin) purely so they share one flex column
   instead of each becoming its own separate column like every other direct
   child of .sub-menu - CSS Grid's row-spanning (tried first) fights the
   patient-story video card's own tall height into inflating the row
   tracks between them, so plain nested document flow is used instead.
   "Smile Stories" would normally render as a non-clickable .category-title
   label once it has a child (see start_el() in functions.php) - forced
   back to a real link via the is-clickable-header item class - and both
   it and "Smile Gallery" are restyled here to look like identical plain
   links (menu-depth-1's own style), not a bold/uppercase header with an
   indented sub-item under it. */
.nav-menu > li.nav-stories-item .category-title {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.nav-menu > li.nav-stories-item .category-items {
    margin-top: 14px;
}

.nav-menu > li.nav-stories-item .category-items li {
    min-height: 0;
    margin-bottom: 0;
    padding-top: 0;
}

.nav-menu > li.nav-stories-item .category-items li a {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: rgba(26, 31, 46, 1);
}

/* "Smile Stories" now genuinely has a child ("Smile Gallery" nested inside
   it), so WordPress adds menu-item-has-children to its <li> - which also
   matches the generic ".menu-item-has-children > a::after" dropdown-arrow
   rule (style.css ~line 358), sitewide. It's not really a dropdown toggle
   here (nothing expands/collapses on hover/click), so hide that arrow just
   for this one link. */
.nav-menu > li.nav-stories-item .category-title::after {
    content: none;
}

/* Category Header (SMILE MAKEOVERS, DENTAL IMPLANTS, etc.) */
/* No margin-bottom here: the gap below the header text is handled by .category-title's own
   margin-bottom, so this doesn't add trailing space after the whole column. */

.nav-menu .category-title {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6B6459;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* A sub-heading nested inside another category's column (e.g. "Orthodontic Treatments"
   inside Prosthetic Treatments) - more breathing room from the item above it, tight to
   its own first sub-item below. Its <li> drops the standard row min-height/margin (meant
   for real treatment rows) so the heading sits flush above its first item, not floating
   in the middle of a full-height row. */
.nav-menu .category-items li.category-header {
    min-height: 0;
    margin-bottom: 0;
    /* Base gap above a mid-column header; JS (alignMegaMenuColumns in
       custom.js) adds extra padding-top on top of this at runtime so the
       column's last item lines up with the tallest sibling column - the
       exact deficit depends on real rendered text height, which varies by
       language, so it can't be a fixed number here. */
    padding-top: 22px;
}

.nav-menu .category-items .category-header .category-title {
    margin-bottom: 8px;
    padding-bottom: 4px;
}

/* Category Items List */
.nav-menu .category-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-menu .category-items li {
    min-height: 64px;
    margin-bottom: 6px;
}

.nav-menu .category-items li:last-child {
    margin-bottom: 0;
}

/* Menu Items under Categories - icon box (left) + title/description stack
   (right), side by side. */
.nav-menu .category-items li a {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: rgba(26, 31, 46, 1);
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    padding-left: 0;
}

/* Empty for now - just the background box, no glyph. Real per-item icons
   get dropped in later; this reserves their exact slot/spacing. */
.nav-menu .menu-icon {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    background: #F3ECDD;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.nav-menu .menu-icon img {
    width: 50%;
    height: 50%;
    object-fit: contain;
    display: block;
}

.nav-menu .menu-text {
    display: block;
    flex: 1;
    min-width: 0;
    position: relative;
}

/* Underline sweeps in on hover, same as before - anchored to .menu-text
   (not the outer <a>) so it only spans under the title/description text,
   not under the icon box too. The link (and its .menu-title child, via
   currentColor/inherit) also switches to the gold accent color, so the
   underline reads gold too instead of staying dark. */
.nav-menu .menu-text::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.3s ease;
}

.nav-menu .category-items li a:hover .menu-text::before {
    width: 100%;
}

.nav-menu .category-items li a:hover {
    color: #9C7A44;
}

.nav-menu .category-items .menu-title {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
    line-height: 1.3;
}

/* A plain leaf link sitting directly in the mega-menu (depth 1, no children of
   its own, e.g. "Stories & Gallery" -> "Smile Stories") isn't wrapped in
   .category-items, so it needs its own matching treatment instead of falling
   back to unstyled/underlined browser link defaults. */
.nav-menu .sub-menu > li.menu-depth-1 > a {
    color: rgba(26, 31, 46, 1);
    text-decoration: none;
    display: inline-block;
    position: relative;
    font-weight: 600;
    font-size: 14px;
}

/* Underline sweeps in on hover, same as .category-items li a above; the
   link switches to the gold accent color too (this link IS the title -
   there's no separate title/description split for a plain leaf item). */
.nav-menu .sub-menu > li.menu-depth-1 > a::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.3s ease;
}

.nav-menu .sub-menu > li.menu-depth-1 > a:hover::before {
    width: 100%;
}

.nav-menu .sub-menu > li.menu-depth-1 > a:hover {
    color: rgba(193, 150, 86, 1);
}

.nav-menu .category-items .menu-desc {
    font-size: 12px;
    color: #6B6459;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Compact dropdown - a small flat list of plain links, for any top-level
   item with only 1-2 links and no mega-menu content (opt in via the
   "mega-menu-compact" CSS class in wp-admin - Stories & Gallery used to be
   one of these before it got its own video card and switched to the full
   mega-menu treatment below). Anchors under its own trigger <li> (already
   position:relative, see .nav-menu > li) instead of the fixed-and-centered-
   under-the-whole-header treatment Treatments uses, since a 1500px-wide
   panel centered under the header looks empty for 1-2 links. */
.nav-menu .sub-menu.mega-menu-compact {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: none;
    min-width: 170px;
    flex-direction: column;
    padding: 20px 28px;
    gap: 6px;
    /* All 4 corners rounded - unlike the full mega menu (Treatments/
       Discover), this compact dropdown has no footer trust-bar attached
       below it, so nothing needs a square edge to butt up against. */
    border-radius: 10px;
}

.nav-menu .sub-menu.mega-menu-compact > li {
    flex: none;
    min-width: 0;
    min-height: 40px;
}

/* Discover's links are plain single-line labels (no description line under them like
   Treatments' items have), so the row spacing built for those 2-line items leaves a lot
   of dead vertical space here - tighten it to a standard gap and let the box height
   follow the (shorter) content instead. Scoped to Discover only via its own marker
   class, same way "nav-treatments-item" scopes the Treatments mega menu. */
.nav-menu > li.nav-discover-item .category-items li {
    min-height: 0;
    margin-bottom: 16px;
}

.nav-menu > li.nav-discover-item .category-items li:last-child {
    margin-bottom: 0;
}

/* Remove default sub-menu styles for deep levels */
.nav-menu .sub-menu .sub-menu {
    position: static;
    transform: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    min-width: auto;
    opacity: 1;
    visibility: visible;
    display: block;
}

/* "Patient story" video card - the last column in the Stories & Gallery
   and Discover mega menus (see hmc_render_nav_video_card_html() in
   functions.php, called from HMC_Menu_Description_Walker::end_lvl()).
   Fixed width rather than flex:1 like the link columns next to it, since
   it's a self-contained card, not a list that should stretch. */
.nav-menu .sub-menu > li.nav-video-card-slot {
    flex: 0 0 300px;
    min-width: 0;
}

.nav-video-card {
    background: #1c1815;
    border-radius: 18px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.nav-video-card-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 6px;
}

.nav-video-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px;
    line-height: 1.3;
}

.nav-video-card-patient {
    font-size: 13px;
    font-weight: 600;
    color: rgba(193, 150, 86, 1);
    margin: 0 0 4px;
}

.nav-video-card-desc {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 14px;
}

/* Real uploaded video (autoplay/muted/loop - same convention as the
   homepage hero video) - cropped to center via object-fit so the subject
   stays framed regardless of the source video's own aspect ratio. Only
   applies the fixed 4:3 crop when there's no real Reel embed inside (see
   .has-reel-embed override below) - a portrait Instagram Reel needs its
   own natural height, not squeezed into a landscape-ish box. */
.nav-video-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: #000000;
}

.nav-video-card-media.has-reel-embed {
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
}

.nav-video-card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Play icon + caption pill, bottom-left over the (already silently
   autoplaying) video - a decorative watch-more cue, not an actual
   click-to-play control. */
.nav-video-card-overlay {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-video-card-play {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    color: rgba(26, 31, 46, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Optically centers the play triangle inside its circle (a symmetrical
   triangle icon reads as sitting slightly left of center otherwise). */
.nav-video-card-play svg {
    margin-left: 2px;
}

.nav-video-card-caption {
    background: rgba(20, 17, 15, 0.75);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.nav-video-card-btn.nav-video-card-btn {
    width: 100%;
    justify-content: center;
    margin-top: 16px;
}

/* Approved By Section at bottom of mega menu - a real in-flow last <li>
   inside the same .sub-menu box as the dropdown's own columns (see
   hmc_render_mega_menu_footer_html() / HMC_Menu_Description_Walker::
   end_lvl() in functions.php), not a separate position:fixed element
   synced-by-coincidence underneath it - so there's never a seam or gap
   between them, just the divider line below. Forced onto its own full-
   width row via flex-basis, since every other direct .sub-menu child is a
   side-by-side column (see .nav-menu .sub-menu's own flex-wrap: wrap). */
.nav-menu .sub-menu > li.mega-menu-footer-row {
    flex: 1 1 100%;
    min-width: 100%;
    margin-top: 6px;
}

.mega-menu-footer-divider {
    display: block;
    width: 98%;
    margin: 0 auto 14px;
    border-top: 1px solid rgba(26, 31, 46, 0.14);
}

.mega-menu-reviews-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: flex-end;
}

.review-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: rgba(26, 31, 46, 1);
    white-space: nowrap;
}

.review-icon {
    height: 14px;
    width: 14px;
    object-fit: contain;
    display: block;
}

.review-badge-name {
    font-weight: 500;
}

.review-badge-whatclinic .review-badge-name {
    color: rgba(26, 31, 46, 0.45);
}

.review-rating {
    padding-top: 2px;
    font-weight: 600;
    color: rgba(26, 31, 46, 1);
    font-size: 11px;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero-section {
    position: relative;
    width: 100%;
    min-height: 96vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(26, 31, 46, 1);
}

/* Background Video / Gradient Overlay */
.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
   /* Bottom-anchored darkening, added for the no-glass layout - the
      headline and consultation card now sit directly on the photo down
      here with no panel behind them, and the other 2 gradients below
      fade to fully transparent by the vertical midpoint. */
   linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 35%),
   linear-gradient(90deg,rgba(26, 31, 46, 0.50) 0%, rgba(26, 31, 46, 0.20) 50%, rgba(26, 31, 46, 0.10) 100%),linear-gradient(180deg,rgba(26, 31, 46, 0.50) 9%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%)
}

/* Hero Text Content */
.hero-content {
    position: relative;
    z-index: 2;
    flex: 1;
    max-width: 1550px;
    width: 100%;
    margin: 0 auto;
    padding: 250px 40px 40px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centers the glass panel and the button row as whole blocks within the
       wider hero (both are narrower than .hero-content itself, capped at
       1100px below) - text inside each stays left-aligned since that's
       controlled separately by .text-align: left below and each child's
       own layout, not by this. */
    align-items: center;
    text-align: left;
}

/* Old frosted-glass hero layout (kicker/headline/description/trust-badges
   panel + glass action buttons + glass "Top Clinic" badge) - DISABLED per
   request ("remove the glass all of it"). Kept here, not deleted, in case
   it's wanted back later. Replaced by the no-glass "hero-content-v2"
   layout further below: plain text directly on the photo (readability
   comes from font weight/size/text-shadow instead of a translucent
   panel), award lines top-left, headline bottom-left, and a solid white
   consultation card bottom-right.

.hero-glass-panel {
    width: 100%;
    max-width: 1250px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9.7px);
    -webkit-backdrop-filter: blur(9.7px);
    border-radius: 24px;
    padding: 36px 44px;
    margin-bottom: 24px;
}

.hero-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 16px;
}

.hero-kicker::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
}

.hero-panel-row {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.hero-title {
    flex: 1 1 340px;
    font-size: 48px;
    line-height: 1.15;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.hero-title-accent {
    color: rgba(193, 150, 86, 1);
}

.hero-description {
    flex: 1 1 280px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    max-width: 550px;
    margin: 0;
}

.hero-trust-badges {
    display: flex;
    width: fit-content;
    margin: 0 auto;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 100px;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9.7px);
    -webkit-backdrop-filter: blur(9.7px);
    border-radius: 30px;
    padding: 12px 22px;
}

.hero-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.hero-trust-badge img {
    filter: brightness(0) invert(1);
}

.hero-trust-badge strong {
    color: #ffffff;
    font-weight: 700;
}

.hero-actions {
    width: 100%;
    max-width: 1250px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}

.hero-actions .btn {
    border-radius: 999px;
}

.hero-actions .btn-primary {
    background: rgba(255, 255, 255, 0.19);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9.7px);
    -webkit-backdrop-filter: blur(9.7px);
}

.hero-actions .btn-primary:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.5);
}

.hero-badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.19);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    padding: 10px 16px;
    backdrop-filter: blur(9.7px);
    -webkit-backdrop-filter: blur(9.7px);
}

.hero-badge-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.hero-badge-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-badge-title {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
}

.hero-badge-subtitle {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
}

*/

/* ==========================================================================
   Hero Section v2 - no-glass layout: plain text on the photo, award lines
   top-left, headline bottom-left, consultation card bottom-right.
   ========================================================================== */

.hero-content-v2 {
    justify-content: space-between;
    align-items: stretch;
}

/* No .hero-awards block anymore - .hero-bottom-row is the only child left,
   so space-between above (which needed 2+ children to push apart) would
   otherwise leave it sitting at the top instead of grounded at the
   bottom of the hero. */
.hero-content-v2-no-awards {
    justify-content: flex-end;
}

/* Top-left award/accreditation lines - DISABLED per request ("remove this
   2 text on top left, we don't need"). Kept, not deleted, in case wanted
   back later.

.hero-awards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hero-award-line {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-award-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #ffffff;
    flex-shrink: 0;
}

*/

.hero-bottom-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 32px;
}

.hero-headline-block {
    max-width: 620px;
}

.hero-headline {
    margin: 0 0 20px;
    line-height: 1.15;
}

.hero-headline-line1,
.hero-headline-line2 {
    display: block;
    font-size: 52px;
    font-weight: 700;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.55);
}

.hero-headline-line1 {
    color: #ffffff;
}

.hero-headline-line2 {
    color: rgba(214, 168, 102, 1);
}

.hero-subline {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    margin: 0;
}

.hero-consult {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

/* A plain (non-link) container now - only .hero-consult-card-btn inside
   it is actually clickable, so the card itself no longer reacts to
   hover; the button gets its own hover feedback below instead. */
.hero-consult-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #ffffff;
    border-radius: 999px;
    padding: 8px 8px 8px 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.hero-consult-card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: nowrap;
}

.hero-consult-card-label {
    font-size: 12px;
    color: #6c6c6c;
}

.hero-consult-card-title {
    font-size: 14px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
}

.hero-consult-card-btn {
    display: inline-flex;
    align-items: center;
    padding: 16px 26px;
    border-radius: 999px;
    background: rgba(26, 31, 46, 1);
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.25s ease, transform 0.25s ease;
}

.hero-consult-card-btn:hover {
    background: rgba(193, 150, 86, 1);
    transform: translateY(-2px);
}

/* Plain (non-link) text - only the .hero-chat-link a inside it (the
   "Chat with..." portion) is actually clickable. */
.hero-chat-link {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.hero-chat-link a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.hero-chat-link a:hover {
    color: #ffffff;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.btn-primary {
    background: rgb(194, 150, 87, 1);
    color: #ffffff;
    border: 1px solid rgba(193, 150, 86, 1);
}

.btn-primary:hover {
    background: rgba(173, 130, 66, 1);
    border-color: rgba(173, 130, 66, 1);
}

/* Hero-only override - .btn-primary is a shared sitewide class (CTA banner,
   other pages' forms, etc.) where the solid gold fill is still correct, so
   this scopes the glass treatment to just the hero's own button instead of
   changing the shared rule above. */
.hero-actions .btn-primary {
    background: rgba(255, 255, 255, 0.19);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9.7px);
    -webkit-backdrop-filter: blur(9.7px);
}

.hero-actions .btn-primary:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.5);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.19);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9.7px);
    -webkit-backdrop-filter: blur(9.7px);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.5);
}

.hero-badge {
    /* Third item in the same .hero-actions row as the two buttons - pushed
       to the row's far end with auto margin rather than absolutely
       positioned, so it stays correctly placed regardless of how tall the
       glass panel above ends up being. */
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.19);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    padding: 10px 16px;
    backdrop-filter: blur(9.7px);
    -webkit-backdrop-filter: blur(9.7px);
}

.hero-badge-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.hero-badge-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-badge-title {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
}

.hero-badge-subtitle {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
}

/* Hero Stats Bar - a floating glass card like the panel/pills above it,
   rather than the old edge-to-edge solid navy bar. Inset with the same
   40px/1550px sizing as .hero-content so it lines up with everything above
   it, and switches to dark text since the background is now light glass
   instead of solid navy. */
.hero-stats {
    /* Pulled up by roughly half its own height so it straddles the hero's
       bottom edge - half over the video, half over the section below (a
       normal sibling now, not a .hero-section descendant, so this isn't
       clipped by that section's own overflow:hidden). */
    position: relative;
    z-index: 2;
    width: calc(100% - 80px);
    max-width: 1250px;
    margin: -72px auto 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 40px;
    background: rgba(255, 255, 255, 0.19);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9.7px);
    -webkit-backdrop-filter: blur(9.7px);
    border-radius: 24px;
}

.hero-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 20px;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.hero-stat:last-child {
    border-right: none;
}

.hero-stat-icon {
    display: none;
}

.hero-stat-number {
    font-size: 32px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
}

.hero-stat-label {
    font-size: 15px;
    color: rgba(26, 31, 46, 1);
}

/* Hero Responsive */
@media screen and (max-width: 1024px) {
    .hero-content {
        padding: 140px 30px 50px;
    }

    .hero-headline-line1,
    .hero-headline-line2 {
        font-size: 40px;
    }

    .hero-stats {
        width: calc(100% - 60px);
        padding: 25px 30px;
    }
}

@media screen and (max-width: 768px) {
    .hero-content {
        padding: 120px 20px 40px;
    }

    .hero-headline-line1,
    .hero-headline-line2 {
        font-size: 32px;
    }

    .hero-subline {
        font-size: 15px;
    }

    /* Headline and the consultation card stack instead of sitting
       side-by-side once there isn't room for both at full size. */
    .hero-bottom-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .hero-consult {
        align-items: flex-start;
        width: 100%;
    }

    .hero-consult-card {
        width: 100%;
        justify-content: space-between;
    }

    .hero-stats {
        width: calc(100% - 40px);
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 20px 15px;
        padding: 20px;
    }

    .hero-stat {
        /* The right-hand divider only makes sense in a single-row layout -
           in this 2x2 wrap it would land between columns on some rows and
           nowhere useful on others, so drop it here. */
        flex: 1 1 calc(50% - 8px);
        padding: 0;
        border-right: none;
    }
}

/* The consultation card's own text+button row (still riding at full width
   inside .hero-bottom-row's 768px stack, see above) needs to break down to
   its own stacked layout earlier than the rest of the hero content -
   "Need to know more? / Book Your Free Online Consultation" plus the black
   pill button get too cramped side by side below ~610px, well before the
   headline/stats below need any further shrinking of their own. */
@media screen and (max-width: 610px) {
    .hero-consult-card {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 18px;
        border-radius: 20px;
    }

    .hero-consult-card-btn {
        justify-content: center;
    }
}

@media screen and (max-width: 480px) {
    .hero-headline-line1,
    .hero-headline-line2 {
        font-size: 26px;
    }

    .hero-stat-number {
        font-size: 18px;
    }

    .hero-stat-label {
        font-size: 10px;
    }
}

/* ==========================================================================
   OFFICIALLY LICENSED BY SECTION - homepage, under hero
   ========================================================================== */

.licenses-section {
    padding: 60px 0;
}

.licenses-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
}

/* width: fit-content (+ auto side margins for the centering .licenses-
   container's text-align:center already handles the text itself, but a
   plain block-level heading/paragraph still spans the container's FULL
   width as its own box) - without this, the inline editor's pencil (which
   anchors to this element's own top-right corner) ends up far from the
   visible, centered text, off in empty space on the right. Stays
   display:block (not inline-block) so the two still correctly stack
   instead of risking sitting side by side on one line. */
.licenses-title {
    font-size: 26px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin: 0 auto 6px;
    width: fit-content;
}

.licenses-subtitle {
    font-size: 15px;
    color: #6c6c6c;
    margin: 0 auto 40px;
    width: fit-content;
}

.licenses-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 48px;
}

.license-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 140px;
}

.license-logo-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
}

.license-logo {
    max-height: 60px;
    max-width: 140px;
    width: auto;
    object-fit: contain;
    /* Most of these authority/certification marks ship as plain dark PNGs
       with no real color of their own - a mild desaturating filter keeps
       the whole row reading as one consistent "trust bar" instead of a mix
       of whatever colors each logo file happens to have. */
    filter: grayscale(1) opacity(0.75);
    transition: filter 0.25s ease;
}

.license-item:hover .license-logo {
    filter: grayscale(0) opacity(1);
}

/* Shown instead of an <img> when no Logo has been uploaded yet for a row -
   a plain text placeholder rather than a broken image. */
.license-logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #f4f1eb;
    color: #9a9aa2;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
}

/* Only rendered at all when a row has a real Certificate Image uploaded -
   see hmc_render_licenses_html(). */
.license-eye-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    color: #6c6c6c;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 10px rgba(26, 26, 26, 0.12);
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.license-eye-btn:hover {
    color: rgba(193, 150, 86, 1);
    transform: scale(1.08);
}

.license-name {
    font-size: 13px;
    font-weight: 600;
    color: rgba(26, 31, 46, 1);
    text-align: center;
    line-height: 1.3;
}

/* Lightbox - shared single instance, JS swaps the image src/alt and toggles
   [hidden] on click (see "Officially Licensed By" lightbox in custom.js). */
.license-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
}

/* A class selector and an attribute selector are equal specificity, and
   this stylesheet's own display:flex above loads after the browser's
   built-in "[hidden] { display: none }" rule - so without this, the
   lightbox rendered open on every page load regardless of the hidden
   attribute JS is supposed to be toggling. */
.license-lightbox[hidden] {
    display: none;
}

.license-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 26, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.license-lightbox-card {
    position: relative;
    z-index: 1;
    max-width: 640px;
    width: 100%;
    max-height: calc(100vh - 80px);
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.license-lightbox-img {
    display: block;
    width: 100%;
    max-height: calc(100vh - 120px);
    object-fit: contain;
    border-radius: 8px;
}

.license-lightbox-close {
    position: absolute;
    top: -14px;
    right: -14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    color: rgba(26, 31, 46, 1);
    border: none;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

@media screen and (max-width: 640px) {
    .licenses-row {
        gap: 28px 24px;
    }

    .license-item {
        width: 110px;
    }

    .license-lightbox-card {
        padding: 14px;
    }

    /* initMobilePeekSlider() (custom.js) wraps each .license-item in a
       swipeable .hmc-peek-track at this same 640px breakpoint - its
       generic child sizing (flex: 0 0 64%, meant for near-full-width
       cards like reels/testimonials) would stretch these small logo
       items way past their natural width, so this section gets its own
       sizing: exactly 2 items visible per slide. */
    .hmc-peek-track > .license-item {
        flex: 0 0 calc((100% - 14px) / 2);
        width: auto;
    }
}

/* ==========================================================================
   WHY CHOOSE US SECTION - homepage, under hero
   ========================================================================== */

.why-choose-section {
    position: relative;
    padding: 110px 0;
}

/* Soft decorative gold glow behind the "Excellence you can afford." heading -
   purely atmospheric, sits behind .why-choose-container (z-index below it),
   sized well past the text so it reads as an ambient wash rather than a
   hard-edged shape. */
.why-choose-section::before {
    content: '';
    position: absolute;
    top: -150px;
    left: -120px;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(193, 150, 86, 0.25) 0%, rgba(193, 150, 86, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.why-choose-container {
    position: relative;
    z-index: 1;
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    /* Without this, grid's default stretch forces .why-choose-images to
       match .why-choose-text's height whenever the text column's natural
       content (e.g. a longer title/checklist, as on the Dental Tourism
       reuse of this section) is taller than the photo collage - inflating
       the image column past its own content and leaving the location
       badge (anchored to the bottom of its own column) floating in the
       gap below the photos instead of overlapping them. Each column now
       sizes to its own content, like the badge overlap was designed for. */
    align-items: start;
}

.why-choose-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 18px;
}

.why-choose-kicker::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
}

.why-choose-title {
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 20px;
}

.why-choose-title-accent {
    color: rgba(193, 150, 86, 1);
}

.why-choose-description {
    font-size: 16px;
    line-height: 1.7;
    color: #6b6b76;
    margin-bottom: 40px;
}

.why-choose-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 40px;
}

.why-choose-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.why-choose-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(193, 150, 86, 0.12);
    color: rgba(193, 150, 86, 1);
    flex-shrink: 0;
}

.why-choose-feature-text strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 6px;
}

.why-choose-feature-text p {
    font-size: 14px;
    line-height: 1.6;
    color: #6c6c6c;
}

/* Image collage */
.why-choose-images {
    position: relative;
    display: grid;
    /* Equal columns - the diagonal pairs (1&4, 2&3) share both an
       aspect-ratio AND a column width now, so they render as genuinely
       identical box sizes, not just the same shape at different scales. */
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.why-choose-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.why-choose-col-left {
    position: relative;
    padding-bottom: 30px;
}

/* No top offset - both columns now start flush with the text block next
   to them instead of the right one sitting lower than the left. */
.why-choose-col-right {
    margin-top: 0;
}

.why-choose-photo {
    position: relative;
    /* Flex items default to min-width/min-height: auto, which lets a
       photo's own intrinsic image size push its box past what its
       aspect-ratio + the column's stretched width says it should be -
       exactly what was making 2 photos meant to match end up different
       sizes. Resetting both to 0 makes aspect-ratio (and the shared
       column width) the only thing that decides the box size. */
    min-width: 0;
    min-height: 0;
    border-radius: 20px;
    overflow: hidden;
    background: #e5e1d5;
    box-shadow: 0 20px 40px rgba(26, 26, 26, 0.08);
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.why-choose-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.why-choose-photo:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 50px rgba(26, 26, 26, 0.16);
}

.why-choose-photo:hover img {
    transform: scale(1.07);
}

/* 2 matching pairs, diagonally: top-left (1) with bottom-right (4) share
   one ratio, bottom-left (2) with top-right (3) share another. */
.why-choose-photo-1,
.why-choose-photo-4 {
    aspect-ratio: 6 / 5;
}

.why-choose-photo-2,
.why-choose-photo-3 {
    aspect-ratio: 6 / 4.2;
}

.why-choose-badge {
    position: absolute;
    left: 0;
    bottom: -6px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    width: max-content;
    max-width: calc(100% + 60px);
    padding: 16px 22px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(26, 26, 26, 0.15);
    white-space: nowrap;
}

.why-choose-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(193, 150, 86, 0.12);
    color: rgba(193, 150, 86, 1);
    flex-shrink: 0;
}

.why-choose-badge-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.why-choose-badge-text strong {
    font-size: 14px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
}

.why-choose-badge-text span {
    font-size: 12px;
    color: #6c6c6c;
}

@media screen and (max-width: 1100px) {
    .why-choose-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .why-choose-images {
        max-width: 560px;
    }
}

@media screen and (max-width: 640px) {
    .why-choose-section {
        padding: 70px 0;
    }

    .why-choose-title {
        font-size: 30px;
    }

    .why-choose-features {
        grid-template-columns: 1fr 1fr;
        gap: 20px 14px;
    }

    /* Icon-above-text instead of side-by-side at this width - a 40px icon
       plus its 14px gap left very little room for the text next to it in
       a ~150px-wide column, wrapping awkwardly. */
    .why-choose-feature {
        flex-direction: column;
        gap: 10px;
    }

    .why-choose-feature-icon {
        width: 32px;
        height: 32px;
    }

    .why-choose-feature-icon svg {
        width: 18px;
        height: 18px;
    }

    .why-choose-feature-text strong {
        font-size: 15px;
    }

    .why-choose-feature-text p {
        font-size: 13px;
    }

    /* Photo collage: same 2-column grid as desktop, just tighter spacing
       for the phone width - photos 1/2 in row 1, 3/4 in row 2, the
       location badge spanning full-width below all 4. .why-choose-col-
       left/-right are the 2 grid columns (2 photos each) in the markup;
       display:contents "unwraps" them so their photos become direct
       .why-choose-images grid items instead, which is what lets this
       rule's own 2-column grid actually control their layout. The
       explicit order below reads photo 1/2/3/4, badge, matching the
       intended reading order despite the badge living inside -col-left in
       the markup (it's absolutely positioned there for the desktop
       overlap effect, which display:contents also cleanly drops out of). */
    .why-choose-images {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .why-choose-col-left,
    .why-choose-col-right {
        display: contents;
    }

    .why-choose-photo-1 { order: 1; }
    .why-choose-photo-2 { order: 2; }
    .why-choose-photo-3 { order: 3; }
    .why-choose-photo-4 { order: 4; }

    .why-choose-badge {
        order: 5;
        grid-column: 1 / -1;
        position: relative;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        white-space: normal;
        padding: 12px 16px;
        gap: 10px;
    }

    .why-choose-badge-text strong {
        font-size: 13px;
    }
}

/* ==========================================================================
   SMILE GALLERY SECTION - Before/After Slider
   ========================================================================== */

.gallery-section {
    --gallery-accent: rgba(193, 150, 86, 1);
    --gallery-accent-dark: rgba(26, 31, 46, 1);
    background: #F8F6F0;
    padding: 100px 0;
    overflow: hidden;
}

.gallery-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.gallery-content {
    display: grid;
    grid-template-columns: minmax(280px, 500px) 1fr;
    gap: 60px;
    align-items: center;
}

/* Left column - text */
.gallery-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.gallery-icon {
    color: var(--gallery-accent);
    margin-bottom: 12px;
    line-height: 0;
}

.gallery-kicker {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--gallery-accent);
    margin-bottom: 16px;
}

.gallery-title {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--gallery-accent-dark);
    margin-bottom: 20px;
}

.gallery-title-accent {
    color: var(--gallery-accent);
}

.gallery-description {
    font-size: 16px;
    line-height: 1.6;
    color: #6b6b76;
    max-width: 650px;
    margin-bottom: 24px;
}

.gallery-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    text-decoration: none;
    margin-bottom: 40px;
    transition: color 0.25s ease;
}

.gallery-link svg {
    transition: transform 0.25s ease;
}

.gallery-link:hover {
    color: var(--gallery-accent);
}

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

.gallery-nav {
    display: flex;
    gap: 12px;
}

.gallery-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #EFEDE5;
    color: #8a8a92;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

.gallery-arrow:hover {
    background: var(--gallery-accent);
    color: #ffffff;
}

.gallery-arrow:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Right column - slider */
.gallery-slider {
    position: relative;
    width: 100%;
}

.gallery-slides {
    position: relative;
    width: 75%;
    justify-self: end;
}

.gallery-slide {
    display: none;
}

.gallery-slide.active {
    place-items: center;
    display: block;
}

/* Before/After compare */
.hmca-compare {
    position: relative;
    width: 65%;
    aspect-ratio: 4 / 3;
    border-radius: 28px;
    overflow: hidden;
    background: #e8e6de;
    box-shadow: 0 30px 50px rgba(42, 27, 107, 0.12);
    user-select: none;
    touch-action: none;
    cursor: ew-resize;
}

.hmca-image {
    position: absolute;
    inset: 0;
}

.hmca-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.hmca-after {
    clip-path: inset(0 0 0 50%);
}

.hmca-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ECEAE1;
    padding: 20px;
    text-align: center;
}

.hmca-empty span {
    font-size: 13px;
    color: #9a988f;
    font-weight: 600;
}

.hmca-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: rgba(255, 255, 255, 0.9);
    transform: translateX(-50%);
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.hmca-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4a4a52;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    cursor: ew-resize;
    pointer-events: auto;
    touch-action: none;
}

.gallery-caption {
    text-align: center;
    font-size: 14px;
    color: #6c6c6c;
    margin-top: 18px;
}

.gallery-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

/* The button itself is a 24x24 touch target (WCAG 2.5.8 minimum) - the
   visible 8px dot is a centered pseudo-element so the enlarged hit area
   doesn't change how the dots row looks. No negative margin here: that
   would pull neighboring 24px targets close enough to overlap, which
   fails the "sufficient spacing between targets" half of the same rule -
   the 10px gap on .gallery-dots is what actually keeps them apart. */
.gallery-dot {
    position: relative;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-dot::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #DAD7CC;
    transition: background 0.25s ease, transform 0.25s ease;
}

.gallery-dot.active::before {
    background: rgba(193, 150, 86, 1);
    transform: scale(1.25);
}

/* Gallery Responsive */
@media screen and (max-width: 1024px) {
    .gallery-section {
        padding: 80px 0;
    }

    .gallery-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .gallery-title {
        font-size: 34px;
    }
}

@media screen and (max-width: 768px) {
    .gallery-section {
        padding: 60px 0;
    }

    .gallery-title {
        font-size: 28px;
    }

    .gallery-description {
        max-width: 100%;
    }

    .gallery-link {
        margin-bottom: 24px;
    }

    .hmca-compare {
        aspect-ratio: 4 / 3.6;
        border-radius: 20px;
    }
}

@media screen and (max-width: 480px) {
    .gallery-title {
        font-size: 24px;
    }

    .gallery-arrow {
        width: 42px;
        height: 42px;
    }

    .hmca-handle {
        width: 36px;
        height: 36px;
    }
}

/* ==========================================================================
   INTERNATIONAL PATIENT SERVICES SECTION - homepage, under Clinic Gallery
   ========================================================================== */

.intl-section {
    padding: 100px 0;
}

.intl-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.intl-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    text-align: left;
    margin: 0 0 56px;
}

.intl-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 16px;
}

.intl-kicker::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
}

.intl-title {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin: 0;
}

.intl-description {
    flex: 0 1 340px;
    font-size: 15px;
    line-height: 1.6;
    color: #6b6b76;
    text-align: right;
    padding-top: 6px;
}

/* Each feature block is its own floating card, alternating image side -
   .intl-block-img-right/.intl-block-img-left only control which side the
   text reads flush against (matching the reference's editorial style);
   which column the image/text land in is just DOM order against a plain
   2-column grid, not something these modifiers need to control themselves. */
.intl-block {
    min-height: 450px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    border-radius: 28px;
    padding: 8px;
    margin-bottom: 24px;
}

.intl-block:last-child {
    margin-bottom: 0;
}

/* Per-block corner glows, same radial-gradient recipe as
   .why-choose-section/.how-it-works-section - ::before/::after are
   pseudo-CHILDREN of .intl-block, so they paint above its own background
   but (being position:absolute, so out of grid flow) don't disturb the
   2-column grid; .intl-block-image/-text below get z-index:1 to stay above
   them in turn. Each block's glow color(s)/corner(s) are hand-picked per
   the reference design rather than one repeated pattern. */
.intl-block-1::before,
.intl-block-2::before,
.intl-block-3::before,
.intl-block-4::before,
.intl-block-1::after,
.intl-block-3::after {
    content: '';
    position: absolute;
    width: 480px;
    height: 480px;
    z-index: 0;
    pointer-events: none;
}

.intl-block-1::before {
    top: -120px;
    left: -200px;
    background: radial-gradient(circle, rgba(193, 150, 86, 0.3) 0%, rgba(193, 150, 86, 0) 70%);
}

/* Sits behind the opaque photo rather than the empty text side (unlike the
   ::before glows above), so it needs real extra reach - past the image's
   own translucent glass frame, into the 60px column gap and the card's
   whitespace either side of it - to actually read as a visible accent
   instead of just tinting a few px of glass border. */
.intl-block-1::after,
.intl-block-3::after {
    width: 750px;
    height: 750px;
}

.intl-block-1::after {
    bottom: -280px;
    right: -280px;
    background: radial-gradient(circle, rgba(72, 137, 241, 0.3) 0%, rgba(110, 173, 239, 0) 70%);
}

.intl-block-2::before {
    bottom: -120px;
    right: -120px;
    background: radial-gradient(circle, rgba(193, 150, 86, 0.3) 0%, rgba(193, 150, 86, 0) 70%);
}

.intl-block-3::before {
    top: 50%;
    left: -140px;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(193, 150, 86, 0.3) 0%, rgba(193, 150, 86, 0) 70%);
}

.intl-block-3::after {
    top: 50%;
    right: -320px;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(72, 137, 241, 0.3) 0%, rgba(110, 173, 239, 0) 70%);
}

.intl-block-4::before {
    bottom: -120px;
    right: -120px;
    background: radial-gradient(circle, rgba(193, 150, 86, 0.3) 0%, rgba(193, 150, 86, 0) 70%);
}

/* Stretched to the row's full height (matching the image next to it) - the
   kicker and the title+description group (.intl-block-copy) always stack
   compactly at the top like normal text flow. A block that also has a 3rd
   group below (the stats row in Block 1, the language pills in Block 3)
   pins JUST that group to the very bottom via margin-top:auto (which
   consumes all remaining space above it, regardless of how many siblings
   come before it) - not justify-content, which would space every child
   apart individually rather than keeping kicker+copy together. */
.intl-block-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    /* Same grid-blowout risk .intl-block-image already needed min-width:0
       for - a single long word in .intl-block-title (e.g. "Coordinator")
       can otherwise force this column's track wider than the mobile
       single-column layout has room for, pushing .intl-block-image (which
       fills 100% of that same track) past the card edge with it. */
    min-width: 0;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 25px;
    padding-bottom: 25px;
}

.intl-block-stats,
.intl-languages {
    margin-top: auto;
}

.intl-block-img-right .intl-block-text {
    text-align: left;
}

.intl-block-img-left .intl-block-text {
    text-align: right;
}

.intl-block-kicker {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(193, 150, 86, 1);
}

.intl-block-title {
    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin: 18px 0;
}

.intl-block-description {
    padding-top: 10px;
    font-size: 16px;
    line-height: 1.7;
    color: #99A1AF;
}

.intl-block-description p {
    margin: 0 0 16px;
}

.intl-block-description p:last-child {
    margin-bottom: 0;
}

.intl-block-stats {
    padding-top: 20px;
    display: flex;
    gap: 36px;
}

.intl-block-img-left .intl-block-stats {
    justify-content: flex-end;
}

.intl-block-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.intl-block-stat strong {
    font-size: 30px;
    font-weight: 700;
    color: rgba(193, 150, 86, 1);
}

.intl-block-stat span {
    font-size: 14px;
    color: #6b6b76;
}

/* Frosted-glass frame around the photo itself - a translucent, blurred
   border/mat rather than the image filling its rounded box edge-to-edge. */
.intl-block-image {
    /* Deliberately width:100%/height:100% instead of aspect-ratio here - in
       the 2-column grid (.intl-block below 900px stacks to 1 column, see
       that media query for the aspect-ratio version this needs there
       instead), .intl-block's align-items:stretch already gives this cell a
       definite row height matching .intl-block-text (which can wrap to a
       different number of lines per block). Combining that stretched
       height with aspect-ratio made the browser derive this box's WIDTH
       from that height instead of from its own grid column, blowing it out
       past the column and over the text/next block whenever the row got
       tall. Filling both dimensions directly leaves nothing for
       aspect-ratio to compute, so there's no conflict - object-fit:cover
       below still crops the photo to look intentional at any resulting
       proportions. */
    width: 100%;
    height: 100%;
    min-width: 0;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    border-radius: 28px;
    overflow: hidden;
    background: #e5e5e5;
}

/* The glassy inner-glow frame lives on ::after, painted ON TOP of the img
   (z-index:2, above the img's implicit stacking level) - putting an inset
   box-shadow directly on .intl-block-image itself doesn't work here: that
   shadow paints in the same box-decoration layer as the wrapper's own
   background/border, which the img (an absolutely positioned child that
   fills the entire box via inset:0) then completely paints over, hiding
   it. This ::after has no fill of its own (transparent, pointer-events:
   none) so only its box-shadow is visible, sitting directly on the photo.
   Physically incapable of rendering outside the photo either way - unlike
   a border or a plain box-shadow, an INSET box-shadow only ever paints
   inward from its own edge, never past it. */
.intl-block-image::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 28px;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 8px rgba(255, 255, 255, 0.7),
        inset 0 0 30px 6px rgba(255, 255, 255, 0.5);
}

.intl-block-image img {
    /* Taken clean out of normal flow (rather than a plain width:100%/
       height:100% block child) so it can never contribute its own size
       back into .intl-block-image's - and, in turn, into the shared grid
       row's - sizing at all. Without this, a portrait-oriented source
       photo (like Block 3's) still forces the whole row taller even with
       min-width/min-height:0 on the wrapper: with height:100% resting on
       an auto-sized grid row, the row's own sizing pass has no definite
       height to resolve that percentage against, so it falls back to
       "auto" and picks up the <img>'s intrinsic, aspect-ratio-derived
       preferred height instead - min-height:0 only clears an unwanted
       MINIMUM floor, it doesn't stop a box's actual resolved size from
       being large in the first place, which is what was actually
       happening here. An absolutely positioned child is excluded from its
       containing block's content-size calculation entirely, so
       .intl-block-image reverts to being sized purely by the grid's own
       stretch (i.e. by .intl-block-text's height) with zero feedback from
       the photo's shape - inset:0 fills the wrapper completely (no gap
       around the photo, clipped to the wrapper's border-radius via its
       overflow:hidden; the glassy frame drawn on .intl-block-image::after
       sits on top of this image - see that rule for why). width/
       height are still required alongside inset even though all 4 sides
       are set - unlike a normal box, an absolutely positioned REPLACED
       element (this <img>) with auto width/height falls back to its own
       INTRINSIC pixel size instead of stretching to fill the inset-
       constrained box, which is what let a photo blow straight through
       its frame and over neighboring content. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #e5e5e5;
}

.intl-languages {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 24px;
}

.intl-language-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border-radius: 30px;
    padding: 8px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    font-size: 18px;
    color: rgba(26, 31, 46, 1);
    font-weight: 700;
}

@media screen and (max-width: 900px) {
    .intl-section {
        padding: 60px 0;
    }

    .intl-title {
        font-size: 28px;
    }

    .intl-block {
        grid-template-columns: 1fr;
        gap: 30px;
        /* Closer to desktop's own 8px card padding (photo sits nearly
           edge-to-edge there) - this used to be 30px, which was really
           only doing the TEXT's spacing job (.intl-block-text's own
           padding is zeroed out below, right after this), and the photo
           got dragged into that same wide margin along with it since both
           share this one outer padding value. */
        padding: 10px;
    }

    /* Stacked layout: image and text are now each alone in their own auto-
       height row, so .intl-block-image's height:100% (meant for the 2-col
       stretch above) would resolve against an indefinite height and
       collapse to nothing - give it an explicit ratio instead. */
    .intl-block-image {
        height: auto;
        aspect-ratio: 6 / 4;
    }

    /* Still-desktop-sized 40px bold text has long single words (e.g.
       "Coordinator") that don't fit the narrow single-column width once
       stacked - smaller size plus a wrap fallback keeps it from forcing the
       column wider than the card. */
    .intl-block-title {
        font-size: 26px;
        overflow-wrap: break-word;
    }

    /* A single stacked column reading right-aligned text is awkward - both
       variants read left-aligned once the columns collapse. */
    .intl-block-img-right .intl-block-text,
    .intl-block-img-left .intl-block-text {
        text-align: left;
    }

    /* All 3 stay in one row (flex:1 shares the width evenly, min-width:0
       lets each one shrink below its own text's natural width) instead of
       wrapping - the 3rd stat was dropping to its own row because the 3
       items' natural content widths, plus the old 20px gaps, added up to
       more than a phone screen has to give. Long labels ("International
       cases") wrap onto a 2nd line within their own narrow column now
       instead. */
    .intl-block-stats {
        flex-wrap: nowrap;
        gap: 12px;
    }

    .intl-block-stat {
        flex: 1;
        min-width: 0;
    }

    .intl-block-stat strong {
        font-size: 22px;
    }

    .intl-block-stat span {
        font-size: 12px;
    }

    /* .intl-block-text's own 25px padding (all sides) was designed for the
       desktop 2-column layout, where .intl-block's own card padding is
       just 8px - stacked here, its own padding needs to do the text's
       spacing job instead, now that the outer card padding above has been
       tightened to 10px to let the photo sit close to the card edge like
       it does on desktop (that 10px alone would leave the text cramped
       right up against the edges too, hence giving it back a smaller
       spacing of its own here rather than just 0). */
    .intl-block-text {
        padding: 14px 18px 18px;
    }

    /* Bumped up for desktop legibility (18px/700 weight, from a much
       smaller original) - at that size 5 pills (flags + "International"-
       length names) don't come close to fitting a stacked mobile column,
       wrapping to several rows and ballooning the card's height. */
    .intl-language-pill {
        font-size: 13px;
        font-weight: 600;
        padding: 6px 12px;
        gap: 6px;
    }

    .intl-languages {
        gap: 10px;
    }
}

/* ==========================================================================
   SMILE REELS SECTION - Instagram-style Video Wall + Modal
   ========================================================================== */

:root {
    /* Also used by .reels-item/.reels-cta-link/.reels-modal when reused outside
       .reels-section (e.g. the Treatment page's Smile Gallery slider). */
    --reels-accent: rgba(193, 150, 86, 1);
}

.reels-section {
    position: relative;
}

.reels-section::before {
    content: '';
    position: absolute;
    bottom: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(72, 137, 241, 0.2) 0%, rgba(110, 173, 239, 0) 70%);
    z-index: 0;
    pointer-events: none;
}

.reels-container {
    position: relative;
    z-index: 1;
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.reels-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
    text-align: left;
    margin: 0 0 50px;
}

.reels-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--reels-accent);
    margin-bottom: 16px;
}

.reels-kicker::before,
.reels-kicker::after {
    content: '';
    display: inline-block;
    width: 26px;
    height: 1px;
    background: var(--reels-accent);
}

.reels-title {
    font-size: 36px;
    line-height: 1.25;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin: 0;
}

.reels-title-accent {
    color: var(--reels-accent);
}

.reels-description {
    flex: 0 1 380px;
    font-size: 15px;
    line-height: 1.6;
    color: #6b6b76;
    padding-top: 6px;
}

.reels-cta-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 40px auto 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--reels-accent);
    text-decoration: none;
    transition: gap 0.25s ease;
}

.reels-cta-link svg {
    transition: transform 0.25s ease;
}

.reels-cta-link:hover {
    gap: 12px;
}

.reels-cta-link:hover svg {
    transform: translateX(4px);
}

/* Pill-button treatment for the homepage reels CTA only (see .reels-cta-link
   above for the plain text-link style still used on the Treatment page's
   light-background Smile Gallery). */
.reels-cta-pill {
    gap: 8px;
    padding: 14px 28px;
    background: #ffffff;
    border-radius: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    font-size: 14px;
    color: rgba(153, 161, 175, 1);
}

.reels-cta-pill svg {
    color: rgba(153, 161, 175, 1);
}

.reels-cta-pill:hover {
    gap: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.reels-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* The Treatment page's paged Smile Gallery reuses .reels-grid (for the modal
   JS's data-reels hook) together with .story-results-slider-wrap (for the
   generic slide/dots JS) on the same element - .reels-grid's 5-column grid
   above would otherwise lay its two children (.gallery-slides and the
   prev/next+dots controls) out side by side as grid items instead of
   stacking them. */
.reels-grid.story-results-slider-wrap {
    display: block;
}

.reels-item {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 18px;
    overflow: hidden;
    border: none;
    padding: 0;
    cursor: pointer;
    background: #1e1e26;
    text-align: left;
}

.reels-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.reels-item:hover img {
    transform: scale(1.06);
}

.reels-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.75) 100%);
    pointer-events: none;
}

.reels-item-featured {
    grid-column: 1 / -1;
    aspect-ratio: 3 / 1;
    border-radius: 20px;
}

.reels-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(26, 31, 46, 1);
    z-index: 2;
    transition: transform 0.25s ease, background 0.25s ease;
}

.reels-item-featured .reels-play {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.92);
    color: rgba(26, 31, 46, 1);
}

.reels-item:hover .reels-play {
    transform: translate(-50%, -50%) scale(1.08);
}

.reels-item-info {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 14px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}

.reels-item-category {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--reels-accent);
}

.reels-item-name {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
}

.reels-item-location {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.reels-item-featured .reels-item-info {
    left: 28px;
    right: 28px;
    bottom: 24px;
    gap: 5px;
}

.reels-item-featured .reels-item-category {
    font-size: 12px;
}

.reels-item-featured .reels-item-name {
    font-size: 22px;
}

.reels-item-featured .reels-item-location {
    font-size: 13px;
}

.reels-empty {
    text-align: center;
    color: rgba(0, 0, 0, 0.4);
}

/* Modal */
.reels-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.reels-modal.active {
    display: flex;
}

.reels-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 14, 0.8);
    backdrop-filter: blur(4px);
}

.reels-modal-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1140px;
    max-height: 90vh;
    background: #F8F6F0;
    border-radius: 24px;
}

.reels-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2c2c33;
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.reels-modal-scroll {
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 24px;
    padding: 50px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.reels-modal-scroll::-webkit-scrollbar {
    width: 6px;
}

.reels-modal-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.reels-modal-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.reels-modal-body {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 60px;
    align-items: stretch;
}

/* Instagram-style post card */
.reels-embed-wrap {
    position: relative;
    min-height: 650px;
    min-width: 326px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
}

/* Dim the thumbnail while loading so the spinner reads clearly against it */
.reels-embed-wrap.is-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 0;
}

.reels-embed-wrap iframe {
    max-width: 100% !important;
    position: relative;
    z-index: 1;
}

/* Instagram's blockquote is processed far off-screen (see .reels-blockquote-staging) and
   is never part of this visible tree, so there's nothing here for its script to reveal
   mid-conversion. Only our own fallback UI (below) and the final <iframe> ever show here. */
.reels-embed-fallback {
    display: none;
    position: relative;
    z-index: 1;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.reels-embed-wrap.embed-failed {
    flex-direction: column;
}

.reels-embed-wrap.embed-failed .reels-embed-fallback {
    display: flex;
}

.reels-embed-fallback-text {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.reels-embed-fallback-link {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--reels-accent);
    text-decoration: none;
    padding: 12px 22px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
}

/* Off-screen staging area: Instagram's embed.js needs the blockquote actually attached to
   the document to convert it, but the user should never see the raw blockquote/link while
   that happens - so it's processed here, far outside the viewport, and only the resulting
   <iframe> gets moved into the visible modal once conversion succeeds. */
.reels-blockquote-staging {
    position: fixed;
    top: 0;
    left: -9999px;
    width: 326px;
}

.reels-embed-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.reels-spinner {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    animation: reels-spin 0.8s linear infinite;
}

@keyframes reels-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Right info panel */
.reels-info {
    display: flex;
    flex-direction: column;
    padding-top: 4px;
}

.reels-modal-title {
    font-size: 28px;
    line-height: 1.3;
    font-weight: 800;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 14px;
}

.reels-modal-title-accent {
    color: var(--reels-accent);
}

.reels-modal-subtitle {
    font-size: 15px;
    color: #6b6b76;
    margin-bottom: 30px;
    max-width: 420px;
}

.reels-modal-thumbs {
    display: flex;
    gap: 14px;
    margin-bottom: 30px;
}

.reels-modal-thumb {
    position: relative;
    /* Fixed width, not flex:1 - with fewer than 3 reels (e.g. a Treatment page
       with only 1-2 matches), flex:1 stretched each thumb to fill the row,
       growing them (and, via aspect-ratio, their height) well past the size
       they're supposed to be - which also stretched the video column taller
       through .reels-modal-body's align-items:stretch, causing the dialog to
       need to scroll. Fixed width keeps thumbs - and everything else - the
       same size regardless of how many reels a given page has. */
    flex: 0 0 200px;
    aspect-ratio: 9 / 16;
    border-radius: 14px;
    overflow: hidden;
    border: 3px solid transparent;
    padding: 0;
    cursor: pointer;
    background: #e8e6de;
}

.reels-modal-thumb.active {
    border-color: var(--reels-accent);
}

.reels-modal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.reels-modal-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: auto;
}

.reels-modal-nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: #EFEDE5;
    color: #8a8a92;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

.reels-modal-nav .reels-modal-next {
    background: rgba(26, 31, 46, 1);
    color: #ffffff;
}

.reels-modal-nav button:hover {
    background: var(--reels-accent);
    color: #ffffff;
}

body.reels-modal-open {
    overflow: hidden;
}

/* Reels Responsive */
@media screen and (max-width: 1024px) {
    .reels-section {
        padding: 80px 0;
    }

    .reels-grid {
        gap: 16px;
    }

    .reels-title {
        font-size: 32px;
    }

    .reels-modal-scroll {
        padding: 40px;
    }

    .reels-modal-body {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .reels-embed-wrap {
        max-width: 340px;
        margin: 0 auto;
    }

    .reels-modal-subtitle {
        max-width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .reels-section {
        padding: 60px 0;
    }

    .reels-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    /* Caps this at 3 rows on mobile instead of showing every reel from
       the (desktop-sized) homepage's own limit_non_featured=12 call -
       row 1 is the full-width featured item, rows 2-3 are 3 per row at
       this column count, so the 8th .reels-item onward gets hidden. This
       is a pure CSS crop (the PHP side still renders/limits to the same
       12+1 it always did, shared with desktop) rather than a second,
       mobile-specific server-side limit. */
    .reels-grid .reels-item:nth-child(n+8) {
        display: none;
    }

    .reels-item-featured {
        aspect-ratio: 4 / 3;
    }

    .reels-item-featured .reels-item-name {
        font-size: 18px;
    }

    .reels-title {
        font-size: 26px;
    }

    .reels-modal-dialog {
        border-radius: 18px;
    }

    .reels-modal-scroll {
        padding: 26px;
        border-radius: 18px;
    }

    .reels-modal-close {
        top: 16px;
        right: 16px;
        width: 34px;
        height: 34px;
    }

    .reels-modal-title {
        font-size: 22px;
    }

    .reels-modal-thumbs {
        gap: 10px;
    }
}

@media screen and (max-width: 480px) {
    .reels-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Same 3-row cap as the 768px breakpoint above, recalculated for 2
       columns instead of 3 - row 1 is the full-width featured item, rows
       2-3 are 2 per row here, so the 6th .reels-item onward is hidden
       (overriding that breakpoint's n+8 cutoff, since this one's more
       specific/later in the cascade). */
    .reels-grid .reels-item:nth-child(n+6) {
        display: none;
    }

    .reels-modal {
        padding: 16px;
    }

    .reels-modal-scroll {
        padding: 20px;
    }

    .reels-modal-nav button {
        width: 40px;
        height: 40px;
    }
}

/* Main Content Area */
.custom-main {
    padding: 60px 0;
    min-height: 60vh;
}

/* Footer */
.custom-footer {
    background: #f8f9fa;
    padding: 40px 0;
    text-align: center;
    margin-top: 60px;
    border-top: 1px solid #e0e0e0;
}

/* ==========================================================================
   Responsive Design - Mobile First
   ========================================================================== */

/* Mobile Styles (Default - 320px and up) */
@media screen and (max-width: 768px) {
    .custom-nav ul {
        flex-direction: column;
        gap: 15px;
    }
    
    .custom-header .container {
        flex-direction: column;
        gap: 20px;
    }
    
    .custom-container {
        padding: 0 15px;
    }
}

/* Tablet Styles (768px and up) */
@media screen and (min-width: 768px) {
    .custom-main {
        padding: 80px 0;
    }
}

/* Desktop Styles (1024px and up) */
@media screen and (min-width: 1024px) {
    .custom-container {
        padding: 0 40px;
    }
}


/* Language Switcher */
.language-switcher {
    position: relative;
    margin-left: 20px;
}

.lang-button {
    background: transparent;
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.lang-button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.lang-button-flag {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

.current-lang {
    font-weight: 500;
}

/* Hidden by default (header shows the short code only) - the footer's own
   switcher swaps which of these two is visible instead (see
   .footer-bottom-content .current-lang / .current-lang-full). */
.current-lang-full {
    display: none;
}

.dropdown-arrow {
    transition: transform 0.3s ease;
}

.language-switcher.active .dropdown-arrow {
    transform: rotate(180deg);
}

/* Language Dropdown */
.lang-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    /* No blur/glass here (see .nav-menu .sub-menu's own comment for why). */
    background: #ffffff;
    border: 1px solid rgba(26, 31, 46, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    min-width: 180px;
    border-radius: 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    overflow: hidden;
}

.language-switcher.active .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: rgba(26, 31, 46, 1);
    text-decoration: none;
    transition: background 0.3s ease;
    position: relative;
}

/* Matches the phone-country-picker's own hover/active tint (.phone-intl-list
   li:hover/.is-active - #f5f0e8) so the two flag-list dropdowns sitewide
   share the same warm highlight instead of two different grays. */
.lang-option:hover {
    background: #f5f0e8;
}

.lang-option.active {
    background: #f5f0e8;
    color: rgba(26, 31, 46, 1);
    font-weight: 600;
}

.lang-option-flag {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}

.lang-option-name {
    flex: 1;
}

.lang-option-code {
    color: #9a9a9a;
    font-size: 11px;
}

.lang-option.active .lang-option-code {
    color: #2B2620;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: #ffffff;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 2px;
    background: currentColor;
    transition: all 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translateY(7px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

/* translateX(-4px) in addition to the same translateY/rotate as the top
   bar - rotate() + translateY() together don't just move this bar
   vertically onto the top bar's line, they also carry it a few px
   sideways (translateY happens in the bar's own rotated coordinate space,
   not the screen's), and that sideways nudge doesn't cancel out between
   the two bars' opposite rotation directions - this compensates so both
   bars actually cross at their center instead of landing slightly
   offset, i.e. a real X instead of a near-X. */
.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translateY(-10px) translateX(2px);
}

/* ==========================================================================
   Responsive Design - Mobile First
   ========================================================================== */

/* Mobile Styles (Default - 320px and up) */
@media screen and (max-width: 1024px) {
    .header-container {
        padding: 15px 30px;
        max-width: 100%;
    }
    
    .nav-menu {
        gap: 25px;
    }
    
    .nav-menu .sub-menu {
        max-width: 100%;
        width: 100%;
        gap: 25px;
        padding: 25px 30px;
    }
    
    .nav-menu .sub-menu > li {
        min-width: 150px;
    }
}

@media screen and (max-width: 768px) {
    .main-header {
        padding: 0;
        /* Its own floating card now (margin from every edge, including the
           top), matching the desktop bar's rounded treatment instead of the
           old edge-to-edge/flush-top bar. Always solid (not dependent on
           .is-scrolled/:hover, which on a touch device won't reliably be
           true) so the logo/hamburger stay legible over any hero photo or
           video - the drawer below already does the same for its own
           links, this brings the bar itself in line with that. */
        top: 12px;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        border-radius: 22px;
        background: rgba(248, 247, 242, 0.996);
        border: 1px solid rgba(180, 182, 186, 0.55);
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.05);
        /* `none`, not just omitted - still needs to cancel the desktop
           rule's own `transform: translateX(-50%)` (its `left: 50%`
           centering trick), but must NOT be any other transform value:
           that used to be translateZ(0) purely to make this element the
           containing block for the accordion's position: fixed, so its
           `top: 100%` would resolve against this bar instead of the
           viewport - now that the accordion is a fully separate floating
           card positioned via its own JS-measured --mobile-nav-top custom
           property, it needs `left`/`right` to resolve against the real
           viewport instead, which only happens when NO ancestor
           (including this one) has a transform at all. */
        transform: none;
    }

    /* The desktop .main-header.is-scrolled/:hover rule still matches here
       too (nothing scopes it to desktop only) and carries its own
       backdrop-filter - harmless-looking since this bar is already 99.6%
       opaque, except backdrop-filter *also* makes its element the
       containing block for any position: fixed descendant, which broke
       the accordion's own left/width math below (it'd resolve against
       this bar's inner box instead of the real viewport). A tap can leave
       :hover matching on mobile too, so this can't just be left alone on
       the assumption :hover never applies on a touch device - explicitly
       neutralized here instead, for every state. */
    .main-header,
    .main-header.is-scrolled,
    .main-header:hover {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* Always dark - see the "always solid" comment above; these no longer
       depend on .is-scrolled/.header-on-light on mobile. */
    .main-header .site-logo-text,
    .main-header .lang-button,
    .main-header .mobile-menu-toggle {
        color: rgba(26, 31, 46, 1);
    }

    .header-container {
        padding: 12px 20px;
        max-width: 100%;
    }
    
    /* Move language switcher and hamburger to the right */
    .main-navigation {
        order: 3;
    }
    
    .language-switcher {
        order: 2;
        margin-left: auto;
        margin-right: 15px;
    }
    
    .mobile-menu-toggle {
        order: 4;
        margin-left: 0;
    }
    
    .site-logo {
        order: 1;
    }

    .site-logo a {
        font-size: 20px;
    }

    .site-logo-icon {
        height: 26px;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .main-navigation {
        position: fixed;
        /* Gap below the header bar instead of sitting flush against it -
           both are now separate floating cards, matching .main-header's
           own top/left/right margin above. --mobile-nav-top (custom.js,
           updateMobileNavOffset()) is set to the header's real measured
           bottom edge + 12px, so this lines up exactly regardless of the
           header's actual height instead of a guessed fixed number; the
           68px fallback only matters before that JS runs once on load. */
        top: var(--mobile-nav-top, 68px);
        left: 12px;
        right: 12px;
        width: auto;
        /* Resets the base desktop rule's `flex: 1` (i.e. flex-basis: 0%) -
           meant for when this sits inline in .header-container as a flex
           child, and otherwise keeps constraining the width even now that
           it's taken out of flow as its own fixed overlay panel. Its
           padding-right: 35px is reset too, by this rule's own `padding`
           shorthand further down. */
        flex: none;
        border-radius: 22px;
        /* No blur/glass here (see .nav-menu .sub-menu's own comment for
           why) - the accordion .nav-menu .sub-menu inside it is already
           transparent (see its own mobile rule below), so this is the one
           place that actually needs to carry the background on phone
           widths. */
        background: #ffffff;
        border: 1px solid rgba(26, 31, 46, 0.08);
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.05);
        padding: 10px 20px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
        /* Stretches all the way down to the same 12px clearance from the
           bottom of the screen that the header keeps at the top -
           --mobile-nav-height (custom.js, updateMobileNavOffset()) is the
           exact viewport height minus this panel's own top offset and
           that bottom gap. 70vh here is only the fallback before that JS
           runs once on load. */
        height: var(--mobile-nav-height, 70vh);
        overflow-y: auto;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }
    
    .main-navigation::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    
    .main-navigation.mobile-active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .nav-menu {
        flex-direction: column;
        gap: 0;
        width: 100%;
    }
    
    .nav-menu > li {
        border-bottom: 1px solid rgba(26, 31, 46, 0.08);
        width: 100%;
        text-align: left;
    }

    /* Overrides .main-header's own idle-state white (meant for the
       floating desktop bar over a hero photo) - the mobile drawer is
       always its own solid white panel, never transparent-over-content, so
       its top-level items need dark text regardless of scroll/hover state. */
    .nav-menu > li > a {
        color: rgba(26, 31, 46, 1);
        padding: 15px 10px;
        width: 100%;
        justify-content: space-between;
        border-radius: 0;
    }
    
    .nav-menu .sub-menu {
        position: static;
        transform: none;
        max-width: none;
        width: calc(100% + 40px);
        margin: 0px -20px 0 -20px;
        gap: 0;
        padding: 10px 20px;
        opacity: 1;
        visibility: visible;
        background: transparent;
        /* The base rule's 2px solid gray border (style.css, .nav-menu
           .sub-menu above) is desktop-only by intent - reset to none here
           so mobile stays free to get its own separate border/treatment
           later without touching the desktop panel at all. */
        border: none;
        box-shadow: none;
        display: none;
        flex-direction: column;
        border-radius: 0;
    }

    /* Desktop-only glow - the mobile accordion stays a plain flat panel. */
    .nav-menu .sub-menu::before {
        display: none;
    }

    /* The compact desktop variant is more specific than the reset above, so it needs its
       own copy of the same mobile reset (same accordion behavior as Treatments). */
    .nav-menu .sub-menu.mega-menu-compact {
        position: static;
        transform: none;
        max-width: none;
        min-width: 0;
        width: calc(100% + 40px);
        margin: -12px -20px 0 -20px;
        gap: 0;
        border-radius: 0;
    }

    .nav-menu .menu-item-has-children.active > .sub-menu {
        display: block;
    }
    
    .nav-menu .sub-menu > li {
        min-width: 100%;
        width: 100%;
        margin-bottom: 15px;
        text-align: left;
    }

    /* No patient-story video in the mobile accordion - autoplaying video is
       too heavy for mobile data, and there's no hover state to justify it
       anyway. custom.js also skips calling hmcActivateNavVideos() for the
       mobile accordion tap handler, so the video's source is never even
       fetched, not just visually hidden. */
    .nav-menu .sub-menu > li.nav-video-card-slot {
        display: none;
    }

    .nav-video-card {
        max-width: 100%;
    }

    .nav-menu .category-items {
        padding-left: 0;
        width: 100%;
    }

    .nav-menu .category-items li {
        width: 100%;
        text-align: left;
        min-height: auto;
        margin-bottom: 10px;
    }

    /* Each category group (header + its items) becomes its own floating
       rounded card, matching the card language the rest of the redesigned
       mobile header/drawer already uses - scoped to .category-header only,
       so a plain leaf link (menu-depth-1, no children, e.g. "Smile
       Stories") stays an unboxed single row. */
    .nav-menu .sub-menu > li.category-header {
        background: #F2F0E9;
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 18px;
        padding: 14px 16px 6px;
    }

    /* Small gold dot before the header label, next to the existing
       border-bottom separator (desktop's .category-title rule, still
       active here) - the dot marker the mockup uses. */
    .nav-menu .sub-menu > li.category-header > .category-title {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .nav-menu .sub-menu > li.category-header > .category-title::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #C49E4E;
        flex-shrink: 0;
    }

    /* Each item becomes its own card (icon left, title+description stacked
       to the right) instead of a plain list row - same icon-left/text-right
       layout the desktop mega menu already uses, just with a background,
       rounded corners and padding wrapped around the whole row. */
    .nav-menu .category-items li a {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
        text-align: left;
        padding-bottom: 10px;
        border-radius: 16px;
    }

    .nav-menu .sub-menu > li.menu-depth-1 > a {
        display: block;
        width: 100%;
        text-align: left;
        padding: 12px 0;
        font-size: 14px;
    }

    .nav-menu .sub-menu > li.menu-depth-1 > a::before {
        display: none;
    }

    .nav-menu .category-title {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.5px;
        padding: 15px 0 10px;
        width: 100%;
        text-align: left;
    }
    
    .nav-menu .category-items .menu-title {
        text-align: left;
        width: 100%;
    }
    
    .nav-menu .category-items .menu-desc {
        text-align: left;
        width: 100%;
    }
    
    /* No top padding here (was 10px) - .sub-menu's own 15px top padding
       already provides breathing room before the first category header,
       and each category's own 15px margin-bottom (.sub-menu > li) already
       separates it from the next one; stacking a second top gap on top of
       both of those is what made "Treatments" to "Smile Makeovers" read as
       an oversized gap. */
    .nav-menu .category-title {
        font-size: 13px;
        padding: 0 0 8px;
    }

    /* Category headers with real children under Treatments (Smile
       Makeovers, Dental Implants, etc.) render as a plain <span>, not a
       link, so they get no chevron/toggle from the generic
       .menu-item-has-children > a::after rule - added here, along with the
       collapse/expand behavior itself (see the matching click handler in
       custom.js). Scoped to the <span> form only: an is-clickable-header
       category (e.g. "Smile Stories") renders as a real <a> and already
       gets that generic chevron - it's meant to navigate, not toggle. */
    .nav-menu .category-header > span.category-title {
        position: relative;
        padding-right: 20px;
        cursor: pointer;
    }

    .nav-menu .category-header > span.category-title::after {
        content: '';
        position: absolute;
        right: 2px;
        top: 50%;
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid currentColor;
        transform: translateY(-50%) rotate(180deg);
        transition: transform 0.3s ease;
    }

    .nav-menu .category-header.collapsed > span.category-title::after {
        transform: translateY(-50%) rotate(0deg);
    }

    .nav-menu .category-header.collapsed > .category-items {
        display: none;
    }

    .language-switcher {
        margin-left: auto;
        margin-right: 15px;
    }

    /* The "Approved by" WhatClinic/Trustpilot/Google row is a real in-flow
       <li> (see the comment on .nav-menu .sub-menu > li.mega-menu-footer-row
       above), not hover-positioned, so it works as-is in the accordion -
       just needs its 3 badges to fit the accordion's much narrower width
       instead of desktop's flex-end-aligned single row. */
    .mega-menu-reviews-wrapper {
        padding-left: 10px;
        justify-content: start;
        flex-wrap: wrap;
        row-gap: 8px;
        gap: 14px;
    }
}

@media screen and (max-width: 480px) {
    .main-header {
        padding: 0;
    }

    .header-container {
        padding: 10px 15px;
    }
    
    .site-logo img,
    .site-logo .custom-logo {
        max-height: 40px;
    }
    
    .nav-menu > li > a {
        font-size: 14px;
    }
    
    .nav-menu .category-items .menu-title {
        font-size: 14px;
    }
    
    .nav-menu .category-items .menu-desc {
        font-size: 12px;
    }
}

/* ==========================================================================
   Get Started / Consultation Section (homepage only)
   ========================================================================== */

.getstarted-section {
    padding-bottom: 100px;
}

.getstarted-container {
    position: relative;
    z-index: 1;
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 670px;
    gap: 48px;
    align-items: start;
}

.getstarted-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 20px;
}

.getstarted-kicker::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
}

.getstarted-title {
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
}

.getstarted-title-accent {
    color: rgba(193, 150, 86, 1);
}

.getstarted-description {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    max-width: 640px;
    margin-bottom: 40px;
}

.getstarted-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0;
    margin: 0;
}

.getstarted-feature {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}

.getstarted-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(193, 150, 86, 0.12);
    color: rgba(193, 150, 86, 1);
    flex-shrink: 0;
}

/* Light redesign - also applied on page-consultation.php (the standalone
   Consultation page reuses this same section), since the base
   .getstarted-section text colors above assume a navy hero background
   that, on its own, this section never actually has - without this, the
   white/near-white text was invisible against the page's plain white
   background. */
.getstarted-section-home {
    position: relative;
}

/* Roughly aligned under the form card's left edge (the card sits in the
   grid's fixed 670px right column) - a percentage left-offset rather than
   a fixed px value so it tracks reasonably across different container
   widths instead of only being correct at one specific viewport. */
.getstarted-section-home::before {
    content: '';
    position: absolute;
    bottom: -90px;
    left: 52%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(72, 137, 241, 0.2) 0%, rgba(110, 173, 239, 0) 70%);
    z-index: 0;
    pointer-events: none;
}

.getstarted-section-home .getstarted-title {
    color: rgba(26, 31, 46, 1);
}

.getstarted-section-home .getstarted-description {
    color: rgba(107, 107, 118, 1);
}

.getstarted-section-home .getstarted-feature {
    color: rgba(26, 31, 46, 1);
}

.getstarted-reassurance {
    margin: 14px 0 0;
    font-size: 12px;
    color: #8a8a8a;
    text-align: center;
}

.getstarted-form-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px;
}

.getstarted-form-title {
    font-size: 22px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 6px;
}

.getstarted-form-subtitle {
    font-size: 14px;
    color: #6c6c6c;
    margin-bottom: 28px;
}

.getstarted-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.getstarted-field {
    margin-bottom: 18px;
}

.getstarted-field label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c6c6c;
    margin-bottom: 8px;
}

/* The "(optional)" suffix on the treatment field's label - same size/color
   as the rest of the label, just not shouty-uppercase-bold, so it reads as
   a de-emphasized hint rather than an equally-weighted second word. */
.getstarted-field-optional {
    text-transform: none;
    font-weight: 400;
}

.getstarted-field input,
.getstarted-field textarea,
.getstarted-field select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: rgba(26, 31, 46, 1);
    background: #ffffff;
    transition: border-color 0.2s ease;
}

.getstarted-field select {
    cursor: pointer;
}

/* Extra breathing room when this section is the first thing on its own page
   (Consultation page) instead of sitting further down the homepage */
.getstarted-section-page {
    padding-top: 160px;
}

/* ==========================================================================
   Smile Stories Page - Hero Banner
   ========================================================================== */

.stories-hero-section {
    position: relative;
    padding-top: 140px;
    background-color: #1a1f2e;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.stories-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(26, 31, 46, 0.9) 0%, rgba(26, 31, 46, 0.5) 45%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(180deg, rgba(26, 31, 46, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
}

.stories-hero-content {
    position: relative;
    z-index: 1;
    max-width: 1550px;
    margin: 0 auto;
    padding: 50px 40px 60px;
}

.stories-hero-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 18px;
}

.stories-hero-kicker::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
}

.stories-hero-title {
    font-size: 42px;
    line-height: 1.15;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 16px;
}

.stories-hero-description {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    max-width: 480px;
    margin-bottom: 30px;
}

.stories-hero-stats {
    display: flex;
    gap: 48px;
}

.stories-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stories-hero-stat-number {
    font-size: 24px;
    font-weight: 700;
    color: rgba(193, 150, 86, 1);
}

.stories-hero-stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

/* Reused inside the new .treatment-single-hero-text column (Smile Stories
   index hero) - that column is a fixed ~35% width against a light page
   background, not the old full-width dark photo-overlay hero this
   component was designed for, so it needs its own dark label color here
   instead of the white-on-dark original above. All 3 in one row per spec -
   a tighter gap than the original 48px keeps them from reaching too far
   into the photo underneath (which starts partway through the column, not
   at its edge). */
.treatment-single-hero-text .stories-hero-stats {
    flex-wrap: nowrap;
    gap: 20px;
    margin-bottom: 32px;
}

.treatment-single-hero-text .stories-hero-stat {
    flex-shrink: 0;
}

.treatment-single-hero-text .stories-hero-stat-label {
    color: rgba(26, 31, 46, 0.6);
}

/* ==========================================================================
   Smile Stories Page - Featured Case + Story Grid
   ========================================================================== */

.stories-grid-section {
    background: #F8F6F0;
    padding: 90px 0;
}

.stories-grid-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.stories-section-kicker {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 20px;
}

.featured-case-card {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 0;
    background: #1a1f2e;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 70px;
    min-height: 450px;
}

.featured-case-media {
    position: relative;
    min-height: 260px;
    background-color: #333;
    background-size: cover;
    background-position: center;
}

.featured-case-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(35%);
}

.featured-case-play {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
}

.featured-case-content {
    padding: 40px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.featured-case-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 5px 14px;
    background: rgba(193, 150, 86, 1);
    color: rgba(26, 31, 46, 1);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.featured-case-category {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(193, 150, 86, 1);
}

.featured-case-name {
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
}

.featured-case-meta {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 14px;
}

.featured-case-quote {
    font-size: 16px;
    font-style: italic;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    border-left: 2px solid rgba(193, 150, 86, 1);
    padding-left: 16px;
    margin-bottom: 18px;
}

.featured-case-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(193, 150, 86, 1);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.featured-case-link:hover {
    gap: 12px;
}

.stories-grid-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 30px;
}

.stories-grid-header .stories-section-kicker {
    margin-bottom: 0;
}

.stories-grid-note {
    font-size: 13px;
    color: #6c6c6c;
}

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

.story-card {
    display: block;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.story-card.is-hidden {
    display: none;
}

.story-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.story-card-media {
    position: relative;
    height: 340px;
    background-color: #e5e5e5;
}

.story-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 8px 14px;
    background: rgba(193, 150, 86, 1);
    color: rgba(26, 31, 46, 1);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 20px;
}

.story-card-content {
    padding: 22px 24px 26px;
}

.story-card-name {
    font-size: 17px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 4px;
}

.story-card-meta {
    font-size: 12px;
    color: #6c6c6c;
    margin-bottom: 12px;
}

.story-card-quote {
    font-size: 14px;
    font-style: italic;
    line-height: 1.5;
    color: #444444;
    margin-bottom: 16px;
}

.story-card-tags {
    display: flex;
    gap: 8px;
}

.story-card-tag {
    padding: 4px 12px;
    background: #F8F6F0;
    color: #666666;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
}

/* ==========================================================================
   CTA Banner ("Could your story be next?") - homepage + Smile Stories
   ========================================================================== */

.cta-banner-section {
    background: rgb(15 18 28);
    padding: 90px 0;
    text-align: center;
}

.cta-banner-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta-banner-kicker {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 16px;
}

.cta-banner-title {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 14px;
}

.cta-banner-description {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 30px;
}

@media screen and (max-width: 1024px) {
    .featured-case-card {
        grid-template-columns: 1fr;
    }

    .featured-case-media {
        min-height: 220px;
    }

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

@media screen and (max-width: 768px) {
    .stories-hero-section {
        padding-top: 110px;
    }

    .stories-hero-content {
        padding: 30px 20px 40px;
    }

    .stories-hero-title {
        font-size: 32px;
    }

    .stories-hero-stats {
        gap: 30px;
        flex-wrap: wrap;
    }

    .stories-grid-section {
        padding: 60px 0;
    }

    .stories-grid-container {
        padding: 0 20px;
    }

    .featured-case-content {
        padding: 30px 24px;
    }

    .stories-grid-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

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

    .getstarted-section-page {
        padding-top: 120px;
    }

    .cta-banner-section {
        padding: 60px 0;
    }

    .cta-banner-title {
        font-size: 26px;
    }
}

.getstarted-field input::placeholder,
.getstarted-field textarea::placeholder {
    color: #b3b3b3;
}

.getstarted-field input:focus,
.getstarted-field textarea:focus {
    outline: none;
    border-color: rgba(193, 150, 86, 1);
}

.getstarted-field textarea {
    resize: vertical;
}

.phone-intl-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 14px;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    background: #ffffff;
    transition: border-color 0.2s ease;
}

.phone-intl-field:focus-within {
    border-color: rgba(193, 150, 86, 1);
}

.phone-intl-icon {
    display: flex;
    align-items: center;
    color: #9a9a9a;
    flex-shrink: 0;
}

.phone-intl-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    color: rgba(26, 31, 46, 1);
    flex-shrink: 0;
}

.phone-intl-flag {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.phone-intl-iso {
    font-weight: 600;
}

.phone-intl-chevron {
    color: #9a9a9a;
    transition: transform 0.2s ease;
}

.phone-intl-trigger[aria-expanded="true"] .phone-intl-chevron {
    transform: rotate(180deg);
}

.phone-intl-divider {
    width: 1px;
    height: 24px;
    background: #e2e2e2;
    flex-shrink: 0;
}

.phone-intl-field input[type="tel"] {
    flex: 1;
    min-width: 0;
    width: auto;
    border: none;
    padding: 12px 0;
    border-radius: 0;
    font-size: 14px;
    font-family: inherit;
    color: rgba(26, 31, 46, 1);
    background: transparent;
}

.phone-intl-field input[type="tel"]:focus {
    outline: none;
    border-color: transparent;
}

.phone-intl-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 280px;
    max-width: 90vw;
    background: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    z-index: 20;
    padding: 10px;
}

.phone-intl-search {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    margin-bottom: 8px;
}

.phone-intl-search:focus {
    outline: none;
    border-color: rgba(193, 150, 86, 1);
}

.phone-intl-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 240px;
    overflow-y: auto;
}

.phone-intl-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.phone-intl-list li:hover,
.phone-intl-list li.is-active {
    background: #f5f0e8;
}

.phone-intl-list li img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.phone-intl-list-name {
    flex: 1;
    color: rgba(26, 31, 46, 1);
}

.phone-intl-list-code {
    color: #6c6c6c;
}

.phone-intl-empty {
    text-align: center;
    font-size: 13px;
    color: #6c6c6c;
    padding: 16px 0;
    margin: 0;
}

.getstarted-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.getstarted-submit {
    width: 100%;
    padding: 16px;
    background: rgba(193, 150, 86, 1);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.3s ease;
}

.getstarted-submit:hover {
    background: rgba(173, 130, 66, 1);
}

.getstarted-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.getstarted-disclaimer {
    text-align: center;
    font-size: 12px;
    color: #6c6c6c;
    margin-top: 14px;
}

.getstarted-form-message {
    font-size: 13px;
    text-align: center;
    margin-top: 12px;
    min-height: 1px;
}

.getstarted-field-error {
    display: block;
    color: #c0392b;
    font-size: 12px;
    margin-top: 6px;
}

.getstarted-field.has-error input,
.getstarted-field.has-error textarea,
.getstarted-field.has-error .phone-intl-field {
    border-color: #c0392b;
}

.contact-form-checkbox.has-error {
    color: #c0392b;
}

.getstarted-form-message.is-error {
    color: #c0392b;
}

.getstarted-form-message.is-success {
    color: #2e7d32;
}

/* ==========================================================================
   Consultation Form - 2-step wizard (shared by every .hmc-consultation-form:
   Get Started, Contact, Blog sidebar). Step 1 is the existing contact
   fields; step 2 is the optional health-intake checklist rendered by
   template-parts/consultation-step2.php. Only .is-active is shown -
   toggled in custom.js, not the native `hidden` attribute, so it can't be
   silently overridden by a competing display rule anywhere else.
   ========================================================================== */
.consult-form-step {
    display: none;
}

.consult-form-step.is-active {
    display: block;
}

/* hmcGoToStep2() in custom.js scrolls the <form> itself to the top of the
   viewport when advancing to step 2 - without this, the fixed floating
   header (position: fixed, ~77px tall) lands right on top of it and hides
   the "Step 2/2" header and health question. scroll-margin-top is
   respected natively by scrollIntoView(), so the scroll stops with this
   much clearance instead. */
.hmc-consultation-form {
    scroll-margin-top: 110px;
}

.consult-step-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
}

.consult-step-label {
    font-size: 15px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
}

.consult-step-optional {
    font-size: 13px;
    color: #9a9aa2;
}

.consult-health-title {
    font-size: 18px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 6px;
}

.consult-health-question {
    font-size: 14px;
    font-weight: 600;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 4px;
}

.consult-health-hint {
    font-size: 12px;
    color: #9a9aa2;
    margin-bottom: 22px;
}

.consult-health-group {
    margin-bottom: 22px;
}

.consult-health-group:last-child {
    margin-bottom: 0;
}

.consult-health-group-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 8px;
}

.consult-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    cursor: pointer;
}

.consult-checkbox-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    accent-color: rgba(193, 150, 86, 1);
    border-radius: 4px;
    cursor: pointer;
}

.consult-checkbox-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.consult-checkbox-row-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(26, 31, 46, 1);
}

.consult-checkbox-row-desc {
    font-size: 12px;
    color: #9a9aa2;
}

.consult-step-back {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 4px;
    background: none;
    border: none;
    text-align: center;
    color: #6c6c6c;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.consult-step-back:hover {
    color: rgba(26, 31, 46, 1);
}

.getstarted-success-message {
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    color: rgba(26, 31, 46, 1);
    padding: 60px 20px;
}

@media screen and (max-width: 1024px) {
    .getstarted-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .getstarted-form-card {
        max-width: 520px;
    }
}

@media screen and (max-width: 768px) {
    .getstarted-section {
        padding: 60px 0;
    }

    .getstarted-container {
        padding: 0 20px;
    }

    .getstarted-title {
        font-size: 32px;
    }

    .getstarted-form-card {
        padding: 28px;
        max-width: 100%;
    }

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

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    background: rgba(20, 18, 16, 1);
    padding-top: 80px;
}

.site-footer-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Inline-editor pencil override for this footer's own small, tightly-packed
   inline fields (a trust-badge rating, an hours value, the open/closed
   status, a single link) - the plugin's sitewide default (a 30px button
   popped out -14px/-14px past the target's own top-right corner, see
   hmc-inline-editor's inline-editor.css) works fine for a normal block of
   text, but here it lands squarely on top of the very next inline sibling
   (the word "reviews", the adjoining hours row, etc.). Moved to the
   right, vertically centered on the field instead, and shrunk, so it
   floats clear of neighboring text without touching the plugin's own
   sitewide CSS. */
/* Inside the field's own box (its dashed hover outline), not poking out
   past its edge - also sidesteps the earlier hover-gap problem entirely
   (nothing to cross to reach it, since it's inside the hoverable area to
   begin with). */
.site-footer [data-hmc-tm] > .hmc-ie-edit-btn {
    width: 22px;
    height: 22px;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    font-size: 10px;
}

/* The marquee text itself never stops moving (see .footer-bottom-marquee-
   track's animation), so hovering any single word of it is like chasing a
   moving target - the data-hmc-tm attribute lives on the stationary outer
   wrapper instead (see footer.php), which normally spans the full 100vw
   bleed width (deliberately, for the real visual effect). In edit mode
   only, shrunk back to the normal content width so its hover area/pencil
   anchor sits somewhere sane instead of off past the browser edge. */
body.hmc-ie-active .footer-bottom-marquee {
    left: 50%;
    right: auto;
    width: auto;
    /* min(), not a bare max-width:1550px - on a browser window narrower
       than 1550px, a fixed max-width still overflows both edges equally,
       which pushed the pencil (anchored to this element's own right edge)
       out past the actual viewport, off past where any real click can
       land. Never wider than the viewport itself (minus the same 40px
       side margin the real container uses) fixes that at any width. */
    max-width: min(1550px, calc(100vw - 80px));
    transform: translateX(-50%);
    padding: 0 40px;
    /* Base rule sets pointer-events:none (it's a purely decorative layer
       for real visitors, sitting behind the real clickable footer-bottom-
       content) - re-enabled here so it can actually be hovered/clicked to
       edit at all. */
    pointer-events: auto;
}

/* This element also has overflow:hidden (clips the scrolling track so it
   never causes a horizontal scrollbar) - the sitewide pencil position
   above (top:50%, right:-30px, i.e. intentionally poking outside the
   field's own box) gets silently clipped away by that same overflow, in a
   way z-index can't fix. Pulled back inside the box instead, just for this
   one field. */
body.hmc-ie-active .footer-bottom-marquee > .hmc-ie-edit-btn {
    top: 10px;
    right: 10px;
    transform: none;
}

/* "Ready to see your new smile?" card - first thing in the footer, above
   the licenses row and the 4-column link grid. The gradients are layered
   overlays (not a flat fill) so the card reads as a subtle glass panel
   sitting on the footer's own dark background rather than a hard-edged
   block - a faint top-to-bottom white sheen plus a warm gold glow behind
   the title, with only the top edge getting a hairline highlight border. */
.footer-consult-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    padding: 36px 40px;
    border-radius: 22px;
    margin-bottom: 100px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%),
        radial-gradient(circle at 0% 0%, rgba(196, 158, 78, 0.25) 0%, rgba(196, 158, 78, 0) 30%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-consult-card-text {
    max-width: 560px;
}

.footer-consult-card-kicker {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 10px;
}

.footer-consult-card-title {
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px;
    line-height: 1.3;
}

.footer-consult-card-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.footer-consult-card-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.footer-consult-card-btn.footer-consult-card-btn {
    border-radius: 999px;
    padding: 15px 26px;
}

.footer-consult-card-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 24px;
    border-radius: 999px;
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.footer-consult-card-whatsapp:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Dark-footer override of the homepage's own light-background licenses
   section (.licenses-section etc., see hmc_render_licenses_html() /
   style.css's light-background rules) - same markup and data, just
   restyled to sit on the footer's dark background. Logos stay in their
   real colors here (no grayscale-until-hover) since they already read
   fine against the dark card in the reference design. */
.footer-licenses-wrap {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 48px;
}

.footer-licenses-wrap .licenses-section {
    padding: 0 0 40px;
}

.footer-licenses-wrap .licenses-container {
    padding: 0;
}

.footer-licenses-wrap .licenses-title {
    color: rgba(193, 150, 86, 1);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-licenses-wrap .licenses-subtitle {
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 32px;
}

/* Logos keep their own natural shape (same as the homepage) - the circular
   look on some of them (Order of Dentists, ISO, CE) just comes from those
   particular source files already being circular badges, not a mask
   applied here. */
.footer-licenses-wrap .license-logo-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
}

.footer-licenses-wrap .license-logo {
    filter: none;
    max-width: 68%;
    max-height: 68%;
    width: auto;
}

.footer-licenses-wrap .license-item:hover .license-logo {
    filter: none;
}

.footer-licenses-wrap .license-name {
    color: rgba(255, 255, 255, 0.7);
}

.footer-licenses-wrap .license-logo-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    font-size: 9px;
    padding: 0 6px;
}

/* Plain, non-interactive badges in the footer - no certificate lightbox
   trigger here (unlike the homepage's own licenses section), just the
   circular logo and its name. */
.footer-licenses-wrap .license-eye-btn {
    display: none;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 3fr 1.1fr;
    align-items: start;
    gap: 40px;
    padding-bottom: 60px;
}

/* Brand column's WhatClinic/Trustpilot/Google trust badges, stacked one per
   row (unlike the compact inline row the mega-menu's own "Approved by"
   footer uses) - reuses the exact same rating/count theme_mod fields as
   everywhere else those numbers appear, just laid out for this column. */
.footer-trust-badges {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 26px;
}

.footer-trust-badge {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    column-gap: 8px;
}

.footer-trust-badge-icon {
    width: 16px;
    height: 16px;
    align-self: center;
    flex-shrink: 0;
}

.footer-trust-badge-whatclinic .footer-trust-badge-name {
    color: #4fb3e8;
    font-size: 20px;
}

.footer-trust-badge-name {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    padding-right: 15px;
}

/* Real brand logos (WhatClinic/Trustpilot/Google) replacing the old
   icon+text-label pair - each SVG already includes its own wordmark in
   the correct brand colors for a dark background (WhatClinic blue,
   Trustpilot's green star + white type, Google's multicolor "G" + white
   type), so no color filter is needed here, just sizing. width:auto
   keeps each one's own wide wordmark aspect ratio from being distorted. */
.footer-trust-badge-logo {
    padding-right: 15px;
    height: 21px;
    width: auto;
    flex-shrink: 0;
    align-self: center;
}

.footer-trust-badge-logo-whatclinic {
    height: 17px;
}

.footer-trust-badge-rating {
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
}

.footer-trust-badge-rating-num {
    font-size: 24px;
}

.footer-trust-badge-rating-denom {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
}

.footer-trust-badge-caption {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}

/* Middle region: the categorized Treatments row, then a second row of
   Stories & Gallery / About Us / Resources / Get in Touch - both share the
   same 4-column rhythm so the two rows line up under each other. */
.footer-links-area {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-treatments-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.footer-treatments-block .footer-col-heading {
    margin-bottom: 14px;
}

.footer-menu-grouped {
    gap: 10px;
}

.footer-menu-heading {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
}

.footer-menu-subheading {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    margin-top: 4px;
}

.footer-discover-row {
    padding-top: 32px;
}

/* Right region: bordered "Tirana Clinic" card, visually distinct from the
   plain-text contact list the other columns use. */
.footer-contact-card {
    background: rgba(255, 255, 255, 0.04);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

.footer-contact-card-heading {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(193, 150, 86, 1);
}

.footer-contact-card-address {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.footer-contact-card-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact-card-row svg {
    flex-shrink: 0;
    color: rgba(193, 150, 86, 1);
}

.footer-contact-card-row:hover {
    color: rgba(193, 150, 86, 1);
}

.footer-contact-card-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.footer-contact-card-hours {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-contact-card-hours-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}

.footer-contact-card-hours-days {
    color: rgba(255, 255, 255, 0.5);
}

.footer-contact-card-hours-time {
    color: #ffffff;
    font-weight: 600;
}

.footer-contact-card-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

.footer-contact-card-status-dot {
    position: relative;
    z-index: 1;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

/* Open: green (not the site's primary gold - a status dot reads as
   "live"/available via the universal green convention) + a soft pulsing
   ring behind it (same technique as .whatsapp-float-pulse/.consult-float-
   pulse elsewhere) - the ring sits at z-index:-1 relative to the dot
   itself, which stays above it, and the status text next to it stays
   above both. Closed: plain static gray dot, no pulse - matches the
   reference design's own two states. */
.footer-contact-card-status-dot.is-open {
    background: rgba(37, 211, 102, 1);
}

.footer-contact-card-status-dot.is-open::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(37, 211, 102, 1);
    z-index: -1;
    animation: footer-status-pulse-ring 2.4s ease-out infinite;
}

@keyframes footer-status-pulse-ring {
    0% { opacity: 0.6; transform: scale(1); }
    100% { opacity: 0; transform: scale(3); }
}

.footer-contact-card-status span {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .footer-contact-card-status-dot.is-open::before {
        animation: none;
    }
}

.footer-contact-card-directions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(193, 150, 86, 1);
    text-decoration: none;
}

.footer-contact-card-directions:hover {
    text-decoration: underline;
}

.footer-logo {
    margin-bottom: 20px;
}

.footer-logo img,
.footer-logo .custom-logo {
    max-height: 40px;
    width: auto;
}

.footer-description {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.6);
    max-width: 340px;
    margin-bottom: 24px;
}

.footer-social {
    display: flex;
    gap: 14px;
}

.footer-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    transition: all 0.3s ease;
}

.footer-social-icon:hover {
    background: white;
    color: rgba(26, 31, 46, 1);
}

.footer-col-heading {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 15px;
}

.footer-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 0;
    margin: 0;
}

.footer-menu a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-menu a:hover {
    color: rgba(193, 150, 86, 1);
}

.footer-contact-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    margin: 0;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.footer-contact-item svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: rgba(193, 150, 86, 1);
}

.footer-contact-item a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact-item a:hover {
    color: rgba(193, 150, 86, 1);
}

.footer-contact-hours {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footer-hours-days {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-hours-time {
    color: #ffffff;
    font-weight: 600;
}

.footer-bottom {
    position: relative;
    padding: 44px 0 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Giant faint wordmark, continuously scrolling behind the copyright row -
   the track holds 6 copies of the text back to back and the keyframe
   shifts it left by exactly 1/6th of its own width per loop, so it wraps
   with no visible seam. Faded at both edges via mask-image rather than an
   overlay div, so it works regardless of the footer's exact background
   color. left:50%/width:100vw/translateX(-50%) is the standard "break out
   of a max-width container" trick - .footer-bottom sits inside
   .site-footer-container (max-width:1550px), but this should span the true
   viewport edge to edge, not stop at that container's boundary. Safe
   against the usual 100vw-causes-a-horizontal-scrollbar pitfall since
   body/html already clip overflow-x sitewide (see body's own rule). */
.footer-bottom-marquee {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 100vw;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}

.footer-bottom-marquee-track {
    display: flex;
    flex-shrink: 0;
    animation: footer-marquee 40s linear infinite;
}

.footer-bottom-marquee-track span {
    flex-shrink: 0;
    font-size: 110px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.05);
    white-space: nowrap;
    padding-right: 60px;
}

@keyframes footer-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-16.6667%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer-bottom-marquee-track {
        animation: none;
    }
}

.footer-bottom-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-bottom-content .footer-legal-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Footer's own language switcher - a bordered pill (distinct from the
   header's plain transparent button) that spells out the full language
   name instead of the 2-letter code. */
.footer-bottom-content .language-switcher {
    margin-left: 0;
}

.footer-bottom-content .lang-button {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    padding: 8px 14px;
}

.footer-bottom-content .lang-button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.footer-bottom-content .current-lang {
    display: none;
}

.footer-bottom-content .current-lang-full {
    display: inline;
    font-size: 13px;
    font-weight: 600;
}

.footer-bottom-content .lang-dropdown {
    top: auto;
    bottom: calc(100% + 10px);
}

.footer-copyright {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
}

.footer-legal-menu {
    list-style: none;
    display: flex;
    gap: 24px;
    padding: 0;
    margin: 0;
}

.footer-legal-menu a {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-legal-menu a:hover {
    color: rgba(193, 150, 86, 1);
}

/* Written for the current 3-region footer-grid (brand | links-area
   (Treatments row + Stories/About/Resources/Get in Touch row) |
   contact-card) - a much bigger structure than this file's original
   4-column footer, which these two breakpoints used to target (dead
   selectors like .footer-col-contact and a bare .footer-col left over
   from that version have been replaced below). */
@media screen and (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .footer-treatments-row,
    .footer-discover-row {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 28px;
    }

    .footer-contact-card {
        max-width: 480px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 768px) {
    .site-footer-container {
        padding: 0 20px;
    }

    .footer-grid {
        gap: 40px;
        padding-bottom: 40px;
    }

    /* Desktop forces one line (nowrap) since that column is a known,
       narrow-but-consistent width - a phone viewport, once this row runs
       full-width, can be even narrower still, so wrapping is allowed again
       as a safety net against real overflow/cutoff. */
    .footer-trust-badge {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    /* Treatments/Discover columns stay a 2-across grid (inherited from the
       1024px rule above) and left-aligned all the way down to phone
       widths, rather than collapsing to a single centered column. */

    /* Consult card: text above, both buttons stacked full-width below,
       instead of the desktop side-by-side layout squeezing everything. */
    .footer-consult-card {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 28px 24px;
    }

    .footer-consult-card-actions {
        flex-direction: column;
    }

    .footer-consult-card-btn,
    .footer-consult-card-whatsapp {
        justify-content: center;
        width: 100%;
    }

    .footer-contact-card {
        max-width: none;
    }

    .footer-bottom-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    /* .lang-dropdown's base rule anchors it via right:0, which assumes
       the switcher sits near the right edge (true on desktop, where this
       row is a wide flex spread). Once .footer-bottom-content stacks and
       the switcher moves to the start (far left) above, that same
       right:0 anchor pushes the dropdown's left edge off-screen. Anchor
       from the left instead, matching where the button actually is here. */
    .footer-bottom-content .lang-dropdown {
        right: auto;
        left: 0;
    }
}

/* ==========================================================================
   Smile Story - Single Page
   ========================================================================== */

.story-hero-section {
    background: rgba(26, 31, 46, 1);
    padding: 150px 0 70px;
}

.story-hero-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Shared sitewide breadcrumb component - outline circle before every
   earlier item, dotted connector between items, filled+pulsing gold
   circle before the current item. Rendered by hmc_render_breadcrumb_html()
   (functions.php) and used by every template that shows a breadcrumb.
   Default colors match the light-background context (Treatment single,
   Blog, Doctor single, Reviews); .hmc-breadcrumb-on-dark flips text/dot
   color for the dark photo-hero pages (Smile Stories, Doctors index,
   Offers/Treatments index, Contact, Before & After, Dental Tourism,
   About). */
.hmc-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 13px;
    color: rgba(26, 26, 26, 0.55);
    margin-bottom: 28px;
    min-width: 0;
}

.hmc-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.hmc-breadcrumb-item a {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.hmc-breadcrumb-item a:hover {
    color: rgba(193, 150, 86, 1);
}

.hmc-breadcrumb-current {
    color: rgba(26, 31, 46, 1);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.hmc-breadcrumb-dot {
    box-sizing: border-box;
    position: relative;
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1.5px solid currentColor;
}

.hmc-breadcrumb-dot-current {
    border-color: rgba(193, 150, 86, 1);
    background: rgba(193, 150, 86, 1);
}

/* Mirrors the .consult-float-pulse / .whatsapp-float-pulse-ring sitewide
   pulse pattern, but with a much larger scale factor - those rings sit on
   ~52px floating buttons, this dot is ~7px, so a 1.5x scale would be
   imperceptible here. */
.hmc-breadcrumb-dot-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(193, 150, 86, 1);
    animation: hmc-breadcrumb-pulse-ring 2.4s ease-out infinite;
}

@keyframes hmc-breadcrumb-pulse-ring {
    0% { opacity: 0.6; transform: scale(1); }
    100% { opacity: 0; transform: scale(4); }
}

.hmc-breadcrumb-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 0 0 auto;
    margin: 0 8px;
    opacity: 0.6;
}

.hmc-breadcrumb-connector-dot {
    flex: 0 0 auto;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
}

.hmc-breadcrumb-on-dark {
    color: rgba(255, 255, 255, 0.4);
}

.hmc-breadcrumb-on-dark .hmc-breadcrumb-current {
    color: rgba(255, 255, 255, 0.9);
}

@media screen and (max-width: 640px) {
    .hmc-breadcrumb {
        font-size: 12px;
        margin-bottom: 55px;
    }

    .hmc-breadcrumb-item {
        gap: 6px;
    }

    .hmc-breadcrumb-connector {
        gap: 2px;
        margin: 0 6px;
    }
}

.story-hero-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 60px;
    align-items: start;
}

.story-hero-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 18px;
}

.story-hero-kicker::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
}

.story-hero-title {
    font-size: 38px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 16px;
    max-width: 620px;
}

.story-hero-description {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    max-width: 560px;
    margin-bottom: 26px;
}

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

.story-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
}

.story-pill svg {
    flex-shrink: 0;
    color: rgba(193, 150, 86, 1);
}

.story-summary-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
}

.story-summary-title {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 18px;
}

.story-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.story-summary-stat {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.story-summary-number {
    font-size: 24px;
    font-weight: 700;
    color: rgba(193, 150, 86, 1);
}

.story-summary-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

/* Testimonial + Clinical Notes + Video */

.story-testimonial-section {
    background: #F8F6F0;
    padding: 90px 0;
}

.story-testimonial-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 375px;
    gap: 50px;
    align-items: start;
}

.story-section-kicker {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 16px;
}

.story-section-kicker::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
    margin-right: 10px;
    vertical-align: middle;
}

.story-section-kicker-center {
    text-align: center;
}

.story-testimonial-byline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.story-testimonial-who {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.story-testimonial-name {
    font-size: 16px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
}

.story-testimonial-location {
    font-size: 13px;
    color: #6c6c6c;
}

.story-rating {
    display: flex;
    gap: 3px;
}

.story-rating .star-filled {
    color: rgba(193, 150, 86, 1);
}

.story-rating .star-empty {
    color: #d8d4c8;
}

.story-testimonial-quote {
    font-size: 19px;
    font-style: italic;
    font-weight: 600;
    line-height: 1.5;
    color: rgba(26, 31, 46, 1);
    border-left: 3px solid rgba(193, 150, 86, 1);
    padding-left: 20px;
    margin-bottom: 22px;
}

.story-testimonial-p {
    font-size: 15px;
    line-height: 1.75;
    color: #555555;
    margin-bottom: 16px;
}

.story-clinical-block {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #e5e1d5;
}

.story-doctor-byline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.story-doctor-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(193, 150, 86, 0.15);
    color: rgba(193, 150, 86, 1);
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

.story-doctor-who {
    display: flex;
    flex-direction: column;
}

.story-doctor-name {
    font-size: 14px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
}

.story-doctor-title {
    font-size: 12px;
    color: #6c6c6c;
}

.story-clinical-heading {
    font-size: 17px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 12px;
}

/* Video card - reuses .reels-item/.reels-play, adds a caption footer */

.story-video-wrap {
    position: sticky;
    top: 110px;
}

.story-video-card {
    position: relative;
    aspect-ratio: 3 / 4;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: #1e1e26;
}

.story-video-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.story-video-card-static {
    cursor: default;
}

.story-instagram-embed {
    border-radius: 18px;
    margin: 0 auto;
}

.story-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(193, 150, 86, 1);
    color: rgba(26, 31, 46, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.story-video-label {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
}

.story-video-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px 18px 16px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.story-video-footer strong {
    color: #ffffff;
    font-size: 14px;
}

.story-video-footer span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
}

/* Treatment Phases */

.story-phases-section {
    background: #ffffff;
    padding: 90px 0;
}

.story-phases-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

.story-phases-header {
    text-align: center;
    margin-bottom: 50px;
}

.story-phases-title {
    font-size: 30px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 12px;
}

.story-phases-description {
    font-size: 15px;
    line-height: 1.6;
    color: #6c6c6c;
    max-width: 560px;
    margin: 0 auto;
}

.story-phases-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.story-phase-row {
    display: grid;
    grid-template-columns: 300px 1fr;
    border-radius: 14px;
    overflow: hidden;
}

.story-phase-info {
    background: rgba(26, 31, 46, 1);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.story-phase-number {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: rgba(193, 150, 86, 1);
}

.story-phase-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
}

.story-phase-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 6px;
    padding: 5px 12px;
    border: 1px solid rgba(193, 150, 86, 0.4);
    border-radius: 20px;
    color: rgba(193, 150, 86, 1);
    font-size: 11px;
    font-weight: 600;
}

.story-phase-checklist {
    list-style: none;
    background: #F8F6F0;
    padding: 30px 34px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.story-phase-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #444444;
}

.story-phase-checklist li svg {
    flex-shrink: 0;
    color: rgba(193, 150, 86, 1);
    margin-top: 1px;
}

/* Before & After (Results) */

.story-results-section {
    background: #F8F6F0;
    padding: 90px 0;
}

.story-results-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.story-results-header {
    text-align: center;
    margin-bottom: 50px;
}

.story-results-title {
    font-size: 30px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 12px;
}

.story-results-description {
    font-size: 15px;
    line-height: 1.6;
    color: #6c6c6c;
    max-width: 640px;
    margin: 0 auto;
}

.story-results-slider-wrap {
    max-width: 860px;
    margin: 0 auto 50px;
}

.story-results-slider-wrap .gallery-slides {
    width: 100%;
    justify-self: auto;
}

.story-results-slider-wrap .hmca-compare {
    aspect-ratio: 4 / 3;
}

/* Desktop default: the "More Smile Stories" carousel built alongside
   .stories-grid in custom.js stays hidden until the 768px toggle below
   swaps the two over. */
.stories-mobile-slider {
    display: none;
}

.story-results-slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 28px;
}

/* .gallery-dots normally sits stacked below the arrows (its own margin-top
   provides that gap) - here it's a flex sibling of the arrows instead, so
   that top margin would push it out of vertical center with them. */
.story-results-slider-controls .gallery-dots {
    margin-top: 0;
}

.story-results-footer {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 40px;
    border-top: 1px solid #e5e1d5;
}

.story-results-footer-text strong {
    display: block;
    font-size: 16px;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 4px;
}

.story-results-footer-text p {
    font-size: 13px;
    color: #6c6c6c;
}

.story-view-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: 1px solid #d8d4c8;
    border-radius: 8px;
    color: rgba(26, 31, 46, 1);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: #ffffff;
    white-space: nowrap;
    transition: all 0.25s ease;
}

.story-view-all-btn:hover {
    border-color: rgba(193, 150, 86, 1);
    color: rgba(193, 150, 86, 1);
}

/* Story CTA */

.story-cta-section {
    background: rgba(26, 31, 46, 1);
    padding: 90px 0;
    text-align: center;
}

.story-cta-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.story-cta-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

@media screen and (max-width: 1100px) {
    .story-hero-grid,
    .story-testimonial-container {
        grid-template-columns: 1fr;
    }

    .story-video-wrap {
        position: static;
        max-width: 420px;
    }

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

@media screen and (max-width: 768px) {
    .story-hero-section {
        padding: 120px 0 50px;
    }

    .story-hero-container,
    .story-testimonial-container,
    .story-phases-container,
    .story-results-container {
        padding: 0 20px;
    }

    .story-hero-title {
        font-size: 28px;
    }

    .story-testimonial-quote {
        font-size: 17px;
    }

    .story-phases-section,
    .story-results-section,
    .story-testimonial-section,
    .story-cta-section {
        padding: 60px 0;
    }

    .story-results-slider-controls {
        gap: 14px;
    }

    .story-results-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    /* "More Smile Stories" becomes a one-story-per-slide carousel here
       instead of the plain stacked grid - see the .story-results-container
       > .stories-grid block in custom.js, which builds .stories-mobile-slider
       as a sibling of the original grid rather than replacing it, so this
       is a pure display toggle between the two. */
    .story-results-container > .stories-grid {
        display: none;
    }

    .stories-mobile-slider {
        display: block;
    }
}

/* ==========================================================================
   LEGAL PAGES - Privacy Policy, Terms of Service, Cookie Policy
   ========================================================================== */

.legal-hero-section {
    background: rgba(26, 31, 46, 1);
    padding: 140px 0 60px;
}

.legal-hero-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.legal-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 18px;
}

.legal-hero-kicker::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
}

.legal-hero-title {
    font-size: 44px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.legal-content-section {
    background: #ffffff;
    padding: 70px 0 110px;
}

.legal-content-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.legal-body {
    max-width: 780px;
}

.legal-body h2 {
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin: 44px 0 16px;
}

.legal-body h2:first-child {
    margin-top: 0;
}

.legal-body p {
    font-size: 16px;
    line-height: 1.75;
    color: #6b6b76;
    margin: 0 0 18px;
}

.legal-body p:first-of-type {
    font-size: 17px;
    color: rgba(26, 31, 46, 1);
}

.legal-body ul,
.legal-body ol {
    margin: 0 0 18px;
    padding-left: 22px;
}

.legal-body li {
    font-size: 16px;
    line-height: 1.75;
    color: #6b6b76;
    margin-bottom: 10px;
}

.legal-body strong {
    color: rgba(26, 31, 46, 1);
}

.legal-body a {
    color: rgba(193, 150, 86, 1);
    text-decoration: underline;
}

.legal-body a:hover {
    color: rgba(26, 31, 46, 1);
}

@media screen and (max-width: 640px) {
    .legal-hero-section {
        padding: 110px 0 44px;
    }

    .legal-hero-title {
        font-size: 30px;
    }

    .legal-content-section {
        padding: 44px 0 70px;
    }

    .legal-body h2 {
        font-size: 20px;
        margin: 34px 0 12px;
    }
}

/* ==========================================================================
   BLOG - index, archives, single post
   ========================================================================== */

.blog-hero-section {
    position: relative;
    padding: 140px 0 60px;
    background-color: rgba(26, 31, 46, 1);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.blog-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(26, 31, 46, 0.9) 0%, rgba(26, 31, 46, 0.5) 45%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(180deg, rgba(26, 31, 46, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
}

.blog-hero-content {
    position: relative;
    z-index: 1;
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.blog-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 18px;
}

.blog-hero-kicker::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
}

.blog-hero-title {
    font-size: 42px;
    line-height: 1.15;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 16px;
}

.blog-hero-description {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    max-width: 560px;
}

/* Grid (shared: blog index, archives, related posts) */

.blog-grid-section {
    background: #F8F6F0;
    padding: 90px 0;
}

.blog-grid-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.blog-empty {
    font-size: 16px;
    color: #6b6b76;
}

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

.blog-card {
    display: block;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.blog-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.blog-card-media {
    position: relative;
    height: 220px;
    background-color: #e5e5e5;
}

.blog-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 8px 14px;
    background: rgba(193, 150, 86, 1);
    color: rgba(26, 31, 46, 1);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 20px;
}

.blog-card-content {
    padding: 22px 24px 26px;
}

.blog-card-title {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 10px;
}

.blog-card-excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #6b6b76;
    margin-bottom: 16px;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #6c6c6c;
}

.blog-card-meta-dot {
    opacity: 0.6;
}

/* Pagination */

.blog-pagination {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

.blog-pagination .nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    background: #ffffff;
    color: rgba(26, 31, 46, 1);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.blog-pagination .page-numbers:hover {
    background: rgba(193, 150, 86, 1);
    color: #ffffff;
}

.blog-pagination .page-numbers.current {
    background: rgba(26, 31, 46, 1);
    color: #ffffff;
}

.blog-pagination .page-numbers.dots {
    background: transparent;
}

.blog-index-hero-section {
    background: #faf9f7;
    padding: 140px 0 40px;
}

.blog-index-hero-container,
.blog-index-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.blog-index-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 18px;
}

.blog-index-hero-kicker::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
}

.blog-index-hero-title {
    font-size: 55px;
    line-height: 1.15;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 16px;
}

/* Two independently-editable lines (hmc_blog_hero_title_line1/2) stacked
   on top of each other - a deliberate, admin-chosen break rather than
   wherever the browser happens to wrap one long string. */
.blog-index-hero-title-line {
    display: block;
}

.blog-index-hero-subtitle {
    font-size: 16px;
    line-height: 1.6;
    color: #6b6b76;
    max-width: 560px;
}

.blog-index-section {
    background: #faf9f7;
}

/* Featured Post - image-led, category/title/read-more overlaid on a bottom
   scrim rather than sitting below the image like the grid cards below it. */
.blog-index-featured-card {
    display: block;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    margin-bottom: 40px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.blog-index-featured-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.blog-index-featured-media {
    position: relative;
    aspect-ratio: 2.6 / 1;
    background-color: #e5e5e5;
}

.blog-index-featured-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-index-featured-time {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 1;
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(185, 184, 179, 0.55);
    border: #0000001a solid 2px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.blog-index-featured-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 40px;
    background:
        linear-gradient(0deg, rgba(26, 31, 46, 0.92) 0%, rgba(26, 31, 46, 0.35) 55%, rgba(26, 31, 46, 0) 100%);
}

.blog-index-featured-badge {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 20px;
    background: rgba(193, 150, 86, 1);
    color: rgba(26, 31, 46, 1);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 18px;
}

.blog-index-featured-title {
    font-size: 28px;
    line-height: 1.25;
    font-weight: 700;
    color: #ffffff;
    max-width: 640px;
    margin-bottom: 18px;
}

.blog-index-featured-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: rgba(193, 150, 86, 1);
}

/* Filter pills - same functional/JS classes (.offers-filter-pills,
   .offers-filter-pill, is-active) as Doctors/Offers/Smile Gallery, just
   restyled: white outline pills + a solid dark active state instead of the
   cream/gold treatment those pages use. */
.blog-index-filters {
    justify-content: flex-start;
    margin-bottom: 36px;
}

/* .blog-index-filters (2 classes) rather than .blog-index-filter-pill alone
   (1 class) - .offers-filter-pill's own same-specificity base rule sits
   later in this file, and CSS breaks same-specificity ties by source order,
   so a single-class override here would silently lose to it regardless of
   what colors are written below. */
.blog-index-filters .blog-index-filter-pill {
    background: #ffffff;
    border: 1px solid #6b7484;
    color: #6b7484;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    font-size: 12px;
}

.blog-index-filters .blog-index-filter-pill:hover {
    background: #f2f0e6;
}

.blog-index-filters .blog-index-filter-pill.is-active {
    background: #191f2d;
    border-color: #191f2d;
    color: #ffffff;
}

/* Card slider - the shared hmc_render_grouped_slider_html() component (same
   one Before & After/Other Treatments use), just no dots/counter and the
   arrows grouped at the bottom-right instead of centered or spread apart. */
.blog-index-slider-wrap {
    max-width: 100%;
}

.blog-index-slider-wrap .gallery-dots-wrap {
    display: none;
}

.blog-index-slider-wrap .story-results-slider-controls {
    justify-content: flex-end;
    margin-top: 36px;
}

/* .gallery-arrow:hover's background is a CSS variable only defined inside
   .gallery-section - outside it (as here) the variable is unset, so the
   background falls through to transparent and the white icon vanishes
   against the page. Hardcode real colors instead, same fix already used by
   the Treatment page's own Before & After/Gallery/Related sliders. */
.blog-index-slider-wrap .gallery-arrow:hover {
    background: #191f2d;
    color: #ffffff;
}

.blog-index-slide-row {
    display: grid;
    grid-template-columns: repeat(var(--slide-cols, 3), 1fr);
    gap: 30px;
    width: 100%;
}

.blog-index-card {
    display: block;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.blog-index-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.blog-index-card.is-hidden {
    display: none;
}

.blog-index-card-media {
    height: 220px;
    background-color: #e5e5e5;
}

.blog-index-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-index-card-content {
    padding: 20px 22px 22px;
}

.blog-index-card-category {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 8px;
}

.blog-index-card-title {
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 18px;
    min-height: 44px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-index-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 12px;
}

.blog-index-card-time {
    color: #9a9aa2;
}

.blog-index-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: rgba(193, 150, 86, 1);
}

@media screen and (max-width: 1024px) {
    .blog-index-slide-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-index-featured-title {
        font-size: 24px;
    }
}

@media screen and (max-width: 640px) {
    .blog-index-hero-section {
        padding: 120px 0 32px;
    }

    .blog-index-hero-title {
        font-size: 30px;
    }

    .blog-index-slide-row {
        grid-template-columns: 1fr;
    }

    .blog-index-featured-media {
        aspect-ratio: 4 / 3;
    }

    .blog-index-featured-overlay {
        padding: 24px;
    }

    .blog-index-featured-title {
        font-size: 21px;
    }
}

@media screen and (max-width: 480px) {
    .blog-index-featured-overlay {
        padding: 18px;
    }

    .blog-index-featured-badge {
        padding: 5px 12px;
        font-size: 10px;
        margin-bottom: 12px;
    }

    .blog-index-featured-title {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .blog-index-featured-link {
        font-size: 13px;
    }

    .blog-index-featured-time {
        top: 14px;
        right: 14px;
        padding: 6px 12px;
        font-size: 11px;
    }
}

/* Single post header */

.blog-single-header {
    background: #faf9f7;
    padding: 140px 0 40px;
}

.blog-single-header-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.blog-single-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.blog-single-reading-time {
    font-size: 13px;
    color: #9a9aa2;
    white-space: nowrap;
    flex-shrink: 0;
}

.blog-single-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(193, 150, 86, 1);
    text-decoration: none;
    margin-bottom: 16px;
}

.blog-single-kicker:hover {
    color: #191f2d;
}

.blog-single-title {
    font-size: 44px;
    line-height: 1.2;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 28px;
}

.blog-single-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
}

.blog-single-byline {
    display: flex;
    align-items: center;
    gap: 14px;
}

.blog-single-byline img {
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
}

.blog-single-byline-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.blog-single-byline-name {
    font-size: 15px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
}

.blog-single-byline-role-sep {
    color: #9a9aa2;
    font-weight: 400;
    margin: 0 1px;
}

.blog-single-byline-role {
    color: #6b7484;
    font-weight: 500;
}

.blog-single-byline-date {
    font-size: 13px;
    color: #9a9aa2;
}

.blog-single-actions {
    display: flex;
    align-items: center;
    gap: 22px;
}

.blog-single-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: #6b7484;
    cursor: pointer;
    transition: color 0.2s ease;
}

.blog-single-action:hover {
    color: #191f2d;
}

.blog-single-header-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin-top: 32px;
}

.blog-single-featured-image {
    margin-top: 32px;
    border-radius: 20px;
    overflow: hidden;
}

.blog-single-featured-image img {
    display: block;
    width: 100%;
    aspect-ratio: 7 / 3;
    object-fit: cover;
}

/* Single post content */

.blog-single-content-section {
    background: #faf9f7;
    padding: 60px 0 20px;
}

.blog-single-content-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.blog-single-layout {
    display: grid;
    grid-template-columns: 1fr 385px;
    gap: 50px;
    /* align-items intentionally left at the default "stretch" - the TOC
       sidebar column needs to be as tall as the article column so the
       sticky box inside it has room to travel down the page as you scroll. */
}

.blog-content-col {
    max-width: 100%;
}

/* Optional per-post intro paragraph + "Medically reviewed by" credit line
   (inc/blog-fields.php) - sit above the main article body, both hidden
   entirely when left empty so older posts render unchanged. */
.blog-intro-text {
    font-size: 19px;
    line-height: 1.75;
    color: #2a2a32;
    margin-bottom: 20px;
}

.blog-intro-text strong {
    color: rgba(26, 31, 46, 1);
}

.blog-intro-text sup {
    color: rgba(193, 150, 86, 1);
    font-weight: 700;
}

.blog-reviewed-by {
    font-size: 14px;
    font-style: italic;
    color: #9a9aa2;
    margin-bottom: 24px;
}

.blog-reviewed-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin-bottom: 36px;
}

/* Share popup - opened from the header's "Share" button (see
   .blog-share-toggle in blog.js, same toggle-class/click-outside pattern as
   the nav's language switcher). */

.blog-share-popup-wrap {
    position: relative;
    padding-top: 5px;
}

.blog-share-popup {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

.blog-share-popup-wrap.active .blog-share-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.blog-share-label {
    font-size: 13px;
    font-weight: 600;
    color: #6b6b76;
    margin-right: 4px;
    white-space: nowrap;
}

.blog-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #F8F6F0;
    color: rgba(26, 31, 46, 1);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.blog-share-btn:hover {
    background: rgba(193, 150, 86, 1);
    color: #ffffff;
}

.blog-share-copied {
    font-size: 12px;
    color: rgba(193, 150, 86, 1);
    font-weight: 600;
}

/* Table of Contents */

.blog-toc-col {
    position: relative;
}

/* The TOC and the Free Consultation form card below it (see
   .treatment-consultation-card, reusing the exact same sidebar form as the
   Treatment single page) scroll together as one sticky unit - same
   single-sticky-wrapper pattern as .treatment-sidebar-sticky. */
.blog-sidebar-sticky {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog-toc {
    background: #ffffff;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.blog-toc-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    padding-bottom: 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.blog-toc nav {
    display: flex;
    flex-direction: column;
}

.blog-toc-link {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    color: #6b6b76;
    text-decoration: none;
    padding: 6px 0;
    transition: color 0.2s ease;
}

.blog-toc-link:hover,
.blog-toc-link.is-active {
    color: rgba(193, 150, 86, 1);
}

.blog-toc-link.is-active {
    font-weight: 700;
}

.blog-toc-level-3 {
    padding-left: 14px;
    font-size: 13px;
}

.blog-content p {
    font-size: 17px;
    line-height: 1.8;
    color: #3a3a42;
    margin: 0 0 20px;
}

.blog-content h2 {
    font-size: 26px;
    line-height: 1.3;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin: 44px 0 18px;
    scroll-margin-top: 110px;
}

.blog-content h3 {
    font-size: 21px;
    line-height: 1.3;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin: 36px 0 14px;
    scroll-margin-top: 110px;
}

.blog-content ul {
    margin: 0 0 20px;
    padding-left: 0;
    list-style: none;
}

.blog-content ol {
    margin: 0 0 20px;
    padding-left: 22px;
}

.blog-content li {
    font-size: 17px;
    line-height: 1.8;
    color: #3a3a42;
    margin-bottom: 10px;
}

/* Custom dot-with-halo marker (a solid center dot with a soft translucent
   ring around it) instead of a plain bullet - native ::marker can't do a
   halo, so this is a positioned ::before on the <li> instead, with
   list-style:none up on <ul> and matching left padding to make room for it.
   Ordered lists keep their normal numbers, untouched. */
.blog-content ul li {
    position: relative;
    padding-left: 32px;
}

.blog-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(193, 150, 86, 1);
    box-shadow: 0 0 0 6px rgba(193, 150, 86, 0.15);
}

.blog-content img {
    /* width (not just max-width) so a smaller source image still stretches
       to fill the content column instead of rendering at its own native
       pixel size when that's narrower than the column. */
    width: 100%;
    height: auto;
    border-radius: 14px;
    margin: 10px 0 30px;
}

/* Gutenberg's Image block wraps a captioned image in <figure>/<figcaption> -
   the image above already gets its margin/radius, this just styles the
   caption text and tightens the figure's own spacing around it. */
.blog-content figure {
    margin: 10px 0 30px;
}

.blog-content figure img {
    margin: 0 0 12px;
}

.blog-content figcaption {
    font-size: 14px;
    font-style: italic;
    color: #9a9aa2;
    padding-top: 15px;
}

.blog-content sup {
    color: rgba(193, 150, 86, 1);
    font-weight: 700;
}

/* FAQ accordion - native Gutenberg Details blocks (so each question/answer
   is independently WYSIWYG-editable, no raw HTML needed) grouped inside a
   Group block (.blog-faq-group) that becomes the single white card - the
   same visual design as the Treatment page's .treatment-faq-list, just
   built from core/details + core/group instead of custom markup. */
.blog-content .blog-faq-group {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 4px 22px;
    margin: 0 0 30px;
}

.blog-content .blog-faq-group .wp-block-details {
    padding: 18px 0;
    border-bottom: 1px solid #ece7db;
}

.blog-content .blog-faq-group .wp-block-details:last-child {
    border-bottom: none;
}

.blog-content .blog-faq-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(26, 31, 46, 1);
    cursor: pointer;
    list-style: none;
}

.blog-content .blog-faq-group summary::-webkit-details-marker {
    display: none;
}

.blog-content .blog-faq-group summary::after {
    content: '';
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%23C19656' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.25s ease;
}

.blog-content .blog-faq-group details[open] summary::after {
    transform: rotate(180deg);
}

.blog-content .blog-faq-group .wp-block-details p {
    font-size: 14px;
    line-height: 1.6;
    color: #6b6b76;
    margin: 14px 0 0;
}

/* Sources / citation list at the very end of an article - gold bold
   numbers instead of the plain default, matching the gold accent used
   throughout the rest of this article's markers/links. */
.blog-content .blog-sources-list li {
    margin-bottom: 14px;
}

.blog-content .blog-sources-list li::marker {
    color: rgba(193, 150, 86, 1);
    font-weight: 700;
}

/* Gutenberg's Table block - wrapped in the same <figure>/<figcaption> as
   the Image block above, so a table's caption (e.g. a data-source note)
   reuses that same italic-gray styling for free. Rows/columns beyond the
   header are left plain on purpose - bolding a specific row to highlight it
   (e.g. HMC's own pricing) is just normal bold formatting within a cell,
   not a fixed CSS rule, so any row can be the highlighted one. */
.blog-content table {
    width: 100%;
    /* separate (not collapse) - with collapse, the table's own outer border
       can get absorbed/resolved inconsistently against the cell borders
       below instead of rendering as its own clean frame. */
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.14);
}

.blog-content thead {
    background: #191f2d;
}

.blog-content th,
.blog-content td {
    /* Cancels the WP core table-block stylesheet's own default per-cell
       border (loaded separately from this theme's CSS) - without this,
       its grid lines show between every column too, not just rows. */
    border: none;
}

.blog-content th {
    text-align: left;
    padding: 22px 24px;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
}

.blog-content td {
    padding: 22px 24px;
    font-size: 15px;
    line-height: 1.5;
    color: #3a3a42;
}

.blog-content tbody tr {
    background: #ffffff;
}

.blog-content tbody tr:nth-child(even) {
    background: #faf9f7;
}

/* A row border starting from the second row only - the header's own dark
   background already separates it from the first row, so that boundary
   doesn't need one too. */
.blog-content tbody tr:not(:first-child) td {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.blog-content figure.wp-block-table {
    overflow-x: auto;
}

.blog-content blockquote {
    margin: 30px 0;
    padding: 20px 26px;
    border-left: 3px solid rgba(193, 150, 86, 1);
    background: #F8F6F0;
    font-size: 18px;
    font-style: italic;
    color: rgba(26, 31, 46, 1);
}

.blog-content strong {
    color: rgba(26, 31, 46, 1);
}

.blog-content a {
    color: rgba(193, 150, 86, 1);
    text-decoration: underline;
}

.blog-content a:hover {
    color: rgba(26, 31, 46, 1);
}

.blog-single-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 40px;
}

.blog-single-tag {
    padding: 6px 16px;
    background: #F8F6F0;
    color: #666666;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.blog-single-tag:hover {
    background: rgba(193, 150, 86, 1);
    color: #ffffff;
}

.blog-author-box {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 26px;
    background: #F8F6F0;
    border-radius: 14px;
    margin-bottom: 20px;
}

.blog-author-box img {
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
}

.blog-author-box-text strong {
    display: block;
    font-size: 16px;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 6px;
}

.blog-author-box-text p {
    font-size: 14px;
    line-height: 1.6;
    color: #6b6b76;
    margin: 0;
}

/* Related posts */

.blog-related-section {
    background: #ffffff;
    padding: 70px 0 90px;
}

.blog-related-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.blog-related-title {
    font-size: 28px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 30px;
}

@media screen and (max-width: 1100px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* minmax(0, 1fr), not a bare 1fr: with only 1fr, this single-column
       track still expands to fit the automatic min-content size of
       .blog-toc-col's content (the sidebar consultation form - its phone
       country-picker and other fields have their own intrinsic widths) -
       that silently pushed the whole grid, and the page, wider than the
       viewport at phone widths. Same issue already fixed on
       .treatment-profile-grid/.doctors-hero-media elsewhere. */
    .blog-single-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-content-col {
        max-width: 100%;
    }

    .blog-toc {
        position: static;
    }

    .blog-toc-col {
        order: -1;
        min-width: 0;
    }
}

@media screen and (max-width: 768px) {
    .blog-hero-section,
    .blog-single-header {
        padding-top: 110px;
    }

    .blog-hero-title {
        font-size: 30px;
    }

    .blog-single-title {
        font-size: 27px;
    }

    .blog-grid-section,
    .blog-related-section {
        padding: 50px 0;
    }

    .blog-grid-container,
    .blog-single-header-container,
    .blog-single-content-container,
    .blog-related-container {
        padding: 0 20px;
    }

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

    .blog-content p,
    .blog-content li {
        font-size: 16px;
    }

    .blog-author-box {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   HOW IT WORKS - homepage, under Why Choose Us
   ========================================================================== */

.how-it-works-section {
    /* Floating rounded card, like .hero-glass-panel/.hero-stats, rather than
       a full-bleed section - inset from the page edges on all sides. Every
       other section centers its content at max-width:1550px with 40px of
       container padding (see .treatments-container etc.) - since this card
       has no separate container div, its own outer edge needs to land at
       that same distance from the viewport edge: a flat 40px would keep
       growing past 1550px total width on wide screens instead of capping
       out and centering like the others do. */
    position: relative;
    overflow: hidden;
    background: rgba(26, 31, 46, 1);
    margin: 0 calc(35px + max(0px, (100vw - 1550px) / 2));
    padding: 85px 60px;
    border-radius: 32px;
}

/* Soft gold glow, a small contained circle (not stretched into a wide
   ellipse) - the animation below is what covers the section's full width/
   height, not the shape itself. */
.how-it-works-section::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -100px;
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(193, 150, 86, 0.3) 0%, rgba(193, 150, 86, 0) 70%);
    pointer-events: none;
    z-index: 0;
    animation: how-it-works-glow-drift 22s ease-in-out infinite;
}

/* Sweeps the circle all the way across the section: left to the section's
   far-left edge, down to its bottom, right back to the far-right edge,
   back up to the top - not just a small wobble around its resting spot.
   0%/100% share the resting position so the loop restarts seamlessly. */
@keyframes how-it-works-glow-drift {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(-1050px, 0); }
    50%      { transform: translate(-1050px, 480px); }
    75%      { transform: translate(0, 480px); }
}

@media (prefers-reduced-motion: reduce) {
    .how-it-works-section::before {
        animation: none;
    }
}

.how-it-works-container {
    position: relative;
    z-index: 1;
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.how-it-works-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
    text-align: left;
    margin: 0 0 64px;
}

.how-it-works-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 16px;
}

.how-it-works-kicker::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
}

.how-it-works-title {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

.how-it-works-description {
    flex: 0 1 340px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    text-align: left;
    padding-top: 25px;
}

.how-it-works-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.how-it-works-step {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 28px;
}

.how-it-works-step-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 22px;
}

.how-it-works-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(214, 168, 102, 1), rgba(193, 150, 86, 1));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.how-it-works-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.how-it-works-number {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255, 255, 255, 0.12);
}

.how-it-works-step-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
}

.how-it-works-step-description {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.55);
}

@media screen and (max-width: 900px) {
    .how-it-works-steps {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media screen and (max-width: 640px) {
    .how-it-works-section {
        /* Full-bleed edge-to-edge at this width instead of the floating
           inset card it is everywhere else - margin:0 removes the base
           rule's calc(35px + ...) side insets (a meaningful chunk of a
           phone's own width), border-radius:0 since rounded corners on an
           edge-to-edge section would just show the page's own background
           peeking through at each corner. */
        margin: 0;
        padding: 40px 0px;
        border-radius: 0;
    }

    /* No .how-it-works-container override here anymore - its base rule
       already uses the same padding:0 40px every other section's own
       container uses (.treatments-container, .why-choose-container, etc,
       none of which shrink it on mobile either), so this section's inner
       content now lines up with everyone else's instead of sitting at a
       narrower 16px inset that didn't match. */

    .how-it-works-header {
        margin-bottom: 40px;
    }

    .how-it-works-title {
        font-size: 28px;
    }
}

/* ==========================================================================
   Doctor Card (homepage "Meet the Doctors" + Doctors index grid)
   ========================================================================== */

.doctor-card {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.doctor-card.is-hidden {
    display: none;
}

.doctor-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.doctor-card-media {
    position: relative;
    height: 320px;
    background-color: #e5e5e5;
}

.doctor-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.doctor-card-media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #F8F6F0;
    color: rgba(193, 150, 86, 1);
    font-size: 64px;
    font-weight: 700;
}

/* Dark scrim behind the name/role overlay below, so white/gold text stays
   legible over any photo regardless of how light or busy it is. */
.doctor-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 100%);
    pointer-events: none;
}

.doctor-card-years {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    padding: 8px 14px;
    background: rgba(193, 150, 86, 1);
    color: rgba(26, 31, 46, 1);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 20px;
}

.doctor-card-media-info {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 16px;
    z-index: 1;
}

.doctor-card-content {
    /* Glass-tinted fill instead of a flat white card back, plus taller
       padding so this section itself gets more height (not the card as a
       whole). No backdrop-filter blur here (removed) - on the Doctors
       index page there's only a flat white section behind these cards, so
       it blurred nothing and did no visible work, while a blur this tall
       spanning a rounded, clipped card is a known cross-GPU compositor bug
       that renders a hard seam partway down the blurred region on some
       graphics drivers/screens but not others. The translucent background
       alone still gives the same soft glass tint against the homepage
       section's decorative glow blobs behind the edge cards there, just
       without the risky blur.
    */
    padding: 28px 24px 70px;
}

.doctor-card-name {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
}

.doctor-card-role {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(214, 168, 102, 1);
}

.doctor-card-bio {
    font-size: 14px;
    line-height: 1.6;
    color: #6b6b76;
    margin-bottom: 16px;
}

.doctor-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.doctor-card-tag {
    padding: 4px 12px;
    background: rgba(193, 150, 86, 0.15);
    color: rgba(163, 116, 56, 1);
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
}

.doctor-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* ==========================================================================
   Homepage "Meet the Doctors" Section (under How It Works)
   ========================================================================== */

.doctors-section {
    position: relative;
    padding-bottom: 100px;
}

/* Anchored to roughly where .doctor-cards-grid sits (lower than the
   header), and layered behind .doctors-container (z-index:1 below) so the
   cards read as sitting on top of/in front of the glow rather than the
   glow washing over them. */
.doctors-section::before,
.doctors-section::after {
    content: '';
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    width: 500px;
    height: 500px;
    z-index: 0;
    pointer-events: none;
}

.doctors-section::before {
    left: -80px;
    background: radial-gradient(circle, rgba(193, 150, 86, 0.3) 0%, rgba(193, 150, 86, 0) 70%);
}

.doctors-section::after {
    right: -80px;
    background: radial-gradient(circle, rgba(72, 137, 241, 0.3) 0%, rgba(110, 173, 239, 0) 70%);
}

.doctors-container {
    position: relative;
    z-index: 1;
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.doctors-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
    text-align: left;
    margin: 0 0 56px;
}

.doctors-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 16px;
}

.doctors-kicker::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
}

.doctors-title {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin: 0;
}

.doctors-description {
    flex: 0 1 380px;
    font-size: 15px;
    line-height: 1.6;
    color: #6b6b76;
    text-align: left;
    padding-top: 6px;
}

.doctors-footer {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

/* Doctors-section-only override - .btn-primary is a shared sitewide class
   (CTA banner, other pages' forms, etc.) where the solid gold fill is
   still correct, so this scopes the light pill treatment to just this
   button instead of changing the shared rule above. */
.doctors-footer .btn-primary {
    background: #ffffff;
    color: rgba(153, 161, 175, 1);
    border: none;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.doctors-footer .btn-primary:hover {
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Doctors Index Page - Hero + Marquee
   ========================================================================== */

.doctors-hero-section {
    background: rgba(26, 31, 46, 1);
    padding: 70px 0 90px;
}

.doctors-hero-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 40px 40px;
}

.doctors-hero-grid {
    display: grid;
    grid-template-columns: 1fr 700px;
    gap: 60px;
    align-items: center;
}

.doctors-hero-grid-solo {
    grid-template-columns: 1fr;
}

.doctors-hero-grid-solo .doctors-hero-text {
    max-width: 700px;
}

.doctors-hero-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 18px;
}

.doctors-hero-kicker::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
}

.doctors-hero-title {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 16px;
    max-width: 560px;
}

.doctors-hero-description {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    max-width: 520px;
    margin-bottom: 30px;
}

.doctors-hero-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.doctors-hero-secondary {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 3px;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.doctors-hero-secondary:hover {
    color: rgba(193, 150, 86, 1);
    border-color: rgba(193, 150, 86, 1);
}

/* Marquee: 2 rows of photos auto-scrolling in opposite directions, looping.
   Each row's track is the photo list duplicated 3x, animated exactly 1/3 of
   its own width so the loop point is invisible. */
.doctors-hero-media {
    position: relative;
    /* Without this, a single-column .doctors-hero-grid (≤1100px, see below)
       sizes its track to this element's own max-content width - the
       marquee's tripled-up photo tracks are wide by design (they scroll),
       so that intrinsic minimum blew past the real available width and
       pushed the whole page into horizontal overflow at phone widths.
       min-width:0 lets the grid actually clip it down to the column's real
       width instead - same fix as .treatment-main elsewhere. */
    min-width: 0;
}

.doctor-marquee {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 520px;
    overflow: hidden;
    border-radius: 20px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.doctor-marquee-row {
    flex: 1;
    overflow: hidden;
}

.doctor-marquee-track {
    display: flex;
    gap: 16px;
    width: max-content;
    height: 100%;
}

.doctor-marquee-photo {
    display: block;
    width: 150px;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
}

.doctor-marquee-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.doctor-marquee-row-right .doctor-marquee-track {
    animation: doctor-marquee-scroll 24s linear infinite reverse;
}

.doctor-marquee-row-left .doctor-marquee-track {
    animation: doctor-marquee-scroll 24s linear infinite;
}

@keyframes doctor-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-33.3333%); }
}

/* ==========================================================================
   Doctors Index Page - Grid
   ========================================================================== */

.doctors-grid-section {
    background: #ffffff;
    padding: 100px 0;
}

.doctors-grid-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.doctors-grid-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 56px;
}

.doctors-section-kicker {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 16px;
}

.doctors-grid-title {
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
}

.doctors-grid-empty {
    text-align: center;
    color: #6c6c6c;
    font-size: 14px;
}

/* ==========================================================================
   Doctor Single Page
   ========================================================================== */

.doctor-profile-section {
    background: #ffffff;
    padding: 90px 0 100px;
}

.doctor-profile-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 40px 40px;
}

.doctor-profile-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 50px;
}

.doctor-sidebar-card {
    position: sticky;
    top: 110px;
    background: #F8F6F0;
    border-radius: 18px;
    padding: 30px;
    text-align: center;
}

.doctor-sidebar-media {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px;
    background: #e5e5e5;
}

.doctor-sidebar-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.doctor-sidebar-media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(193, 150, 86, 0.15);
    color: rgba(193, 150, 86, 1);
    font-size: 56px;
    font-weight: 700;
}

.doctor-sidebar-name {
    font-size: 20px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 6px;
}

.doctor-sidebar-role {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 20px;
}

.doctor-sidebar-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: #6b6b76;
    padding: 14px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.doctor-sidebar-stat svg {
    color: rgba(193, 150, 86, 1);
    flex-shrink: 0;
}

.doctor-sidebar-university {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
}

.doctor-sidebar-university-logo-wrap {
    display: block;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.doctor-sidebar-university-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.doctor-sidebar-university-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.doctor-sidebar-university-text strong {
    font-size: 13px;
    color: rgba(26, 31, 46, 1);
}

.doctor-sidebar-university-text span {
    font-size: 12px;
    color: #6c6c6c;
}

.doctor-sidebar-cta {
    width: 100%;
    justify-content: center;
    margin-top: 20px;
}

.doctor-main {
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.doctor-block-kicker {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 18px;
}

.doctor-block-kicker::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
    margin-right: 10px;
    vertical-align: middle;
}

.doctor-about-text {
    font-size: 15px;
    line-height: 1.75;
    color: #444444;
}

.doctor-about-text p {
    margin-bottom: 16px;
}

.doctor-about-text p:last-child {
    margin-bottom: 0;
}

.doctor-pull-quote {
    margin-top: 24px;
    padding: 26px 30px;
    background: #F8F6F0;
    border-left: 3px solid rgba(193, 150, 86, 1);
    border-radius: 0 12px 12px 0;
    font-size: 17px;
    font-style: italic;
    line-height: 1.6;
    color: rgba(26, 31, 46, 1);
}

/* Video gallery: native horizontal scroll, arrow buttons step by one card */
.hmc-hscroll-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 6px;
    scrollbar-width: none;
}

.hmc-hscroll-track::-webkit-scrollbar {
    display: none;
}

.doctor-video-card {
    flex-shrink: 0;
    width: 220px;
    min-width: 220px;
    min-height: 0;
    aspect-ratio: 3 / 4;
    border-radius: 16px;
}

.hmc-hscroll-nav {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
}

.doctor-hscroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    color: #6b6b76;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.doctor-hscroll-btn:hover {
    background: rgba(193, 150, 86, 1);
    color: rgba(26, 31, 46, 1);
    border-color: rgba(193, 150, 86, 1);
}

.doctor-languages-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.doctor-language-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #F8F6F0;
    border-radius: 20px;
    font-size: 14px;
}

.doctor-language-name {
    font-weight: 600;
    color: rgba(26, 31, 46, 1);
}

.doctor-language-level {
    font-size: 12px;
    color: #6c6c6c;
}

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

.doctor-review-card {
    background: #F8F6F0;
    border-radius: 14px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.doctor-review-rating {
    display: flex;
    gap: 3px;
}

.doctor-review-rating .star-filled {
    color: rgba(193, 150, 86, 1);
}

.doctor-review-rating .star-empty {
    color: #d8d4c8;
}

.doctor-review-title {
    font-size: 15px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
}

.doctor-review-text {
    font-size: 14px;
    line-height: 1.6;
    color: #555555;
    flex: 1;
}

.doctor-review-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.doctor-review-who {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.doctor-review-who strong {
    font-size: 13px;
    color: rgba(26, 31, 46, 1);
}

.doctor-review-who span {
    font-size: 12px;
    color: #6c6c6c;
}

.doctor-review-date {
    font-size: 12px;
    color: #6c6c6c;
}

.doctor-review-source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(193, 150, 86, 1);
    text-decoration: none;
}

.doctor-review-source:hover {
    text-decoration: underline;
}

.doctor-credentials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.doctor-credentials-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.doctor-credentials-list li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 14px;
}

.doctor-credentials-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.doctor-credentials-list li strong {
    color: rgba(26, 31, 46, 1);
    font-size: 14px;
}

.doctor-credentials-list li span {
    color: #6c6c6c;
    font-size: 13px;
}

.doctor-credentials-list li .doctor-credentials-years {
    color: rgba(193, 150, 86, 1);
    font-weight: 600;
}

.doctor-credentials-list-simple li {
    font-size: 14px;
    color: #444444;
}

.doctor-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.doctor-gallery-item {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1;
    background: #e5e5e5;
}

.doctor-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 1100px) {
    .doctor-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .doctors-hero-grid {
        grid-template-columns: 1fr;
    }

    /* Was display:none here (a 700px-wide fixed column has nowhere to go
       once the grid collapses to 1 column) - stacks below the text instead
       now, at a shorter height so it still reads as a supporting visual
       rather than pushing the CTA buttons/rest of the page far down. */
    .doctors-hero-media {
        margin-top: 30px;
    }

    .doctor-marquee {
        height: 340px;
    }

    .doctor-marquee-photo {
        width: 120px;
    }

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

@media screen and (max-width: 640px) {
    .doctor-marquee {
        height: 240px;
        gap: 10px;
        border-radius: 16px;
    }

    .doctor-marquee-track {
        gap: 10px;
    }

    .doctor-marquee-photo {
        width: 90px;
        border-radius: 10px;
    }
}

@media screen and (max-width: 900px) {
    .doctors-section,
    .doctors-grid-section {
        padding: 70px 0;
    }

    .doctors-title {
        font-size: 28px;
    }

    .doctor-profile-grid {
        grid-template-columns: 1fr;
    }

    .doctor-sidebar-card {
        position: static;
    }

    .doctor-reviews-grid {
        grid-template-columns: 1fr;
    }

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

@media screen and (max-width: 640px) {
    .doctor-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    /* Shorter photo and tighter type at this width - the fixed 320px
       media height (fine at full card width) made each card look like a
       tall narrow strip once it was only ~half the screen wide. */
    .doctor-card-media {
        height: 180px;
    }

    .doctor-card-years {
        top: 10px;
        right: 10px;
        padding: 5px 10px;
        font-size: 9px;
    }

    .doctor-card-media-info {
        left: 12px;
        right: 12px;
        bottom: 10px;
    }

    .doctor-card-name {
        font-size: 14px;
    }

    .doctor-card-role {
        font-size: 10px;
    }

    .doctor-card-content {
        padding: 14px 14px 20px;
    }

    .doctor-card-bio {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .doctor-card-tags {
        gap: 6px;
    }

    .doctor-card-tag {
        padding: 3px 9px;
        font-size: 10px;
    }

    .doctors-hero-section {
        padding: 50px 0 60px;
    }

    .doctors-hero-title {
        font-size: 28px;
    }

    .doctors-hero-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .doctors-hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .doctors-grid-title {
        font-size: 26px;
    }

    .doctor-credentials-grid {
        grid-template-columns: 1fr;
    }

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

/* ==========================================================================
   Homepage "Inside Health Medical Center" clinic photo collage
   (1 large photo left, 2x2 grid right) - under Meet the Doctors
   ========================================================================== */

.clinic-gallery-section {
    padding-top: 100px;
}

.clinic-gallery-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.clinic-gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
    text-align: left;
    margin: 0 0 48px;
}

.clinic-gallery-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 16px;
}

.clinic-gallery-kicker::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
}

.clinic-gallery-title {
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin: 0;
}

.clinic-gallery-description {
    flex: 0 1 340px;
    font-size: 15px;
    line-height: 1.6;
    color: #6b6b76;
    text-align: left;
    padding-top: 15px;
}

/* Single grid: main photo spans both rows in column 1, the 4 grid photos
   fill columns 2-3 across 2 rows - row height is set by the grid photos'
   aspect-ratio, and the spanning main photo stretches to match. */
.clinic-gallery-grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.2fr;
    /* minmax(0, 1fr) rather than a bare 1fr - on an auto-height grid
       container (no height set here), a bare 1fr row track is still sized
       by its content's max-content contribution, so the portrait main
       photo's own tall aspect ratio was winning the row height even after
       min-width/min-height:0 fixed the cropping - minmax(0, ...) caps each
       track's floor at 0 so the 1fr distribution actually governs instead,
       leaving the 4 aspect-ratio:4/3 photos to size the rows as intended. */
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

.clinic-gallery-photo {
    /* Grid items default to min-width/min-height:auto, which lets a
       REPLACED element's (the img inside) own intrinsic aspect-ratio
       act as a floor on this cell's track size - harmless for a
       landscape-ish photo, but a portrait-oriented one (uploaded for
       .clinic-gallery-photo-main, which spans both rows) can demand far
       more height than the 4 aspect-ratio:4/3 photos beside it ever
       would, inflating the whole grid (and, via the default
       align-items:stretch, stretching those other 4 taller too) well
       past its intended size. Same fix as .intl-block-image's - let the
       explicit aspect-ratio/column sizing win instead of the photo's
       own shape. */
    min-width: 0;
    min-height: 0;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #e5e5e5;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease-out, box-shadow 0.25s ease-out;
    will-change: transform;
}

.clinic-gallery-photo:hover {
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.22);
    z-index: 2;
}

.clinic-gallery-photo img {
    /* min-width/min-height:0 above only clears an unwanted MINIMUM-size
       floor - it doesn't stop this img's own intrinsic/max-content size
       from otherwise driving the row: .clinic-gallery-grid has no
       explicit height, so its "1fr" rows are still sized off each item's
       own content on an indefinite-height container, and
       .clinic-gallery-photo-main (which spans both rows and has no
       aspect-ratio of its own, unlike photo-1/2/3/4) was letting a
       portrait source photo's real proportions win that contest. Taking
       the img fully out of flow (position:absolute) removes it from that
       calculation entirely, same fix as .intl-block-image img - the
       wrapper's size then comes purely from the grid's own row sizing
       (governed by the 4 aspect-ratio:4/3 photos), with this img just
       filling whatever box results via object-fit:cover. */
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.clinic-gallery-photo-main {
    grid-column: 1;
    grid-row: 1 / 3;
}

.clinic-gallery-photo-1 {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: 4 / 3;
}

.clinic-gallery-photo-2 {
    grid-column: 3;
    grid-row: 1;
    aspect-ratio: 4 / 3;
}

.clinic-gallery-photo-3 {
    grid-column: 2;
    grid-row: 2;
    aspect-ratio: 4 / 3;
}

.clinic-gallery-photo-4 {
    grid-column: 3;
    grid-row: 2;
    aspect-ratio: 4 / 3;
}

@media screen and (max-width: 900px) {
    .clinic-gallery-section {
    padding-top: 100px;
    }

    .clinic-gallery-title {
        font-size: 26px;
    }

    .clinic-gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }

    .clinic-gallery-photo-main {
        grid-column: 1 / 3;
        grid-row: 1;
        aspect-ratio: 16 / 9;
    }

    .clinic-gallery-photo-1 {
        grid-column: 1;
        grid-row: 2;
    }

    .clinic-gallery-photo-2 {
        grid-column: 2;
        grid-row: 2;
    }

    .clinic-gallery-photo-3 {
        grid-column: 1;
        grid-row: 3;
    }

    .clinic-gallery-photo-4 {
        grid-column: 2;
        grid-row: 3;
    }
}

/* ==========================================================================
   Homepage "Real Results, Real People" testimonial marquee (under Smile
   Stories) - row 1 loops left, row 2 loops right, both pause on hover,
   both fade out at the left/right edges.
   ========================================================================== */

.testimonials-section {
    padding: 100px 0;
    overflow: hidden;
}

.testimonials-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Old side-by-side header/badges/horizontal-marquee layout - DISABLED per
   request (kept, not deleted, in case it's wanted back later). Replaced by
   the "testimonials-wall" rules further below. .testimonial-card and its
   children are NOT part of this disabled block - that card design is
   still reused as-is by the new wall columns, and by the Treatment page's
   own "Patient Reviews" grid (.testimonial-card-summary).

.testimonials-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
    text-align: left;
    margin: 0 0 40px;
}

.testimonials-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 16px;
}

.testimonials-kicker::before,
.testimonials-kicker::after {
    content: '';
    display: inline-block;
    width: 26px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
}

.testimonials-title {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin: 0;
}

.testimonials-description {
    flex: 0 1 380px;
    font-size: 15px;
    line-height: 1.6;
    color: #6b6b76;
    text-align: left;
    padding-top: 6px;
}

.testimonials-trust-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 56px;
}

.testimonials-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #ffffff;
    border-radius: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    font-size: 13px;
    // Renders as a real <a> when its review-platform URL is set (see
    // front-page.php) - resets so it still looks identical either way.
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

a.testimonials-trust-badge:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.testimonials-trust-badge strong {
    color: rgba(26, 31, 46, 1);
    font-weight: 700;
}

.testimonials-trust-badge span {
    color: #6c6c6c;
}

.testimonial-marquee {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

// Sits behind both rows (this element, not .testimonial-marquee-row, since
// that row needs its own overflow:hidden for the horizontal scroll mask
// and would clip the glow almost entirely) - anchored to the bottom-left
// of the whole marquee, which is where row 2 (the last/bottom row) reads
// as sitting.
.testimonial-marquee::before {
    content: '';
    position: absolute;
    bottom: -115px;
    left: 0px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(72, 137, 241, 0.2) 0%, rgba(110, 173, 239, 0) 70%);
    z-index: 0;
    pointer-events: none;
}

.testimonial-marquee-row {
    position: relative;
    z-index: 1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}

.testimonial-marquee-track {
    display: flex;
    align-items: stretch;
    gap: 20px;
    width: max-content;
    padding: 0 10px;
}

.testimonial-marquee-row-left .testimonial-marquee-track {
    animation: testimonial-marquee-scroll 42s linear infinite;
}

.testimonial-marquee-row-right .testimonial-marquee-track {
    animation: testimonial-marquee-scroll 42s linear infinite reverse;
}

.testimonial-marquee-track:hover {
    animation-play-state: paused;
}

@keyframes testimonial-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-33.3333%); }
}

*/

/* ==========================================================================
   Homepage "testimonial wall" - 2-column vertical auto-scrolling layout
   that replaced the horizontal marquee above. Left info panel (heading,
   platform logos, aggregate rating, CTA to the Reviews page) sits next to
   2 tall columns of .testimonial-card, one scrolling up and one down.
   ========================================================================== */

/* Floating rounded card, same mechanism as .how-it-works-section (inset
   margin formula so its outer edge lands at the same 40px/1550px-capped
   distance every other section's own container uses, since this section
   has no separate wrapping div of its own) - a light cream fill here
   instead of that section's dark navy, since the cards/headline in this
   one are designed for a light background. */
.testimonials-wall-section {
    position: relative;
    overflow: hidden;
    background: #f5f1e8;
    margin: 0 calc(35px + max(0px, (100vw - 1550px) / 2));
    padding: 35px 35px;
    border-radius: 32px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.testimonials-wall {
    max-width: 1550px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 600px 1fr;
    align-items: center;
}

.testimonials-wall-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

.testimonials-wall-title {
    font-size: 36px;
    line-height: 1.25;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin: 0;
}

.testimonials-wall-logos {
    display: flex;
    align-items: center;
    gap: 36px;
}

/* Renders as a real <a> when its review-platform URL is set (see
   front-page.php) - only add pointer/hover affordance in that case, a
   plain <span> stays inert. */
a.testimonials-wall-logo-link {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

a.testimonials-wall-logo-link:hover {
    opacity: 0.75;
}

.testimonials-wall-logo {
    height: 46px;
    width: auto;
    object-fit: contain;
}

/* The rating number and its 3 lines of context, grouped tightly together
   as one unit instead of each picking up the full 40px gap
   .testimonials-wall-info uses to separate title / logos / this / CTA. */
.testimonials-wall-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.testimonials-wall-rating {
    font-size: 42px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    line-height: 1;
    margin-bottom: 6px;
}

.testimonials-wall-rating-label {
    font-size: 18px;
    font-weight: 600;
    color: rgba(193, 150, 86, 1);
}

.testimonials-wall-count {
    font-size: 18px;
    font-weight: 600;
    color: rgba(193, 150, 86, 1);
}

.testimonials-wall-description {
    font-size: 18px;
    line-height: 1.6;
    color: #6b6b76;
    margin: 10px 0 0;
}

.testimonials-wall-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 999px;
    background: rgba(26, 31, 46, 1);
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(26, 26, 26, 0.18);
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.testimonials-wall-cta:hover {
    background: rgba(193, 150, 86, 1);
    box-shadow: 0 14px 30px rgba(193, 150, 86, 0.3);
    transform: translateY(-2px);
}

.testimonials-wall-columns {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    height: 640px;
    /* Fades each column's own top/bottom edges rather than hard-cropping
       mid-card, so cards scroll into/out of view softly. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.testimonials-wall-col {
    overflow: hidden;
}

.testimonials-wall-col-track {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* .testimonial-card's own width:320px (set for the horizontal marquee's
   row of fixed-width cards) would otherwise force these columns wider
   than the grid track actually gives them - stretch to the column's full
   width instead. */
.testimonials-wall-col-track .testimonial-card {
    width: auto;
    flex-shrink: 1;
}

.testimonials-wall-col-up .testimonials-wall-col-track {
    animation: testimonials-wall-scroll-up 36s linear infinite;
}

.testimonials-wall-col-down .testimonials-wall-col-track {
    animation: testimonials-wall-scroll-down 36s linear infinite;
}

.testimonials-wall-col-track:hover {
    animation-play-state: paused;
}

@keyframes testimonials-wall-scroll-up {
    from { transform: translateY(0); }
    to { transform: translateY(-33.3333%); }
}

@keyframes testimonials-wall-scroll-down {
    from { transform: translateY(-33.3333%); }
    to { transform: translateY(0); }
}

@media screen and (max-width: 1024px) {
    .testimonials-wall-section {
        padding: 50px 30px;
    }

    .testimonials-wall {
        grid-template-columns: 1fr;
    }

    .testimonials-wall-info {
        align-items: center;
        text-align: center;
    }

    .testimonials-wall-columns {
        height: 520px;
    }
}

@media screen and (max-width: 640px) {
    .testimonials-wall-section {
        margin: 0 16px;
        padding: 16px;
        border-radius: 24px;
    }

    .testimonials-wall {
        padding: 0 16px;
    }

    .testimonials-wall-columns {
        grid-template-columns: 1fr;
        height: 480px;
    }

    .testimonials-wall-col-down {
        display: none;
    }
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 320px;
    background: #ffffff;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    /* Rows with a Google Review Link render as a real <a> instead of a
       plain div (see hmc_render_testimonial_marquee_html() etc.) - these
       resets keep it looking identical to the non-clickable version. */
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

a.testimonial-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.testimonial-card-rating {
    display: flex;
    gap: 3px;
    margin-bottom: 14px;
}

.testimonial-card-rating .star-filled {
    color: rgba(193, 150, 86, 1);
}

.testimonial-card-rating .star-empty {
    color: #d8d4c8;
}

.testimonial-card-quote {
    flex: 1;
    font-size: 14px;
    line-height: 1.6;
    color: #444444;
    margin-bottom: 18px;
}

.testimonial-card-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.testimonial-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(193, 150, 86, 0.15);
    color: rgba(193, 150, 86, 1);
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

.testimonial-card-who {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.testimonial-card-who strong {
    font-size: 13px;
    color: rgba(26, 31, 46, 1);
}

.testimonial-card-who span {
    font-size: 12px;
    color: #6c6c6c;
}

@media screen and (max-width: 900px) {
    .testimonials-section {
        padding: 70px 0;
    }

    .testimonials-title {
        font-size: 28px;
    }

    .testimonial-card {
        width: 270px;
    }
}

@media screen and (max-width: 640px) {
    .testimonials-trust-badges {
        gap: 10px;
        margin-bottom: 40px;
    }

    .testimonial-marquee {
        gap: 16px;
    }
}

/* ==========================================================================
   "Treatments We Offer" homepage section (top of How It Works), the
   Offers index page, and the Treatment (Single) detail page.
   ========================================================================== */

.treatments-section {
    padding: 100px 0;
}

.treatments-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.treatments-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    flex-wrap: wrap;
    text-align: left;
    margin: 0 0 56px;
}

.treatments-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 16px;
}

.treatments-kicker::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
}

.treatments-title {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin: 0;
}

.treatments-description {
    flex: 0 1 410px;
    font-size: 15px;
    line-height: 1.6;
    color: #6b6b76;
    text-align: left;
    padding-top: 8px;
}

.treatments-footer {
    text-align: center;
    margin-top: 48px;
}

/* Treatment card - shared by the homepage section, the Offers grid, and
   the "related treatments" grid on the single page. */
.treatment-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.treatment-card {
    display: block;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* "Our Services" section (Who We Are page) only - glass fill/stroke per the
   Figma color panel, instead of this card's usual flat white. Scoped here
   rather than on .treatment-card itself since that class is shared with
   other pages' sliders, which keep the plain white card look. Local-only for
   now, not pushed to prod. */
.about-treatments-grid .treatment-card {
    position: relative;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: none;
}

.about-treatments-grid .treatment-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.88);
    pointer-events: none;
}

.treatment-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.about-treatments-grid .treatment-card:hover {
    box-shadow: none;
}

/* ~2/3 image, ~1/3 text, and a shorter card overall than the shared
   .treatment-card default - this is a plain grid (not the slider the shared
   class's fixed 2-line/3-line min-heights exist for), so the title/
   description here can hug their own actual content instead of reserving
   room for the longest possible case. */
.about-treatments-grid .treatment-card-media {
    height: auto;
    aspect-ratio: 5 / 3;
}

.about-treatments-grid .treatment-card-content {
    padding: 20px 18px 18px;
}

.about-treatments-grid .treatment-card-name {
    font-size: 16px;
    min-height: 0;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    margin-bottom: 6px;
}

.about-treatments-grid .treatment-card-description {
    font-size: 13px;
    min-height: 0;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    margin-bottom: 0;
}

.treatment-card.is-hidden {
    display: none;
}

.treatment-card-media {
    height: 220px;
    background-color: #e5e5e5;
}

.treatment-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.treatment-card-content {
    padding: 20px 22px 22px;
}

/* Fixed to exactly 2 lines (clamped, ellipsis on overflow) rather than
   sized to whatever this card's own title happens to need - the card sits
   in a slider where each slide is its own independent grid row, so a
   one-line title on this slide and a two-line title on the next would
   otherwise make every slide a different height as you page through. */
.treatment-card-name {
    font-size: 17px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 6px;
    min-height: 55px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Same fixed-lines reasoning as .treatment-card-name above, just 3 lines
   instead of 2 (the admin field allows up to 160 characters, more than 3
   lines can hold - rare very long descriptions truncate with an ellipsis
   rather than making that one card, and therefore that whole slide, taller
   than every other slide). */
.treatment-card-description {
    font-size: 13px;
    line-height: 1.5;
    color: #6b6b76;
    margin-bottom: 18px;
    min-height: 58px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.treatment-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.treatment-card-price {
    font-size: 13px;
    font-weight: 700;
    color: rgba(193, 150, 86, 1);
}

.treatment-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(26, 31, 46, 1);
}

/* Offers index page hero (reuses the same dark, centered pattern as the
   Doctors index hero, without a marquee - just breadcrumb + text + CTA). */
.offers-hero-section {
    position: relative;
    background-color: rgba(26, 31, 46, 1);
    background-size: cover;
    background-position: center;
    padding: 190px 0 90px;
    overflow: hidden;
}

.offers-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(26, 31, 46, 0.9) 0%, rgba(26, 31, 46, 0.5) 45%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(180deg, rgba(26, 31, 46, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
}

.offers-hero-container {
    position: relative;
    z-index: 1;
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.offers-hero-text {
    max-width: 700px;
}

.offers-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 18px;
}

.offers-hero-kicker::before,
.offers-hero-kicker::after {
    content: '';
    display: inline-block;
    width: 26px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
}

.offers-hero-title {
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 16px;
}

.offers-hero-description {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 30px;
}

.offers-hero-actions {
    display: flex;
    justify-content: flex-start;
}

.offers-grid-section {
    background: #ffffff;
    padding: 90px 0;
}

.offers-grid-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.offers-filter-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 44px;
}

.offers-filter-pill {
    padding: 10px 20px;
    background: #F8F6F0;
    border: 1px solid transparent;
    border-radius: 30px;
    color: #444444;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

.offers-filter-pill:hover {
    background: #efece2;
}

.offers-filter-pill.is-active {
    background: rgba(193, 150, 86, 1);
    color: rgba(26, 31, 46, 1);
}

/* Doctors index only - same .offers-filter-pill component Offers/Smile
   Gallery still use at their own default size, just smaller text here.
   .doctors-filters (2 classes) rather than .offers-filter-pill alone (1
   class): CSS breaks same-specificity ties by source order, and a single-
   class override placed after the base rule above would still need to win
   a tie it can't - two classes beats one regardless of where either sits
   in the file. */
.doctors-filters .offers-filter-pill {
    font-size: 12px;
}

.offers-grid-empty {
    text-align: center;
    color: #6b6b76;
    padding: 40px 0;
}

/* Treatment single page - header w/ background photo */
.treatment-single-header {
    position: relative;
    /* Clears the floating fixed nav bar above (.main-header) - the
       breadcrumb and hero text now flow normally in this section instead
       of overlaying a full-bleed photo, so the section itself needs the
       top clearance the breadcrumb used to provide via absolute position. */
    padding-top: 130px;
    background-color: #faf9f7;
}

.treatment-single-hero-wrap {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px 70px;
}

/* Photo is 80% wide, pushed to the right (margin-left: auto), so it starts
   at the 20% mark - well underneath the text column. Text sits on top of it
   as an absolutely-positioned overlay at its own normal ~35%-ish width/look,
   vertically centered over the photo. The design team is adding a white
   gradient over the photo's own left edge separately to blend it into the
   page background under the text. */
.treatment-single-hero-grid {
    position: relative;
}

.treatment-single-hero-text {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 35%;
    min-width: 0;
    padding-right: 40px;
}

.treatment-single-hero-media {
    position: relative;
    width: 80%;
    margin-left: auto;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 22px;
}

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

/* Desktop/mobile hero images are both rendered when a mobile-specific image
   is set (see single-treatment.php) - only one shows at a time, swapped at
   the same 1024px breakpoint where the hero grid itself stacks below. When
   no mobile image is set, only .treatment-single-hero-img (no -desktop/
   -mobile suffix) exists and this toggle doesn't apply. */
.treatment-single-hero-img-mobile {
    display: none;
}

/* Transparent wrapper around the mobile <img> only - carries the inline
   editor's data-hmc-field attrs (an <img> can't take a child pencil button)
   without affecting sizing, so it mirrors .treatment-single-hero-img-mobile's
   own display toggle at the breakpoint below. */
.treatment-single-hero-img-mobile-wrap {
    display: none;
    width: 100%;
    height: 100%;
}

.treatment-single-category {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    color: rgba(193, 150, 86, 1);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 18px;
}

.treatment-single-category::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
}

.treatment-single-title {
    font-size: 55px;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 16px;
    /* Narrower than the text column itself, so a short 2-word name (e.g.
       "Dental Veneers") still wraps to 2 lines like the reference, instead
       of fitting on one line at this font-size. */
    max-width: 420px;
    /* Gradient text fill (see the reference Figma gradient stops). */
    background: linear-gradient(180deg, rgba(186, 152, 96, 1) 0%, rgba(156, 122, 68, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.treatment-single-subtitle {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 400;
    color: rgba(163, 163, 163, 1);
    margin-bottom: 24px;
}

/* Google/Trustpilot rating badges under the hero CTA row - icon + rating +
   star row, caption below. */
.treatment-hero-reviews {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px 28px;
    margin-top: 40px;
}

.treatment-hero-review {
    display: flex;
    align-items: center;
    gap: 10px;
}

.treatment-hero-review-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.treatment-hero-review-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.treatment-hero-review-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.treatment-hero-review-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.treatment-hero-review-top strong {
    font-size: 15px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
}

.treatment-hero-review-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.treatment-hero-review-stars img {
    display: block;
    width: 12px;
    height: 12px;
}

.treatment-hero-review-caption {
    font-size: 12px;
    color: #8a8a8a;
}

.treatment-single-description {
    font-size: 15px;
    line-height: 1.7;
    color: #6b6b76;
    margin-bottom: 32px;
}

.treatment-single-description p {
    margin-bottom: 14px;
}

.treatment-single-description p:last-child {
    margin-bottom: 0;
}

/* Between the 2-column layout's own breakpoint (1024px, where it stacks
   to full-width) and ~1197px, the text column is narrow enough that
   copy wraps onto extra lines at full desktop size, growing taller than
   the photo and forcing the whole hero section to stretch to fit it (see
   fixTreatmentHeroHeight() in custom.js) - reading as an oddly tall
   hero with a lot of empty space around a short photo. Scaling the text
   down here instead keeps its natural height close to the photo's own,
   so the JS rarely needs to stretch anything and the hero stays compact. */
@media screen and (min-width: 1025px) and (max-width: 1197px) {
    /* Wider than the sitewide 35% - the extra room means the description
       wraps onto fewer lines (shortening the column further, on top of
       the smaller text below) and the CTA/reviews sitting under it move
       up to match, instead of sitting mostly-empty this narrow. */
    .treatment-single-hero-text {
        width: 46%;
    }

    .treatment-single-category {
        margin-bottom: 12px;
    }

    .treatment-single-title {
        font-size: 40px;
        margin-bottom: 12px;
    }

    .treatment-single-subtitle {
        font-size: 16px;
        margin-bottom: 16px;
    }

    .treatment-single-description {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .treatment-hero-reviews {
        margin-top: 24px;
    }
}

.treatment-hero-cta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 8px;
}

.treatment-hero-cta-btn.treatment-hero-cta-btn {
    padding: 16px 30px;
    border-radius: 999px;
    background: rgba(176, 142, 87, 1);
    border-color: rgba(176, 142, 87, 1);
}

.treatment-hero-cta-btn.treatment-hero-cta-btn:hover {
    background: rgba(151, 121, 72, 1);
    border-color: rgba(151, 121, 72, 1);
}

.treatment-hero-chat-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: #6b6b76;
}

.treatment-hero-chat-link a {
    color: rgba(26, 31, 46, 1);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.treatment-hero-chat-link a:hover {
    color: rgba(193, 150, 86, 1);
}

.treatment-single-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.treatment-single-fact {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
}

.treatment-single-fact-price {
    background: rgba(193, 150, 86, 0.15);
    border-color: rgba(193, 150, 86, 0.4);
    color: rgba(193, 150, 86, 1);
    font-weight: 700;
}

.treatment-single-section {
    background: #faf9f7;
    padding: 0px 0 100px;
}

.treatment-single-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

/* No align-items:start here - the sidebar column must stretch to the full
   grid height so its sticky child has room to travel while scrolling. */
.treatment-profile-grid {
    display: grid;
    grid-template-columns: 1fr 375px;
    gap: 100px;
}

.treatment-main {
    min-width: 0;
    max-width: 900px;
}

.treatment-block {
    margin-bottom: 56px;
}

.treatment-block:last-child {
    margin-bottom: 0;
}

.treatment-block-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 14px;
}

.treatment-block-kicker::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
}

.treatment-block-title {
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-top: 16px;
    margin-bottom: 28px;
}

/* Section headings with no kicker label above them (Overview, Technique,
   Material Options, Candidacy, Process, closing Why Choose paragraph) -
   a short gold underline bar takes the kicker's place instead. */
.treatment-heading-plain {
    margin-top: 0;
    margin-bottom: 20px;
}

.treatment-heading-plain::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    border-radius: 2px;
    background: rgba(193, 150, 86, 1);
    margin-top: 14px;
}

.treatment-about-text {
    max-width: 900px;
    font-size: 15px;
    line-height: 1.7;
    color: #444444;
}

.treatment-about-text p {
    margin-bottom: 16px;
}

/* Overview section only: first paragraph reads as the prominent lead-in
   (dark), any paragraph(s) after it drop to a lighter, secondary gray. */
.treatment-overview-block .treatment-about-text p:first-child {
    color: rgba(26, 31, 46, 1);
}

.treatment-overview-block .treatment-about-text p:not(:first-child) {
    color: rgba(107, 100, 89, 1);
}

/* WYSIWYG content can contain real links (e.g. to another treatment page)
   - without this they fall back to the browser's default blue, which
   clashes with the rest of the page's gold accent. */
.treatment-about-text a {
    color: rgba(178, 138, 76, 1);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.treatment-about-text a:hover {
    color: rgba(193, 150, 86, 1);
}

/* The sitewide `* { margin: 0; padding: 0; }` reset (style.css:102) strips
   the browser's own default spacing from every element - .treatment-about-text
   only puts it back for <p>, so a <ul>/<h2>/<h3> here had none at all and
   ran straight into whatever followed it. */
.treatment-about-text h2,
.treatment-about-text h3 {
    margin-top: 32px;
    margin-bottom: 16px;
}

.treatment-about-text h2:first-child,
.treatment-about-text h3:first-child {
    margin-top: 0;
}

.treatment-about-text ul,
.treatment-about-text ol {
    margin-bottom: 16px;
    padding-left: 22px;
}

.treatment-about-text li {
    margin-bottom: 8px;
}

.treatment-about-text li:last-child {
    margin-bottom: 0;
}

.treatment-highlights-intro {
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
    margin-bottom: 20px;
}

.treatment-highlights-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.treatment-highlights-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #333333;
}

.treatment-highlights-dot {
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #b0b0b0;
    margin-top: 8px;
}

.treatment-highlights-closing {
    font-size: 15px;
    line-height: 1.6;
    color: #9a9a9a;
    margin-top: 24px;
}

/* Soft warm glow behind the whole "Step By Step" block, bottom-left. */
.treatment-process-block {
    position: relative;
}

.treatment-process-block::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: -300px;
    bottom: -250px;
    width: 750px;
    height: 750px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 158, 78, 0.22) 0%, rgba(196, 158, 78, 0.01) 50%, rgba(196, 158, 78, 0) 100%);
    pointer-events: none;
}

.treatment-process-block > * {
    position: relative;
    z-index: 1;
}

.treatment-process-steps {
    display: flex;
    flex-direction: column;
    counter-reset: treatment-process-step;
}

.treatment-process-step {
    position: relative;
    display: flex;
    gap: 20px;
    padding-bottom: 24px;
    margin-bottom: 24px;
    counter-increment: treatment-process-step;
}

.treatment-process-step:not(:last-child) {
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}

.treatment-process-intro {
    font-size: 15px;
    line-height: 1.6;
    color: #6b6b76;
    margin-bottom: 24px;
}

.treatment-process-dot {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #B08E57;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.treatment-process-dot::before {
    content: counter(treatment-process-step);
}

.treatment-process-text h3 {
    font-size: 16px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 6px;
}

.treatment-process-text p {
    font-size: 14px;
    line-height: 1.6;
    color: #6b6b76;
}

/* Stat cards (e.g. "3 to 5 days" / "Typical treatment time...") - a big,
   low-opacity watermark of the same value sits behind the real text, and a
   gold glow fades in underneath on hover. */
.treatment-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Wraps each card + its own hover glow (a sibling, not a child, of the
   card - the glow needs to bleed out past the card's bottom edge, which
   .treatment-stat-card's own overflow:hidden - needed to contain the big
   watermark number - would otherwise clip). */
.treatment-stat-card-wrap {
    position: relative;
}

.treatment-stat-card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(26, 26, 26, 0.06);
    border-radius: 16px;
    padding: 21px 21px;
    min-height: 150px;
    /* .treatment-stat-card-wrap (the actual grid item) already stretches to
       the row's tallest card via the grid's default align-items: stretch -
       without this, the card itself still only sizes to its own content, so
       a 2-line label/watermark in one card leaves the others in its row
       shorter and misaligned along the bottom edge. */
    height: 100%;
    box-shadow: 0 10px 24px rgba(26, 26, 26, 0.05);
}

/* The radial gold glow (see the reference Figma gradient stops) - sits
   behind the card, centered on its bottom edge, always visible (not a
   hover effect - see .treatment-stat-card-hover-glow below for that). */
.treatment-stat-glow {
   position: absolute;
    z-index: 0;
    left: 50%;
    bottom: -60px;
    transform: translateX(-50%);
    width: 360px;
    height: 300px;
    border-radius: 35%;
    background: radial-gradient(circle, rgba(196, 158, 78, 0.1) 0%, rgba(196, 158, 78, 0.01) 75%, rgba(196, 158, 78, 0) 100%);
    pointer-events: none;
}

/* Separate hover-only glow, in the sitewide primary gold (not the
   image-5 recipe above) - sits behind the card like a drop shadow
   (poking out below it), same as .treatment-stat-glow, rather than
   contained inside the card. */
.treatment-stat-card-hover-glow {
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: -30px;
    transform: translateX(-50%);
    width: 260px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(193, 150, 86, 0.1) 0%, rgba(193, 150, 86, 0) 60%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.treatment-stat-card-wrap:hover .treatment-stat-card-hover-glow {
    opacity: 1;
}

/* Sized/positioned for a SHORT watermark string (see the new optional
   "watermark" repeater field - defaults to the Value field if left empty,
   which is fine for a short value like "10+" but will visibly overflow/
   clip for a longer one like "3 to 5 days", hence the field existing). */
.treatment-stat-watermark {
    position: absolute;
    right: 0px;
    bottom: -15px;
    font-size: 130px;
    font-weight: 800;
    line-height: 1;
    color: rgba(140, 106, 36, 0.04);
    white-space: nowrap;
    pointer-events: none;
}

.treatment-stat-value {
    position: relative;
    display: block;
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 4px;
    /* Gradient text fill (see the reference Figma gradient stops). */
    background: linear-gradient(135deg, rgba(201, 162, 78, 1) 0%, rgba(156, 122, 68, 1) 50%, rgba(107, 79, 22, 1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.treatment-stat-label {
    position: relative;
    display: block;
    font-size: 14px;
    line-height: 1.5;
    color: #6b6b76;
}

/* "Which Veneer Is Right For You?"-style options-comparison cards. */
.treatment-material-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.treatment-material-card {
    background: #ffffff;
    border: 1px solid rgba(26, 26, 26, 0.06);
    border-radius: 18px;
    padding: 24px;
}

.treatment-material-badge {
    display: inline-block;
    background: rgba(193, 150, 86, 0.12);
    color: rgba(178, 138, 76, 1);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.treatment-material-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 8px;
}

.treatment-material-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #6b6b76;
}

.treatment-faq-list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.treatment-faq-item {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(26, 26, 26, 0.05);
    padding: 20px 26px;
}

.treatment-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(26, 31, 46, 1);
    cursor: pointer;
    list-style: none;
}

.treatment-faq-question::-webkit-details-marker {
    display: none;
}

.treatment-faq-icon {
    flex-shrink: 0;
    color: rgba(193, 150, 86, 1);
    transition: transform 0.25s ease;
}

.treatment-faq-item[open] .treatment-faq-icon {
    transform: rotate(45deg);
}

.treatment-faq-answer {
    font-size: 14px;
    line-height: 1.6;
    color: #6b6b76;
    margin-top: 14px;
}

/* Same soft warm glow used behind the "Step By Step" / "Before & After"
   blocks. */
.treatment-faqs-block {
    position: relative;
}

.treatment-faqs-block::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: -100px;
    transform: translateX(-50%);
    width: 700px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 158, 78, 0.01) 0%, rgba(196, 158, 78, 0.01) 50%, rgba(196, 158, 78, 0.02) 100%);
    pointer-events: none;
}

.treatment-faqs-block > .treatment-block-title {
    position: relative;
    z-index: 1;
}

/* Full-width "Get your smile plan" CTA form - deliberately OUTSIDE
   .treatment-profile-grid (not inside .treatment-main), so it spans the
   whole page container instead of being squeezed into the ~2/3 width
   that column shares with the sidebar. See
   template-parts/treatment-cta-form.php. */
.treatment-cta-form-section {
    max-width: 1550px;
    margin: 0 auto 70px;
    padding: 0 40px;
}

.treatment-cta-form-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    background: rgba(43, 38, 32, 1);
    border-radius: 24px;
    padding: 56px;
    box-shadow: 0 30px 60px -30px rgba(43, 38, 32, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Two soft warm glows (see the reference gradient stops), one in each
   opposite corner. */
.treatment-cta-form-card::before,
.treatment-cta-form-card::after {
    content: '';
    position: absolute;
    z-index: 0;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(176, 141, 63, 0.28) 0%, rgba(176, 141, 63, 0) 70%);
    pointer-events: none;
}

.treatment-cta-form-card::before {
    left: -160px;
    bottom: -200px;
}

.treatment-cta-form-card::after {
    right: -160px;
    top: -200px;
}

.treatment-cta-form-text,
.treatment-cta-form-wrap {
    position: relative;
    z-index: 1;
}

.treatment-cta-form-text {
    align-self: center;
}

.treatment-cta-form-eyebrow {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 10px;
}

.treatment-cta-form-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    color: #ffffff;
    margin: 0 0 14px;
}

.treatment-cta-form-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

.treatment-cta-form-row {
    grid-template-columns: 1fr 1fr;
}

.treatment-cta-form-wrap .getstarted-field label {
    text-transform: none;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    color: rgba(255, 255, 255, 0.6);
}

.treatment-cta-form-wrap .getstarted-field input,
.treatment-cta-form-wrap .getstarted-field textarea {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.treatment-cta-form-wrap .getstarted-field input::placeholder,
.treatment-cta-form-wrap .getstarted-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.treatment-cta-form-wrap .getstarted-field input:focus,
.treatment-cta-form-wrap .getstarted-field textarea:focus {
    border-color: rgba(193, 150, 86, 1);
}

.treatment-cta-form-submit.treatment-cta-form-submit {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
    border-radius: 999px;
}

.treatment-cta-form-disclaimer {
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.4);
    margin: 14px 0 0;
}

.treatment-cta-form-success.treatment-cta-form-success {
    background: rgba(43, 38, 32, 1);
    color: #ffffff;
    border-radius: 24px;
    padding: 56px;
    text-align: center;
    font-size: 16px;
}

.treatment-sidebar {
    position: relative;
}

.treatment-sidebar-sticky {
    position: sticky;
    z-index: 1;
    top: 130px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.treatment-sidebar-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 20px;
    border: 2px solid rgba(243, 244, 246, 1);
}


.treatment-sidebar-title {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgb(135, 107, 40, 1) !important;
    margin-bottom: 12px;
}

.treatment-consultation-submit {
    padding-top: 15px;
    padding-bottom: 15px;
}

.treatment-section-header {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 48px;
}

/* .story-results-slider-wrap's default 860px max-width fits one big 4:3
   comparison image (Smile Story pages) - all of these blocks instead show a
   row of up to 3 cards per slide, filling the Treatment page's left
   (.treatment-main) column width completely (same 1100px cap as before,
   which only matters if that column is ever wider than 1100px), or the
   Smile Story single page's own Before & After section (same 3-per-slide
   grouped card component, see hmc_render_before_after_grouped_html()). All
   need the same override so their cards come out the same size. */
.treatment-before-after-block .story-results-slider-wrap,
.treatment-gallery-block .story-results-slider-wrap,
.treatment-reviews-block .story-results-slider-wrap,
.treatment-related-block .story-results-slider-wrap,
.story-results-section .story-results-slider-wrap {
    max-width: 1550px;
    margin: 0 auto 40px;
}

.treatment-before-after-subtitle {
    font-size: 15px;
    color: #6b6b76;
    margin: -8px 0 28px;
}

/* Prev/next arrows in the top-right, vertically centered on the H2 title
   itself (not the slider content below), no dots/counter - rather than
   the default bottom-centered controls bar every other slider sharing
   this component still uses. .story-results-slider-wrap (the controls'
   own direct parent) is never itself position:relative, so this
   positions relative to the block itself (.treatment-before-after-block,
   its nearest actually-positioned ancestor). The top offset accounts for
   the kicker line + its margin sitting above the H2 here. */
.treatment-before-after-block .story-results-slider-controls {
    position: absolute;
    top: 45px;
    right: 0;
    margin-top: 0;
    width: auto;
}

.treatment-before-after-block .gallery-dots-wrap {
    display: none;
}

.treatment-before-after-block .gallery-arrow {
    width: 40px;
    height: 40px;
}

/* Same top-right arrow treatment as the Before & After block above, for
   the "Other Treatments" slider. */
.treatment-related-block {
    position: relative;
}

.treatment-related-block .story-results-slider-controls {
    position: absolute;
    top: 31px;
    right: 0;
    margin-top: 0;
    width: auto;
}

.treatment-related-block .gallery-dots-wrap {
    display: none;
}

.treatment-related-block .gallery-arrow {
    width: 40px;
    height: 40px;
}

/* Same top-right arrow treatment as the other sliders above, for the
   "Smile Gallery" section - plus a "See all" link sitting just to the
   left of the arrow pair, in that same top-right group. */
.treatment-gallery-block {
    position: relative;
}

.treatment-gallery-block .story-results-slider-controls {
    position: absolute;
    top: -4px;
    right: 0;
    margin-top: 0;
    width: auto;
    z-index: 2;
}

.treatment-gallery-block .gallery-dots-wrap {
    display: none;
}

.treatment-gallery-block .gallery-arrow {
    width: 40px;
    height: 40px;
}

.treatment-gallery-see-all {
    position: absolute;
    z-index: 2;
    top: -4px;
    right: 130px;
    display: flex;
    align-items: center;
    height: 40px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(193, 150, 86, 1);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.treatment-gallery-see-all:hover {
    color: rgba(173, 130, 66, 1);
}

/* 3 real, always-visible Instagram embeds per slide (see
   hmc_render_treatment_gallery_grouped_html() - .story-instagram-embed is
   auto-initialized by custom.js on page load, same mechanism the Smile
   Story single page's own testimonial embed already uses). Column count
   still driven by --slide-cols like every other grouped slider. */
.treatment-gallery-slide-row {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(var(--slide-cols, 3), 1fr);
    gap: 28px;
    align-items: start;
}

.treatment-gallery-slide-row .reels-embed-wrap {
    width: 100%;
    min-width: 0;
}

/* Same soft warm glow used behind the "Step By Step" block. isolation:
   isolate gives this block its own stacking context, so the glow (z-index:
   -1) reliably paints behind every normal-flow child without needing to
   individually promote each child to position:relative - which previously
   made .story-results-slider-wrap (a direct child) an accidental
   offsetParent, breaking the top-right slider-controls alignment below. */
.treatment-before-after-block {
    position: relative;
    isolation: isolate;
}

.treatment-before-after-block::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: -120px;
    transform: translateX(-50%);
    width: 700px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 158, 78, 0.5) 0%, rgba(196, 158, 78, 0.02) 50%, rgba(196, 158, 78, 0) 100%);
    pointer-events: none;
}

/* One full-width card per slide, instead of the Smile Gallery archive's
   grid of several smaller drag-to-reveal cards sharing this same widget. */
.treatment-before-after-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(26, 26, 26, 0.05);
}

/* Extra .treatment-before-after-block ancestor class (rather than just
   .treatment-before-after-card .hmca-compare) bumps this to 3 classes'
   worth of specificity, so it reliably beats the Smile Gallery archive's
   .before-after-card .hmca-compare rule below regardless of source order -
   the markup carries both "before-after-card" and "treatment-before-after-card"
   on the same element, so without this the two same-specificity (2-class)
   selectors were tie-broken by source order and the archive grid's 6:3
   aspect-ratio/14px radius/box-shadow was winning over this 4:3/borderless
   card's own rule. */
.treatment-before-after-block .treatment-before-after-card .hmca-compare {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 0;
    box-shadow: none;
    cursor: default;
}

.hmca-badge {
    position: absolute;
    bottom: 16px;
    z-index: 2;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.85);
    color: rgba(26, 31, 46, 1);
}

.hmca-badge-before {
    left: 16px;
}

.hmca-badge-after {
    right: 16px;
}

.treatment-before-after-card .hmca-handle {
    width: 36px;
    height: 36px;
    gap: 2px;
}

.treatment-before-after-body {
    padding: 18px 20px 20px;
}

.treatment-before-after-title {
    font-size: 16px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin: 0 0 4px;
}

.treatment-before-after-caption {
    font-size: 13px;
    line-height: 1.5;
    color: #8a8a8a;
    margin: 0;
}

.gallery-dots-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* The Before & After, Patient Stories and Other Treatments sliders on a
   Treatment page (plus the Smile Story single page's own Before & After
   section, same shared component) all need the arrows pushed out to the
   full section width, with the dots centered independently between them -
   unlike the tight centered group used by the homepage's reels/reviews
   sliders. */
.treatment-before-after-block .story-results-slider-controls,
.treatment-gallery-block .story-results-slider-controls,
.treatment-related-block .story-results-slider-controls,
.story-results-section .story-results-slider-controls {
    justify-content: space-between;
}

/* Outlined ghost-style arrows for these three sections, rather than the
   filled gray circles used by the reels/reviews sliders elsewhere - also
   hardcodes the gold accent since --gallery-accent is only defined inside
   .gallery-section, not these blocks. */
.treatment-before-after-block .gallery-arrow,
.treatment-gallery-block .gallery-arrow,
.treatment-related-block .gallery-arrow {
    background: #ffffff;
    border: 1px solid #e5e1d5;
    color: #8a8a92;
}

.treatment-before-after-block .gallery-arrow:hover,
.treatment-gallery-block .gallery-arrow:hover,
.treatment-related-block .gallery-arrow:hover {
    background: rgba(193, 150, 86, 1);
    border-color: rgba(193, 150, 86, 1);
    color: #ffffff;
}

.treatment-before-after-block .gallery-dots {
    margin-top: 0;
}

.gallery-slider-counter {
    font-size: 13px;
    color: #9a9aa2;
    margin: 0;
}

/* The active slide indicator is an elongated pill here rather than the
   plain enlarged dot used elsewhere (reels/reviews sliders), matching this
   section's design specifically - also used by the Smile Story single
   page's own Before & After section, same shared dots markup. */
.treatment-before-after-block .gallery-dot.active::before,
.story-results-section .gallery-dot.active::before {
    width: 22px;
    border-radius: 4px;
}

/* Reuses the homepage's .reels-grid/.reels-item cards (click a thumbnail to
   open the same .reels-modal dialog), as a row of up to --slide-cols cards
   per slide - paged with the same dots/arrows as the Before/After slider
   below (see .story-results-slider-wrap), since a treatment's matching reels
   can be anywhere from 1 to several. */
/* Grid, not flex - so each slide's up to 3 cards stretch to fill the full
   row width evenly (matching .before-after-grid right below it), instead
   of sitting at a fixed 220px and leaving the row centered with empty
   space on both sides. width:100% is required, not cosmetic: without an
   explicit width, a grid with fewer items than columns (e.g. a treatment
   with only 2 matching reels instead of 3) can't resolve its fr columns
   from content and collapses every column - including the populated ones
   - to 0 width. Same issue already fixed on .before-after-grid. */
.reels-slide-row {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(var(--slide-cols, 3), 1fr);
    gap: 30px;
}

.reels-slide-row .reels-item-featured {
    grid-column: auto;
    aspect-ratio: 3 / 4;
    border-radius: 18px;
}

.reels-slide-row .reels-item-featured .reels-play {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.92);
}

.reels-slide-row .reels-item-featured .reels-item-info {
    left: 18px;
    right: 18px;
    bottom: 14px;
    gap: 3px;
}

.reels-slide-row .reels-item-featured .reels-item-category {
    font-size: 11px;
}

.reels-slide-row .reels-item-featured .reels-item-name {
    font-size: 15px;
}

.reels-slide-row .reels-item-featured .reels-item-location {
    font-size: 12px;
}

/* .testimonial-card's base width:320px is meant for the homepage's
   horizontally-scrolling marquee - reused here inside .before-after-grid
   (Reviews section on a Treatment page), it needs to stretch to fill its
   grid column instead, matching the Before & After cards right above it. */
.before-after-grid .testimonial-card {
    width: 100%;
}

/* 3.5 cards visible per slide (the 4th peeking half off the right edge),
   instead of the shared .treatment-cards-grid's fixed 3-equal-column grid
   used on the standalone Offers/Treatments index page. Lives inside
   .treatment-main now (see .treatment-block-kicker/.treatment-block-title
   for the header, styled the same as every other section on this page).
   width:100% for the same reason .before-after-grid and .reels-slide-row
   both need it (see their comments): the cards' flex-basis is a
   percentage with flex-shrink:0, which can't resolve against an
   indefinite size - without an explicit width, this flex row sizes itself
   from that unresolved content instead of the space actually available,
   so the row (and every card in it) rendered far too wide and pushed the
   whole page into horizontal overflow at phone widths. */
/* 3 full cards per slide (--slide-cols, set inline by
   hmc_render_grouped_slider_html() to match the $per_slide argument) -
   same grid technique as .before-after-grid, rather than the old
   partial-4th-card-peeking flex row. */
.treatment-related-slide-row {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(var(--slide-cols, 3), 1fr);
    gap: 28px;
}

/* Simple "name + icon slot" card - see hmc_render_treatment_related_card()
   in inc/blocks.php. Deliberately its own class, not the shared
   .treatment-card used on the homepage/Offers grids. */
.treatment-related-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 190px;
    background: #ffffff;
    border: 1.5px solid rgba(26, 26, 26, 0.06);
    border-radius: 18px;
    padding: 24px;
    text-decoration: none;
    transition: border-color 0.25s ease;
}

.treatment-related-card:hover {
    border-color: rgba(193, 150, 86, 1);
}

.treatment-related-card-name {
    position: relative;
    z-index: 1;
    display: block;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin: 0;
}

/* Empty for now - just the slot/positioning. Real per-treatment line-art
   icons (a lips shape for Hollywood Smile, a tooth for Dental Crowns,
   etc.) get dropped in later; opacity is already wired to sharpen on
   hover so nothing else needs to change once they're added. */
.treatment-related-card-icon {
    position: absolute;
    right: 0px;
    bottom: -5px;
    width: 130px;
    height: 130px;
    color: rgba(26, 26, 26, 0.12);
    opacity: 0.3;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.treatment-related-card-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.treatment-related-card:hover .treatment-related-card-icon {
    opacity: 1;
    transform: rotate(-8deg);
}

.treatment-related-card-explore {
    position: absolute;
    right: 20px;
    bottom: 18px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(193, 150, 86, 1);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.treatment-related-card:hover .treatment-related-card-explore {
    opacity: 1;
    transform: translateY(0);
}

.treatment-related-block .gallery-dot.active::before {
    width: 22px;
    border-radius: 4px;
}

.doctor-related-section {
    background: #F8F6F0;
    padding: 90px 0;
}

.doctor-related-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.doctor-related-header {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 48px;
}

/* Highlighted editorial callout box (e.g. "Health matters as much as the
   jaw bone") - optional, only shown when a treatment has one. */
.treatment-callout-box {
    position: relative;
    overflow: hidden;
    background: #f5f1e8;
    border-left: 4px solid rgba(193, 150, 86, 1);
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
    padding: 26px 40px 26px 28px;
    margin-bottom: 48px;
}

/* Large decorative quote mark, top-right, faint. */
.treatment-callout-box::after {
    content: '\201D';
    position: absolute;
    top: -18px;
    right: 14px;
    font-size: 90px;
    font-weight: 800;
    line-height: 1;
    color: rgba(193, 150, 86, 0.14);
    pointer-events: none;
}

.treatment-callout-box p {
    position: relative;
    font-size: 16px;
    line-height: 1.6;
    color: #3a3a3a;
    margin: 0;
}

.treatment-callout-box strong {
    color: rgba(26, 31, 46, 1);
}

/* "Why Patients Choose Tirana" - shared, clinic-wide content on every
   Treatment page (Manage Cards > Why Patients Choose Tirana). */
.treatment-tirana-callout {
    background: #f5f1e8;
    border-radius: 18px;
    padding: 32px;
    margin-bottom: 48px;
}

.treatment-tirana-callout .treatment-block-title {
    margin-bottom: 16px;
}

.treatment-tirana-intro {
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
    margin-bottom: 24px;
}

.treatment-tirana-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.treatment-tirana-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
}

.treatment-tirana-card h3 {
    font-size: 14px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 8px;
}

.treatment-tirana-card p {
    font-size: 13px;
    line-height: 1.6;
    color: #6b6b76;
    margin: 0;
}

/* "Why HMC" - each treatment's own picked subset of the shared master list
   (Manage Cards > Why HMC - Master List). */
.treatment-why-hmc-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.treatment-why-hmc-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 24px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.treatment-why-hmc-item strong {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: rgba(26, 31, 46, 1);
}

.treatment-why-hmc-item strong::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(193, 150, 86, 1);
}

.treatment-why-hmc-item p {
    font-size: 14px;
    line-height: 1.6;
    color: #6b6b76;
    margin: 0;
    padding-left: 17px;
}

/* "Awards & Certifications" sidebar box - dark variant, distinct from the
   "Our Services" and consultation-form cards next to it. */
.treatment-awards-list {
    list-style: none;
    margin: 0 0 15px;
    padding: 0 0 10px;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}

.treatment-awards-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 8px 0;
}

.treatment-awards-item:first-child {
    padding-top: 0;
}

.treatment-awards-item:not(:last-child) {
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}

.treatment-awards-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: rgba(178, 138, 76, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.treatment-awards-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.treatment-awards-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.treatment-awards-item-text strong {
    font-size: 12px;
    line-height: 1.3;
    color: rgba(26, 31, 46, 1);
}

.treatment-awards-item-text span {
    font-size: 12px;
    line-height: 1.3;
    color: #8a8a8a;
}

.treatment-awards-badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.treatment-awards-badge {
    border-radius: 14px;
    padding: 10px 5px;
    text-align: center;
    border: 1.5px solid rgba(26, 26, 26, 0.1);
    transition: border-color 0.2s ease;
}

.treatment-awards-badge-google:hover {
    border-color: rgba(193, 150, 86, 1);
}

.treatment-awards-badge-trustpilot:hover {
    border-color: #00b67a;
}

.treatment-awards-badge strong {
    display: inline;
    font-size: 18px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
}

.treatment-awards-star {
    font-size: 15px;
}

.treatment-awards-star-google {
    color: #ffb400;
}

.treatment-awards-star-trustpilot {
    color: #00b67a;
}

.treatment-awards-badge-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-top: 3px;
    margin-bottom: 4px;
}

.treatment-awards-badge-count {
    display: block;
    font-size: 12px;
    color: #8a8a8a;
    line-height: 1.4;
}

/* The dark "Ready to begin?" CTA card - last of the 3 sticky sidebar
   cards. */
.treatment-sidebar-cta-card {
    background: #2c2721;
    border-radius: 22px;
    padding: 26px 22px;
    text-align: center;
}

.treatment-sidebar-cta-eyebrow {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 8px;
}

.treatment-sidebar-cta-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: #ffffff;
    margin: 0 0 18px;
}

.treatment-sidebar-cta-card .treatment-sidebar-cta-btn.treatment-sidebar-cta-btn {
    width: 100%;
    justify-content: center;
    border-radius: 999px;
    background: rgba(176, 142, 87, 1);
    border-color: rgba(176, 142, 87, 1);
}

.treatment-sidebar-cta-card .treatment-sidebar-cta-btn.treatment-sidebar-cta-btn:hover {
    background: rgba(151, 121, 72, 1);
    border-color: rgba(151, 121, 72, 1);
}

.treatment-sidebar-cta-desc {
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.45);
    margin: 16px 0 0;
}

/* Embedded "Free Consultation" form in the sidebar - reuses the sitewide
   .getstarted-field/.getstarted-form-row styles, just forced to a single
   column since this box is much narrower than the page-level forms they
   were designed for. */
.treatment-consultation-title {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
}

.treatment-consultation-note {
    font-size: 11px;
    line-height: 1.3;
    color: #6b6b76;
    margin: 15px 0 8px;
}

/* Name fields keep the sitewide 2-column row (matches the design) - only
   the field spacing needs tightening for this narrower sidebar box. */
.treatment-consultation-form .getstarted-form-row {
    gap: 10px;
}

.treatment-consultation-form .getstarted-field {
    margin-bottom: 3px;
}

.treatment-consultation-form .getstarted-field label {
    margin-bottom: 4px;
}

.treatment-consultation-form .getstarted-field input,
.treatment-consultation-form .getstarted-field select {
    padding: 8px 12px;
    line-height: 1.2;
    background-color: #faf9f7;
}

.treatment-consultation-form .phone-intl-trigger,
.treatment-consultation-form .phone-intl-field input[type="tel"] {
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 1.2;
}

.treatment-consultation-consent {
    margin-top: 16px;
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.3;
}

.treatment-consultation-consent a {
    color: rgba(193, 150, 86, 1);
    text-decoration: underline;
}

.treatment-consultation-consent a:hover {
    color: rgba(173, 130, 66, 1);
}

.treatment-consultation-submit {
    width: 100%;
    justify-content: center;
}

.treatment-consultation-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid #ececec;
    font-size: 13px;
}

.treatment-consultation-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #55555f;
    text-decoration: none;
}

.treatment-consultation-links a:hover {
    color: rgba(193, 150, 86, 1);
}

.treatment-consultation-links-sep {
    color: #d5d5d5;
}

/* Sitewide "Patient Reviews" summary grid, inside .treatment-main below
   "Other Treatments" - shown identically on every Treatment page (Manage
   Cards > Patient Testimonial Cards, rows flagged "featured"). */
.treatment-reviews-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.treatment-reviews-summary-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: rgba(193, 150, 86, 1);
    flex-shrink: 0;
    /* Renders as a real <a> when the Google Reviews URL is set (see
       single-treatment.php) - resets so it still looks identical either way. */
    text-decoration: none;
    transition: opacity 0.2s ease;
}

a.treatment-reviews-summary-rating:hover {
    opacity: 0.75;
}

.treatment-reviews-summary-rating strong {
    color: rgba(26, 31, 46, 1);
}

.treatment-reviews-summary-rating span {
    color: #9a9aa2;
}

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

.reviews-summary-grid .testimonial-card {
    width: 100%;
}

/* No avatar/divider footer on this variant - name/location sit directly
   under the quote, matching the reference design. */
.testimonial-card-summary .testimonial-card-who {
    margin-top: 2px;
}

/* Real Google/Trustpilot logo, bottom-right of the card - see
   hmc_render_reviews_summary_grid_html(). Extra right padding on the card
   keeps the quote/name text from ever running under the icon. */
.testimonial-card-summary {
    position: relative;
    padding-right: 52px;
}

.testimonial-card-platform-icon {
    position: absolute;
    right: 16px;
    bottom: 16px;
}

.testimonial-card-platform-icon img {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* "1 and a half card" peek carousel - the Treatment page's Other
   Treatments / Smile Gallery / Patient Reviews sections at phone widths
   (<=640px). Built by initMobilePeekSlider() in custom.js, which flattens
   that section's desktop grouped/grid markup into this native horizontal
   scroller (restoring the original on resize back up past the breakpoint)
   - same step-by-one-card-width mechanism as the Doctor page's
   .hmc-hscroll, just sized so the next card visibly peeks in rather than
   sitting fully off-screen. */
/* Belt-and-suspenders for the Patient Reviews case specifically: its
   .hmc-peek-slider lands inside .reviews-summary-grid, a CSS Grid (unlike
   Other Treatments/Smile Gallery, which inject into a plain block wrapper)
   - grid-column spans it across every column regardless of the grid's own
   current column count (1 on phones, 2 above that), and width:100% +
   min-width:0 stop it from ever being sized off its own content instead of
   the real available track width (the same class of bug already fixed via
   minmax(0, 1fr) on .reviews-summary-grid's mobile column below). Both are
   no-ops outside a grid context, so harmless for the other two sections. */
.hmc-peek-slider {
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
}

.hmc-peek-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.hmc-peek-track::-webkit-scrollbar {
    display: none;
}

.hmc-peek-track > * {
    flex: 0 0 64%;
    min-width: 0;
    scroll-snap-align: start;
}

.hmc-peek-nav {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}

.hmc-peek-prev,
.hmc-peek-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e5e1d5;
    color: #8a8a92;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Smile Gallery's "See all" link (see initMobilePeekSlider()'s
   $moveSiblingIntoNav argument in custom.js) - moved from its desktop
   top-right absolute position to sit between the card track and the
   prev/next buttons on mobile, so it needs its own normal-flow styling
   here instead of the absolute one .treatment-gallery-see-all otherwise
   has (position/top/right/height from style.css's desktop rule). */
.hmc-peek-slider .treatment-gallery-see-all {
    position: static;
    height: auto;
    margin: 14px 0 0;
}

.hmc-peek-prev:hover,
.hmc-peek-next:hover {
    background: rgba(193, 150, 86, 1);
    border-color: rgba(193, 150, 86, 1);
    color: #ffffff;
}

/* Patient Stories' pill-shaped active dot matches the Before & After
   section right above it (arrow styling for both is consolidated near
   .treatment-before-after-block .gallery-arrow). The card itself is left
   as the homepage's default rectangular .reels-item - no override needed. */
.treatment-gallery-block .gallery-dot.active::before {
    width: 22px;
    border-radius: 4px;
}

@media screen and (max-width: 1024px) {
    /* minmax(0, 1fr), not a bare 1fr: with only 1fr, this single-column
       track still expands to fit the automatic min-content size of
       .treatment-main's content (e.g. the fixed-width Other Treatments/
       Patient Stories slide rows below, which are intentionally wider than
       their column so a peeking next card gets clipped by their own
       overflow:hidden) - that silently pushed the whole grid, and the page,
       wider than the viewport at phone widths (375-390px) even though
       .treatment-main already has min-width:0. minmax(0, 1fr) forces the
       track's minimum to 0 instead of that content-based auto minimum, so
       the column - and every child relying on its own overflow:hidden -
       is actually clipped to the real available width. */
    .treatment-profile-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .treatment-main,
    .treatment-about-text {
        max-width: none;
    }

    /* Stacked to one column now, so DOM order (main content, then sidebar)
       would otherwise put "Our Services"/"Awards" at the very bottom of the
       page - order:-1 moves the sidebar back above .treatment-main instead,
       so a visitor sees them right away rather than after scrolling past
       everything else. */
    .treatment-sidebar {
        order: -1;
    }

    .treatment-sidebar-sticky {
        position: static;
    }

    /* "Awards & Certifications" card - centered at this width instead of
       the desktop icon-left/text-left row. */
    .treatment-awards-card .treatment-sidebar-title {
        text-align: center;
    }

    .treatment-awards-item {
        justify-content: center;
        text-align: center;
    }

    .treatment-awards-item-text {
        align-items: center;
    }

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

    .treatment-single-hero-grid {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .treatment-single-hero-text {
        position: static;
        transform: none;
        width: auto;
        padding-right: 0;
    }

    .treatment-single-hero-media {
        width: 100%;
        margin-left: 0;
        aspect-ratio: 16 / 9;
    }

    .treatment-single-hero-img-desktop {
        display: none;
    }

    .treatment-single-hero-img-mobile {
        display: block;
    }

    .treatment-single-hero-img-mobile-wrap {
        display: block;
    }

    .treatment-cta-form-card {
        padding: 40px;
        gap: 40px;
    }

    /* Before & After keeps its desktop dots/arrows pagination in this
       stacked single-column range too (unlike Other Treatments/Smile
       Gallery/Patient Reviews, which switch to the .hmc-peek-track
       carousel instead - see initMobilePeekSlider() in custom.js) - but
       the desktop-only top-right absolute positioning (see
       .treatment-before-after-block .story-results-slider-controls above)
       otherwise floats those controls right over the title instead of
       below the card they page through. Resetting to static drops them
       into normal flow, directly under .gallery-slides; right-aligned
       rather than centered to match this section's usual right-hand
       control placement. */
    .treatment-before-after-block .story-results-slider-controls {
        position: static;
        margin-top: 20px;
        justify-content: flex-end;
    }

    /* "What Our Patients Say" + the Google rating badge share one row on
       desktop (space-between) - once .treatment-main stacks to a single,
       narrower column at this width, that squeezes the title into a
       narrow, ragged column next to the badge. Stacking them gives the
       title the full row width, with the badge on its own row under it. */
    .treatment-reviews-summary-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

@media screen and (max-width: 900px) {
    .treatments-section,
    .offers-grid-section {
        padding: 60px 0;
    }

    .treatments-title,
    .offers-hero-title {
        font-size: 28px;
    }

    .offers-hero-section {
        padding: 150px 0 60px;
    }

    .treatment-single-title {
        font-size: 30px;
    }

    /* Text-then-form stacked in one column instead of side by side - a
       660px-wide left column would otherwise leave the form squeezed. */
    .treatment-cta-form-card {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .treatment-cta-form-title {
        font-size: 24px;
    }
}

@media screen and (max-width: 640px) {
    /* Phone only - cancels the 1024px query's order:-1 above. On a real
       phone, the Awards/CTA sidebar cards go back to their natural DOM
       position (after the rest of the article, right before the separate
       treatment-cta-form section that follows this whole grid) instead of
       being the first thing on the page. Tablets (641-1024px) keep the
       CTA-first behavior. */
    .treatment-sidebar {
        order: 0;
    }

    .treatment-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    /* Shorter photo and tighter type at this width - the fixed 220px
       media height (fine at full card width) made each photo look like a
       tall narrow strip once the card itself was only ~half the screen
       wide. */
    .treatment-card-media {
        height: 120px;
    }

    .treatment-card-content {
        padding: 14px 14px 16px;
    }

    .treatment-card-name {
        font-size: 14px;
        min-height: 36px;
        margin-bottom: 4px;
    }

    .treatment-card-description {
        font-size: 12px;
        min-height: 48px;
        margin-bottom: 12px;
    }

    .treatment-card-footer {
        flex-wrap: wrap;
        gap: 6px;
        padding-top: 10px;
    }

    .treatment-card-price,
    .treatment-card-link {
        font-size: 12px;
    }

    .treatment-single-container {
        padding: 0 20px;
    }

    .treatment-cta-form-section {
        padding: 0 20px;
    }

    .treatment-single-header {
        padding-top: 100px;
    }

    .treatment-single-hero-wrap {
        padding: 0 20px 40px;
    }

    .treatment-hero-cta-row {
        gap: 14px;
    }

    /* Fixed 3-equal-column grid, tuned for desktop, was forcing each
       "Why Patients Choose Tirana" card down to ~90px wide at phone widths
       - narrow enough that most words wrapped one per line and the copy
       became unreadable. Stacking to 1 column keeps the full card width
       for text. */
    .treatment-tirana-cards {
        grid-template-columns: 1fr;
    }

    /* Same fixed-2-column issue as above: at phone widths this left each
       Patient Reviews card at ~179px wide, wrapping quotes into a narrow
       ragged column. Stacks to 1 full-width card per row instead.
       minmax(0, 1fr), not a bare 1fr: this grid's single track otherwise
       sizes itself from its child's content instead of the actual
       available width (same issue already fixed on .treatment-profile-grid
       - see the minmax(0, 1fr) comment above) - below ~570px that pushed
       the injected .hmc-peek-track/.hmc-peek-nav (see
       initMobilePeekSlider() in custom.js) wider than the viewport,
       running the prev/next buttons off the right edge of the page. */
    .reviews-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Same fixed-grid issue as .treatment-tirana-cards above. */
    .treatment-material-cards {
        grid-template-columns: 1fr;
    }

    /* 2 cards per row (not 1) - these are short price/day-count/session-count
       stats, not paragraphs of text, so they stay legible at half width and
       reading 4 of them 2-by-2 is faster than scrolling through 4 full-width
       rows. */
    .treatment-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Same fixed-grid issue as .treatment-stats-grid/.treatment-material-cards
       above - 3 even columns at phone widths squeezes each "Other
       Treatments" card down to ~90px wide. Stacks to 1 full-width card
       per row instead. */
    .treatment-related-slide-row {
        grid-template-columns: 1fr;
    }

    /* Same issue again - the Instagram embeds' own ~326px minimum width
       can't fit 3 across at phone widths at all. Stacks to 1 per row. */
    .treatment-gallery-slide-row {
        grid-template-columns: 1fr;
    }

    /* Full name / Phone side by side would squeeze each field too narrow
       at phone widths - stack them instead, same as every other 2-up
       .getstarted-form-row on the site already does at this width. */
    .treatment-cta-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .treatment-cta-form-card {
        padding: 28px;
        border-radius: 20px;
    }

    .treatment-cta-form-title {
        font-size: 22px;
    }
}

/* ==========================================================================
   Before & After page - a grid of independent drag-to-reveal cards (the
   same .hmca-compare widget used on Smile Story pages, one per card
   instead of a single one-at-a-time carousel).
   ========================================================================== */

.before-after-grid {
    display: grid;
    /* Without an explicit width, a grid's fr columns fall back to sizing
       from content (not the full available row) whenever the grid's own
       width would otherwise be indefinite - which made a partial last
       slide (fewer cards) size its fr columns differently from a full
       slide, even with the same column count. Pinning width:100% forces
       every slide's grid to the same box, so fr columns - and therefore
       every card - come out an identical size regardless of card count. */
    width: 100%;
    /* --slide-cols is set inline to the slider's fixed per-slide count
       (hmc_render_grouped_slider_html()) - always the same value on every
       slide, even a partial last one with fewer cards; falls back to 3 for
       the standalone Smile Gallery archive page grid, which doesn't set it. */
    grid-template-columns: repeat(var(--slide-cols, 3), 1fr);
    gap: 30px;
}

.before-after-card.is-hidden {
    display: none;
}

.before-after-card .hmca-compare {
    width: 100%;
    aspect-ratio: 6 / 3;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.before-after-card .gallery-caption {
    text-align: left;
    margin-top: 12px;
}

@media screen and (max-width: 1024px) {
    .before-after-grid,
    .reels-slide-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 640px) {
    .before-after-grid,
    .reels-slide-row {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Contact page - info cards, FAQ + Book Appointment form, map.
   ========================================================================== */

.contact-info-section {
    background: #faf9f7;
    padding: 80px 0 60px;
}

.contact-info-container {
    position: relative;
    isolation: isolate;
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

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

/* Same glass-fill card as the Dental Tourism "Your Journey" cards
   (.tourism-journey-card) - translucent fill + a thin inner-aligned
   border (inset box-shadow, not the `border` property), instead of a
   flat opaque white card. */
.contact-info-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 290px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 14px;
    padding: 40px 28px;
    text-align: center;
}

.contact-info-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.88);
}

.contact-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(193, 150, 86, 0.12);
    color: rgba(193, 150, 86, 1);
}

.contact-info-title {
    display: block;
    font-size: 15px;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 10px;
}

.contact-info-text {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(107, 107, 118, 1);
    width: 65%;
    align-self: center;
}

.contact-info-text a {
    display: inline-block;
    color: rgba(193, 150, 86, 1);
    font-weight: 600;
    text-decoration: none;
    margin-top: 2px;
}

.contact-info-text a:hover {
    text-decoration: underline;
}

.contact-hours-note {
    text-align: center;
    font-style: italic;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(107, 107, 118, 1);
    max-width: 900px;
    margin: 40px auto 0;
}

.contact-main-section {
    background: #faf9f7;
    padding: 80px 0;
}

.contact-main-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.contact-main-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: start;
}

/* Grid items default to min-width:auto, which floors their shrinkage at
   their content's own min-content width - the FAQ list's question rows
   (flex, nowrap-ish content) are wide enough that this floor exceeded the
   actual grid track at narrow viewports, pushing the whole column (and
   its "Frequently Asked Questions" heading) past the right edge instead
   of wrapping within it. Same bug class as .faq-explorer-intro's own
   min-width: 0 above. */
.contact-faq-col,
.contact-form-col {
    min-width: 0;
}

.contact-faq-col {
    /* Offsets the #faqs anchor scroll target so the fixed header doesn't
       cover the "Frequently Asked Questions" heading. */
    scroll-margin-top: 100px;
}

.contact-before-appt-note {
    background: rgba(193, 150, 86, 0.1);
    border: 1px solid rgba(193, 150, 86, 0.25);
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 34px;
}

.contact-before-appt-note strong {
    display: block;
    font-size: 14px;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 4px;
}

.contact-before-appt-note p {
    font-size: 13px;
    line-height: 1.5;
    color: #6b6b76;
    margin: 0;
}

.contact-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}

.contact-faq-item {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 16px 20px;
}

.contact-faq-item[open] {
    border-color: rgba(193, 150, 86, 0.4);
}

.contact-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(26, 31, 46, 1);
    cursor: pointer;
    list-style: none;
}

.contact-faq-question::-webkit-details-marker {
    display: none;
}

.contact-faq-icon {
    flex-shrink: 0;
    color: rgba(193, 150, 86, 1);
    transition: transform 0.25s ease;
}

.contact-faq-item[open] .contact-faq-icon {
    transform: rotate(180deg);
}

.contact-faq-answer {
    font-size: 13px;
    line-height: 1.6;
    color: #6b6b76;
    margin-top: 12px;
}

.contact-form-title-center,
.contact-form-subtitle-center {
    text-align: center;
}

/* ==========================================================================
   FAQ PAGE - explorer section under the hero (page-faq.php)
   ========================================================================== */

.faq-explorer-section {
    padding: 90px 0 110px;
}

.faq-explorer-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 0.85fr 1.3fr;
    gap: 70px;
    align-items: start;
}

.faq-explorer-intro {
    position: sticky;
    top: 110px;
    /* Without this, the grid item's min-width defaults to its content's
       min-content size - and .faq-tabs-track below (a nowrap flex row)
       has a min-content equal to the sum of every tab's width, which
       inflates this whole column (and so the single-column grid track on
       mobile) instead of letting the tab row actually scroll/crop as
       intended. Same bug class as .hmc-peek-slider's own min-width: 0. */
    min-width: 0;
}

.faq-explorer-eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 14px;
}

.faq-explorer-heading {
    font-size: 42px;
    line-height: 1.15;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 18px;
}

.faq-explorer-heading-accent {
    color: rgba(193, 150, 86, 1);
}

.faq-explorer-description {
    font-size: 16px;
    line-height: 1.7;
    color: #6b6b76;
    max-width: 40ch;
    margin-bottom: 28px;
}

.faq-explorer-notfound {
    display: flex;
    flex-direction: column;
    /* Flex's default align-items: stretch would otherwise stretch the link
       below to the full width of this column, making its whole line
       clickable/underlined instead of just its own text. */
    align-items: flex-start;
    gap: 2px;
    font-size: 13px;
    margin-bottom: 28px;
}

.faq-explorer-notfound span {
    display: block;
    color: #6b6b76;
}

.faq-explorer-notfound a {
    color: rgba(193, 150, 86, 1);
    font-weight: 600;
    text-decoration: underline;
}

.faq-explorer-cta {
    display: inline-flex;
}

.faq-explorer-panel {
    /* See .faq-explorer-intro's own copy of this comment - this column is
       the one that directly contains the nowrap .faq-tabs-track row, so
       it needs this most of all. */
    min-width: 0;
}

/* Category tabs card: the same .offers-filter-pill component Offers/
   Doctors/Smile Gallery already use (including its click-to-filter JS -
   see .offers-filter-pills in custom.js) restyled from that component's
   default gold pill buttons into plain text tabs with a soft highlight
   pill behind only the active one, inside a rounded card - see
   initFaqTabsScrollbar() in custom.js for the fake-scrollbar thumb below
   the tab row (7+ categories only, see hmc_render_faq_explorer_html()). */
.faq-tabs-card {
    background: #F8F6F0;
    border: 1px solid rgba(26, 26, 26, 0.08);
    border-radius: 24px;
    padding: 18px 24px 16px;
    margin-bottom: 32px;
}

.faq-tabs-track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 28px;
    /* Overrides .offers-filter-pills' own 44px - spacing to whatever comes
       next (the scrollbar row, or straight to the FAQ list) is handled by
       .faq-tabs-card's padding/.faq-tabs-scrollbar's margin instead. */
    margin-bottom: 0;
}

.faq-tabs-track::-webkit-scrollbar {
    display: none;
}

.faq-tabs-track .offers-filter-pill {
    flex-shrink: 0;
    background: none;
    padding: 8px 4px;
    text-transform: none;
    font-size: 15px;
    font-weight: 600;
    color: rgba(26, 31, 46, 0.65);
}

.faq-tabs-track .offers-filter-pill:hover {
    background: none;
    color: rgba(26, 31, 46, 1);
}

.faq-tabs-track .offers-filter-pill.is-active {
    background: #F3ECDD;
    padding: 8px 20px;
    color: rgba(26, 31, 46, 1);
}

.faq-tabs-scrollbar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(26, 26, 26, 0.08);
}

.faq-tabs-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    padding: 0;
    color: rgba(26, 31, 46, 0.35);
    cursor: pointer;
    transition: color 0.2s ease;
}

.faq-tabs-arrow:hover {
    color: rgba(193, 150, 86, 1);
}

.faq-tabs-scrollbar-track {
    position: relative;
    flex: 1;
    height: 5px;
    background: rgba(26, 26, 26, 0.1);
    border-radius: 999px;
    overflow: hidden;
}

.faq-tabs-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
    background: rgba(26, 31, 46, 0.4);
    border-radius: 999px;
    cursor: grab;
    transition: background 0.2s ease;
}

.faq-tabs-scrollbar-track:hover .faq-tabs-scrollbar-thumb {
    background: rgba(193, 150, 86, 1);
}

/* While dragging the thumb (see custom.js), the pointer can outrun the
   thumb's own edges between mousemove ticks - a plain :active cursor on
   the thumb alone would keep flickering back to the default arrow the
   instant that happens, so the grabbing cursor + disabled selection are
   applied to the whole page for the drag's duration instead. */
body.faq-tabs-scrollbar-dragging {
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none;
}

body.faq-tabs-scrollbar-dragging .faq-tabs-scrollbar-thumb {
    cursor: grabbing;
}

.faq-explorer-list .contact-faq-item {
    padding: 18px 22px;
}

.faq-explorer-list .contact-faq-item.is-hidden {
    display: none;
}

.faq-explorer-list .contact-faq-question {
    font-size: 15px;
}

.faq-explorer-list .contact-faq-answer {
    font-size: 14px;
}

@media screen and (max-width: 1024px) {
    .faq-explorer-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .faq-explorer-intro {
        position: static;
    }
}

@media screen and (max-width: 640px) {
    .faq-explorer-section {
        padding: 60px 0 70px;
    }

    .faq-explorer-heading {
        font-size: 32px;
    }
}

.contact-form-subtitle-center strong {
    color: rgba(193, 150, 86, 1);
}

.contact-form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 10px;
    line-height: 1.5;
    color: #444444;
    margin-bottom: 14px;
    cursor: pointer;
}

.contact-form-checkbox input {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: rgba(193, 150, 86, 1);
}

.contact-map-section {
    background: #faf9f7;
    padding: 80px 0;
}

.contact-map-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.contact-map-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Corner glows - gold left (behind the text column), blue right (behind
   the map) - same recipe as the rest of the site. z-index:-1 relative to
   this isolated frame keeps them behind both the text and the map. */
.contact-map-frame::before,
.contact-map-frame::after {
    content: '';
    position: absolute;
    top: 20%;
    transform: translateY(-50%);
    width: 500px;
    height: 500px;
    z-index: -1;
    pointer-events: none;
}

.contact-map-frame::before {
    left: -400px;
    background: radial-gradient(circle, rgba(193, 150, 86, 0.3) 0%, rgba(193, 150, 86, 0) 70%);
}

.contact-map-frame::after {
    right: -150px;
    background: radial-gradient(circle, rgba(72, 137, 241, 0.3) 0%, rgba(72, 137, 241, 0) 70%);
}

.contact-map-kicker {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 12px;
}

.contact-map-title {
    font-size: 30px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 14px;
}

.contact-map-address {
    font-size: 15px;
    line-height: 1.6;
    color: #6b6b76;
    max-width: 380px;
    margin-bottom: 26px;
}

.contact-map-directions-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 30px;
    color: rgba(26, 31, 46, 1);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.contact-map-directions-btn:hover {
    border-color: rgba(193, 150, 86, 1);
    background: rgba(193, 150, 86, 0.08);
}

/* Frosted-glass card wrapping BOTH the text and the map - a real div (not
   an overlay drawn on top of either), so the whole section reads as one
   bordered card, with the map itself rendering smaller/inset within its
   own column. The 1px border is drawn as an inset box-shadow (not the
   `border` property) so it's "inner aligned" - it doesn't add to the
   box's own size the way a real border would, matching the reference
   spec exactly (glass fill rgba(255,255,255,.55), 1px inner border
   rgba(255,255,255,.88)). position:relative + isolation:isolate here
   (not on .contact-map-container) is what anchors the corner glows below. */
.contact-map-frame {
    position: relative;
    isolation: isolate;
    background-color: rgba(255, 255, 255, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 15px;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.88),
        0 20px 50px rgba(0, 0, 0, 0.08);
}

/* Extra breathing room for the text column only (less top/bottom, more
   left) - kept off .contact-map-frame itself so the map's own framing
   stays tight/unaffected. */
.contact-map-text {
    padding: 4px 16px 4px 20px;
}

.contact-map-embed {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 7 / 3;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

@media screen and (max-width: 1024px) {
    .contact-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-main-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .contact-map-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }
}

@media screen and (max-width: 640px) {
    .contact-info-section,
    .contact-main-section,
    .contact-map-section {
        padding: 50px 0;
    }

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

    .contact-map-frame {
        padding: 14px;
    }
}

/* ==========================================================================
   Dental Tourism page - hero (reuses .treatment-single-header etc. - see
   page-dental-tourism.php), "why choose" bento grid, zigzag journey
   timeline, Tirana banner, hover-reveal attractions grid.
   ========================================================================== */

/* The reused .treatment-single-title defaults to 63px/max-width:420px,
   sized for a short 1-2 word treatment name - "Your Dental Tourism
   Destination" is a full sentence, so left at that size it wraps to 3
   cramped lines instead of the reference's smaller, 2-line heading.
   Scoped to .tourism-hero-header instead of touching the shared class,
   and only above the existing 900px breakpoint where
   .treatment-single-title itself already drops to 30px (its own
   specificity would otherwise lose to this more-specific selector). */
@media screen and (min-width: 901px) {
    .tourism-hero-header .treatment-single-title {
        font-size: 40px;
        max-width: 520px;
    }
}

/* Why Choose Us - see .why-choose-section etc. near the top of this file
   (shared verbatim with the homepage; see page-dental-tourism.php). */

/* Journey timeline (zigzag with connecting line) */

.tourism-journey-section {
    background: #faf9f7;
    padding: 100px 0;
}

.tourism-journey-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

.tourism-journey-header {
    display: flex;
    justify-content: space-between;
    /* flex-end (not center) - .tourism-journey-header-text stacks a small
       kicker above the title, so centering the row against that whole
       block leaves the description sitting nearer the gap between them
       instead of lining up with the title's own line. Bottom-aligning
       both items lines the description up with the title, since the
       title is always the last (bottom) line in that stacked block. */
    align-items: flex-end;
    gap: 40px;
    flex-wrap: wrap;
    text-align: left;
    margin: 0 0 64px;
}

.tourism-journey-header-description {
    flex: 0 1 340px;
    font-size: 15px;
    line-height: 1.6;
    color: #6b6b76;
    text-align: right;
}

.tourism-journey-kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 16px;
}

.tourism-journey-kicker::before,
.tourism-journey-kicker::after {
    content: '';
    display: inline-block;
    width: 26px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
}

.tourism-journey-heading {
    font-size: 34px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
}

.tourism-journey-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.tourism-journey-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(193, 150, 86, 0.3);
    transform: translateX(-50%);
}

/* Scroll-driven "fill" overlay - a real element (not just a pseudo-element)
   so custom.js can set its height directly as the page scrolls, painted
   on top of the always-visible faint track above but below every step's
   own number/card. z-index:0 (not a positive value) matters here: each
   .tourism-journey-step below is its own stacking context via
   isolation:isolate (for the corner glows), which - per the CSS stacking
   spec - puts it in the SAME "z-index:0" paint bucket as this element,
   ordered by DOM position (this fill is first, so it sits under every
   step). A positive z-index would instead jump this whole element into
   the bucket that paints above ALL z-index:0 stacking contexts,
   regardless of DOM order - which is what was covering the numbers. */
.tourism-journey-timeline-fill {
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    /* Set in px by JS, not % - the timeline's own height comes from its
       step children in normal flow (not an explicit height), and percentage
       heights don't resolve against an auto-height containing block. */
    height: 0px;
    background: rgba(193, 150, 86, 1);
    transform: translateX(-50%);
    z-index: 0;
}

.tourism-journey-step {
    position: relative;
    isolation: isolate;
    width: 50%;
    margin-bottom: 54px;
}

.tourism-journey-step:last-child {
    margin-bottom: 0;
}

.tourism-journey-step-right {
    margin-left: 50%;
    padding-left: 46px;
}

.tourism-journey-step-left {
    margin-right: 50%;
    padding-right: 46px;
}

/* Corner glows for the 4 steps called out in the reference (1=blue,
   2=gold, 4=blue, 6=gold) - anchored to whichever side of the timeline
   this step's OWN card doesn't occupy (always genuinely empty, since only
   one card renders per row), so there's never a neighboring card to
   visually clash with regardless of paint order. */
.tourism-journey-glow-blue::before,
.tourism-journey-glow-gold::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 480px;
    height: 480px;
    z-index: -1;
    pointer-events: none;
}

.tourism-journey-step-right.tourism-journey-glow-blue::before,
.tourism-journey-step-right.tourism-journey-glow-gold::before {
    left: -80px;
}

.tourism-journey-step-left.tourism-journey-glow-blue::before,
.tourism-journey-step-left.tourism-journey-glow-gold::before {
    right: -80px;
}

.tourism-journey-glow-blue::before {
    background: radial-gradient(circle, rgba(72, 137, 241, 0.3) 0%, rgba(72, 137, 241, 0) 70%);
}

.tourism-journey-glow-gold::before {
    background: radial-gradient(circle, rgba(193, 150, 86, 0.3) 0%, rgba(193, 150, 86, 0) 70%);
}

.tourism-journey-number {
    position: absolute;
    top: 4px;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border-radius: 50%;
    background: rgba(193, 150, 86, 1);
    color: rgba(26, 31, 46, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    z-index: 2;
    border: 4px solid #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.tourism-journey-step-right .tourism-journey-number {
    left: -20px;
}

.tourism-journey-step-left .tourism-journey-number {
    right: -20px;
}

/* Same glass-fill card as the About page's "Our Story" mosaic
   (.about-mosaic-tile-text) - translucent fill + a thin inner-aligned
   border (inset box-shadow, not the `border` property), instead of a
   flat opaque white card. */
.tourism-journey-card {
    position: relative;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 14px;
    padding: 26px 28px;
}

.tourism-journey-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.88);
}

.tourism-journey-title {
    font-size: 18px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 8px;
}

.tourism-journey-description {
    font-size: 14px;
    line-height: 1.65;
    color: #6b6b76;
}

/* Tirana culture banner */

.tourism-tirana-section {
    background: #faf9f7;
    padding: 90px 0 100px;
}

.tourism-tirana-container {
    position: relative;
    isolation: isolate;
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Corner glows - blue top-right, gold bottom-left, same recipe as the
   other reused/redesigned sections on this page. z-index:-1 relative to
   this isolated container keeps them behind the header and banner. */
.tourism-tirana-container::before,
.tourism-tirana-container::after {
    content: '';
    position: absolute;
    width: 800px;
    height: 800px;
    z-index: -1;
    pointer-events: none;
}

.tourism-tirana-container::before {
    top: -120px;
    right: -100px;
    background: radial-gradient(circle, rgba(72, 137, 241, 0.3) 0%, rgba(72, 137, 241, 0) 70%);
}

.tourism-tirana-container::after {
    bottom: -370px;
    left: -100px;
    background: radial-gradient(circle, rgba(193, 150, 86, 0.3) 0%, rgba(193, 150, 86, 0) 70%);
}

.tourism-tirana-header {
    display: flex;
    justify-content: space-between;
    /* flex-end, not center - same reasoning as .tourism-journey-header
       above: aligns the subtitle with the title's own line instead of
       the gap between the kicker and the title. */
    align-items: flex-end;
    gap: 40px;
    flex-wrap: wrap;
    text-align: left;
    margin: 0 0 40px;
}

.tourism-tirana-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 16px;
}

.tourism-tirana-kicker::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
}

.tourism-tirana-title {
    font-size: 30px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    margin: 0;
}

.tourism-tirana-subtitle {
    flex: 0 1 340px;
    font-size: 15px;
    line-height: 1.6;
    color: #6b6b76;
    text-align: right;
}

.tourism-tirana-banner {
    position: relative;
    min-height: 340px;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(26, 31, 46, 1) center/cover no-repeat;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
}

.tourism-tirana-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(26, 31, 46, 0.7), rgba(26, 31, 46, 0.85));
}

/* Same "inline border" glassy frame as .intl-block-image (homepage) -
   an inset-only box-shadow drawn in its own layer above the photo/overlay,
   since a shadow (or border) placed directly on .tourism-tirana-banner
   itself would just be painted over by its own children. */
.tourism-tirana-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 20px;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 6px rgba(255, 255, 255, 0.7),
        inset 0 0 30px 6px rgba(255, 255, 255, 0.5);
}

.tourism-tirana-description {
    position: relative;
    z-index: 1;
    max-width: 820px;
    text-align: center;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.8;
}

/* Attractions grid (hover-reveal description) */

.tourism-attractions-section {
    background: #faf9f7;
    padding: 100px 0;
}

.tourism-attractions-container {
    position: relative;
    isolation: isolate;
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Corner glows - gold bottom-right, blue bottom-left, same recipe as the
   rest of this page's sections. z-index:-1 relative to this isolated
   container keeps them behind the header and card grid. */
.tourism-attractions-container::before,
.tourism-attractions-container::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    bottom: -150px;
    z-index: -1;
    pointer-events: none;
}

.tourism-attractions-container::before {
    right: -100px;
    background: radial-gradient(circle, rgba(193, 150, 86, 0.3) 0%, rgba(193, 150, 86, 0) 70%);
}

.tourism-attractions-container::after {
    left: -100px;
    background: radial-gradient(circle, rgba(72, 137, 241, 0.3) 0%, rgba(72, 137, 241, 0) 70%);
}

.tourism-attractions-header {
    display: flex;
    justify-content: space-between;
    /* flex-end, not center - same reasoning as the journey/Tirana headers
       above: aligns the subtitle with the title's own line instead of
       the gap between the kicker and the title. */
    align-items: flex-end;
    gap: 40px;
    flex-wrap: wrap;
    text-align: left;
    margin: 0 0 50px;
}

.tourism-attractions-subtitle {
    flex: 0 1 340px;
    font-size: 15px;
    line-height: 1.6;
    color: #6b6b76;
    text-align: right;
}

.tourism-attractions-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 16px;
}

.tourism-attractions-kicker::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background: rgba(193, 150, 86, 1);
}

.tourism-attractions-heading {
    font-size: 34px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
}

.tourism-attractions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.tourism-attraction-media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    background: #e5e5e5;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Same "inline border" glassy frame as .intl-block-image/.tourism-tirana-
   banner - z-index:2 keeps it above the hover overlay too, so the frame
   stays visible on hover instead of being covered by the dark gradient. */
.tourism-attraction-media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 14px;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 6px rgba(255, 255, 255, 0.7),
        inset 0 0 24px 5px rgba(255, 255, 255, 0.5);
}

.tourism-attraction-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.tourism-attraction-card:hover .tourism-attraction-media img {
    transform: scale(1.08);
}

.tourism-attraction-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 22px;
    background: linear-gradient(180deg, rgba(26, 31, 46, 0) 40%, rgba(26, 31, 46, 0.9) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.tourism-attraction-card:hover .tourism-attraction-overlay {
    opacity: 1;
}

.tourism-attraction-description {
    color: #ffffff;
    font-size: 13px;
    line-height: 1.55;
}

.tourism-attraction-caption {
    display: block;
    margin-top: 14px;
    font-size: 15px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
    text-align: center;
}

@media screen and (max-width: 1024px) {
    .tourism-attractions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .tourism-journey-timeline::before,
    .tourism-journey-timeline-fill {
        left: 20px;
        transform: none;
    }

    .tourism-journey-step,
    .tourism-journey-step-right,
    .tourism-journey-step-left {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 56px;
        padding-right: 0;
    }

    .tourism-journey-step-right .tourism-journey-number,
    .tourism-journey-step-left .tourism-journey-number {
        left: 0;
        right: auto;
    }

    .tourism-tirana-banner {
        padding: 34px;
        min-height: auto;
    }

    .tourism-attractions-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   About page - hero, mission/vision + award badge, "Who We Are" with
   diagonal-cut image, specialized treatments hover grid, story mosaic.
   ========================================================================== */

/* The About page's hero now reuses the Treatment single page's own hero
   markup/classes verbatim (.treatment-single-header etc. - see
   page-about.php) instead of this dark banner, so no About-specific hero
   CSS lives here anymore. */

/* Specialized treatments grid */

/* position:relative + isolation:isolate so the corner glows below (own
   stacking context, same technique as .treatment-before-after-block) paint
   behind the grid/CTA content without needing z-index on every child. */
.about-treatments-section {
    position: relative;
    isolation: isolate;
    background: #faf9f7;
    padding: 90px 0;
}

/* Same radial-gradient recipe as .intl-block's own corner glows (blue
   rgba(72,137,241)/gold rgba(193,150,86)) - anchored to the section's own
   bottom corners so they read as sitting under the card grid + CTA below
   the header, rather than up near the title. */
.about-treatments-section::before,
.about-treatments-section::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 600px;
    height: 600px;
    pointer-events: none;
}

.about-treatments-section::before {
    bottom: -80px;
    left: -150px;
    background: radial-gradient(circle, rgba(72, 137, 241, 0.3) 0%, rgba(110, 173, 239, 0) 70%);
}

.about-treatments-section::after {
    bottom: -80px;
    right: -150px;
    background: radial-gradient(circle, rgba(193, 150, 86, 0.3) 0%, rgba(193, 150, 86, 0) 70%);
}

.about-treatments-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Cards reuse the site's shared .treatment-card component verbatim (see
   hmc_render_about_treatments_html() in inc/repeater-render.php) - a real
   clickable <a>, photo on top + always-visible name/description below,
   instead of the old hover-to-reveal photo overlay this grid used to be.
   3 columns so 6 category cards land as 2 full rows, matching the
   reference design. */
.about-treatments-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 50px;
}

/* .intl-description is right-aligned by design on the homepage (its own
   source), but that reads like backwards/RTL text on a multi-line
   paragraph - left-align it for this reused instance without touching the
   shared class itself. */
.about-treatments-intro {
    text-align: left;
}

/* Story mosaic */

.about-mosaic-section {
    background: #faf9f7;
    padding: 90px 0;
}

.about-mosaic-container {
    max-width: 1550px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Header uses the same reused .intl-header/-header-text/-kicker/-title
   2-column layout as the Foundation and Treatments sections above (see the
   note near .about-treatments-intro); .about-mosaic-intro applies the same
   left-align override for the same reason. */
.about-mosaic-intro {
    text-align: left;
}

.about-mosaic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 340px;
    gap: 20px;
}

.about-mosaic-tile {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}

/* Inner-aligned border (inset box-shadow, not the `border` property) -
   thin 1px on the text/glass cards, matching the Figma "glass fill" spec
   for THIS tile type. */
.about-mosaic-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 16px;
    pointer-events: none;
}

/* Photo tiles instead get the same chunky "inline border" glassy frame as
   the Our Foundation cards (.intl-block-image) - a thick inset border
   plus a soft inner glow, not the thin 1px line above, so these read as
   the same family of image card used elsewhere on this page. */
.about-mosaic-tile-photo::after {
    box-shadow:
        inset 0 0 0 5px rgba(255, 255, 255, 0.7),
        inset 0 0 30px 6px rgba(255, 255, 255, 0.5);
}

/* Per-tile corner glows for the 2 photo tiles called out in the reference
   (2nd card, bottom-left card) - a wrapper (not the tile itself) carries
   the glow because .about-mosaic-tile has overflow:hidden for its rounded
   photo corners, which would clip a glow positioned on the tile directly.
   z-index:2 on the wrap (grid items stack by z-index even though static -
   CSS Grid spec) keeps it painting above sibling tiles it may overflow
   into; z-index:-1 on the glow itself keeps it behind this wrap's own
   tile within that same stacking context.
   Card 2 (blue) bleeds UPWARD into the 56px gap above the grid (genuinely
   empty space - a downward bleed would fade to fully transparent before
   it ever cleared the 20px row gap into row 2, per the radial-gradient's
   own 70% falloff, so it would never actually show). Card 4/gold (last
   row) bleeds downward into the section's own bottom padding instead -
   nothing to occlude there, and any excess is simply covered by the next
   section's own opaque background. */
.about-mosaic-glow-wrap {
    position: relative;
    isolation: isolate;
    z-index: 2;
}

.about-mosaic-glow-wrap .about-mosaic-tile {
    height: 100%;
}

.about-mosaic-glow-wrap::after {
    content: '';
    position: absolute;
    left: 57%;
    transform: translateX(-50%);
    width: 560px;
    height: 560px;
    z-index: -1;
    pointer-events: none;
}

.about-mosaic-glow-blue::after {
    top: -110px;
    background: radial-gradient(circle, rgba(72, 137, 241, 0.45) 0%, rgba(72, 137, 241, 0) 70%);
}

.about-mosaic-glow-gold::after {
    bottom: -130px;
    background: radial-gradient(circle, rgba(193, 150, 86, 0.45) 0%, rgba(193, 150, 86, 0) 70%);
}

.about-mosaic-tile-text {
    background: rgba(255, 255, 255, 0.55);
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.about-mosaic-tile-text p {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(153, 161, 175, 1);
}

.about-mosaic-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    color: rgba(193, 150, 86, 1);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.about-mosaic-link svg {
    color: rgba(193, 150, 86, 1);
    transition: transform 0.25s ease;
}

.about-mosaic-link:hover svg {
    transform: translateX(4px);
}

.about-mosaic-tile-photo {
    position: relative;
    background: #e5e5e5;
}

.about-mosaic-tile-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 1024px) {
    .about-mosaic-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .about-treatments-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-mosaic-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 320px;
    }
}

@media screen and (max-width: 480px) {
    .about-treatments-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================================================
   WCAG contrast fix: gold-as-text on light backgrounds
   ========================================================================== */

/* The brand gold (rgba(193, 150, 86, 1)) fails WCAG contrast when used as
   text on white/cream backgrounds. Buttons, borders, and gold-on-dark-navy
   usages (hero sections, etc.) keep the original gold; only the text-on-light
   instances below switch to this darker shade. Placed at the end of the
   file so it wins the cascade over the earlier same-specificity rules. */
.why-choose-kicker,
.gallery-kicker,
.stories-section-kicker,
.story-section-kicker,
.doctors-kicker,
.doctors-section-kicker,
.doctor-block-kicker,
.clinic-gallery-kicker,
.testimonials-kicker,
.treatments-kicker,
.treatment-block-kicker,
.contact-map-kicker,
.tourism-journey-kicker,
.tourism-attractions-kicker,
.why-choose-title-accent,
.treatment-card-price,
.doctor-card-role,
.legal-body a,
.blog-content a,
.doctor-credentials-list li .doctor-credentials-years,
.contact-form-subtitle-center strong,
.treatment-sidebar-title {
    color: rgb(195, 152, 91, 1);
}

/* .reels-cta-link's default gold is tuned for the homepage's .reels-cta-pill
   (a solid white pill button, where the gold reads as an icon accent) - the
   Treatment page's Smile Gallery still uses it as a plain text link, so it
   needs its own darker, more legible gold here. */
.treatment-gallery-block .reels-cta-link {
    color: rgb(177, 153, 117, 1);
}

/* ==========================================================================
   REVIEWS PAGE (page-reviews.php)
   ========================================================================== */

.reviews-hero-section {
    padding: 170px 0 50px;
    background: #faf9f7;
}

.reviews-hero-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

.reviews-hero-text {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 50px;
}

.reviews-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: rgba(193, 150, 86, 1);
    margin-bottom: 14px;
}

.reviews-hero-title {
    font-size: 52px;
    line-height: 1.15;
    font-weight: 800;
    color: rgba(26, 31, 46, 1);
    margin-bottom: 20px;
}

.reviews-hero-title-accent {
    color: rgba(193, 150, 86, 1);
}

.reviews-hero-description {
    font-size: 16px;
    line-height: 1.6;
    color: #6b6b76;
}

.reviews-filter-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8a8a94;
    margin-bottom: 14px;
}

.reviews-filter-hscroll {
    display: flex;
    align-items: center;
    gap: 14px;
}

.reviews-filter-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #ffffff;
    color: #6b6b76;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.reviews-filter-arrow:hover {
    background: rgba(193, 150, 86, 1);
    border-color: rgba(193, 150, 86, 1);
    color: #ffffff;
}

.reviews-filter-pills {
    /* position:relative so each pill's offsetLeft (used by the
       scroll-by-one-pill JS in custom.js) is computed relative to THIS
       scroll container, not the nearest ancestor that actually has
       positioning (which without this was <body> - static elements don't
       become an offsetParent, so every pill's offsetLeft was its distance
       from the top of the page, not from the start of this row). */
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.reviews-filter-pills::-webkit-scrollbar {
    display: none;
}

.reviews-filter-pill {
    flex-shrink: 0;
    padding: 12px 24px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    color: #444444;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.reviews-filter-pill:hover {
    border-color: rgba(193, 150, 86, 0.5);
}

.reviews-filter-pill.is-active {
    background: rgba(193, 150, 86, 0.14);
    border-color: rgba(193, 150, 86, 0.4);
    color: rgba(163, 116, 56, 1);
}

.reviews-content-section {
    background: #faf9f7;
    padding: 20px 0 100px;
}

.reviews-content-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 60px;
    /* align-items intentionally left at the default "stretch" - the
       sidebar column needs to be as tall as the review list column so
       .reviews-sidebar-sticky has room to travel down the page as you
       scroll (align-items:start would shrink-wrap it to the short summary
       card's own height instead, leaving position:sticky nothing to
       stick within). Same reasoning as .blog-single-layout. */
}

.reviews-sidebar-sticky {
    position: sticky;
    top: 110px;
}

.reviews-summary-card {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: #F8F0E8;
    border-radius: 24px;
    padding: 48px 32px;
}

.reviews-summary-leaf {
    position: absolute;
    top: 44px;
    color: rgba(193, 150, 86, 0.35);
    pointer-events: none;
}

.reviews-summary-leaf-left {
    left: 18px;
}

.reviews-summary-leaf-right {
    right: 18px;
}

.reviews-summary-rating {
    position: relative;
    display: block;
    font-size: 56px;
    font-weight: 800;
    color: rgba(26, 31, 46, 1);
    line-height: 1;
    margin-bottom: 18px;
    padding-top: 30px;
}

.reviews-summary-text {
    position: relative;
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a52;
    padding-top: 30px;
    margin-bottom: 6px;
}

.reviews-summary-text strong {
    color: rgba(163, 116, 56, 1);
}

.reviews-summary-sub {
    position: relative;
    display: block;
    font-size: 13px;
    color: #8a8a94;
    margin-bottom: 24px;
}

.reviews-summary-logos {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.reviews-summary-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.reviews-summary-logo-icon {
    height: 28px;
    width: auto;
}

.reviews-main-header {
    margin-bottom: 22px;
}

.reviews-count-heading {
    font-size: 26px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
}

.reviews-search-wrap {
    position: relative;
    margin-bottom: 34px;
}

.reviews-search-icon {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    color: #a0a0aa;
    pointer-events: none;
}

.reviews-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 20px 15px 46px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    background: #ffffff;
    font-family: inherit;
    font-size: 14px;
    color: rgba(26, 31, 46, 1);
}

.reviews-search-input:focus {
    outline: none;
    border-color: rgba(193, 150, 86, 0.6);
}

.reviews-list {
    display: flex;
    flex-direction: column;
}

.reviews-card {
    padding: 26px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.reviews-list .reviews-card:first-child {
    padding-top: 0;
}

.reviews-card.reviews-card-more {
    display: none;
}

.reviews-card.reviews-card-more.is-revealed,
.reviews-card.reviews-card-more.is-search-revealed {
    display: block;
}

.reviews-card.is-filtered-out,
.reviews-card.is-search-hidden {
    display: none !important;
}

.reviews-card-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 10px;
}

.reviews-card-source {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(193, 150, 86, 1);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-bottom: 10px;
}

.reviews-card-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.reviews-card-name {
    font-size: 15px;
    font-weight: 700;
    color: rgba(26, 31, 46, 1);
}

.reviews-card-tag {
    font-size: 13px;
    color: #8a8a94;
}

.reviews-card-quote {
    font-size: 15px;
    line-height: 1.7;
    color: #444450;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.reviews-card.is-quote-expanded .reviews-card-quote {
    -webkit-line-clamp: unset;
    overflow: visible;
}

.reviews-card-more-toggle {
    display: inline-block;
    margin-top: 6px;
    padding: 0;
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 600;
    color: rgba(193, 150, 86, 1);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.reviews-load-more {
    display: block;
    margin: 40px auto 0;
    padding: 15px 40px;
    background: #1a1a2e;
    border: none;
    border-radius: 30px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.reviews-load-more:hover {
    background: rgba(26, 26, 46, 0.85);
    transform: translateY(-1px);
}

.reviews-empty,
.reviews-no-results {
    text-align: center;
    color: #8a8a94;
    padding: 30px 0;
}

@media screen and (max-width: 900px) {
    .reviews-hero-section {
        padding: 140px 0 40px;
    }

    .reviews-hero-title {
        font-size: 34px;
    }

    .reviews-content-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .reviews-sidebar-sticky {
        position: static;
    }

    .reviews-summary-card {
        max-width: 400px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 480px) {
    .reviews-hero-container,
    .reviews-content-container {
        padding: 0 20px;
    }

    .reviews-hero-title {
        font-size: 28px;
    }

    .reviews-hero-description {
        font-size: 15px;
    }
}

/* ==========================================================================
   FLOATING WHATSAPP BUTTON - sitewide (footer.php), fixed bottom-left
   ========================================================================== */

.whatsapp-float {
    position: fixed;
    left: 24px;
    /* --consult-footer-lift (custom.js) pushes this up once the footer
       scrolls close enough that it would otherwise sit on top of it - see
       .consult-float's own comment block for why. Stays 0px everywhere else. */
    bottom: calc(24px + env(safe-area-inset-bottom, 0px) + var(--consult-footer-lift, 0px));
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    /* WhatsApp's own brand green, rather than the site's gold - this
       button specifically should read as "WhatsApp" at a glance. */
    background: linear-gradient(135deg, #25d366 0%, #1fb855 100%);
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.45);
    /* The gentle up/down bob is what reads as "alive" at rest - hover
       pauses it so the lift/scale below feels intentional, not fighting
       the idle animation. */
    animation: whatsapp-float-bob 3.2s ease-in-out infinite;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.whatsapp-float:hover {
    animation-play-state: paused;
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 12px 28px rgba(37, 211, 102, 0.55);
}

.whatsapp-float svg {
    flex-shrink: 0;
}

@keyframes whatsapp-float-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* A soft ring that repeatedly expands and fades behind the button - the
   "alive"/attention-grabbing pulse. position:absolute + inset:0 so it
   starts exactly the button's own size/shape and grows outward from
   there, sitting behind the button's own content via z-index. */
.whatsapp-float-pulse {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #25d366;
    z-index: -1;
    animation: whatsapp-float-pulse-ring 2.4s ease-out infinite;
}

@keyframes whatsapp-float-pulse-ring {
    0% { opacity: 0.55; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.5); }
}

/* Label stays hidden until hover - a small pill that slides out to the
   right of the circle, rather than a permanently-visible text button. */
.whatsapp-float-tooltip {
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translate(-8px, -50%);
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(26, 31, 46, 1);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.whatsapp-float-tooltip::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: rgba(26, 31, 46, 1);
}

.whatsapp-float:hover .whatsapp-float-tooltip {
    opacity: 1;
    transform: translate(0, -50%);
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-float,
    .whatsapp-float-pulse {
        animation: none;
    }
}

@media screen and (max-width: 640px) {
    .whatsapp-float {
        left: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--consult-footer-lift, 0px));
        width: 46px;
        height: 46px;
    }

    /* No hover on touch devices - the label would otherwise be
       permanently unreachable rather than just decorative. */
    .whatsapp-float-tooltip {
        display: none;
    }
}

/* ==========================================================================
   FLOATING CONSULTATION BUTTON - sitewide (footer.php), fixed bottom-right
   (opposite corner from .whatsapp-float - same size/mechanism, gold
   instead of WhatsApp green so the two stay visually distinct).

   On the homepage, this starts as a small hidden circle and only reveals
   itself once .hero-section has scrolled fully out of view (see the
   "Floating Book a Free Consultation" block in custom.js, which toggles
   .is-past-hero/.is-first-reveal). The very first time it reveals itself
   each page load, it plays consult-blob-intro: a wobbling organic blob
   (with two little satellite bubbles popping off it) that settles into
   this pill shape with its label - rather than the icon-only circle this
   used to just always show. On any page without a hero, custom.js adds
   .is-past-hero immediately, so it behaves exactly as it always did.
   ========================================================================== */

.consult-float {
    position: fixed;
    right: 24px;
    /* --consult-footer-lift (custom.js) pushes this up once the footer
       scrolls close enough that it would otherwise sit on top of it - see
       that comment block for why. Stays 0px everywhere else. */
    bottom: calc(24px + env(safe-area-inset-bottom, 0px) + var(--consult-footer-lift, 0px));
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(214, 168, 102, 1) 0%, rgba(193, 150, 86, 1) 100%);
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(193, 150, 86, 0.45);
    /* Hidden resting state until .is-past-hero is added - see block
       comment above. */
    opacity: 0;
    transform: scale(0.4);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease, width 0.35s ease, height 0.35s ease, padding 0.35s ease, border-radius 0.35s ease, box-shadow 0.25s ease;
}

.consult-float.is-past-hero {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    width: 265px;
    height: 56px;
    padding: 0 24px 0 18px;
    border-radius: 30px;
    animation: consult-float-bob 3.2s ease-in-out infinite;
    animation-delay: 0.3s;
}

.consult-float:hover {
    animation-play-state: paused;
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 12px 28px rgba(193, 150, 86, 0.55);
}

.consult-float-icon {
    flex-shrink: 0;
}

@keyframes consult-float-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.consult-float-pulse {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(193, 150, 86, 1);
    z-index: -1;
    animation: consult-float-pulse-ring 2.4s ease-out infinite;
    animation-delay: 0.3s;
}

@keyframes consult-float-pulse-ring {
    0% { opacity: 0.55; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.5); }
}

/* The text label, revealed once the shape has (mostly) finished morphing
   into a pill - see .consult-float-label's own keyframe delay below. */
.consult-float-label {
    opacity: 0;
    font-size: 14px;
    font-weight: 700;
}

.consult-float.is-past-hero .consult-float-label {
    opacity: 1;
    transition: opacity 0.3s ease 0.15s;
}

/* Two little bubbles that pop off the main shape and get absorbed back
   into it as it solidifies into a pill - the "some blobs" flourish before
   it settles, rather than a single shape just smoothly resizing. Purely
   decorative (aria-hidden in the markup), so they only ever need to exist
   during .is-first-reveal. */
.consult-float-satellite {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.consult-float-satellite-1 {
    width: 14px;
    height: 14px;
    top: -6px;
    left: 14px;
}

.consult-float-satellite-2 {
    width: 10px;
    height: 10px;
    bottom: -4px;
    right: 18px;
}

.consult-float.is-first-reveal {
    animation: consult-blob-intro 2.1s linear forwards;
}

.consult-float.is-first-reveal .consult-float-label {
    animation: consult-label-reveal 2.1s linear forwards;
}

.consult-float.is-first-reveal .consult-float-satellite-1 {
    animation: consult-satellite-pop 2.1s linear forwards;
}

.consult-float.is-first-reveal .consult-float-satellite-2 {
    animation: consult-satellite-pop 2.1s linear forwards;
    animation-delay: 0.08s;
}

/* Three clearly separated phases, each with its own per-stop
   animation-timing-function rather than one easing curve fighting to
   suit flight, wobble AND pop all at once (which read as janky, not
   smooth):

   1. FLY (0-50%) - a plain, smooth ease-out glide of just the
      translate() from wherever the hero's own "Book a Consultation Now"
      button last was (custom.js sets --consult-fly-dx/--consult-fly-dy,
      in px, right before adding .is-first-reveal) down to this button's
      own resting spot. No rotation and only a gentle scale pulse during
      this phase, so the eye reads it as one clean travel motion.
   2. WOBBLE (50-80%) - fully arrived (translate is 0 from here on), now
      it plays with a couple of asymmetric blob border-radius shapes and
      a light rotate, ease-in-out, while the two satellite bubbles (their
      own consult-satellite-pop keyframes below) pop off and fade.
   3. POP (80-100%) - morphs from blob to the final pill shape with a
      gentle overshoot bounce (only here, not throughout), landing on
      exactly .is-past-hero's own width/height/padding/border-radius so
      nothing snaps when this animation ends and control hands back to
      that plain (transition-based) rule.

   Falls back to 0px (no flight, morphs in place) via the var() default
   if a hero button was never found/tracked. */
@keyframes consult-blob-intro {
    0% {
        width: 52px;
        height: 52px;
        padding: 0;
        border-radius: 50%;
        transform: translate(var(--consult-fly-dx, 0px), var(--consult-fly-dy, 0px)) scale(0.55) rotate(0deg);
        opacity: 0;
        /* One single curve covers the whole 0%->50% glide below - a very
           soft, long deceleration (most of these "ease-out" family curves
           still slow down abruptly near the end; this one glides all the
           way to a gentle stop). Previously this phase had 2 extra stops
           in between (18%/36%), each restarting its own ease-out - that's
           what actually caused the "stop and run" feeling: every
           intermediate stop decelerates going into it, then the next
           segment accelerates all over again right after, instead of one
           continuous slow-down. Only opacity gets a stop of its own (at
           8%, below) - since it's a different property, adding a keyframe
           for IT alone doesn't touch transform's own 0%->50% timing at
           all. */
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }
    8% {
        opacity: 1;
    }
    50% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        border-radius: 50%;
        animation-timing-function: ease-in-out;
    }
    62% {
        transform: translate(0, 0) scale(1.08) rotate(-7deg);
        border-radius: 58% 42% 55% 45% / 45% 55% 42% 58%;
        animation-timing-function: ease-in-out;
    }
    72% {
        transform: translate(0, 0) scale(0.95) rotate(5deg);
        width: 58px;
        height: 54px;
        border-radius: 42% 58% 46% 54% / 55% 45% 58% 42%;
        animation-timing-function: ease-in-out;
    }
    80% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        width: 70px;
        height: 55px;
        border-radius: 40%;
        animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    92% {
        transform: translate(0, 0) scale(1.02) rotate(0deg);
        width: 220px;
        height: 56px;
        padding: 0 24px 0 18px;
        border-radius: 30px;
        animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        width: 240px;
        height: 56px;
        padding: 0 24px 0 18px;
        border-radius: 30px;
        opacity: 1;
    }
}

@keyframes consult-label-reveal {
    0%, 82% { opacity: 0; transform: translateX(6px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes consult-satellite-pop {
    0%, 52% { opacity: 0; transform: scale(0.3) translate(0, 0); }
    62% { opacity: 1; transform: scale(1.3) translate(0, 0); }
    74% { opacity: 0.8; transform: scale(0.8) translate(6px, 4px); }
    88% { opacity: 0; transform: scale(0.2) translate(14px, 10px); }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .consult-float,
    .consult-float-pulse,
    .consult-float-label,
    .consult-float-satellite {
        animation: none;
        transition: opacity 0.2s ease;
    }

    .consult-float.is-past-hero .consult-float-label {
        opacity: 1;
    }
}

@media screen and (max-width: 640px) {
    .consult-float {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--consult-footer-lift, 0px));
    }

    .consult-float.is-past-hero {
        width: 240px;
        height: 48px;
        padding: 0 18px 0 14px;
        gap: 8px;
    }

    .consult-float-label {
        font-size: 13px;
    }
}

/* Simple icon-only variant - every page except the homepage that doesn't
   already have its own embedded consultation form (single-treatment.php,
   single.php blog posts, page-contact.php - see footer.php's own
   $hmc_hide_consult_float logic for the exact list). Those "has a form
   already" pages skip this button entirely instead - a floating button
   pointing at ANOTHER copy of the same form would be redundant there.
   This is what .consult-float looked like before the homepage's hero-
   triggered blob-to-pill treatment was built: a plain gold circle with a
   hover tooltip, same mechanism as .whatsapp-float (bob idle animation,
   pulse ring), just gold instead of green and tooltip sliding the
   opposite direction since it sits on the opposite (right) edge.
   .is-past-hero is still what custom.js adds to reveal it (unconditionally,
   immediately, on any page without a .hero-section to wait for) - this
   just overrides that state's pill sizing back down to a fixed circle.
   overflow:visible undoes the base .consult-float rule's overflow:hidden
   (needed there to clip the homepage pill's label text neatly during its
   width transition) - this variant never expands, so it doesn't need that
   clipping, and WITH it the tooltip below (positioned outside the
   circle's own box, to the left of it) was getting cut off invisible
   before it could ever show on hover. */
.consult-float-simple.is-past-hero {
    width: 52px;
    height: 52px;
    padding: 0;
    border-radius: 50%;
    overflow: visible;
}

.consult-float-simple .consult-float-label,
.consult-float-simple .consult-float-satellite {
    display: none;
}

.consult-float-tooltip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translate(8px, -50%);
    padding: 8px 14px;
    border-radius: 8px;
    background: rgba(26, 31, 46, 1);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.consult-float-tooltip::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: rgba(26, 31, 46, 1);
}

.consult-float-simple:hover .consult-float-tooltip {
    opacity: 1;
    transform: translate(0, -50%);
}

@media screen and (max-width: 640px) {
    .consult-float-simple.is-past-hero {
        width: 46px;
        height: 46px;
    }

    /* No hover on touch devices - the tooltip would otherwise be
       permanently unreachable rather than just decorative. */
    .consult-float-tooltip {
        display: none;
    }
}

/* ==========================================================================
   Consultation Dialog - the sitewide "Book a Consultation" full-screen
   dialog (template-parts/consultation-dialog.php, mounted once from
   footer.php). Reuses .getstarted-field/.getstarted-submit/etc. from the
   existing consultation forms for the fields themselves - only the dialog
   chrome (backdrop, full-bleed box, top bar, step indicator, two-column
   body, photo grid) is new here.
   ========================================================================== */

.hmc-consult-dialog {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: none;
}

.hmc-consult-dialog.is-open {
    display: block;
}

.hmc-consult-dialog-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 14, 0.5);
}

.hmc-consult-dialog-box {
    position: absolute;
    inset: 0;
    background: #faf9f7;
    display: flex;
    flex-direction: column;
}

.hmc-consult-dialog-topbar {
    padding: 24px 40px;
    flex-shrink: 0;
}

/* Keeps the logo/steps/close button aligned to the same 1550px content
   column every other page on the site uses (see e.g.
   .treatment-before-after-block .story-results-slider-wrap in style.css),
   rather than pinned to the raw viewport edges on ultra-wide screens. */
.hmc-consult-dialog-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1550px;
    margin: 0 auto;
}

.hmc-consult-dialog-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: rgba(26, 31, 46, 1);
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

.hmc-consult-dialog-logo-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.hmc-consult-steps {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hmc-consult-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    opacity: 0.4;
    transition: opacity 0.25s ease;
}

.hmc-consult-step.is-active {
    opacity: 1;
}

.hmc-consult-step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e5e1d5;
    color: rgba(26, 31, 46, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    transition: background 0.25s ease, color 0.25s ease;
}

.hmc-consult-step.is-active .hmc-consult-step-circle {
    background: rgba(193, 150, 86, 1);
    color: #ffffff;
}

.hmc-consult-step-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(26, 31, 46, 1);
    white-space: nowrap;
}

.hmc-consult-step-connector {
    width: 60px;
    height: 1px;
    background: #d8d4c8;
    margin-bottom: 20px;
}

.hmc-consult-dialog-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(26, 31, 46, 1);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.25s ease;
}

.hmc-consult-dialog-close:hover {
    background: rgba(193, 150, 86, 1);
}

.hmc-consult-dialog-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 10px 40px 40px;
}

.hmc-consult-dialog-body {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
    gap: 60px;
    max-width: 1550px;
    margin: 0 auto;
    align-items: start;
}

.hmc-consult-dialog-title {
    font-size: 32px;
    font-weight: 800;
    color: rgba(26, 31, 46, 1);
    margin: 0 0 10px;
    line-height: 1.2;
    padding-top: 34px;
}

.hmc-consult-dialog-subtitle {
    font-size: 15px;
    color: #6b6b76;
    margin: 0 0 24px;
}

/* .getstarted-success-message is centered by default (style.css:5065) -
   fine on the old standalone /consultation/ page, where the whole card is
   itself center-aligned, but this dialog's title/subtitle are left-
   aligned, so the centered success text read as misaligned once shown. */
.hmc-consult-dialog-form-col .getstarted-success-message {
    text-align: left;
    padding: 24px 0 0;
}

.hmc-consult-dialog-social-col {
    padding-top: 40px;
}

.hmc-consult-dialog-social-title {
    font-size: 24px;
    font-weight: 800;
    color: rgba(193, 150, 86, 1);
    margin: 0 0 8px;
    line-height: 1.3;
}

.hmc-consult-dialog-social-subtitle {
    font-size: 14px;
    color: #6b6b76;
    margin: 0 0 24px;
}

.hmc-consult-dialog-photo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.hmc-consult-dialog-photo {
    display: block;
    aspect-ratio: 1;
    border-radius: 16px;
    overflow: hidden;
}

.hmc-consult-dialog-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* "Do you have a promo code?" toggle - a pill-shaped Yes/No switch (see
   the .hmc-promo-switch-btn click handler in custom.js) that reveals the
   text input, smoothly, only once "Yes" is picked. Never validated - just
   captured and forwarded to Martech as typed. */
.hmc-promo-switch {
    display: inline-flex;
    background: #efece2;
    border-radius: 24px;
    padding: 4px;
    gap: 4px;
}

.hmc-promo-switch-btn {
    border: none;
    background: transparent;
    padding: 8px 22px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #6b6b76;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.hmc-promo-switch-btn.is-active {
    background: #ffffff;
    color: rgba(26, 31, 46, 1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.hmc-promo-switch-btn:not(.is-active):hover {
    color: rgba(26, 31, 46, 1);
}

.hmc-promo-input-wrap {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
}

.hmc-promo-input-wrap.is-visible {
    max-height: 80px;
    opacity: 1;
    margin-top: 12px;
}

body.hmc-consult-dialog-open {
    overflow: hidden;
}

@media screen and (max-width: 900px) {
    .hmc-consult-dialog-body {
        grid-template-columns: 1fr;
    }

    .hmc-consult-dialog-social-col {
        display: none;
    }
}

@media screen and (max-width: 640px) {
    .hmc-consult-dialog-topbar {
        padding: 16px 20px;
    }

    .hmc-consult-step-label {
        display: none;
    }

    .hmc-consult-step-connector {
        width: 30px;
        margin-bottom: 0;
    }

    .hmc-consult-dialog-logo span {
        display: none;
    }

    .hmc-consult-dialog-scroll {
        padding: 10px 20px 30px;
    }

    .hmc-consult-dialog-title {
        font-size: 24px;
    }
}