/* ============================================================
   DEJANMARKOVIC.COM - Custom Theme CSS v2.0
   Phase 1: Global Styles + Navigation
   ============================================================ */
 

/* ============================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */

/* Default: Light Theme */
:root {
    /* Brand */
    --brand-primary:    #2563EB;
    --brand-hover:      #1D4ED8;
    --brand-shadow:     rgba(37, 99, 235, 0.3);
    --brand-shadow-lg:  rgba(37, 99, 235, 0.4);

    /* Backgrounds */
    --bg-primary:       #F8FAFC;
    --bg-surface:       #FFFFFF;
    --bg-section:       #F1F5F9;
    --bg-elevated:      #FFFFFF;
    --hero-bg-image:    url('../images/light_background.png');

    /* Borders */
    --border:           #E2E8F0;
    --border-subtle:    #F1F5F9;

    /* Text */
    --text-primary:     #0F172A;
    --text-secondary:   #6B7280;
    --text-heading:     #2a3449;
    --text-muted:       #818a91;
    --text-subtle:      #64748B;

    /* Navigation */
    --nav-bg:           rgba(255, 255, 255, 0.92);
    --nav-link:         #64748B;
    --nav-link-hover:   #2563EB;

    /* Ghost Button */
    --btn-ghost-border: #CBD5E1;
    --btn-ghost-text:   #0F172A; 
    --btn-ghost-hover:  #F1F5F9;

    /* Typography */
    --font-primary:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Radius */
    --radius-sm:        6px;
    --radius-md:        10px;
    --radius-lg:        16px;

    /* Transitions */
    --transition:       0.25s ease;
    --transition-fast:  0.15s ease;

    /* Button Gradient */
    --btn-gradient:       linear-gradient(to right, #2563EB 0%, #60A5FA 100%);
    --btn-gradient-hover: linear-gradient(to right, #1D4ED8 0%, #3B82F6 100%);

    /* Shadows */
    --shadow-nav:       0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);
    --shadow-btn:       0 8px 20px rgba(37, 99, 235, 0.3);
}

/* Dark Theme */
[data-theme="dark"] {
    /* Brand */
    --brand-primary:    #3B82F6;
    --brand-hover:      #2563EB;
    --brand-shadow:     rgba(59, 130, 246, 0.4);
    --brand-shadow-lg:  rgba(59, 130, 246, 0.5);

    /* Backgrounds */
    --bg-primary:       #0F172A;
    --bg-surface:       #1E293B;
    --bg-section:       #1E293B;
    --bg-elevated:      #243447;
    --hero-bg-image:    url('../images/dark_background.png');

    /* Borders */
    --border:           #334155;
    --border-subtle:    #1E293B;

    /* Text */
    --text-primary:     #F8FAFC;
    --text-secondary:   #CBD5E1;
    --text-heading:     #E2E8F0;
    --text-muted:       #94A3B8;
    --text-subtle:      #64748B;

    /* Navigation */
    --nav-bg:           rgba(15, 23, 42, 0.92);
    --nav-link:         #94A3B8;
    --nav-link-hover:   #3B82F6;

    /* Ghost Button */
    --btn-ghost-border: #334155;
    --btn-ghost-text:   #F8FAFC;
    --btn-ghost-hover:  #1E293B;

    /* Shadows */
    --shadow-nav:       0 1px 3px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.2);
    --shadow-btn:       0 8px 20px rgba(59, 130, 246, 0.4);
}


/* ============================================================
   2. BASE RESET & GLOBAL
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-family: var(--font-primary);
    font-size: 16px; /* base for rem calculations - do not convert to rem */
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    margin: 0;
    padding-top: 3.75rem; /* offset for fixed navbar */
    transition: background-color var(--transition), color var(--transition);
}

img {
    max-width: 100%;
    height: auto;
}

ul li {
    font-family: var(--font-primary);
    color: var(--text-muted);
}


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: var(--font-primary) !important;
    color: var(--text-heading) !important;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0;
    transition: color var(--transition);
}

h1, .h1 {
    font-size: clamp(2rem, 5vw, 2.875rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    line-height: 1.1 !important;
}

h2, .h2 {
    font-size: clamp(1.625rem, 3.5vw, 1.625rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.015em;
}

h3, .h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.25rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
}

h4, .h4 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}

h5, .h5 {
    font-size: 1rem !important;
    font-weight: 600 !important;
}

h6, .h6 {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-subtle) !important;
}

p {
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-muted);
    transition: color var(--transition);
}

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

a:hover {
    color: var(--brand-hover);
    text-decoration: none;
}

strong, b {
    font-weight: 600;
}


/* ============================================================
   4. NAVIGATION
   ============================================================ */

/* Outer wrapper — fixed to viewport */
.wrapper-navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    overflow: visible;
}

/* The <nav> element */
.site-navigation {
    background-color: var(--nav-bg) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 0 !important;
    position: sticky !important;
    top: 0;
    z-index: 1030 !important;
    transition: background-color var(--transition),
                border-color var(--transition),
                box-shadow var(--transition);
}

.site-navigation.scrolled {
    box-shadow: var(--shadow-nav);
}

/* Container */
.site-navigation .container {
    display: flex !important;
    align-items: center;
    height: 3.75rem;
    max-width: 75rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    gap: 0;
}

/* ---- Logo ---- */
.navbar-header {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 0;
}

.navbar-brand {
    font-family: var(--font-primary) !important;
    font-size: 1.0625rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    letter-spacing: -0.02em;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1;
    white-space: nowrap;
    transition: color var(--transition);
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
}

.navbar-brand:hover {
    color: var(--brand-primary) !important;
    text-decoration: none !important;
}

.custom-logo {
    height: 2.25rem;
    width: auto;
}

/* ---- Main Menu (centered between logo and CTA) ---- */
.collapse.exCollapsingNavbar {
    flex: 1;
    display: flex !important;
    justify-content: center;
    background-color: transparent;
}

ul#main-menu {
    display: flex !important;
    align-items: center;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0.125rem;
}

ul#main-menu > li {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    height: 3.75rem; /* match nav height so underline can reach bottom */
}

ul#main-menu > li > a,
.navbar-nav .nav-link {
    font-family: var(--font-primary) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--nav-link) !important;
    text-decoration: none !important;
    padding: 0.5rem 0.875rem !important;
    margin: 0 !important;
    border-radius: 0;
    display: flex !important;
    align-items: center;
    white-space: nowrap;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    position: relative;
    height: 100%;
    transition: color var(--transition);
}

/* Animated underline on hover — positioned at bottom border of nav */
ul#main-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.125rem;
    background: var(--brand-primary);
    border-radius: 0;
    transform: scaleX(0);
    transition: transform var(--transition);
}

ul#main-menu > li > a:hover {
    color: var(--nav-link-hover) !important;
}

ul#main-menu > li > a:hover::after {
    transform: scaleX(1);
}

/* Active/current page */
ul#main-menu > li.current-menu-item > a,
ul#main-menu > li.current-page-ancestor > a,
ul#main-menu > li.current-menu-ancestor > a {
    color: var(--brand-primary) !important;
}

ul#main-menu > li.current-menu-item > a::after,
ul#main-menu > li.current-page-ancestor > a::after,
ul#main-menu > li.current-menu-ancestor > a::after {
    transform: scaleX(1);
}

/* ---- Navbar CTA (right side — desktop only) ---- */
.navbar-cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* "Let's Talk" ghost button */
.nav-lets-talk {
    font-family: var(--font-primary) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: var(--nav-link) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.5625rem 1.125rem !important;
    border-radius: var(--radius-sm);
    border: 1px solid var(--btn-ghost-border);
    background-color: transparent;
    white-space: nowrap;
    line-height: 1;
    min-height: 44px;
    cursor: pointer;
    transition: color var(--transition),
                background-color var(--transition),
                border-color var(--transition);
}

.nav-lets-talk:hover {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary);
    background-color: var(--btn-ghost-hover);
    text-decoration: none !important;
}

.nav-lets-talk svg {
    width: 0.9375rem;
    height: 0.9375rem;
    flex-shrink: 0;
    transform: rotate(-45deg) translateY(-0.3125rem);
    transition: transform var(--transition);
    position: relative;
    top: -0;
    left: 0.3125rem;
}

.nav-lets-talk:hover svg {
    transform: rotate(-45deg) translateY(-0.3125rem) scale(1.1);
}

/* "Contact" CTA button */
.nav-contact-btn {
    font-family: var(--font-primary) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    background: var(--btn-gradient) !important;
    text-decoration: none !important;
    padding: 0.5625rem 1.25rem !important;
    border-radius: var(--radius-sm) !important;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1;
    min-height: 44px;
    border: none;
    cursor: pointer;
    transition: background-color var(--transition),
                box-shadow var(--transition),
                transform var(--transition-fast);
}

.nav-contact-btn:hover {
    background-color: var(--brand-hover) !important;
    box-shadow: var(--shadow-btn);
    transform: translateY(-0.0625rem);
    color: #FFFFFF !important;
    text-decoration: none !important;
}

/* ---- Theme Toggle Button ---- */
.theme-toggle-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: background-color var(--transition),
                border-color var(--transition),
                color var(--transition);
}

.theme-toggle-btn:hover {
    background-color: var(--btn-ghost-hover);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.theme-toggle-btn svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Show correct icon per active theme */
[data-theme="light"] .icon-sun  { display: none; }
[data-theme="light"] .icon-moon { display: block; }
[data-theme="dark"]  .icon-sun  { display: block; }
[data-theme="dark"]  .icon-moon { display: none; }

/* ---- Hamburger Button ---- */
.navbar-toggler {
    width: 2.75rem;
    height: 2.75rem;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3125rem;
    flex-shrink: 0;
    margin-left: auto;
    transition: border-color var(--transition), background-color var(--transition);
}

.navbar-toggler:hover {
    border-color: var(--brand-primary);
    background-color: var(--btn-ghost-hover);
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler[aria-expanded="true"] {
    border-color: var(--border);
    outline: none;
    box-shadow: none;
}

.navbar-toggler-bar {
    width: 1.125rem;
    height: 0.125rem;
    background-color: var(--text-muted);
    border-radius: 0.125rem;
    display: block;
    transition: background-color var(--transition);
}

/* Mobile menu footer CTA — hidden on desktop */
.mobile-menu-footer {
    display: none;
}


/* ============================================================
   5. RESPONSIVE — MOBILE ( < 992px )
   ============================================================ */

@media (max-width: 61.9375em) {

    /* Nav is sticky so no body padding-top needed */
    body {
        padding-top: 0;
    }

    .site-navigation .container {
        height: 3.5rem;
        padding: 0 1rem;
        flex-wrap: nowrap;
        gap: 0;
    }

    /* Navbar header spans full width - logo left, hamburger right */
    .navbar-header {
        margin-right: 0;
        flex: 1;
        height: 3.5rem;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    /* Logo stays on the left (default order) */
    .navbar-brand,
    .custom-logo-link {
        order: 1;
    }

    /* Hamburger: absolute inside navbar-header (which is inside the fixed navbar).
       position:absolute keeps it out of flex flow so Bootstrap collapse animation
       can never shift it left. Vertically centered with top/transform. */
    .navbar-toggler {
        display: flex !important;
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        order: unset;
        z-index: 1031;
    }

    /* Hide entire desktop CTA area on mobile - Let's Talk/Contact are inside the menu */
    .navbar-cta {
        display: none !important;
    }

    /* Mobile dropdown - absolute inside .wrapper-navbar (which is fixed).
       Cannot use position:fixed because backdrop-filter on .site-navigation
       creates a containing block that offsets fixed children. */
    .collapse.exCollapsingNavbar {
        display: none !important;
        position: absolute !important;
        top: calc(3.5rem + 1px) !important; /* nav height + border */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background-color: var(--bg-surface);
        border-bottom: 1px solid var(--border);
        padding: 0.5rem 1rem 1rem;
        box-shadow: var(--shadow-nav);
        flex: unset !important;
        z-index: 1029;
        max-height: calc(100vh - 3.5rem - 1px);
        overflow-y: auto;
    }

    /* Bootstrap 5 uses .show when toggled open */
    .collapse.exCollapsingNavbar.show {
        display: block !important;
    }

    /* Bootstrap adds .collapsing during height animation - keep it positioned
       correctly and kill the animation so menu appears instantly (no mid-page flash) */
    .collapsing.exCollapsingNavbar {
        display: block !important;
        position: absolute !important;
        top: calc(3.5rem + 1px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background-color: var(--bg-surface);
        border-bottom: 1px solid var(--border);
        padding: 0.5rem 1rem 1rem;
        box-shadow: var(--shadow-nav);
        z-index: 1029;
        height: auto !important;
        transition: none !important;
        overflow-y: auto;
    }

    ul#main-menu {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.125rem !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    ul#main-menu > li {
        width: 100%;
        height: auto;
    }

    ul#main-menu > li > a {
        font-size: 0.9375rem !important;
        padding: 0.6875rem 0.75rem !important;
        border-radius: var(--radius-sm);
        width: 100%;
        height: auto;
    }

    ul#main-menu > li:first-child > a {
        padding-top: 0.4375rem !important;
    }

    ul#main-menu > li > a::after {
        display: none;
    }

    ul#main-menu > li > a:hover {
        background-color: var(--btn-ghost-hover) !important;
    }

    /* Mobile menu footer — show Let's Talk + Contact inside menu */
    .mobile-menu-footer {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.875rem 0 0;
        border-top: 1px solid var(--border);
        margin-top: 0.5rem;
    }

    .mobile-menu-footer .nav-lets-talk {
        flex: 1;
        justify-content: center;
        border: 1px solid var(--btn-ghost-border);
        padding: 0.625rem 0.75rem !important;
        display: inline-flex !important;
        font-size: 0.875rem;
    }

    .mobile-menu-footer .nav-contact-btn {
        flex: 1;
        justify-content: center;
        padding: 0.625rem 0.75rem !important;
    }
}


/* ============================================================
   6. BOOTSTRAP COMPATIBILITY OVERRIDES
   (Bootstrap 4 alpha / Bootstrap 3 float-based navbar)
   ============================================================ */

/* Force block on nav element — prevents Bootstrap flex context fighting ours */
.site-navigation {
    display: block !important;
}

/* Override theme.css hard-coded black backgrounds (both use !important with high specificity)
   theme.css:12266  .wrapper-fluid .wrapper-navbar { background-color: #000 !important }
   theme.css:12274  #wrapper-navbar > nav           { background-color: #000 !important }
   ID selectors beat class selectors even with !important — match the same selectors here
   so our custom.css (loaded later) wins the cascade. */
