/*
Theme Name: AJNanda
Theme URI: https://ajnanda.com/
Description: A flexible professional WordPress theme for AJNanda with editable block-based layouts and site controls
Author: AJNanda
Version: 1.4.20
License: GNU General Public License v2 or later
Text Domain: ajnanda
*/

:root {
    --primary: #2563eb;
    --primary-dark: #1e40af;
    --secondary: #7c3aed;
    --accent: #f59e0b;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Poppins', sans-serif;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --white: #ffffff;
    --success: #059669;
    --ajn-header-background: #ffffff;
    --ajn-header-text-color: #1f2937;
    --ajn-header-link-hover-color: var(--primary);
    --ajn-header-link-hover-background: var(--gray-50);
    --ajn-header-submenu-background: #ffffff;
    --ajn-header-submenu-text-color: #1f2937;
    --ajn-header-submenu-hover-color: var(--primary);
    --ajn-header-submenu-hover-background: var(--gray-50);
    --ajn-header-font-family: inherit;
    --ajn-header-font-size: 1rem;
    --ajn-header-font-weight: 500;
    --ajn-header-font-style: normal;
    --ajn-header-text-decoration: none;
    --ajn-header-menu-gap: 2rem;
    --ajn-header-container-width: 1400px;
    --ajn-header-shadow-opacity: 0.10;
    --ajn-header-position: sticky;
    --ajnanda-header-height-desktop: auto;
    --ajnanda-header-height-tablet: auto;
    --ajnanda-header-height-mobile: auto;
    --ajn-footer-background: #111827;
    --ajn-footer-text-color: #f9fafb;
    --ajn-footer-link-hover-color: var(--accent);
    --ajn-footer-divider-color: #374151;
    --ajn-footer-submenu-background: #ffffff;
    --ajn-footer-submenu-text-color: #1f2937;
    --ajn-footer-submenu-hover-color: var(--primary);
    --ajn-footer-submenu-hover-background: var(--gray-50);
    --ajn-footer-font-family: inherit;
    --ajn-footer-font-size: 1rem;
    --ajn-footer-font-weight: 400;
    --ajn-footer-menu-gap: 1.4rem;
    --ajn-footer-container-width: 1280px;
    --ajn-footer-padding-top: 4rem;
    --ajn-footer-padding-bottom: 2rem;
    --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --ast-global-color-0: var(--primary);
    --ast-global-color-1: var(--primary-dark);
    --ast-global-color-2: var(--secondary);
    --ast-global-color-3: #111827;
    --ast-global-color-4: #eef6ff;
    --ast-global-color-5: #ffffff;
    --ast-global-color-6: #f7fafc;
    --ast-global-color-7: #f59e0b;
    --ast-global-color-8: #0f172a;
}

/* ==========================================================================
   AJNanda color schemes.

   Each scheme overrides only the small set of brand tokens already used
   throughout the theme (--primary, --primary-dark, --secondary, --accent).
   Every existing pattern, page design, and starter site already styles
   itself from these same variables (buttons, links, cards, the eyebrow
   label, stat values, etc. — see .builder-*/.is-style-ajnanda-* above and
   theme.json's button element), so applying one of these classes recolors
   the entire existing pattern library with no markup changes and no
   duplicated CSS. Primary/secondary/accent values are the theme's existing
   theme.json palette colors (primary-blue, deep-blue, purple, gold, ink);
   only the "-dark" hover shades are new, matching the theme's existing
   practice of keeping hover shades in style.css rather than theme.json.

   Applied site-wide via a body class from the Customizer ("AJNanda" panel
   → Color Scheme) or per-page by wrapping a single page's content in a
   matching class from the Page Library admin screen. See
   inc/color-schemes.php.
   ========================================================================== */

.ajnanda-scheme-blue {
    /* Explicit reset back to the theme's default blue tokens — needed when
       a single page uses "Blue" while the site-wide scheme is something
       else, since nesting an unstyled class wouldn't override an ancestor. */
    --primary: #2563eb;
    --primary-dark: #1e40af;
    --secondary: #7c3aed;
    --accent: #f59e0b;
}

.ajnanda-scheme-purple {
    --primary: #7c3aed;
    --primary-dark: #6d28d9;
    --secondary: #2563eb;
    --accent: #f59e0b;
}

.ajnanda-scheme-gold {
    --primary: #f59e0b;
    --primary-dark: #b45309;
    --secondary: #111827;
    --accent: #2563eb;
}

.ajnanda-scheme-dark {
    --primary: #111827;
    --primary-dark: #000000;
    --secondary: #f59e0b;
    --accent: #f59e0b;
}

.ajnanda-scheme-amber {
    --primary: #b45309;
    --primary-dark: #92400e;
    --secondary: #111827;
    --accent: #f59e0b;
}

.ajnanda-scheme-teal {
    --primary: #0d9488;
    --primary-dark: #0f766e;
    --secondary: #111827;
    --accent: #f59e0b;
}

.ajnanda-scheme-emerald {
    --primary: #059669;
    --primary-dark: #047857;
    --secondary: #111827;
    --accent: #f59e0b;
}

.ajnanda-scheme-red {
    --primary: #dc2626;
    --primary-dark: #b91c1c;
    --secondary: #111827;
    --accent: #f59e0b;
}

.ajnanda-scheme-rose {
    --primary: #e11d48;
    --primary-dark: #be123c;
    --secondary: #111827;
    --accent: #f59e0b;
}

.ajnanda-scheme-pink {
    --primary: #db2777;
    --primary-dark: #be185d;
    --secondary: #111827;
    --accent: #f59e0b;
}

.ajnanda-scheme-orange {
    --primary: #ea580c;
    --primary-dark: #c2410c;
    --secondary: #111827;
    --accent: #2563eb;
}

.ajnanda-scheme-indigo {
    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --secondary: #7c3aed;
    --accent: #f59e0b;
}

.ajnanda-scheme-sky {
    --primary: #0284c7;
    --primary-dark: #0369a1;
    --secondary: #111827;
    --accent: #f59e0b;
}

.ajnanda-scheme-cyan {
    --primary: #0891b2;
    --primary-dark: #0e7490;
    --secondary: #111827;
    --accent: #f59e0b;
}

.ajnanda-scheme-violet {
    --primary: #6d28d9;
    --primary-dark: #5b21b6;
    --secondary: #2563eb;
    --accent: #f59e0b;
}

.ajnanda-scheme-fuchsia {
    --primary: #c026d3;
    --primary-dark: #a21caf;
    --secondary: #111827;
    --accent: #f59e0b;
}

.ajnanda-scheme-lime {
    --primary: #65a30d;
    --primary-dark: #4d7c0f;
    --secondary: #111827;
    --accent: #f59e0b;
}

.ajnanda-scheme-slate {
    --primary: #334155;
    --primary-dark: #1e293b;
    --secondary: #64748b;
    --accent: #f59e0b;
}

.ajnanda-scheme-navy {
    --primary: #1e3a8a;
    --primary-dark: #172554;
    --secondary: #2563eb;
    --accent: #f59e0b;
}

.ajnanda-scheme-crimson {
    --primary: #991b1b;
    --primary-dark: #7f1d1d;
    --secondary: #111827;
    --accent: #f59e0b;
}

.ajnanda-scheme-neon-funk {
    --primary: #d946ef;
    --primary-dark: #a21caf;
    --secondary: #22d3ee;
    --accent: #facc15;
}

.ajnanda-scheme-bubblegum {
    --primary: #f472b6;
    --primary-dark: #db2777;
    --secondary: #a78bfa;
    --accent: #fbbf24;
}

.ajnanda-scheme-nursery {
    --primary: #a5b4fc;
    --primary-dark: #818cf8;
    --secondary: #86efac;
    --accent: #fde047;
}

/* Warm terminal-orange primary against a deep aubergine secondary — a
   Linux/open-source-desktop-inspired scheme (pairs well with Dark Surface
   Mode below and the "developer-mono" font pairing, bundled together as
   the "Ubuntu Terminal" Site Kit — see inc/site-kits.php). Just another
   color-name preset like its 23 siblings above: nothing site-specific
   lives here. */
.ajnanda-scheme-aubergine {
    --primary: #e9541d;
    --primary-dark: #c2410c;
    --secondary: #3b0764;
    --accent: #f59e0b;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    line-height: 1.6;
    color: var(--gray-800);
    /* Token-based, not a hardcoded white — so Dark Surface Mode (see
       inc/dark-surface-mode.php) can flip the page canvas along with
       every --white/--gray-* consumer, not just accent colors. */
    background: var(--gray-50, #f9fafb);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading, 'Poppins', sans-serif);
    font-weight: 700;
    line-height: 1.2;
    color: var(--gray-900);
}

a { color: var(--primary); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--primary-dark); }

.container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }

/* Header */
.site-header {
    position: var(--ajn-header-position);
    top: 0;
    width: 100%;
    z-index: 1000;
    background: var(--ajn-header-background);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 3px rgba(0,0,0,var(--ajn-header-shadow-opacity));
    color: var(--ajn-header-text-color);
    font-family: var(--ajn-header-font-family);
    font-size: var(--ajn-header-font-size);
}

body.admin-bar .site-header {
    top: 32px;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0.75rem 1.5rem;
    max-width: var(--ajn-header-container-width);
    margin: 0 auto;
}

.header-container.container,
.header-builder-container.container {
    max-width: var(--ajn-header-container-width);
}

.site-branding {
    display: flex;
    align-items: center;
}

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

.site-logo {
    font-size: 1.25rem;
    font-weight: 800;
    font-style: var(--ajn-header-font-style);
    color: var(--ajn-header-text-color);
    font-family: var(--ajn-header-font-family);
    text-decoration: var(--ajn-header-text-decoration);
    display: flex;
    align-items: center;
}

/* ajnanda_render_builder_site_identity() (see comment below) renders this
   same .site-logo text link in the footer builder too, but the rule above
   hardcodes the header's text color/style/decoration — on a dark footer
   color scheme the brand name renders as dark-gray-on-near-black and is
   effectively invisible, and picking a footer scheme with an italic or
   underline font preset had no visible effect on it. Override with the
   footer scheme's own values when this cell is inside the footer builder. */
.footer-builder-container .site-logo {
    color: var(--ajn-footer-text-color);
    font-style: var(--ajn-footer-font-style);
    text-decoration: var(--ajn-footer-text-decoration);
}

/* Optional branding badge/mark + tagline (header, footer, and header/footer
   builder "site-logo" cells all share ajnanda_render_builder_site_identity(),
   so this one ruleset covers every place a logo can appear). */
.site-branding-group {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.site-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: var(--ajn-badge-radius, 999px);
    background: var(--ajn-badge-bg, var(--gray-100, #f3f4f6));
    color: var(--ajn-badge-color, var(--ajn-header-text-color, currentColor));
    font-size: var(--ajn-badge-font-size, 0.75rem);
    font-weight: var(--ajn-badge-font-weight, 700);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.site-badge-compact-pill {
    width: var(--ajn-badge-width, auto);
    height: var(--ajn-badge-height, auto);
}

/* Circle/rounded-square badges are meant for a short initial (1-3
   characters) rather than a full word, so they get a fixed square box
   instead of the pill's auto/padding-based width. */
.site-badge-circle,
.site-badge-rounded-square {
    justify-content: center;
    width: var(--ajn-badge-width, 2rem);
    height: var(--ajn-badge-height, 2rem);
    padding: 0;
    text-transform: none;
}

.site-badge-circle {
    border-radius: var(--ajn-badge-radius, 999px);
}

.site-badge-rounded-square {
    border-radius: var(--ajn-badge-radius, 0.5rem);
}

.site-tagline {
    display: block;
    color: var(--ajn-header-text-color, currentColor);
    opacity: 0.75;
    font-size: 0.8125rem;
    font-weight: 500;
}

.footer-builder-container .site-badge {
    background: rgba(255, 255, 255, 0.14);
    color: var(--ajn-footer-text-color, inherit);
}

.footer-builder-container .site-tagline {
    color: var(--ajn-footer-text-color, inherit);
}

.nav-menu {
    display: flex;
    gap: var(--ajn-header-menu-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    position: relative;
    list-style: none;
}

.nav-menu a {
    display: block;
    font-family: var(--ajn-header-font-family);
    font-size: var(--ajn-header-font-size);
    font-weight: var(--ajn-header-font-weight);
    font-style: var(--ajn-header-font-style);
    color: var(--ajn-header-text-color) !important;
    text-decoration: var(--ajn-header-text-decoration);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    opacity: 1 !important;
}

.nav-menu a:hover {
    background: var(--ajn-header-link-hover-background);
    color: var(--ajn-header-link-hover-color);
}

.nav-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1002;
    display: none;
    min-width: 220px;
    margin: 0;
    padding: 0.5rem;
    list-style: none;
    background: var(--ajn-header-submenu-background);
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
}

.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu {
    display: block;
}

.nav-menu .sub-menu a {
    width: 100%;
    color: var(--ajn-header-submenu-text-color);
    white-space: nowrap;
}

.nav-menu .sub-menu a:hover,
.nav-menu .sub-menu a:focus {
    color: var(--ajn-header-submenu-hover-color);
    background: var(--ajn-header-submenu-hover-background);
}

.nav-menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
}

/* Down chevron on top-level items that have a submenu */
.nav-menu > li.menu-item-has-children > a {
    display: flex;
    align-items: center;
}

.nav-menu > li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 6px;
    flex-shrink: 0;
    position: relative;
    top: -2px;
}

/* Right chevron on sub-menu items that have a nested submenu */
.nav-menu .sub-menu > li.menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-menu .sub-menu > li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 10px;
    flex-shrink: 0;
}

/* ==========================================================================
   Nav container style (Customizer: Header -> Nav Container: ...)
   Desktop-only by design (min-width matches the theme's existing 768px
   mobile breakpoint) so this never fights with the mobile dropdown panel,
   which already has its own background/border/shadow for the open state.
   ========================================================================== */
