/* ================================================================
   Public tenant website — BASE styles (shared by ALL templates)
   Nav styles:    .nav-solid | .nav-transparent | .nav-centered | .nav-minimal
   Hero styles:   .hero-full-bleed | .hero-contained | .hero-split_left | .hero-split_right | .hero-minimal
   Button styles: .btn-rounded | .btn-pill | .btn-square | .btn-outline
   ================================================================ */

/* ================================= */
/* 1. RESET & BASE                   */
/* ================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.pub-section[id] { scroll-margin-top: 80px; }

body {
    font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    line-height: 1.6;
    color: var(--text, #1a1a1a);
    background: var(--bg, #ffffff);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading, var(--font-body, 'Inter', sans-serif));
}
img { max-width: 100%; height: auto; }
a { color: var(--primary, #2563eb); }

/* ================================= */
/* 2. LAYOUT & CONTAINER             */
/* ================================= */

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

/* ================================= */
/* 3. HEADER / NAV STYLES            */
/* ================================= */

/* 3a. Base header (shared) */
.pub-header {
    position: sticky;
    top: calc(var(--announcement-height, 0px) - 2px);
    z-index: 100;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.pub-header .pub-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: var(--nav-height, 64px);
}
.pub-logo {
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
    color: var(--nav-text, var(--text, #1a1a1a));
    flex-shrink: 0;
    min-width: 0;
    line-height: 1;
    transform: translateY(2px);
}
.pub-logo img { display: block; max-width: 240px; }
.pub-nav {
    display: flex;
    gap: var(--nav-link-gap, 24px);
    align-items: center;
    transform: var(--nav-link-offset, none);
}
.pub-nav a {
    text-decoration: none;
    color: var(--nav-text, var(--text, #1a1a1a));
    font-size: var(--nav-font-size, 14px);
    font-weight: var(--nav-font-weight, 500);
    font-family: var(--nav-font-family, inherit);
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s;
}
.pub-nav a:hover { opacity: 1; color: var(--nav-hover-color, var(--nav-text, var(--text, #1a1a1a))); }
.pub-nav a.active { opacity: 1; color: var(--nav-active-color, var(--nav-text, var(--text, #1a1a1a))); }
.pub-nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: var(--burger-size, 24px);
    cursor: pointer;
    color: var(--burger-color, var(--nav-text, var(--text, #1a1a1a)));
    line-height: 1;
    transition: transform 0.3s ease;
    translate: var(--burger-offset-x, 0px) var(--burger-offset-y, 0px);
}
/* Default — 3 bars (via pseudo-elements), morphs to X when open */
.pub-nav-toggle:not([data-burger-style]) {
    font-size: 0;
    position: relative;
    width: var(--burger-size, 24px);
    height: var(--burger-size, 24px);
}
.pub-nav-toggle:not([data-burger-style])::before,
.pub-nav-toggle:not([data-burger-style])::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 80%;
    height: 2px;
    background: currentColor;
    transition: top 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.pub-nav-toggle:not([data-burger-style])::before {
    top: 25%;
    transform: translate(-50%, -50%);
    box-shadow: 0 calc(var(--burger-size, 24px) * 0.25) 0 0 currentColor;
}
.pub-nav-toggle:not([data-burger-style])::after {
    top: 75%;
    transform: translate(-50%, -50%);
}
.pub-nav-toggle:not([data-burger-style])[aria-expanded="true"]::before {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: 0 0 0 0 transparent;
}
.pub-nav-toggle:not([data-burger-style])[aria-expanded="true"]::after {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Burger style variants — set via data-burger-style on <button>
   All use percentage/calc-based sizing so they scale proportionally
   with --burger-size (default 24px, user range 0–40px). */

/* Thin — 3 thin lines, rotates 90° when open */
.pub-nav-toggle[data-burger-style="thin"] {
    font-size: 0;
    width: var(--burger-size, 24px);
    height: var(--burger-size, 24px);
    position: relative;
}
.pub-nav-toggle[data-burger-style="thin"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 0;
    border-top: 1px solid currentColor;
    box-shadow:
        0 calc(var(--burger-size, 24px) * -0.25) 0 0 currentColor,
        0 calc(var(--burger-size, 24px) * 0.25) 0 0 currentColor;
}
.pub-nav-toggle[data-burger-style="thin"][aria-expanded="true"] {
    transform: rotate(90deg);
}

/* Chevron — downward V shape, flips 180° when open */
.pub-nav-toggle[data-burger-style="chevron"] {
    font-size: 0;
    width: var(--burger-size, 24px);
    height: var(--burger-size, 24px);
    position: relative;
    overflow: hidden;
}
.pub-nav-toggle[data-burger-style="chevron"][aria-expanded="true"] {
    transform: rotate(180deg);
}
.pub-nav-toggle[data-burger-style="chevron"]::before,
.pub-nav-toggle[data-burger-style="chevron"]::after {
    content: '';
    position: absolute;
    top: 40%;
    width: 55%;
    height: 0;
    border-top: 2px solid currentColor;
}
.pub-nav-toggle[data-burger-style="chevron"]::before {
    left: 5%;
    transform: rotate(30deg);
    transform-origin: left center;
}
.pub-nav-toggle[data-burger-style="chevron"]::after {
    right: 5%;
    transform: rotate(-30deg);
    transform-origin: right center;
}

/* Two-line — 2 bars that rotate into X when open */
.pub-nav-toggle[data-burger-style="twoline"] {
    font-size: 0;
    width: var(--burger-size, 24px);
    height: var(--burger-size, 24px);
    position: relative;
}
.pub-nav-toggle[data-burger-style="twoline"]::before,
.pub-nav-toggle[data-burger-style="twoline"]::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 80%;
    height: 2px;
    background: currentColor;
    transition: top 0.3s ease, transform 0.3s ease;
}
.pub-nav-toggle[data-burger-style="twoline"]::before {
    top: 38%;
    transform: translate(-50%, 0);
}
.pub-nav-toggle[data-burger-style="twoline"]::after {
    top: 62%;
    transform: translate(-50%, 0);
}
.pub-nav-toggle[data-burger-style="twoline"][aria-expanded="true"]::before {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.pub-nav-toggle[data-burger-style="twoline"][aria-expanded="true"]::after {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Rounded — three pill-shaped bars, rotates 90° when open */
.pub-nav-toggle[data-burger-style="rounded"] {
    font-size: 0;
    width: var(--burger-size, 24px);
    height: var(--burger-size, 24px);
    position: relative;
}
.pub-nav-toggle[data-burger-style="rounded"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 3px;
    background: currentColor;
    border-radius: 3px;
    box-shadow:
        0 calc(var(--burger-size, 24px) * -0.28) 0 0 currentColor,
        0 calc(var(--burger-size, 24px) * 0.28) 0 0 currentColor;
}
.pub-nav-toggle[data-burger-style="rounded"][aria-expanded="true"] {
    transform: rotate(90deg);
}

/* Stacked — three left-aligned bars with decreasing widths, rotates 90° when open */
.pub-nav-toggle[data-burger-style="stacked"] {
    font-size: 0;
    width: var(--burger-size, 24px);
    height: var(--burger-size, 24px);
    position: relative;
}
.pub-nav-toggle[data-burger-style="stacked"]::before,
.pub-nav-toggle[data-burger-style="stacked"]::after {
    content: '';
    position: absolute;
    left: 0;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}
.pub-nav-toggle[data-burger-style="stacked"]::before {
    top: 22%;
    width: 100%;
    box-shadow: 0 calc(var(--burger-size, 24px) * 0.28) 0 0 currentColor;
}
.pub-nav-toggle[data-burger-style="stacked"]::after {
    top: calc(22% + var(--burger-size, 24px) * 0.56);
    width: 55%;
}
.pub-nav-toggle[data-burger-style="stacked"][aria-expanded="true"] {
    transform: rotate(90deg);
}

/* Cross (+) — rotates 45° to become X when open */
.pub-nav-toggle[data-burger-style="cross"] {
    font-size: 0;
    width: var(--burger-size, 24px);
    height: var(--burger-size, 24px);
    position: relative;
}
.pub-nav-toggle[data-burger-style="cross"]::before,
.pub-nav-toggle[data-burger-style="cross"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.3s ease;
}
.pub-nav-toggle[data-burger-style="cross"]::before {
    width: 70%;
    height: 2px;
    transform: translate(-50%, -50%);
}
.pub-nav-toggle[data-burger-style="cross"]::after {
    width: 2px;
    height: 70%;
    transform: translate(-50%, -50%);
}
.pub-nav-toggle[data-burger-style="cross"][aria-expanded="true"]::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.pub-nav-toggle[data-burger-style="cross"][aria-expanded="true"]::after {
    transform: translate(-50%, -50%) rotate(45deg);
}

/* 3b. nav-solid (default) */
.nav-solid {
    background: var(--nav-bg, var(--bg, #fff));
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* 3c. nav-transparent */
.nav-transparent {
    position: fixed;
    top: calc(var(--announcement-height, 0px) - 2px);
    left: 0;
    right: 0;
    background: transparent;
    border-bottom: 1px solid transparent;
}
.nav-transparent .pub-logo { color: #fff; }
.nav-transparent .pub-nav a { color: #fff; }
.nav-transparent .pub-nav-dropdown-trigger { color: #fff; }
.nav-transparent .pub-nav-toggle { color: var(--burger-color, #fff); }
.nav-transparent.scrolled {
    background: var(--bg, #fff);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.nav-transparent.scrolled .pub-logo { color: var(--nav-text, var(--text, #1a1a1a)); }
.nav-transparent.scrolled .pub-nav a { color: var(--nav-text, var(--text, #1a1a1a)); }
.nav-transparent.scrolled .pub-nav-dropdown-trigger { color: var(--nav-text, var(--text, #1a1a1a)); }
.nav-transparent.scrolled .pub-nav-toggle { color: var(--burger-color, var(--nav-text, var(--text, #1a1a1a))); }

/* 3d. nav-centered */
.nav-centered .pub-container {
    flex-direction: column;
    height: auto;
    padding-top: 16px;
    padding-bottom: 12px;
    gap: 8px;
}
.nav-centered {
    background: var(--nav-bg, var(--bg, #fff));
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.nav-centered .pub-nav { gap: 20px; }

/* 3e. nav-minimal — airy, understated, editorial feel */
.nav-minimal {
    background: var(--nav-bg, transparent);
    border-bottom: none;
}
.nav-minimal .pub-container { min-height: var(--nav-height, 56px); }
.nav-minimal .pub-nav { gap: 32px; }
.nav-minimal .pub-nav a {
    opacity: 1;
    color: var(--nav-text, var(--text, #1a1a1a));
    font-size: var(--nav-font-size, 12px);
    font-weight: var(--nav-font-weight, 400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color 0.25s;
}
.nav-minimal .pub-nav a:hover { opacity: 1; color: var(--nav-hover-color, var(--primary, #2563eb)); }
.nav-minimal .pub-nav a.active { opacity: 1; color: var(--nav-active-color, var(--primary, #2563eb)); }
.nav-minimal .pub-logo { font-size: 18px; font-weight: 600; letter-spacing: 0.02em; }
.nav-minimal .pub-nav-toggle { color: var(--burger-color, var(--nav-text, var(--text, #1a1a1a))); }
.nav-minimal .pub-nav-admin-btn { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }

/* 3f. nav-dark (Growth+) */
.nav-dark {
    background: var(--nav-bg, #0f172a);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-dark .pub-logo { color: var(--nav-text, #f1f5f9); }
.nav-dark .pub-nav a { color: var(--nav-text, rgba(241,245,249,0.7)); opacity: 1; }
.nav-dark .pub-nav-dropdown-trigger { color: var(--nav-text, rgba(241,245,249,0.7)); opacity: 1; }
.nav-dark .pub-nav a:hover,
.nav-dark .pub-nav-dropdown-trigger:hover { color: var(--nav-hover-color, #f1f5f9); }
.nav-dark .pub-nav a.active { color: var(--nav-active-color, #f1f5f9); }
.nav-dark .pub-nav-toggle { color: var(--burger-color, #f1f5f9); }
.nav-dark .pub-nav-admin-btn { color: var(--login-btn-color, #f1f5f9); background: var(--login-btn-bg, rgba(255,255,255,0.08)); border-color: var(--login-btn-border, rgba(255,255,255,0.15)); }
.nav-dark .pub-nav-admin-btn:hover { background: rgba(255,255,255,0.15); }

/* 3g. nav-floating (Growth+) */
.nav-floating {
    position: sticky;
    top: calc(var(--announcement-height, 0px) + 10px);
    background: var(--nav-bg, var(--bg, #fff));
    border-bottom: none;
    margin: 12px 24px 0;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    z-index: 100;
}
.nav-floating .pub-container { max-width: none; padding: 0 20px; }
.nav-floating .pub-nav-toggle { color: var(--burger-color, var(--nav-text, var(--text, #1a1a1a))); }

/* 3h. nav-glass (Growth+) */
.nav-glass {
    background: rgba(255,255,255,0.6);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}
.nav-glass.scrolled {
    background: rgba(255,255,255,0.88);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.nav-glass .pub-nav-toggle { color: var(--burger-color, var(--nav-text, var(--text, #1a1a1a))); }

/* 3i. nav-pill (Growth+) */
.nav-pill {
    background: var(--nav-bg, var(--bg, #fff));
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.nav-pill .pub-nav { gap: 4px; }
.nav-pill .pub-nav a {
    padding: 6px 16px;
    border-radius: 9999px;
    opacity: 1;
    color: var(--nav-text, var(--text, #1a1a1a));
    font-size: var(--nav-font-size, 13px);
    font-weight: var(--nav-font-weight, 600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background 0.25s, color 0.25s;
}
.nav-pill .pub-nav a:hover { background: rgba(0,0,0,0.06); color: var(--nav-hover-color, var(--nav-text, var(--text, #1a1a1a))); }
.nav-pill .pub-nav a.active { background: var(--primary, #2563eb); color: var(--nav-active-color, #fff); }
.nav-pill .pub-nav-toggle { color: var(--burger-color, var(--nav-text, var(--text, #1a1a1a))); }

/* 3j. nav-split (Growth+) — logo centered, links split left/right */
.nav-split {
    background: var(--nav-bg, var(--bg, #fff));
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.pub-header.nav-split .pub-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: var(--nav-height, 72px);
}
.nav-split .pub-nav-left,
.nav-split .pub-nav-right {
    display: flex;
    align-items: center;
    gap: 28px;
}
.nav-split .pub-nav-left a,
.nav-split .pub-nav-right a {
    text-decoration: none;
    color: var(--nav-text, var(--text, #1a1a1a));
    font-size: var(--nav-font-size, 14px);
    font-weight: var(--nav-font-weight, 500);
    font-family: var(--nav-font-family, inherit);
    opacity: 0.7;
    transition: opacity 0.2s;
    white-space: nowrap;
}
.nav-split .pub-nav-left a:hover,
.nav-split .pub-nav-left a.active,
.nav-split .pub-nav-right a:hover,
.nav-split .pub-nav-right a.active { opacity: 1; }
.nav-split .pub-nav-left { justify-content: flex-end; }
.nav-split .pub-nav-right { justify-content: flex-start; }
.nav-split .pub-logo {
    margin: 0 48px;
    font-size: 26px;
    transform: none;
}
.nav-split .pub-logo img { max-height: 44px; }
.nav-split .pub-nav-right a.pub-nav-admin-btn { opacity: 1; }
/* Hide the standard single-nav + toggle; left/right navs override below */
.nav-split .pub-nav:not(.pub-nav-left):not(.pub-nav-right) { display: none; }
.nav-split .pub-nav-toggle { display: none; color: var(--burger-color, var(--nav-text, var(--text, #1a1a1a))); }
/* Split nav link interaction support — both nav groups inherit navlink-* styles */
.nav-split.navlink-underline .pub-nav-left a,
.nav-split.navlink-underline .pub-nav-right a:not(.pub-nav-admin-btn) {
    position: relative; opacity: 1; padding-bottom: 4px;
}
.nav-split.navlink-underline .pub-nav-left a::after,
.nav-split.navlink-underline .pub-nav-right a:not(.pub-nav-admin-btn)::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
    background: var(--primary, #2563eb); transition: width 0.3s ease;
}
.nav-split.navlink-underline .pub-nav-left a:hover::after,
.nav-split.navlink-underline .pub-nav-left a.active::after,
.nav-split.navlink-underline .pub-nav-right a:not(.pub-nav-admin-btn):hover::after,
.nav-split.navlink-underline .pub-nav-right a:not(.pub-nav-admin-btn).active::after { width: 100%; }
.nav-split.navlink-highlight .pub-nav-left a,
.nav-split.navlink-highlight .pub-nav-right a:not(.pub-nav-admin-btn) {
    padding: 4px 10px; border-radius: 6px; opacity: 1; transition: background 0.25s;
}
.nav-split.navlink-highlight .pub-nav-left a:hover,
.nav-split.navlink-highlight .pub-nav-right a:not(.pub-nav-admin-btn):hover { background: rgba(0,0,0,0.06); color: var(--nav-hover-color, inherit); }
.nav-split.navlink-highlight .pub-nav-left a.active,
.nav-split.navlink-highlight .pub-nav-right a:not(.pub-nav-admin-btn).active { background: rgba(0,0,0,0.1); font-weight: 600; color: var(--nav-active-color, inherit); }
.nav-split.navlink-glow .pub-nav-left a,
.nav-split.navlink-glow .pub-nav-right a:not(.pub-nav-admin-btn) { opacity: 1; transition: text-shadow 0.3s, color 0.3s; }
.nav-split.navlink-glow .pub-nav-left a:hover,
.nav-split.navlink-glow .pub-nav-right a:not(.pub-nav-admin-btn):hover {
    text-shadow: 0 0 12px rgba(37,99,235,0.5); color: var(--primary, #2563eb);
}

/* 3k. nav-capsule (Growth+) — pill container with dark CTA pill inside */
.nav-capsule {
    background: transparent;
    border-bottom: none;
    padding: 12px 20px 0;
}
.nav-capsule .pub-container {
    background: var(--nav-bg, rgba(255,255,255,0.95));
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border-radius: 9999px;
    padding: 0 10px 0 28px;
    min-height: var(--nav-height, 62px);
    max-width: 960px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    border: 1px solid rgba(255,255,255,0.8);
}
.nav-capsule .pub-logo { font-size: 22px; font-weight: 700; }
.nav-capsule .pub-nav { gap: 4px; }
.nav-capsule .pub-nav a {
    opacity: 1;
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 15px;
    transition: background 0.25s, color 0.25s;
}
.nav-capsule .pub-nav a:hover { background: rgba(0,0,0,0.05); color: var(--nav-hover-color, inherit); }
.nav-capsule .pub-nav a.active { background: rgba(0,0,0,0.08); font-weight: 600; color: var(--nav-active-color, inherit); }
/* Dark pill CTA button inside the capsule */
.nav-capsule .pub-nav-admin-btn {
    background: var(--login-btn-bg, var(--text, #1a1a1a)) !important;
    color: var(--login-btn-color, var(--bg, #fff)) !important;
    border: none !important;
    border-radius: var(--login-btn-radius, 9999px) !important;
    padding: 10px 24px !important;
    font-weight: 600 !important;
    font-size: 14px;
    margin-left: 12px;
    transition: background 0.25s, transform 0.15s;
    opacity: 1 !important;
}
.nav-capsule .pub-nav-admin-btn:hover {
    background: var(--primary, #2563eb) !important;
    transform: scale(1.03);
}
.nav-capsule .pub-nav-admin-btn--out {
    background: var(--text, #1a1a1a) !important;
    color: var(--bg, #fff) !important;
}
/* Capsule suppresses underline/glow on admin btn */
.nav-capsule.navlink-underline .pub-nav-admin-btn::after { display: none; }
.nav-capsule .pub-nav-toggle { color: var(--burger-color, var(--nav-text, var(--text, #1a1a1a))); }

/* 3l. nav-segmented (Growth+) — dark bar with individually bordered segments */
.nav-segmented {
    background: transparent;
    border-bottom: none;
    padding: 14px 24px 0;
}
.nav-segmented .pub-container {
    background: var(--nav-bg, rgba(20, 25, 18, 0.85));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 10px;
    padding: 0 8px 0 20px;
    min-height: var(--nav-height, 60px);
    max-width: 1100px;
    border: 1px solid rgba(255,255,255,0.08);
}
.nav-segmented .pub-logo {
    font-size: 20px;
    font-weight: 700;
    color: #faf5eb;
    letter-spacing: 0.5px;
}
.nav-segmented .pub-nav { gap: 4px; }
.nav-segmented .pub-nav a,
.nav-segmented .pub-nav-dropdown-trigger {
    opacity: 1;
    padding: 7px 16px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    font-size: var(--nav-font-size, 13px);
    font-weight: 500;
    color: var(--nav-text, rgba(250,245,235,0.8));
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: 'Roboto Mono', 'SF Mono', monospace;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.nav-segmented .pub-nav a:hover,
.nav-segmented .pub-nav-dropdown-trigger:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.3);
    color: var(--nav-hover-color, #faf5eb);
}
.nav-segmented .pub-nav a.active {
    background: rgba(255,255,255,0.1);
    border-color: rgba(234,179,8,0.5);
    color: var(--nav-active-color, #EAB308);
    font-weight: 600;
}
.nav-segmented .pub-nav-toggle { color: var(--burger-color, #faf5eb); }
/* Segmented CTA button — gold fill */
.nav-segmented .pub-nav-admin-btn {
    background: var(--login-btn-bg, #EAB308) !important;
    color: var(--login-btn-color, #1a1a0e) !important;
    border: none !important;
    border-radius: var(--login-btn-radius, 8px) !important;
    padding: 9px 22px !important;
    font-weight: 700 !important;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: 'Roboto Mono', 'SF Mono', monospace;
    margin-left: 8px;
    transition: background 0.25s, transform 0.15s;
    opacity: 1 !important;
}
.nav-segmented .pub-nav-admin-btn:hover {
    background: #ca9a06 !important;
    transform: scale(1.03);
}
.nav-segmented .pub-nav-admin-btn--out {
    background: rgba(255,255,255,0.12) !important;
    color: #faf5eb !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
}
/* Segmented suppresses link-style decorations on admin btn */
.nav-segmented.navlink-underline .pub-nav-admin-btn::after { display: none; }
.nav-segmented.navlink-glow .pub-nav-admin-btn { text-shadow: none; }

/* 3m. nav-overlay (Growth+) — fullscreen overlay menu */
.nav-overlay {
    background: var(--bg, #fff);
    border-bottom: none;
}
.nav-overlay .pub-nav { display: none; }
.nav-overlay .pub-nav-toggle { display: none; }
/* Animated hamburger trigger */
.pub-overlay-trigger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    width: 44px;
    height: 44px;
}
.pub-overlay-trigger span {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--burger-color, var(--text, #1a1a1a));
    border-radius: 2px;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s, background 0.3s;
}
/* Overlay trigger on transparent hero — light lines over dark images */
.nav-overlay.pub-nav-hero-transparent .pub-overlay-trigger span {
    background: var(--burger-color, #fff);
}
.nav-overlay.pub-nav-hero-transparent.scrolled .pub-overlay-trigger span {
    background: var(--burger-color, var(--text, #1a1a1a));
}
.pub-overlay-trigger:focus-visible {
    outline: 2px solid var(--primary, #2563eb);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Fullscreen overlay panel — circle-expand from hamburger position */
.pub-overlay-menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: var(--nav-bg, var(--text, #1a1a1a));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    clip-path: circle(0% at calc(100% - 48px) 32px);
    transition: clip-path 0.6s cubic-bezier(0.4,0,0.2,1);
    pointer-events: none;
}
.pub-overlay-menu.open {
    clip-path: circle(150% at calc(100% - 48px) 32px);
    pointer-events: auto;
}
/* Close button */
.pub-overlay-close {
    position: absolute;
    top: 16px;
    right: 24px;
    background: none;
    border: none;
    color: var(--nav-text, rgba(255,255,255,0.6));
    font-size: 48px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s, transform 0.3s;
    z-index: 1001;
}
.pub-overlay-close:hover { color: var(--nav-hover-color, #fff); transform: rotate(90deg); }
.pub-overlay-close:focus-visible {
    outline: 2px solid var(--nav-text, #fff);
    outline-offset: 4px;
    border-radius: 4px;
}
/* Overlay navigation links — large staggered text */
.pub-overlay-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.pub-overlay-nav a {
    color: var(--nav-text, rgba(255,255,255,0.5));
    text-decoration: none;
    font-size: clamp(28px, 5vw, 56px);
    font-weight: var(--nav-font-weight, 700);
    font-family: var(--nav-font-family, var(--font-heading, var(--font-body)));
    letter-spacing: -0.02em;
    line-height: 1.3;
    transform: translateY(30px);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1),
                opacity 0.5s cubic-bezier(0.4,0,0.2,1),
                color 0.3s;
}
.pub-overlay-menu.open .pub-overlay-nav a {
    transform: translateY(0);
    opacity: 1;
}
/* Staggered entrance delays — covers both <a> and <div.pub-overlay-dropdown> children */
.pub-overlay-nav > a:nth-child(1),
.pub-overlay-nav > :nth-child(1) .pub-overlay-dropdown-trigger { transition-delay: 0.08s; }
.pub-overlay-nav > a:nth-child(2),
.pub-overlay-nav > :nth-child(2) .pub-overlay-dropdown-trigger { transition-delay: 0.14s; }
.pub-overlay-nav > a:nth-child(3),
.pub-overlay-nav > :nth-child(3) .pub-overlay-dropdown-trigger { transition-delay: 0.2s; }
.pub-overlay-nav > a:nth-child(4),
.pub-overlay-nav > :nth-child(4) .pub-overlay-dropdown-trigger { transition-delay: 0.26s; }
.pub-overlay-nav > a:nth-child(5),
.pub-overlay-nav > :nth-child(5) .pub-overlay-dropdown-trigger { transition-delay: 0.32s; }
.pub-overlay-nav > a:nth-child(6),
.pub-overlay-nav > :nth-child(6) .pub-overlay-dropdown-trigger { transition-delay: 0.38s; }
.pub-overlay-nav > a:nth-child(7),
.pub-overlay-nav > :nth-child(7) .pub-overlay-dropdown-trigger { transition-delay: 0.44s; }
.pub-overlay-nav > a:nth-child(8),
.pub-overlay-nav > :nth-child(8) .pub-overlay-dropdown-trigger { transition-delay: 0.5s; }
.pub-overlay-menu.open .pub-overlay-nav a:hover {
    color: var(--nav-hover-color, #fff);
    transform: translateX(12px);
}
.pub-overlay-menu.open .pub-overlay-nav a.active {
    color: var(--nav-active-color, var(--primary, #2563eb));
}

/* Overlay nav — link hover effect variants */
/* navlink-underline: growing bottom bar, keeps slide */
.navlink-underline .pub-overlay-nav a {
    position: relative;
    padding-bottom: 8px;
}
.navlink-underline .pub-overlay-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--nav-underline-color, var(--primary, #2563eb));
    transition: width 0.3s ease;
}
.navlink-underline .pub-overlay-nav a:hover::after,
.navlink-underline .pub-overlay-nav a.active::after { width: 100%; }

/* navlink-highlight: background pill, no slide */
.navlink-highlight .pub-overlay-nav a {
    padding: 8px 24px;
    border-radius: 12px;
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1),
                opacity 0.5s cubic-bezier(0.4,0,0.2,1),
                color 0.3s, background 0.25s;
}
.navlink-highlight.pub-overlay-menu.open .pub-overlay-nav a:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(0);
}
.navlink-highlight .pub-overlay-nav a.active {
    background: rgba(255,255,255,0.12);
    color: var(--nav-active-color, var(--primary, #2563eb));
}

/* navlink-glow: neon text-shadow, keeps slide */
.navlink-glow .pub-overlay-nav a {
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1),
                opacity 0.5s cubic-bezier(0.4,0,0.2,1),
                color 0.3s, text-shadow 0.3s;
}
.navlink-glow.pub-overlay-menu.open .pub-overlay-nav a:hover {
    text-shadow: 0 0 20px rgba(96,165,250,0.6), 0 0 40px rgba(96,165,250,0.3);
    color: var(--nav-hover-color, var(--primary, #2563eb));
}
.navlink-glow .pub-overlay-nav a.active {
    color: var(--nav-active-color, var(--primary, #2563eb));
    text-shadow: 0 0 14px rgba(96,165,250,0.5);
}

/* Overlay dropdown triggers inherit link hover effects */
.navlink-underline .pub-overlay-dropdown-trigger {
    position: relative;
    padding-bottom: 8px;
}
.navlink-underline .pub-overlay-dropdown-trigger::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--nav-underline-color, var(--primary, #2563eb));
    transition: width 0.3s ease;
}
.navlink-underline .pub-overlay-dropdown-trigger:hover::after { width: 100%; }
.navlink-highlight .pub-overlay-dropdown-trigger {
    padding: 8px 24px;
    border-radius: 12px;
    transition: background 0.25s, color 0.3s, transform 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.5s;
}
.navlink-highlight.pub-overlay-menu.open .pub-overlay-dropdown-trigger:hover {
    background: rgba(255,255,255,0.1);
}
.navlink-glow .pub-overlay-dropdown-trigger {
    transition: text-shadow 0.3s, color 0.3s, transform 0.5s cubic-bezier(0.4,0,0.2,1), opacity 0.5s;
}
.navlink-glow.pub-overlay-menu.open .pub-overlay-dropdown-trigger:hover {
    text-shadow: 0 0 20px rgba(96,165,250,0.6), 0 0 40px rgba(96,165,250,0.3);
    color: var(--nav-hover-color, var(--primary, #2563eb));
}

/* Overlay CTA (login) */
.pub-overlay-cta {
    display: inline-block;
    margin-top: 28px;
    padding: 14px 36px;
    border: 2px solid var(--login-btn-border, rgba(255,255,255,0.25));
    border-radius: var(--login-btn-radius, 9999px);
    color: var(--login-btn-color, #fff) !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transform: translateY(20px);
    opacity: 0;
    transition: background 0.3s, border-color 0.3s, transform 0.5s, opacity 0.5s;
}
.pub-overlay-menu.open .pub-overlay-cta {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.45s;
}
.pub-overlay-cta:hover {
    background: var(--login-btn-bg, rgba(255,255,255,0.1));
    border-color: var(--login-btn-border, #fff);
}
/* Overlay logout form */
.pub-overlay-logout {
    margin-top: 28px;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
}
.pub-overlay-menu.open .pub-overlay-logout {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0.45s;
}
.pub-overlay-logout button {
    background: none;
    border: 2px solid var(--login-btn-border, rgba(255,255,255,0.25));
    border-radius: var(--login-btn-radius, 9999px);
    color: var(--login-btn-color, #fff);
    font-size: 16px;
    font-weight: 600;
    padding: 14px 36px;
    cursor: pointer;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background 0.3s, border-color 0.3s;
}
.pub-overlay-logout button:hover {
    background: var(--login-btn-bg, rgba(255,255,255,0.1));
    border-color: var(--login-btn-border, #fff);
}

/* 3n. nav-bubble (Pro+) — floating frosted-glass pill trigger + dropdown card */
.nav-bubble {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    position: absolute !important; top: 0; left: 0; right: 0;
    z-index: 100;
}
.nav-bubble .pub-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-top: 20px; padding-bottom: 12px;
}
@media (max-width: 768px) {
    .nav-bubble .pub-container { padding-top: 14px; padding-bottom: 8px; }
}
.nav-bubble .pub-logo,
.nav-bubble .pub-logo-text {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.nav-bubble .pub-nav { display: none; }
.nav-bubble .pub-nav-toggle { display: none; }

/* Bubble hero — full viewport on home hero only, full-bleed (no inset card) */
.nav-bubble ~ main .pub-section-hero .pub-hero {
    min-height: 100vh !important;
}
.nav-bubble ~ main .pub-section-hero {
    margin: 0 !important;
    border-radius: 0 !important;
}
@media (max-width: 768px) {
    .nav-bubble ~ main .pub-section-hero .pub-hero {
        min-height: 80vh !important;
    }
}

/* Trigger button — frosted glass pill */
.pub-bubble-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border-radius: 999px;
    background: rgba(255,255,255,0.12);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--burger-color, #fff);
    font-size: 14px; font-weight: var(--nav-font-weight, 500);
    font-family: var(--nav-font-family, var(--font-body));
    cursor: pointer;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), background 0.3s, box-shadow 0.3s;
    will-change: transform;
}
.pub-bubble-trigger:hover {
    background: rgba(255,255,255,0.2);
    box-shadow: 0 6px 28px rgba(0,0,0,0.18);
}
.pub-bubble-trigger:focus-visible {
    outline: 2px solid var(--primary, #2563eb);
    outline-offset: 2px;
}
.pub-bubble-trigger-label { pointer-events: none; }
.pub-bubble-trigger-icon { pointer-events: none; font-size: 16px; line-height: 1; }

/* Scrolled state — solid background for readability */
.nav-bubble.scrolled {
    background: rgba(255,255,255,0.92) !important;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(0,0,0,0.08) !important;
}
/* Scrolled state — solid pill */
.nav-bubble.scrolled .pub-bubble-trigger {
    background: rgba(255,255,255,0.92);
    color: var(--burger-color, var(--text, #1a1a1a));
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 2px 16px rgba(0,0,0,0.1);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.nav-bubble.scrolled .pub-bubble-trigger:hover {
    background: rgba(255,255,255,0.98);
    box-shadow: 0 4px 20px rgba(0,0,0,0.14);
}
.nav-bubble.scrolled .pub-logo,
.nav-bubble.scrolled .pub-logo-text {
    color: var(--text, #1a1a1a) !important;
    text-shadow: none;
}

/* Dropdown card */
.pub-bubble-dropdown {
    position: fixed; z-index: 999;
    width: min(320px, calc(100vw - 32px));
    background: var(--primary, #2563eb);
    border-radius: 16px; padding: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    opacity: 0; transform: translateY(-10px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.pub-bubble-dropdown.open {
    opacity: 1; transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Nav links */
.pub-bubble-nav {
    display: flex; flex-direction: column; gap: 2px;
}
.pub-bubble-nav a {
    display: block; padding: 10px 14px; border-radius: 10px;
    color: var(--nav-text, #fff);
    font-size: var(--nav-font-size, 15px);
    font-weight: var(--nav-font-weight, 500);
    font-family: var(--nav-font-family, var(--font-heading, var(--font-body)));
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.pub-bubble-nav a:hover {
    color: var(--nav-hover-color, #fff);
    background: rgba(255,255,255,0.12);
}
.pub-bubble-nav a.active {
    color: var(--nav-active-color, #fff);
    background: rgba(255,255,255,0.15);
}

/* Sub-page accordion */
.pub-bubble-dropdown-group { display: flex; flex-direction: column; }
.pub-bubble-dropdown-parent {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-radius: 10px;
    color: var(--nav-text, #fff);
    font-size: var(--nav-font-size, 15px);
    font-weight: var(--nav-font-weight, 500);
    font-family: var(--nav-font-family, var(--font-heading, var(--font-body)));
    background: none; border: none; cursor: pointer; width: 100%; text-align: left;
    transition: background 0.2s, color 0.2s;
}
.pub-bubble-dropdown-parent:hover {
    color: var(--nav-hover-color, #fff);
    background: rgba(255,255,255,0.12);
}
.pub-bubble-dropdown-parent .pub-nav-chevron {
    transition: transform 0.2s ease;
}
.pub-bubble-dropdown-group.open .pub-nav-chevron { transform: rotate(180deg); }
.pub-bubble-dropdown-children {
    display: none; flex-direction: column;
    padding-left: 12px; margin-top: 2px;
}
.pub-bubble-dropdown-group.open .pub-bubble-dropdown-children { display: flex; }
.pub-bubble-dropdown-children a {
    font-size: calc(var(--nav-font-size, 15px) - 1px);
    padding: 8px 14px;
    opacity: 0.85;
}
.pub-bubble-dropdown-children a:hover { opacity: 1; }

/* Contact section in dropdown */
.pub-bubble-dropdown .pub-nav-contact {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.15);
}
.pub-bubble-dropdown .pub-nav-contact-link {
    color: var(--nav-text, rgba(255,255,255,0.7));
    font-size: 13px;
    transition: color 0.2s;
}
.pub-bubble-dropdown .pub-nav-contact-link:hover { color: var(--nav-hover-color, #fff); }

/* Login / logout button */
.pub-bubble-login-btn {
    display: block; text-align: center;
    margin-top: 16px; padding: 10px 16px;
    background: var(--login-btn-bg, rgba(255,255,255,0.2));
    color: var(--login-btn-color, #fff);
    border: 1px solid var(--login-btn-border, rgba(255,255,255,0.3));
    border-radius: var(--login-btn-radius, 8px);
    font-size: 14px; font-weight: 500;
    text-decoration: none; cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.pub-bubble-login-btn:hover {
    background: var(--login-btn-bg, rgba(255,255,255,0.3));
    transform: translateY(-1px);
}
.pub-bubble-logout { margin: 0; padding: 0; }
.pub-bubble-logout .pub-bubble-login-btn {
    font-family: inherit;
}

/* ================================= */

/* 3o. nav-dock (Pro+) — floating dark rounded bar with inline links */
.nav-dock {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    position: fixed !important; top: 0; left: 0; right: 0;
    z-index: 100;
}
.nav-dock .pub-container {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 20px; padding-bottom: 12px;
}
.nav-dock .pub-logo,
.nav-dock .pub-logo-text {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Dock bar — dark rounded container for links */
.pub-dock-bar {
    display: flex; align-items: center; gap: 4px;
    background: var(--nav-bg, rgba(20,20,20,0.85));
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    padding: 6px 6px 6px 20px;
}
.pub-dock-link {
    color: var(--nav-text, rgba(255,255,255,0.8));
    font-size: var(--nav-font-size, 14px);
    font-weight: var(--nav-font-weight, 400);
    font-family: var(--nav-font-family, var(--font-body));
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 999px;
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
    background: none; border: none; cursor: pointer;
}
.pub-dock-link:hover {
    color: var(--nav-hover-color, #fff);
    background: rgba(255,255,255,0.08);
}
.pub-dock-link.active {
    color: var(--nav-active-color, #fff);
    background: rgba(255,255,255,0.12);
}
/* CTA button inside dock bar */
.pub-dock-cta {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 20px;
    background: var(--login-btn-bg, #fff);
    color: var(--login-btn-color, #0a0a0a);
    border: 1px solid var(--login-btn-border, transparent);
    border-radius: var(--login-btn-radius, 999px);
    font-size: var(--nav-font-size, 14px);
    font-weight: var(--nav-font-weight, 500);
    font-family: var(--nav-font-family, var(--font-body));
    text-decoration: none; cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}
.pub-dock-cta:hover { opacity: 0.9; transform: translateY(-1px); }
.pub-dock-cta-form { margin: 0; padding: 0; display: flex; }
.pub-dock-cta-form .pub-dock-cta { font-family: inherit; }

/* Dock burger — hidden on desktop, shown on mobile */
.pub-dock-burger { display: none; color: var(--burger-color, #fff); }

/* Dock dropdown menus (reuses base dropdown styling) */
.nav-dock .pub-nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dock .pub-nav-dropdown-trigger {
    display: flex; align-items: center; gap: 4px;
}
.nav-dock .pub-nav-dropdown-menu {
    position: absolute; top: 100%; right: 0; margin-top: 8px;
    background: var(--nav-bg, rgba(20,20,20,0.95));
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; padding: 8px;
    min-width: 180px;
    opacity: 0; transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}
.nav-dock .pub-nav-dropdown.open .pub-nav-dropdown-menu {
    opacity: 1; transform: translateY(0); pointer-events: auto;
}
.nav-dock .pub-nav-dropdown-menu a {
    display: block; padding: 8px 14px; border-radius: 8px;
    color: var(--nav-text, rgba(255,255,255,0.7));
    font-size: var(--nav-font-size, 13px);
    text-decoration: none; transition: background 0.15s, color 0.15s;
}
.nav-dock .pub-nav-dropdown-menu a:hover {
    background: rgba(255,255,255,0.08);
    color: var(--nav-hover-color, #fff);
}
.nav-dock .pub-nav-dropdown-menu a.active {
    color: var(--nav-active-color, #fff);
    background: rgba(255,255,255,0.1);
}

/* Scrolled state — dock header stays transparent, only pill bar + logo change */
.nav-dock.scrolled,
.nav-dock.pub-nav-scrolled {
    background: transparent !important;
    box-shadow: none !important;
}
.nav-dock.scrolled .pub-logo,
.nav-dock.scrolled .pub-logo-text {
    color: var(--logo-color, var(--text, #1a1a1a)) !important;
    text-shadow: none;
}
.nav-dock.scrolled .pub-dock-bar {
    background: var(--nav-bg, rgba(20,20,20,0.9));
}

/* Hero — full viewport on home */
.nav-dock ~ main .pub-section-hero .pub-hero { min-height: 100vh !important; }
.nav-dock ~ main .pub-section-hero { margin: 0 !important; border-radius: 0 !important; }
@media (max-width: 768px) {
    .nav-dock ~ main .pub-section-hero .pub-hero { min-height: 80vh !important; }
}

/* Non-home page hero */
.nav-dock ~ main .pub-page-hero,
.nav-dock ~ main .pub-section.pub-page-hero {
    background: linear-gradient(135deg, var(--primary, #1a1a1a) 0%, var(--secondary, #0a0a0a) 100%) !important;
    padding: 7rem 0 4rem !important;
    margin: 0 !important; border-radius: 0 !important;
}
.nav-dock ~ main .pub-page-hero h1 { color: #fff !important; }
.nav-dock ~ main .pub-page-hero p { color: rgba(255,255,255,0.7) !important; }
.nav-dock ~ main > .pub-section:first-child:not(.pub-section-hero):not(.pub-page-hero) {
    margin-top: 80px !important;
}

/* ── Mobile slide-in panel ── */
.pub-dock-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(340px, 85vw);
    background: var(--mobile-nav-bg, var(--nav-bg, rgba(15,15,15,0.97)));
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.pub-dock-panel.open { transform: translateX(0); }
.pub-dock-overlay {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(0,0,0,0.5);
    opacity: 0; pointer-events: none;
    transition: opacity 0.35s ease;
}
.pub-dock-overlay.open { opacity: 1; pointer-events: auto; }

/* Panel header */
.pub-dock-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pub-dock-panel-header .pub-logo { text-decoration: none; }
.pub-dock-panel-header .pub-logo-text { color: #fff; }
.pub-dock-panel-close {
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.5); font-size: 28px; line-height: 1;
    padding: 4px 8px; border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}
.pub-dock-panel-close:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* Panel navigation links */
.pub-dock-panel-nav {
    display: flex; flex-direction: column; gap: 2px;
    padding: 16px;
    flex: 1;
}
.pub-dock-panel-nav a {
    display: block; padding: 12px 16px; border-radius: 10px;
    color: var(--nav-text, rgba(255,255,255,0.7));
    font-size: 16px;
    font-weight: var(--nav-font-weight, 400);
    font-family: var(--nav-font-family, var(--font-body));
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.pub-dock-panel-nav a:hover { color: var(--nav-hover-color, #fff); background: rgba(255,255,255,0.06); }
.pub-dock-panel-nav a.active { color: var(--nav-active-color, #fff); background: rgba(255,255,255,0.1); }

/* Panel sub-page accordion */
.pub-dock-panel-group { display: flex; flex-direction: column; }
.pub-dock-panel-parent {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-radius: 10px;
    color: var(--nav-text, rgba(255,255,255,0.7));
    font-size: 16px; font-weight: var(--nav-font-weight, 400);
    font-family: var(--nav-font-family, var(--font-body));
    background: none; border: none; cursor: pointer; width: 100%; text-align: left;
    transition: background 0.2s, color 0.2s;
}
.pub-dock-panel-parent:hover { color: var(--nav-hover-color, #fff); background: rgba(255,255,255,0.06); }
.pub-dock-panel-parent .pub-nav-chevron { transition: transform 0.2s; }
.pub-dock-panel-group.open .pub-nav-chevron { transform: rotate(180deg); }
.pub-dock-panel-children { display: none; flex-direction: column; padding-left: 12px; }
.pub-dock-panel-group.open .pub-dock-panel-children { display: flex; }
.pub-dock-panel-children a { font-size: 15px; padding: 10px 16px; opacity: 0.8; }
.pub-dock-panel-children a:hover { opacity: 1; }

/* Panel contact + footer */
.pub-dock-panel-contact {
    display: flex; flex-direction: column; gap: 8px;
    padding: 0 16px 16px; margin-top: auto;
}
.pub-dock-panel-contact .pub-nav-contact-link {
    color: rgba(255,255,255,0.5); font-size: 13px; text-decoration: none;
    display: flex; align-items: center; gap: 8px;
    transition: color 0.2s;
}
.pub-dock-panel-contact .pub-nav-contact-link:hover { color: #fff; }
.pub-dock-panel-footer {
    padding: 16px; border-top: 1px solid rgba(255,255,255,0.08);
}
.pub-dock-panel-btn {
    display: block; text-align: center; padding: 12px 16px;
    background: rgba(255,255,255,0.1);
    color: var(--login-btn-color, #fff);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--login-btn-radius, 10px);
    font-size: 14px; font-weight: 500;
    text-decoration: none; cursor: pointer;
    transition: background 0.2s;
    font-family: inherit; width: 100%;
}
.pub-dock-panel-btn:hover { background: rgba(255,255,255,0.18); }

/* ── Dock social sidebar — fixed left edge icons ── */
.pub-dock-social {
    position: fixed;
    left: 16px;
    bottom: 24px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.pub-dock-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.65);
    transition: color 0.25s;
    text-decoration: none;
}
.pub-dock-social a:hover {
    color: #fff;
}
@media (max-width: 768px) {
    .pub-dock-social { display: none; }
}

/* 3.1 NAV LINK INTERACTION STYLES   */
/* ================================= */

/* 3.1a. navlink-fade — default, uses base opacity behavior, no extra CSS */

/* 3.1b. navlink-underline (Growth+) */
.navlink-underline .pub-nav a {
    position: relative;
    opacity: 1;
    padding-bottom: 4px;
}
.navlink-underline .pub-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--nav-underline-color, var(--primary, #2563eb));
    transition: width 0.3s ease;
}
.navlink-underline .pub-nav a:hover::after,
.navlink-underline .pub-nav a.active::after { width: 100%; }
.navlink-underline .pub-nav a.active { opacity: 1; }
/* Dark variant */
.nav-dark.navlink-underline .pub-nav a::after { background: var(--nav-underline-color, #93c5fd); }

/* 3.1c. navlink-highlight (Growth+) */
.navlink-highlight .pub-nav a {
    padding: 4px 10px;
    border-radius: 6px;
    opacity: 1;
    transition: background 0.25s, color 0.25s;
}
.navlink-highlight .pub-nav a:hover { background: rgba(0,0,0,0.06); color: var(--nav-hover-color, inherit); }
.navlink-highlight .pub-nav a.active { background: rgba(0,0,0,0.1); font-weight: 600; color: var(--nav-active-color, inherit); }
/* Dark variant */
.nav-dark.navlink-highlight .pub-nav a:hover { background: rgba(255,255,255,0.1); color: var(--nav-hover-color, #f1f5f9); }
.nav-dark.navlink-highlight .pub-nav a.active { background: rgba(255,255,255,0.15); color: var(--nav-active-color, #f1f5f9); }

/* 3.1d. navlink-glow (Growth+) */
.navlink-glow .pub-nav a {
    opacity: 1;
    transition: text-shadow 0.3s, color 0.3s;
}
.navlink-glow .pub-nav a:hover {
    text-shadow: 0 0 12px rgba(37,99,235,0.5), 0 0 24px rgba(37,99,235,0.2);
    color: var(--nav-hover-color, var(--primary, #2563eb));
}
.navlink-glow .pub-nav a.active {
    color: var(--nav-active-color, var(--primary, #2563eb));
    text-shadow: 0 0 8px rgba(37,99,235,0.4);
}
/* Dark variant */
.nav-dark.navlink-glow .pub-nav a:hover {
    text-shadow: 0 0 16px rgba(96,165,250,0.6), 0 0 32px rgba(96,165,250,0.3);
    color: var(--nav-hover-color, #93c5fd);
}
.nav-dark.navlink-glow .pub-nav a.active {
    color: var(--nav-active-color, #93c5fd);
    text-shadow: 0 0 12px rgba(96,165,250,0.5);
}

/* 3.1e. Dropdown trigger inherits navlink-* active styles.
   highlight + glow use opacity:1 base (their hover uses bg/shadow, not opacity).
   underline + fade keep opacity:0.7 base (hover brightens to 1). */
.navlink-highlight .pub-nav-dropdown-trigger,
.navlink-glow .pub-nav-dropdown-trigger { opacity: 1; }
.navlink-highlight .pub-nav-dropdown-trigger {
    padding: 4px 10px; border-radius: 6px;
}
.navlink-highlight .pub-nav-dropdown-trigger:hover { background: rgba(0,0,0,0.06); }
.nav-dark.navlink-highlight .pub-nav-dropdown-trigger:hover { background: rgba(255,255,255,0.1); }

/* 3.2 Combination overrides */
/* Pill already has own active indicator — suppress underline */
.nav-pill.navlink-underline .pub-nav a::after { display: none; }
/* Floating + hero transparent: flatten while over hero, restore on scroll */
.nav-floating.pub-nav-hero-transparent { margin: 0; border-radius: 0; box-shadow: none; }
.nav-floating.pub-nav-scrolled { margin: 12px 24px 0; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); }

/* ================================= */
/* 3.3 NAV DROPDOWN MENUS (Growth+)  */
/* ================================= */

/* Dropdown container */
.pub-nav-dropdown { position: relative; display: flex; align-items: center; }

/* Trigger button — inherits nav link appearance */
.pub-nav-dropdown-trigger {
    background: none; border: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px;
    color: inherit; font-size: inherit; font-weight: inherit;
    font-family: inherit; opacity: 0.7; padding: 0;
    transition: opacity 0.2s;
    white-space: nowrap;
    line-height: inherit;
}
.pub-nav-dropdown-trigger:hover,
.pub-nav-dropdown.open .pub-nav-dropdown-trigger { opacity: 1; }

/* Chevron icon rotation */
.pub-nav-chevron { transition: transform 0.25s ease; flex-shrink: 0; }
.pub-nav-dropdown.open .pub-nav-chevron { transform: rotate(180deg); }

/* Dropdown panel */
.pub-nav-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 16px); left: 50%;
    transform: translateX(-50%) translateY(-4px);
    min-width: 200px; background: #fff;
    border-radius: 12px; padding: 8px 0;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.06);
    z-index: 100; opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.pub-nav-dropdown.open .pub-nav-dropdown-menu {
    display: block; opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* Desktop: also open on hover for mouse users */
@media (hover: hover) and (pointer: fine) {
    .pub-nav-dropdown:hover .pub-nav-dropdown-menu {
        display: block; opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    .pub-nav-dropdown:hover .pub-nav-chevron { transform: rotate(180deg); }
    .pub-nav-dropdown:hover .pub-nav-dropdown-trigger { opacity: 1; }
}

/* Dropdown menu items — inherit nav branding variables */
.pub-nav-dropdown-menu a {
    display: block; padding: 10px 20px;
    color: var(--nav-text, var(--text, #1a1a1a)) !important; opacity: 1 !important;
    font-size: var(--nav-font-size, 14px);
    font-weight: var(--nav-font-weight, 500);
    font-family: var(--nav-font-family, inherit);
    text-decoration: none;
    transition: background 0.15s, color 0.2s; white-space: nowrap;
}
.pub-nav-dropdown-menu a:hover {
    background: rgba(0,0,0,0.04);
    color: var(--nav-hover-color, var(--nav-text, var(--text, #1a1a1a))) !important;
}
.pub-nav-dropdown-menu a.active {
    color: var(--nav-active-color, var(--primary, #2563eb)) !important;
}

/* --- Nav variant overrides for dropdowns --- */

/* Dark nav dropdown */
.nav-dark .pub-nav-dropdown-menu {
    background: #1e293b; border-color: rgba(255,255,255,0.1);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.nav-dark .pub-nav-dropdown-menu a { color: var(--nav-text, rgba(241,245,249,0.8)) !important; }
.nav-dark .pub-nav-dropdown-menu a:hover { background: rgba(255,255,255,0.08); color: var(--nav-hover-color, #f1f5f9) !important; }
.nav-dark .pub-nav-dropdown-menu a.active { color: var(--nav-active-color, #93c5fd) !important; }

/* Capsule dropdown */
.nav-capsule .pub-nav-dropdown-menu {
    background: rgba(255,255,255,0.95);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border-color: rgba(255,255,255,0.8);
}
.nav-capsule .pub-nav-dropdown-trigger { opacity: 1; font-size: var(--nav-font-size, 15px); }

/* Segmented dropdown */
.nav-segmented .pub-nav-dropdown-menu {
    background: rgba(20, 25, 18, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-color: rgba(255,255,255,0.12);
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.nav-segmented .pub-nav-dropdown-menu a {
    color: var(--nav-text, rgba(250,245,235,0.8)) !important;
    font-size: var(--nav-font-size, 13px); text-transform: uppercase; letter-spacing: 0.8px;
    font-family: var(--nav-font-family, 'Roboto Mono', 'SF Mono', monospace);
    font-weight: var(--nav-font-weight, 500);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
    margin: 2px 4px; padding: 7px 12px;
}
.nav-segmented .pub-nav-dropdown-menu a:hover {
    background: rgba(255,255,255,0.08); color: var(--nav-hover-color, #faf5eb) !important;
    border-color: rgba(255,255,255,0.25);
}
.nav-segmented .pub-nav-dropdown-menu a.active { color: var(--nav-active-color, #EAB308) !important; border-color: rgba(234,179,8,0.4); }
.nav-segmented .pub-nav-dropdown-trigger {
    opacity: 1; font-size: var(--nav-font-size, 13px); text-transform: uppercase; letter-spacing: 0.8px;
    font-family: var(--nav-font-family, 'Roboto Mono', 'SF Mono', monospace);
    font-weight: var(--nav-font-weight, 500);
}

/* Glass dropdown */
.nav-glass .pub-nav-dropdown-menu {
    background: rgba(255,255,255,0.85);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-color: rgba(255,255,255,0.5);
}

/* Minimal nav dropdown — lighter feel */
.nav-minimal .pub-nav-dropdown-trigger {
    font-size: var(--nav-font-size, 12px);
    font-weight: var(--nav-font-weight, 400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 1;
}
.nav-minimal .pub-nav-dropdown-menu a {
    font-size: var(--nav-font-size, 12px);
    font-weight: var(--nav-font-weight, 400);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Pill nav dropdown — items get pill shape */
.nav-pill .pub-nav-dropdown-menu a {
    border-radius: 8px; margin: 2px 6px; padding: 8px 14px;
}
.nav-pill .pub-nav-dropdown-menu a.active {
    background: var(--primary, #2563eb); color: #fff !important;
}

/* Split nav — dropdown trigger inherits split link styles */
.nav-split .pub-nav-dropdown-trigger {
    font-size: var(--nav-font-size, 14px); font-weight: var(--nav-font-weight, 500);
}

/* --- Overlay nav accordion --- */
.pub-overlay-dropdown { display: flex; flex-direction: column; align-items: center; }
.pub-overlay-dropdown-trigger {
    background: none; border: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--nav-text, rgba(255,255,255,0.5)); text-decoration: none;
    font-size: clamp(28px, 5vw, 56px); font-weight: var(--nav-font-weight, 700);
    font-family: var(--nav-font-family, var(--font-heading, var(--font-body)));
    letter-spacing: -0.02em; line-height: 1.3;
    transform: translateY(30px); opacity: 0;
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1),
                opacity 0.5s cubic-bezier(0.4,0,0.2,1), color 0.3s;
}
.pub-overlay-menu.open .pub-overlay-dropdown-trigger {
    transform: translateY(0); opacity: 1;
}
.pub-overlay-menu.open .pub-overlay-dropdown-trigger:hover { color: var(--nav-hover-color, #fff); }
.pub-overlay-dropdown-children {
    display: none; flex-direction: column; align-items: center;
    gap: 0; padding: 4px 0 8px;
}
.pub-overlay-dropdown.open .pub-overlay-dropdown-children { display: flex; }
.pub-overlay-dropdown-children a {
    color: var(--nav-text, rgba(255,255,255,0.4)) !important; text-decoration: none;
    font-size: clamp(16px, 2.5vw, 24px); font-weight: 500;
    padding: 4px 0; transition: color 0.3s;
}
.pub-overlay-dropdown-children a:hover { color: var(--nav-hover-color, #fff) !important; }
.pub-overlay-dropdown-children a.active { color: var(--nav-active-color, var(--primary, #2563eb)) !important; }
/* Overlay chevron — larger for the big text */
.pub-overlay-dropdown-trigger .pub-nav-chevron {
    width: 16px; height: 16px;
}
.pub-overlay-dropdown.open .pub-nav-chevron { transform: rotate(180deg); }

/* Mobile nav */
@media (max-width: 768px) {
    .pub-nav {
        display: none;
        position: absolute;
        top: 64px;
        left: var(--mobile-nav-inset, 0px);
        right: var(--mobile-nav-inset, 0px);
        background: var(--mobile-nav-bg, var(--bg, #fff));
        flex-direction: column;
        align-items: stretch;
        transform: translate(var(--mobile-nav-shift, 0px), var(--mobile-nav-top-offset, 0px));
        padding: var(--mobile-nav-padding, 16px 24px);
        border-bottom: 1px solid rgba(0,0,0,0.08);
        gap: var(--mobile-nav-gap, 12px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        border-radius: var(--mobile-nav-radius, 0);
    }
    .pub-nav.open { display: flex; }
    .pub-nav > a { text-align: center; }
    .pub-nav > a,
    .pub-nav > .pub-nav-dropdown,
    .pub-nav > .pub-nav-admin-btn,
    .pub-nav > .pub-nav-logout-form { transform: translateX(var(--mobile-nav-link-shift, 0px)); }
    .pub-nav > .pub-nav-admin-btn,
    .pub-nav > .pub-nav-logout-form { align-self: center; }
    .pub-nav-toggle { display: block; }
    .nav-centered .pub-container { flex-direction: row; min-height: var(--nav-height, 64px); padding-top: 0; padding-bottom: 0; }
    /* Mobile: nav-minimal */
    .nav-minimal .pub-container { min-height: var(--nav-height, 56px); }
    .nav-minimal .pub-nav a { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 400; opacity: 1; }
    .nav-transparent .pub-nav { background: var(--mobile-nav-bg, var(--bg, #fff)); }
    .nav-transparent .pub-nav a,
    .nav-transparent .pub-nav-dropdown-trigger { color: var(--nav-text, var(--text, #1a1a1a)); }
    /* Mobile: nav-dark dropdown */
    .nav-dark .pub-nav { background: var(--mobile-nav-bg, #0f172a); border-bottom: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
    .nav-dark .pub-nav a,
    .nav-dark .pub-nav-dropdown-trigger { color: var(--nav-text, rgba(241,245,249,0.8)); }
    .nav-dark .pub-nav a:hover, .nav-dark .pub-nav a.active { color: #f1f5f9; }
    /* Mobile: nav-floating */
    .nav-floating { margin: 8px 12px 0; border-radius: 12px; top: 8px; }
    .nav-floating .pub-nav { border-radius: 0 0 12px 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
    /* Mobile: nav-glass dropdown */
    .nav-glass .pub-nav { background: var(--mobile-nav-bg, rgba(255,255,255,0.85)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
    /* Mobile: nav-pill vertical pills */
    .nav-pill .pub-nav a { width: 100%; text-align: left; border-radius: 8px; padding: 8px 16px; }
    /* Mobile: nav-split — unified centered dropdown */
    .pub-header.nav-split .pub-container {
        display: flex; flex-wrap: wrap; min-height: var(--nav-height, 64px);
        align-items: center; justify-content: space-between;
    }
    .nav-split .pub-logo {
        margin: 0; order: 0; font-size: 22px;
    }
    .nav-split .pub-nav-left,
    .nav-split .pub-nav-right {
        display: none; width: 100%; flex-direction: column; align-items: center;
        padding: 0; gap: 0; background: var(--mobile-nav-bg, var(--bg, #fff));
    }
    .nav-split .pub-nav-left a,
    .nav-split .pub-nav-right a {
        font-size: 15px; padding: 12px 24px; width: 100%; text-align: center;
        border-bottom: 1px solid rgba(0,0,0,0.06); opacity: 1;
    }
    .nav-split .pub-nav-left.open { display: flex; order: 3; }
    .nav-split .pub-nav-right.open { display: flex; order: 4; border-bottom: 1px solid rgba(0,0,0,0.08); }
    .nav-split .pub-nav-dropdown { align-items: center; }
    .nav-split .pub-nav-dropdown-trigger {
        justify-content: center; gap: 6px; padding: 12px 24px; font-size: 15px;
    }
    .nav-split .pub-nav-dropdown-menu a { text-align: center; }
    .nav-split .pub-nav-logout-form {
        width: 100%; display: flex; justify-content: center; padding: 12px 0;
    }
    .nav-split .pub-nav-toggle { display: block; order: 2; }
    /* Mobile: nav-capsule — reduce pill shape */
    .nav-capsule { padding: 8px 12px 0; }
    .nav-capsule .pub-container {
        border-radius: 16px; padding: 0 6px 0 16px; min-height: var(--nav-height, 54px);
    }
    .nav-capsule .pub-nav { top: calc(var(--nav-height, 54px) + 8px); border-radius: 0 0 12px 12px; }
    /* Mobile: nav-segmented — reduce bar size */
    .nav-segmented { padding: 8px 12px 0; }
    .nav-segmented .pub-container {
        border-radius: 8px; padding: 0 6px 0 14px; min-height: var(--nav-height, 52px);
    }
    .nav-segmented .pub-nav {
        top: calc(var(--nav-height, 52px) + 8px); border-radius: 0 0 8px 8px;
        background: var(--mobile-nav-bg, rgba(20, 25, 18, 0.92));
        -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
        border: 1px solid rgba(255,255,255,0.08);
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    }
    .nav-segmented .pub-nav a {
        border: 1px solid rgba(255,255,255,0.12); border-radius: 6px;
        margin: 2px 8px; padding: 8px 14px;
    }
    .nav-segmented .pub-nav-dropdown { width: auto; }
    .nav-segmented .pub-nav-dropdown-trigger {
        width: auto;
        border: 1px solid rgba(255,255,255,0.12); border-radius: 6px;
        margin: 2px 8px; padding: 8px 14px;
    }
    .nav-segmented .pub-nav-dropdown-menu a {
        border: none; margin: 0; padding: 6px 14px;
    }
    /* Mobile: nav-bubble — wider dropdown, smaller trigger */
    .nav-bubble .pub-container { min-height: var(--nav-height, 56px); }
    .pub-bubble-dropdown { width: calc(100vw - 32px); }
    .pub-bubble-trigger { padding: 8px 16px; font-size: 13px; }
    /* Mobile: nav-dock — hide inline bar, show burger, slide panel handled by JS */
    .nav-dock .pub-container { min-height: var(--nav-height, 56px); }
    .pub-dock-bar { display: none; }
    .pub-dock-burger { display: flex; }
    .pub-dock-panel { width: min(320px, 85vw); }
    /* Mobile: nav-overlay — already fullscreen, just tweak header */
    .nav-overlay .pub-container { min-height: var(--nav-height, 56px); }
    .pub-overlay-nav a { line-height: 1.4; }
    .pub-overlay-cta, .pub-overlay-logout button {
        padding: 12px 28px; font-size: 14px;
    }
    /* Mobile: navlink-underline → left border indicator */
    .navlink-underline .pub-nav a::after { display: none; }
    .navlink-underline .pub-nav a.active { border-left: 3px solid var(--primary, #2563eb); padding-left: 12px; }
    /* Mobile: navlink-highlight full-width targets */
    .navlink-highlight .pub-nav a { width: 100%; border-radius: 8px; padding: 8px 12px; }
    /* Mobile: dropdown becomes accordion — !important on ALL properties
       to beat template-specific .tpl-X .pub-header.nav-Y selectors */
    .pub-nav-dropdown { flex-direction: column; align-items: stretch; width: 100%; }
    .pub-nav-dropdown-trigger { width: 100%; justify-content: center; gap: 6px; padding: 0; }
    .pub-nav-dropdown-menu {
        display: none !important;
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        border-left: 2px solid rgba(0,0,0,0.12) !important;
        border-radius: 0 6px 6px 0 !important;
        padding: 4px 0 4px 12px !important;
        min-width: auto !important;
        opacity: 1 !important;
        background: rgba(0,0,0,0.03) !important;
        margin: 2px 0 4px !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        z-index: auto !important;
    }
    .pub-nav-dropdown.open .pub-nav-dropdown-menu {
        display: block !important;
        transform: none !important;
        left: auto !important;
        opacity: 1 !important;
    }
    .pub-nav-dropdown-menu a {
        display: block !important;
        padding: 5px 12px !important;
        font-size: 0.8rem !important;
        opacity: 0.6 !important;
        text-transform: none !important;
        border-radius: 0 !important;
        border: none !important;
        margin: 0 !important;
        width: auto !important;
        letter-spacing: normal !important;
        background: none !important;
        white-space: normal !important;
    }
    .pub-nav-dropdown-menu a:hover,
    .pub-nav-dropdown-menu a.active {
        opacity: 1 !important;
        background: rgba(0,0,0,0.04) !important;
    }
    .nav-dark .pub-nav-dropdown-menu {
        border-left-color: rgba(255,255,255,0.15) !important;
        background: rgba(255,255,255,0.05) !important;
    }
    .nav-dark .pub-nav-dropdown-menu a { opacity: 0.5 !important; }
    .nav-dark .pub-nav-dropdown-menu a:hover,
    .nav-dark .pub-nav-dropdown-menu a.active { opacity: 1 !important; }
    /* Mobile: nav contact stacked */
    .pub-nav-contact {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 100%;
        margin: 0;
        padding: 10px 0 0;
        border-left: none;
        border-top: 1px solid rgba(0,0,0,0.08);
    }
    .pub-nav-contact-link { font-size: 13px; }
    .nav-dark .pub-nav-contact { border-top-color: rgba(255,255,255,0.12); }
}

/* ================================= */
/* 4. HERO STYLES                    */
/* ================================= */

.pub-section-hero { padding: 0; }
.pub-section-hero .pub-container { padding: 0; max-width: none; }

/* 4a. hero-full-bleed (default)
   All hero properties use CSS custom variables so templates can set defaults
   and the editor can override them via inline styles.
   Variable naming: --hero-* for editor-controllable properties.
*/
.pub-hero {
    position: relative;
    overflow: hidden;
    min-height: var(--hero-height, 80vh);
    display: flex;
    align-items: var(--hero-align-items, center);
    justify-content: var(--hero-justify, center);
    text-align: var(--hero-text-align, center);
    background-size: cover;
    background-position: center;
    background-color: var(--hero-bg, var(--primary, #2563eb));
    padding: var(--hero-padding, 80px 24px);
}
.pub-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--hero-overlay-gradient, var(--hero-overlay-color, #000));
}
.pub-hero-content {
    position: relative;
    z-index: 4;
    color: #fff;
    max-width: var(--hero-content-width, 720px);
}

/* Decorative shapes (Pro+) */
.pub-hero-shape {
    position: absolute;
    pointer-events: none;
    width: var(--shape-size, 150px);
    height: var(--shape-size, 150px);
    opacity: var(--shape-opacity, 0.4);
}
/* Size presets */
.pub-hero-shape--sm { --shape-size: 80px; }
.pub-hero-shape--md { --shape-size: 150px; }
.pub-hero-shape--lg { --shape-size: 250px; }
.pub-hero-shape--xl { --shape-size: 400px; }
/* Position presets */
.pub-hero-shape--top-left { top: 8%; left: 6%; }
.pub-hero-shape--top-right { top: 8%; right: 6%; }
.pub-hero-shape--bottom-left { bottom: 8%; left: 6%; }
.pub-hero-shape--bottom-right { bottom: 8%; right: 6%; }
.pub-hero-shape--center-left { top: 50%; left: 6%; transform: translateY(-50%); }
.pub-hero-shape--center-right { top: 50%; right: 6%; transform: translateY(-50%); }
/* Shape: circle (filled) */
.pub-hero-shape-circle { border-radius: 50%; background: var(--shape-color, #fff); }
/* Shape: ring (outlined circle) */
.pub-hero-shape-ring { border-radius: 50%; border: var(--shape-thickness, 2px) solid var(--shape-color, #fff); }
/* Shape: square (filled) */
.pub-hero-shape-square { background: var(--shape-color, #fff); }
/* Shape: diamond (rotated square) */
.pub-hero-shape-diamond { background: var(--shape-color, #fff); transform: rotate(45deg); }
.pub-hero-shape--center-left .pub-hero-shape-diamond,
.pub-hero-shape--center-right .pub-hero-shape-diamond { transform: translateY(-50%) rotate(45deg); }
/* Shape: line (horizontal decorative line) */
.pub-hero-shape-line { height: var(--shape-thickness, 2px) !important; background: var(--shape-color, #fff); }
/* Shape: corner-brackets (L-shaped corners) */
.pub-hero-shape-corner-brackets {
    border: var(--shape-thickness, 2px) solid var(--shape-color, #fff);
    border-right: none; border-bottom: none;
    width: var(--shape-size, 150px); height: var(--shape-size, 150px);
}
/* Shape: hexagon (CSS clip-path) */
.pub-hero-shape-hexagon {
    background: var(--shape-color, #fff);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
/* Outlined style override — hollow shapes */
.pub-hero-shape--outlined .pub-hero-shape-circle,
.pub-hero-shape--outlined .pub-hero-shape-square,
.pub-hero-shape--outlined .pub-hero-shape-diamond,
.pub-hero-shape--outlined .pub-hero-shape-hexagon {
    background: transparent;
    border: var(--shape-thickness, 2px) solid var(--shape-color, #fff);
}
.pub-hero-shape--outlined .pub-hero-shape-hexagon {
    border: none;
    background: transparent;
    box-shadow: inset 0 0 0 var(--shape-thickness, 2px) var(--shape-color, #fff);
}
/* Hide decorative shapes on tablet/mobile — positions don't translate well */
@media (max-width: 768px) {
    .pub-hero-shape { display: none !important; }
}
/* ── Hero Slideshow Carousel (Growth+) ── */
.pub-hero--slideshow { background-image: none !important; }
.pub-hero-slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0s 0.8s;
}
.pub-hero-slide.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease, visibility 0s 0s;
}

/* ── Transition: Crossfade (default) ── */
/* Uses base opacity rules above — smooth crossfade */

/* ── Transition: Slide (horizontal push) ── */
.pub-hero--slideshow[data-slide-transition="slide"] .pub-hero-slide {
    opacity: 1;
    visibility: visible;
    transform: translateX(100%);
    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.pub-hero--slideshow[data-slide-transition="slide"] .pub-hero-slide.active {
    transform: translateX(0);
}
.pub-hero--slideshow[data-slide-transition="slide"] .pub-hero-slide.slide-prev {
    transform: translateX(-100%);
}

/* ── Transition: Ken Burns (cinematic zoom pan) ── */
.pub-hero--slideshow[data-slide-transition="kenburns"] .pub-hero-slide {
    transition: opacity 1.2s ease, visibility 0s 1.2s;
}
.pub-hero--slideshow[data-slide-transition="kenburns"] .pub-hero-slide.active {
    transition: opacity 1.2s ease, visibility 0s 0s;
    animation: heroKenBurns 20s ease forwards;
}
.pub-hero--slideshow[data-slide-transition="kenburns"] .pub-hero-slide.active:nth-child(even) {
    animation-name: heroKenBurnsAlt;
}
@keyframes heroKenBurns {
    0%   { transform: scale(1.0) translate(0, 0); }
    100% { transform: scale(1.15) translate(-1.5%, -1%); }
}
@keyframes heroKenBurnsAlt {
    0%   { transform: scale(1.12) translate(-2%, -1%); }
    100% { transform: scale(1.0) translate(0, 0); }
}

/* ── Transition: Zoom (scale up into next slide) ── */
.pub-hero--slideshow[data-slide-transition="zoom"] .pub-hero-slide {
    transform: scale(1.3);
    transition: opacity 0.7s ease, transform 0.7s ease, visibility 0s 0.7s;
}
.pub-hero--slideshow[data-slide-transition="zoom"] .pub-hero-slide.active {
    transform: scale(1);
    transition: opacity 0.7s ease, transform 0.7s ease, visibility 0s 0s;
}

/* ── Transition: Blur (defocus dissolve) ── */
.pub-hero--slideshow[data-slide-transition="blur"] .pub-hero-slide {
    filter: blur(20px);
    transform: scale(1.05);
    transition: opacity 0.8s ease, filter 0.8s ease, transform 0.8s ease, visibility 0s 0.8s;
}
.pub-hero--slideshow[data-slide-transition="blur"] .pub-hero-slide.active {
    filter: blur(0);
    transform: scale(1);
    transition: opacity 0.8s ease, filter 0.8s ease, transform 0.8s ease, visibility 0s 0s;
}

/* ── Transition: Flip (3D card flip) ── */
.pub-hero--slideshow[data-slide-transition="flip"] {
    perspective: 1200px;
}
.pub-hero--slideshow[data-slide-transition="flip"] .pub-hero-slide {
    backface-visibility: hidden;
    transform: rotateY(90deg);
    transition: opacity 0.1s, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.6s;
}
.pub-hero--slideshow[data-slide-transition="flip"] .pub-hero-slide.active {
    transform: rotateY(0deg);
    transition: opacity 0.1s, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0s;
}

/* ── Hero Carousel Arrows (shared base) ── */
.pub-hero-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    font-family: system-ui, sans-serif;
    line-height: 1;
    opacity: 0;
}
.pub-hero:hover .pub-hero-carousel-arrow,
.pub-hero:focus-within .pub-hero-carousel-arrow { opacity: 1; }
.pub-hero-carousel-prev { left: 20px; }
.pub-hero-carousel-next { right: 20px; }
.pub-hero-carousel-arrow:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    opacity: 1;
}

/* ── Arrow Style: Minimal ── */
.pub-hero-arrow--minimal {
    background: none;
    color: rgba(255,255,255,0.8);
    font-size: 28px;
    width: 44px;
    height: 44px;
    border-radius: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.pub-hero-arrow--minimal:hover {
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.7);
    transform: translateY(-50%) scale(1.15);
}

/* ── Arrow Style: Solid ── */
.pub-hero-arrow--solid {
    background: rgba(255,255,255,0.92);
    color: #1e293b;
    font-size: 18px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
.pub-hero-arrow--solid:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

/* ── Arrow Style: Glass ── */
.pub-hero-arrow--glass {
    background: rgba(255,255,255,0.12);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    backdrop-filter: blur(12px) saturate(1.5);
    color: #fff;
    font-size: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15);
}
.pub-hero-arrow--glass:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.35);
    transform: translateY(-50%) scale(1.06);
}

/* ── Arrow Style: Pill ── */
.pub-hero-arrow--pill {
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 16px;
    width: 56px;
    height: 40px;
    border-radius: 24px;
    letter-spacing: 0.5px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.pub-hero-arrow--pill:hover {
    background: rgba(0,0,0,0.7);
    transform: translateY(-50%) scale(1.05);
}

/* ── Hero Carousel Dots ── */
.pub-hero-carousel-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(0,0,0,0.25);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 20px;
}
.pub-hero-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}
.pub-hero-carousel-dot.active {
    background: #fff;
    transform: scale(1.25);
    box-shadow: 0 0 6px rgba(255,255,255,0.5);
}
.pub-hero-carousel-dot:hover { background: rgba(255,255,255,0.7); }

/* ── Hero carousel responsive ── */
@media (max-width: 768px) {
    .pub-hero-carousel-prev { left: 10px; }
    .pub-hero-carousel-next { right: 10px; }
    .pub-hero-arrow--solid,
    .pub-hero-arrow--glass { width: 38px; height: 38px; font-size: 15px; }
    .pub-hero-arrow--pill { width: 44px; height: 34px; font-size: 14px; }
    .pub-hero-carousel-arrow { opacity: 1; } /* Always visible on touch */
    .pub-hero-carousel-dots { bottom: 16px; padding: 4px 10px; gap: 6px; }
    .pub-hero-carousel-dot { width: 7px; height: 7px; }
}

/* ── Hero Slide Text Overlay ── */
.pub-slide-text {
    position: absolute;
    z-index: 4;
    max-width: 60%;
    padding: 20px 28px;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
}
.pub-slide-text.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease 0.3s, visibility 0s 0s;
}
.pub-slide-text-title {
    margin: 0 0 var(--slide-spacing, 8px) 0;
    line-height: 1.15;
    color: inherit !important;
    font-family: var(--slide-font-heading, inherit) !important;
}
.pub-slide-text-desc {
    margin: 0 0 var(--slide-spacing, 8px) 0;
    line-height: 1.45;
    opacity: 0.9;
    color: inherit !important;
    font-family: var(--slide-font-body, inherit) !important;
}
.pub-slide-text-desc:last-child,
.pub-slide-text-title:last-child { margin-bottom: 0; }
.pub-slide-text-accent {
    color: var(--slide-accent, #f59e0b);
    font-style: normal;
}
/* Title sizes */
.pub-slide-text--title-S .pub-slide-text-title { font-size: clamp(1rem, 2.5vw, 1.25rem); }
.pub-slide-text--title-M .pub-slide-text-title { font-size: clamp(1.25rem, 3vw, 1.75rem); }
.pub-slide-text--title-L .pub-slide-text-title { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
.pub-slide-text--title-XL .pub-slide-text-title { font-size: clamp(1.75rem, 4.5vw, 3rem); }
/* Description sizes */
.pub-slide-text--desc-S .pub-slide-text-desc { font-size: clamp(0.75rem, 1.5vw, 0.85rem); }
.pub-slide-text--desc-M .pub-slide-text-desc { font-size: clamp(0.85rem, 1.8vw, 1rem); }
.pub-slide-text--desc-L .pub-slide-text-desc { font-size: clamp(1rem, 2vw, 1.2rem); }
/* Bold variant */
.pub-slide-text--bold .pub-slide-text-title { font-weight: 700; }
.pub-slide-text--bold .pub-slide-text-desc { font-weight: 600; }
/* ── Position presets ── */
.pub-slide-text--top-left     { top: 12%; left: 5%; text-align: left; }
.pub-slide-text--top-center   { top: 12%; left: 50%; transform: translateX(-50%); text-align: center; }
.pub-slide-text--top-right    { top: 12%; right: 5%; text-align: right; }
.pub-slide-text--center-left  { top: 50%; left: 5%; transform: translateY(-50%); text-align: left; }
.pub-slide-text--center       { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.pub-slide-text--center-right { top: 50%; right: 5%; transform: translateY(-50%); text-align: right; }
.pub-slide-text--bottom-left  { bottom: 15%; left: 5%; text-align: left; }
.pub-slide-text--bottom-center { bottom: 15%; left: 50%; transform: translateX(-50%); text-align: center; }
.pub-slide-text--bottom-right { bottom: 15%; right: 5%; text-align: right; }
/* ── Gradient scrim behind text for readability ── */
.pub-slide-text::before {
    content: '';
    position: absolute;
    inset: -12px -20px;
    border-radius: 10px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, transparent 75%);
    z-index: -1;
    pointer-events: none;
}
/* ── Responsive: slide text ── */
@media (max-width: 1024px) {
    .pub-slide-text { max-width: 75%; padding: 14px 18px; }
    .pub-slide-text-title { margin-bottom: 4px; }
    .pub-slide-text-desc { line-height: 1.3; }
}
@media (max-width: 768px) {
    .pub-slide-text {
        max-width: 90%;
        padding: 10px 14px;
    }
    .pub-slide-text-title { margin-bottom: 2px; }
    .pub-slide-text-desc { line-height: 1.25; font-size: 0.85rem !important; }
    /* On mobile, force bottom-center for all positions to keep text readable */
    .pub-slide-text[class*="--top-"],
    .pub-slide-text[class*="--center-left"],
    .pub-slide-text[class*="--center-right"] {
        top: auto !important;
        bottom: 12% !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        text-align: center !important;
    }
    .pub-slide-text--center {
        top: auto !important;
        bottom: 12% !important;
    }
    .pub-slide-text--bottom-left,
    .pub-slide-text--bottom-center,
    .pub-slide-text--bottom-right { bottom: 12% !important; }
    .pub-slide-text--title-XL .pub-slide-text-title { font-size: clamp(1.1rem, 5vw, 1.5rem); }
    .pub-slide-text--title-L .pub-slide-text-title { font-size: clamp(1rem, 4.5vw, 1.35rem); }
    .pub-slide-text--title-M .pub-slide-text-title { font-size: clamp(0.95rem, 3.5vw, 1.15rem); }
}

/* ── Slide CTA Buttons ── */
.pub-slide-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--slide-spacing, 8px);
    padding: 10px 26px;
    font-family: var(--slide-font-body, inherit) !important;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--slide-btn-color, inherit) !important;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 44px;
    line-height: 1.2;
    text-shadow: none;
}
.pub-slide-btn::after {
    content: '';
    display: inline-block;
    width: 1.2em;
    height: 0.7em;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h17M14 1l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h17M14 1l4 4-4 4'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform 0.3s ease;
}
.pub-slide-btn:hover::after {
    transform: translateX(4px);
}
/* Ghost — text + arrow only, uses btn-color for text */
.pub-slide-btn--ghost {
    background: none;
    border: none;
    padding: 0;
    margin-left: 0;
    opacity: 0.85;
}
.pub-slide-btn--ghost:hover {
    opacity: 1;
    letter-spacing: 0.06em;
}
/* Outline — transparent with colored border */
.pub-slide-btn--outline {
    background: transparent;
    border: 2px solid var(--slide-btn-color, currentColor);
    border-radius: 4px;
}
.pub-slide-btn--outline:hover {
    background: rgba(255,255,255,0.12);
    box-shadow: 0 0 20px rgba(255,255,255,0.1);
    transform: translateY(-1px);
}
/* Solid — btn-color as background, dark text */
.pub-slide-btn--solid {
    background: var(--slide-btn-color, var(--slide-accent, rgba(255,255,255,0.95))) !important;
    color: #111 !important;
    border: none;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.pub-slide-btn--solid:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.3);
    filter: brightness(1.08);
}
/* Pill — btn-color as background, dark text */
.pub-slide-btn--pill {
    background: var(--slide-btn-color, var(--slide-accent, rgba(255,255,255,0.95))) !important;
    color: #111 !important;
    border: none;
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    padding: 10px 32px;
}
.pub-slide-btn--pill:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 24px rgba(0,0,0,0.3);
    filter: brightness(1.08);
}
/* ── Slide button responsive ── */
@media (max-width: 1024px) {
    .pub-slide-btn { margin-top: 8px; padding: 8px 20px; font-size: 0.8rem; }
}
@media (max-width: 768px) {
    .pub-slide-btn { margin-top: 4px; min-height: 0; padding: 6px 14px; font-size: 0.72rem; gap: 5px; }
    .pub-slide-btn--ghost { padding: 0; }
}

/* 4d. Hero Card (Growth+) — floating accent card on hero */
.pub-hero-card {
    position: absolute;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    width: 280px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ── Card Styles ── */
.pub-hero-card--glass {
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    background: rgba(255, 255, 255, 0.40);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-top-color: rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.pub-hero-card--glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 30%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: 1;
}
.pub-hero-card--glass > * { position: relative; z-index: 2; }

.pub-hero-card--flat {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
}

.pub-hero-card--bordered {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
}

.pub-hero-card--minimal {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 12px 0;
}

/* ── Sizes ── */
.pub-hero-card--sm { width: 200px; padding: 12px; }
.pub-hero-card--md { width: 280px; padding: 16px; }
.pub-hero-card--lg { width: 380px; padding: 20px; }

/* ── Position presets (child of .pub-hero) ── */
.pub-hero-card--pos-top-left      { top: 15%; left: 40px; }
.pub-hero-card--pos-top-right     { top: 15%; right: 40px; }
.pub-hero-card--pos-center-left   { top: 50%; left: 40px; translate: 0 -50%; }
.pub-hero-card--pos-center-right  { top: 50%; right: 40px; translate: 0 -50%; }
.pub-hero-card--pos-bottom-left   { bottom: 15%; left: 40px; }
.pub-hero-card--pos-bottom-right  { bottom: 15%; right: 40px; }

/* ── Corner radius ── */
.pub-hero-card--radius-sharp  { border-radius: 0 !important; }
.pub-hero-card--radius-small  { border-radius: 8px !important; }
.pub-hero-card--radius-medium { border-radius: 24px !important; }
.pub-hero-card--radius-large  { border-radius: 32px !important; }

/* ── Hover effects ── */
.pub-hero-card:hover { transform: translateY(-4px); }
.pub-hero-card--hover-scale:hover { transform: scale(1.04) !important; }
.pub-hero-card--hover-glow:hover { box-shadow: 0 0 32px rgba(var(--accent-rgb, 37,99,235), 0.25) !important; }
.pub-hero-card--hover-none { pointer-events: none; }
.pub-hero-card--hover-none:hover { transform: none !important; }

/* ── Card content ── */
.pub-hero-card-image {
    border-radius: 10px;
    overflow: hidden;
}
.pub-hero-card-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.pub-hero-card-icon {
    width: 40px;
    height: 40px;
    color: var(--accent, #7c3aed);
}
.pub-hero-card-icon svg {
    width: 100%;
    height: 100%;
}
.pub-hero-card-title {
    font-family: var(--font-heading, inherit);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1e293b;
}
.pub-hero-card-subtitle {
    font-size: 0.85rem;
    line-height: 1.4;
    color: #64748b;
}

/* On dark sections, default text colors flip */
.pub-section-dark .pub-hero-card-title { color: #f1f5f9; }
.pub-section-dark .pub-hero-card-subtitle { color: #94a3b8; }

/* ── Mobile reflow — card stacks below hero content instead of floating ── */
@media (max-width: 992px) {
    .pub-hero { flex-direction: column; }
    /* If user checked "hide on mobile" — just hide it */
    .pub-hero-card.pub-hero-card--hide-mobile { display: none !important; }
    /* Otherwise reflow as inline card */
    .pub-hero-card {
        position: static !important;
        width: 160px !important;
        padding: 10px !important;
        gap: 6px !important;
        margin: 16px auto 0 !important;
        transform: none !important;
        translate: none !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
    }
    .pub-hero-card-image { border-radius: 6px !important; }
    .pub-hero-card-title { font-size: 0.75rem !important; }
    .pub-hero-card-subtitle { font-size: 0.65rem !important; line-height: 1.3 !important; }
    .pub-hero-card-icon { width: 24px !important; height: 24px !important; }
}
@media (max-width: 576px) {
    .pub-hero-card {
        width: 140px !important;
        padding: 8px !important;
        gap: 4px !important;
    }
    .pub-hero-card-title { font-size: 0.7rem !important; }
    .pub-hero-card-subtitle { font-size: 0.6rem !important; }
    .pub-hero-card-icon { width: 20px !important; height: 20px !important; }
}

.pub-hero-accent {
    color: var(--accent, #f59e0b);
}
.pub-hero-content h1 {
    font-size: 52px;
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.15;
    color: var(--hero-h1-color, inherit);
}
.pub-hero-content p {
    font-size: 20px;
    opacity: 0.9;
    margin-bottom: 28px;
    color: var(--hero-p-color, inherit);
}

/* When transparent nav is used, add padding-top to push hero content down */
.nav-transparent ~ main .pub-hero { padding-top: 120px; }

/* 4b. hero-contained — inset image card with visible background */
.hero-contained {
    min-height: 400px;
    border-radius: 20px;
    margin: 100px auto;
    max-width: calc(100% - 200px);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
}
.hero-contained .pub-hero-overlay { border-radius: 20px; }
/* The parent .pub-section-hero shows its bg color behind the contained card */
.pub-section-hero:has(.hero-contained) {
    background: var(--bg, #f8fafc);
    padding: 0;
}
.pub-section-hero:has(.hero-contained) .pub-container {
    padding: 0;
    max-width: none;
}

/* 4c. hero-split — image covers only one side, bg-color fills the other */
.hero-split_left,
.hero-split_right {
    background-size: 55% 100%;
    background-repeat: no-repeat;
    background-color: var(--hero-bg, var(--primary, #2563eb));
}
.hero-split_left {
    background-position: left center;
}
.hero-split_right {
    background-position: right center;
}

/* 4d. hero-minimal — text-only, gradient bg, compact */
.hero-minimal {
    min-height: 280px;
    background-image: none !important;
    background: linear-gradient(135deg, var(--primary, #2563eb), var(--secondary, #1e40af)) !important;
}
.hero-minimal .pub-hero-overlay { display: none; }
.hero-minimal .pub-hero-content h1 { font-size: 40px; }
.hero-minimal .pub-hero-shape { display: none; }
.hero-minimal .pub-hero-video-bg { display: none; }

/* 4e. hero video background */
.pub-hero-video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.pub-hero-video-bg video,
.pub-hero-video-bg iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    border: 0;
}
.pub-hero-video-bg iframe {
    width: 177.78vh;   /* 16:9 ratio: always wider or taller than container */
    height: 100vh;
}
.pub-hero--has-video .pub-hero-overlay {
    z-index: 1;
}
.pub-hero--has-video .pub-hero-content {
    z-index: 2;
}

/* ================================= */
/* 4e. THIN PAGE HERO (sub-pages)    */
/* ================================= */

/* Dark gradient banner for non-home pages (About, Contact, Rooms, etc.)
   Shown when the page has no hero section of its own. */
.pub-page-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #0f172a 100%);
    padding: 3.5rem 0 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.pub-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.04) 0%, transparent 70%);
    pointer-events: none;
}
.pub-page-hero-inner {
    position: relative;
    z-index: 1;
}
.pub-page-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 8px;
}
.pub-page-hero-subtitle {
    font-family: var(--font-body);
    font-size: clamp(0.9rem, 1.6vw, 1.05rem);
    color: rgba(255,255,255,0.6);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Bubble nav page-hero — taller with primary color so transparent nav overlaps */
.nav-bubble ~ main .pub-page-hero,
.nav-bubble ~ main .pub-section.pub-page-hero {
    background: linear-gradient(135deg, var(--primary, #2563eb) 0%, var(--secondary, #1e40af) 100%) !important;
    padding: 7rem 0 4rem !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
.nav-bubble ~ main .pub-page-hero::before {
    display: block;
    background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.08) 0%, transparent 70%);
}
.nav-bubble ~ main .pub-page-hero h1,
.nav-bubble ~ main .pub-page-hero-title {
    color: #fff !important;
}
.nav-bubble ~ main .pub-page-hero p,
.nav-bubble ~ main .pub-page-hero-subtitle {
    color: rgba(255,255,255,0.7) !important;
}
/* Non-home first section without page-hero — push below absolute nav */
.nav-bubble ~ main > .pub-section:first-child:not(.pub-section-hero):not(.pub-page-hero) {
    margin-top: 80px !important;
}

/* ================================= */
/* 5. BUTTON STYLES                  */
/* ================================= */

/* 5a. Base (.pub-btn) */
.pub-btn {
    display: inline-block;
    padding: 12px 32px;
    background: var(--primary, #2563eb);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: opacity 0.2s, transform 0.15s;
    border: 2px solid transparent;
    cursor: pointer;
}
.pub-btn:hover { opacity: 0.9; }
.pub-cta-icon { color: inherit; }
.pub-cta-icon svg { width: 100%; height: 100%; }

/* 5a-iii. Per-button hover overrides (set in hero editor) */
.pub-btn-hover--none:hover { opacity: 1 !important; transform: none !important; box-shadow: none !important; }
.pub-btn-hover--lift:hover { transform: translateY(-3px) !important; box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important; opacity: 1 !important; }
.pub-btn-hover--glow:hover { box-shadow: 0 0 20px rgba(37,99,235,0.4), 0 0 40px rgba(37,99,235,0.15) !important; opacity: 1 !important; }
.pub-btn-hover--brighten:hover { filter: brightness(1.15) !important; opacity: 1 !important; }
.pub-btn-hover--scale:hover { transform: scale(1.06) !important; opacity: 1 !important; }

/* 5a-ii. Ghost button (secondary CTA) */
.pub-btn-ghost {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.7);
}
.pub-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    opacity: 1;
}
/* CTA button group — primary + ghost side-by-side */
.pub-hero-cta-group {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: var(--hero-text-align, center);
    flex-wrap: wrap;
}

/* 5b. btn-rounded (default) */
.btn-rounded .pub-btn { border-radius: 8px; }
.btn-rounded .pub-room-card,
.btn-rounded .pub-about-image img,
.btn-rounded .pub-gallery-item img,
.btn-rounded .pub-testimonial,
.btn-rounded .pub-cta { border-radius: 12px; }

/* 5c. btn-pill */
.btn-pill .pub-btn { border-radius: 9999px; }
.btn-pill .pub-room-card,
.btn-pill .pub-testimonial,
.btn-pill .pub-cta { border-radius: 16px; }
.btn-pill .pub-about-image img,
.btn-pill .pub-gallery-item img { border-radius: 12px; }

/* 5d. btn-square */
.btn-square .pub-btn { border-radius: 0; }
.btn-square .pub-room-card,
.btn-square .pub-about-image img,
.btn-square .pub-gallery-item img,
.btn-square .pub-testimonial,
.btn-square .pub-cta,
.btn-square .pub-hero.hero-contained { border-radius: 0; }

/* 5e. btn-outline */
.btn-outline .pub-btn {
    background: transparent;
    color: var(--primary, #2563eb);
    border: 2px solid var(--primary, #2563eb);
    border-radius: 8px;
}
.btn-outline .pub-btn:hover {
    background: var(--primary, #2563eb);
    color: #fff;
    opacity: 1;
}
/* Hero buttons stay white for contrast (except split layout which has light bg) */
.btn-outline .pub-hero .pub-btn {
    color: #fff;
    border-color: #fff;
}
.btn-outline .pub-hero .pub-btn:hover {
    background: #fff;
    color: var(--primary, #2563eb);
}

/* 5f. btn-soft — modern soft rounded with subtle shadow */
.btn-soft .pub-btn {
    border-radius: 14px;
    border: none;
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.18), 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.25s ease;
}
.btn-soft .pub-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.25), 0 2px 6px rgba(0, 0, 0, 0.08);
    opacity: 1;
}
.btn-soft .pub-room-card,
.btn-soft .pub-about-image img,
.btn-soft .pub-gallery-item img,
.btn-soft .pub-testimonial,
.btn-soft .pub-cta { border-radius: 16px; }

/* 5g. btn-glass — frosted glass translucent style */
.btn-glass .pub-btn {
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.25s ease, background 0.2s;
}
.btn-glass .pub-btn:hover {
    background: rgba(37, 99, 235, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    opacity: 1;
}
.btn-glass .pub-room-card,
.btn-glass .pub-testimonial,
.btn-glass .pub-cta { border-radius: 14px; }
.btn-glass .pub-about-image img,
.btn-glass .pub-gallery-item img { border-radius: 12px; }

/* 5h. btn-gradient — gradient fill with depth */
.btn-gradient .pub-btn {
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary, #2563eb) 0%, var(--secondary, #1e40af) 100%);
    border: none;
    box-shadow: 0 4px 18px rgba(37, 99, 235, 0.3), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.25s ease;
}
.btn-gradient .pub-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(37, 99, 235, 0.38), 0 2px 6px rgba(0, 0, 0, 0.10);
    opacity: 1;
}
.btn-gradient .pub-room-card,
.btn-gradient .pub-about-image img,
.btn-gradient .pub-gallery-item img,
.btn-gradient .pub-testimonial,
.btn-gradient .pub-cta { border-radius: 12px; }

/* 5i. btn-elevated — raised shadow effect (Growth+) */
.btn-elevated .pub-btn {
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 0 var(--secondary, #1e40af), 0 6px 16px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-elevated .pub-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--secondary, #1e40af), 0 10px 24px rgba(0, 0, 0, 0.16);
    opacity: 1;
}
.btn-elevated .pub-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--secondary, #1e40af), 0 2px 8px rgba(0, 0, 0, 0.12);
}
.btn-elevated .pub-room-card,
.btn-elevated .pub-about-image img,
.btn-elevated .pub-gallery-item img,
.btn-elevated .pub-testimonial,
.btn-elevated .pub-cta { border-radius: 10px; }

/* 5j. btn-neon — glowing border effect (Growth+) */
.btn-neon .pub-btn {
    border-radius: 8px;
    background: transparent;
    color: var(--primary, #2563eb);
    border: 2px solid var(--primary, #2563eb);
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.4), inset 0 0 8px rgba(37, 99, 235, 0.1);
    transition: box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.btn-neon .pub-btn:hover {
    background: var(--primary, #2563eb);
    color: #fff;
    box-shadow: 0 0 16px rgba(37, 99, 235, 0.6), 0 0 32px rgba(37, 99, 235, 0.3);
    opacity: 1;
}
.btn-neon .pub-hero .pub-btn {
    color: #fff;
    border-color: #fff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3), inset 0 0 8px rgba(255, 255, 255, 0.05);
}
.btn-neon .pub-hero .pub-btn:hover {
    background: #fff;
    color: var(--primary, #2563eb);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.5), 0 0 32px rgba(255, 255, 255, 0.2);
}
.btn-neon .pub-room-card,
.btn-neon .pub-about-image img,
.btn-neon .pub-gallery-item img,
.btn-neon .pub-testimonial,
.btn-neon .pub-cta { border-radius: 10px; }

/* 5k. btn-underline — text with animated underline (Growth+) */
.btn-underline .pub-btn {
    background: transparent;
    color: var(--primary, #2563eb);
    border: none;
    border-radius: 0;
    padding: 12px 8px;
    position: relative;
    box-shadow: none;
}
.btn-underline .pub-btn::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 8px;
    right: 8px;
    height: 2px;
    background: var(--primary, #2563eb);
    transform: scaleX(0.3);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.btn-underline .pub-btn:hover::after {
    transform: scaleX(1);
}
.btn-underline .pub-btn:hover { opacity: 1; }
.btn-underline .pub-hero .pub-btn {
    color: #fff;
}
.btn-underline .pub-hero .pub-btn::after {
    background: #fff;
}
.btn-underline .pub-room-card,
.btn-underline .pub-about-image img,
.btn-underline .pub-gallery-item img,
.btn-underline .pub-testimonial,
.btn-underline .pub-cta { border-radius: 8px; }

/* 5l. btn-split — two-tone split background (Growth+) */
.btn-split .pub-btn {
    border-radius: 8px;
    border: none;
    background: linear-gradient(90deg, var(--primary, #2563eb) 50%, var(--secondary, #1e40af) 50%);
    background-size: 200% 100%;
    background-position: left;
    transition: background-position 0.4s cubic-bezier(0.23, 1, 0.32, 1), transform 0.2s ease;
}
.btn-split .pub-btn:hover {
    background-position: right;
    transform: translateY(-1px);
    opacity: 1;
}
.btn-split .pub-room-card,
.btn-split .pub-about-image img,
.btn-split .pub-gallery-item img,
.btn-split .pub-testimonial,
.btn-split .pub-cta { border-radius: 10px; }

/* 5m. btn-minimal — no background, subtle hover (Growth+) */
.btn-minimal .pub-btn {
    background: transparent;
    color: var(--primary, #2563eb);
    border: none;
    border-radius: 6px;
    box-shadow: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.btn-minimal .pub-btn:hover {
    background: rgba(37, 99, 235, 0.08);
    opacity: 1;
}
.btn-minimal .pub-hero .pub-btn {
    color: #fff;
}
.btn-minimal .pub-hero .pub-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}
.btn-minimal .pub-room-card,
.btn-minimal .pub-about-image img,
.btn-minimal .pub-gallery-item img,
.btn-minimal .pub-testimonial,
.btn-minimal .pub-cta { border-radius: 8px; }

/* ================================= */
/* 6. SECTION STYLES                 */
/* ================================= */

.pub-section {
    padding: 80px 0;
    position: relative;
}
.pub-section h2 {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}
.pub-section-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent, var(--primary, #2563eb));
    margin-bottom: 10px;
}
/* Alternating section backgrounds for semantic section types */
.pub-section-rooms_preview,
.pub-section-rooms_list,
.pub-section-amenities { background: #f8fafc; }

/* About */
.pub-about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.pub-about-text h2 {
    font-size: 34px;
    line-height: 1.2;
}
.pub-about-text p,
.pub-about-body {
    font-size: 16px;
    line-height: 1.85;
    color: #475569;
}
.pub-about-image {
    position: relative;
    min-height: 320px; /* Gradient fallback visible even when image URL is broken */
}
.pub-about-image img {
    width: 100%;
    max-height: 460px;
    object-fit: cover;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s ease;
}
.pub-about-image:hover img {
    transform: scale(1.02) translateY(-4px);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.14);
}
.pub-about-image::after {
    content: '';
    position: absolute;
    top: 20px;
    right: -14px;
    bottom: -14px;
    left: 20px;
    border: 2px solid var(--primary, #2563eb);
    opacity: 0.12;
    z-index: -1;
    transition: opacity 0.4s;
}
.pub-about-image:hover::after { opacity: 0.22; }

/* About — Layout variants */
.pub-about--image-left { direction: rtl; }
.pub-about--image-left > * { direction: ltr; }
.pub-about--stacked { grid-template-columns: 1fr !important; max-width: 720px; margin: 0 auto; }
.pub-about--stacked .pub-about-image,
.pub-about--stacked .pub-about-carousel { order: -1; }
.pub-about--text-only { grid-template-columns: 1fr !important; max-width: 680px; margin: 0 auto; }
.pub-about--text-only .pub-about-image,
.pub-about--text-only .pub-about-carousel { display: none; }

/* About — Ratio (image + carousel) */
.pub-about-ratio--square .pub-about-image img { aspect-ratio: 1 / 1; }
.pub-about-ratio--landscape .pub-about-image img { aspect-ratio: 4 / 3; }
.pub-about-ratio--portrait .pub-about-image img { aspect-ratio: 3 / 4; max-height: 520px; }
.pub-about-ratio--square .pub-about-carousel { aspect-ratio: 1 / 1; height: auto !important; }
.pub-about-ratio--landscape .pub-about-carousel { aspect-ratio: 4 / 3; height: auto !important; }
.pub-about-ratio--portrait .pub-about-carousel { aspect-ratio: 3 / 4; height: auto !important; }

/* About — No frame (hide decorative ::after) */
.pub-about--no-frame .pub-about-image::after { display: none !important; }

/* About — Image/Carousel styles (Growth+) */
.pub-about-img--rounded .pub-about-image img { border-radius: 24px; }
.pub-about-img--rounded .pub-about-image::after { border-radius: 24px; }
.pub-about-img--rounded .pub-about-carousel { border-radius: 24px; }
.pub-about-img--circle .pub-about-image img { border-radius: 50%; aspect-ratio: 1 / 1; }
.pub-about-img--circle .pub-about-image::after { border-radius: 50%; }
.pub-about-img--circle .pub-about-carousel { border-radius: 50%; aspect-ratio: 1 / 1; height: auto !important; }
.pub-about-img--shadow .pub-about-image img { box-shadow: 0 32px 72px rgba(0,0,0,0.18); }
.pub-about-img--shadow .pub-about-carousel { box-shadow: 0 32px 72px rgba(0,0,0,0.18); }

/* About — Text alignment (Growth+) */
.pub-about--center .pub-about-text { text-align: center; }
.pub-about--center .pub-about-text .pub-section-tag { margin-left: auto; margin-right: auto; }

/* About — Content width (Growth+) */
.pub-about--narrow { max-width: 800px; margin-left: auto; margin-right: auto; }
.pub-about--wide { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* About Carousel (Growth+) */
.pub-about-carousel { position: relative; border-radius: 16px; overflow: hidden; min-height: 300px; }
.pub-about-carousel:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }
.pub-about-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s 0.6s; display: flex; align-items: center; justify-content: center; }
.pub-about-slide.active { opacity: 1; visibility: visible; z-index: 1; transition: opacity 0.6s ease, visibility 0s 0s; }
.pub-about-slide-content { position: relative; z-index: 2; width: 100%; height: 100%; padding: 32px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: transparent !important; }
.pub-about-slide-content > p,
.pub-about-slide-content > div,
.pub-about-slide-content > ul,
.pub-about-slide-content > ol,
.pub-about-slide-content > blockquote { background-color: transparent !important; }
.pub-about-slide-content h1, .pub-about-slide-content h2, .pub-about-slide-content h3,
.pub-about-slide-content h4, .pub-about-slide-content h5, .pub-about-slide-content h6 { margin: 0 0 8px; }
.pub-about-slide-content p { margin: 0 0 6px; }
.pub-about-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; background: rgba(0,0,0,0.4); color: #fff; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.pub-about-carousel-arrow:hover { background: rgba(0,0,0,0.65); }
.pub-about-carousel-prev { left: 10px; }
.pub-about-carousel-next { right: 10px; }
.pub-about-carousel-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 6px; }
.pub-about-carousel-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,0.45); cursor: pointer; padding: 0; transition: background 0.2s, transform 0.2s; }
.pub-about-carousel-dot.active { background: #fff; transform: scale(1.3); }

/* ── About Carousel Transition: Slide ── */
.pub-about-carousel[data-transition="slide"] .pub-about-slide {
    opacity: 1;
    visibility: visible;
    transform: translateX(100%);
    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.pub-about-carousel[data-transition="slide"] .pub-about-slide.active {
    transform: translateX(0);
}
.pub-about-carousel[data-transition="slide"] .pub-about-slide.slide-prev {
    transform: translateX(-100%);
}

/* ── About Carousel Transition: Zoom ── */
.pub-about-carousel[data-transition="zoom"] .pub-about-slide {
    transform: scale(1.3);
    transition: opacity 0.7s ease, transform 0.7s ease, visibility 0s 0.7s;
}
.pub-about-carousel[data-transition="zoom"] .pub-about-slide.active {
    transform: scale(1);
    transition: opacity 0.7s ease, transform 0.7s ease, visibility 0s 0s;
}

/* ── About Carousel Transition: Blur ── */
.pub-about-carousel[data-transition="blur"] .pub-about-slide {
    filter: blur(20px);
    transform: scale(1.05);
    transition: opacity 0.8s ease, filter 0.8s ease, transform 0.8s ease, visibility 0s 0.8s;
}
.pub-about-carousel[data-transition="blur"] .pub-about-slide.active {
    filter: blur(0);
    transform: scale(1);
    transition: opacity 0.8s ease, filter 0.8s ease, transform 0.8s ease, visibility 0s 0s;
}

/* ── About Carousel Transition: Flip ── */
.pub-about-carousel[data-transition="flip"] {
    perspective: 1200px;
}
.pub-about-carousel[data-transition="flip"] .pub-about-slide {
    backface-visibility: hidden;
    transform: rotateY(90deg);
    transition: opacity 0.1s, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.6s;
}
.pub-about-carousel[data-transition="flip"] .pub-about-slide.active {
    transform: rotateY(0deg);
    transition: opacity 0.1s, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0s;
}

@media (max-width: 768px) {
    .pub-about-carousel { border-radius: 12px; }
    .pub-about-slide-content { padding: 20px; }
    .pub-about-carousel-arrow { width: 30px; height: 30px; font-size: 14px; }
    .pub-about { grid-template-columns: 1fr; gap: 32px; }
    .pub-about-image::after { display: none; }
    .pub-about--image-left { direction: ltr; }
}

/* Text */
.pub-text {
    max-width: 720px;
    font-size: 16px;
    line-height: 1.8;
    color: var(--text, #1a1a1a);
}

/* Rich Content (Quill editor output) */
.rich-content p { margin: 0 0 12px; line-height: 1.8; }
.rich-content p:last-child { margin-bottom: 0; }
.rich-content h1 { font-size: 2rem; font-weight: 800; margin: 24px 0 12px; }
.rich-content h2 { font-size: 1.5rem; font-weight: 700; margin: 22px 0 10px; }
.rich-content h3 { font-size: 1.25rem; font-weight: 700; margin: 20px 0 8px; }
.rich-content h4 { font-size: 1.1rem; font-weight: 600; margin: 16px 0 6px; }
.rich-content h5 { font-size: 0.95rem; font-weight: 600; margin: 14px 0 4px; }
.rich-content h6 { font-size: 0.85rem; font-weight: 600; margin: 12px 0 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.rich-content ul, .rich-content ol { padding-left: 24px; margin: 0 0 12px; }
.rich-content li { margin-bottom: 4px; line-height: 1.7; }
.rich-content a { color: var(--primary, #2563eb); text-decoration: none !important; }
.rich-content a:hover { text-decoration: underline !important; }
.rich-content blockquote { border-left: 3px solid var(--primary, #2563eb); padding: 4px 0 4px 16px; margin: 12px 0; font-style: italic; color: #64748b; }
.rich-content strong { font-weight: 700; }
/* Strip Quill-injected white backgrounds so section bg shows through.
   Target block wrappers only — preserve inline highlight spans. */
.rich-content,
.rich-content > p,
.rich-content > div,
.rich-content > ul,
.rich-content > ol,
.rich-content > blockquote { background-color: transparent !important; }

/* Gallery */
.pub-gallery {
    display: grid;
    grid-template-columns: repeat(var(--columns, 3), 1fr);
    gap: 14px;
}
.pub-gallery-item {
    overflow: hidden;
    position: relative;
}
.pub-gallery-item img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
a.pub-gallery-item { text-decoration: none; color: inherit; display: block; }
.pub-gallery-item:hover img {
    transform: scale(1.06);
}
@media (max-width: 768px) {
    .pub-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ── Gallery Gap Variants ── */
.pub-gallery.pub-gallery-gap--compact { gap: 8px; }
.pub-gallery.pub-gallery-gap--loose { gap: 24px; }
.pub-gallery.pub-gallery-gap--none { gap: 0; }

/* ── Gallery Aspect Ratio ── */
.pub-gallery.pub-gallery-ratio--square .pub-gallery-item img { height: auto; aspect-ratio: 1 / 1; }
.pub-gallery.pub-gallery-ratio--landscape .pub-gallery-item img { height: auto; aspect-ratio: 4 / 3; }
.pub-gallery.pub-gallery-ratio--wide .pub-gallery-item img { height: auto; aspect-ratio: 16 / 9; }

/* ── Gallery Caption Styles ── */
.pub-gallery.pub-gallery-caption--overlay .pub-gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 8px 10px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #fff;
    font-size: 13px;
    text-align: center;
}
.pub-gallery.pub-gallery-caption--hidden .pub-gallery-caption { display: none; }

/* ── Gallery Hover Variants ── */
.pub-gallery.pub-gallery-hover--fade .pub-gallery-item:hover img {
    transform: none;
    opacity: 0.75;
}
.pub-gallery.pub-gallery-hover--fade .pub-gallery-item img {
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease;
}
.pub-gallery.pub-gallery-hover--slide .pub-gallery-item:hover img {
    transform: scale(1.06);
}
.pub-gallery.pub-gallery-hover--slide .pub-gallery-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(transparent, rgba(0,0,0,0.5));
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.pub-gallery.pub-gallery-hover--slide .pub-gallery-item:hover::after {
    opacity: 1;
}
.pub-gallery.pub-gallery-hover--none .pub-gallery-item:hover img {
    transform: none;
}

/* ── Gallery Border Radius ── */
.pub-gallery.pub-gallery-radius--none .pub-gallery-item,
.pub-gallery.pub-gallery-radius--none .pub-gallery-item img { border-radius: 0 !important; }
.pub-gallery.pub-gallery-radius--small .pub-gallery-item { border-radius: 8px; }
.pub-gallery.pub-gallery-radius--small .pub-gallery-item img { border-radius: 8px; }
.pub-gallery.pub-gallery-radius--medium .pub-gallery-item { border-radius: 16px; }
.pub-gallery.pub-gallery-radius--medium .pub-gallery-item img { border-radius: 16px; }
.pub-gallery.pub-gallery-radius--large .pub-gallery-item { border-radius: 24px; }
.pub-gallery.pub-gallery-radius--large .pub-gallery-item img { border-radius: 24px; }

/* ── Gallery Filter Style Variants ── */
.pub-gallery-filter--minimal .pub-gallery-filter-btn {
    border: none;
    border-radius: 0;
    background: transparent;
    color: #64748b;
    font-weight: 400;
    border-bottom: 2px solid transparent;
    padding: 6px 12px;
}
.pub-gallery-filter--minimal .pub-gallery-filter-btn.active,
.pub-gallery-filter--minimal .pub-gallery-filter-btn:hover {
    background: transparent;
    color: var(--primary, #2563eb);
    border-bottom-color: var(--primary, #2563eb);
    font-weight: 600;
}
.pub-gallery-filter--bordered .pub-gallery-filter-btn {
    border-radius: 4px;
    border: 2px solid #e5e7eb;
    background: transparent;
    color: #374151;
}
.pub-gallery-filter--bordered .pub-gallery-filter-btn.active,
.pub-gallery-filter--bordered .pub-gallery-filter-btn:hover {
    border-color: var(--primary, #2563eb);
    background: transparent;
    color: var(--primary, #2563eb);
}

/* Testimonials */
.pub-testimonials {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}
.pub-testimonial {
    background: #fff;
    padding: 36px 32px 32px;
    position: relative;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0,0,0,0.04);
    transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.pub-testimonial:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}
.pub-testimonial-quote {
    font-size: 56px;
    line-height: 1;
    color: var(--primary, #2563eb);
    opacity: 0.12;
    font-family: Georgia, 'Times New Roman', serif;
    position: absolute;
    top: 12px;
    left: 24px;
    pointer-events: none;
}
.pub-testimonial-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 16px;
}
.pub-testimonial-stars svg {
    width: 16px;
    height: 16px;
    fill: #f59e0b;
}
.pub-testimonial p {
    font-style: italic;
    font-size: 15px;
    margin-bottom: 20px;
    line-height: 1.8;
    color: #374151;
    position: relative;
}
.pub-testimonial-footer {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pub-testimonial-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary, #2563eb), var(--secondary, #1e40af));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
    text-transform: uppercase;
}
.pub-testimonial-author {
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #1a1a1a);
}
.pub-testimonial-role {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

/* ── Testimonial Card Style Variants ── */
.pub-testimonial--minimal {
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 28px 16px;
}
.pub-testimonial--minimal:hover {
    box-shadow: none;
}
.pub-testimonial--bordered {
    box-shadow: none;
    border: 2px solid var(--primary, #2563eb);
    border-radius: 12px;
}
.pub-testimonial--bordered:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.pub-testimonial--bubble {
    background: #f1f5f9;
    border: none;
    box-shadow: none;
    border-radius: 16px 16px 16px 4px;
    padding: 28px 24px 24px;
    position: relative;
    margin-bottom: 16px;
}
.pub-testimonial--bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 24px;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 12px solid #f1f5f9;
}
.pub-testimonial--bubble .pub-testimonial-footer {
    position: relative;
    margin-top: 20px;
}
.pub-testimonial--bubble:hover {
    transform: none;
    box-shadow: none;
}
.pub-testimonial--large {
    text-align: center;
    padding: 48px 40px;
}
.pub-testimonial--large .pub-testimonial-quote {
    position: static;
    font-size: 72px;
    margin-bottom: -16px;
}
.pub-testimonial--large .pub-testimonial-stars {
    justify-content: center;
}
.pub-testimonial--large .pub-testimonial-stars svg {
    width: 20px;
    height: 20px;
}
.pub-testimonial--large .rich-content {
    font-size: 18px;
}
.pub-testimonial--large .pub-testimonial-footer {
    justify-content: center;
}
.pub-testimonial--large .pub-testimonial-avatar {
    width: 52px;
    height: 52px;
    font-size: 18px;
}
.pub-testimonials--large {
    grid-template-columns: 1fr !important;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Testimonial Hover Effects ── */
.pub-testimonial.pub-testimonial-hover--none:hover {
    transform: none;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
}
.pub-testimonial.pub-testimonial-hover--glow:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 30px rgba(var(--primary-rgb, 37, 99, 235), 0.2), 0 8px 24px rgba(0, 0, 0, 0.08);
}
.pub-testimonial.pub-testimonial-hover--scale:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

/* FAQ */
.pub-faq { max-width: 720px; }
.pub-faq-item {
    border-bottom: 1px solid #e2e8f0;
    padding: 18px 0;
}
.pub-faq-item summary {
    font-weight: 600;
    cursor: pointer;
    font-size: 16px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: color 0.2s;
}
.pub-faq-item summary::-webkit-details-marker { display: none; }
.pub-faq-item summary::after {
    content: '+';
    font-size: 22px;
    font-weight: 300;
    color: var(--primary, #2563eb);
    transition: transform 0.3s;
    flex-shrink: 0;
}
.pub-faq-item[open] summary::after {
    content: '\2212';
    transform: rotate(180deg);
}
.pub-faq-item summary:hover { color: var(--primary, #2563eb); }
.pub-faq-answer {
    overflow: hidden;
}
.pub-faq-item p {
    margin-top: 12px;
    color: #475569;
    font-size: 15px;
    line-height: 1.75;
    padding-right: 32px;
}

/* Contact — channels strip + redesigned form/side panel */
.pub-contact { font-size: 15px; }
.pub-contact p { margin-bottom: 8px; }
.pub-contact a { color: var(--primary, #2563eb); }

/* CTA Banner */
.pub-section-cta_banner { padding: 0 !important; border: none !important; outline: none !important; box-shadow: none !important; overflow: hidden; }
.pub-section-cta_banner::before,
.pub-section-cta_banner::after { display: none !important; }
.pub-section-cta_banner .pub-container { max-width: none; padding: 0; }
.pub-cta {
    text-align: center;
    padding: 88px 32px;
    background: linear-gradient(135deg, var(--primary, #2563eb) 0%, var(--secondary, #1e40af) 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.pub-cta::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -15%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,0.07), transparent 70%);
    pointer-events: none;
}
.pub-cta::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 70%);
    pointer-events: none;
}
.pub-cta h2 {
    margin-bottom: 12px;
    font-size: 38px;
    color: #fff;
    position: relative;
}
.pub-cta p {
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 32px;
    font-size: 18px;
    position: relative;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.pub-cta .pub-btn {
    background: #fff;
    color: var(--primary, #2563eb);
    font-size: 16px;
    padding: 14px 40px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s, opacity 0.2s;
}
.pub-cta .pub-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
    opacity: 1;
}
.pub-cta-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin-bottom: 8px;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}
.pub-cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    position: relative;
}
.pub-cta .pub-btn-ghost {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.5);
    box-shadow: none;
}
.pub-cta .pub-btn-ghost:hover {
    background: rgba(255,255,255,0.15);
    border-color: #fff;
    box-shadow: none;
}

/* ── CTA Layout Variants ── */
.pub-cta.pub-cta--left {
    text-align: left !important;
    padding-left: 8% !important;
    padding-right: 8% !important;
}
.pub-cta.pub-cta--left .pub-cta-buttons {
    justify-content: flex-start;
}
.pub-cta.pub-cta--left p,
.pub-cta.pub-cta--left .rich-content,
.pub-cta.pub-cta--left h2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.pub-cta.pub-cta--left h2::after {
    margin-left: 0 !important;
    margin-right: auto !important;
}
.pub-cta.pub-cta--split {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    text-align: left !important;
    padding-left: 8% !important;
    padding-right: 8% !important;
}
.pub-cta.pub-cta--split .pub-cta-buttons {
    flex-shrink: 0;
}
.pub-cta.pub-cta--split p,
.pub-cta.pub-cta--split h2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.pub-cta.pub-cta--split p {
    margin-bottom: 0;
}
.pub-cta.pub-cta--split h2 {
    margin-bottom: 8px;
}
.pub-cta.pub-cta--split h2::after {
    margin-left: 0 !important;
    margin-right: auto !important;
}
@media (max-width: 768px) {
    .pub-cta.pub-cta--split {
        flex-direction: column;
        text-align: center;
    }
    .pub-cta.pub-cta--split p {
        margin-bottom: 24px;
    }
    .pub-cta.pub-cta--split .pub-cta-buttons {
        flex-shrink: 1;
        justify-content: center;
    }
}

/* ── CTA Content Width ── */
.pub-cta.pub-cta--narrow h2,
.pub-cta.pub-cta--narrow p,
.pub-cta.pub-cta--narrow .rich-content { max-width: 480px; margin-left: auto; margin-right: auto; }
.pub-cta.pub-cta--medium h2,
.pub-cta.pub-cta--medium p,
.pub-cta.pub-cta--medium .rich-content { max-width: 640px; margin-left: auto; margin-right: auto; }
.pub-cta.pub-cta--wide h2,
.pub-cta.pub-cta--wide p,
.pub-cta.pub-cta--wide .rich-content { max-width: 800px; margin-left: auto; margin-right: auto; }
/* ── CTA Hide Orbs ── */
.pub-cta--no-orbs::before,
.pub-cta--no-orbs::after {
    display: none;
}

/* ── Book Now Widget (base layout) ── */
.pub-book-now { background: transparent; }
.pub-book-now-inner {
    padding: 32px 40px;
    max-width: 960px;
    margin: 0 auto;
}
.pub-book-now-header { margin-bottom: 24px; }
.pub-book-now-header h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.pub-book-now-header h2::after { display: none !important; }
.pub-book-now-header p { font-size: 15px; margin: 0; }
.pub-book-now-form { width: 100%; }
.pub-book-now-fields { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.pub-book-now-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 130px; }
.pub-book-now-field label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.10em;
    text-transform: uppercase; white-space: nowrap;
}
.pub-book-now-btn { flex-shrink: 0; white-space: nowrap; align-self: flex-end; }
@media (max-width: 680px) {
    .pub-book-now-inner { padding: 24px 20px; }
    .pub-book-now-fields { flex-direction: column; }
    .pub-book-now-field, .pub-book-now-btn { width: 100%; }
}

/* ── Check-In Lookup (base layout) ── */
.pub-checkin-lookup { text-align: center; max-width: 560px; margin: 0 auto; padding: 20px 0; }
.pub-checkin-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
}
.pub-checkin-icon svg { width: 30px; height: 30px; }
.pub-checkin-lookup h2 { margin-bottom: 12px; }
.pub-checkin-instructions { font-size: 15px; line-height: 1.7; margin-bottom: 24px; }
.pub-checkin-btn { border-radius: 9999px; padding: 14px 46px; font-size: 16px; }
.pub-checkin-note { margin-top: 14px; font-size: 13px; }

/* Rooms disabled message */
.pub-rooms-disabled {
    text-align: center;
    padding: 48px 24px;
    color: #64748b;
    font-size: 16px;
}

/* Footer */
.pub-footer {
    padding: 0;
    font-size: 13px;
    color: #94a3b8;
}
.pub-powered { margin-top: 8px; }

/* (footer-legal rules moved to §16 FOOTER GRID) */

/* Rooms grid */
.pub-rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
    margin-top: 24px;
}
.pub-room-card {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0,0,0,0.04);
    transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.pub-room-card:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-6px);
}
.pub-room-image {
    position: relative;
    overflow: hidden;
}
.pub-room-image img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.pub-room-card:hover .pub-room-image img {
    transform: scale(1.08);
}
.pub-room-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
    pointer-events: none;
}
.pub-room-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--primary, #2563eb);
    color: #fff;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 6px;
    z-index: 2;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.pub-room-badge small {
    font-weight: 400;
    font-size: 11px;
    opacity: 0.85;
}
.pub-room-info { padding: 22px 20px; }
.pub-room-info h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}
.pub-room-info p {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 14px;
    line-height: 1.6;
}
.pub-room-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #64748b;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}
.pub-room-occupancy {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pub-room-occupancy svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.pub-room-price {
    font-weight: 700;
    color: var(--primary, #2563eb);
}
.pub-btn-room {
    display: block;
    text-align: center;
    margin-top: 16px;
    padding: 10px 24px;
    font-size: 14px;
}
.pub-view-all-rooms {
    display: inline-block;
    padding: 12px 32px;
    border: 2px solid var(--primary, #2563eb);
    color: var(--primary, #2563eb);
    background: transparent;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
}
.pub-view-all-rooms:hover {
    background: var(--primary, #2563eb);
    color: #fff;
}

/* -- Multi-property room grouping -- */
.pub-property-group {
    margin-top: 40px;
}
.pub-property-group:first-child {
    margin-top: 0;
}
.pub-property-heading {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--heading-color, #1e293b);
}
.pub-property-location {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 8px;
}

/* -- Properties list section -- */
.pub-properties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
    margin-top: 24px;
}
.pub-property-card {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0,0,0,0.04);
    transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.pub-property-card:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-6px);
}
.pub-property-image {
    position: relative;
    overflow: hidden;
}
.pub-property-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.pub-property-card:hover .pub-property-image img {
    transform: scale(1.08);
}
.pub-property-info {
    padding: 20px;
}
.pub-property-info h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--heading-color, #1e293b);
}
.pub-property-info .pub-property-location {
    margin: 0 0 8px;
}
.pub-property-type {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    background: var(--primary-light, #eff6ff);
    color: var(--primary, #2563eb);
    border-radius: 20px;
}

/* ================================= */
/* 7. RESPONSIVE                     */
/* ================================= */

/* Tablet */
@media (max-width: 1024px) {
    .pub-hero-content h1 { font-size: 40px; }
    /* Split hero → revert to full-bleed on tablet/mobile */
    .hero-split_left,
    .hero-split_right {
        background-size: cover;
        background-position: center;
    }
    .pub-section { padding: 60px 0; }
    .pub-section h2 { font-size: 28px; }
    .pub-cta h2 { font-size: 32px; }
    .pub-about { gap: 36px; }
}

/* Mobile */
@media (max-width: 768px) {
    .pub-hero {
        min-height: 60vh;
        padding: 48px 16px;
        /* Reset position grid — hero too narrow for edge positioning */
        --hero-align-items: center !important;
        --hero-justify: center !important;
        --hero-text-align: center !important;
        --hero-padding: 48px 16px !important;
    }
    /* Zero out nudge on mobile — fixed px offsets push content off-screen */
    .pub-hero-content[style*="transform"] {
        transform: none !important;
    }
    /* Force-center per-element alignment on mobile — prevents left h1 + centred sub/CTA mismatch */
    .pub-hero-content h1[style*="text-align"],
    .pub-hero-content p[style*="text-align"] {
        text-align: center !important;
    }
    /* Reset per-element max-width on mobile — let text use full available width */
    .pub-hero-content h1[style*="max-width"],
    .pub-hero-content p[style*="max-width"] {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Reset badge alignment on mobile — force centre */
    .pub-hero-content [class*="pub-hero-badge"][style*="margin"] {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .nav-transparent ~ main .pub-hero { padding-top: 80px; }
    .pub-hero-content h1 { font-size: 28px; }
    .pub-hero-content p { font-size: 16px; }
    .pub-section { padding: 48px 0; }
    .pub-section h2 { font-size: 24px; }
    .pub-container { padding: 0 16px; }
    .pub-logo img { max-width: 140px; }
    .pub-cta { padding: 48px 20px; }
    .pub-cta h2 { font-size: 28px; }
    .pub-cta p { font-size: 16px; }
    .pub-rooms-grid { grid-template-columns: 1fr; }
    .pub-properties-grid { grid-template-columns: 1fr; }
    .pub-room-image img { height: 200px; }
    .pub-testimonials { grid-template-columns: 1fr; }
    .pub-testimonial { padding: 28px 24px; }
    .pub-testimonial--large { padding: 32px 20px; }
    .pub-testimonial--large .pub-testimonial-quote { font-size: 56px; }
    .pub-testimonial--large .rich-content { font-size: 16px; }
    .hero-contained { margin: 16px auto; max-width: calc(100% - 32px); min-height: 300px; border-radius: 16px; }
    .hero-minimal .pub-hero-content h1 { font-size: 28px; }
}

/* Small mobile */
@media (max-width: 480px) {
    .pub-gallery { grid-template-columns: 1fr; }
    .pub-gallery-item img { height: 200px; }
    .pub-hero {
        min-height: 50vh;
        padding: 36px 12px;
        --hero-padding: 36px 12px !important;
    }
    .nav-transparent ~ main .pub-hero { padding-top: 72px; }
    .pub-hero-content h1 { font-size: 24px; }
    .pub-hero-content p { font-size: 15px; }
    .pub-section h2 { font-size: 20px; }
    .pub-cta { padding: 40px 16px; }
    .pub-cta h2 { font-size: 24px; }
    .pub-about-text h2 { font-size: 24px; }
}

/* ================================= */
/* 8. UTILITIES & COMPONENTS         */
/* ================================= */

/* ── Social Links ── */
.pub-social-links {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.pub-social-links a {
    color: inherit;
    opacity: 0.7;
    transition: opacity 0.2s, color 0.2s;
    display: flex;
    align-items: center;
}
.pub-social-links a:hover {
    opacity: 1;
    color: var(--accent);
}

/* ── Gallery Captions ── */
.pub-gallery-caption {
    padding: 8px 4px 4px;
    font-size: 13px;
    color: #64748b;
    text-align: center;
}

/* ── Photo Attribution ── */
.pub-photo-credit {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
    text-align: center;
}
.pub-photo-credit a {
    color: #64748b;
    text-decoration: none;
}
.pub-photo-credit a:hover {
    text-decoration: underline;
}
.pub-hero-credit {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    z-index: 2;
}
.pub-hero-credit a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}
.pub-hero-credit a:hover {
    text-decoration: underline;
}

/* ── Cookie Consent Banner ── */
.pub-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9990;
    background: #1a1a2e;
    color: #fff;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-size: 14px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
}
.pub-cookie-banner p { margin: 0; color: #fff; }
.pub-cookie-banner .pub-btn {
    white-space: nowrap;
    padding: 8px 20px;
    font-size: 13px;
    background: #fff !important;
    color: #1a1a2e !important;
    border: none !important;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}
.pub-cookie-banner .pub-btn:hover {
    background: #e2e8f0 !important;
}
.pub-cookie-banner a { color: rgba(255, 255, 255, 0.9); }
.pub-cookie-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.pub-btn-secondary {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    padding: 8px 20px;
    white-space: nowrap;
    transition: all 0.2s;
}
.pub-btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
}
@media (max-width: 640px) {
    .pub-cookie-banner {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 14px 16px;
    }
    .pub-cookie-actions {
        width: 100%;
        justify-content: center;
    }
}

/* ── Contact Channels Strip ── */
.pub-contact-channels {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 1.5rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}
.pub-contact-channel {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text, #1a1a1a);
    transition: color 0.2s;
}
a.pub-contact-channel:hover { color: var(--primary, #2563eb); }
.pub-contact-channel-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary, #2563eb);
}
.pub-contact-channel-icon svg { width: 20px; height: 20px; }
.pub-contact-channel-info { display: flex; flex-direction: column; gap: 1px; }
.pub-contact-channel-info strong { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.pub-contact-channel-info span:last-child { font-size: 13px; color: #64748b; }

/* ── Contact Form & Side Panel Layout ── */
.pub-contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
@media (max-width: 768px) {
    .pub-contact-layout { grid-template-columns: 1fr; }
}

/* Left panel: form */
.pub-contact-form-panel h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}
.pub-contact-intro {
    color: #64748b;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.pub-contact-form { margin-top: 0; }
.pub-contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 520px) {
    .pub-contact-form-row { grid-template-columns: 1fr; }
}
.pub-contact-field {
    margin-bottom: 1rem;
}
.pub-contact-field label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--text, #1a1a1a);
}
.pub-contact-optional {
    font-weight: 400;
    color: #94a3b8;
}
.pub-contact-submit {
    width: 100%;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 700;
    margin-top: 0.5rem;
}

/* Inputs */
.pub-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 15px;
    background: #fff;
    color: var(--text);
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.pub-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.pub-input::placeholder { color: #94a3b8; }

/* Success message */
.pub-contact-success {
    background: #dcfce7;
    color: #166534;
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 1.25rem;
    font-size: 14.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}
.pub-contact-success svg { flex-shrink: 0; color: #16a34a; }

/* Right panel: map + info card */
.pub-contact-side-panel {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.pub-contact-map {
    border-radius: 12px;
    overflow: hidden;
    min-height: 260px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.pub-contact-map iframe { display: block; }
.pub-contact-map-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    background: #f1f5f9;
    border-radius: 12px;
    color: #94a3b8;
    gap: 12px;
    text-align: center;
    font-size: 14px;
}
.pub-contact-map-placeholder svg { opacity: 0.5; }
.pub-contact-map-placeholder p { margin: 0; }
.pub-contact-info-card {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.pub-contact-info-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.pub-contact-info-row svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--primary, #2563eb);
}
.pub-contact-info-row strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 2px;
}
.pub-contact-info-row p {
    font-size: 14px;
    color: #475569;
    margin: 0;
    line-height: 1.5;
}
.pub-contact-info-row a { color: var(--primary, #2563eb); text-decoration: none; }
.pub-contact-info-row a:hover { text-decoration: underline; }

/* Legacy compat — old .pub-map-container still used by other templates */
.pub-map-container {
    border-radius: 8px;
    overflow: hidden;
    min-height: 300px;
}
.pub-map-container iframe { display: block; }

/* Legacy compat — old .form-group from other sections */
.pub-contact-form .form-group { margin-bottom: 16px; }
.pub-contact-form .form-group label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 14px;
}

/* ── GLightbox overrides (Growth+) ── */
.gslide-description:not(:has(p)) { display: none !important; }
.gslide-description p:empty { display: none; }

/* ── Lightbox ── */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.lightbox-img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
    -webkit-user-select: none;
    user-select: none;
}
.lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 36px;
    cursor: pointer;
    line-height: 1;
    z-index: 10;
    padding: 4px 8px;
}
.lightbox-close:hover { color: #f59e0b; }
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    padding: 8px 16px;
    border-radius: 4px;
    z-index: 10;
    line-height: 1;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-caption {
    color: #e2e8f0;
    font-size: 15px;
    margin-top: 12px;
    text-align: center;
    max-width: 80vw;
}
@media (max-width: 640px) {
    .lightbox-nav { font-size: 28px; padding: 6px 12px; }
    .lightbox-close { font-size: 28px; top: 10px; right: 12px; }
}

/* ── Video Embed ── */
/* Video layout: Full Width (default) */
.pub-section-video { padding: 0 !important; }
.pub-section-video .pub-container { max-width: none !important; padding: 0 !important; }
.pub-section-video .pub-container > .pub-reveal:not(.pub-video-wrapper) { padding: 40px 24px 12px; max-width: 1100px; margin: 0 auto; }
/* Video layout: Contained */
.pub-video-contained.pub-section-video { padding: 80px 0 !important; }
.pub-video-contained.pub-section-video .pub-container { max-width: 1100px !important; padding: 0 24px !important; }
.pub-video-contained.pub-section-video .pub-container > .pub-reveal:not(.pub-video-wrapper) { padding: 0 0 12px; }
.pub-video-contained .pub-video-wrapper { border-radius: 12px; }
.pub-video-contained .pub-video-caption { padding: 12px 0 0; }
.pub-video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.pub-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.pub-video-4x3 { padding-bottom: 75%; }
.pub-video-1x1 { padding-bottom: 100%; }
.pub-video-21x9 { padding-bottom: 42.86%; }
.pub-video-caption {
    text-align: center;
    font-size: 14px;
    color: #64748b;
    padding: 12px 24px 40px;
    max-width: 1100px;
    margin: 0 auto;
}

/* ── Image Carousel ── */
.pub-carousel {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin-top: 16px;
}
.pub-carousel-track {
    display: flex;
    transition: transform 0.4s ease;
}
.pub-carousel-slide {
    min-width: 100%;
    position: relative;
    flex-shrink: 0;
}
.pub-carousel-slide img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}
.pub-carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
}
.pub-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    color: #fff;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 2;
}
.pub-carousel-arrow:hover { background: rgba(0,0,0,0.7); }
.pub-carousel-arrow:focus-visible { outline: 2px solid var(--primary, #2563eb); outline-offset: 2px; }
.pub-carousel-prev { left: 12px; }
.pub-carousel-next { right: 12px; }
.pub-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 14px 0 4px;
}
.pub-carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--primary, #2563eb);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}
.pub-carousel-dot.active { background: var(--primary, #2563eb); }
.pub-carousel-dot:hover { background: var(--primary, #2563eb); opacity: 0.7; }
.pub-carousel-dot:focus-visible { outline: 2px solid var(--primary, #2563eb); outline-offset: 2px; }
/* Fade transition */
.pub-carousel-fade .pub-carousel-track { transform: none !important; }
.pub-carousel-fade .pub-carousel-slide {
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.pub-carousel-fade .pub-carousel-slide.active { position: relative; opacity: 1; }
@media (max-width: 640px) {
    .pub-carousel-slide img { height: 260px; }
    .pub-carousel-arrow { width: 34px; height: 34px; font-size: 15px; }
}

/* ── Amenities Grid ── */
.pub-amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px;
    margin-top: 16px;
}
.pub-amenity-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 16px 8px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.6);
    transition: transform 0.15s, box-shadow 0.15s;
}
.pub-amenity-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.pub-amenity-icon {
    width: 32px;
    height: 32px;
    color: var(--primary);
}
.pub-amenity-icon svg {
    width: 100%;
    height: 100%;
}
.pub-amenity-item span {
    font-size: 13px;
    font-weight: 500;
}
@media (max-width: 640px) {
    .pub-amenities-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .pub-amenity-item { padding: 12px 6px; }
}

/* ── WhatsApp Floating Button ── */
.pub-whatsapp-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9980;
    width: 56px;
    height: 56px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
}
.pub-whatsapp-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
@media (max-width: 640px) {
    .pub-whatsapp-btn { bottom: 16px; right: 16px; width: 48px; height: 48px; }
    .pub-whatsapp-btn svg { width: 24px; height: 24px; }
}

/* ── Area Guide Public ── */
.pub-area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.pub-area-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.pub-area-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.pub-area-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    cursor: pointer;
}
.pub-area-info {
    padding: 16px;
}
.pub-area-info h3 {
    margin: 0 0 6px;
    font-size: 1.1rem;
}
.pub-area-info p {
    font-size: 14px;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 8px;
}
.pub-area-address {
    font-size: 13px !important;
    color: #94a3b8 !important;
}
.pub-area-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}
@media (max-width: 640px) {
    .pub-area-grid { grid-template-columns: 1fr; }
}

/* ── Reviews Public ── */
.pub-reviews-list {
    display: grid;
    gap: 16px;
}
.pub-review-card {
    background: #f8fafc;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

/* ================================= */
/* 9. SCROLL REVEAL ANIMATIONS       */
/* ================================= */

/* Only hide elements once JS signals it has set up the observer.
   This prevents invisible gaps on first paint before JS runs. */
.js-reveal-ready .pub-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
/* Elements already in viewport on load — reveal instantly, no animation */
.js-reveal-ready .pub-reveal.revealed-instant {
    opacity: 1;
    transform: translateY(0);
    transition: none;
}
.pub-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children for grid items */
.js-reveal-ready .pub-reveal-stagger > * {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.js-reveal-ready .pub-reveal-stagger.revealed-instant > * {
    opacity: 1;
    transform: translateY(0);
    transition: none;
}
.pub-reveal-stagger.revealed > * {
    opacity: 1;
    transform: translateY(0);
}
.pub-reveal-stagger.revealed > *:nth-child(1) { transition-delay: 0.05s; }
.pub-reveal-stagger.revealed > *:nth-child(2) { transition-delay: 0.12s; }
.pub-reveal-stagger.revealed > *:nth-child(3) { transition-delay: 0.19s; }
.pub-reveal-stagger.revealed > *:nth-child(4) { transition-delay: 0.26s; }
.pub-reveal-stagger.revealed > *:nth-child(5) { transition-delay: 0.33s; }
.pub-reveal-stagger.revealed > *:nth-child(6) { transition-delay: 0.40s; }

/* Accessibility: respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .pub-reveal,
    .js-reveal-ready .pub-reveal,
    .pub-reveal-stagger > *,
    .js-reveal-ready .pub-reveal-stagger > *,
    [class*="reveal-"] .js-reveal-ready .pub-reveal,
    [class*="reveal-"] .js-reveal-ready .pub-reveal-stagger > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .pub-carousel-track { transition: none; }
    /* Overlay: disable clip-path and stagger animations */
    .pub-overlay-menu { transition: opacity 0.01s; clip-path: none; }
    .pub-overlay-menu:not(.open) { opacity: 0; visibility: hidden; }
    .pub-overlay-menu.open { opacity: 1; visibility: visible; }
    .pub-overlay-nav a { transition-delay: 0s !important; transition: opacity 0.01s; }
    .pub-overlay-cta, .pub-overlay-logout { transition-delay: 0s !important; transition: opacity 0.01s; }
    /* Bubble: disable transitions and tilt */
    .pub-bubble-dropdown { transition: none; }
    .pub-bubble-trigger { transition: none; will-change: auto; }
    /* Dock: disable slide panel and stagger animations */
    .pub-dock-panel { transition: none; }
    .pub-dock-panel-nav a { transition-delay: 0s !important; transition: none; }
    .pub-dock-overlay { transition: none; }
}

/* ================================= */
/* 10. SAMPLE ROOM NOTICE            */
/* ================================= */

.pub-sample-room-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #92400e;
    margin-bottom: 20px;
}
.pub-sample-room-notice a { color: #b45309; font-weight: 600; }
.pub-room-card--sample { opacity: 0.85; }
.pub-room-sample-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #f59e0b;
    color: #fff;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    z-index: 2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.pub-btn-room--sample { pointer-events: none; }

/* ── Room Card Style Variants ── */
.pub-room-card--minimal {
    box-shadow: none;
    border: none;
}
.pub-room-card--minimal:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.pub-room-card--bordered {
    box-shadow: none;
    border: 1px solid #e2e8f0;
}
.pub-room-card--bordered:hover {
    box-shadow: none;
    border-color: var(--primary, #2563eb);
}
.pub-room-card--overlay {
    position: relative;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.pub-room-card--overlay .pub-room-image {
    height: 100%;
    min-height: 280px;
}
.pub-room-card--overlay .pub-room-image img {
    height: 100%;
    min-height: 280px;
}
.pub-room-card--overlay .pub-room-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    color: #fff;
    padding: 24px 20px 20px;
    z-index: 2;
}
.pub-room-card--overlay .pub-room-info h3 { color: #fff; }
.pub-room-card--overlay .pub-room-info p { color: rgba(255,255,255,0.8); }
.pub-room-card--overlay .pub-room-meta { border-top-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.7); }
.pub-room-card--overlay .pub-room-occupancy { color: rgba(255,255,255,0.7); }
.pub-room-card--overlay .pub-room-occupancy svg { stroke: rgba(255,255,255,0.7); }
.pub-room-card--overlay .pub-room-image::after { display: none; }
.pub-room-card--overlay .pub-btn-room {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.pub-room-card--overlay .pub-btn-room:hover {
    background: rgba(255,255,255,0.3);
}
.pub-room-card--overlay .pub-room-badge {
    z-index: 3;
}
@media (max-width: 768px) {
    .pub-room-card--overlay .pub-room-image,
    .pub-room-card--overlay .pub-room-image img {
        min-height: 200px;
    }
}

.pub-room-card--horizontal {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.pub-room-card--horizontal .pub-room-image {
    height: 100%;
}
.pub-room-card--horizontal .pub-room-image img {
    height: 100%;
    min-height: 220px;
}
.pub-room-card--horizontal .pub-room-image::after { display: none; }
.pub-room-card--horizontal .pub-room-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (max-width: 768px) {
    .pub-room-card--horizontal {
        grid-template-columns: 1fr;
    }
    .pub-room-card--horizontal .pub-room-image img {
        height: 200px;
        min-height: 0;
    }
}

/* ── Room Image Aspect Ratios ── */
.pub-room-img--square {
    height: auto !important;
    aspect-ratio: 1 / 1;
}
.pub-room-img--portrait {
    height: auto !important;
    aspect-ratio: 3 / 4;
}
.pub-room-img--short {
    height: 160px !important;
}

/* ── Room Card Hover Effects ── */
.pub-room-card.pub-room-hover--none:hover {
    transform: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.pub-room-card.pub-room-hover--none:hover .pub-room-image img {
    transform: none;
}
.pub-room-card.pub-room-hover--glow:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 30px rgba(var(--primary-rgb, 37, 99, 235), 0.25), 0 8px 24px rgba(0, 0, 0, 0.1);
}
.pub-room-card.pub-room-hover--zoom:hover {
    transform: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.pub-room-card.pub-room-hover--zoom:hover .pub-room-image img {
    transform: scale(1.12);
}
.pub-room-card.pub-room-hover--darken {
    position: relative;
}
.pub-room-card.pub-room-hover--darken .pub-room-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.4s ease;
    z-index: 1;
    pointer-events: none;
}
.pub-room-card.pub-room-hover--darken:hover .pub-room-image::before {
    background: rgba(0,0,0,0.25);
}
.pub-room-card.pub-room-hover--darken:hover .pub-room-image img {
    transform: none;
}

/* ================================= */
/* 11. NAV ADMIN BUTTON              */
/* ================================= */

.pub-nav-admin-btn {
    font-size: 12px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: var(--login-btn-radius, 6px);
    text-decoration: none;
    background: var(--login-btn-bg, rgba(0,0,0,0.05));
    color: var(--login-btn-color, var(--text, #1a1a1a));
    border: 1px solid var(--login-btn-border, rgba(0,0,0,0.08));
    transition: background 0.2s;
    opacity: 0.7;
    white-space: nowrap;
}
.pub-nav-admin-btn:hover { opacity: 1; background: rgba(0,0,0,0.09); }
.pub-nav-admin-icon { display: inline-block; vertical-align: -2px; margin-right: 3px; }
.pub-nav-logout-form { display: inline; }
.pub-nav-admin-btn--out {
    background: none;
    border: 1px solid rgba(0,0,0,0.12);
    cursor: pointer;
    font-family: var(--font-body);
}
.nav-transparent .pub-nav-admin-btn,
.nav-transparent:not(.scrolled) .pub-nav-admin-btn {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: rgba(255,255,255,0.2);
}

/* ── Nav Contact Info ── */
.pub-nav-contact {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-left: 6px;
    padding-left: 10px;
    border-left: 1px solid rgba(0,0,0,0.1);
}
.pub-nav-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--nav-text, var(--text, #1a1a1a));
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s;
    white-space: nowrap;
}
.pub-nav-contact-link:hover { opacity: 1; }
.pub-nav-contact-link svg { flex-shrink: 0; }
/* Transparent nav: white contact links */
.nav-transparent:not(.scrolled) .pub-nav-contact { border-left-color: rgba(255,255,255,0.2); }
.nav-transparent:not(.scrolled) .pub-nav-contact-link { color: #fff; }
.nav-transparent.scrolled .pub-nav-contact-link { color: var(--nav-text, var(--text, #1a1a1a)); }
/* Dark nav */
.nav-dark .pub-nav-contact { border-left-color: rgba(255,255,255,0.15); }
.nav-dark .pub-nav-contact-link { color: var(--nav-text, rgba(241,245,249,0.8)); }
.nav-dark .pub-nav-contact-link:hover { color: #f1f5f9; opacity: 1; }
/* Glass nav */
.nav-glass .pub-nav-contact { border-left-color: rgba(0,0,0,0.08); }
/* Split nav — inside right section */
.nav-split .pub-nav-contact { border-left: none; padding-left: 0; margin-left: 0; }
/* Overlay menu — stacked layout */
.pub-overlay-menu .pub-nav-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 20px 0 0;
    padding: 20px 0 0;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.12);
}
.pub-overlay-menu .pub-nav-contact-link {
    color: var(--nav-text, rgba(255,255,255,0.7));
    font-size: 15px;
}
.pub-overlay-menu .pub-nav-contact-link:hover { color: var(--nav-hover-color, #fff); opacity: 1; }

/* ================================= */
/* 12. FOOTER IMPROVEMENTS           */
/* ================================= */

.pub-footer-social-heading {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
    margin-bottom: 10px;
}
.pub-footer-tagline { color: var(--footer-muted, #64748b); margin-bottom: 6px; font-size: 0.9rem; line-height: 1.5; }
.pub-footer-copy { color: #94a3b8; font-size: 13px; }

/* ================================= */
/* 13. SECTION SUBTITLE              */
/* ================================= */

.pub-section-subtitle {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.65;
    max-width: 640px;
    margin-top: 0.5rem;
}
/* When user sets inline color on subtitle, force children to inherit — but skip elements with their own Quill inline color */
.pub-section-subtitle[style*="color"] p:not([style*="color"]),
.pub-section-subtitle[style*="color"] span:not([style*="color"]),
.pub-section-subtitle[style*="color"] li:not([style*="color"]),
.pub-section-subtitle[style*="color"] h1:not([style*="color"]),
.pub-section-subtitle[style*="color"] h2:not([style*="color"]),
.pub-section-subtitle[style*="color"] h3:not([style*="color"]),
.pub-section-subtitle[style*="color"] h4:not([style*="color"]),
.pub-section-subtitle[style*="color"] h5:not([style*="color"]),
.pub-section-subtitle[style*="color"] h6:not([style*="color"]),
.pub-section-subtitle[style*="color"] a:not([style*="color"]) { color: inherit !important; }
/* When user sets inline font-size on section title */
h2[style*="font-size"] { line-height: 1.2; }
.pub-section-header { margin-bottom: 2rem; }

/* ================================= */
/* 14. SECTION BACKGROUNDS (dark/accent) */
/* ================================= */

/* Dark sections */
.pub-section-dark {
    background: #0f172a;
    color: #e2e8f0;
}
.pub-section-dark h1,
.pub-section-dark h2,
.pub-section-dark h3,
.pub-section-dark h4 { color: #f8fafc; }
.pub-section-dark p,
.pub-section-dark li { color: #cbd5e1; }
.pub-section-dark .pub-section-subtitle { color: #94a3b8; }
.pub-section-dark .pub-section-tag { color: #93c5fd; }

/* Accent sections */
.pub-section-accent {
    background: linear-gradient(135deg, var(--primary, #2563eb) 0%, #1e40af 100%);
    color: #fff;
}
.pub-section-accent h1,
.pub-section-accent h2,
.pub-section-accent h3 { color: #fff; }
.pub-section-accent p,
.pub-section-accent li { color: rgba(255,255,255,0.88); }
.pub-section-accent .pub-section-subtitle { color: rgba(255,255,255,0.75); }
.pub-section-accent .pub-section-tag { color: rgba(255,255,255,0.6); }

/* Custom/gradient light text */
.pub-section-light-text { color: #f1f5f9; }
.pub-section-light-text h1,
.pub-section-light-text h2,
.pub-section-light-text h3 { color: #fff; }
.pub-section-light-text p,
.pub-section-light-text li { color: #e2e8f0; }
.pub-section-light-text .pub-section-subtitle { color: rgba(255,255,255,0.75); }
.pub-section-light-text .pub-section-tag { color: rgba(255,255,255,0.6); }
.pub-section-light-text .pub-stat-number { color: #fff; }
.pub-section-light-text .pub-stat-label { color: #cbd5e1; }
.pub-section-light-text .pub-card { background: rgba(255,255,255,0.95); color: #1a1a1a; }
.pub-section-light-text .pub-card h3,
.pub-section-light-text .pub-card p { color: inherit; }
.pub-section-light-text a:not(.pub-btn) { color: #93c5fd; }

/* ── Section Background Image ── */
.pub-section-bg-image {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.pub-section-bg-image > .pub-container {
    position: relative;
    z-index: 1;
}

/* ================================= */
/* 14. HERO BADGE                    */
/* ================================= */

.pub-hero-badge {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 100px;
    background: rgba(255,255,255,0.15);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* Badge style variants (user-selected — !important to override template base) */
.pub-hero-badge--solid {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: none !important;
    background: rgba(255,255,255,0.92) !important;
    color: #1a1a2e !important;
}
.pub-hero-badge--outline {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 2px solid currentColor !important;
}
.pub-hero-badge--tag {
    border-radius: 6px !important;
    background: rgba(255,255,255,0.10) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    padding: 5px 14px !important;
}

/* Badge sizes */
.pub-hero-badge--sm {
    padding: 4px 12px !important;
    font-size: 0.68rem !important;
}
.pub-hero-badge--lg {
    padding: 10px 26px !important;
    font-size: 0.92rem !important;
}

/* ================================= */
/* 15. STATS SECTION                 */
/* ================================= */

.pub-stats { width: 100%; }
.pub-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
    text-align: center;
}
.pub-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}
.pub-stat-number {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    color: var(--primary, #2563eb);
}
.pub-section-dark .pub-stat-number,
.pub-section-accent .pub-stat-number { color: #fff; }
.pub-stat-label {
    font-size: 0.875rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
}
.pub-section-dark .pub-stat-label { color: #94a3b8; }
.pub-section-accent .pub-stat-label { color: rgba(255,255,255,0.75); }

/* ================================= */
/* 16. FOOTER GRID                   */
/* ================================= */

.pub-footer-brand-link { text-decoration: none; }
.pub-footer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3rem;
    padding: 4rem 0 3rem;
}
/* Dynamic footer column counts (Growth+ footer customizer) */
.pub-footer-cols-2 { grid-template-columns: 1fr 1fr; }
.pub-footer-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.pub-footer-cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 768px) {
    .pub-footer-inner,
    .pub-footer-cols-2,
    .pub-footer-cols-3,
    .pub-footer-cols-4 {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 3rem 0 2rem;
        text-align: center;
    }
}
.pub-footer-custom-text p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--footer-text, var(--text, #1a1a1a));
    opacity: 0.85;
}
.pub-footer-logo { max-height: 40px; width: auto; display: block; }
@media (max-width: 768px) {
    .pub-footer-logo { margin: 0 auto; }
    .pub-footer-social { justify-content: center; }
}
.pub-footer-name {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--footer-text, var(--text, #1a1a1a));
}
.pub-footer-col-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--footer-muted, #9ca3af);
    margin-bottom: 1rem;
}
.pub-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.pub-footer-link {
    font-size: 0.9rem;
    color: var(--footer-text, #374151);
    text-decoration: none;
    transition: color 0.2s;
}
.pub-footer-link:hover { color: var(--primary, #2563eb); }
.pub-footer-address {
    font-size: 0.875rem;
    color: var(--footer-muted, #6b7280);
    line-height: 1.6;
}
.pub-footer-social {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}
.pub-footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--footer-social-bg, rgba(0,0,0,0.06));
    color: var(--footer-muted, #6b7280);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}
.pub-footer-social-link:hover {
    background: var(--primary, #2563eb);
    color: #fff;
}
/* Mobile accordion — only on columns marked .ftr-collapsible */
@media (max-width: 768px) {
    .ftr-collapsible .pub-footer-col-title {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--footer-border, rgba(255,255,255,0.07));
    }
    .ftr-collapsible .pub-footer-col-title::after {
        content: '+';
        font-size: 1.1rem;
        font-weight: 400;
        opacity: 0.5;
    }
    .ftr-collapsible .pub-footer-col-title.ftr-open::after {
        content: '−';
    }
    .ftr-collapsible .pub-footer-col-title + .pub-footer-links {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .ftr-collapsible .pub-footer-col-title.ftr-open + .pub-footer-links {
        max-height: 500px;
    }
}

.pub-footer-bottom {
    padding: 1.2rem 0;
    border-top: 1px solid var(--footer-border, rgba(255,255,255,0.07));
    margin-top: 0.5rem;
}
.pub-footer-bottom .pub-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.pub-footer-legal {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
}
.pub-footer-legal-link {
    font-size: 0.8rem;
    color: var(--footer-muted, #9ca3af);
    text-decoration: none;
    transition: color 0.2s;
}
.pub-footer-legal-link:hover { color: var(--primary, #2563eb); }
@media (max-width: 768px) {
    .pub-footer-bottom .pub-container {
        flex-direction: column;
        text-align: center;
    }
    .pub-footer-legal {
        justify-content: center;
    }
}

/* ================================= */
/* 17. FEATURE CARDS SECTION         */
/* ================================= */

.pub-feature-cards { width: 100%; }
.pub-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 0;
}
.pub-card {
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 2rem;
    transition:
        transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 0.3s ease;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.pub-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}
.pub-card-body { display: flex; flex-direction: column; flex: 1; }
.pub-card-icon { width: 40px; height: 40px; margin-bottom: 12px; color: var(--primary, #2563eb); }
.pub-card-icon svg { width: 100%; height: 100%; }
.pub-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.6rem;
    color: var(--text, #1a1a1a);
}
.pub-card-text {
    font-size: 0.9rem;
    line-height: 1.65;
    color: #475569;
    margin-bottom: 1.25rem;
    flex-grow: 1;
}
.pub-card-btn { font-size: 14px; }
.pub-card-image {
    margin-top: 1.25rem;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}
.pub-card-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.pub-card:hover .pub-card-image img { transform: scale(1.04); }

/* Card colour presets */
.pub-card--cream    { background: #fef9ee; }
.pub-card--mint     { background: #edfaf4; }
.pub-card--sky      { background: #edf5ff; }
.pub-card--rose     { background: #fff0f3; }
.pub-card--lavender { background: #f3f0ff; }
.pub-card--slate    { background: #f1f5f9; }

/* Cards on dark sections — white cards for contrast */
.pub-section-dark .pub-card,
.pub-section-accent .pub-card { background: rgba(255,255,255,0.95); }

/* ── Card Style: Flat — no shadow, no border, clean look ── */
[class*="tpl-"] .pub-cards--flat .pub-card,
.pub-cards--flat .pub-card {
    box-shadow: none !important;
    border: none !important;
}

/* ── Card Style: Bordered — transparent bg with visible border ── */
[class*="tpl-"] .pub-cards--bordered .pub-card,
.pub-cards--bordered .pub-card {
    background: transparent !important;
    box-shadow: none !important;
    border: 1px solid #e2e8f0 !important;
}
[class*="tpl-"] .pub-cards--bordered .pub-card:hover,
.pub-cards--bordered .pub-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important; }
.pub-cards--bordered .pub-card--cream    { border-color: #f5deb3 !important; }
.pub-cards--bordered .pub-card--mint     { border-color: #a7f3d0 !important; }
.pub-cards--bordered .pub-card--sky      { border-color: #bfdbfe !important; }
.pub-cards--bordered .pub-card--rose     { border-color: #fecdd3 !important; }
.pub-cards--bordered .pub-card--lavender { border-color: #c4b5fd !important; }
.pub-cards--bordered .pub-card--slate    { border-color: #cbd5e1 !important; }
/* Bordered on dark sections */
[class*="tpl-"] .pub-section-dark .pub-cards--bordered .pub-card,
.pub-section-dark .pub-cards--bordered .pub-card { border-color: rgba(255,255,255,0.2) !important; }

/* ── Card Style: Minimal — no bg, no shadow, no border ── */
[class*="tpl-"] .pub-cards--minimal .pub-card,
.pub-cards--minimal .pub-card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 1.5rem 0.5rem;
}
[class*="tpl-"] .pub-cards--minimal .pub-card:hover,
.pub-cards--minimal .pub-card:hover { box-shadow: none !important; }

/* ── Card Style: Glass — Apple-style frosted glassmorphism ── */
[class*="tpl-"] .pub-cards--glass .pub-card,
.pub-cards--glass .pub-card {
    position: relative !important;
    overflow: hidden !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    border-top-color: rgba(255,255,255,0.6) !important;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.25) !important;
    transition:
        transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 0.4s ease,
        background 0.3s ease,
        border-color 0.3s ease !important;
}
/* Specular shine — diagonal light reflection across surface */
[class*="tpl-"] .pub-cards--glass .pub-card::before,
.pub-cards--glass .pub-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.25) 0%,
        rgba(255,255,255,0.05) 30%,
        transparent 50%,
        rgba(255,255,255,0.03) 80%,
        rgba(255,255,255,0.10) 100%
    ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
/* Glass card content must sit above ::before shine overlay (z-index:1) */
.pub-cards--glass .pub-card-body,
.pub-cards--glass .pub-card-image {
    position: relative;
    z-index: 2;
}
/* Default glass bg — frosted white when no color set */
.pub-cards--glass .pub-card:not([style*="background"]) {
    background: rgba(255,255,255,0.40) !important;
}
/* Hover — lift + brighter glow */
[class*="tpl-"] .pub-cards--glass .pub-card:hover,
.pub-cards--glass .pub-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(255,255,255,0.5) !important;
    box-shadow:
        0 16px 48px rgba(0,0,0,0.16),
        inset 0 1px 0 rgba(255,255,255,0.35),
        0 0 0 1px rgba(255,255,255,0.1) !important;
}
/* Glass + legacy colour presets */
.pub-cards--glass .pub-card--cream:not([style*="background"])    { background: rgba(254,249,238,0.50) !important; }
.pub-cards--glass .pub-card--mint:not([style*="background"])     { background: rgba(237,250,244,0.50) !important; }
.pub-cards--glass .pub-card--sky:not([style*="background"])      { background: rgba(237,245,255,0.50) !important; }
.pub-cards--glass .pub-card--rose:not([style*="background"])     { background: rgba(255,240,243,0.50) !important; }
.pub-cards--glass .pub-card--lavender:not([style*="background"]) { background: rgba(243,240,255,0.50) !important; }
.pub-cards--glass .pub-card--slate:not([style*="background"])    { background: rgba(241,245,249,0.50) !important; }
/* Glass on dark sections */
[class*="tpl-"] .pub-section-dark .pub-cards--glass .pub-card:not([style*="background"]),
.pub-section-dark .pub-cards--glass .pub-card:not([style*="background"]) {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.15) !important;
    border-top-color: rgba(255,255,255,0.25) !important;
}
[class*="tpl-"] .pub-section-dark .pub-cards--glass .pub-card,
.pub-section-dark .pub-cards--glass .pub-card {
    box-shadow:
        0 8px 32px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
[class*="tpl-"] .pub-section-dark .pub-cards--glass .pub-card:hover,
.pub-section-dark .pub-cards--glass .pub-card:hover {
    box-shadow:
        0 16px 48px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(255,255,255,0.15),
        0 0 24px rgba(255,255,255,0.04) !important;
}

/* ── Card Gap/Spacing ── */
.pub-cards-gap--compact { gap: 12px !important; }
.pub-cards-gap--loose   { gap: 36px !important; }
.pub-cards-gap--none    { gap: 0 !important; }

/* ── Card Hover: Scale — override all templates ── */
[class*="tpl-"] .pub-cards-hover--scale .pub-card:hover,
.pub-cards-hover--scale .pub-card:hover {
    transform: scale(1.03) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.10) !important;
}
/* ── Card Hover: Glow — override all templates ── */
[class*="tpl-"] .pub-cards-hover--glow .pub-card:hover,
.pub-cards-hover--glow .pub-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 0 0 2px var(--primary, #2563eb), 0 8px 24px rgba(0,0,0,0.08) !important;
}
/* ── Card Hover: None — disable hover by killing pointer-events on cards ── */
.pub-cards-hover--none .pub-card,
[class*="tpl-"] .pub-cards-hover--none .pub-card {
    pointer-events: none !important;
    transition: none !important;
}
/* Re-enable clicks on interactive children inside the card */
.pub-cards-hover--none .pub-card a,
.pub-cards-hover--none .pub-card button,
.pub-cards-hover--none .pub-card input,
.pub-cards-hover--none .pub-card [onclick],
.pub-cards-hover--none .pub-card .pub-card-btn,
.pub-cards-hover--none .pub-card .pub-card-image {
    pointer-events: auto !important;
}

/* ── Icon Style: Circle background ── */
.pub-cards-icon--circle .pub-card-icon {
    width: 48px !important; height: 48px !important;
    background: color-mix(in srgb, var(--primary, #2563eb) 12%, transparent) !important;
    border-radius: 50% !important;
    display: flex !important; align-items: center; justify-content: center;
    padding: 10px !important;
    border: none !important;
}
/* ── Icon Style: Rounded square background ── */
.pub-cards-icon--rounded-square .pub-card-icon {
    width: 48px !important; height: 48px !important;
    background: color-mix(in srgb, var(--primary, #2563eb) 12%, transparent) !important;
    border-radius: 10px !important;
    display: flex !important; align-items: center; justify-content: center;
    padding: 10px !important;
    border: none !important;
}
/* ── Icon Style: Outlined circle ── */
.pub-cards-icon--outlined .pub-card-icon {
    width: 48px !important; height: 48px !important;
    border: 1.5px solid var(--primary, #2563eb) !important;
    border-radius: 50% !important;
    display: flex !important; align-items: center; justify-content: center;
    padding: 10px !important;
    background: transparent !important;
}

/* ── Card Border Radius — override all templates ── */
[class*="tpl-"] .pub-cards-radius--sharp .pub-card,
.pub-cards-radius--sharp .pub-card   { border-radius: 0 !important; }
[class*="tpl-"] .pub-cards-radius--sharp .pub-card-image,
.pub-cards-radius--sharp .pub-card-image { border-radius: 0 !important; }
[class*="tpl-"] .pub-cards-radius--small .pub-card,
.pub-cards-radius--small .pub-card   { border-radius: 8px !important; }
[class*="tpl-"] .pub-cards-radius--small .pub-card-image,
.pub-cards-radius--small .pub-card-image { border-radius: 6px !important; }
[class*="tpl-"] .pub-cards-radius--medium .pub-card,
.pub-cards-radius--medium .pub-card  { border-radius: 24px !important; }
[class*="tpl-"] .pub-cards-radius--medium .pub-card-image,
.pub-cards-radius--medium .pub-card-image { border-radius: 16px !important; }
[class*="tpl-"] .pub-cards-radius--large .pub-card,
.pub-cards-radius--large .pub-card   { border-radius: 32px !important; }
[class*="tpl-"] .pub-cards-radius--large .pub-card-image,
.pub-cards-radius--large .pub-card-image { border-radius: 20px !important; }

/* ── Card Image Ratio — override all templates ── */
[class*="tpl-"] .pub-cards-ratio--square .pub-card-image img,
.pub-cards-ratio--square .pub-card-image img    { height: auto !important; aspect-ratio: 1 / 1 !important; object-fit: cover; }
[class*="tpl-"] .pub-cards-ratio--landscape .pub-card-image img,
.pub-cards-ratio--landscape .pub-card-image img { height: auto !important; aspect-ratio: 4 / 3 !important; object-fit: cover; }
[class*="tpl-"] .pub-cards-ratio--wide .pub-card-image img,
.pub-cards-ratio--wide .pub-card-image img      { height: auto !important; aspect-ratio: 16 / 9 !important; object-fit: cover; }

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

/* ═══════════════════════════════════ */
/* 17. SECTION LAYOUT OVERRIDES       */
/* ═══════════════════════════════════ */
/* User-chosen column counts via editor "Columns" dropdown.
   Applied as .pub-layout-{N}col on grid containers.
   Uses !important to override default auto-fit/auto-fill rules. */

.pub-layout-1col { grid-template-columns: 1fr !important; max-width: 640px; margin-inline: auto; }
.pub-layout-2col { grid-template-columns: repeat(2, 1fr) !important; }
.pub-layout-3col { grid-template-columns: repeat(3, 1fr) !important; }
.pub-layout-4col { grid-template-columns: repeat(4, 1fr) !important; }
.pub-layout-5col { grid-template-columns: repeat(5, 1fr) !important; }
.pub-layout-6col { grid-template-columns: repeat(6, 1fr) !important; }

/* Responsive: gracefully collapse to fewer columns */
@media (max-width: 1024px) {
    .pub-layout-4col,
    .pub-layout-5col,
    .pub-layout-6col { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
    .pub-layout-3col,
    .pub-layout-4col,
    .pub-layout-5col,
    .pub-layout-6col { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .pub-layout-2col,
    .pub-layout-3col,
    .pub-layout-4col,
    .pub-layout-5col,
    .pub-layout-6col { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════ */
/* 18. SCROLL EFFECTS (Growth+)       */
/* ═══════════════════════════════════ */

/* 18a. Sticky Hero with Curved Content Overlay
   Hero stays fixed in place while content scrolls up over it
   with curved top corners — a card-sliding-over effect.

   Specificity note: selectors use .pub-section.pub-section-hero (0,3,0)
   to beat template-specific .tpl-X .pub-section rules (0,2,0) that
   would otherwise override position: sticky with position: relative. */

/* Hero stays put behind everything */
.scroll-sticky-hero .pub-section.pub-section-hero {
    position: sticky;
    top: 0;
    z-index: 0;
    height: 100vh;
    overflow: hidden;
}
.scroll-sticky-hero .pub-section.pub-section-hero .pub-container {
    height: 100%;
}
.scroll-sticky-hero .pub-section.pub-section-hero .pub-hero {
    height: 100%;
    min-height: 100vh;
}
/* All sections after the hero rise above it */
.scroll-sticky-hero .pub-section:not(.pub-section-hero) {
    position: relative;
    z-index: 1;
    background: var(--bg, #fff);
    /* Disable ALL template JS section-entrance animations in sticky hero mode.
       Template JS (bold, boutique, classic etc.) sets opacity:0, transform:translateY(20px)
       and transition on sections for entrance effects. This creates gaps between sections
       that reveal the sticky hero behind. Force everything off. */
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    /* Promote to compositing layer to prevent sub-pixel gaps during scroll */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
/* Dark/accent sections keep their backgrounds */
.scroll-sticky-hero .pub-section-dark {
    background: #1a1a2e;
}
.scroll-sticky-hero .pub-section-accent {
    background: var(--accent, #f59e0b);
}
/* First section after hero gets the curved overlay effect */
.scroll-sticky-hero .pub-section-hero + .pub-section {
    border-radius: var(--overlay-radius, 32px) var(--overlay-radius, 32px) 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12);
    margin-top: -40px;
}
/* Footer must also sit above the sticky hero */
.scroll-sticky-hero .pub-footer {
    position: relative;
    z-index: 1;
}
/* Sub-page hero banner (thin) — do not make sticky */
.scroll-sticky-hero .pub-page-hero {
    position: relative;
    z-index: 1;
}

/* 18b. Navbar Transparent on Hero */
.pub-nav-hero-transparent {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.pub-nav-hero-transparent .pub-logo,
.pub-nav-hero-transparent .pub-nav a {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.pub-nav-hero-transparent .pub-nav a.active {
    color: #fff;
    opacity: 0.85;
}
.pub-nav-hero-transparent.pub-nav-scrolled:not(.nav-dock) {
    background: rgba(255, 255, 255, 0.95) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08) !important;
}
.pub-nav-hero-transparent.pub-nav-scrolled .pub-logo,
.pub-nav-hero-transparent.pub-nav-scrolled .pub-nav a {
    color: var(--text, #1a1a1a);
    text-shadow: none;
}

/* 18c. Scroll Progress Indicator */
.pub-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--primary, #2563eb);
    z-index: 9999;
    pointer-events: none;
}

/* 18d. Hero Zoom on Scroll */
.hero-zoom-active .pub-hero img,
.hero-zoom-active .pub-hero video {
    will-change: transform;
}
/* Background-image heroes: zoom the element itself */
.hero-zoom-active .pub-section-hero {
    overflow: hidden;
}
.hero-zoom-active .pub-hero {
    will-change: transform;
    transform-origin: center center;
}

/* 18e. Scroll Snap Pages (Pro) */
.scroll-snap-pages {
    scroll-snap-type: y proximity;
    overflow-y: auto;
    height: 100vh;
}
.scroll-snap-pages .pub-section {
    scroll-snap-align: start;
}
/* Only hero gets forced full-height — other sections flow naturally */
.scroll-snap-pages .pub-section-hero,
.scroll-snap-pages .pub-section-hero .pub-hero {
    min-height: 100vh;
}
/* Short sections: snap to end, keep natural height */
.scroll-snap-pages .pub-section-contact,
.scroll-snap-pages .pub-section-reviews,
.scroll-snap-pages .pub-section-area_guide,
.scroll-snap-pages .pub-footer,
.scroll-snap-pages .pub-cookie-banner {
    scroll-snap-align: end;
    min-height: 0;
}

/* 18f. Smooth Scroll — Lenis overrides */
html:has(.smooth-scroll-active) {
    scroll-behavior: auto;  /* Let Lenis handle it */
}

/* 18g. Parallax Hero Background (Growth+) */
.parallax-hero-active .pub-section-hero {
    overflow: hidden;
}
.parallax-hero-active .pub-hero {
    will-change: transform;
}

/* 18h. Navbar Shrink on Scroll (Growth+) */
.nav-shrink-active .pub-header {
    transition: padding 0.3s ease, box-shadow 0.3s ease;
}
.nav-shrink-active .pub-header.pub-nav-shrunk {
    padding-top: 4px;
    padding-bottom: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.nav-shrink-active .pub-header.pub-nav-shrunk .pub-logo-text {
    transition: font-size 0.3s ease;
    font-size: 0.85em;
}

/* 18i. Back-to-Top Button (Growth+) */
.pub-back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 900;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary, #2563eb);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.pub-back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.pub-back-to-top:hover {
    background: var(--primary-hover, #1d4ed8);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.pub-back-to-top svg {
    width: 20px;
    height: 20px;
}

/* 18j. Section Reveal Style Variants (Growth+) */
/* Default (fade) is already in base reveal rules above */
/* Slide Up — same as default but with more travel */
.reveal-slide_up .js-reveal-ready .pub-reveal {
    transform: translateY(48px);
}
.reveal-slide_up .js-reveal-ready .pub-reveal-stagger > * {
    transform: translateY(40px);
}
.reveal-slide_up .pub-reveal.revealed,
.reveal-slide_up .pub-reveal.revealed-instant,
.reveal-slide_up .pub-reveal-stagger.revealed > *,
.reveal-slide_up .pub-reveal-stagger.revealed-instant > * {
    transform: translateY(0);
}
/* Slide Left — enter from the right */
.reveal-slide_left .js-reveal-ready .pub-reveal {
    transform: translateX(48px);
}
.reveal-slide_left .js-reveal-ready .pub-reveal-stagger > * {
    transform: translateX(40px);
}
.reveal-slide_left .pub-reveal.revealed,
.reveal-slide_left .pub-reveal.revealed-instant,
.reveal-slide_left .pub-reveal-stagger.revealed > *,
.reveal-slide_left .pub-reveal-stagger.revealed-instant > * {
    transform: translateX(0);
}
/* Zoom — scale up from smaller */
.reveal-zoom .js-reveal-ready .pub-reveal {
    transform: scale(0.9);
}
.reveal-zoom .js-reveal-ready .pub-reveal-stagger > * {
    transform: scale(0.9);
}
.reveal-zoom .pub-reveal.revealed,
.reveal-zoom .pub-reveal.revealed-instant,
.reveal-zoom .pub-reveal-stagger.revealed > *,
.reveal-zoom .pub-reveal-stagger.revealed-instant > * {
    transform: scale(1);
}
/* None — disable reveal animations */
.reveal-none .js-reveal-ready .pub-reveal,
.reveal-none .js-reveal-ready .pub-reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
}

/* 18k. Reduced motion — disable all scroll effects */
@media (prefers-reduced-motion: reduce) {
    .scroll-sticky-hero .pub-section-hero {
        position: relative;
        height: auto;
    }
    .scroll-sticky-hero .pub-section-hero + .pub-section {
        border-radius: 0;
        box-shadow: none;
        margin-top: 0;
    }
    .pub-scroll-progress { display: none; }
    .hero-zoom-active .pub-hero,
    .hero-zoom-active .pub-hero img,
    .hero-zoom-active .pub-hero video { will-change: auto; transform: none; }
    .scroll-snap-pages { scroll-snap-type: none; height: auto; }
    .scroll-snap-pages .pub-section { min-height: 0; }
    .parallax-hero-active .pub-hero { will-change: auto; }
    .pub-back-to-top { display: none; }
    .nav-shrink-active .pub-header { transition: none; }
}

/* 18l. Mobile performance — strip backdrop-filter (GPU-heavy) */
@media (max-width: 768px) {
    /* Nav styles that use backdrop-filter — use solid fallback */
    .nav-glass .pub-nav,
    .nav-floating.pub-header,
    .nav-pill .pub-nav,
    .nav-capsule .pub-container,
    .nav-bubble .pub-nav,
    .nav-segmented .pub-container {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    /* Cards, sections, footer glass effects */
    .pub-card,
    .pub-room-card,
    .pub-testimonial,
    .pub-footer,
    .pub-cookie-bar {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* ═══════════════════════════════════ */
/* 19. ANNOUNCEMENT BAR (Growth+)     */
/* ═══════════════════════════════════ */

.pub-announcement-bar {
    position: sticky;
    top: 0;
    z-index: 101;
    text-align: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
}
/* Bottom position variant */
.pub-announcement-bar.announcement-bottom {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}
.pub-announcement-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 40px 8px 16px;
    max-width: 1100px;
    margin: 0 auto;
}
/* No dismiss button — remove right padding reservation */
.pub-announcement-bar.announcement-no-dismiss .pub-announcement-inner {
    padding-right: 16px;
}
.pub-announcement-link {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s;
}
.pub-announcement-link:hover { opacity: 0.85; color: inherit; }
.pub-announcement-content {
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    flex-shrink: 1; min-width: 0;
}
.pub-announcement-link { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.pub-announcement-text { flex-shrink: 1; }
.pub-announcement-subtitle {
    display: block;
    font-weight: 400;
    font-size: 0.82em;
    opacity: 0.88;
}
/* Scrolling ticker mode */
.pub-announcement-bar.announcement-scroll .pub-announcement-inner {
    overflow: hidden;
    flex-wrap: nowrap;
}
.pub-announcement-bar.announcement-scroll .pub-announcement-link,
.pub-announcement-bar.announcement-scroll .pub-announcement-text {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: ann-ticker 12s linear infinite;
}
@keyframes ann-ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-200%); }
}
.pub-announcement-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 26px;
    cursor: pointer;
    opacity: 0.7;
    padding: 4px 10px;
    line-height: 1;
    transition: opacity 0.2s;
}
.pub-announcement-close:hover { opacity: 1; }
/* CTA button inside announcement bar — fully isolated from theme */
.pub-announcement-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
    transition: opacity 0.2s;
    flex-shrink: 0;
}
.pub-announcement-btn:hover { opacity: 0.85; color: inherit; }
.pub-announcement-btn--solid {
    background: #ffffff;
    color: #1a1a1a;
    border: none;
}
.pub-announcement-btn--outline {
    background: transparent;
    border: 1.5px solid #ffffff;
    color: #ffffff;
}
.pub-announcement-btn--pill {
    background: #ffffff;
    color: #1a1a1a;
    border: none;
    border-radius: 999px;
    padding: 4px 18px;
}
.pub-announcement-btn--ghost {
    background: rgba(255, 255, 255, 0.15);
    color: inherit;
    border: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
@media (max-width: 600px) {
    .pub-announcement-inner {
        flex-direction: column;
        gap: 6px;
        padding: 10px 36px 10px 12px;
        text-align: center;
    }
    .pub-announcement-bar.announcement-no-dismiss .pub-announcement-inner {
        padding-right: 12px;
    }
    .pub-announcement-content,
    .pub-announcement-link {
        align-items: center;
    }
    .pub-announcement-close { right: 4px; font-size: 28px; padding: 6px 10px; }
    .pub-announcement-btn { padding: 4px 14px; font-size: 0.8em; }
    .pub-announcement-subtitle { font-size: 0.82em; }
}

/* ================================= */
/* 20. MASONRY GALLERY (Growth+)     */
/* ================================= */
.pub-gallery-masonry {
    display: block;
    columns: var(--columns, 3) 280px;
    column-gap: 1rem;
}
.pub-gallery-masonry.pub-gallery-gap--compact { column-gap: 8px; }
.pub-gallery-masonry.pub-gallery-gap--compact .pub-gallery-item { margin-bottom: 8px; }
.pub-gallery-masonry.pub-gallery-gap--loose { column-gap: 24px; }
.pub-gallery-masonry.pub-gallery-gap--loose .pub-gallery-item { margin-bottom: 24px; }
.pub-gallery-masonry.pub-gallery-gap--none { column-gap: 0; }
.pub-gallery-masonry.pub-gallery-gap--none .pub-gallery-item { margin-bottom: 0; }
.pub-gallery-masonry .pub-gallery-item {
    break-inside: avoid;
    margin-bottom: 1rem;
    display: inline-block;
    width: 100%;
}
.pub-gallery-masonry .pub-gallery-item img {
    height: auto;
}
@media (max-width: 600px) {
    .pub-gallery-masonry { columns: 2 180px; }
}

/* ── Gallery Album Filter Tabs ── */
.pub-gallery-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1.5rem;
    justify-content: center;
}
.pub-gallery-filter-btn {
    padding: 6px 16px;
    border: 1px solid var(--primary, #2563eb);
    border-radius: 20px;
    background: transparent;
    color: var(--primary, #2563eb);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.pub-gallery-filter-btn.active,
.pub-gallery-filter-btn:hover {
    background: var(--primary, #2563eb);
    color: #fff;
}
.pub-gallery-item[data-album] {
    transition: opacity 0.3s, transform 0.3s;
}
.pub-gallery-item.album-hidden {
    display: none;
}

/* ── Branded 404 ── */
.pub-404-section { padding: 80px 0 120px; }
.pub-404-content {
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
}
.pub-404-code {
    font-size: 8rem;
    font-weight: 800;
    line-height: 1;
    color: var(--primary, #2563eb);
    opacity: 0.15;
    margin-bottom: -20px;
}
.pub-404-message {
    font-size: 1.125rem;
    color: var(--text, #333);
    line-height: 1.7;
    margin-bottom: 2rem;
}
@media (max-width: 768px) {
    .pub-404-section { padding: 48px 0 80px; }
    .pub-404-code { font-size: 5rem; }
}

/* ── Property Detail Page ── */
.pub-prop-detail { padding: 60px 0 80px; }

.pub-prop-images {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 48px;
    border-radius: 12px;
    overflow: hidden;
}
.pub-prop-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pub-prop-image-main img { min-height: 300px; max-height: 420px; }
.pub-prop-image-side img { min-height: 300px; max-height: 420px; }

.pub-prop-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 56px;
}
.pub-prop-info-card {
    background: var(--bg, #fff);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    padding: 24px;
}
.pub-prop-info-card h3 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary, #2563eb);
    margin: 0 0 10px;
}
.pub-prop-info-card p {
    margin: 0 0 4px;
    color: var(--text, #333);
    line-height: 1.6;
}
.pub-prop-info-card a {
    color: var(--primary, #2563eb);
    text-decoration: none;
}
.pub-prop-info-card a:hover { text-decoration: underline; }

.pub-prop-rooms { margin-bottom: 56px; }
.pub-prop-rooms-title {
    font-size: 1.75rem;
    margin: 0 0 24px;
    color: var(--text, #1a1a1a);
}
.pub-prop-rooms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}
.pub-prop-room-card {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg, #fff);
    transition: box-shadow 0.2s;
}
.pub-prop-room-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.pub-prop-room-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.pub-prop-room-body { padding: 20px; }
.pub-prop-room-body h3 {
    margin: 0 0 8px;
    font-size: 1.125rem;
    color: var(--text, #1a1a1a);
}
.pub-prop-room-desc {
    color: var(--text, #666);
    opacity: 0.75;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 12px;
}
.pub-prop-room-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text, #666);
    opacity: 0.65;
}
.pub-prop-room-price {
    font-weight: 600;
    color: var(--primary, #2563eb);
    opacity: 1;
}

.pub-prop-others { margin-top: 56px; padding-top: 48px; border-top: 1px solid rgba(0,0,0,0.06); }
.pub-prop-others-title {
    font-size: 1.5rem;
    margin: 0 0 24px;
    color: var(--text, #1a1a1a);
}
.pub-prop-others-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.pub-prop-other-card {
    display: block;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s;
}
.pub-prop-other-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.pub-prop-other-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.pub-prop-other-body { padding: 16px 20px; }
.pub-prop-other-body h3 {
    margin: 0 0 4px;
    font-size: 1.05rem;
    color: var(--text, #1a1a1a);
}
.pub-prop-other-body p {
    margin: 0 0 8px;
    font-size: 0.875rem;
    color: var(--text, #666);
    opacity: 0.7;
}
.pub-prop-other-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary, #2563eb);
}

@media (max-width: 768px) {
    .pub-prop-detail { padding: 32px 0 48px; }
    .pub-prop-images { grid-template-columns: 1fr; }
    .pub-prop-image-main img,
    .pub-prop-image-side img { max-height: 240px; min-height: 180px; }
    .pub-prop-rooms-grid { grid-template-columns: 1fr; }
    .pub-prop-others-grid { grid-template-columns: 1fr; }
}

/* ── Quill rich-text alignment & inline images (public site) ────────── */
.ql-align-center { text-align: center; }
.ql-align-right  { text-align: right; }
.ql-align-justify { text-align: justify; }
.ql-indent-1 { padding-left: 3em; }
.ql-indent-2 { padding-left: 6em; }
.ql-indent-3 { padding-left: 9em; }
.ql-indent-4 { padding-left: 12em; }

/* Inline images in rich-text content areas */
.rich-content img {
    max-width: 100%;
    border-radius: 6px;
    margin: 8px 0;
    display: inline-block;
    vertical-align: middle;
}
/* Images without explicit size get auto height */
.rich-content img:not([width]) { height: auto; }
/* Image alignment: block-level positioning via Quill align classes */
.ql-align-center img { display: block; margin-left: auto; margin-right: auto; }
.ql-align-right img  { display: block; margin-left: auto; margin-right: 0; }
/* Image float — text wraps around image */
.rich-content img.ql-img-float-left { float: left; margin: 4px 16px 8px 0; clear: left; }
.rich-content img.ql-img-float-right { float: right; margin: 4px 0 8px 16px; clear: right; }
.rich-content img[style*="float: left"] { margin: 4px 16px 8px 0; clear: left; }
.rich-content img[style*="float: right"] { margin: 4px 0 8px 16px; clear: right; }
/* Inline icons from Quill icon picker — no border-radius, inline with text */
.rich-content img.ql-inline-icon {
    border-radius: 0;
    margin: 0 2px;
    vertical-align: middle;
    display: inline-block;
    background: transparent !important;
}
/* Clear float after rich-content blocks to prevent layout bleed */
.rich-content::after { content: ''; display: table; clear: both; }

/* Code blocks from Quill */
.rich-content pre.ql-syntax {
    background: #1e293b; color: #e2e8f0; border-radius: 6px;
    padding: 12px 16px; font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
    font-size: 13px; line-height: 1.5; overflow-x: auto; margin: 12px 0;
}

/* Quill font families on public site */
.ql-font-inter { font-family: 'Inter', sans-serif; }
.ql-font-poppins { font-family: 'Poppins', sans-serif; }
.ql-font-montserrat { font-family: 'Montserrat', sans-serif; }
.ql-font-raleway { font-family: 'Raleway', sans-serif; }
.ql-font-opensans { font-family: 'Open Sans', sans-serif; }
.ql-font-lato { font-family: 'Lato', sans-serif; }
.ql-font-roboto { font-family: 'Roboto', sans-serif; }
.ql-font-dmsans { font-family: 'DM Sans', sans-serif; }
.ql-font-playfair { font-family: 'Playfair Display', serif; }
.ql-font-merriweather { font-family: 'Merriweather', serif; }
.ql-font-lora { font-family: 'Lora', serif; }
.ql-font-cormorant { font-family: 'Cormorant Garamond', serif; }
.ql-font-dmserif { font-family: 'DM Serif Display', serif; }
.ql-font-josefin { font-family: 'Josefin Sans', sans-serif; }
.ql-font-spacegrotesk { font-family: 'Space Grotesk', sans-serif; }
.ql-font-firasans { font-family: 'Fira Sans', sans-serif; }
.ql-font-nunito { font-family: 'Nunito', sans-serif; }
.ql-font-cabin { font-family: 'Cabin', sans-serif; }
.ql-font-karla { font-family: 'Karla', sans-serif; }
.ql-font-mulish { font-family: 'Mulish', sans-serif; }
.ql-font-sourcesans { font-family: 'Source Sans 3', sans-serif; }
.ql-font-worksans { font-family: 'Work Sans', sans-serif; }
.ql-font-manrope { font-family: 'Manrope', sans-serif; }
.ql-font-outfit { font-family: 'Outfit', sans-serif; }
.ql-font-serif { font-family: Georgia, 'Times New Roman', serif; }
.ql-font-monospace { font-family: 'SF Mono', 'Fira Code', Consolas, monospace; }