.wrapper-fluid .wrapper-navbar {
    background-color: transparent !important;
}

#wrapper-navbar > nav {
    background-color: var(--nav-bg) !important;
}

/* Ensure flex row on container, clear any clearfix pseudo-elements */
.site-navigation .container {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

.site-navigation .container::before,
.site-navigation .container::after {
    content: none !important;
    display: none !important;
}

/* Reset Bootstrap floats on all nav children */
.site-navigation .navbar-header,
.site-navigation .navbar-brand,
.site-navigation .navbar-toggler,
.site-navigation .collapse {
    float: none !important;
    clear: none !important;
}

/* Desktop: show collapse and hide hamburger */
@media (min-width: 62em) {
    .site-navigation .collapse.exCollapsingNavbar {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
        position: static !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .site-navigation .navbar-toggler {
        display: none !important;
    }
}

/* Ensure .navbar-cta stays in the flex row - desktop only */
@media (min-width: 62em) {
    .navbar-cta {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        float: none !important;
        position: static !important;
    }
}

/* Override orange from theme.css: .mWm-button, .navbar-nav .nav-item:last-child a, .btn.btn-secondary */
html body .nav-contact-btn,
html body a.nav-contact-btn {
    background-color: var(--brand-primary) !important;
    background: var(--btn-gradient) !important;
    color: #ffffff !important;
}

html body .nav-contact-btn:hover,
html body a.nav-contact-btn:hover {
    background-color: var(--brand-hover) !important;
    background: var(--btn-gradient-hover) !important;
    color: #ffffff !important;
}

/* Reset last-menu-item button styling from theme.css.
   Old theme used last nav item as a Contact button — we replaced that with .navbar-cta.
   Use the same selectors as theme.css to guarantee override wins. */
.navbar-nav .nav-item:last-child a,
ul#main-menu > li:last-child > a {
    /* Reset mWm-button block: min-width, padding, font shorthand */
    min-width: 0 !important;
    width: auto !important;
    text-align: left !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Reset font shorthand explicitly (font: 700 16px/16px Helvetica) */
    font-family: var(--font-primary) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    font-style: normal !important;
    line-height: 1 !important;
    /* Reset decorative styles */
    text-transform: none !important;
    letter-spacing: normal !important;
    color: var(--nav-link) !important;
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}


/* ============================================================
   8. RESPONSIVE — TABLET ( 992px – 1199px )
   ============================================================ */

@media (min-width: 62em) and (max-width: 74.9375em) {

    .site-navigation .container {
        padding: 0 1.25rem;
    }

    .navbar-header {
        margin-right: 1.5rem;
    }

    ul#main-menu > li > a {
        font-size: 0.8125rem !important;
        padding: 0.5rem 0.625rem !important;
    }

    .navbar-cta {
        gap: 0.375rem;
    }

    .nav-lets-talk {
        font-size: 0.8125rem;
        padding: 0.5rem 0.5rem;
    }

    .nav-contact-btn {
        font-size: 0.8125rem !important;
        padding: 0.5625rem 0.875rem !important;
    }
}


/* =============================================================================
   HERO SECTION — Phase 2
   ============================================================================= */

.hero-section {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--bg-primary);
    background-image: url('../images/dark_background.png');
    background-size: cover;
    background-position: center 70%;
}

[data-theme="light"] .hero-section {
    background-image: url('../images/light_background.png');
}

.hero-bg-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 50%, rgba(59, 130, 246, 0.12) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

[data-theme="light"] .hero-bg-overlay {
    background: radial-gradient(circle at 70% 50%, rgba(191, 219, 254, 0.35) 0%, transparent 60%);
}

.hero-section .container {
    position: relative;
    z-index: 1;
}

.hero-inner {
    display: grid;
    grid-template-columns: 55fr 45fr;
    align-items: center;
    gap: 2.5rem;
    padding: 3.75rem 0 3.125rem;
}

/* ── Left column ── */
.hero-title {
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0 0 1.25rem;
    letter-spacing: -0.0312rem;
}

.hero-text {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0 0 2.25rem;
    max-width: 28.75rem;
}

.hero-ctas {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.hero-btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.5625rem 1.25rem !important;
    background: var(--btn-gradient) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    font-family: var(--font-primary) !important;
    text-decoration: none !important;
    border: none !important;
    line-height: 1.25;
    min-height: 44px;
    cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition-fast);
}

.hero-btn-primary:hover {
    background: var(--btn-gradient-hover) !important;
    box-shadow: var(--shadow-btn);
    transform: translateY(-0.0625rem);
    color: #fff !important;
    text-decoration: none !important;
}

.hero-btn-ghost {
    display: inline-flex;
    align-items: center;
    padding: 0.5625rem 1.25rem !important;
    background: var(--bg-section) !important;
    color: var(--btn-ghost-text) !important;
    border: 1px solid var(--btn-ghost-border) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    font-family: var(--font-primary) !important;
    text-decoration: none !important;
    line-height: 1.25;
    min-height: 44px;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.hero-btn-ghost:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary) !important;
    background: var(--btn-ghost-hover);
    text-decoration: none !important;
}

/* ── Right column ── */
.hero-image {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.hero-laptop-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Responsive ── */
@media (max-width: 61.9375em) {
    .hero-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 3.75rem 0;
    }

    .hero-image {
        order: -1;
    }

    .hero-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 47.9375em) {
    .hero-inner {
        padding: 3rem 0;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-text {
        font-size: 1rem;
    }
}


/* =============================================================================
   ADMIN BAR OFFSET — push fixed navbar below WP toolbar
   ============================================================================= */

/* WP admin bar: uses --wp-admin--admin-bar--height CSS var (32px desktop, 46px mobile)
   set automatically by WP 5.8+ on :root */
.admin-bar .wrapper-navbar {
    top: var(--wp-admin--admin-bar--height, 32px) !important;
}

/* No override needed - collapse is position:absolute inside .wrapper-navbar
   which is already offset by the admin bar height */


/* =============================================================================
   BOOK PROMO SECTION
   ============================================================================= */

.book-promo-section {
    background: var(--bg-section);
    padding: 5rem 0;
}

.book-promo-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.book-promo-cover {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.book-cover-link {
    display: block;
    width: 100%;
}

.book-cover-img {
    max-width: 26.25rem;
    width: 100%;
    mix-blend-mode: multiply;
    transition: transform 0.3s ease;
}

[data-theme="dark"] .book-cover-img {
    mix-blend-mode: screen;
    opacity: 0.9;
}

.book-cover-img:hover {
    transform: translateY(-0.25rem);
}

.book-promo-title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.book-promo-text {
    font-size: 1.0625rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 1.75rem;
}

.book-promo-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.book-promo-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
}

.book-promo-check {
    color: var(--brand-blue);
    flex-shrink: 0;
}

.book-promo-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.btn-book-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.5625rem 1.25rem;
    background: var(--btn-gradient);
    color: #fff !important;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-primary);
    border-radius: var(--radius-sm);
    border: none;
    text-decoration: none !important;
    line-height: 1;
    min-height: 44px;
    cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition-fast);
}

.btn-book-primary:hover {
    background: var(--btn-gradient-hover);
    box-shadow: var(--shadow-btn);
    transform: translateY(-0.0625rem);
    color: #fff !important;
    text-decoration: none !important;
}

.btn-book-ghost {
    display: inline-flex;
    align-items: center;
    padding: 0.5625rem 1.25rem;
    background: transparent;
    color: var(--btn-ghost-text) !important;
    border: 1px solid var(--btn-ghost-border);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.875rem;
    font-family: var(--font-primary);
    text-decoration: none !important;
    line-height: 1;
    min-height: 44px;
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.btn-book-ghost:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary) !important;
    background: var(--btn-ghost-hover);
    text-decoration: none !important;
}

@media (max-width: 56.25em) {
    .book-promo-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }

    .book-cover-img {
        max-width: 15rem;
    }

    .book-promo-item {
        justify-content: center;
    }

    .book-promo-ctas {
        justify-content: center;
    }
}


/* =============================================================================
   SERVICES SECTION — Phase 3
   ============================================================================= */

.services-section {
    padding: 5rem 0;
    background: var(--bg-section);
}

/* ── Section header ── */
.services-header {
    text-align: center;
    margin-bottom: 3rem;
}

.services-title {
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 0.75rem;
}

.services-subtitle {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 35rem;
    margin: 0 auto;
}

/* ── Card grid ── */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* ── Individual card ── */
.service-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 2.25rem 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

[data-theme="dark"] .service-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.service-card:hover {
    transform: translateY(-0.25rem);
    border-color: var(--brand-primary);
}

[data-theme="light"] .service-card:hover {
    box-shadow: 0 16px 40px rgba(37, 99, 235, 0.15);
}

[data-theme="dark"] .service-card:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* ── Icon ── */
.service-card-icon {
    width: 8.75rem;
    height: 7.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

[data-theme="dark"] .service-card-icon img {
    filter: brightness(1.1);
}

/* ── Text ── */
.service-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    line-height: 1.3;
}

.service-card-text {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0 0 1.5rem;
    flex: 1;
}

/* ── Link ── */
.service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-primary) !important;
    text-decoration: none !important;
    transition: gap 0.2s ease;
    margin-top: auto;
    min-height: 44px;
}

.service-card-link:hover {
    gap: 0.625rem;
    text-decoration: none !important;
}

/* ── Responsive ── */
@media (max-width: 61.9375em) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .services-title {
        font-size: 1.75rem;
    }
}

@media (max-width: 47.9375em) {
    .services-section {
        padding: 3.75rem 0;
    }
}

/* ============================================================
   TRUST BAR SECTION
   ============================================================ */

.trust-bar-section {
    padding: 3.75rem 0 2rem;
    background: var(--bg-section);
}

.trust-bar-header {
    text-align: center;
    /* margin-bottom: 48px; */
}

.trust-bar-label {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 0.625rem;
    letter-spacing: -0.0312rem;
    line-height: 1.3;
}

.trust-bar-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0;
}

.trust-bar-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.5rem 5rem;
}

.trust-bar-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-bar-logo {
    height: 6.5rem;
    width: auto;
    max-width: 16.25rem;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.55;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.trust-bar-logo:hover {
    filter: grayscale(0%);
    opacity: 0.9;
}

/* dark theme: invert dark logos to white */
[data-theme="dark"] .trust-bar-logo {
    filter: grayscale(100%) invert(1);
    opacity: 0.45;
}

[data-theme="dark"] .trust-bar-logo:hover {
    filter: grayscale(0%) invert(1);
    opacity: 0.85;
}

@media (max-width: 47.9375em) {
    .trust-bar-logos {
        gap: 1.5rem 3rem;
    }

    .trust-bar-logo {
        height: 4.5rem;
    }
}

/* ============================================================
   LATEST WORK SECTION
   ============================================================ */

.latest-work-section {
    padding: 5rem 0;
    background: var(--bg-section);
}

.latest-work-header {
    text-align: center;
    margin-bottom: 3rem;
}

.latest-work-title {
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0 0 0.625rem;
    letter-spacing: -0.0312rem;
}

.latest-work-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0;
}

.latest-work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    margin-bottom: 3rem;
}

/* Work Card */
.work-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.work-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-0.1875rem);
}

[data-theme="dark"] .work-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.work-card-thumb-link {
    display: block;
}

.work-card-thumb {
    width: 100%;
    height: 12.5rem;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-section);
}

.work-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.work-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.work-card-tag {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand-primary);
    background: rgba(59, 130, 246, 0.1);
    padding: 0.1875rem 0.625rem;
    border-radius: 1.25rem;
}

[data-theme="dark"] .work-card-tag {
    background: rgba(59, 130, 246, 0.15);
}

.work-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.625rem;
    line-height: 1.4;
}

.work-card-title a {
    color: inherit;
    text-decoration: none;
}

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

.work-card-excerpt {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0 0 1.25rem;
    flex: 1;
}

/* Benefit checkmarks */
.work-card-benefits {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0.75rem 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4375rem;
    background: var(--bg-section);
    border-radius: 0.5rem;
}

.work-card-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.work-card-benefit-item svg {
    flex-shrink: 0;
    margin-top: 0.0625rem;
    color: #22c55e;
}

.work-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--brand-primary);
    text-decoration: none;
    transition: gap 0.2s ease;
    margin-top: auto;
    min-height: 44px;
}

.work-card-link:hover {
    gap: 0.625rem;
    text-decoration: none;
    color: var(--brand-primary);
}

/* Footer CTA */
.latest-work-footer {
    text-align: center;
    margin-top: 3rem;
}

.latest-work-cta-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(59, 130, 246, 0.65);
    border-radius: 1rem;
    padding: 0.5rem 4.375rem 1.25rem;
}

.latest-work-cta-heading {
    font-size: 1.125rem;
    font-weight: 600;
    color: #FFFFFF;
    margin: 0;
    white-space: nowrap;
}

.latest-work-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5625rem 1.25rem;
    background: #FFFFFF;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    color: var(--brand-primary);
    text-decoration: none;
    white-space: nowrap;
    min-height: 44px;
    transition: background 0.2s ease;
}

.latest-work-cta:hover {
    background: #f0f4ff;
    color: var(--brand-primary);
    text-decoration: none;
}

.latest-work-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 2.5rem 0;
}

/* Responsive */
@media (max-width: 61.9375em) {
    .latest-work-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }

    .latest-work-title {
        font-size: 1.75rem;
    }
}

@media (max-width: 47.9375em) {
    .latest-work-section {
        padding: 3.75rem 0;
    }

    .latest-work-grid {
        grid-template-columns: 1fr;
    }

    .latest-work-cta-box {
        padding: 1rem 1.5rem;
        white-space: normal;
    }

    .latest-work-cta-heading {
        font-size: 1.125rem;
        white-space: normal;
        text-align: center;
    }
}

/* ============================================================
   CTA SECTION
   ============================================================ */

.cta-section {
    padding: 5rem 0;
    background-image: url('../images/dark_background.png');
    background-size: cover;
    background-position: center;
    border-top: 1px solid var(--border);
}

[data-theme="light"] .cta-section {
    background-image: url('../images/light_background.png');
}

.cta-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.cta-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 1rem;
    line-height: 1.25;
}

.cta-text {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0 0 1.5rem;
}

.cta-image-wrap {
    margin-top: 0.5rem;
}

.cta-man-img {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
}

[data-theme="dark"] .cta-man-img {
    mix-blend-mode: luminosity;
    opacity: 0.85;
}

.cta-form-wrap {
    background: #FFFFFF;
    border-radius: 0.75rem;
    padding: 2.25rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    max-width: 28.125rem;
    width: 100%;
}

.cta-form-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
}