@media (min-width: 769px) {
    .nav-menu.ajn-nav-container-soft-panel,
    .nav-menu.ajn-nav-container-rounded-rect,
    .nav-menu.ajn-nav-container-pill {
        background: var(--ajn-nav-container-bg, var(--gray-50, #f9fafb));
        border-style: solid;
        border-color: var(--ajn-nav-container-border-color, transparent);
        border-width: var(--ajn-nav-container-border-width, 0px);
        padding: var(--ajn-nav-container-padding-y, 0.4rem) var(--ajn-nav-container-padding-x, 0.6rem);
        box-shadow: 0 10px 25px rgba(15, 23, 42, var(--ajn-nav-container-shadow-strength, 0));
    }

    .nav-menu.ajn-nav-container-soft-panel {
        border-radius: var(--ajn-nav-container-border-radius, 0.75rem);
    }

    .nav-menu.ajn-nav-container-rounded-rect {
        border-radius: var(--ajn-nav-container-border-radius, 0.5rem);
    }

    .nav-menu.ajn-nav-container-pill {
        border-radius: var(--ajn-nav-container-border-radius, 999px);
    }
}

/* ==========================================================================
   Active menu item treatment (Customizer: Header -> Active Menu Item: ...)
   Targets WordPress' own .current-menu-item / .current-menu-ancestor
   classes — no custom "is this the active page" detection needed.
   ========================================================================== */
.nav-menu.ajn-active-style-text-color .current-menu-item > a,
.nav-menu.ajn-active-style-text-color .current-menu-ancestor > a {
    color: var(--ajn-active-menu-color, var(--primary)) !important;
    font-weight: 700;
}

.nav-menu.ajn-active-style-underline .current-menu-item > a,
.nav-menu.ajn-active-style-underline .current-menu-ancestor > a {
    box-shadow: inset 0 -2px 0 var(--ajn-active-menu-color, var(--primary));
}

.nav-menu.ajn-active-style-background-highlight .current-menu-item > a,
.nav-menu.ajn-active-style-background-highlight .current-menu-ancestor > a {
    background: var(--ajn-active-menu-color, var(--primary));
    color: #ffffff !important;
    border-radius: 0.5rem;
}

.nav-menu.ajn-active-style-pill-highlight .current-menu-item > a,
.nav-menu.ajn-active-style-pill-highlight .current-menu-ancestor > a {
    background: var(--ajn-active-menu-color, var(--primary));
    color: #ffffff !important;
    border-radius: 999px;
}

/* ==========================================================================
   Header navigation CTA (Customizer: Header -> Nav CTA: ...)
   Applied via the nav_menu_css_class filter to one ordinary top-level
   Primary Menu item, so it lives inside .nav-menu and is automatically
   present (and visible) in the mobile dropdown/overlay too — no separate
   markup for mobile.
   ========================================================================== */
.nav-menu .ajn-nav-cta > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline: 0.25rem;
    font-weight: 700;
    box-shadow: 0 10px 20px rgba(15, 23, 42, var(--ajn-nav-cta-shadow-strength, 0));
}

.nav-menu .ajn-nav-cta.ajn-nav-cta-style-solid > a {
    background: var(--ajn-nav-cta-bg, var(--primary)) !important;
    color: var(--ajn-nav-cta-color, #ffffff) !important;
    border: 2px solid transparent;
    border-radius: var(--ajn-nav-cta-border-radius, 0.5rem);
}

.nav-menu .ajn-nav-cta.ajn-nav-cta-style-outline > a {
    background: transparent !important;
    color: var(--ajn-nav-cta-bg, var(--ajn-header-text-color, currentColor)) !important;
    border: 2px solid var(--ajn-nav-cta-bg, currentColor);
    border-radius: var(--ajn-nav-cta-border-radius, 0.5rem);
}

.nav-menu .ajn-nav-cta.ajn-nav-cta-style-pill > a {
    background: var(--ajn-nav-cta-bg, var(--primary)) !important;
    color: var(--ajn-nav-cta-color, #ffffff) !important;
    border: 2px solid transparent;
    border-radius: 999px;
}

.nav-menu .ajn-nav-cta.ajn-nav-cta-style-solid > a:hover,
.nav-menu .ajn-nav-cta.ajn-nav-cta-style-pill > a:hover {
    background: var(--ajn-nav-cta-hover-bg, var(--primary-dark)) !important;
    color: var(--ajn-nav-cta-hover-color, var(--ajn-nav-cta-color, #ffffff)) !important;
}

.nav-menu .ajn-nav-cta.ajn-nav-cta-style-outline > a:hover {
    background: var(--ajn-nav-cta-hover-bg, var(--ajn-nav-cta-bg, var(--primary))) !important;
    color: var(--ajn-nav-cta-hover-color, #ffffff) !important;
    border-color: var(--ajn-nav-cta-hover-bg, var(--ajn-nav-cta-bg, var(--primary)));
}

/* Keyboard focus must stay clearly visible regardless of CTA colors. */
.nav-menu .ajn-nav-cta > a:focus-visible {
    outline: 3px solid var(--primary-dark, #1e40af);
    outline-offset: 2px;
}

/* ==========================================================================
   Header accent strip (Customizer: Header -> Accent Strip: ...)
   ========================================================================== */
.ajn-header-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    height: var(--ajn-header-accent-height, 4px);
    background: var(--ajn-header-accent-bg, var(--primary));
    pointer-events: none;
}

.header-layout-centered-menu .header-container {
    justify-content: center;
}

.header-layout-centered-menu .site-branding {
    position: absolute;
    left: 1.5rem;
}

.header-layout-centered-menu .main-navigation {
    margin-inline: auto;
}

.header-layout-stacked-center .header-container {
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

.header-layout-stacked-center .site-branding,
.header-layout-stacked-center .main-navigation {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.header-layout-stacked-center .nav-menu {
    justify-content: center;
}

.header-builder-container,
.footer-builder-container {
    display: grid;
    gap: 0.75rem;
    width: 100%;
}

.header-builder-container {
    max-width: var(--ajn-header-container-width);
    margin-inline: auto;
    position: relative;
}

.ajn-builder-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.ajn-builder-cell {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: var(--ajn-builder-width-desktop, 1) 1 0;
}

.ajn-builder-cell-primary-menu,
.ajn-builder-cell-footer-menu {
    justify-content: flex-end;
}

/* Independent per-cell alignment override (Customizer: Header/Footer ->
   Row N Cell N Alignment). Two classes beat the single-class element-type
   defaults above regardless of source order, and this only applies at all
   when a site owner explicitly picks something other than "Default". */
.ajn-builder-cell.ajn-builder-cell-has-align {
    justify-content: var(--ajn-builder-align);
}

.ajn-builder-cell-site-logo {
    justify-content: flex-start;
}

.ajn-builder-cell-search .search-form,
.ajn-builder-cell-search form {
    width: 100%;
}

.ajn-builder-cell .widget {
    margin: 0;
}

.mobile-menu-toggle {
    display: none;
    min-width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    background: var(--white);
    color: var(--gray-900);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.mobile-menu-icon {
    display: inline-flex;
    width: 22px;
    flex-direction: column;
    gap: 5px;
}

.mobile-menu-label {
    line-height: 1;
}

.mobile-menu-icon span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: var(--transition);
}

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

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

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

/* Hero */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    padding: 6rem 1.5rem 4rem;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
}

.hero-content {
    position: relative;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
    animation: fadeInUp 1s ease-out;
}

.hero-title {
    color: white;
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 900;
    margin-bottom: 1.5rem;
    text-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.hero-subtitle {
    color: rgba(255,255,255,0.95);
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    margin-bottom: 2.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 1.125rem;
    transition: var(--transition);
    cursor: pointer;
    border: 2px solid transparent;
}

.btn-primary {
    background: white;
    color: var(--primary);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}

.btn-secondary {
    background: transparent;
    color: white;
    border-color: white;
}

/* Nav CTA style options for the header/footer builder "button" cell. */
.ajn-builder-button.ajn-cta-style-outline {
    background: transparent;
    color: inherit;
    border-color: currentColor;
    box-shadow: none;
}

.ajn-builder-button.ajn-cta-style-pill {
    border-radius: 999px;
}

.btn-secondary:hover {
    background: white;
    color: var(--primary);
}

/* Features */
.features {
    padding: 5rem 1.5rem;
    background: var(--gray-50);
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem;
}

.section-header h2 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 1rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: var(--white, #ffffff);
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: var(--transition);
    border: 1px solid var(--gray-100);
}

.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
    border-color: var(--primary);
}

.feature-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 2rem;
}

.feature-card h3 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

/* Stats */
.stats {
    padding: 5rem 1.5rem;
    background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 100%);
    color: white;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
}

.stat-item {
    text-align: center;
    min-width: 0;
}

.stat-number {
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 900;
    background: linear-gradient(135deg, #60a5fa, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
    line-height: 1;
    overflow-wrap: normal;
    white-space: nowrap;
}

.stat-label {
    font-size: 1.125rem;
    color: #d1d5db;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.google-reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.google-review-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-left: 4px solid var(--primary);
}

.google-review-stars {
    color: var(--accent);
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    margin-bottom: 1rem;
}

.google-review-text {
    color: var(--gray-700);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.google-review-author {
    margin-top: auto;
}

.google-review-author h4 {
    margin-bottom: 0.25rem;
}

.google-review-author p {
    color: var(--gray-600);
    margin: 0;
    font-size: 0.925rem;
}

.google-review-empty {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    border-top: 4px solid var(--accent);
}

/* CTA */
.cta {
    padding: 5rem 1.5rem;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    text-align: center;
    color: white;
}

.cta h2 {
    color: white;
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 1.5rem;
}

.cta p {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
}

/* Footer */
.site-footer {
    background: var(--ajn-footer-background);
    color: var(--ajn-footer-text-color);
    font-family: var(--ajn-footer-font-family);
    font-size: var(--ajn-footer-font-size);
    font-weight: var(--ajn-footer-font-weight);
    padding: var(--ajn-footer-padding-top) 1.5rem var(--ajn-footer-padding-bottom);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-section h3 {
    color: var(--ajn-footer-text-color);
    margin-bottom: 1rem;
}

.footer-section ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-section li {
    margin: 0.55rem 0;
}

.footer-section a {
    color: var(--ajn-footer-text-color);
    text-decoration: none;
}

.footer-section a:hover,
.footer-section a:focus {
    color: var(--ajn-footer-link-hover-color);
}

.footer-bottom {
    border-top: 1px solid var(--ajn-footer-divider-color);
    padding-top: 2rem;
    text-align: center;
}

.footer-layout-menu-bar {
    padding: 0;
    background: var(--ajn-footer-background);
    color: var(--ajn-footer-text-color);
}

.footer-menu-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    min-height: 96px;
    max-width: var(--ajn-footer-container-width);
    margin-inline: auto;
    padding: 1.5rem 0;
}

.footer-menu-bar-brand {
    color: var(--ajn-footer-text-color);
    font-size: 0.95rem;
}

.footer-menu-navigation {
    margin-left: auto;
}

.footer-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ajn-footer-menu-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-menu li {
    position: relative;
    margin: 0;
    list-style: none;
}

.footer-menu a {
    display: block;
    font-family: var(--ajn-footer-font-family);
    font-size: var(--ajn-footer-font-size);
    font-weight: var(--ajn-footer-font-weight);
    color: var(--ajn-footer-text-color);
    text-decoration: none;
}

.footer-menu a:hover,
.footer-menu a:focus {
    color: var(--ajn-footer-link-hover-color);
}

.footer-menu .sub-menu {
    position: absolute;
    right: 0;
    bottom: 100%;
    z-index: 1002;
    display: none;
    min-width: 240px;
    margin: 0 0 0.75rem;
    padding: 0.5rem;
    border: 1px solid var(--ajn-footer-divider-color);
    border-radius: 0.75rem;
    background: var(--ajn-footer-submenu-background);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
}

.footer-menu li:hover > .sub-menu,
.footer-menu li:focus-within > .sub-menu {
    display: block;
}

.footer-menu .sub-menu a {
    color: var(--ajn-footer-submenu-text-color);
    padding: 0.65rem 0.75rem;
    white-space: nowrap;
}

.footer-menu .sub-menu a:hover,
.footer-menu .sub-menu a:focus {
    color: var(--ajn-footer-submenu-hover-color);
    background: var(--ajn-footer-submenu-hover-background);
}

.footer-menu .sub-menu .sub-menu {
    right: 100%;
    bottom: 0;
}

.footer-builder-container .ajn-builder-row {
    min-height: 64px;
    max-width: var(--ajn-footer-container-width);
    margin-inline: auto;
}

.footer-builder-container .ajn-builder-cell {
    color: var(--ajn-footer-text-color);
}

.ajn-customizer-builder-preview {
    display: none;
    gap: 14px;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
    max-height: min(44vh, 340px);
    overflow: auto;
    padding: 18px 20px 20px;
    border-top: 4px solid #008ec2;
    border-bottom: 0;
    background: #f4f6f8;
    color: #4b5563;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-shadow: 0 -18px 45px rgba(15, 23, 42, 0.16);
}

.ajn-customizer-builder-preview.is-active {
    display: grid;
}

.ajn-customizer-builder-tooltip {
    position: absolute;
    top: 8px;
    left: 10px;
    padding: 4px 8px;
    border: 1px solid #c3c4c7;
    background: #f6f7f7;
    color: #2c3338;
    font-size: 13px;
    line-height: 1.2;
    opacity: 1;
    pointer-events: none;
}

.ajn-customizer-builder-row {
    display: flex;
    min-height: 74px;
    border: 1px dashed #d5dde5;
    background: rgba(255,255,255,0.72);
    border-radius: 4px;
}

.ajn-customizer-builder-row-handle,
.ajn-customizer-builder-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ajn-customizer-builder-row-handle {
    flex: 0 0 92px;
    flex-direction: column;
    gap: 6px;
    border-right: 1px dashed #d5dde5;
    color: #9aa4b2;
    font-size: 15px;
}

.ajn-customizer-builder-gear {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
}

.ajn-customizer-builder-split {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid #d7dde5;
    border-radius: 999px;
    background: #fff;
}

.ajn-customizer-builder-split button {
    min-width: 24px;
    min-height: 24px;
    border: 0;
    border-left: 1px solid #e5e7eb;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
}

.ajn-customizer-builder-split button:first-child {
    border-left: 0;
}

.ajn-customizer-builder-split button:hover,
.ajn-customizer-builder-split button:focus,
.ajn-customizer-builder-split button.is-active {
    background: #007cba;
    color: #fff;
    outline: none;
}

.ajn-customizer-builder-cell {
    flex: var(--ajn-builder-width-desktop, 1) 1 0;
    min-width: 0;
}

.ajn-customizer-builder-cell + .ajn-customizer-builder-cell {
    border-left: 1px solid #e1e7ee;
}

.ajn-customizer-builder-chip,
.ajn-customizer-builder-add {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d0d7de;
    border-radius: 4px;
    background: #fff;
    color: #475569;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    font: inherit;
}

.ajn-customizer-builder-chip {
    gap: 14px;
    min-height: 46px;
    padding: 0 18px;
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
}

.ajn-customizer-builder-add {
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border-style: dashed;
    border-radius: 6px;
    color: #64748b;
    font-size: 24px;
    line-height: 1;
}

.ajn-customizer-builder-add:hover,
.ajn-customizer-builder-add:focus,
.ajn-customizer-builder-chip:hover,
.ajn-customizer-builder-chip:focus {
    border-color: #007cba;
    color: #007cba;
    outline: none;
}

.ajn-customizer-builder-remove {
    color: #7b8794;
    font-size: 24px;
    line-height: 1;
}

.ajn-customizer-builder-add-row,
.ajn-customizer-builder-remove-row {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 34px;
    height: 34px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    color: #64748b;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    font: inherit;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
}

.ajn-customizer-builder-add-row {
    position: relative;
    margin: -3px auto 0;
}

.ajn-customizer-builder-add-row::before,
.ajn-customizer-builder-add-row::after {
    content: "";
    position: absolute;
    top: 50%;
    width: min(220px, 18vw);
    height: 1px;
    border-top: 1px dashed #d5dde5;
}

.ajn-customizer-builder-add-row::before {
    right: calc(100% + 12px);
}

.ajn-customizer-builder-add-row::after {
    left: calc(100% + 12px);
}

.ajn-customizer-builder-remove-row {
    width: 28px;
    height: 28px;
    margin: -4px auto -2px;
    color: #94a3b8;
    font-size: 18px;
}

.ajn-customizer-builder-add-row:hover,
.ajn-customizer-builder-add-row:focus,
.ajn-customizer-builder-remove-row:hover,
.ajn-customizer-builder-remove-row:focus {
    border-color: #007cba;
    color: #007cba;
    outline: none;
}

.ajn-builder-insert-popover {
    display: none;
    position: fixed;
    z-index: 100001;
    width: min(440px, calc(100vw - 32px));
    max-height: min(54vh, 520px);
    overflow: auto;
    padding: 22px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #2f343b;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.18);
}

.ajn-builder-insert-popover.is-active {
    display: block;
}

.ajn-builder-insert-popover-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ajn-builder-insert-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px 14px;
}

.ajn-builder-insert-choice {
    display: grid;
    gap: 8px;
    align-items: center;
    justify-items: center;
    min-height: 74px;
    padding: 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #343a40;
    cursor: pointer;
    font: inherit;
    text-align: center;
}

.ajn-builder-insert-choice:hover,
.ajn-builder-insert-choice:focus {
    background: #f1f5f9;
    outline: none;
}

.ajn-builder-insert-icon {
    width: 22px;
    height: 16px;
    border: 2px solid currentColor;
    border-radius: 3px;
    opacity: 0.75;
}

.ajn-builder-insert-choice-footer-menu .ajn-builder-insert-icon,
.ajn-builder-insert-choice-social .ajn-builder-insert-icon,
.ajn-builder-insert-choice-widget-1 .ajn-builder-insert-icon,
.ajn-builder-insert-choice-widget-2 .ajn-builder-insert-icon,
.ajn-builder-insert-choice-widget-3 .ajn-builder-insert-icon,
.ajn-builder-insert-choice-widget-4 .ajn-builder-insert-icon {
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(currentColor, currentColor) 0 0 / 100% 3px no-repeat,
        linear-gradient(currentColor, currentColor) 0 7px / 100% 3px no-repeat,
        linear-gradient(currentColor, currentColor) 0 14px / 100% 3px no-repeat;
}

.ajn-builder-insert-choice-copyright .ajn-builder-insert-icon,
.ajn-builder-insert-choice-html-1 .ajn-builder-insert-icon,
.ajn-builder-insert-choice-html-2 .ajn-builder-insert-icon {
    width: auto;
    height: auto;
    border: 0;
}

.ajn-builder-insert-choice-copyright .ajn-builder-insert-icon::before {
    content: "\00a9";
    font-weight: 700;
}

.ajn-builder-insert-choice-html-1 .ajn-builder-insert-icon::before,
.ajn-builder-insert-choice-html-2 .ajn-builder-insert-icon::before {
    content: "<>";
    font-weight: 800;
}

.ajn-builder-insert-choice-divider-1 .ajn-builder-insert-icon,
.ajn-builder-insert-choice-divider-2 .ajn-builder-insert-icon,
.ajn-builder-insert-choice-divider-3 .ajn-builder-insert-icon {
    width: 24px;
    height: 2px;
    border: 0;
    background: currentColor;
}

.ajn-builder-divider {
    display: block;
    width: 100%;
    min-width: 48px;
    height: 1px;
    background: currentColor;
    opacity: 0.24;
}

.ajn-builder-copyright,
.ajn-builder-html,
.ajn-builder-social {
    color: inherit;
}

/* Address paragraph inside builder — strip default block margin */
.ajn-builder-html p {
    margin: 0;
}

.ajn-builder-social a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
}

/* Right-align social links inside their cell */
.ajn-builder-cell-social {
    justify-content: flex-end;
}

/* ---- Header builder layout ---- */

.header-layout-builder .header-builder-container {
    gap: 0;
}

/* All builder rows share the header background and get side padding */
.header-layout-builder .ajn-builder-row {
    padding-inline: 1.5rem;
    background: var(--ajn-header-background);
}

/* Main nav row — standard vertical rhythm */
.header-layout-builder .ajn-builder-row {
    padding-block: 0.5rem;
}

/* Info bar row (last row when multiple rows exist) — compact strip */
.header-layout-builder .ajn-builder-row:last-child:not(:only-child) {
    padding-block: 0.25rem;
    font-size: 0.875rem;
    border-top: 1px solid color-mix(in srgb, var(--ajn-header-text-color) 10%, transparent);
}

/* Center nav menu in builder mode */
.header-layout-builder .ajn-builder-cell-primary-menu {
    justify-content: center;
}

/* Cap logo height in builder mode */
.header-layout-builder .ajn-builder-cell-site-logo img {
    max-height: 70px;
}

.ajn-builder-cart {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.ajn-builder-cart:hover {
    background: rgba(0, 0, 0, 0.08);
}

.ajn-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--primary, #2563eb);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 9px;
    line-height: 1;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scroll-reveal animation classes. Progressive enhancement: content is
 * visible by default (e.g. no-JS, JS error) and only hidden pending reveal
 * once document.documentElement has the .js class (added at the very top
 * of main.js, before anything can fail) — same pattern already used for
 * .js .process-step. js/main.js toggles .animated via IntersectionObserver
 * when an element scrolls into view. All variants are inert (no visual
 * effect at all) under prefers-reduced-motion, further down. */
.js .animate-on-scroll,
.js .animate-fade-in,
.js .animate-slide-left,
.js .animate-slide-right,
.js .animate-scale-in {
    opacity: 0;
    transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.js .animate-on-scroll { transform: translateY(30px); }
.js .animate-slide-left { transform: translateX(-40px); }
.js .animate-slide-right { transform: translateX(40px); }
.js .animate-scale-in { transform: scale(0.94); }

.animate-on-scroll.animated,
.animate-fade-in.animated,
.animate-slide-left.animated,
.animate-slide-right.animated,
.animate-scale-in.animated {
    opacity: 1;
    transform: none;
}

/* Stagger a grid/columns block's direct children one after another instead
 * of all revealing at once — add .animate-stagger to the parent (e.g. a
 * columns/group block) and .animate-on-scroll (or another variant above)
 * to each child. Purely a transition-delay ladder, no JS changes needed. */
.animate-stagger > .animate-on-scroll:nth-child(1),
.animate-stagger > .animate-fade-in:nth-child(1),
.animate-stagger > .animate-scale-in:nth-child(1) { transition-delay: 0ms; }
.animate-stagger > .animate-on-scroll:nth-child(2),
.animate-stagger > .animate-fade-in:nth-child(2),
.animate-stagger > .animate-scale-in:nth-child(2) { transition-delay: 100ms; }
.animate-stagger > .animate-on-scroll:nth-child(3),
.animate-stagger > .animate-fade-in:nth-child(3),
.animate-stagger > .animate-scale-in:nth-child(3) { transition-delay: 200ms; }
.animate-stagger > .animate-on-scroll:nth-child(4),
.animate-stagger > .animate-fade-in:nth-child(4),
.animate-stagger > .animate-scale-in:nth-child(4) { transition-delay: 300ms; }
.animate-stagger > .animate-on-scroll:nth-child(5),
.animate-stagger > .animate-fade-in:nth-child(5),
.animate-stagger > .animate-scale-in:nth-child(5) { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .animate-fade-in,
    .animate-slide-left,
    .animate-slide-right,
    .animate-scale-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Additional Animations */
@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(30px, -30px) rotate(5deg); }
    66% { transform: translate(-20px, 20px) rotate(-5deg); }
}

@keyframes pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }
}

@keyframes slideInFromLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInFromRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* Enhanced Feature Cards */
.feature-card {
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s;
}

.feature-card:hover::before {
    left: 100%;
}

/* Pricing Cards (if needed) */
.pricing-card {
    background: var(--white, #ffffff);
    padding: 2.5rem 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 2px solid var(--gray-200);
    text-align: center;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    border-color: var(--primary);
}

.pricing-card.featured {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    transform: scale(1.05);
    border-color: transparent;
}

.pricing-card.featured:hover {
    transform: scale(1.08) translateY(-10px);
}

.price {
    font-size: 3rem;
    font-weight: 900;
    margin: 1rem 0;
}

.price-period {
    font-size: 1rem;
    opacity: 0.7;
}

/* Process Steps */
.process-step {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    margin-bottom: 3rem;
}

.step-number {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.step-content h3 {
    margin-bottom: 0.5rem;
}

/* FAQ Section */
.faq-item {
    background: var(--white, #ffffff);
    padding: 1.5rem;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid var(--gray-200);
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: var(--gray-900);
}

.faq-answer {
    margin-top: 1rem;
    color: var(--gray-600);
    line-height: 1.7;
    display: none;
}

.faq-item.active .faq-answer {
    display: block;
}

/* Newsletter Section */
.newsletter-form {
    display: flex;
    gap: 0.5rem;
    max-width: 500px;
    margin: 0 auto;
}

.newsletter-form input {
    flex: 1;
    padding: 1rem 1.5rem;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 0.75rem;
    background: rgba(255,255,255,0.1);
    color: white;
    font-size: 1rem;
    backdrop-filter: blur(10px);
}

.newsletter-form input::placeholder {
    color: rgba(255,255,255,0.7);
}

.newsletter-form button {
    padding: 1rem 2rem;
    background: white;
    color: var(--primary);
    border: none;
    border-radius: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.newsletter-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* Default pages */
.page-hero {
    position: relative;
    overflow: hidden;
    padding: 9rem 1.5rem 5rem;
    text-align: center;
    background:
        radial-gradient(circle at 18% 20%, rgba(251, 191, 36, 0.32), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(96, 165, 250, 0.28), transparent 30%),
        linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.16), transparent 45%);
    pointer-events: none;
}

.page-hero .container {
    position: relative;
    max-width: 950px;
}

.page-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

.page-hero .entry-title {
    color: white;
    font-size: clamp(2.5rem, 7vw, 4.75rem);
    font-weight: 900;
    margin-bottom: 1rem;
    text-shadow: 0 4px 10px rgba(15,23,42,0.18);
}

.page-hero p {
    max-width: 720px;
    margin: 0 auto;
    color: rgba(255,255,255,0.94);
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
}

.page-content-section {
    padding: 3rem 1.5rem 5rem;
    background:
        linear-gradient(180deg, #f8fbff 0%, #ffffff 45%),
        var(--gray-50);
}

.page-content-panel {
    max-width: min(860px, calc(100vw - 36px));
    margin: 0 auto;
}

@media (min-width: 922px) and (max-width: 1199px) {
    .page-content-panel {
        max-width: min(860px, calc(100vw - 510px));
    }
}

@media (min-width: 1200px) {
    .page-content-panel {
        max-width: min(860px, calc(100vw - 572px));
    }
}

/* Full-width "builder canvas" templates (e.g. post grids) have no side
   constraint of their own, so on wide screens their content runs edge to
   edge and ends up underneath the fixed left/right floating panels. Reserve
   the same side space .page-content-panel uses, just with a wider cap. */
.posts-page-content > :not(.alignfull) {
    max-width: min(1400px, calc(100vw - 36px));
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 922px) and (max-width: 1199px) {
    .posts-page-content > :not(.alignfull) {
        max-width: min(1400px, calc(100vw - 510px));
    }
}

@media (min-width: 1200px) {
    .posts-page-content > :not(.alignfull) {
        max-width: min(1400px, calc(100vw - 572px));
    }
}

.page-content-panel > * + * {
    margin-top: 1.5rem;
}

.page-content-panel .wp-block-uagb-container.alignfull {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 1.25rem;
    overflow: hidden;
}

.page-content-panel .wp-block-uagb-post-grid,
.page-content-panel .wp-block-uagb-post-carousel {
    background: white;
    border: 1px solid var(--gray-100);
    border-radius: 1.25rem;
    padding: 2rem;
    box-shadow: 0 18px 45px rgba(15,23,42,0.08);
}

.page-content-panel .uagb-post__inner-wrap {
    border-radius: 1rem;
    border-top: 4px solid var(--primary);
    box-shadow: 0 10px 30px rgba(15,23,42,0.08);
}

.page-content-panel .uagb-post__title a {
    color: var(--gray-900);
}

.page-content-panel .uagb-post__cta a {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-radius: 0.75rem;
    color: white;
    font-weight: 700;
}

/* Builder Canvas page template and editor-owned sections */
.builder-canvas {
    background: var(--white, #ffffff);
}

.posts-page-content-section {
    background: var(--white, #ffffff);
}

.builder-canvas-content {
    overflow: hidden;
}

.builder-canvas-content > *,
.posts-page-content > * {
    margin-block-start: 0;
}

.builder-canvas-content > * + *,
.posts-page-content > * + * {
    margin-block-start: 0;
}

.builder-canvas-content .alignfull,
.posts-page-content .alignfull,
.entry-content .alignfull {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.page-content-panel .alignfull {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.page-content-panel .alignwide {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Builder Canvas has no legacy .container wrapper of its own, so top-level
   blocks placed directly on the canvas previously ran edge-to-edge with no
   constraint at all. Contain them to theme.json's contentSize/wideSize the
   same way core block themes do, so alignwide/alignfull stay predictable
   and normal blocks never unexpectedly touch the viewport edges. Uses the
   same CSS custom properties (with the same fallbacks) already relied on
   by the hero width rules below, so editor and frontend stay in sync. */
.builder-canvas-content > :not(.alignwide):not(.alignfull) {
    max-width: var(--wp--style--global--content-size, 950px);
    margin-left: auto;
    margin-right: auto;
}

.builder-canvas-content > .alignwide {
    max-width: var(--wp--style--global--wide-size, 1280px);
    margin-left: auto;
    margin-right: auto;
}

:where(.builder-hero-section) {
    position: relative;
    overflow: hidden;
    min-height: 50px;
    display: flex;
    /* The registered "Marketing Hero" pattern sets its own block-level
       layout:{"orientation":"vertical"}, which generates a higher-specificity
       flex-direction:column rule scoped to that block instance. Any other
       hero built by hand-adding this class (or a pattern edited to drop that
       layout attribute) falls back to flex's row default, collapsing badge/
       heading/subtitle/buttons into a single line. Declare column here so
       stacking is the default regardless of how the class was applied. */
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    background:
        radial-gradient(circle at 16% 18%, rgba(251, 191, 36, 0.32), transparent 28%),
        radial-gradient(circle at 84% 78%, rgba(96, 165, 250, 0.22), transparent 30%),
        linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    text-align: center;
}

:where(.builder-hero-section) > .wp-block-group__inner-container,
.editor-styles-wrapper :where(.builder-hero-section) > .wp-block-group__inner-container {
    width: 100%;
    max-width: var(--wp--style--global--content-size, 950px);
    margin: 0 auto;
}

:where(.builder-hero-section.hero-height-compact) {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

:where(.builder-hero-section.hero-height-standard) {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

:where(.builder-hero-section.hero-height-tall) {
    min-height: 50px;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

:where(.builder-hero-section.hero-height-full) {
    min-height: 50px;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

:where(.builder-hero-section.hero-width-narrow) > .wp-block-group__inner-container {
    max-width: 760px;
}

:where(.builder-hero-section.hero-width-narrow) {
    width: min(760px, calc(100vw - 3rem));
    max-width: min(760px, calc(100vw - 3rem));
    margin-left: 50%;
    margin-right: 0;
    transform: translateX(-50%);
}

:where(.builder-hero-section.hero-width-full) > .wp-block-group__inner-container {
    max-width: none;
}

:where(.builder-hero-section.hero-width-full) {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    transform: none;
}

:where(.builder-hero-section.hero-width-standard) {
    width: min(950px, calc(100vw - 3rem));
    max-width: min(950px, calc(100vw - 3rem));
    margin-left: 50%;
    margin-right: 0;
    transform: translateX(-50%);
}

:where(.builder-hero-section.hero-width-standard) > .wp-block-group__inner-container {
    max-width: 950px;
}

:where(.builder-hero-section.hero-width-wide) {
    width: min(1120px, calc(100vw - 3rem));
    max-width: min(1120px, calc(100vw - 3rem));
    margin-left: 50%;
    margin-right: 0;
    transform: translateX(-50%);
}

:where(.builder-hero-section.hero-width-wide) > .wp-block-group__inner-container {
    max-width: 1120px;
}

:where(.builder-hero-section.hero-text-left) {
    text-align: left;
}

:where(.builder-hero-section.hero-text-left) .builder-hero-badge,
:where(.builder-hero-section.hero-text-left) h1,
:where(.builder-hero-section.hero-text-left) .builder-hero-subtitle,
:where(.builder-hero-section.hero-text-left) .wp-block-buttons {
    margin-left: 0;
    margin-right: auto;
    justify-content: flex-start;
    text-align: left;
}

:where(.builder-hero-section.hero-text-right) {
    text-align: right;
}

:where(.builder-hero-section.hero-text-right) .builder-hero-badge,
:where(.builder-hero-section.hero-text-right) h1,
:where(.builder-hero-section.hero-text-right) .builder-hero-subtitle,
:where(.builder-hero-section.hero-text-right) .wp-block-buttons {
    margin-left: auto;
    margin-right: 0;
    justify-content: flex-end;
    text-align: right;
}

/* ==========================================================================
   AJNanda Section width / alignment / divider controls (core/group presets)
   Additive to the existing .builder-section system above — no class here
   changes the meaning of previously-saved markup that has no width/align/
   divider class, so existing pages keep their current 1180px look.
   ========================================================================== */

.builder-section.section-width-standard > .wp-block-group__inner-container,
.editor-styles-wrapper .builder-section.section-width-standard > .wp-block-group__inner-container {
    max-width: var(--wp--style--global--content-size, 950px);
}

.builder-section.section-width-wide > .wp-block-group__inner-container,
.editor-styles-wrapper .builder-section.section-width-wide > .wp-block-group__inner-container {
    max-width: var(--wp--style--global--wide-size, 1280px);
}

.builder-section.section-width-full.section-content-unconstrained > .wp-block-group__inner-container,
.editor-styles-wrapper .builder-section.section-width-full.section-content-unconstrained > .wp-block-group__inner-container {
    max-width: none;
}

.builder-section.has-content-align-left,
.builder-card.has-content-align-left,
.builder-card-grid.has-content-align-left {
    text-align: left;
}

.builder-section.has-content-align-center,
.builder-card.has-content-align-center,
.builder-card-grid.has-content-align-center {
    text-align: center;
}

.builder-section.has-content-align-right,
.builder-card.has-content-align-right,
.builder-card-grid.has-content-align-right {
    text-align: right;
}

.builder-section[class*="section-divider-"] {
    position: relative;
}

.builder-section.section-divider-angle-top,
.builder-section.section-divider-curve-top {
    margin-top: 3rem;
}

.builder-section.section-divider-angle-bottom,
.builder-section.section-divider-curve-bottom {
    margin-bottom: 3rem;
}

.section-divider-angle-top::before,
.section-divider-curve-top::before {
    content: '';
    position: absolute;
    top: -3rem;
    left: 0;
    width: 100%;
    height: 3rem;
    background-color: inherit;
    pointer-events: none;
}

.section-divider-angle-bottom::after,
.section-divider-curve-bottom::after {
    content: '';
    position: absolute;
    bottom: -3rem;
    left: 0;
    width: 100%;
    height: 3rem;
    background-color: inherit;
    pointer-events: none;
}

.section-divider-angle-top::before { clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.section-divider-angle-bottom::after { clip-path: polygon(0 0, 100% 0, 0 100%); }
.section-divider-curve-top::before { border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.section-divider-curve-bottom::after { border-radius: 50% 50% 0 0 / 100% 100% 0 0; }

/* ==========================================================================
   AJNanda section/hero "dark" tone modifier.

   Follows the existing plain-className-modifier convention already used by
   hero-width-*/hero-height-*/hero-text-* above (rather than introducing a
   second, competing block-style-variation system) and reuses the theme's
   existing --gray-900/--white/--gray-300 tokens — no new colors. Applies to
   .builder-section and .builder-hero-section wrappers; nested AJNanda cards
   keep their own light background by design (see the .builder-cta-panel
   comment above), so a dark section with a card in it still reads clearly.
   ========================================================================== */

.builder-section.section-tone-dark,
.builder-hero-section.hero-tone-dark {
    background-color: var(--gray-900);
    color: var(--white);
}

.builder-section.section-tone-dark h1,
.builder-section.section-tone-dark h2,
.builder-section.section-tone-dark h3,
.builder-section.section-tone-dark h4,
.builder-section.section-tone-dark h5,
.builder-section.section-tone-dark h6,
.builder-hero-section.hero-tone-dark h1,
.builder-hero-section.hero-tone-dark h2,
.builder-hero-section.hero-tone-dark h3 {
    color: var(--white);
}

.builder-section.section-tone-dark p,
.builder-section.section-tone-dark li,
.builder-hero-section.hero-tone-dark p,
.builder-hero-section.hero-tone-dark li {
    color: var(--gray-300);
}

.builder-section.section-tone-dark a:not(.wp-block-button__link),
.builder-hero-section.hero-tone-dark a:not(.wp-block-button__link) {
    color: var(--white);
}

.builder-section.section-tone-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.builder-hero-section.hero-tone-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background: var(--white);
    color: var(--gray-900);
}

.builder-section.section-tone-dark .wp-block-button.is-style-outline .wp-block-button__link,
.builder-hero-section.hero-tone-dark .wp-block-button.is-style-outline .wp-block-button__link {
    border-color: var(--white);
    color: var(--white);
}

.builder-section.section-tone-dark .is-style-ajnanda-eyebrow,
.builder-hero-section.hero-tone-dark .is-style-ajnanda-eyebrow {
    color: var(--accent);
}

/* Editor utility classes for blocks without native size controls. */
.obj-width-25 { width: 25% !important; }
.obj-width-33 { width: 33.333% !important; }
.obj-width-50 { width: 50% !important; }
.obj-width-66 { width: 66.666% !important; }
.obj-width-75 { width: 75% !important; }
.obj-width-100 { width: 100% !important; }

.obj-max-narrow {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.obj-max-standard {
    max-width: 950px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.obj-max-wide {
    max-width: 1120px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.obj-max-full {
    max-width: none !important;
}

.obj-height-160 { min-height: 160px !important; }
.obj-height-240 { min-height: 240px !important; }
.obj-height-320 { min-height: 320px !important; }
.obj-height-480 { min-height: 480px !important; }
.obj-height-640 { min-height: 640px !important; }
.obj-height-screen { min-height: 100vh !important; }

.obj-fixed-160 { height: 160px !important; }
.obj-fixed-240 { height: 240px !important; }
.obj-fixed-320 { height: 320px !important; }
.obj-fixed-480 { height: 480px !important; }
.obj-fixed-640 { height: 640px !important; }

.obj-center {
    margin-left: auto !important;
    margin-right: auto !important;
}

.obj-cover img,
.wp-block-image.obj-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.ajnanda-fit-cover img,
.wp-block-image.ajnanda-fit-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ajnanda-fit-contain img,
.wp-block-image.ajnanda-fit-contain img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ajnanda-fit-fill img,
.wp-block-image.ajnanda-fit-fill img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

:where(.builder-hero-badge) {
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 0.5rem 1.25rem;
    margin: 0 auto 1.25rem;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    color: white;
    font-size: 0.875rem;
    font-weight: 800;
    backdrop-filter: blur(10px);
}

:where(.builder-hero-section) h1 {
    max-width: 980px;
    margin: 0 auto 1.25rem;
    color: white;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 850;
    line-height: 1.08;
}

:where(.builder-hero-subtitle) {
    max-width: 760px;
    margin: 0 auto 2.25rem;
    color: rgba(255,255,255,0.94);
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
}

:where(.builder-hero-section) .wp-block-button__link,
:where(.builder-section) .wp-block-button__link {
    border-radius: 0.75rem;
    padding: 0.95rem 1.45rem;
    font-weight: 800;
}

:where(.builder-hero-section) .wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background: white;
    color: var(--primary);
}

:where(.builder-hero-section) .wp-block-button.is-style-outline .wp-block-button__link {
    border: 2px solid white;
    color: white;
}

.builder-section {
    padding: 5rem 1.5rem;
    /* Token-based (was a hardcoded `white`) — every Section Pattern wraps
       its content in .builder-section, so this one rule is what lets
       Dark Surface Mode (inc/dark-surface-mode.php) recolor page sections
       site-wide just by redefining --white, with no per-pattern changes. */
    background: var(--white, #ffffff);
}

.builder-section-soft {
    background: var(--gray-50);
}

.builder-section > .wp-block-group__inner-container,
.editor-styles-wrapper .builder-section > .wp-block-group__inner-container {
    max-width: 1180px;
    margin: 0 auto;
}

/* Modern Gutenberg no longer wraps a constrained group's children in
   `.wp-block-group__inner-container` above — it applies the width via
   `.is-layout-constrained` directly on the group plus a `:where()` child
   selector (see any core group block's rendered markup/CSS), which made
   the rule above silently dead code against current WordPress: every
   .builder-section's actual content quietly fell back to core's global
   950px content width instead of the theme's intended 1180px, on every
   Section Pattern, on every AJNanda site. Two class selectors here
   (.builder-section.is-layout-constrained) beats core's generated
   single-class `.wp-container-core-group-is-layout-{hash}` selector on
   specificity alone, so this wins regardless of CSS source order and
   needs no `!important`. Kept alongside the legacy rule above rather
   than replacing it, in case any old cached/imported content still
   renders the older wrapper markup. */
.builder-section.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.builder-section h2 {
    margin-bottom: 1rem;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 850;
    background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.builder-section-intro {
    max-width: 760px;
    margin: 0 auto 2rem;
    color: var(--gray-600);
    font-size: 1.125rem;
}

.builder-card-grid {
    gap: 1.5rem;
}

.builder-card {
    height: 100%;
    padding: 2rem;
    border: 1px solid rgba(37,99,235,0.12);
    border-top: 4px solid var(--primary);
    border-radius: 1rem;
    background: var(--white, #ffffff);
    /* Set explicitly, not left to inherit — a card can be placed inside a
       section that sets color:white (e.g. .builder-hero-section), and
       without its own color the card's white background would swallow
       any text that doesn't have its own override. */
    color: var(--gray-800);
    box-shadow: 0 12px 30px rgba(15,23,42,0.07);
}

.builder-card h3,
.builder-cta-panel h3 {
    margin-bottom: 0.75rem;
    color: var(--gray-900);
}

.builder-card p,
.builder-cta-panel p,
.builder-split p {
    color: var(--gray-600);
}

.builder-split {
    gap: 2rem;
}

.builder-cta-panel {
    padding: 2rem;
    border: 1px solid rgba(37,99,235,0.12);
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(245,158,11,0.12));
    /* See .builder-card above: set explicitly so a light-on-dark ancestor
       (e.g. .builder-hero-section) can't leave this light-background panel
       with inherited white text. */
    color: var(--gray-800);
    box-shadow: 0 16px 36px rgba(15,23,42,0.08);
}

/* ==========================================================================
   AJNanda native block styles: cards, icon/initial tiles, checklists,
   eyebrow labels, equal-height grids.

   These register as native WordPress "Styles" on core/group, core/column,
   core/columns and core/list (see js/editor-controls.js) so editors pick
   them from the block's Styles panel — no manual CSS classes required.
   Visual language reuses the existing .builder-card / .aj-card tokens
   (var(--gray-200), the same border-radius and shadow values) instead of
   introducing a fourth card convention.
   ========================================================================== */

.is-style-ajnanda-card,
.is-style-ajnanda-card-elevated,
.is-style-ajnanda-card-bordered,
.is-style-ajnanda-card-soft,
.is-style-ajnanda-card-linked {
    height: 100%;
    padding: 1.75rem;
    border-radius: 1rem;
    background: var(--white, #ffffff);
    /* Set explicitly, not left to inherit — same white-on-white trap as
       .builder-card above: these light-background cards need their own
       text color so a dark/light-text ancestor section can't leave their
       contents unreadable. */
    color: var(--gray-800, #1f2937);
    transition: transform var(--transition, 300ms ease), box-shadow var(--transition, 300ms ease);
}

.is-style-ajnanda-card {
    border: 1px solid var(--gray-200, #e5e7eb);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.is-style-ajnanda-card-elevated {
    border: 1px solid transparent;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
}

.is-style-ajnanda-card-elevated:hover,
.is-style-ajnanda-card-elevated:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 28px 55px rgba(15, 23, 42, 0.16);
}

.is-style-ajnanda-card-bordered {
    border: 1px solid var(--gray-200, #e5e7eb);
    box-shadow: none;
}

.is-style-ajnanda-card-soft {
    border: 1px solid transparent;
    background: var(--gray-50, #f9fafb);
    box-shadow: none;
}

.is-style-ajnanda-card:hover,
.is-style-ajnanda-card:focus-within,
.is-style-ajnanda-card-bordered:hover,
.is-style-ajnanda-card-bordered:focus-within {
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
}

/* Linked card: makes the last link/button in the card clickable across its
   entire surface while keeping a single, real, keyboard-focusable link
   (the "stretched link" pattern) instead of layering a fake click target
   over the whole block. */
.is-style-ajnanda-card-linked {
    position: relative;
    border: 1px solid var(--gray-200, #e5e7eb);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.is-style-ajnanda-card-linked a:last-of-type {
    position: static;
}

.is-style-ajnanda-card-linked a:last-of-type::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.is-style-ajnanda-card-linked:hover,
.is-style-ajnanda-card-linked:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
}

.is-style-ajnanda-card-linked:focus-within {
    outline: 2px solid var(--primary, #2563eb);
    outline-offset: 2px;
}

/* Equal-height card grid: apply to the parent core/columns block so every
   column (and the card inside it) stretches to match the tallest column.
   WordPress core/columns already stacks responsively on its own. */
.wp-block-columns.is-style-ajnanda-equal-height {
    align-items: stretch;
}

.wp-block-columns.is-style-ajnanda-equal-height > .wp-block-column {
    display: flex;
}

.wp-block-columns.is-style-ajnanda-equal-height > .wp-block-column > * {
    width: 100%;
}

/* Icon / initial tile: a compact badge for a short text initial, emoji, or
   an existing icon block/image. Background + text color come from the
   block's native color supports (theme.json palette), so no new color
   system is introduced. */
.is-style-ajnanda-icon-tile,
.is-style-ajnanda-icon-tile-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    margin-bottom: 1rem;
    background: var(--gray-100, #f3f4f6);
    color: var(--primary, #2563eb);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.is-style-ajnanda-icon-tile {
    border-radius: 0.75rem;
}

.is-style-ajnanda-icon-tile-round {
    border-radius: 999px;
}

/* Eyebrow label: a small caps/badge line used above a headline (hero,
   section intro, card). Generic — works on core/paragraph or core/heading. */
.is-style-ajnanda-eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: var(--gray-100, #f3f4f6);
    color: var(--primary, #2563eb);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

:where(.builder-hero-section) .is-style-ajnanda-eyebrow,
.wp-block-cover .is-style-ajnanda-eyebrow {
    background: rgba(255, 255, 255, 0.16);
    color: inherit;
}

/* Checklist: a native core/list style that swaps bullets for a check mark,
   used by the proof-point pattern and reusable anywhere a short list of
   confirmations is needed. The "-inline" sibling style keeps the same
   check-mark treatment but wraps items into a compact, wrapping row
   instead of a vertical list (used for the proof-point row pattern). */
.wp-block-list.is-style-ajnanda-checklist,
.wp-block-list.is-style-ajnanda-checklist-inline {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.wp-block-list.is-style-ajnanda-checklist > li,
.wp-block-list.is-style-ajnanda-checklist-inline > li {
    position: relative;
    padding-left: 1.75rem;
}

.wp-block-list.is-style-ajnanda-checklist > li::before,
.wp-block-list.is-style-ajnanda-checklist-inline > li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0.05em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: var(--gray-100, #f3f4f6);
    color: var(--success, #059669);
    font-size: 0.75rem;
    font-weight: 700;
}

.wp-block-list.is-style-ajnanda-checklist-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.75rem;
}

.wp-block-list.is-style-ajnanda-checklist-inline > li {
    margin: 0;
}

:where(.builder-hero-section) .wp-block-list.is-style-ajnanda-checklist > li::before,
:where(.builder-hero-section) .wp-block-list.is-style-ajnanda-checklist-inline > li::before,
.wp-block-cover .wp-block-list.is-style-ajnanda-checklist > li::before,
.wp-block-cover .wp-block-list.is-style-ajnanda-checklist-inline > li::before {
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
}

/* Statistics row */
.ajnanda-stat-value {
    margin-bottom: 0.25rem;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.1;
}

.ajnanda-stat-label {
    color: var(--gray-600, #4b5563);
    font-size: 0.95rem;
}

.ajnanda-stat-container {
    padding: 2rem;
    border-radius: 1rem;
}

.ajnanda-stat-container.is-style-ajnanda-card-bordered,
.ajnanda-stat-container.is-style-ajnanda-card-elevated {
    text-align: center;
}

/* Native CSS Grid tile layout: WordPress writes the responsive
   minmax()/auto-fit template inline based on minimumColumnWidth, this is
   just a sensible gap fallback if blockGap is not customized. */
.ajnanda-tile-grid {
    gap: 1.5rem;
}

/* Process/steps: numbered badge sits above the heading in each column. */
.ajnanda-step-card .is-style-ajnanda-icon-tile,
.ajnanda-step-card .is-style-ajnanda-icon-tile-round {
    margin-left: auto;
    margin-right: auto;
}

/* Spectra/UAG fallback styles for pages edited after the plugin is removed. */
.page-content-panel .wp-block-uagb-container {
    box-sizing: border-box;
    width: 100%;
}

.page-content-panel .wp-block-uagb-container.alignfull,
.page-content-panel .wp-block-uagb-container.uagb-is-root-container {
    margin: 0 auto;
}

.page-content-panel .uagb-container-inner-blocks-wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.page-content-panel .uagb-block-c052f59c {
    padding: 4rem 2rem 7rem;
    background: linear-gradient(180deg, #f7fbfe 0%, #ffffff 100%);
    text-align: center;
}

.page-content-panel .uagb-block-c052f59c .uagb-container-inner-blocks-wrap {
    max-width: 900px;
}

.page-content-panel .uagb-block-c052f59c h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 1.25rem;
}

.page-content-panel .uagb-block-c052f59c p {
    color: var(--gray-600);
    font-size: 1.125rem;
    line-height: 1.8;
}

.page-content-panel .uagb-block-e0a2ece5 {
    margin-top: -4rem;
    padding: 0 2rem 3rem;
}

.page-content-panel .uagb-block-738c718b {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    padding: 2rem;
    background: white;
    border-radius: 1.25rem;
    box-shadow: 0 18px 45px rgba(15,23,42,0.08);
}

.page-content-panel .uagb-block-eb02ba64,
.page-content-panel .uagb-block-f4a37b9d {
    text-align: center;
}

.page-content-panel .uagb-block-eb02ba64 h4,
.page-content-panel .uagb-block-f4a37b9d h4 {
    color: var(--primary);
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 0.5rem;
}

.page-content-panel .uagb-block-b167b7d5 {
    padding: 4rem 2rem;
    background: radial-gradient(circle at 20% 20%, #eef6ff 0%, #ffffff 60%);
}

.page-content-panel .uagb-block-b167b7d5 > .uagb-container-inner-blocks-wrap {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 3rem;
    align-items: start;
}

.page-content-panel .uagb-block-7b3400e0 {
    display: grid;
    gap: 1.25rem;
}

.page-content-panel .uagb-block-77321848,
.page-content-panel .uagb-block-a08e6638,
.page-content-panel .uagb-block-2bdc3da2,
.page-content-panel .uagb-block-3250d8c6 {
    padding: 1.5rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 12px 30px rgba(15,23,42,0.08);
}

.page-content-panel .uagb-infobox-icon-left {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.page-content-panel .uagb-ifb-icon-wrap,
.page-content-panel .uagb-iconbox-icon-wrap {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #eef6ff;
}

.page-content-panel .uagb-ifb-icon-wrap svg,
.page-content-panel .uagb-iconbox-icon-wrap svg,
.page-content-panel .uagb-ifb-content > svg {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    display: block;
    fill: var(--secondary);
}

.page-content-panel .uagb-ifb-image-content {
    flex: 0 0 auto;
}

.page-content-panel .uagb-ifb-image-content img {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    object-fit: cover;
    border-radius: 999px;
}

.page-content-panel .uagb-ifb-title {
    margin: 0 0 0.5rem;
}

.page-content-panel .uagb-ifb-desc {
    color: var(--gray-600);
    line-height: 1.7;
    margin: 0;
}

.page-content-panel .uagb-block-fc0661c3 {
    padding: 4rem 2rem;
    background: linear-gradient(135deg, var(--gray-900), var(--secondary));
    color: white;
    border-radius: 1.25rem;
}

.page-content-panel .uagb-block-fc0661c3 > .uagb-container-inner-blocks-wrap {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.page-content-panel .uagb-block-fc0661c3 h3,
.page-content-panel .uagb-block-fc0661c3 h6 {
    color: white;
}

.page-content-panel .uagb-block-fc0661c3 h3 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    line-height: 1.4;
}

/* Blog / Knowledge Base */
.blog-index-section {
    padding: 2rem 1.5rem 5rem;
    /* Token-based (was a hardcoded light-blue-to-white gradient) so this
       responds to Dark Surface Mode like every other surface in the
       theme — see the "Token-based" comments elsewhere in this file. */
    background: linear-gradient(180deg, var(--gray-50, #f8fbff) 0%, var(--white, #ffffff) 45%);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.blog-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--white, #ffffff);
    border: 1px solid var(--gray-100);
    border-radius: 1rem;
    box-shadow: 0 14px 35px rgba(15,23,42,0.08);
    transition: var(--transition);
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 45px rgba(15,23,42,0.12);
    border-color: var(--primary);
}

.blog-card-image {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--gray-100);
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.04);
}

.blog-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.5rem;
}

.blog-card-category {
    color: var(--primary);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.blog-card-category a {
    color: inherit;
}

.blog-card-category a:hover {
    text-decoration: underline;
}

.blog-card-date {
    color: var(--gray-600);
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.blog-card-title {
    font-size: 1.35rem;
    margin-bottom: 0.85rem;
}

.blog-card-title a {
    color: var(--gray-900);
}

.blog-card-title a:hover {
    color: var(--primary);
}

.blog-card-content p {
    color: var(--gray-600);
    margin-bottom: 1.25rem;
}

.blog-card-link {
    margin-top: auto;
    align-self: flex-start;
    color: var(--primary);
    font-weight: 700;
}

.blog-pagination {
    margin-top: 3rem;
    text-align: center;
}

.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    margin: 0.25rem;
    padding: 0 0.85rem;
    border-radius: 0.75rem;
    background: var(--white, #ffffff);
    border: 1px solid var(--gray-200);
    color: var(--gray-800);
    font-weight: 700;
}

.blog-pagination .page-numbers.current,
.blog-pagination .page-numbers:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.blog-empty {
    max-width: 760px;
    margin: 0 auto;
    padding: 3rem;
    text-align: center;
    background: var(--white, #ffffff);
    border-radius: 1rem;
    box-shadow: 0 14px 35px rgba(15,23,42,0.08);
}

/* Native editable About page sections */
.page-content-panel .about-intro-section {
    padding: 4rem 2rem 7rem;
    background: linear-gradient(180deg, #f7fbfe 0%, #ffffff 100%);
    text-align: center;
    border-radius: 1.25rem;
}

.page-content-panel .about-intro-section h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    max-width: 900px;
    margin: 0 auto 1.25rem;
}

.page-content-panel .about-intro-section p {
    max-width: 850px;
    margin: 0 auto;
    color: var(--gray-600);
    font-size: 1.125rem;
    line-height: 1.8;
}

.page-content-panel .about-stats-row {
    max-width: 900px;
    margin: -4rem auto 4rem;
    padding: 2rem;
    background: white;
    border-radius: 1.25rem;
    box-shadow: 0 18px 45px rgba(15,23,42,0.08);
}

.page-content-panel .about-stats-row h3 {
    color: var(--primary);
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 0.5rem;
}

.page-content-panel .about-stats-row p {
    color: var(--gray-600);
    margin: 0;
}

.page-content-panel .about-values-section {
    padding: 4rem 2rem;
    background: radial-gradient(circle at 20% 20%, #eef6ff 0%, #ffffff 60%);
    border-radius: 1.25rem;
}

.page-content-panel .about-values-section > .wp-block-columns {
    gap: 3rem;
}

.page-content-panel .about-values-section p {
    color: var(--gray-600);
    line-height: 1.7;
}

.page-content-panel .about-value-card {
    margin-bottom: 1.25rem;
    padding: 1.5rem;
    background: white;
    border-left: 4px solid var(--primary);
    border-radius: 1rem;
    box-shadow: 0 12px 30px rgba(15,23,42,0.08);
}

.page-content-panel .about-value-card h3 {
    margin-bottom: 0.5rem;
}

.page-content-panel .about-value-card p {
    margin: 0;
}

.page-content-panel .about-quote-section {
    padding: 4rem 2rem;
    background: linear-gradient(135deg, var(--gray-900), var(--secondary));
    color: white;
    border-radius: 1.25rem;
}

.page-content-panel .about-quote-section blockquote {
    max-width: 980px;
    margin: 0 auto;
    border-left: 4px solid var(--accent);
    padding-left: 1.5rem;
}

.page-content-panel .about-quote-section p {
    color: white;
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.4;
}

.page-content-panel .about-quote-section cite {
    display: block;
    margin-top: 1rem;
    color: rgba(255,255,255,0.86);
    font-style: normal;
    font-weight: 700;
}

/* Native editable Home page sections */
.editor-front-page > .wp-block-group {
    margin-top: 0;
}

.editor-front-page {
    /* Token-based (was a hardcoded light blue-white) — normally hidden
       behind opaque .builder-section children, but still real background
       (visible in any gap, and the base case for a front page with no
       full-width sections), so it needs to follow Dark Surface Mode too. */
    background: var(--gray-50, #f3f8fb);
}

.editor-front-page > :where(:not(.alignfull):not(.alignwide)) {
    width: min(100% - 3rem, var(--wp--style--global--content-size, 950px));
    margin-right: auto;
    margin-left: auto;
}

.editor-front-page > :where(.alignwide) {
    width: min(100% - 3rem, var(--wp--style--global--wide-size, 1280px));
    margin-right: auto;
    margin-left: auto;
}

.editor-front-page > :where(.alignfull):not(.builder-hero-section) {
    width: 100%;
    max-width: none;
}

.editor-front-page > :where(.wp-block-uagb-container.alignfull.uagb-is-root-container) > .uagb-container-inner-blocks-wrap {
    width: min(100% - 3rem, var(--wp--style--global--wide-size, 1280px));
    max-width: var(--wp--style--global--wide-size, 1280px);
}

.editor-front-page .wp-block-uagb-advanced-heading :where(h1, .h1) {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.08;
}

.editor-front-page .wp-block-uagb-advanced-heading :where(h2, .h2) {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 760;
    line-height: 1.12;
}

.editor-front-page :where(.wp-block-uagb-buttons) .uagb-buttons-repeater.wp-block-button__link,
.page-content-panel :where(.wp-block-uagb-buttons) .uagb-buttons-repeater.wp-block-button__link,
.builder-canvas-content :where(.wp-block-uagb-buttons) .uagb-buttons-repeater.wp-block-button__link,
.editor-front-page :where(.wp-block-uagb-marketing-button) .wp-block-button__link,
.page-content-panel :where(.wp-block-uagb-marketing-button) .wp-block-button__link,
.builder-canvas-content :where(.wp-block-uagb-marketing-button) .wp-block-button__link {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.editor-front-page :where(.wp-block-uagb-buttons) .uagb-buttons-repeater.wp-block-button__link:hover,
.page-content-panel :where(.wp-block-uagb-buttons) .uagb-buttons-repeater.wp-block-button__link:hover,
.builder-canvas-content :where(.wp-block-uagb-buttons) .uagb-buttons-repeater.wp-block-button__link:hover,
.editor-front-page :where(.wp-block-uagb-marketing-button) .wp-block-button__link:hover,
.page-content-panel :where(.wp-block-uagb-marketing-button) .wp-block-button__link:hover,
.builder-canvas-content :where(.wp-block-uagb-marketing-button) .wp-block-button__link:hover {
    background: var(--primary-dark);
    color: #fff;
    border-color: var(--primary-dark);
}

.editor-front-page .wp-block-verse,
.editor-styles-wrapper .wp-block-verse {
    width: min(100% - 3rem, var(--wp--style--global--wide-size, 1280px));
    margin: 1.5rem auto;
    padding: 1.5rem 1.75rem;
    background: var(--gray-100);
    color: #064e5f;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 1rem;
    line-height: 1.7;
    white-space: pre-wrap;
}

.home-hero-section {
    position: relative;
    overflow: hidden;
    min-height: var(--ajn-min-height-desktop, 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--ajn-padding-top-desktop, 3rem);
    padding-right: var(--ajn-padding-right-desktop, 1.5rem);
    padding-bottom: var(--ajn-padding-bottom-desktop, 3rem);
    padding-left: var(--ajn-padding-left-desktop, 1.5rem);
    background:
        radial-gradient(circle at 14% 20%, rgba(255,255,255,0.16), transparent 24%),
        radial-gradient(circle at 84% 76%, rgba(255,255,255,0.12), transparent 28%),
        linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    text-align: center;
}

.home-hero-section > .wp-block-group__inner-container,
.editor-styles-wrapper .home-hero-section > .wp-block-group__inner-container {
    width: 100%;
    max-width: 1120px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.home-hero-section h1 {
    max-width: 1080px;
    margin: 0 auto 1.5rem;
    color: white;
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 900;
    line-height: 1.1;
    text-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.home-hero-section h1::first-line {
    color: white;
}

.home-hero-badge {
    display: inline-block;
    width: auto;
    padding: 0.5rem 1.5rem;
    margin: 0 auto 1.5rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.2);
    color: white;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

.home-hero-subtitle {
    max-width: 780px;
    margin: 0 auto 2.5rem;
    color: rgba(255,255,255,0.95);
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    line-height: 1.7;
}

/* "What's included" chips -- reinforces the same claims already made in the feature cards
   further down the page (Registered Agent Service, Same-Day Setup, Instant Notifications,
   Privacy Protection), surfaced above the fold since that's what a visitor actually sees before
   deciding whether to scroll or click a CTA button. */
.home-hero-benefits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    max-width: 920px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.home-hero-benefits li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.25);
    backdrop-filter: blur(10px);
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
}

.home-hero-benefits li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    font-size: 0.7rem;
}

.home-hero-section .wp-block-button__link {
    border-radius: 0.75rem;
    padding: 1rem 2rem;
    font-weight: 700;
}

.home-hero-section .wp-block-button:not(.is-style-outline) .wp-block-button__link {
    background: white;
    color: var(--primary);
}

.home-hero-section .wp-block-button.is-style-outline .wp-block-button__link {
    border: 2px solid white;
    color: white;
}

/* ── Home page: hero cover ──────────────────────────────────────── */
.upos-home-hero-cover {
    border-radius: 18px;
    overflow: hidden;
}

/* ── Home page: action buttons (Text us / Live Chat / etc.) ─────── */
.home-action-buttons .wp-block-button__link {
    font-weight: 700;
    color: #fff !important;
    border: none !important;
    transition: filter 0.18s, transform 0.18s;
}
.home-action-buttons .wp-block-button__link:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}
.home-action-buttons .wp-block-button:nth-child(1) .wp-block-button__link { background: #2563eb !important; }
.home-action-buttons .wp-block-button:nth-child(2) .wp-block-button__link { background: #16a34a !important; }
.home-action-buttons .wp-block-button:nth-child(3) .wp-block-button__link { background: #ea580c !important; }
.home-action-buttons .wp-block-button:nth-child(4) .wp-block-button__link { background: #7c3aed !important; }
.home-action-buttons .wp-block-button:nth-child(5) .wp-block-button__link { background: #0d9488 !important; }

/* ── Home page: feature strip cards ────────────────────────────── */
.home-features-strip .wp-block-columns {
    gap: 1rem;
}
.home-features-strip .wp-block-column {
    padding: 22px 16px 18px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.07);
    border-top: 3px solid transparent;
    text-align: center;
}
.home-features-strip .wp-block-column:nth-child(1) { border-top-color: #2563eb; }
.home-features-strip .wp-block-column:nth-child(2) { border-top-color: #16a34a; }
.home-features-strip .wp-block-column:nth-child(3) { border-top-color: #ea580c; }
.home-features-strip .wp-block-column:nth-child(4) { border-top-color: #7c3aed; }
.home-features-strip .wp-block-column h4 {
    color: #0f2c36;
    font-weight: 700;
    margin-bottom: 6px;
}
.home-features-strip .wp-block-column p {
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.home-trust-row {
    max-width: 820px;
    margin: 3rem auto 0;
    color: rgba(255,255,255,0.9);
}

/* is-not-stacked-on-mobile (set on this row in the editor) keeps these 3 columns side-by-side
   even on small phones instead of the usual full-width mobile stack, so each column can be quite
   narrow. Core's own .wp-block-column CSS sets word-break:break-word, which combined with the old
   fixed 1.35rem size mid-word-broke "Charlotte, NC" into "Charlott"/"e, NC" -- same root cause as
   the stats-section fix above, sized off the column's own width for the same reason. */
.home-trust-row strong {
    color: white;
    /* Bounds tuned against the row's own actual column width, which plateaus at ~136px past
       640px (.home-trust-row caps at max-width:760px) while a bare vw value would keep growing
       past that -- capped lower here so it doesn't outgrow the column it's actually sizing for. */
    font-size: clamp(0.72rem, 3.6vw, 1.25rem);
    white-space: nowrap;
}

.home-registered-agent-section,
.home-features-section,
.home-reviews-section,
.home-faq-section,
.home-knowledge-section {
    padding: 5rem 1.5rem;
}

/* Knowledge Base is the last white/gray section before the CTA band -- its own 5rem bottom
   padding plus the CTA's 5rem top padding (below) stacked into a large, purposeless gap between
   "View All Articles" and the CTA content. Trimmed on this side only; the other sections above
   keep the full 5rem so their own rhythm is untouched. */
.home-knowledge-section {
    padding-bottom: 2.5rem;
}

.home-registered-agent-section h2,
.home-features-section h2,
.home-reviews-section h2,
.home-faq-section h2,
.home-knowledge-section h2,
.page-content-panel h2 {
    font-weight: 760;
    background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.home-registered-agent-section h3,
.home-features-section h3,
.home-reviews-section h3,
.home-faq-section h3,
.home-knowledge-section h3,
.page-content-panel h3 {
    color: var(--gray-900);
    font-weight: 700;
}

.home-registered-agent-section {
    background: white;
}

.home-registered-agent-section > .wp-block-group__inner-container,
.home-features-section > .wp-block-group__inner-container,
.home-reviews-section > .wp-block-group__inner-container,
.home-faq-section > .wp-block-group__inner-container,
.home-knowledge-section > .wp-block-group__inner-container,
.home-cta-section > .wp-block-group__inner-container {
    max-width: 1280px;
    margin: 0 auto;
}

.home-registered-agent-section > .wp-block-group__inner-container > p,
.home-features-section > .wp-block-group__inner-container > p,
.home-reviews-section > .wp-block-group__inner-container > p,
.home-faq-section > .wp-block-group__inner-container > p,
.home-knowledge-section > .wp-block-group__inner-container > p {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    color: var(--gray-600);
    font-size: 1.125rem;
    line-height: 1.7;
}

.home-info-card,
.home-feature-card {
    background: white;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 1rem;
    box-shadow: 0 12px 30px rgba(15,23,42,0.07);
}

.home-info-card {
    max-width: 900px;
    margin: 2rem auto 0;
    padding: 2rem;
    border-left: 4px solid var(--primary);
    background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(16,185,129,0.08));
}

.home-info-card ul {
    margin-bottom: 0;
}

.home-info-card li {
    margin: 0.75rem 0;
    color: var(--gray-700);
}

.home-features-section,
.home-reviews-section,
.home-knowledge-section {
    background: var(--gray-50);
}

.home-card-grid {
    gap: 2rem;
    margin-top: 2rem;
}

.home-feature-card {
    height: 100%;
    padding: 2rem;
    border-top: 4px solid var(--primary);
    transition: var(--transition);
}

.home-card-grid .wp-block-column:nth-child(2) .home-feature-card {
    border-top-color: var(--secondary);
}

.home-card-grid .wp-block-column:nth-child(3) .home-feature-card {
    border-top-color: var(--accent);
}

.home-feature-card:hover {
    transform: translateY(-6px);
    border-color: var(--primary);
    box-shadow: 0 20px 38px rgba(15,23,42,0.12);
}

.home-feature-card p {
    color: var(--gray-600);
}

.home-stats-section {
    padding: 5rem 1.5rem;
    background: linear-gradient(135deg, var(--gray-900), var(--gray-800));
    color: white;
}

.home-stats-section .wp-block-column {
    /* Lets the h3 below size itself off its own column's actual width (cqw) instead of the
       viewport's (vw). A vw-based size has no way to know how wide its column really ended up —
       whether from ordinary responsive layout or the floating-panel content-size clearance above
       — so at some combination of viewport width and column count it's guaranteed to eventually
       be wider than whatever room the column actually has. Sizing off the column itself scales
       correctly no matter what set that width. */
    container-type: inline-size;
}

.home-stats-section h3 {
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #60a5fa, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* 17cqw keeps the longest stat word ("Secure", ~3.55x its font-size wide in this bold
       typeface) at roughly 60% of the column's width -- comfortable headroom against the
       ~2.25rem/3.5rem-viewport-wide behavior. The old clamp(3rem,5vw,5rem) computed to 72px at
       1440px, wide enough on its own to force "Secure" to wrap mid-word into "Secu"/"re". */
    font-size: clamp(1.5rem, 17cqw, 3.25rem);
    line-height: 1;
    white-space: nowrap;
}

.home-stats-section p {
    color: #d1d5db;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.google-reviews-block {
    max-width: 1120px;
    margin: 2rem auto 0;
}

.google-reviews-summary {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    color: var(--gray-600);
}

.google-reviews-summary strong {
    color: var(--gray-900);
}

.google-reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.google-review-card,
.google-review-empty {
    padding: 1.75rem;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-top: 4px solid var(--secondary);
    border-radius: 1rem;
    background: var(--white, #ffffff);
    box-shadow: 0 12px 30px rgba(15,23,42,0.07);
}

.google-review-card p,
.google-review-empty p {
    color: var(--gray-600);
    line-height: 1.7;
}

.google-review-stars {
    margin-bottom: 1rem;
    color: var(--accent);
    letter-spacing: 0.05em;
}

.google-review-card footer {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 1rem;
    color: var(--gray-500);
}

.google-review-card footer strong {
    color: var(--gray-900);
}

.google-review-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.google-review-actions .button,
.google-review-actions .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.35rem;
    border-radius: 0.75rem;
    background: var(--primary);
    color: white;
    font-weight: 700;
    text-decoration: none;
}

.google-review-actions .button-secondary,
.google-review-actions .button-secondary .wp-block-button__link {
    background: var(--accent);
    color: var(--gray-900);
}

.home-reviews-section .google-review-empty {
    max-width: 760px;
    margin: 2rem auto 0;
    text-align: center;
}

.home-faq-section {
    background: white;
}

.home-faq-section .wp-block-details {
    max-width: 820px;
    margin: 1rem auto;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    background: white;
    box-shadow: 0 8px 20px rgba(15,23,42,0.05);
}

.home-faq-section summary {
    color: var(--gray-900);
    cursor: pointer;
    font-weight: 800;
}

.home-faq-section details p {
    color: var(--gray-600);
    line-height: 1.7;
}

.home-latest-posts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 3rem 0;
}

.home-latest-posts li {
    padding: 1.5rem;
    background: white;
    border: 1px solid var(--gray-100);
    border-radius: 1rem;
    box-shadow: 0 12px 30px rgba(15,23,42,0.08);
}

.home-latest-posts a {
    display: block;
    color: var(--gray-900);
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

.home-latest-posts .wp-block-latest-posts__post-excerpt {
    color: var(--gray-600);
    line-height: 1.7;
}

.home-cta-section {
    padding: 3rem 1.5rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    text-align: center;
}

.home-cta-section h2,
.home-cta-section p {
    color: white;
}

.home-cta-section .wp-block-button__link {
    background: white;
    color: var(--primary);
    border-radius: 0.75rem;
    font-weight: 800;
}

/* WP Formy */
.contact-hero {
    min-height: auto;
    padding: 8rem 1.5rem 5rem;
}

.contact-hero h1 {
    color: white;
    font-size: clamp(2.5rem, 6vw, 4rem);
    margin-bottom: 1rem;
}

.contact-hero p {
    color: rgba(255,255,255,0.95);
    font-size: 1.25rem;
    max-width: 720px;
    margin: 0 auto;
}

.contact-editor-section {
    padding: 8rem 1.5rem 5rem;
    background: var(--gray-50);
}

.contact-editor-content {
    max-width: 820px;
    margin: 0 auto;
    background: white;
    padding: 3rem;
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.contact-editor-content > * + * {
    margin-top: 1.5rem;
}

.contact-editor-content > p:has(.wp-formy-frontend-form),
.contact-editor-content > p:empty {
    margin: 0;
}

.contact-form-panel .wp-formy-frontend-form {
    border: 0 !important;
    box-shadow: none !important;
}

.contact-form-panel .wp-formy-form-title h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.contact-form-panel .wp-formy-form-title p {
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

.contact-form-panel .wp-formy-frontend-form input,
.contact-form-panel .wp-formy-frontend-form select,
.contact-form-panel .wp-formy-frontend-form textarea {
    min-height: 48px;
    font-size: 1rem;
}

.contact-form-panel .wp-formy-frontend-form textarea {
    min-height: 140px;
}

.contact-form-panel .wp-formy-submit button {
    width: 100%;
    min-height: 52px;
    cursor: pointer;
    transition: var(--transition);
}

.contact-form-panel .wp-formy-submit button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(37,99,235,0.24);
}

@media (max-width: 768px) {
    body.admin-bar .site-header {
        top: 46px;
    }

    .main-navigation {
        position: absolute;
        top: calc(100% + 0.75rem);
        left: 1rem;
        right: 1rem;
        z-index: 1001;
    }

    /* Full-overlay mobile menu (Customizer: Header -> Mobile Menu Style).
       Reuses the existing .nav-menu.mobile-active toggle from main.js —
       only the open panel's position/size changes, not the JS. */
    .mobile-nav-style-overlay .main-navigation,
    .mobile-nav-style-overlay .ajn-builder-cell-primary-menu {
        position: static;
    }

    .mobile-nav-style-overlay .nav-menu.mobile-active {
        position: fixed;
        inset: 0;
        z-index: 2000;
        width: 100vw;
        height: 100vh;
        overflow-y: auto;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        background: var(--ajn-header-background, #ffffff);
        padding: 2rem 1.5rem;
    }

    .header-builder-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 1rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    .header-builder-container .ajn-builder-row {
        display: contents;
    }
    .header-builder-container .ajn-builder-cell {
        width: auto;
    }
    .header-builder-container .ajn-builder-cell-site-logo {
        grid-column: 1;
        justify-content: flex-start;
    }
    .header-builder-container .ajn-builder-cell-primary-menu {
        position: absolute;
        top: calc(100% + 0.75rem);
        right: 1rem;
        left: 1rem;
        z-index: 1001;
        width: auto;
        justify-content: stretch;
    }
    .header-builder-container > .mobile-menu-toggle {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: center;
    }
    .header-builder-container .ajn-builder-cell:not(.ajn-builder-cell-site-logo):not(.ajn-builder-cell-primary-menu) {
        display: none;
    }
    .header-layout-centered-menu .site-branding {
        position: static;
    }
    .header-layout-centered-menu .header-container,
    .header-layout-stacked-center .header-container {
        align-items: center;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    .header-layout-stacked-center .site-branding,
    .header-layout-stacked-center .main-navigation {
        width: auto;
        flex-shrink: 1;
        text-align: left;
    }
    .ajn-builder-cell {
        flex: var(--ajn-builder-width-mobile, 1) 1 0;
    }
    .footer-builder-container .ajn-builder-row {
        align-items: stretch;
        flex-direction: column;
    }
    .footer-builder-container .ajn-builder-cell,
    .footer-builder-container .ajn-builder-cell-primary-menu,
    .footer-builder-container .ajn-builder-cell-footer-menu,
    .footer-builder-container .ajn-builder-cell-site-logo {
        justify-content: center;
        width: 100%;
    }
    .nav-menu {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.75rem;
        border: 1px solid var(--gray-200);
        border-radius: 0.75rem;
        background: var(--ajn-header-submenu-background);
        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
        backdrop-filter: blur(10px);
        max-height: calc(100dvh - 5rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nav-menu.mobile-active {
        display: flex;
    }
    body.menu-open {
        overflow: hidden;
    }
    .nav-menu a {
        display: block;
        width: 100%;
        padding: 0.85rem 1rem;
    }
    .nav-menu .sub-menu,
    .nav-menu .sub-menu .sub-menu {
        position: static;
        display: none;
        min-width: 0;
        margin: 0;
        padding: 0.25rem 0 0.25rem 1rem;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .nav-menu li.submenu-open > .sub-menu {
        display: block;
    }
    .nav-menu .sub-menu a {
        white-space: normal;
    }
    /* Chevron rotates to point up when submenu is open */
    .nav-menu > li.menu-item-has-children > a::after {
        transition: transform 0.2s ease;
    }
    .nav-menu > li.menu-item-has-children.submenu-open > a::after {
        transform: rotate(-135deg);
        top: 2px;
    }
    /* Right-chevron on nested items */
    .nav-menu .sub-menu > li.menu-item-has-children > a::after {
        transition: transform 0.2s ease;
    }
    .nav-menu .sub-menu > li.menu-item-has-children.submenu-open > a::after {
        transform: rotate(-45deg);
    }
    .mobile-menu-toggle {
        display: flex;
    }
    .footer-menu-bar {
        align-items: center;
        flex-direction: column;
        justify-content: center;
        min-height: 120px;
        text-align: center;
    }
    .footer-menu-navigation {
        margin-left: 0;
    }
    .footer-menu {
        justify-content: center;
    }
    .footer-menu .sub-menu,
    .footer-menu .sub-menu .sub-menu {
        position: static;
        display: none;
        min-width: 0;
        margin: 0.5rem 0 0;
    }
    .footer-menu li:hover > .sub-menu,
    .footer-menu li:focus-within > .sub-menu {
        display: block;
    }
    .footer-menu .sub-menu a {
        white-space: normal;
    }
    .ajn-customizer-builder-cell {
        flex: var(--ajn-builder-width-mobile, 1) 1 0;
    }
    .hero { min-height: 80vh; padding: 5rem 1rem 3rem; }
    .hero-cta { flex-direction: column; }
    .btn { width: 100%; justify-content: center; }
    .features-grid, .stats-grid { grid-template-columns: 1fr; }
    .stats-grid { gap: 2.5rem; }
    .process-step { flex-direction: column; text-align: center; }
    .newsletter-form { flex-direction: column; }
    .page-hero { padding: 7rem 1rem 4rem; }
    .page-content-section,
    .contact-editor-section { padding: 2.5rem 1rem 4rem; }
    .builder-hero-section {
        min-height: 50px;
        padding: 1rem;
    }
    .builder-hero-section.hero-height-compact,
    .builder-hero-section.hero-height-standard {
        min-height: 50px;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .builder-section {
        padding: 3.5rem 1rem;
    }
    .builder-card,
    .builder-cta-panel {
        padding: 1.5rem;
    }
    .page-content-panel .wp-block-uagb-post-grid,
    .page-content-panel .wp-block-uagb-post-carousel {
        padding: 1.25rem;
    }
    .page-content-panel .uagb-block-c052f59c,
    .page-content-panel .uagb-block-e0a2ece5,
    .page-content-panel .uagb-block-b167b7d5,
    .page-content-panel .uagb-block-fc0661c3 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .page-content-panel .uagb-block-738c718b,
    .page-content-panel .uagb-block-b167b7d5 > .uagb-container-inner-blocks-wrap {
        grid-template-columns: 1fr;
    }
    .page-content-panel .uagb-block-fc0661c3 > .uagb-container-inner-blocks-wrap,
    .page-content-panel .uagb-infobox-icon-left {
        flex-direction: column;
    }
    .page-content-panel .about-intro-section,
    .page-content-panel .about-values-section,
    .page-content-panel .about-quote-section {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .page-content-panel .about-stats-row {
        margin-top: -3rem;
        padding: 1.25rem;
    }
    .page-content-panel .uagb-ifb-icon-wrap,
    .page-content-panel .uagb-iconbox-icon-wrap {
        flex-basis: 48px;
    }
    .contact-form-panel {
        padding: 1.5rem !important;
    }
    .home-hero-section {
        min-height: var(--ajn-min-height-mobile, var(--ajn-min-height-tablet, var(--ajn-min-height-desktop, 50px)));
        padding-top: var(--ajn-padding-top-mobile, var(--ajn-padding-top-tablet, var(--ajn-padding-top-desktop, 2rem)));
        padding-right: var(--ajn-padding-right-mobile, var(--ajn-padding-right-tablet, var(--ajn-padding-right-desktop, 1rem)));
        padding-bottom: var(--ajn-padding-bottom-mobile, var(--ajn-padding-bottom-tablet, var(--ajn-padding-bottom-desktop, 2rem)));
        padding-left: var(--ajn-padding-left-mobile, var(--ajn-padding-left-tablet, var(--ajn-padding-left-desktop, 1rem)));
    }
    .home-registered-agent-section,
    .home-features-section,
    .home-reviews-section,
    .home-faq-section,
    .home-knowledge-section,
    .home-stats-section,
    .home-cta-section {
        padding: 3.5rem 1rem;
    }
    .google-reviews-summary,
    .google-review-actions {
        flex-direction: column;
        align-items: center;
    }
}

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 999px; }

/* Made with Bob */


.ajn-responsive-height {
    height: var(--ajn-height-desktop, auto) !important;
    min-height: 0 !important;
}

.editor-styles-wrapper .ajn-responsive-height {
    height: var(--ajn-height-desktop, auto) !important;
    min-height: 0 !important;
}

.ajn-responsive-height > img,
.ajn-responsive-height .wp-block-image img {
    max-height: 100%;
}

@media (max-width: 1024px) {
    .ajn-builder-cell {
        flex: var(--ajn-builder-width-tablet, var(--ajn-builder-width-desktop, 1)) 1 0;
    }

    .ajn-customizer-builder-cell {
        flex: var(--ajn-builder-width-tablet, var(--ajn-builder-width-desktop, 1)) 1 0;
    }

    .ajn-responsive-height {
        height: var(--ajn-height-tablet, var(--ajn-height-desktop, auto)) !important;
    }

    .editor-styles-wrapper .ajn-responsive-height {
        height: var(--ajn-height-tablet, var(--ajn-height-desktop, auto)) !important;
    }
}

@media (max-width: 768px) {
    .ajn-responsive-height {
        height: var(--ajn-height-mobile, var(--ajn-height-tablet, var(--ajn-height-desktop, auto))) !important;
    }

    .editor-styles-wrapper .ajn-responsive-height {
        height: var(--ajn-height-mobile, var(--ajn-height-tablet, var(--ajn-height-desktop, auto))) !important;
    }
}

/* AJNanda block layout controls - responsive min-height, fixed height, and padding */
.ajn-layout-control {
    min-height: var(--ajn-min-height-desktop, auto) !important;
    padding-top: var(--ajn-padding-top-desktop, revert) !important;
    padding-right: var(--ajn-padding-right-desktop, revert) !important;
    padding-bottom: var(--ajn-padding-bottom-desktop, revert) !important;
    padding-left: var(--ajn-padding-left-desktop, revert) !important;
}

.ajn-layout-control.ajn-fixed-height {
    height: var(--ajn-height-desktop, auto) !important;
    min-height: 0 !important;
}

.ajn-layout-control.ajn-overflow-hidden {
    overflow: hidden !important;
}

.editor-styles-wrapper .ajn-layout-control {
    min-height: var(--ajn-min-height-desktop, auto) !important;
    padding-top: var(--ajn-padding-top-desktop, revert) !important;
    padding-right: var(--ajn-padding-right-desktop, revert) !important;
    padding-bottom: var(--ajn-padding-bottom-desktop, revert) !important;
    padding-left: var(--ajn-padding-left-desktop, revert) !important;
}

.editor-styles-wrapper .ajn-layout-control.ajn-fixed-height {
    height: var(--ajn-height-desktop, auto) !important;
    min-height: 0 !important;
}

@media (max-width: 1024px) {
    .ajn-layout-control,
    .editor-styles-wrapper .ajn-layout-control {
        min-height: var(--ajn-min-height-tablet, var(--ajn-min-height-desktop, auto)) !important;
        padding-top: var(--ajn-padding-top-tablet, var(--ajn-padding-top-desktop, revert)) !important;
        padding-right: var(--ajn-padding-right-tablet, var(--ajn-padding-right-desktop, revert)) !important;
        padding-bottom: var(--ajn-padding-bottom-tablet, var(--ajn-padding-bottom-desktop, revert)) !important;
        padding-left: var(--ajn-padding-left-tablet, var(--ajn-padding-left-desktop, revert)) !important;
    }

    .ajn-layout-control.ajn-fixed-height,
    .editor-styles-wrapper .ajn-layout-control.ajn-fixed-height {
        height: var(--ajn-height-tablet, var(--ajn-height-desktop, auto)) !important;
    }
}

@media (max-width: 768px) {
    .ajn-layout-control,
    .editor-styles-wrapper .ajn-layout-control {
        min-height: var(--ajn-min-height-mobile, var(--ajn-min-height-tablet, var(--ajn-min-height-desktop, auto))) !important;
        padding-top: var(--ajn-padding-top-mobile, var(--ajn-padding-top-tablet, var(--ajn-padding-top-desktop, revert))) !important;
        padding-right: var(--ajn-padding-right-mobile, var(--ajn-padding-right-tablet, var(--ajn-padding-right-desktop, revert))) !important;
        padding-bottom: var(--ajn-padding-bottom-mobile, var(--ajn-padding-bottom-tablet, var(--ajn-padding-bottom-desktop, revert))) !important;
        padding-left: var(--ajn-padding-left-mobile, var(--ajn-padding-left-tablet, var(--ajn-padding-left-desktop, revert))) !important;
    }

    .ajn-layout-control.ajn-fixed-height,
    .editor-styles-wrapper .ajn-layout-control.ajn-fixed-height {
        height: var(--ajn-height-mobile, var(--ajn-height-tablet, var(--ajn-height-desktop, auto))) !important;
    }
}

/* AJNanda clean hero system - style only the actual hero, not the wrapper */
body .site-main .page-hero-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    overflow: visible;
}

body .site-main {
    --ajn-after-hero-gap: 10px;
}

body .site-main .has-leading-hero-content {
    padding-top: 0 !important;
}

body .site-main .page-content-section:has(> .container > .page-content-panel > .builder-hero-section:first-child),
body .site-main .page-content-section:has(> .container > .page-content-panel > .wp-block-spacer:first-child + .builder-hero-section) {
    padding-top: 0 !important;
}

body .site-main .page-hero-content + .page-content-section {
    padding-top: var(--ajn-after-hero-gap) !important;
}

body .site-main .page-hero-content + .page-builder-content > .builder-section:first-child,
body .site-main .builder-canvas-content > .builder-hero-section:first-child + .builder-section {
    padding-top: var(--ajn-after-hero-gap) !important;
}

body .site-main .page-hero-content + .page-builder-content > :first-child:not(.builder-section),
body .site-main .builder-canvas-content > .builder-hero-section:first-child + :not(.builder-section) {
    margin-top: var(--ajn-after-hero-gap) !important;
}

body .site-main .page-hero-content + .page-content-section .page-content-panel > :first-child,
body .site-main .page-hero-content + .page-builder-content > :first-child {
    margin-top: 0 !important;
}

body .site-main .page-hero-content + .page-content-section .page-content-panel > .uagb-block-c052f59c:first-child,
body .site-main .page-hero-content + .page-content-section .page-content-panel > .about-intro-section:first-child {
    padding-top: var(--ajn-after-hero-gap) !important;
}

body .site-main .has-leading-hero-content .page-content-panel > .ajforms-frontend-form:first-child,
body .site-main .has-leading-hero-content .page-content-panel > .ajforms-conversation-form:first-child,
body .site-main .has-leading-hero-content .page-content-panel > form[class*="ajforms-"]:first-child,
body .site-main .page-hero-content + .page-content-section .page-content-panel > .ajforms-frontend-form:first-child,
body .site-main .page-hero-content + .page-content-section .page-content-panel > .ajforms-conversation-form:first-child,
body .site-main .page-hero-content + .page-content-section .page-content-panel > form[class*="ajforms-"]:first-child {
    margin-top: 0 !important;
}

body .site-main .builder-canvas-content.page-hero-content > .builder-hero-section:first-child,
body .site-main .builder-canvas-content.page-hero-content > .wp-block-group.builder-hero-section:first-child,
body .site-main .builder-canvas-content.page-hero-content > .wp-block-stack.builder-hero-section:first-child,
body .site-main .posts-page-content > .builder-hero-section:first-child,
body .site-main .posts-page-content > .wp-block-group.builder-hero-section:first-child,
body .site-main .builder-canvas-content > .builder-hero-section:first-child,
body .site-main .builder-canvas-content > .wp-block-group.builder-hero-section:first-child,
body .site-main .page-hero.blog-hero {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    min-height: var(--ajn-min-height-desktop, var(--ajn-hero-min-height-desktop, 50px)) !important;
    height: auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    display: grid !important;
    align-content: center !important;
    justify-content: center !important;
    justify-items: center !important;
    place-content: center !important;
    place-items: center !important;
    text-align: center !important;
    padding-top: var(--ajn-padding-top-desktop, var(--ajn-hero-padding-top-desktop, 1rem)) !important;
    padding-right: var(--ajn-padding-right-desktop, 1.5rem) !important;
    padding-bottom: var(--ajn-padding-bottom-desktop, var(--ajn-hero-padding-bottom-desktop, 1rem)) !important;
    padding-left: var(--ajn-padding-left-desktop, 1.5rem) !important;
    background:
        radial-gradient(circle at 16% 18%, rgba(251, 191, 36, 0.32), transparent 28%),
        radial-gradient(circle at 84% 78%, rgba(96, 165, 250, 0.22), transparent 30%),
        linear-gradient(135deg, var(--ajn-hero-bg-1, var(--primary)), var(--ajn-hero-bg-2, var(--secondary))) !important;
    color: #fff !important;
}

/* Page-level block layout values override Hero Defaults for only that saved hero block. */
body .site-main .builder-hero-section.ajn-layout-control {
    min-height: var(--ajn-min-height-desktop, var(--ajn-hero-min-height-desktop, 50px)) !important;
    padding-top: var(--ajn-padding-top-desktop, var(--ajn-hero-padding-top-desktop, 1rem)) !important;
    padding-right: var(--ajn-padding-right-desktop, 1.5rem) !important;
    padding-bottom: var(--ajn-padding-bottom-desktop, var(--ajn-hero-padding-bottom-desktop, 1rem)) !important;
    padding-left: var(--ajn-padding-left-desktop, 1.5rem) !important;
}

body .site-main .builder-hero-section.ajn-fixed-height,
body .site-main .builder-hero-section.ajn-responsive-height {
    height: var(--ajn-height-desktop, var(--ajn-min-height-desktop, var(--ajn-hero-min-height-desktop, 50px))) !important;
    min-height: 0 !important;
    overflow: visible !important;
}

body .site-main .builder-hero-section.ajn-overflow-hidden {
    overflow: hidden !important;
}

body .site-main .builder-hero-section.ajn-has-height-override:not(.ajn-has-padding-override) {
    min-height: var(--ajn-min-height-desktop, var(--ajn-hero-min-height-desktop, 50px)) !important;
    padding-top: var(--ajn-padding-top-desktop, 0) !important;
    padding-bottom: var(--ajn-padding-bottom-desktop, 0) !important;
}

body .site-main .builder-hero-section > .wp-block-group__inner-container,
body .site-main .page-hero.blog-hero .container {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    align-content: center !important;
    justify-content: center !important;
    justify-items: center !important;
    place-content: center !important;
    place-items: center !important;
    text-align: center !important;
    background: transparent !important;
}

body .site-main .builder-hero-section .builder-hero-badge,
body .site-main .page-hero.blog-hero .page-hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: max-content !important;
    margin: 0 auto 1.25rem !important;
    padding: 0.5rem 1.25rem !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    border-radius: 999px !important;
    background: var(--ajn-hero-badge-bg, rgba(255,255,255,0.16)) !important;
    color: var(--ajn-hero-badge-text-color, #ffffff) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    position: static !important;
    transform: none !important;
}

body .site-main .builder-hero-section h1,
body .site-main .page-hero.blog-hero .entry-title {
    display: block !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto 1.25rem !important;
    padding: 0 !important;
    color: var(--ajn-hero-heading-color, #ffffff) !important;
    text-align: center !important;
    line-height: 1.08 !important;
    position: static !important;
    transform: none !important;
}

body .site-main .builder-hero-section .builder-hero-subtitle,
body .site-main .page-hero.blog-hero p {
    display: block !important;
    max-width: 820px !important;
    margin: 0 auto !important;
    color: var(--ajn-hero-subtitle-color, rgba(255,255,255,0.94)) !important;
    text-align: center !important;
    line-height: 1.6 !important;
    position: static !important;
    transform: none !important;
}

body .site-main .builder-hero-section :where(h1, h2, h3, h4, h5, h6, p, .wp-block-heading, .wp-block-buttons) {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

body .site-main .builder-hero-section.hero-width-full > .wp-block-group__inner-container {
    max-width: none !important;
}

body .site-main .entry-content > .builder-hero-section.hero-width-narrow,
body .site-main .entry-content > .wp-block-group.builder-hero-section.hero-width-narrow,
body .site-main .page-content-panel > .builder-hero-section.hero-width-narrow,
body .site-main .page-content-panel > .wp-block-group.builder-hero-section.hero-width-narrow,
body .site-main .builder-canvas-content > .builder-hero-section.hero-width-narrow,
body .site-main .builder-canvas-content > .wp-block-group.builder-hero-section.hero-width-narrow,
body .site-main .posts-page-content > .builder-hero-section.hero-width-narrow,
body .site-main .posts-page-content > .wp-block-group.builder-hero-section.hero-width-narrow {
    width: min(760px, calc(100vw - 3rem)) !important;
    max-width: min(760px, calc(100vw - 3rem)) !important;
    margin-left: 50% !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
}

body .site-main .entry-content > .builder-hero-section.hero-width-standard,
body .site-main .entry-content > .wp-block-group.builder-hero-section.hero-width-standard,
body .site-main .page-content-panel > .builder-hero-section.hero-width-standard,
body .site-main .page-content-panel > .wp-block-group.builder-hero-section.hero-width-standard,
body .site-main .builder-canvas-content > .builder-hero-section.hero-width-standard,
body .site-main .builder-canvas-content > .wp-block-group.builder-hero-section.hero-width-standard,
body .site-main .posts-page-content > .builder-hero-section.hero-width-standard,
body .site-main .posts-page-content > .wp-block-group.builder-hero-section.hero-width-standard {
    width: min(950px, calc(100vw - 3rem)) !important;
    max-width: min(950px, calc(100vw - 3rem)) !important;
    margin-left: 50% !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
}

body .site-main .entry-content > .builder-hero-section.hero-width-wide,
body .site-main .entry-content > .wp-block-group.builder-hero-section.hero-width-wide,
body .site-main .page-content-panel > .builder-hero-section.hero-width-wide,
body .site-main .page-content-panel > .wp-block-group.builder-hero-section.hero-width-wide,
body .site-main .builder-canvas-content > .builder-hero-section.hero-width-wide,
body .site-main .builder-canvas-content > .wp-block-group.builder-hero-section.hero-width-wide,
body .site-main .posts-page-content > .builder-hero-section.hero-width-wide,
body .site-main .posts-page-content > .wp-block-group.builder-hero-section.hero-width-wide {
    width: min(1120px, calc(100vw - 3rem)) !important;
    max-width: min(1120px, calc(100vw - 3rem)) !important;
    margin-left: 50% !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
}

body .site-main .entry-content > .builder-hero-section.hero-width-full,
body .site-main .entry-content > .wp-block-group.builder-hero-section.hero-width-full,
body .site-main .page-content-panel > .builder-hero-section.hero-width-full,
body .site-main .page-content-panel > .wp-block-group.builder-hero-section.hero-width-full,
body .site-main .builder-canvas-content > .builder-hero-section.hero-width-full,
body .site-main .builder-canvas-content > .wp-block-group.builder-hero-section.hero-width-full,
body .site-main .posts-page-content > .builder-hero-section.hero-width-full,
body .site-main .posts-page-content > .wp-block-group.builder-hero-section.hero-width-full {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    transform: none !important;
}

body .site-main .builder-hero-section.hero-width-narrow > .wp-block-group__inner-container {
    max-width: 760px !important;
}

body .site-main .builder-hero-section.hero-width-standard > .wp-block-group__inner-container {
    max-width: 950px !important;
}

body .site-main .builder-hero-section.hero-width-wide > .wp-block-group__inner-container {
    max-width: 1120px !important;
}

body .site-main .builder-hero-section :where(.has-text-align-left) {
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
}

body .site-main .builder-hero-section :where(.has-text-align-right) {
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: right !important;
}

body .site-main .builder-hero-section > :last-child,
body .site-main .builder-hero-section > .wp-block-group__inner-container > :last-child {
    margin-bottom: 0 !important;
}

body .site-main .builder-hero-section.ajn-has-height-override > :only-child,
body .site-main .builder-hero-section.ajn-has-height-override > .wp-block-group__inner-container > :only-child {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body .site-main .builder-hero-section .wp-block-buttons {
    justify-content: center !important;
}

@media (max-width: 1024px) {
    body .site-main .builder-canvas-content.page-hero-content > .builder-hero-section:first-child,
    body .site-main .builder-canvas-content.page-hero-content > .wp-block-group.builder-hero-section:first-child,
    body .site-main .builder-canvas-content.page-hero-content > .wp-block-stack.builder-hero-section:first-child,
    body .site-main .posts-page-content > .builder-hero-section:first-child,
    body .site-main .posts-page-content > .wp-block-group.builder-hero-section:first-child,
    body .site-main .builder-canvas-content > .builder-hero-section:first-child,
    body .site-main .builder-canvas-content > .wp-block-group.builder-hero-section:first-child,
    body .site-main .page-hero.blog-hero,
    body .site-main .builder-hero-section.ajn-layout-control {
        min-height: var(--ajn-min-height-tablet, var(--ajn-min-height-desktop, var(--ajn-hero-min-height-tablet, var(--ajn-hero-min-height-desktop, 50px)))) !important;
        padding-top: var(--ajn-padding-top-tablet, var(--ajn-padding-top-desktop, var(--ajn-hero-padding-top-tablet, var(--ajn-hero-padding-top-desktop, 1rem)))) !important;
        padding-right: var(--ajn-padding-right-tablet, var(--ajn-padding-right-desktop, 1.5rem)) !important;
        padding-bottom: var(--ajn-padding-bottom-tablet, var(--ajn-padding-bottom-desktop, var(--ajn-hero-padding-bottom-tablet, var(--ajn-hero-padding-bottom-desktop, 1rem)))) !important;
        padding-left: var(--ajn-padding-left-tablet, var(--ajn-padding-left-desktop, 1.5rem)) !important;
    }

    body .site-main .builder-hero-section.ajn-fixed-height,
    body .site-main .builder-hero-section.ajn-responsive-height {
        height: var(--ajn-height-tablet, var(--ajn-height-desktop, var(--ajn-min-height-tablet, var(--ajn-min-height-desktop, var(--ajn-hero-min-height-tablet, var(--ajn-hero-min-height-desktop, 50px)))))) !important;
    }

    body .site-main .builder-hero-section.ajn-has-height-override:not(.ajn-has-padding-override) {
        min-height: var(--ajn-min-height-tablet, var(--ajn-min-height-desktop, var(--ajn-hero-min-height-tablet, var(--ajn-hero-min-height-desktop, 50px)))) !important;
        padding-top: var(--ajn-padding-top-tablet, var(--ajn-padding-top-desktop, 0)) !important;
        padding-bottom: var(--ajn-padding-bottom-tablet, var(--ajn-padding-bottom-desktop, 0)) !important;
    }
}

@media (max-width: 768px) {
    body .site-main .builder-canvas-content.page-hero-content > .builder-hero-section:first-child,
    body .site-main .builder-canvas-content.page-hero-content > .wp-block-group.builder-hero-section:first-child,
    body .site-main .builder-canvas-content.page-hero-content > .wp-block-stack.builder-hero-section:first-child,
    body .site-main .posts-page-content > .builder-hero-section:first-child,
    body .site-main .posts-page-content > .wp-block-group.builder-hero-section:first-child,
    body .site-main .builder-canvas-content > .builder-hero-section:first-child,
    body .site-main .builder-canvas-content > .wp-block-group.builder-hero-section:first-child,
    body .site-main .page-hero.blog-hero,
    body .site-main .builder-hero-section.ajn-layout-control {
        min-height: var(--ajn-min-height-mobile, var(--ajn-min-height-tablet, var(--ajn-min-height-desktop, var(--ajn-hero-min-height-mobile, var(--ajn-hero-min-height-tablet, var(--ajn-hero-min-height-desktop, 50px)))))) !important;
        padding-top: var(--ajn-padding-top-mobile, var(--ajn-padding-top-tablet, var(--ajn-padding-top-desktop, var(--ajn-hero-padding-top-mobile, var(--ajn-hero-padding-top-tablet, var(--ajn-hero-padding-top-desktop, 1rem)))))) !important;
        padding-right: var(--ajn-padding-right-mobile, var(--ajn-padding-right-tablet, var(--ajn-padding-right-desktop, 1rem))) !important;
        padding-bottom: var(--ajn-padding-bottom-mobile, var(--ajn-padding-bottom-tablet, var(--ajn-padding-bottom-desktop, var(--ajn-hero-padding-bottom-mobile, var(--ajn-hero-padding-bottom-tablet, var(--ajn-hero-padding-bottom-desktop, 1rem)))))) !important;
        padding-left: var(--ajn-padding-left-mobile, var(--ajn-padding-left-tablet, var(--ajn-padding-left-desktop, 1rem))) !important;
    }

    body .site-main .builder-hero-section.ajn-fixed-height,
    body .site-main .builder-hero-section.ajn-responsive-height {
        height: var(--ajn-height-mobile, var(--ajn-height-tablet, var(--ajn-height-desktop, var(--ajn-min-height-mobile, var(--ajn-min-height-tablet, var(--ajn-min-height-desktop, var(--ajn-hero-min-height-mobile, var(--ajn-hero-min-height-tablet, var(--ajn-hero-min-height-desktop, 50px))))))))) !important;
    }

    body .site-main .builder-hero-section.ajn-has-height-override:not(.ajn-has-padding-override) {
        min-height: var(--ajn-min-height-mobile, var(--ajn-min-height-tablet, var(--ajn-min-height-desktop, var(--ajn-hero-min-height-mobile, var(--ajn-hero-min-height-tablet, var(--ajn-hero-min-height-desktop, 50px)))))) !important;
        padding-top: var(--ajn-padding-top-mobile, var(--ajn-padding-top-tablet, var(--ajn-padding-top-desktop, 0))) !important;
        padding-bottom: var(--ajn-padding-bottom-mobile, var(--ajn-padding-bottom-tablet, var(--ajn-padding-bottom-desktop, 0))) !important;
    }
}

/* ============================================================
   ACCESSIBILITY & POLISH — consolidated from inline/JS sources
   ============================================================ */

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 100000;
    padding: 0.75rem 1.5rem;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 0 0 0.5rem 0.5rem;
    text-decoration: none;
    transition: top 0.15s ease;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid var(--primary-dark);
    outline-offset: 2px;
}

/* Focus rings for keyboard navigation */
.nav-menu a:focus-visible,
.nav-menu .sub-menu a:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}
.mobile-menu-toggle:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Search form (replaces inline styles + event handlers) */
.search-form {
    max-width: 500px;
    margin: 0 auto;
}
.search-form-inner {
    display: flex;
    gap: 0.5rem;
}
.search-field {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid var(--gray-300);
    border-radius: 0.5rem;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: var(--white, #ffffff);
    color: var(--gray-900);
}
.search-field:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.search-submit {
    padding: 0.75rem 1.5rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}
.search-submit:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.22);
}
.search-submit:focus-visible {
    outline: 3px solid var(--primary-dark);
    outline-offset: 2px;
}

/* Scroll-to-top button (was dynamically injected from JS) */
.scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 999;
}
.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
}
.scroll-to-top:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.scroll-to-top:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 3px;
}

/* Ripple effect (was dynamically injected from JS) */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    transform: scale(0);
    animation: ripple-animation 0.6s ease-out;
    pointer-events: none;
}
@keyframes ripple-animation {
    to { transform: scale(4); opacity: 0; }
}

/* Feature icon hover (was dynamically injected from JS) */
.feature-icon { transition: transform 0.3s ease; }

/* Section scroll-reveal (was dynamically injected from JS) */
/* Only active when JS has run — avoids invisible content if JS fails */
.js section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.js section.revealed {
    opacity: 1;
    transform: none;
}

/* Page load fade-in (was dynamically injected from JS) */
.js body.loaded { animation: ajn-fade-in 0.4s ease-in; }
@keyframes ajn-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Form validation (replaces alert()) */
.form-validation-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 0.5rem;
    color: #dc2626;
    font-size: 0.9rem;
}
input.error,
textarea.error {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

/* Single post — entry header & meta */
.entry-header {
    padding: 2rem 0 1.25rem;
    max-width: 800px;
    margin: 0 auto;
}
.entry-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1.18;
    margin-bottom: 0.75rem;
    color: var(--gray-900);
}
.entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: center;
    color: var(--gray-600);
    font-size: 0.875rem;
}
.entry-meta .entry-author a {
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
}
.entry-meta .entry-author a:hover { text-decoration: underline; }
.entry-meta .entry-date,
.entry-meta .entry-read-time { color: var(--gray-600); }
.entry-meta .entry-read-time::before { content: '·'; margin-right: 1.25rem; }

/* Single post — thumbnail and content */
.post-thumbnail {
    max-width: 800px;
    margin: 0 auto 2rem;
    border-radius: 1rem;
    overflow: hidden;
}
.post-thumbnail-img {
    width: 100%;
    height: auto;
    display: block;
}
.single-entry-content {
    padding: 0 0 3rem;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}
.single-entry-footer {
    padding: 1.5rem 0 3rem;
    border-top: 1px solid var(--gray-200);
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--gray-600);
}
.entry-footer-label { font-weight: 600; color: var(--gray-700); }

/* single.php now wraps the_post_navigation() in its own .container (for
   mobile edge spacing), same as .entry-header/.single-entry-content's parent.
   Match those exactly: self-constrain to the 800px reading column with NO
   horizontal padding of its own — a rule with both max-width:800px AND its
   own horizontal padding shifts its text ~1.5rem right of the flush-left
   text in .entry-header/.single-entry-content, which sit inside the same
   .container without any padding of their own. */
.post-navigation {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 0 3rem;
}

/* Feature card — icon animates on hover via CSS (not JS) */
.feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); }

/* Process steps — hidden until JS-driven IntersectionObserver reveals them */
.js .process-step { opacity: 0; }

/* Contact form success message */
.form-success-message {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

/* Submit button success state */
.btn.btn-sent {
    background: var(--success) !important;
    border-color: var(--success) !important;
}

/* 404 page */
.error-404.not-found {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 1.5rem;
}
.error-404-inner { max-width: 600px; margin: 0 auto; }
.error-404-code {
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    line-height: 1;
}
.error-404-title { font-size: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 1.5rem; }
.error-404-message { font-size: 1.125rem; color: var(--gray-600); margin-bottom: 2.5rem; }
.error-404-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}
.btn-outline {
    background: var(--gray-100);
    color: var(--gray-800);
    border: 2px solid var(--gray-300);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-outline:hover { background: var(--gray-200); border-color: var(--gray-400); }
.error-404-search-label { font-size: 1.25rem; margin-bottom: 1rem; }

/* Author bio on single posts */
.author-bio {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 1rem;
    padding: 2rem;
    margin: 2.5rem auto;
    max-width: 800px;
}
.author-bio-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}
.author-bio-name {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    color: var(--gray-900);
}
.author-bio-description { color: var(--gray-600); font-size: 0.95rem; line-height: 1.6; margin: 0; }
@media (max-width: 600px) {
    .author-bio { flex-direction: column; }
}

/* Related posts on single posts */
.related-posts {
    max-width: 800px;
    margin: 0 auto 3rem;
}
.related-posts-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--gray-200);
}
.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}
.related-post-card {
    border: 1px solid var(--gray-200);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}
.related-post-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}
.related-post-thumb img { width: 100%; height: 140px; object-fit: cover; display: block; }
.related-post-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 140px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--gray-100)), color-mix(in srgb, var(--secondary) 12%, var(--gray-100)));
    color: color-mix(in srgb, var(--primary) 45%, var(--gray-300));
}
.related-post-info { padding: 0.875rem 1rem; }
.related-post-date { font-size: 0.8rem; color: var(--gray-600); margin-bottom: 0.35rem; }
.related-post-title { font-size: 0.95rem; font-weight: 600; color: var(--gray-900); line-height: 1.4; margin: 0; }