/* Ninja Forms overrides */
.cta-form-wrap .nf-form-cont .nf-field-container {
    margin-bottom: 1rem !important;
}

.cta-form-wrap .nf-form-cont input[type="text"],
.cta-form-wrap .nf-form-cont input[type="email"],
.cta-form-wrap .nf-form-cont select,
.cta-form-wrap .nf-form-cont textarea {
    width: 100% !important;
    padding: 0.625rem 0.875rem !important;
    border: 1px solid var(--border) !important;
    /* border-radius: 8px !important; */
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-primary) !important;
    font-size: 0.875rem !important;
}

.cta-form-wrap .nf-form-cont input[type="submit"],
.cta-form-wrap .nf-form-cont button[type="submit"] {
    background: var(--btn-gradient) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.5625rem 1.25rem !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    font-family: var(--font-primary) !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition-fast) !important;
}

.cta-form-wrap .nf-form-cont input[type="submit"]:hover,
.cta-form-wrap .nf-form-cont button[type="submit"]:hover {
    background-color: var(--brand-hover) !important;
    box-shadow: var(--shadow-btn) !important;
    transform: translateY(-0.0625rem) !important;
}


@media (max-width: 61.9375em) {
    .cta-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

@media (max-width: 47.9375em) {
    .cta-section {
        padding: 3.75rem 0;
    }
}

/* =============================================================================
   COMMUNITY SECTION
   ============================================================================= */

.community-section {
    background: var(--bg-section);
    padding: 5rem 0;
}

.community-header {
    text-align: center;
    margin-bottom: 3rem;
}

.community-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.community-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
}

.community-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

.community-card {
    background: var(--bg-surface);
    border-radius: 0.75rem;
    padding: 2rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.community-card:hover {
    transform: translateY(-0.1875rem);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.11);
}

.community-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 6.25rem;
}

.community-card-logo img {
    max-height: 6.25rem;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

.community-card-name {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-heading);
    text-align: center;
    margin: 0;
    line-height: 1.3;
}

/* Full-width blue button — Speaker */
.community-card-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5625rem 1.25rem;
    background: var(--btn-gradient);
    color: #fff !important;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-sm);
    text-decoration: none !important;
    transition: opacity 0.2s ease;
    margin-top: auto;
}

.community-card-btn-primary:hover {
    opacity: 0.9;
    color: #fff !important;
}

/* Full-width gray outlined button — Contributor, Partner, Stars */
.community-card-btn-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5625rem 1.25rem;
    background: transparent;
    color: var(--text-muted) !important;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-sm);
    border: 1px solid var(--btn-ghost-border);
    text-decoration: none !important;
    line-height: 1;
    transition: border-color 0.2s ease, color 0.2s ease;
    margin-top: auto;
}

[data-theme="dark"] .community-card-btn-outline {
    border-color: #475569;
}

.community-card-btn-outline:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary) !important;
}

@media (max-width: 64em) {
    .community-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 40em) {
    .community-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.875rem;
    }

    .community-card {
        padding: 1.5rem 1rem 1.25rem;
    }
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
    border-top: 1px solid var(--border);
    --brand-blue: var(--text-muted);
}

[data-theme="dark"] .site-footer {
    border-top-color: #1E293B;
}

/* ── Part 1: Main grid ── */
.footer-main {
    background-color: var(--bg-surface);
    padding: 4rem 0 3.5rem;
}

[data-theme="dark"] .footer-main {
    background-color: #0F172A;
    background-image: url('../images/dark_background.png');
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.6fr 0.9fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.footer-col-title {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-subtle) !important;
    margin: 0 0 1.125rem !important;
}

.footer-col-title--spaced {
    margin-top: 1.75rem !important;
}

/* Profile block */
.footer-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.footer-avatar {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 50%;
    flex-shrink: 0;
}

.footer-profile-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.footer-profile-info strong {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-heading);
}

.footer-profile-info a {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-decoration: none;
}

.footer-contact-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    min-height: 44px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    min-height: 44px;
    border-radius: var(--radius-sm);
    background: var(--btn-gradient);
    color: #fff !important;
    text-decoration: none;
    margin-top: 0.25rem;
    transition: background var(--transition);
}

.footer-contact-btn:hover {
    background: var(--btn-gradient-hover);
    color: #fff !important;
}

.footer-bio {
    font-size: 0.8125rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0 0 1rem;
}

.footer-social {
    display: flex;
    gap: 0.625rem;
    margin-bottom: 1.5rem;
    align-items: center;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

.footer-social-link svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--brand-primary);
    transition: color 0.2s ease;
}

.footer-social-link:hover svg {
    color: var(--text-muted);
}

.footer-codeable-wrap {
    /* padding-top: 1.5rem; */
}

.footer-codeable-img {
    display: block;
    max-width: 140px;
    width: 100%;
    height: auto;
}

.footer-contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 1rem;
    font-style: normal;
}

.footer-contact-address,
.footer-contact-hours {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.footer-contact-phone {
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* Check list (WP Development) */
.footer-check-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.footer-check-list li {
    list-style: none !important;
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.6;
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
}

.footer-check-list li::before {
    content: '✓';
    flex-shrink: 0;
    color: var(--brand-blue);
    font-size: 0.75rem;
    font-weight: 700;
}

.footer-check-list li a {
    color: var(--brand-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-check-list li a:hover {
    color: var(--brand-blue);
}

.footer-subhead {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-subtle) !important;
    margin: 1rem 0 0.5rem !important;
}

/* Arrow list (Useful Links) */
.footer-arrow-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.footer-arrow-list li {
    list-style: none !important;
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.footer-arrow-list li::before {
    content: '›';
    flex-shrink: 0;
    color: var(--brand-blue);
    font-weight: 700;
}

.footer-arrow-list a {
    font-size: 0.8125rem;
    color: var(--brand-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-arrow-list a:hover {
    color: var(--brand-blue);
}

/* Books */
.footer-books {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
}

.footer-book-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
}

.footer-book-item:hover {
    color: var(--brand-blue);
}

.footer-book-thumb {
    width: 2.5rem;
    flex-shrink: 0;
    border-radius: 0.125rem;
    mix-blend-mode: multiply;
}

[data-theme="dark"] .footer-book-thumb {
    mix-blend-mode: screen;
}

.footer-book-title {
    font-size: 0.75rem;
    color: var(--brand-primary);
    line-height: 1.4;
    transition: color 0.2s ease;
}

.footer-book-item:hover .footer-book-title {
    color: var(--brand-blue);
}

/* Themes text list */
.footer-themes-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.footer-themes-list a {
    font-size: 0.8125rem;
    color: var(--brand-primary);
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-block;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.footer-themes-list a:hover {
    color: var(--brand-blue);
}

.footer-enterprise-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-enterprise-link:hover {
    color: var(--brand-blue) !important;
}

.footer-enterprise-link svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

/* ── Part 2: Open-Source Plugins ── */
.footer-plugins {
    background: var(--bg-section);
    padding: 3.5rem 0;
    border-top: 1px solid var(--border);
}

[data-theme="dark"] .footer-plugins {
    background: #1E293B;
    border-top-color: #334155;
}

.footer-plugins-inner {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    align-items: start;
}

.footer-plugins-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.footer-plugins-avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.footer-plugins-name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
}
.footer-plugins-role {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.125rem;
}
.footer-plugins-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

.footer-plugins-bio {
    font-size: 0.8125rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0 0 1rem;
}

.footer-plugins-email {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--brand-blue) !important;
    text-decoration: none;
}

.footer-plugins-email:hover {
    text-decoration: underline;
}

.footer-plugins-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 2rem;
}

.footer-plugin-card {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.footer-plugin-check {
    color: var(--brand-blue);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.footer-plugin-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-heading);
    margin: 0 0 0.125rem;
}

.footer-plugin-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

/* ── Part 3: Copyright bar ── */
.footer-bar {
    background: #0F172A;
    padding: 1.125rem 0;
}

[data-theme="light"] .footer-bar {
    background: #1E293B;
}

.footer-copyright {
    font-size: 0.8125rem;
    color: #94A3B8;
    margin: 0;
    text-align: center;
}

@media (max-width: 64em) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem 2rem;
    }

    .footer-plugins-inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 40em) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-main {
        padding: 3rem 0 2.5rem;
    }

    .footer-plugins-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */

.contact-page-wrap {
    padding: 3.75rem 0 5rem;
    background-color: var(--bg-section);
    background-image: url('../images/dark_background.png');
    background-size: cover;
    background-position: center top;
}

[data-theme="light"] .contact-page-wrap {
    background-image: url('../images/light_background.png');
}

.contact-page-header {
    margin-bottom: 1.5rem;
}

.contact-page-title {
    font-size: 2.625rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 0.25rem;
    line-height: 1.1;
}

.contact-page-subtitle {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--brand-blue);
    margin: 0;
}

/* Description sits inside left col, aligned with widgets */
.contact-page-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0 0 1.25rem;
    line-height: 1.6;
}

/* Two-column layout */
.contact-page-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: start;
}

/* Form card */
.contact-form-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
}

/* Hide Ninja Forms form title */
.contact-form-card .nf-form-title,
.contact-form-card h3.nf-form-title,
.contact-form-card .nf-form-wrap > h3,
.contact-form-card .nf-form-wrap > h2,
.contact-form-card .nf-form > h3,
.contact-form-card .nf-form > h2 {
    display: none !important;
}

.contact-form-heading {
    display: none !important;
}

.contact-form-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0.5rem 0 1rem;
}

.contact-required {
    color: #EF4444;
}

.contact-email-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-decoration: none;
    margin-top: 1rem;
    transition: color 0.2s ease;
}

.contact-email-link:hover {
    color: var(--brand-blue);
    text-decoration: none;
}

.contact-email-link svg {
    flex-shrink: 0;
    color: var(--brand-blue);
}

/* Sidebar widgets */
.contact-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contact-widget {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
}

.contact-widget-title {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin: 0 0 1rem !important;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--border);
}

.contact-widget-check-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.contact-widget-check-list li {
    list-style: none !important;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--brand-primary);
    line-height: 1.5;
}

.contact-widget-check-list li::before {
    content: '';
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.0625rem;
    background-color: var(--brand-primary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.contact-widget-arrow-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.contact-widget-arrow-list li {
    list-style: none !important;
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    font-size: 0.8125rem;
}

.contact-widget-arrow-list li::before {
    content: '›';
    flex-shrink: 0;
    color: var(--brand-primary);
    font-weight: 700;
}

.contact-widget-arrow-list a {
    color: var(--brand-primary);
    text-decoration: none;
    transition: color 0.2s ease;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.contact-widget-arrow-list a:hover {
    color: var(--brand-primary);
    text-decoration: underline;
}

.contact-widget-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--brand-blue);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    transition: opacity 0.2s ease;
}

.contact-widget-link:hover {
    opacity: 0.8;
    text-decoration: none;
}

/* Ninja Forms overrides inside contact form card */
/* NF labels */
.contact-form-card label {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--text-heading) !important;
    margin-bottom: 0.25rem !important;
}

/* NF fields — broad selectors to override NF defaults */
.contact-form-card input[type="text"],
.contact-form-card input[type="email"],
.contact-form-card input[type="tel"],
.contact-form-card textarea,
.contact-form-card select {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.375rem !important;
    color: var(--text-heading) !important;
    font-size: 0.8125rem !important;
    font-family: var(--font-primary) !important;
    padding: 0.4375rem 0.6875rem !important;
    height: auto !important;
    line-height: 1.5 !important;
    width: 100% !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease !important;
}

.contact-form-card input[type="text"]:focus,
.contact-form-card input[type="email"]:focus,
.contact-form-card input[type="tel"]:focus,
.contact-form-card textarea:focus,
.contact-form-card select:focus {
    border-color: var(--brand-blue) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important;
}

.contact-form-card textarea {
    min-height: 6.25rem !important;
    resize: vertical !important;
}

/* NF submit button — catch all button variants */
.contact-form-card input[type="button"],
.contact-form-card input[type="submit"],
.contact-form-card button[type="submit"],
.contact-form-card .nf-field-submit input,
.contact-form-card .submit-container input {
    background: var(--btn-gradient) !important;
    background-color: var(--brand-blue) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.5625rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    font-family: var(--font-primary) !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    box-shadow: var(--shadow-btn) !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
}

.contact-form-card input[type="button"]:hover,
.contact-form-card input[type="submit"]:hover,
.contact-form-card button[type="submit"]:hover,
.contact-form-card .nf-field-submit input:hover,
.contact-form-card .submit-container input:hover {
    background: var(--btn-gradient-hover) !important;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.45) !important;
}

/* Responsive */
@media (max-width: 56.25em) {
    .contact-page-layout {
        grid-template-columns: 1fr;
    }

    .contact-sidebar-col {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .contact-widget {
        flex: 1 1 260px;
    }
}

@media (max-width: 37.5em) {
    .contact-page-wrap {
        padding: 2.5rem 0 3.75rem;
    }

    .contact-page-title {
        font-size: 2rem;
    }

    .contact-form-card {
        padding: 1.5rem 1.25rem;
    }

    .contact-sidebar-col {
        flex-direction: column;
    }
}

/* ============================================================
   LET'S TALK PAGE
   ============================================================ */

/* Hero */
.letstalk-hero {
    padding: 5rem 0 4.5rem;
    background-color: var(--bg-section);
    background-image: url('../images/dark_background.png');
    background-size: cover;
    background-position: center top;
}

[data-theme="light"] .letstalk-hero {
    background-image: url('../images/light_background.png');
}

.letstalk-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
    max-width: 100%;
}

.letstalk-hero-text {
    max-width: 37.5rem;
}

.letstalk-hero-image {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.letstalk-hero-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

.letstalk-hero-title {
    font-size: 3.25rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 0.5rem;
    line-height: 1.1;
}

.letstalk-hero-subtitle {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--brand-blue);
    margin: 0 0 1rem;
}

.letstalk-hero-desc {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0 0 1.75rem;
    line-height: 1.6;
    max-width: 32.5rem;
}

.letstalk-hero-btn {
    display: inline-flex;
    align-items: center;
    background: var(--btn-gradient) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.5625rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    font-family: var(--font-primary) !important;
    text-decoration: none !important;
    line-height: 1.25;
    cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition-fast);
}

.letstalk-hero-btn:hover {
    background: var(--btn-gradient-hover) !important;
    box-shadow: var(--shadow-btn);
    transform: translateY(-0.0625rem);
    color: #fff !important;
    text-decoration: none !important;
}

/* Shared section title */
.letstalk-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-muted);
    margin: 0 0 1.25rem;
}

/* Who it's for */
.letstalk-for {
    padding: 4rem 0;
    background: var(--bg-surface);
}


/* Schedule section */
.letstalk-schedule {
    padding: 4rem 0;
    background: var(--bg-section);
}

.letstalk-schedule-inner {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 3rem;
    align-items: start;
}

.letstalk-benefits-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0 0 1.5rem;
    line-height: 1.6;
}

.letstalk-benefits-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.letstalk-benefits-list li {
    list-style: none !important;
    font-size: 0.875rem;
    color: var(--text-muted);
    padding-left: 1.375rem;
    position: relative;
    line-height: 1.5;
}

.letstalk-benefits-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--brand-blue);
    font-weight: 700;
}

.letstalk-email-alt {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.letstalk-email-alt:hover {
    color: var(--brand-blue);
    text-decoration: none;
}

.letstalk-email-alt svg {
    color: var(--brand-blue);
    flex-shrink: 0;
}

/* Calendly widget wrapper */
.letstalk-calendly-wrap {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.06);
}

/* FAQ */
.letstalk-faq {
    padding: 4rem 0;
    background: var(--bg-surface);
}

.letstalk-faq-list {
    max-width: 45rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.letstalk-faq-item {
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow: hidden;
}

.letstalk-faq-q {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 1.125rem 1.25rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.letstalk-faq-q::-webkit-details-marker { display: none; }

.letstalk-faq-q::after {
    content: '+';
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--brand-blue);
    flex-shrink: 0;
    margin-left: 0.75rem;
    transition: transform 0.2s ease;
}

.letstalk-faq-item[open] .letstalk-faq-q::after {
    transform: rotate(45deg);
}

.letstalk-faq-a {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
    padding: 0 1.25rem 1.125rem;
}

/* Responsive */
@media (max-width: 64em) {
    .letstalk-schedule-inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 48em) {
    .letstalk-hero-title {
        font-size: 2.375rem;
    }

    .letstalk-cards {
        grid-template-columns: 1fr;
    }
}

/* Calendly right column (widget + testimonial stacked) */
.letstalk-calendly-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Testimonial below Contact button (in left col) */
.letstalk-testimonial {
    margin-top: 1.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.letstalk-testimonial-stars {
    color: #F59E0B;
    font-size: 1rem;
    letter-spacing: 0.125rem;
    margin-bottom: 0.75rem;
}

.letstalk-testimonial-quote {
    font-size: 0.9375rem;
    font-style: italic;
    color: var(--text-heading);
    line-height: 1.6;
    margin: 0 0 0.75rem;
    border: none;
    padding: 0;
}

.letstalk-testimonial-author {
    font-size: 0.8125rem;
    font-style: normal;
    color: var(--text-muted);
    font-weight: 600;
}

/* ── Let's Talk: For + What to Expect two-column layout ── */
.letstalk-for-inner {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 2.5rem;
    align-items: start;
}

/* Cards: 3-column grid */
.letstalk-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.letstalk-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

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

.letstalk-card-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.25rem;
    height: 4rem;
}

.letstalk-card-icon img {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
}

.letstalk-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
}

.letstalk-card-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}

/* What to Expect */
.letstalk-expect {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.letstalk-expect-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.letstalk-expect-list li {
    list-style: none !important;
    font-size: 0.875rem;
    color: var(--text-muted);
    padding-left: 1.375rem;
    position: relative;
    line-height: 1.5;
}

.letstalk-expect-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--brand-blue);
    font-weight: 700;
}

/* Contact button — MUST match nav-contact-btn exactly */
.btn-contact-outline {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-primary) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: var(--btn-gradient) !important;
    text-decoration: none !important;
    padding: 0.5625rem 1.25rem !important;
    border-radius: var(--radius-sm) !important;
    border: none;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    margin-top: 1.25rem;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition-fast);
}

.btn-contact-outline:hover {
    background: var(--btn-gradient-hover) !important;
    box-shadow: var(--shadow-btn);
    transform: translateY(-0.0625rem);
    color: #fff !important;
}

/* Ninja Forms fallback card */
.letstalk-form-fallback {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1.75rem 2rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.letstalk-form-fallback-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
}

.letstalk-form-fallback-note {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

/* Override for NF fields inside fallback */
.letstalk-form-fallback input[type="text"],
.letstalk-form-fallback input[type="email"],
.letstalk-form-fallback textarea {
    background: var(--bg-primary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.375rem !important;
    font-size: 0.8125rem !important;
    padding: 0.4375rem 0.6875rem !important;
    height: auto !important;
    color: var(--text-heading) !important;
}

.letstalk-form-fallback input[type="button"],
.letstalk-form-fallback input[type="submit"],
.letstalk-form-fallback button[type="submit"],
.letstalk-form-fallback .nf-field-submit input {
    background: var(--btn-gradient) !important;
    background-color: var(--brand-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.5625rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: var(--shadow-btn) !important;
}

/* Responsive */
@media (max-width: 56.25em) {
    .letstalk-for-inner {
        grid-template-columns: 1fr;
    }
    .letstalk-hero-inner {
        grid-template-columns: 1fr;
    }
    .letstalk-hero-image {
        display: none;
    }
}


/* =============================================================================
   PORTFOLIO ARCHIVE — Phase 6
============================================================================= */

/* ── Hero ── */
.portfolio-hero {
    padding: 3.75rem 0;
    min-height: 400px;
    display: flex;
    align-items: center;
    background: var(--bg-section);
    background-image: var(--hero-bg-image);
    background-size: cover;
    background-position: center;
    overflow: visible;
}

.portfolio-hero > .container {
    width: 100%;
}

.portfolio-hero-inner {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 2.5rem;
    align-items: center;
}

.portfolio-hero-title {
    font-size: clamp(1.75rem, 4vw, 2.625rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.15;
    margin: 0 0 0.75rem;
}

.portfolio-hero-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0;
}

.portfolio-hero-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}

.portfolio-stats {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
}

.portfolio-stat {
    padding-bottom: 0.625rem;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding-right: 2rem;
    margin-right: 2rem;
    border-right: 1px solid var(--border);
    margin-top: -0.625rem;
}

.portfolio-stat:last-child {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}

.portfolio-stat-icon {
    color: var(--brand-primary);
    flex-shrink: 0;
    opacity: 0.85;
}

.portfolio-stat-number {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.portfolio-stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.125rem;
}

.portfolio-hero-img {
    width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-bottom: -0.5rem;
}

/* ── Filter Bar ── */
.portfolio-filter-section {
    padding: 0;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 3.75rem;
    z-index: 100;
}

.portfolio-filter-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    flex-wrap: wrap;
}

.portfolio-filter-tabs {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.portfolio-tab {
    background: none;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0.4375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: var(--font-primary);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    min-height: 44px;
}

.portfolio-tab:hover {
    background: var(--bg-section);
    color: var(--text-primary);
}

.portfolio-tab:focus,
.portfolio-tab:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.portfolio-tab.active {
    background: var(--btn-gradient);
    color: #fff;
    font-weight: 600;
}

.portfolio-card.is-hidden {
    display: none !important;
}

.portfolio-filter-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.portfolio-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.portfolio-search-icon {
    position: absolute;
    left: 0.625rem;
    color: var(--text-subtle);
    pointer-events: none;
}

.portfolio-search-input {
    padding: 0.4375rem 0.75rem 0.4375rem 2rem;
    font-size: 0.8125rem;
    font-family: var(--font-primary);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    width: 11.25rem;
    min-height: 44px;
    transition: border-color 0.2s ease, width 0.2s ease;
}

.portfolio-search-input:focus {
    outline: none;
    border-color: var(--brand-primary);
    width: 13.75rem;
}

.portfolio-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: var(--font-primary);
    color: var(--text-muted);
    cursor: pointer;
    min-height: 44px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.portfolio-filter-btn:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.portfolio-filter-btn:focus,
.portfolio-filter-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.portfolio-filter-wrap {
    position: relative;
}

.portfolio-filter-panel {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 11.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    z-index: 100;
    padding: 0.5rem 0;
}

.portfolio-filter-panel.open {
    display: block;
}

.portfolio-filter-panel-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
}

.portfolio-filter-panel-item:hover {
    background: var(--bg-section);
}

.portfolio-filter-panel-item input[type="checkbox"] {
    accent-color: var(--brand-primary);
    width: 0.875rem;
    height: 0.875rem;
    cursor: pointer;
}

/* ── Card Grid ── */
.portfolio-grid-section {
    padding: 3rem 0 4rem;
    background: var(--bg-section);
}

.portfolio-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
    width: 100% !important;
    float: none !important;
}

.portfolio-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    float: none !important;
    width: auto !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.portfolio-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    transform: translateY(-0.1875rem);
}

.portfolio-card-link {
    display: block;
}

.portfolio-card-thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-section);
}

.portfolio-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.portfolio-card:hover .portfolio-card-thumb img {
    transform: scale(1.04);
}

.portfolio-card-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--bg-section) 0%, var(--border) 100%);
}

.portfolio-card-body {
    padding: 1rem 1.125rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.portfolio-card-tags {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-bottom: 0.625rem;
}

.portfolio-tag {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.25rem;
    background: rgba(59, 130, 246, 0.1);
    color: var(--brand-primary);
    text-transform: capitalize;
}

.portfolio-card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 0.375rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.portfolio-card-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.15s ease;
    display: flex;
    align-items: center;
    min-height: 44px;
}

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

.portfolio-card-excerpt {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0 0 0.875rem;
    line-height: 1.5;
}

.portfolio-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--brand-primary);
    text-decoration: none;
    margin-top: 0.75rem;
    min-height: 44px;
    transition: gap 0.15s ease;
}

.portfolio-card-cta:hover {
    gap: 0.5rem;
    color: var(--brand-primary);
    text-decoration: none;
}

.portfolio-card-cta-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: auto;
}

.portfolio-card-demo {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.portfolio-card-demo:hover {
    color: var(--brand-primary);
    text-decoration: none;
}

.portfolio-no-results,
.portfolio-empty {
    text-align: center;
    padding: 3rem 0;
    color: var(--text-muted);
    font-size: 0.9375rem;
}

/* Pagination */
.portfolio-pagination {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.portfolio-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    height: auto;
    padding: 0 0.625rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    background: var(--bg-surface);
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.portfolio-pagination .page-numbers:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.portfolio-pagination .page-numbers.current {
    background: var(--btn-gradient);
    /* border-color: transparent; */
    color: #fff;
    font-weight: 600;
}

/* ── Featured Project ── */
.portfolio-featured {
    padding: 2.5rem 0 4rem;
    background: var(--bg-section);
}

.portfolio-featured-card {
    background: #fdfbfe;
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    padding: 2rem;
}

[data-theme="dark"] .portfolio-featured-card {
    background: var(--bg-surface);
}

.portfolio-featured-inner {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 3rem;
    align-items: center;
}

.portfolio-featured-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--brand-primary);
    margin: 0 0 0.625rem;
}

.portfolio-featured-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 0.875rem;
    line-height: 1.2;
}

.portfolio-featured-desc {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0 0 1.25rem;
    line-height: 1.6;
}

.portfolio-featured-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.portfolio-featured-features li {
    font-size: 0.875rem;
    color: var(--text-muted);
    padding-left: 1.25rem;
    position: relative;
    list-style: none !important;
}

.portfolio-featured-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--brand-primary);
    font-weight: 700;
}

.portfolio-featured-img {
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
    /* box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15); */
    display: block;
}

/* ── Services featured — new layout ── */
.services-feat-header {
    text-align: center;
    padding: 1.25rem 0 1.75rem;
}
.services-feat-title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    color: var(--text-primary);
    margin: 0.375rem 0 0.625rem;
}
.services-feat-subtitle {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: 0;
}
.services-feat-body {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
}
.services-feat-combined {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
}
.services-feat-combined .services-feat-preview-card {
    border-radius: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
}
.services-feat-combined .services-feat-img-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 1.5rem 1rem 0.5rem 1.5rem;
    overflow: hidden;
}
.services-feat-combined .services-feat-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.services-feat-combined .services-feat-content {
    border-radius: 0;
    background: transparent;
    align-self: start;
}
.services-feat-preview-card {
    border-radius: 0.75rem;
    overflow: hidden;
    background: #fff;
}
.services-feat-img-wrap {
    padding: 1rem 0 0 1.5rem;
}
.services-feat-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
}
.services-feat-card-info {
    padding: 1rem 1.5rem;
}
.services-feat-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}
.services-feat-card-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
}
.services-feat-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 1.5rem;
    background: #fff;
    border-radius: 0.75rem;
}
.services-feat-card2-header {
    margin-bottom: 0.5rem;
}
.services-feat-content:has(.services-feat-card2-icon) ul {
    padding-right: 4.5rem !important; /* clear 4rem icon + 0.5rem gap */
}
.services-feat-card2-header .services-feat-content-title {
    margin-bottom: 0;
}
.services-feat-card2-icon {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 4rem;
    height: auto;
}
.services-feat-content .services-feat-content-title {
    margin-bottom: 0.5rem;
}
.services-feat-combined .services-feat-content .services-feat-content-title {
    margin-bottom: 1rem;
}
.services-feat-content .portfolio-featured-features {
    margin-bottom: 1rem;
    margin-left: 0 !important;
    padding-left: 0 !important;
}
.services-feat-content .portfolio-featured-features li {
    padding-left: 0;
    margin-left: 0 !important;
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
}
.services-feat-content .portfolio-featured-features li::before {
    position: static;
    flex-shrink: 0;
    margin-top: 0.0625rem;
}
.services-feat-content-title {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}
.services-feat-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.services-feat-tag {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-primary);
    background: rgba(37, 99, 235, 0.07);
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 1.25rem;
    padding: 0.1875rem 0.625rem;
}
.services-not-sure {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    margin-top: 3rem;
    padding: 3rem 2.5rem;
    background: var(--bg-surface);
    border-radius: 0.75rem;
    border: 1px solid rgba(59, 130, 246, 0.12);
}
.services-not-sure-text {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.services-not-sure-body {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
    max-width: 680px;
}

.plugin-client-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    width: 100%;
    margin: 0.5rem 0;
}

.plugin-client-card {
    background: #fff;
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.08);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.plugin-client-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    min-height: 3.75rem;
}

.plugin-client-card-icon {
    width: 2rem;
    height: 2rem;
    background: var(--brand-primary);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.plugin-client-card-icon svg {
    width: 1rem;
    height: 1rem;
    fill: #fff;
    flex-shrink: 0;
}

.plugin-client-card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.3;
}

.plugin-client-card-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 48em) {
    .plugin-client-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 30em) {
    .plugin-client-cards { grid-template-columns: 1fr; }
}

/* Services/Plugins/Themes/Books: outer card is transparent — inner cards float separately on gray bg */
.services-archive-page .portfolio-featured-card,
.plugins-archive-page .portfolio-featured-card,
.themes-archive-page .portfolio-featured-card,
.books-archive-page .portfolio-featured-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}
/* Books: constrain portrait book cover height */
.books-archive-page .services-feat-combined .services-feat-img-wrap img {
    max-height: 200px;
    width: auto;
}
/* Not Sure: full width */
.services-archive-page .services-not-sure,
.plugins-archive-page .services-not-sure,
.themes-archive-page .services-not-sure {
    width: 100%;
    box-sizing: border-box;
}
@media (max-width: 48em) {
    .services-feat-body { grid-template-columns: 1fr; }
    .services-feat-combined { grid-template-columns: 1fr; }
}

/* All archive pages: filter bar contained with rounded corners */
.services-archive-page .portfolio-filter-section,
.portfolio-archive-page .portfolio-filter-section,
.plugins-archive-page .portfolio-filter-section,
.themes-archive-page .portfolio-filter-section,
.books-archive-page .portfolio-filter-section,
.blog-archive-page .portfolio-filter-section {
    background: var(--bg-section) !important;
    border-bottom: none;
    padding: 1rem 0;
    position: static;
}
.services-archive-page .portfolio-filter-bar,
.portfolio-archive-page .portfolio-filter-bar,
.plugins-archive-page .portfolio-filter-bar,
.themes-archive-page .portfolio-filter-bar,
.books-archive-page .portfolio-filter-bar,
.blog-archive-page .portfolio-filter-bar {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.625rem 1rem;
}

/* Book covers are portrait — constrain height so they don't overwhelm the featured card */
.books-archive-page .portfolio-featured-img {
    width: auto;
    max-height: 20rem;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 0.25rem;
}

.portfolio-featured-trusted {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.portfolio-featured-trusted-label {
    font-size: 0.9375rem;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}

.portfolio-featured-trusted-logos {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.portfolio-featured-trusted-logos img {
    height: 3.5rem;
    width: auto;
    opacity: 0.55;
    filter: grayscale(100%);
}

[data-theme="dark"] .portfolio-featured-trusted-logos img {
    filter: grayscale(100%) invert(1);
    opacity: 0.45;
}

/* ── Responsive ── */
@media (max-width: 64em) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 56.25em) {
    .portfolio-hero-inner {
        grid-template-columns: 1fr;
    }
    .portfolio-hero-right {
        display: none;
    }
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .portfolio-featured-card {
        padding: 1.75rem 1.5rem 1.5rem;
    }
    .portfolio-featured-inner {
        grid-template-columns: 1fr;
    }
    .portfolio-featured-right {
        display: none;
    }
    .portfolio-filter-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 47.9375em) {
    .portfolio-grid {
        grid-template-columns: 1fr !important;
    }
    .portfolio-stats {
        gap: 1.25rem;
    }
    .portfolio-search-input {
        width: 8.75rem;
    }
}

/* ═══════════════════════════════════════════════════
   BLOG INDEX — Archive Page
   ═══════════════════════════════════════════════════ */

/* ── Blog placeholder image: contain so full illustration is visible ── */
.portfolio-card-thumb img.blog-placeholder-img {
    object-fit: contain;
    padding: 0.75rem;
    background: #f0f6ff;
}

/* ── Blog Hero (mirrors portfolio-hero) ── */
.blog-hero {
    padding: 3.75rem 0 0;
    background: var(--bg-section);
    background-image: var(--hero-bg-image);
    background-size: cover;
    background-position: center;
    overflow: visible;
}

.blog-hero-inner {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 2.5rem;
    align-items: center;
}

.blog-hero-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-primary);
    margin: 0 0 0.625rem;
}

.blog-hero-title {
    font-size: clamp(1.75rem, 4vw, 2.625rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.15;
    margin: 0 0 0.75rem;
}

.blog-hero-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0;
}

.blog-hero-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}

.blog-stats {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
}

.blog-stat {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding-right: 2rem;
    margin-right: 2rem;
    border-right: 1px solid var(--border);
    margin-top: -0.625rem;
    padding-bottom: 0.625rem;
}

.blog-stat:last-child {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}

.blog-stat-icon {
    color: var(--brand-primary);
    flex-shrink: 0;
    opacity: 0.85;
}

.blog-stat-number {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.blog-stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.125rem;
}

.blog-hero-img {
    width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-bottom: -0.5rem;
}

/* ── Grid section header ── */
.blog-grid-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.blog-grid-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.blog-grid-pager {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* ── Card footer: date + read time + CTA ── */
.blog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.blog-card-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ── Featured article footer ── */
.blog-feat-footer {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

/* ── Responsive ── */
@media (max-width: 56.25em) {
    .blog-hero-inner {
        grid-template-columns: 1fr;
    }
    .blog-hero-right {
        display: none;
    }
}

@media (max-width: 37.5em) {
    .blog-stats {
        gap: 1.25rem;
    }
    .blog-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* ═══════════════════════════════════════════════════
   PORTFOLIO SINGLE — Case Study Template
   ═══════════════════════════════════════════════════ */

.portfolio-single-page {
    /* padding-bottom: 80px; */
}

/* ── Breadcrumb ── */
.portfolio-single-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 1.75rem;
}
.portfolio-single-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}
.portfolio-single-breadcrumb a:hover {
    color: var(--brand-primary);
}
.portfolio-single-breadcrumb span[aria-hidden] {
    color: var(--text-muted);
    opacity: 0.5;
}

/* ── Hero ── */
.portfolio-single-hero {
    padding: 3rem 0 2.5rem;
    background: var(--hero-bg-image) center/cover no-repeat;
}
.portfolio-single-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.portfolio-single-title {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 0 0 0.75rem;
}
.portfolio-single-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}
.portfolio-single-hero-img {
    width: 100%;
    border-radius: 0.75rem;
    display: block;
    mix-blend-mode: multiply;
}

/* ── Body Layout ── */
.portfolio-single-body {
    padding: 3rem 0 0;
}
.portfolio-single-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    align-items: start;
}

/* ── Main Content ── */
.portfolio-single-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
}
.portfolio-single-content {
    font-family: var(--font-primary);
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--text-secondary);
}
.portfolio-single-content p { margin-bottom: 16px; }
.portfolio-single-content h2,
.portfolio-single-content h3 {
    color: var(--text-primary);
    margin: 1.75rem 0 0.75rem;
}

/* ── Project Details ── */
.portfolio-single-details {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    padding: 1.75rem 2rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
}
.portfolio-single-details-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1.25rem;
}
.portfolio-single-meta-list {
    margin: 0 0 1.25rem;
    padding: 0;
}
.portfolio-single-meta-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border);
}
.portfolio-single-meta-row:last-child {
    border-bottom: none;
}
.portfolio-single-meta-row dt {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.portfolio-single-meta-row dd {
    font-size: 0.875rem;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
}
.portfolio-single-tag {
    display: inline-block;
    padding: 0.1875rem 0.625rem;
    background: rgba(59, 130, 246, 0.1);
    color: var(--brand-primary);
    border-radius: 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ── Author Box ── */
.portfolio-single-author {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-top: 2.5rem;
    padding: 1.5rem 1.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
}
.portfolio-single-author-avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.portfolio-single-author-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.portfolio-single-author-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
}
.portfolio-single-author-role {
    font-size: 0.8125rem;
    color: var(--brand-primary);
    font-weight: 500;
}
.portfolio-single-author-bio {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0.25rem 0 0;
}

/* ── Sidebar ── */
.portfolio-single-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.portfolio-sidebar-card {
    padding: 1.5rem 1.5rem 1.25rem;
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
}
.portfolio-sidebar-card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-muted);
    margin: 0 0 1rem;
    letter-spacing: 0;
    text-transform: none;
}
.portfolio-sidebar-services {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.portfolio-sidebar-service-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.5;
}
.portfolio-sidebar-service-item a {
    color: var(--brand-primary);
}
.portfolio-sidebar-service-item::before {
    content: '';
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.0625rem;
    background-color: var(--brand-primary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z' clip-rule='evenodd'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.portfolio-sidebar-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1rem 0 0;
}
.portfolio-sidebar-visit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5625rem 1.25rem;
    margin-top: 1rem;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    background-color: var(--brand-primary);
    border: none;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background-color 0.2s, opacity 0.2s;
    box-sizing: border-box;
}
.portfolio-sidebar-visit-btn:hover {
    opacity: 0.88;
    color: #fff;
    text-decoration: none;
}
/* Tech stack list in sidebar widget */
.portfolio-sidebar-tech-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Tech stack list in overview left column */
.portfolio-overview-tech-stack {
    margin-top: 1.25rem;
}
.portfolio-overview-tech-title {
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}
.portfolio-overview-tech-list {
    list-style: none;
    margin: 0 0 0.25rem;
    padding: 0;
}
.portfolio-overview-tech-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-muted);
    padding: 0.1875rem 0;
}
.portfolio-overview-tech-check {
    flex-shrink: 0;
    color: var(--brand-primary);
    margin-top: 0.125rem;
}
/* Full-width prev/next nav row below both columns */
.portfolio-overview-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 2.5rem 0;
}
.portfolio-overview-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5625rem 1.25rem;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    color: var(--brand-primary);
    background: #fff;
    border: 1px solid var(--brand-primary);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}
[data-theme="dark"] .portfolio-overview-nav-link {
    background: var(--bg-card);
}
.portfolio-overview-nav-link:hover {
    background: var(--brand-primary);
    color: #fff;
    text-decoration: none;
}
/* Left (overview area) Visit Project button — solid gray */
.portfolio-overview-visit-btn {
    width: auto;
    margin-top: 1.25rem;
    color: #fff;
    background-color: #818a91;
    border: none;
}
.portfolio-overview-visit-btn:hover {
    background-color: #6e7780;
    color: #fff;
    opacity: 1;
}
.portfolio-sidebar-meta {
    padding: 0.25rem 0;
}
.portfolio-sidebar-meta-row-plain {
    font-family: var(--font-primary);
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 0.375rem;
}

/* ── Back to Portfolio ── */
.portfolio-sidebar-back {
    padding: 1rem 0 0;
}
.portfolio-sidebar-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}
.portfolio-sidebar-back-link:hover {
    color: var(--brand-primary);
}
.portfolio-sidebar-back-link svg {
    flex-shrink: 0;
}

/* ── Tab Navigation ── */
.portfolio-single-tabs-nav {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 3.75rem;
    z-index: 10;
}
.portfolio-single-tabs-inner {
    display: flex;
    gap: 0;
}
.portfolio-single-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.875rem 1.25rem;
    min-height: 44px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.portfolio-single-tab:hover {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
    text-decoration: none;
}
.portfolio-single-tab.active {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
    font-weight: 600;
}

/* ── Social Share ── */
.portfolio-single-share {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.portfolio-single-share-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.portfolio-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    color: #fff;
    transition: opacity 0.2s, transform 0.15s;
    text-decoration: none;
}
.portfolio-share-btn:hover {
    opacity: 0.85;
    transform: translateY(-0.0625rem);
}
.portfolio-share-btn--linkedin  { background: #0A66C2; }
.portfolio-share-btn--twitter   { background: #000; }
.portfolio-share-btn--facebook  { background: #1877F2; }

/* ── Challenge & Solution Section ── */
.portfolio-single-challenge-section {
    margin-top: 2.5rem;
    padding: 4rem 0;
    background: var(--bg-section);
}
.portfolio-challenge-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    align-items: end;
}
.portfolio-challenge-illustration-wrap {
    display: flex;
    align-items: flex-end;
}
.portfolio-challenge-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1.25rem;
}
.portfolio-challenge-content {
    font-family: var(--font-primary);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.8;
    color: var(--text-secondary);
}
.portfolio-challenge-content p { margin-bottom: 16px; }
.portfolio-challenge-content ul {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}
.portfolio-challenge-content li { margin-bottom: 8px; }

.portfolio-challenge-illustration {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
}
/* ── Challenge CTA Card (always dark) ── */
.portfolio-challenge-cta-card {
    background: #0F172A;
    border-radius: 1rem;
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    position: sticky;
    top: 7.5rem;
}
.portfolio-challenge-cta-avatar {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    border: 3px solid rgba(59,130,246,0.5);
}
.portfolio-challenge-cta-quote {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #CBD5E1;
    margin: 0;
    font-style: italic;
    border-left: 3px solid var(--brand-primary);
    padding-left: 0.875rem;
}
.portfolio-challenge-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    background: var(--btn-gradient);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: opacity 0.2s;
}
.portfolio-challenge-cta-btn:hover {
    opacity: 0.9;
    color: #fff;
}

/* ── Single Portfolio Responsive ── */
@media (max-width: 64em) {
    .portfolio-single-layout {
        grid-template-columns: 1fr 280px;
        gap: 2rem;
    }
    .portfolio-challenge-layout {
        grid-template-columns: 1fr 280px;
        gap: 2rem;
    }
}

@media (max-width: 48em) {
    .portfolio-single-hero-inner {
        grid-template-columns: 1fr;
    }
    .portfolio-single-hero-right {
        display: none;
    }
    .portfolio-single-title {
        font-size: 1.75rem;
    }
    .portfolio-single-layout {
        grid-template-columns: 1fr;
    }
    .portfolio-single-sidebar {
        position: static;
    }
    .portfolio-single-details {
        padding: 1.25rem;
    }
    .portfolio-single-meta-row {
        grid-template-columns: 100px 1fr;
    }
    .portfolio-challenge-layout {
        grid-template-columns: 1fr;
    }
    .portfolio-challenge-cta-card {
        position: static;
    }
    .portfolio-challenge-title {
        font-size: 1.375rem;
    }
}

/* ── Overview 2-col (text + image) ── */
.portfolio-single-hero-text {
    max-width: 43.75rem;
}
.portfolio-overview-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-top: 2rem;
    align-items: start;
}
.portfolio-overview-subtitle {
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: -0.75rem 0 1.25rem;
    letter-spacing: 0.01em;
}
.portfolio-overview-meta {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--bg-section);
    border-left: 3px solid var(--brand-primary);
    border-radius: 0 0.5rem 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.portfolio-overview-meta-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.875rem;
}
.portfolio-overview-meta-label {
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}
.portfolio-overview-meta-value {
    color: var(--text-muted);
}
.portfolio-overview-cta {
    margin-top: 1.25rem;
    display: inline-flex;
}
.portfolio-overview-right {
    position: sticky;
    top: 7.5rem;
}
.portfolio-overview-img {
    width: 100%;
    border-radius: 0.75rem;
    display: block;
}

/* ── Challenge subtitle ── */
.portfolio-challenge-subtitle {
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: -0.75rem 0 1.25rem;
    letter-spacing: 0.01em;
}

/* ── Prev / Next Project Navigation ── */
.portfolio-sidebar-adjacent {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.25rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.portfolio-adjacent-link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    border-radius: 0.625rem;
    text-decoration: none;
    transition: background 0.2s;
}
.portfolio-adjacent-link:hover {
    background: var(--bg-section);
}
.portfolio-adjacent-link--next {
    align-items: flex-end;
    text-align: right;
}
.portfolio-adjacent-dir {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}
.portfolio-adjacent-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}
.portfolio-adjacent-link:hover .portfolio-adjacent-title {
    color: var(--brand-primary);
}

/* ── About Me Section ── */
.portfolio-about-section {
    padding: 2.5rem 0;
    background-color: var(--bg-surface);
    background-image: var(--hero-bg-image);
    background-size: cover;
    background-position: center;
    border-top: 1px solid var(--border);
}
.portfolio-about-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.portfolio-about-profile {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}
.portfolio-about-avatar {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    flex-shrink: 0;
    border: 3px solid var(--border);
}
.portfolio-about-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.portfolio-about-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.portfolio-about-role {
    font-size: 0.8125rem;
    color: var(--brand-primary);
    font-weight: 500;
}
.portfolio-about-bio {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0.375rem 0 0.625rem;
}
.portfolio-about-socials {
    display: flex;
    gap: 0.5rem;
}
.portfolio-about-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 0.5rem;
    background: var(--btn-gradient);
    color: #fff;
    border: none;
    transition: opacity 0.2s, transform 0.15s;
    text-decoration: none;
}
.portfolio-about-social:hover {
    opacity: 0.85;
    transform: translateY(-0.0625rem);
    color: #fff;
}
.portfolio-about-quote-wrap {
    position: relative;
    padding: 2.25rem 2.25rem 2rem;
    background: var(--bg-section);
    border-radius: 1rem;
}
.portfolio-about-quote-mark {
    font-size: 6rem;
    line-height: 1;
    color: var(--brand-primary);
    opacity: 0.15;
    position: absolute;
    top: 0.5rem;
    left: 1.25rem;
    font-family: Georgia, serif;
    pointer-events: none;
    user-select: none;
}
.portfolio-about-quote {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--text-primary);
    margin: 0 0 1rem;
    font-style: italic;
    position: relative;
    padding-top: 1.5rem;
}
.portfolio-about-cite {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    font-style: normal;
    display: block;
}

/* ── New responsive additions ── */
@media (max-width: 56.25em) {
    .portfolio-overview-right {
        position: static;
    }
    .portfolio-about-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
@media (max-width: 37.5em) {
    .portfolio-about-profile {
        flex-direction: column;
    }
}

/* ============================================================
   SINGLE SERVICE PAGE
   ============================================================ */

/* ── Page wrapper ── */
.service-single-page {
    background: var(--bg-primary);
}

/* ── Hero ── */
.service-single-hero {
    padding: 4rem 0 4.5rem;
    background: var(--hero-bg-image) center/cover no-repeat;
}

.service-single-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-primary);
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}
.service-single-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}
.service-single-breadcrumb a:hover {
    color: var(--brand-primary);
}

.service-single-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.service-single-title {
    font-family: var(--font-primary);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-heading);
    margin: 0 0 0.75rem;
}

.service-single-subtitle {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
}

/* Tag badges */
.service-single-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1.75rem;
    padding-left: 0;
}
.service-single-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: 1.25rem;
    padding: 0.3125rem 0.75rem;
}
.service-single-badge svg {
    color: var(--brand-primary);
    flex-shrink: 0;
}

/* Hero CTA buttons */
.service-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}
.service-hero-btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.5625rem 1.25rem;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    min-height: 44px;
    border-radius: var(--radius-sm);
    background-color: var(--brand-primary);
    color: #fff;
    text-decoration: none;
    border: none;
    transition: background-color 0.2s;
}
.service-hero-btn-primary:hover {
    background-color: var(--brand-hover);
    color: #fff;
}
.service-hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 0.5625rem 1.25rem;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    min-height: 44px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid var(--btn-ghost-border);
    color: var(--btn-ghost-text);
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}
.service-hero-btn-secondary:hover {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

/* Hero image */
.service-hero-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
}

/* ── Content Cards (2-col comparison layout) ── */
.service-content-cards-section {
    padding: 3rem 0;
    border-top: 1px solid var(--border);
    background: var(--bg-primary);
}
.service-content-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.service-content-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.75rem;
}
.service-content-card-title {
    font-family: var(--font-primary);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 1rem;
}
.service-content-card-body p {
    font-family: var(--font-primary);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0 0 0.75rem;
}
.service-content-card-body p:last-child {
    margin-bottom: 0;
}
@media (max-width: 48em) {
    .service-content-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Body: content + sidebar ── */
.service-single-body {
    padding: 4rem 0;
    background: var(--bg-primary);
}
.service-single-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    align-items: start;
}

/* Content area typography */
.service-single-content {
    font-family: var(--font-primary);
    color: var(--text-primary);
    line-height: 1.75;
}
.service-single-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 1rem;
    line-height: 1.3;
}
.service-single-content h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 2rem 0 0.75rem;
}
.service-single-content p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
}
.service-single-content ul,
.service-single-content ol {
    padding-left: 1.25rem;
    margin: 0 0 1.25rem;
}
.service-single-content li {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

/* ── Feature cards + sidebar (2-col layout) ── */
.service-features-section {
    padding: 3rem 0 2.5rem;
}
.service-features-header {
    margin-bottom: 1.25rem;
}
.service-features-heading {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 0.5rem;
    line-height: 1.25;
}
.service-features-subheading {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}
.service-features-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    align-items: start;
}
.service-features-main {
    min-width: 0;
}
.service-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
}
.service-feature-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 0 0.75rem;
    align-items: start;
}
.service-feature-icon {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    flex-shrink: 0;
    margin-top: -0.1875rem;
}
.service-feature-icon img {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: contain;
    margin-top: -0.75rem !important;
}
.service-feature-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}
.service-feature-text {
    min-width: 0;
}
.service-feature-title {
    font-family: var(--font-primary);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 0.25rem;
    line-height: 1.3;
}
.service-feature-desc {
    font-family: var(--font-primary);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ── How It Works section (full-width) ── */
.service-hiw-section {
    padding: 2.5rem 0;
    background: var(--bg-primary);
    overflow: hidden;
}
.service-hiw-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.service-hiw-title::after {
    content: '';
    flex: 1;
    border-top: 2px dotted var(--border);
    margin-bottom: 0.125rem;
}
.service-how-works-grid {
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    max-width: 100%;
}
.service-step {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.875rem;
    flex: 1;
    min-width: 0;
}
.service-step-icon-wrap {
    flex-shrink: 0;
    /* width: 64px; */
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-step-icon-wrap img {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
}
.service-step-num {
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    background: var(--brand-primary);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.service-step-num--first {
    background: #F59E0B;
    color: #fff;
}
.service-step-body {
    flex: 1;
    min-width: 0;
}
.service-step-title {
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 0.25rem;
}
.service-step-desc {
    font-family: var(--font-primary);
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}
.service-step-arrow {
    flex-shrink: 0;
    color: var(--brand-primary);
    padding: 0 0.75rem;
    display: flex;
    align-items: flex-start;
    padding-top: 0.875rem;
}

/* Sidebar */
.service-single-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 6.25rem;
}

/* Checklist box */
.service-sidebar-box {
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
}
.service-sidebar-box-title {
    font-family: var(--font-primary);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 1rem;
}
.service-sidebar-list {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.service-sidebar-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding-left: 0 !important;
    margin-left: 0 !important;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-secondary);
}
.service-sidebar-item svg {
    color: var(--brand-primary);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

/* CTA card */
.service-sidebar-cta {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 66% 35%;
    gap: 0 0.5rem;
    align-items: start;
}
.service-sidebar-cta-title {
    grid-column: 1 / -1;
}
.service-sidebar-cta-body {
    grid-column: 1;
}
.service-sidebar-cta-image {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.service-sidebar-cta-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}
.service-sidebar-cta-title {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 0.5rem;
}
.service-sidebar-cta-text {
    font-family: var(--font-primary);
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
    line-height: 1.5;
}
.service-sidebar-lets-talk {
    margin-top: 0.25rem;
    width: 100%;
    justify-content: center;
}
.service-sidebar-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5625rem 1.25rem;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--brand-primary);
    text-decoration: none;
    transition: opacity 0.2s;
}
.service-sidebar-cta-btn:hover {
    opacity: 0.9;
    color: var(--brand-primary);
}

/* ── Bottom CTA Band ── */
.service-cta-band {
    padding: 3.5rem 0;
    background: var(--hero-bg-image) center/cover no-repeat;
    overflow: hidden;
}
.service-cta-band-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: center;
}
.service-cta-band-title {
    font-family: var(--font-primary);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-heading);
    margin: 0 0 0.625rem;
}
.service-cta-band-sub {
    font-family: var(--font-primary);
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
    line-height: 1.6;
}
.service-cta-band-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}
/* Orange primary CTA button */
.service-cta-btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.375rem;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    min-height: 44px;
    border-radius: var(--radius-sm);
    background: #F59E0B;
    color: #fff;
    text-decoration: none;
    transition: opacity 0.2s;
}
.service-cta-btn-primary:hover {
    opacity: 0.9;
    color: #fff;
}
/* Secondary CTA button */
.service-cta-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.375rem;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    min-height: 44px;
    border-radius: var(--radius-sm);
    background: #fff;
    border: 1px solid #D1D5DB;
    color: #6B7280;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}
.service-cta-btn-secondary:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}
.service-cta-band-image {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.service-cta-band-img {
    display: block;
    max-height: 11.25rem;
    width: auto;
    max-width: 21.25rem;
}

/* ── Responsive ── */
@media (max-width: 64em) {
    .service-single-layout {
        grid-template-columns: 1fr 280px;
        gap: 2rem;
    }
}
@media (max-width: 48em) {
    .service-single-hero-inner {
        grid-template-columns: 1fr;
    }
    .service-single-hero-image {
        display: none;
    }
    .service-single-layout {
        grid-template-columns: 1fr;
    }
    .service-single-sidebar {
        position: static;
    }
    .service-single-title {
        font-size: 1.375rem;
    }
    .service-cta-band-inner {
        grid-template-columns: 1fr;
    }
    .service-cta-band-image {
        display: none;
    }
    .service-cta-band-title {
        font-size: 1.5rem;
    }
    .service-features-with-sidebar {
        grid-template-columns: 1fr;
    }
    .service-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .service-how-works-grid {
        flex-wrap: wrap;
        gap: 1rem;
    }
    .service-step-arrow {
        display: none;
    }
}
@media (max-width: 30em) {
    .service-features-grid {
        grid-template-columns: 1fr;
    }
    .service-how-works-grid {
        flex-direction: column;
    }
    .service-step {
        width: 100%;
    }
}

/* ── Shared section heading (all new service sections) ── */
.service-section-heading {
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 0.5rem;
    line-height: 1.25;
}
.service-section-subheading {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0 0 1.75rem;
    line-height: 1.6;
}

/* ── Key Takeaways (2-col) ── */
.service-takeaways-section {
    padding: 3rem 0 2.5rem;
}
.service-takeaways-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
}
.service-takeaway-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.service-takeaway-header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 0.75rem;
    align-items: center;
}
.service-takeaway-img-wrap {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.service-takeaway-img-wrap img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
}
.service-takeaway-num {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--brand-primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-primary);
}
.service-takeaway-title {
    font-family: var(--font-primary);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0;
    line-height: 1.3;
}
.service-takeaway-desc {
    font-family: var(--font-primary);
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
    width: 100%;
}

/* ── What You Get (2-col) ── */
.service-whatget-section {
    padding: 3rem 0 2.5rem;
    background: var(--bg-section);
}
.service-whatget-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.service-whatget-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.service-whatget-header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 0.75rem;
    align-items: center;
}
.service-whatget-img-wrap {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.service-whatget-img-wrap img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
}
.service-whatget-num {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-sm);
    background: var(--brand-primary);
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-primary);
}
.service-whatget-title {
    font-family: var(--font-primary);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0;
    line-height: 1.3;
}
.service-whatget-desc {
    font-family: var(--font-primary);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.65;
    width: 100%;
}

/* ── Enterprise Add-ons (2-col) ── */
.service-addons-section {
    padding: 3rem 0 2.5rem;
}
.service-addons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.service-addon-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 0 0.625rem;
    align-items: start;
}
.service-addon-check {
    color: var(--brand-primary);
    flex-shrink: 0;
    margin-top: 0.125rem;
}
.service-addon-title {
    font-family: var(--font-primary);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 0.25rem;
    line-height: 1.3;
}
.service-addon-desc {
    font-family: var(--font-primary);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ── FAQ accordion ── */
.service-faq-section {
    padding: 3rem 0 3.5rem;
    background: var(--bg-section);
}
.service-faq-list {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.service-faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.service-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-heading);
    text-align: left;
    line-height: 1.4;
}
.service-faq-q:hover {
    background: var(--bg-section);
}
.service-faq-chevron {
    flex-shrink: 0;
    color: var(--brand-primary);
    transition: transform 0.2s ease;
}
.service-faq-q[aria-expanded="true"] .service-faq-chevron {
    transform: rotate(180deg);
}
.service-faq-a {
    padding: 1.125rem 1.25rem;
}
.service-faq-q[aria-expanded="true"] {
    background: var(--bg-section);
}
.service-faq-a p {
    font-family: var(--font-primary);
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.7;
}

/* ── Responsive for new sections ── */
@media (max-width: 48em) {
    .service-takeaways-grid {
        grid-template-columns: 1fr;
    }
    .service-whatget-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 30em) {
    .service-addons-grid {
        grid-template-columns: 1fr;
    }
    .service-takeaway-card,
    .service-whatget-card {
        grid-template-columns: 36px 1fr;
        gap: 0 0.625rem;
    }
    .service-takeaway-num,
    .service-whatget-num {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.875rem;
    }
}

/* ═══════════════════════════════════════════════════
   BOOK SINGLE — Single Book Template
   ═══════════════════════════════════════════════════ */

/* ── Hero ── */
.book-single-hero {
    padding: 3.75rem 0 2.5rem;
    background: var(--bg-section);
    background-image: var(--hero-bg-image);
    background-size: cover;
    background-position: center;
    overflow: visible;
}

.book-single-hero--bg {
    padding: 3.75rem 0 3.125rem;
}

.book-single-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.book-single-hero--bg .book-single-breadcrumb {
    color: rgba(255,255,255,0.75);
}

.book-single-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.book-single-breadcrumb a:hover {
    color: var(--brand-primary);
}

.book-single-hero--bg .book-single-breadcrumb a:hover {
    color: #fff;
}

.book-single-hero-inner {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 3rem;
    align-items: center;
}

.book-single-title {
    font-size: clamp(1.625rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.15;
    margin: 0 0 0.875rem;
}

.book-single-hero--bg .book-single-title {
    color: #fff;
}

.book-single-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0 0 1.75rem;
    line-height: 1.6;
}

.book-single-hero--bg .book-single-subtitle {
    color: rgba(255,255,255,0.85);
}

.book-single-ctas {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.book-single-cover-img {
    width: 100%;
    max-width: 17.5rem;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 0.5rem;
    /* box-shadow: 0 20px 60px rgba(0,0,0,0.2); */
}

/* ── Content + Sidebar layout ── */
.book-single-body {
    padding: 3.75rem 0 5rem;
}

.book-single-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
    align-items: start;
}

.book-single-content {
    min-width: 0;
}

/* ── Sidebar ── */
.book-single-sidebar {
    position: sticky;
    top: 5rem;
}

.book-sidebar-box {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.book-sidebar-box-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.book-sidebar-details {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.book-sidebar-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
}

.book-sidebar-detail-label {
    color: var(--text-muted);
    font-weight: 500;
}

.book-sidebar-detail-value {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
}

.book-sidebar-cta {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.book-sidebar-cta-btn {
    text-align: center;
    display: block;
}

.book-sidebar-amazon-link {
    display: block;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.5625rem 1.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    transition: color 0.2s, border-color 0.2s;
}

.book-sidebar-amazon-link:hover {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
    text-decoration: none;
}

/* ── Responsive ── */
@media (max-width: 56.25em) {
    .book-single-hero-inner {
        grid-template-columns: 1fr;
    }
    .book-single-hero-cover {
        display: none;
    }
    .book-single-layout {
        grid-template-columns: 1fr;
    }
    .book-single-sidebar {
        position: static;
    }
}

/* ═══════════════════════════════════════════════════
   THEME SINGLE — Single Theme Template
   ═══════════════════════════════════════════════════ */

/* ── Hero ── */
.theme-single-hero {
    padding: 3.25rem 0 2.75rem;
    background: var(--bg-section);
    background-image: var(--hero-bg-image);
    background-size: cover;
    background-position: center;
    overflow: visible;
}
.theme-single-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}
.theme-single-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.theme-single-breadcrumb a:hover { color: var(--brand-primary); }
.theme-single-breadcrumb span[aria-hidden] { opacity: 0.5; }

.theme-single-hero-inner {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 3rem;
    align-items: center;
}
.theme-single-title {
    font-size: clamp(1.625rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0 0 0.75rem;
}
.theme-single-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 1.5rem;
}
.theme-single-ctas {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.theme-single-hero-image {
    /* border-radius and overflow:hidden removed — PNG has natural transparency edges */
    /* box-shadow: 0 16px 48px rgba(0,0,0,0.12); */
}
.theme-single-hero-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Body ── */
.theme-single-body {
    padding: 3.25rem 0 4rem;
}
.theme-single-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
    align-items: start;
}
.theme-single-content {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--text-primary);
    min-width: 0;
}
.theme-single-content h2,
.theme-single-content h3 {
    margin-top: 1.8em;
    margin-bottom: 0.6em;
    font-weight: 700;
    color: var(--text-primary);
}
.theme-single-content p { margin: 0 0 1.2em; }
.theme-single-content ul,
.theme-single-content ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.theme-single-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 1em 0; }
.theme-single-content a { color: var(--brand-primary); }
.theme-single-content-ctas { margin: 28px 0 16px; }

.theme-single-demo-url {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin: 0 0 1.5rem;
}
.theme-single-demo-url a { color: var(--brand-primary); word-break: break-all; }
.theme-single-demo-url svg { flex-shrink: 0; color: var(--text-muted); }

.theme-single-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.theme-single-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
}

/* ── Sidebar ── */
.theme-single-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 6.25rem;
}

/* ── CTA Banner ── */
.theme-single-cta-banner {
    padding: 3.5rem 0;
    background: var(--btn-gradient, var(--brand-primary));
}
.theme-single-cta-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.theme-single-cta-banner-title {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 800;
    color: #fff !important;
    margin: 0 0 0.5rem;
}
.theme-single-cta-banner-subtitle {
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.85);
    margin: 0;
}
.theme-single-cta-banner-btns {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.theme-cta-btn-primary {
    padding: 0.5625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--brand-primary);
    text-decoration: none;
    white-space: nowrap;
}
.theme-cta-btn-primary:hover { opacity: 0.92; }
.theme-cta-btn-secondary {
    padding: 0.5625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid rgba(255,255,255,0.6);
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}
.theme-cta-btn-secondary:hover { background: rgba(255,255,255,0.1); }

/* ── Responsive ── */
@media (max-width: 64em) {
    .theme-single-hero-inner { grid-template-columns: 1fr 340px; gap: 32px; }
    .theme-single-layout { grid-template-columns: 1fr 260px; gap: 32px; }
}
@media (max-width: 48em) {
    .theme-single-hero-inner { grid-template-columns: 1fr; }
    .theme-single-hero-image { order: -1; }
    .theme-single-layout { grid-template-columns: 1fr; }
    .theme-single-sidebar { position: static; }
    .theme-single-cta-banner-inner { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════════════ */

/* ── About hero: avatar + name row ── */
.about-hero-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.25rem;
}
.about-hero-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    flex-shrink: 0;
}
.about-hero-identity .portfolio-hero-title {
    margin: 0;
}

/* ── Profile header / Hero ── */
.about-profile-section {
    padding: 3.5rem 0 3rem;
    background: var(--bg-section);
    background-image: var(--hero-bg-image);
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--border);
}
.about-profile-inner {
    display: grid;
    grid-template-columns: 1fr 460px;
    align-items: center;
    gap: 3rem;
}
.about-profile-left {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}
.about-profile-identity {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.about-profile-hero-image img {
    width: 100%;
    height: auto;
    display: block;
}
.about-avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    flex-shrink: 0;
    border: 3px solid #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.about-profile-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}
.about-profile-role {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}
.about-profile-stats {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1.25rem 1.75rem;
}
.about-profile-stats-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 0.875rem;
}
.about-stats-row {
    display: flex;
    gap: 2rem;
}
.about-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.about-stat-number {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--brand-primary);
    line-height: 1;
}
.about-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    white-space: nowrap;
}

/* ── Story + Sidebar ── */
.about-body-section {
    padding: 3.25rem 0 3.75rem;
}
.about-body-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
    align-items: start;
}
.about-section-title {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 1rem;
}
.about-section-subtitle {
    font-size: 0.9375rem;
    color: var(--text-muted);
    margin: -0.5rem 0 2rem;
}
.about-story-content {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--text-primary);
}
.about-story-content p { margin: 0 0 1.2em; }
.about-story-content ul {
    padding-left: 0;
    list-style: none;
    margin: 0 0 1.2em;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.about-story-content ul li {
    padding-left: 1.375rem;
    position: relative;
    font-size: 0.875rem;
    color: var(--text-muted);
    list-style: none;
}
/* ── Easy TOC styles (about page) ── */
#ez-toc-container {
    background: #fff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-sm, 6px);
    padding: 1rem 1.25rem 1.25rem;
    margin: 0 0 1.5rem;
}
#ez-toc-container p.ez-toc-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--text-dark);
    margin: 0;
}
/* Use display:table so the plugin's float:right on the toggle button works */
#ez-toc-container .ez-toc-title-container {
    display: table;
    width: 100%;
    margin-bottom: 0.75rem;
}
/* Counter-based numbering */
#ez-toc-container nav {
    counter-reset: toc-l1;
}
#ez-toc-container ul.ez-toc-list {
    display: block;
    list-style: none !important;
    padding: 0;
    margin: 0;
    gap: 0;
    counter-reset: toc-l1;
}
#ez-toc-container ul.ez-toc-list > li {
    display: block;
    list-style: none !important;
    padding: 0;
    margin: 0;
    position: static;
    overflow: visible;
    counter-increment: toc-l1;
    counter-reset: toc-l2;
}
#ez-toc-container ul.ez-toc-list > li > a.ez-toc-link::before {
    content: counter(toc-l1) "." !important;
    font-weight: 400;
    margin-right: 0.4em !important;
    flex-shrink: 0;
}
/* Sub-list */
#ez-toc-container ul.ez-toc-list ul {
    display: block;
    list-style: none !important;
    padding-left: 1.25rem;
    margin: 0.15rem 0 0.15rem;
    gap: 0;
    counter-reset: toc-l2;
}
#ez-toc-container ul.ez-toc-list ul > li {
    display: block;
    list-style: none !important;
    padding: 0;
    margin: 0.15rem 0;
    position: static;
    overflow: visible;
    counter-increment: toc-l2;
}
#ez-toc-container ul.ez-toc-list ul > li > a.ez-toc-link::before {
    content: counter(toc-l1) "." counter(toc-l2) ". ";
    font-weight: 400;
}
/* Link colours - match global a{} and .about-story-content ul li exactly */
#ez-toc-container a.ez-toc-link {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: var(--brand-primary) !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
}
#ez-toc-container a.ez-toc-link:visited {
    color: var(--brand-primary) !important;
}
#ez-toc-container a.ez-toc-link:hover {
    color: var(--brand-hover) !important;
    text-decoration: underline !important;
}
/* Toggle button - restore plugin defaults, just override visual styles */
#ez-toc-container a.ez-toc-toggle {
    background: none !important;
    box-shadow: none !important;
}
/* Reset flex/gap overrides from about-story-content ul rule */
.about-story-content ul[class*="ez-toc"] li,
.about-story-content ul[class*="ez-toc"] {
    padding-left: revert;
    list-style: revert;
    display: revert;
    gap: 0.5rem;
}
.about-story-content ul:not([class*="ez-toc"]) li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--brand-primary);
    font-weight: 700;
}
.about-story-content h2,
.about-story-content h3 {
    font-weight: 700;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
}
.about-story-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 0 1.6em !important;
    font-size: 0.875rem !important;
}
.about-story-content table thead th {
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--text-muted) !important;
    padding: 0.5rem 1.5rem 0.5rem 0 !important;
    border-bottom: 2px solid var(--border-color, #e5e7eb) !important;
}
.about-story-content table tbody td {
    padding: 0.75rem 1.5rem 0.75rem 0 !important;
    vertical-align: top !important;
    border-bottom: 1px solid var(--border-color, #e5e7eb) !important;
    line-height: 1.5 !important;
}
.about-story-content table tbody td:first-child {
    font-weight: 600 !important;
    color: var(--text-dark, #111827) !important;
    padding-right: 2rem !important;
    width: 25% !important;
}
.about-story-content table tbody tr:last-child td {
    border-bottom: none !important;
}
.about-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 6.25rem;
}

/* Books sidebar */
.about-sidebar-books {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}
.about-sidebar-book-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    min-height: 44px;
}
.about-sidebar-book-thumb {
    width: 2.75rem;
    height: 3.625rem;
    object-fit: cover;
    border-radius: 0.25rem;
    flex-shrink: 0;
}
.about-sidebar-book-placeholder {
    width: 2.75rem;
    height: 3.625rem;
    background: var(--bg-alt);
    border-radius: 0.25rem;
    flex-shrink: 0;
}
.about-sidebar-book-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}
.about-sidebar-book-item:hover .about-sidebar-book-title { color: var(--brand-primary); }

/* Posts sidebar */
.about-sidebar-posts {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
}
.about-sidebar-post-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    text-decoration: none;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--border);
    min-height: 44px;
    justify-content: center;
}
.about-sidebar-post-item:last-child { border-bottom: none; padding-bottom: 0; }
.about-sidebar-post-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}
.about-sidebar-post-item:hover .about-sidebar-post-title { color: var(--brand-primary); }
.about-sidebar-post-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ── Services ── */
.about-services-section {
    padding: 3.5rem 0 4rem;
    background: var(--bg-alt);
}
.about-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.about-service-card {
    padding: 1.5rem 1.25rem;
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.about-service-card:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.about-service-icon {
    width: 3rem;
    height: 3rem;
    background: var(--brand-primary);
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.about-service-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.about-service-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

/* ── Community ── */
.about-community-section {
    padding: 3.5rem 0 4rem;
}
.about-community-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
.about-community-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.about-community-icon {
    width: 3rem;
    height: 3rem;
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary);
    flex-shrink: 0;
}
.about-community-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.375rem;
}
.about-community-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 64em) {
    .about-profile-inner { grid-template-columns: 1fr 340px; gap: 32px; }
    .about-body-layout { grid-template-columns: 1fr 260px; gap: 32px; }
    .about-services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 48em) {
    .about-profile-inner { grid-template-columns: 1fr; }
    .about-profile-hero-image { display: none; }
    .about-stats-row { gap: 20px; }
    .about-body-layout { grid-template-columns: 1fr; }
    .about-sidebar { position: static; }
    .about-services-grid { grid-template-columns: 1fr; }
    .about-community-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   BLOG SINGLE — Single Blog Post Template
   ═══════════════════════════════════════════════════ */

/* ── Hero ── */
.blog-single-hero {
    padding: 3.25rem 0 2.75rem;
    background: var(--bg-section);
    background-image: var(--hero-bg-image);
    background-size: cover;
    background-position: center;
}
.blog-single-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}
.blog-single-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}
.blog-single-breadcrumb a:hover { color: var(--brand-primary); }
.blog-single-breadcrumb span[aria-hidden] { opacity: 0.5; }
.blog-single-title {
    font-size: clamp(1.625rem, 3.5vw, 2.625rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0 0 0.875rem;
    max-width: 47.5rem;
}
.blog-single-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 1.25rem;
    max-width: 42.5rem;
}
.blog-single-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.875rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.blog-single-meta-item {
    display: flex;
    align-items: center;
    gap: 0.3125rem;
}
.blog-single-meta-cat {
    display: inline-block;
    padding: 0.1875rem 0.625rem;
    background: var(--brand-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 1.25rem;
    text-decoration: none;
}
.blog-single-meta-cat:hover { opacity: 0.85; }

/* ── Body layout ── */
.blog-single-body {
    padding: 3.25rem 0 4rem;
}
.blog-single-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
    align-items: start;
}
.blog-single-content {
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--text-primary);
    min-width: 0;
}
.blog-single-content h2,
.blog-single-content h3,
.blog-single-content h4 {
    margin-top: 2em;
    margin-bottom: 0.6em;
    font-weight: 700;
    color: var(--text-primary);
}
.blog-single-content p { margin: 0 0 1.2em; }
.blog-single-content ul,
.blog-single-content ol {
    padding-left: 1.4em;
    margin: 0 0 1.2em;
}
.blog-single-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1em 0;
}
.blog-single-content a { color: var(--brand-primary); }

/* ── Sidebar ── */
.blog-single-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 6.25rem;
}

/* Services list */
.blog-sidebar-services-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.blog-sidebar-service-item {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.blog-sidebar-service-item svg { color: var(--brand-primary); flex-shrink: 0; margin-top: 0.15rem; }
.blog-sidebar-service-item a {
    color: var(--brand-primary);
    text-decoration: none;
    font-size: 0.8125rem;
}
.blog-sidebar-service-item a:hover { color: var(--brand-primary); }
.blog-sidebar-more-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-primary);
    text-decoration: none;
    margin-top: 0.25rem;
    min-height: 44px;
}
.blog-sidebar-more-link:hover { text-decoration: underline; }

/* Portfolio list */
.blog-sidebar-portfolio-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}
.blog-sidebar-portfolio-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    min-height: 44px;
}
.blog-sidebar-portfolio-thumb {
    width: 3.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: 0.375rem;
    flex-shrink: 0;
}
.blog-sidebar-portfolio-placeholder {
    width: 3.5rem;
    height: 2.5rem;
    background: var(--bg-alt);
    border-radius: 0.375rem;
    flex-shrink: 0;
}
.blog-sidebar-portfolio-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}
.blog-sidebar-portfolio-item:hover .blog-sidebar-portfolio-title { color: var(--brand-primary); }

/* About Me */
.blog-sidebar-about {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
}
.blog-sidebar-about-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.blog-sidebar-about-info {
    display: flex;
    flex-direction: column;
}
.blog-sidebar-about-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
}
.blog-sidebar-about-role {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.blog-sidebar-about-bio {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 0.625rem;
}

/* ── Related posts ── */
.blog-related-section {
    padding: 3.25rem 0 3.75rem;
    background: var(--bg-alt);
}
.blog-related-title {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 1.75rem;
}
.blog-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* ── Author box ── */
.blog-author-section {
    padding: 3rem 0 3.5rem;
    border-top: 1px solid var(--border);
}
.blog-author-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2.5rem;
    align-items: start;
}
.blog-author-left {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}
.blog-author-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.blog-author-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.blog-author-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
}
.blog-author-role {
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.blog-author-bio {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 64em) {
    .blog-single-layout {
        grid-template-columns: 1fr 260px;
        gap: 2rem;
    }
}
@media (max-width: 48em) {
    .blog-single-layout {
        grid-template-columns: 1fr;
    }
    .blog-single-sidebar {
        position: static;
    }
    .blog-related-grid {
        grid-template-columns: 1fr;
    }
    .blog-author-layout {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}
}

/* ═══════════════════════════════════════════════════
   PLUGIN SINGLE — Single Plugin Template
   ═══════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.plugin-single-page {
    background: var(--bg-primary);
}

/* ── Hero ── */
.plugin-single-hero {
    padding: 4rem 0 4.5rem;
    background: var(--hero-bg-image) center/cover no-repeat;
}

.plugin-single-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-primary);
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}
.plugin-single-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}
.plugin-single-breadcrumb a:hover {
    color: var(--brand-primary);
}

.plugin-single-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.plugin-single-title {
    font-family: var(--font-primary);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-heading);
    margin: 0 0 0.75rem;
}

.plugin-single-subtitle {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
}

/* Category badges */
.plugin-single-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-bottom: 1.75rem;
    padding-left: 0;
}
.plugin-single-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: 1.25rem;
    padding: 0.3125rem 0.75rem;
}
.plugin-single-badge svg {
    color: var(--brand-primary);
    flex-shrink: 0;
}

/* Hero CTA buttons */
.plugin-single-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* Hero image */
.plugin-single-hero-image {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.plugin-hero-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
}

/* ── Body: content (full-width) ── */
.plugin-single-body {
    padding: 4rem 0;
    background: var(--bg-primary);
}

.plugin-single-content {
    font-family: var(--font-primary);
    color: var(--text-primary);
    line-height: 1.75;
    margin-top: 2.5rem;
}
.plugin-single-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 0 0 1rem;
    line-height: 1.3;
}
.plugin-single-content h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-heading);
    margin: 2rem 0 0.75rem;
}
.plugin-single-content p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
}
.plugin-single-content ul,
.plugin-single-content ol {
    padding-left: 1.25rem;
    margin: 0 0 1.25rem;
}
.plugin-single-content li {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

/* Sidebar */
.plugin-single-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 6.25rem;
}

/* ── Bottom CTA Band ── */
.plugin-cta-band {
    padding: 3.5rem 0;
    background: var(--hero-bg-image) center/cover no-repeat;
    overflow: hidden;
}
.plugin-cta-band-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem;
    align-items: center;
}
.plugin-cta-band-title {
    font-family: var(--font-primary);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-heading);
    margin: 0 0 0.625rem;
}
.plugin-cta-band-sub {
    font-family: var(--font-primary);
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin: 0 0 1.5rem;
    line-height: 1.6;
}
.plugin-cta-band-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}
.plugin-cta-band-image {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.plugin-cta-band-img {
    display: block;
    max-height: 11.25rem;
    width: auto;
    max-width: 21.25rem;
}

/* ── Responsive ── */
@media (max-width: 64em) {
    .plugin-single-hero-inner {
        gap: 2rem;
    }
}
@media (max-width: 48em) {
    .plugin-single-hero-inner {
        grid-template-columns: 1fr;
    }
    .plugin-single-hero-image {
        display: none;
    }
    .plugin-single-title {
        font-size: 1.375rem;
    }
    .plugin-cta-band-inner {
        grid-template-columns: 1fr;
    }
    .plugin-cta-band-image {
        display: none;
    }
    .plugin-cta-band-title {
        font-size: 1.5rem;
    }
    .plugin-single-sidebar {
        position: static;
    }
    .plugin-single-content {
        margin-top: 1.5rem;
    }
}

/* About page - Load More services */
.about-service-hidden {
    display: none !important;
}
.about-services-load-more-wrap {
    text-align: center;
}
.about-services-load-more-wrap .nav-contact-btn {
    border: none;
    margin-top: 2rem;
}

/* ============================================================
   ACCESSIBILITY - Touch Targets & Skip Link
   ============================================================ */

/* Skip link - positioned off-screen at 44px so QA and keyboard users are both served */
.skip-link {
    position: fixed !important;
    top: -100vh !important;
    left: 0 !important;
    width: 44px !important;
    height: 44px !important;
    clip: auto !important;
    clip-path: none !important;
    overflow: hidden !important;
    z-index: -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.skip-link:focus {
    top: 0.5rem !important;
    left: 0.5rem !important;
    width: auto !important;
    height: auto !important;
    padding: 0.75rem 1.5rem !important;
    background: var(--brand-primary) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    z-index: 100000 !important;
    overflow: visible !important;
}

/* Plugin form button group - remove font-size: 0 technique that triggers readability check */
.input-group-btn {
    font-size: inherit;
}

/* Footer nav links - touch targets on mobile only */
@media (max-width: 767px) {
    .footer-check-list li a,
    .footer-arrow-list a {
        display: block;
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
    }
}

.footer-themes-list a {
    display: flex;
    align-items: center;
    min-height: 44px;
}

/* Breadcrumb links - all CPT single pages */
.service-single-breadcrumb a,
.portfolio-single-breadcrumb a,
.book-single-breadcrumb a,
.theme-single-breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
}

/* Easy TOC plugin - toggle button and anchor links */
html body .ez-toc-btn,
.ez-toc-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* ez-toc link display handled at source rule #ez-toc-container a.ez-toc-link above */

/* Form inputs and buttons - Ninja Forms, CF7, and any other plugin forms */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="submit"],
input[type="button"],
select,
textarea {
    min-height: 44px;
}

/* Service/portfolio listing - "View Full Case Study" and similar card CTAs */
.service-card-link,
.service-card-cta,
.portfolio-view-btn,
.view-case-study-btn {
    min-height: 44px;
}

/* ============================================================
   DESKTOP OVERRIDES - reset touch targets on pointer devices
   Touch targets (min-height:44px) are for touch screens only.
   On desktop (hover capable, precise pointer) restore compact sizing.
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
    /* Contact sidebar - restore compact sizing */
    .contact-widget-arrow-list a {
        min-height: unset;
        display: revert;
    }
    .contact-widget-link {
        min-height: unset;
        display: revert;
    }

    /* Portfolio card title - restore natural height */
    .portfolio-card-title a {
        min-height: unset;
        display: revert;
    }
}

/* =============================================================================
   HOME STATS BAR
   Horizontal stats strip between hero and book-promo sections
   ============================================================================= */

.home-stats-bar {
    background: var(--bg-section);
    padding: 2.5rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.home-stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.home-stat {
    text-align: center;
    padding: 0.5rem 1rem;
}

.home-stat-value {
    display: block;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--brand-primary);
    line-height: 1;
}

.home-stat-label {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
    line-height: 1.4;
}

/* Tablet - 2x2 grid */
@media (min-width: 768px) {
    .home-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }

    .home-stat {
        padding: 0.75rem 1.5rem;
    }
}

/* Desktop - 4 columns with dividers */
@media (min-width: 1025px) {
    .home-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .home-stat:not(:last-child) {
        border-right: 1px solid var(--border);
    }
}

/* =============================================================================
   TRUSTED BY SECTION
   Text-based client name grid replacing old logo trust bar
   ============================================================================= */

.trusted-by-section {
    padding: 3.5rem 0;
    background: var(--bg-primary);
}

.trusted-by-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 2rem;
    text-align: center;
}

.trusted-by-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.trusted-by-item {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: border-color var(--transition);
}

.trusted-by-item:hover {
    border-color: var(--brand-primary);
}

.trusted-by-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.trusted-by-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.trusted-by-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.trusted-by-logos {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
    flex-shrink: 0;
}

.trusted-by-logo {
    height: 36px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    opacity: 0.72;
    transition: opacity var(--transition);
}

[data-theme="dark"] .trusted-by-logo {
    filter: brightness(0) invert(1);
    opacity: 0.6;
}

.trusted-by-item:hover .trusted-by-logo {
    opacity: 1;
}

/* Tablet - 2 columns */
@media (min-width: 768px) {
    .trusted-by-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop - 3 columns */
@media (min-width: 1025px) {
    .trusted-by-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =============================================================================
   CLOSING CTA SECTION
   Full-width branded closing block with heading, body text, and CTA buttons
   ============================================================================= */

.closing-cta-section {
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
    padding: 5rem 0;
}

[data-theme="dark"] .closing-cta-section {
    background: var(--bg-surface);
}

.closing-cta-inner {
    max-width: 52rem;
    margin: 0 auto;
    text-align: center;
}

.closing-cta-heading {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 1.5rem;
    color: var(--text-primary);
}

.closing-cta-body {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0 0 1.25rem;
}

.closing-cta-btns {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}


/* ── Let's Talk: Who This Call Is For + FAQ (combined 60/40) ───────────── */
.letstalk-qualify-faq {
    padding: 4rem 0;
    background: var(--bg-section-alt, #f8f9fa);
}

.letstalk-qualify-faq-inner {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 3.5rem;
    align-items: start;
}

/* Left col: qualify */
.letstalk-qualify-faq-inner .letstalk-qualify {
    padding: 0;
    background: none;
}

.letstalk-qualify-intro {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin: 0 0 1rem;
}

.letstalk-qualify-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.letstalk-qualify-list li {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-light, #e5e7eb);
    font-size: 0.975rem;
    line-height: 1.55;
    color: var(--text-primary);
}

.letstalk-qualify-list li::before {
    content: '✓';
    flex-shrink: 0;
    color: var(--brand-primary);
    font-size: 1rem;
    font-weight: 700;
}

.letstalk-qualify-footer {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
}

/* Right col: FAQ inside combined section */
.letstalk-qualify-faq-inner .letstalk-faq {
    padding: 0;
    background: none;
}

/* Responsive: stack on tablet/mobile */
@media (max-width: 56.25em) {
    .letstalk-qualify-faq-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* ── Themes: Positioning Block ──────────────────────────────────────────── */
.themes-positioning-block {
    padding: 3.5rem 0;
    background: var(--bg-section-alt, #f8f9fa);
}

.themes-positioning-inner {
    max-width: 52rem;
}

.themes-positioning-title {
    font-size: clamp(1.25rem, 2.5vw, 1.6rem);
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--text-primary);
}

.themes-positioning-body {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
}

.themes-positioning-link {
    font-size: 0.975rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
}

/* ── Themes: Bottom CTA ─────────────────────────────────────────────────── */
.themes-cta-section {
    padding: 5rem 0;
    background: #0f172a;
}

.themes-cta-inner {
    display: flex;
    gap: 4rem;
    align-items: flex-start;
}

.themes-cta-left {
    flex: 0 0 55%;
    max-width: 55%;
}

.themes-cta-right {
    flex: 1 1 0;
    min-width: 0;
}

.themes-cta-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 1.5rem;
    color: #fff !important;
    padding-left: 1rem;
    border-left: 2px solid #2563EB;
}

.themes-cta-body {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255,255,255,.72);
    margin: 0 0 1.1rem;
    max-width: 60ch;
}

.themes-cta-btns {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

/* Proof points panel */
.themes-cta-proof {
    background: #1e293b;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    padding: 1.75rem;
}

.themes-cta-proof-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2563EB;
    margin: 0 0 1.25rem;
}

.themes-cta-proof-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.themes-cta-proof-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.themes-cta-proof-check {
    display: inline-block;
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    border-radius: 50%;
    background: rgba(37,99,235,.18);
    border: 1.5px solid #2563EB;
    position: relative;
}

.themes-cta-proof-check::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 45%;
    width: 0.3125rem;
    height: 0.5625rem;
    border: 1.5px solid #2563EB;
    border-top: none;
    border-left: none;
    transform: translate(-50%, -55%) rotate(45deg);
}

.themes-cta-proof-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.themes-cta-proof-text strong {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}

.themes-cta-proof-text span {
    font-size: 0.875rem;
    line-height: 1.5;
    color: rgba(255,255,255,.65);
}

/* Mobile: stack columns */
@media (max-width: 767px) {
    .themes-cta-inner {
        flex-direction: column;
        gap: 2.5rem;
    }
    .themes-cta-left {
        flex: none;
        max-width: 100%;
    }
}