/* ============================================================
   SERVICE PAGES — pijushsaha.com
   ============================================================ */

/* ── 1. CSS VARIABLES ──────────────────────────────────────── */

:root {
    --color-primary:   #1a73e8;
    --color-secondary: #0f9d58;
    --color-accent:    #fbbc04;
    --color-dark:      #1a1a2e;
    --color-text:      #333333;
    --color-light-bg:  #f8f9fa;
    --color-white:     #ffffff;
    --color-border:    #e2e8f0;
    --radius:          8px;
    --max-width:       1200px;
    --shadow-card:     0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 8px 32px rgba(26, 115, 232, 0.15);
    --transition:      0.25s ease;
    --font-body:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── BASE RESETS FOR SERVICE PAGE SECTIONS ─────────────────── */

.sp-hero,
.sp-stats-bar,
.sp-intro,
.sp-services-grid,
.sp-services-list,
.sp-testimonials,
.sp-about,
.sp-cta-bottom {
    box-sizing: border-box;
    font-family: var(--font-body);
    /* Reset any margins GeneratePress applies to direct children */
    margin-top: 0;
    margin-bottom: 0;
}

.sp-hero *,
.sp-stats-bar *,
.sp-intro *,
.sp-services-grid *,
.sp-services-list *,
.sp-testimonials *,
.sp-about *,
.sp-cta-bottom * {
    box-sizing: border-box;
}

/* ── FULL-BLEED: break sections out of GeneratePress container ─ */
/* GP's .site-content has a max-width. This escapes it so
   sections with dark/colored backgrounds span edge to edge.    */

.sp-hero,
.sp-stats-bar,
.sp-services-grid,
.sp-testimonials,
.sp-cta-bottom {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ── FULL-WIDTH SERVICE SINGLES ─────────────────────────────────
   Every service CPT single gets the .sp-fullwidth body class (added in
   functions.php via pijush_service_cpts()). Keying off one class instead of a
   per-post-type list keeps the SEO / GEO / SaaS / Ecommerce and renamed AI
   CPTs from silently breaking out of the full-bleed treatment. */

/* Prevent the full-bleed (100vw) trick from creating horizontal scroll */
body.sp-fullwidth {
    overflow-x: hidden;
}

/* Strip GP's container/article padding so .sp- sections sit flush and the
   100vw + calc(50% - 50vw) math is measured against a centered, unpadded box */
body.sp-fullwidth .site-content,
body.sp-fullwidth .content-area,
body.sp-fullwidth .site-main,
body.sp-fullwidth .inside-article,
body.sp-fullwidth .entry,
body.sp-fullwidth .entry-content {
    padding: 0;
    margin: 0;
}

/* ── 2. HERO ───────────────────────────────────────────────── */

.sp-hero {
    /* width:100vw + the full-bleed margins above keep this edge-to-edge.
       (Do not set width:100% here — it collapses the hero to container width
       while the negative margins remain, leaving a gutter on the right.) */
    width: 100vw;
    background-color: var(--color-dark);
    background-image: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: var(--color-white);
    text-align: center;
    padding: 100px 20px 80px;
    position: relative;
    overflow: hidden;
}

.sp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    /* centered glow so the colorful highlight sits in the middle of the hero */
    background: radial-gradient(ellipse at 50% 0%, rgba(26, 115, 232, 0.22) 0%, transparent 60%);
    pointer-events: none;
}

.sp-hero__inner {
    position: relative;
    max-width: var(--max-width);
    margin: 0 auto;
}

.sp-hero__eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 20px;
}

.sp-hero h1,
.sp-hero__headline {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-white);
    margin: 0 0 20px;
}

.sp-hero__subheadline {
    font-size: 20px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 680px;
    margin: 0 auto 36px;
}

.sp-hero__cta {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    padding: 16px 36px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
    box-shadow: 0 4px 20px rgba(26, 115, 232, 0.4);
}

.sp-hero__cta:hover,
.sp-hero__cta:focus {
    background-color: #1557b0;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(26, 115, 232, 0.5);
    color: var(--color-white);
    text-decoration: none;
}

.sp-hero__cta--secondary {
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    margin-left: 12px;
}

.sp-hero__cta--secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--color-white);
    box-shadow: none;
}

/* AI Automation pages: use secondary (green) accent */
.sp-hero--ai .sp-hero__cta {
    background-color: var(--color-secondary);
    box-shadow: 0 4px 20px rgba(15, 157, 88, 0.4);
}

.sp-hero--ai .sp-hero__cta:hover {
    background-color: #0b7a44;
    box-shadow: 0 8px 28px rgba(15, 157, 88, 0.5);
}

.sp-hero--ai::before {
    background: radial-gradient(ellipse at 50% 0%, rgba(15, 157, 88, 0.18) 0%, transparent 60%);
}

/* ── 3. STATS BAR ──────────────────────────────────────────── */

.sp-stats-bar {
    background-color: #16213e;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 48px 20px;
}

.sp-stats-bar__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: center;
}

.sp-stats-bar__item {
    padding: 16px;
}

.sp-stats-bar__number {
    display: block;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-primary);
    letter-spacing: -0.02em;
}

.sp-stats-bar--ai .sp-stats-bar__number {
    color: var(--color-secondary);
}

.sp-stats-bar__label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 8px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ── 4. INTRO ──────────────────────────────────────────────── */

.sp-intro {
    max-width: 800px;
    margin: 0 auto;
    padding: 72px 20px;
    text-align: center;
}

.sp-intro__label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 14px;
}

.sp-intro h2 {
    font-size: 34px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 24px;
    line-height: 1.25;
}

.sp-intro p {
    font-size: 17px;
    line-height: 1.8;
    color: #555;
    margin: 0 0 18px;
}

.sp-intro p:last-child {
    margin-bottom: 0;
}

/* ── 5. SERVICES GRID ──────────────────────────────────────── */

.sp-services-grid {
    background-color: var(--color-light-bg);
    padding: 72px 20px;
}

.sp-services-grid__inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.sp-services-grid__header {
    text-align: center;
    margin-bottom: 48px;
}

.sp-services-grid__header h2 {
    font-size: 34px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 12px;
}

.sp-services-grid__header p {
    font-size: 17px;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

.sp-services-grid__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.sp-services-grid__card {
    background-color: var(--color-white);
    border-radius: var(--radius);
    padding: 32px 24px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
    transition: transform var(--transition), box-shadow var(--transition);
    display: flex;
    flex-direction: column;
}

.sp-services-grid__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(26, 115, 232, 0.2);
}

.sp-services-grid__icon {
    width: 48px;
    height: 48px;
    background-color: rgba(26, 115, 232, 0.1);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 22px;
}

.sp-services-grid--ai .sp-services-grid__icon {
    background-color: rgba(15, 157, 88, 0.1);
}

.sp-services-grid__card h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-dark);
    margin: 0 0 10px;
    line-height: 1.35;
}

.sp-services-grid__card p {
    font-size: 14px;
    line-height: 1.7;
    color: #666;
    margin: 0;
    flex-grow: 1;
}

/* ── 6. SERVICES LIST ──────────────────────────────────────── */

.sp-services-list {
    padding: 72px 20px;
    background-color: var(--color-white);
}

.sp-services-list__inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.sp-services-list__header {
    text-align: center;
    margin-bottom: 48px;
}

.sp-services-list__header h2 {
    font-size: 34px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 12px;
}

.sp-services-list__header p {
    font-size: 17px;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

.sp-services-list__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.sp-services-list__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
    background-color: var(--color-white);
}

.sp-services-list__item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(26, 115, 232, 0.1);
}

.sp-services-list--ai .sp-services-list__item:hover {
    border-color: var(--color-secondary);
    box-shadow: 0 4px 16px rgba(15, 157, 88, 0.1);
}

.sp-services-list__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-color: rgba(26, 115, 232, 0.1);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.sp-services-list--ai .sp-services-list__icon {
    background-color: rgba(15, 157, 88, 0.1);
}

.sp-services-list__text h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-dark);
    margin: 0 0 6px;
}

.sp-services-list__text p {
    font-size: 13px;
    line-height: 1.65;
    color: #777;
    margin: 0;
}

/* ── 7. TESTIMONIALS ───────────────────────────────────────── */

.sp-testimonials {
    background-color: var(--color-light-bg);
    padding: 72px 20px;
}

.sp-testimonials__inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.sp-testimonials__header {
    text-align: center;
    margin-bottom: 48px;
}

.sp-testimonials__header h2 {
    font-size: 34px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 12px;
}

.sp-testimonials__header p {
    font-size: 17px;
    color: #666;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

.sp-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.sp-testimonials__card {
    background-color: var(--color-white);
    border-radius: var(--radius);
    padding: 32px 28px;
    border-left: 4px solid var(--color-primary);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sp-testimonials--ai .sp-testimonials__card {
    border-left-color: var(--color-secondary);
}

.sp-testimonials__stars {
    color: var(--color-accent);
    font-size: 16px;
    letter-spacing: 2px;
}

.sp-testimonials__quote {
    font-size: 15px;
    line-height: 1.75;
    color: #444;
    font-style: italic;
    flex-grow: 1;
    margin: 0;
}

.sp-testimonials__quote::before {
    content: "\201C";
    font-size: 36px;
    line-height: 0;
    vertical-align: -14px;
    color: var(--color-primary);
    font-style: normal;
    font-weight: 700;
    margin-right: 4px;
}

.sp-testimonials--ai .sp-testimonials__quote::before {
    color: var(--color-secondary);
}

.sp-testimonials__author {
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sp-testimonials__author-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-dark);
}

.sp-testimonials__author-title {
    font-size: 13px;
    color: #888;
}

/* ── 8. ABOUT ──────────────────────────────────────────────── */

.sp-about {
    padding: 72px 20px;
    background-color: var(--color-white);
}

.sp-about__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.sp-about__image {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.sp-about__image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.sp-about__image-badge {
    position: absolute;
    bottom: 24px;
    left: 24px;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 50px;
}

.sp-about--ai .sp-about__image-badge {
    background-color: var(--color-secondary);
}

.sp-about__label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 14px;
}

.sp-about--ai .sp-about__label {
    color: var(--color-secondary);
}

.sp-about__content h2 {
    font-size: 34px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 18px;
    line-height: 1.25;
}

.sp-about__content p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin: 0 0 28px;
}

.sp-about__credentials {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-about__credentials li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--color-text);
    font-weight: 500;
}

.sp-about__credentials li::before {
    content: "";
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 13px;
    background-position: center;
    background-repeat: no-repeat;
}

.sp-about--ai .sp-about__credentials li::before {
    background-color: var(--color-secondary);
}

/* ── 9. BOTTOM CTA ─────────────────────────────────────────── */

.sp-cta-bottom {
    background-color: var(--color-primary);
    background-image: linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
    padding: 80px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.sp-cta-bottom--ai {
    background-color: var(--color-secondary);
    background-image: linear-gradient(135deg, #0f9d58 0%, #0b7a44 100%);
}

.sp-cta-bottom::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

.sp-cta-bottom__inner {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
}

.sp-cta-bottom h2 {
    font-size: 38px;
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 16px;
    line-height: 1.2;
}

.sp-cta-bottom p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 36px;
    line-height: 1.7;
}

.sp-cta-bottom__btn {
    display: inline-block;
    background-color: var(--color-white);
    color: var(--color-primary);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    padding: 18px 40px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.sp-cta-bottom__btn:hover,
.sp-cta-bottom__btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    color: var(--color-primary);
}

.sp-cta-bottom--ai .sp-cta-bottom__btn {
    color: var(--color-secondary);
}

.sp-cta-bottom--ai .sp-cta-bottom__btn:hover {
    color: var(--color-secondary);
}

.sp-cta-bottom__note {
    display: block;
    margin-top: 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
}

/* ── Related Services (cross-pillar links) ─────────────────── */
.sp-related {
    background-color: var(--color-light-bg);
    padding: 72px 20px;
    border-top: 1px solid var(--color-border);
}

.sp-related__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
}

.sp-related__label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 14px;
}

.sp-related__heading {
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    color: var(--color-dark);
    line-height: 1.2;
    margin: 0 0 12px;
}

.sp-related__sub {
    font-size: 16px;
    color: var(--color-gray);
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

.sp-related__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 820px;
    margin: 0 auto;
}

.sp-related__card {
    background-color: var(--color-white);
    border-radius: var(--radius);
    padding: 32px 28px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.sp-related__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary);
    text-decoration: none;
}

.sp-related__icon { font-size: 36px; line-height: 1; margin-bottom: 14px; }

.sp-related__card-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 10px;
}

.sp-related__card-desc {
    font-size: 15px;
    color: var(--color-gray);
    line-height: 1.6;
    margin: 0 0 18px;
    flex-grow: 1;
}

.sp-related__more {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
}

.sp-related__card:hover .sp-related__more { text-decoration: underline; }

/* ── 10. RESPONSIVE BREAKPOINTS ────────────────────────────── */

@media (max-width: 1024px) {
    .sp-services-grid__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sp-hero {
        padding: 72px 20px 60px;
    }

    .sp-stats-bar__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sp-services-grid__grid {
        grid-template-columns: 1fr;
    }

    .sp-services-list__grid {
        grid-template-columns: 1fr;
    }

    .sp-testimonials__grid {
        grid-template-columns: 1fr;
    }

    .sp-related__grid {
        grid-template-columns: 1fr;
    }

    .sp-about__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sp-cta-bottom h2 {
        font-size: 30px;
    }

    .sp-intro h2,
    .sp-services-grid__header h2,
    .sp-services-list__header h2,
    .sp-testimonials__header h2,
    .sp-about__content h2 {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .sp-hero h1,
    .sp-hero__headline {
        font-size: 32px;
    }

    .sp-hero__subheadline {
        font-size: 16px;
    }

    .sp-stats-bar__number {
        font-size: 40px;
    }

    .sp-hero__cta {
        display: block;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .sp-hero__cta--secondary {
        margin: 12px auto 0;
    }

    .sp-cta-bottom__btn {
        display: block;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }
}

/* ==========================================================
   LOCATION HUB PAGE
   ========================================================== */

/* Two-button hero group */
.sp-hero__cta-group {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Hub service cards */
.sp-hub-cards {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 80px 24px;
    background-color: var(--color-light-bg);
}

.sp-hub-cards__inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.sp-hub-cards__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.sp-hub-cards__card {
    background: #fff;
    border-radius: var(--radius);
    padding: 40px 36px;
    border: 1px solid #e8ecef;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.sp-hub-cards__icon {
    font-size: 40px;
    line-height: 1;
}

.sp-hub-cards__headline {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0;
    line-height: 1.3;
}

.sp-hub-cards__card--ai .sp-hub-cards__headline {
    color: #0a7a45;
}

.sp-hub-cards__benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.sp-hub-cards__benefits li {
    padding-left: 26px;
    position: relative;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.55;
}

.sp-hub-cards__benefits li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}

.sp-hub-cards__card--ai .sp-hub-cards__benefits li::before {
    color: var(--color-secondary);
}

.sp-hub-cards__btn {
    display: block;
    padding: 14px 28px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
    background-color: var(--color-primary);
    color: #fff;
    margin-top: auto;
}

.sp-hub-cards__btn:hover {
    background-color: #1557b0;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

.sp-hub-cards__card--ai .sp-hub-cards__btn {
    background-color: var(--color-secondary);
}

.sp-hub-cards__card--ai .sp-hub-cards__btn:hover {
    background-color: #0a7a45;
}

.sp-hub-cards__card--seo .sp-hub-cards__headline {
    color: #6b21a8;
}

.sp-hub-cards__card--seo .sp-hub-cards__benefits li::before {
    color: #6b21a8;
}

.sp-hub-cards__btn--seo {
    background-color: #6b21a8;
}

.sp-hub-cards__btn--seo:hover {
    background-color: #581c87;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

/* ── OTHER SERVICES CROSS-LINK SECTION ─────────────────────── */

.sp-other-services {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 72px 24px;
    background-color: var(--color-light-bg);
}

.sp-other-services__inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.sp-other-services__inner h2 {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 36px;
    text-align: center;
}

.sp-other-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.sp-other-services__card {
    background: #fff;
    border-radius: var(--radius);
    padding: 32px 28px;
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    color: var(--color-text);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.sp-other-services__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--color-primary);
    text-decoration: none;
    color: var(--color-text);
}

.sp-other-services__card--ai:hover {
    border-color: var(--color-secondary);
}

.sp-other-services__card--seo:hover {
    border-color: #6b21a8;
}

.sp-other-services__icon {
    font-size: 36px;
    line-height: 1;
    display: block;
}

.sp-other-services__card h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0;
    line-height: 1.3;
}

.sp-other-services__card p {
    font-size: 14px;
    line-height: 1.65;
    color: #666;
    margin: 0;
    flex: 1;
}

.sp-other-services__link {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    margin-top: 4px;
}

.sp-other-services__card--ai .sp-other-services__link {
    color: var(--color-secondary);
}

.sp-other-services__card--seo .sp-other-services__link {
    color: #6b21a8;
}

/* Hero CTA group — SEO button */
.sp-hero__cta--seo {
    background: transparent;
    border: 2px solid rgba(107, 33, 168, 0.6);
    color: #fff;
}

.sp-hero__cta--seo:hover {
    background: rgba(107, 33, 168, 0.2);
    border-color: #c084fc;
    color: #fff;
}

@media (max-width: 900px) {
    .sp-hub-cards__grid {
        grid-template-columns: 1fr 1fr;
    }

    .sp-other-services__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .sp-hub-cards__grid {
        grid-template-columns: 1fr;
    }

    .sp-other-services__grid {
        grid-template-columns: 1fr;
    }
}

/* Hub body class — same overflow-x rule as other CPTs */
body.single-location-hub {
    overflow-x: hidden;
}

/* Responsive: stack cards on tablet and below */
@media (max-width: 768px) {
    .sp-hub-cards__grid {
        grid-template-columns: 1fr;
    }

    .sp-hero__cta-group {
        flex-direction: column;
        align-items: center;
    }

    .sp-hub-cards {
        padding: 48px 24px;
    }

    .sp-hub-cards__card {
        padding: 28px 24px;
    }
}

/* ==========================================================
   HOMEPAGE  (front-page.php) — hp- prefix
   ========================================================== */

body.home { overflow-x: hidden; }

/* ── HERO ─────────────────────────────────────────────────── */
.hp-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
    padding: 100px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hp-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(26,115,232,0.15) 0%, transparent 60%);
    pointer-events: none;
}

.hp-hero__inner {
    max-width: 860px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hp-hero__eyebrow {
    display: inline-block;
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.hp-hero__headline {
    font-size: 52px;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 24px;
    letter-spacing: -0.5px;
}

.hp-hero__subheadline {
    font-size: 20px;
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    margin: 0 auto 40px;
    max-width: 680px;
}

.hp-hero__cta-group {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.hp-hero__cta {
    display: inline-block;
    padding: 16px 36px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    background-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 4px 20px rgba(26,115,232,0.45);
}

.hp-hero__cta:hover {
    background-color: #1557b0;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(26,115,232,0.55);
}

.hp-hero__cta--secondary {
    background-color: transparent;
    border: 2px solid rgba(255,255,255,0.5);
    box-shadow: none;
}

.hp-hero__cta--secondary:hover {
    background-color: rgba(255,255,255,0.1);
    border-color: #fff;
    box-shadow: none;
}

.hp-trust-badges {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.hp-trust-badges__item {
    color: rgba(255,255,255,0.65);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hp-trust-badges__item::before {
    content: '\2713';
    color: var(--color-accent);
    font-weight: 800;
}

/* ── SERVICE CARDS ────────────────────────────────────────── */
.hp-services {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 80px 24px;
    background: var(--color-light-bg);
}

.hp-services__inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.hp-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

/* Tablet: 2 across (mobile drops to 1 in the max-width:768px block below) */
@media (max-width: 1024px) {
    .hp-services__grid { grid-template-columns: repeat(2, 1fr); }
}

.hp-services__card {
    background: #fff;
    border-radius: var(--radius);
    padding: 48px 40px;
    border-top: 4px solid var(--color-primary);
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hp-services__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.1);
}

.hp-services__card--ai {
    border-top-color: var(--color-secondary);
}

.hp-services__card--seo {
    border-top-color: #7c3aed;
}

.hp-services__icon { font-size: 48px; line-height: 1; }

.hp-services__headline {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0;
}

.hp-services__card--ai .hp-services__headline { color: #0a7a45; }
.hp-services__card--seo .hp-services__headline { color: #7c3aed; }

.hp-services__desc {
    font-size: 16px;
    color: var(--color-text);
    line-height: 1.65;
    margin: 0;
    flex: 1;
}

.hp-services__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    margin-top: 8px;
}

.hp-services__link::after { content: '\2192'; transition: transform 0.2s ease; }

.hp-services__link:hover { text-decoration: none; }
.hp-services__link:hover::after { transform: translateX(4px); }

.hp-services__card--ai .hp-services__link { color: var(--color-secondary); }
.hp-services__card--seo .hp-services__link { color: #7c3aed; }

/* ── STATS ────────────────────────────────────────────────── */
.hp-stats {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--color-dark);
    padding: 64px 24px;
}

.hp-stats__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
}

.hp-stats__number {
    display: block;
    font-size: 52px;
    font-weight: 800;
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: 8px;
}

.hp-stats__label {
    display: block;
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.5px;
}

/* ── INDUSTRIES ───────────────────────────────────────────── */
.hp-industries {
    padding: 80px 24px;
    text-align: center;
}

.hp-industries__inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.hp-industries__headline {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 48px;
}

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

.hp-industries__item {
    background: var(--color-light-bg);
    border-radius: var(--radius);
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border: 1px solid #e8ecef;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.hp-industries__item:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}

.hp-industries__item-icon { font-size: 36px; line-height: 1; }

.hp-industries__item-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark);
}

/* ── HOW IT WORKS ─────────────────────────────────────────── */
.hp-how {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--color-light-bg);
    padding: 80px 24px;
    text-align: center;
}

.hp-how__inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.hp-how__headline {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 56px;
}

.hp-how__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
}

.hp-how__steps::before {
    content: '';
    position: absolute;
    top: 36px;
    left: calc(16.666% + 24px);
    right: calc(16.666% + 24px);
    height: 2px;
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    z-index: 0;
}

.hp-how__step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
}

.hp-how__step-number {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(26,115,232,0.35);
}

.hp-how__step:last-child .hp-how__step-number {
    background: var(--color-secondary);
    box-shadow: 0 4px 16px rgba(15,157,88,0.35);
}

.hp-how__step-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0;
}

.hp-how__step-desc {
    font-size: 15px;
    color: var(--color-text);
    line-height: 1.6;
    margin: 0;
}

/* ── TESTIMONIALS ─────────────────────────────────────────── */
.hp-testimonials { padding: 80px 24px; }

.hp-testimonials__inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.hp-testimonials__header {
    text-align: center;
    margin-bottom: 48px;
}

.hp-testimonials__headline {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 12px;
}

.hp-testimonials__subline {
    font-size: 16px;
    color: #666;
    margin: 0;
}

.hp-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.hp-testimonials__card {
    background: #fff;
    border-radius: var(--radius);
    padding: 32px 28px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hp-testimonials__stars {
    color: var(--color-accent);
    font-size: 18px;
    letter-spacing: 2px;
}

.hp-testimonials__quote {
    font-size: 15px;
    color: var(--color-text);
    line-height: 1.65;
    margin: 0;
    font-style: italic;
    flex: 1;
}

.hp-testimonials__author {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.hp-testimonials__author-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--color-dark);
}

.hp-testimonials__author-title {
    font-size: 13px;
    color: #888;
}

/* ── ABOUT ────────────────────────────────────────────────── */
.hp-about {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--color-light-bg);
    padding: 80px 24px;
}

.hp-about__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 72px;
    align-items: center;
}

.hp-about__image-wrap { display: flex; justify-content: center; }

.hp-about__image {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    border: 6px solid #fff;
    box-shadow: 0 8px 40px rgba(0,0,0,0.15);
    background: #dce3ea;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
}

.hp-about__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hp-about__label {
    display: inline-block;
    background: rgba(26,115,232,0.08);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.hp-about__headline {
    font-size: 36px;
    font-weight: 800;
    color: var(--color-dark);
    margin: 0 0 20px;
    line-height: 1.2;
}

.hp-about__bio {
    font-size: 16px;
    color: var(--color-text);
    line-height: 1.7;
    margin: 0 0 24px;
}

.hp-about__credentials {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hp-about__credentials li {
    padding-left: 28px;
    position: relative;
    color: var(--color-text);
    font-size: 15px;
    font-weight: 500;
}

.hp-about__credentials li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 800;
    font-size: 16px;
}

.hp-about__link {
    display: inline-block;
    padding: 14px 32px;
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.hp-about__link:hover {
    background-color: #1557b0;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}

/* ── LOCATIONS ────────────────────────────────────────────── */
.hp-locations {
    padding: 80px 24px;
    text-align: center;
}

.hp-locations__inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.hp-locations__headline {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 12px;
}

.hp-locations__subline {
    font-size: 16px;
    color: #666;
    margin: 0 0 48px;
}

.hp-locations__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.hp-locations__city {
    display: block;
    padding: 16px 12px;
    background: var(--color-light-bg);
    border-radius: var(--radius);
    border: 1px solid #e8ecef;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark);
    text-decoration: none;
    transition: all 0.2s ease;
}

.hp-locations__city:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(26,115,232,0.3);
}

.hp-locations__see-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
}

.hp-locations__see-all:hover { text-decoration: underline; }

/* ── BOTTOM CTA ───────────────────────────────────────────── */
.hp-cta {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
    padding: 100px 24px;
    text-align: center;
}

.hp-cta__inner {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.hp-cta__headline {
    font-size: 44px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.15;
}

.hp-cta__subtext {
    font-size: 18px;
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    margin: 0;
}

.hp-cta__btn {
    display: inline-block;
    padding: 18px 48px;
    background-color: var(--color-accent);
    color: var(--color-dark);
    border-radius: 6px;
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-top: 8px;
    box-shadow: 0 4px 20px rgba(251,188,4,0.45);
}

.hp-cta__btn:hover {
    background-color: #e8ab00;
    color: var(--color-dark);
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(251,188,4,0.55);
}

/* ==========================================================
   HOMEPAGE RESPONSIVE
   ========================================================== */

@media (max-width: 1024px) {
    .hp-hero__headline { font-size: 42px; }
    .hp-stats__inner { grid-template-columns: repeat(2, 1fr); }
    .hp-locations__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
    .hp-hero { padding: 72px 24px; }
    .hp-hero__headline { font-size: 32px; }
    .hp-hero__subheadline { font-size: 17px; }
    .hp-hero__cta-group { flex-direction: column; align-items: center; }
    .hp-hero__cta { width: 100%; max-width: 320px; text-align: center; }
    .hp-trust-badges { gap: 16px; }

    .hp-services__grid { grid-template-columns: 1fr; }
    .hp-services__card { padding: 32px 28px; }

    .hp-stats__inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .hp-stats__number { font-size: 40px; }

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

    .hp-how__steps { grid-template-columns: 1fr; gap: 32px; }
    .hp-how__steps::before { display: none; }

    .hp-testimonials__grid { grid-template-columns: 1fr; }

    .hp-about__inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .hp-about__credentials { text-align: left; }

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

    .hp-cta__headline { font-size: 32px; }
    .hp-cta__btn { padding: 16px 36px; font-size: 16px; }
}

@media (max-width: 480px) {
    .hp-hero__headline { font-size: 28px; }
    .hp-industries__grid { grid-template-columns: repeat(2, 1fr); }
    .hp-stats__inner { grid-template-columns: repeat(2, 1fr); }
    .hp-locations__grid { grid-template-columns: repeat(2, 1fr); }
    .hp-cta__headline { font-size: 26px; }
}

/* ==========================================================================
   PIJUSH NAV — Mega Menu
   ========================================================================== */

/* ── Header overrides ────────────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.inside-header {
    display: flex !important;
    align-items: center !important;
    padding: 0 24px !important;
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.site-branding { flex-shrink: 0; }

/* Hide GP's native mobile toggle */
.menu-toggle { display: none !important; }

/* ── Nav list ─────────────────────────────────────────────────────────────── */
.pijush-nav__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
    gap: 0;
}

/* ── Top-level items ─────────────────────────────────────────────────────── */
.pijush-nav__item {
    position: relative;
}

.pijush-nav__link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 20px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}

.pijush-nav__link:hover { color: var(--color-primary); }

.pijush-nav__caret {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    margin-top: 1px;
    transition: transform 0.2s;
}

.pijush-nav__item.has-children:hover .pijush-nav__caret,
.pijush-nav__item.is-active .pijush-nav__caret { transform: rotate(180deg); }

/* ── CTA button ──────────────────────────────────────────────────────────── */
.pijush-nav__item.is-cta { margin-left: 8px; }

.pijush-nav__cta-btn {
    background: var(--color-primary) !important;
    color: #fff !important;
    padding: 10px 20px !important;
    border-radius: var(--radius) !important;
    font-weight: 600 !important;
    transition: background 0.2s, transform 0.15s !important;
}

.pijush-nav__cta-btn:hover {
    background: #1557b0 !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* ── Dropdown container ───────────────────────────────────────────────────── */
.pijush-nav__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0px);
    left: 0;
    background: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    border-top: 3px solid var(--color-primary);
    border-radius: 0 0 var(--radius) var(--radius);
    z-index: 1000;
    min-width: 200px;
    animation: navDropIn 0.18s ease;
}

@keyframes navDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pijush-nav__item.has-children:hover > .pijush-nav__dropdown { display: block; }

/* ── Mega dropdown ────────────────────────────────────────────────────────── */
.pijush-nav__dropdown--mega {
    left: 50%;
    transform: translateX(-50%);
    min-width: 760px;
}

/* Fix: mega dropdowns near edges */
.pijush-nav__item.is-mega:last-of-type .pijush-nav__dropdown--mega,
.pijush-nav__item.is-mega:nth-last-of-type(2) .pijush-nav__dropdown--mega {
    left: auto;
    right: 0;
    transform: none;
}

.pijush-nav__mega {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 28px 0;
}

/* ── Mega columns ─────────────────────────────────────────────────────────── */
.pijush-nav__col {
    padding: 0 24px;
    border-right: 1px solid #f0f0f0;
}

.pijush-nav__col:last-child { border-right: none; }

.pijush-nav__col-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #999;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

/* Undo GP's .main-navigation ul ul rule (left:-99999px; height:0; overflow:hidden) */
.main-navigation .pijush-nav__col-list,
.main-navigation .pijush-nav__submenu {
    display: block !important;
    position: static !important;
    left: auto !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    float: none !important;
    width: auto !important;
    box-shadow: none !important;
    pointer-events: auto !important;
}

.pijush-nav__col-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pijush-nav__col-item { margin: 0; }

.pijush-nav__col-link {
    display: block;
    padding: 6px 0;
    font-size: 14px;
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.15s, padding-left 0.15s;
}

.pijush-nav__col-link:hover {
    color: var(--color-primary);
    padding-left: 4px;
}

.pijush-nav__col-divider {
    list-style: none;
    padding: 8px 0;
}

.pijush-nav__col-divider span {
    display: block;
    height: 1px;
    background: #eee;
}

/* Standalone link col (depth-1, no children) */
.pijush-nav__col--link { padding: 0 24px; }

/* ══ Google Service Sub-Pages – .gsp- prefix ════════════════════════════════ */
.gsp-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

.gsp-hero { background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%); padding: 80px 0 72px; text-align: center; }
.gsp-hero__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #93c5fd; margin: 0 0 14px; }
.gsp-hero__title { font-size: clamp(28px, 4vw, 52px); font-weight: 900; color: #fff; line-height: 1.1; margin: 0 0 18px; }
.gsp-hero__sub { font-size: 18px; color: #bfdbfe; max-width: 640px; margin: 0 auto 36px; line-height: 1.65; }
.gsp-hero__cta { display: inline-flex; align-items: center; gap: 8px; background: #1a56db; color: #fff; padding: 15px 32px; border-radius: 8px; font-weight: 700; font-size: 16px; text-decoration: none; transition: background .2s; margin-right: 12px; }
.gsp-hero__cta:hover { background: #1e40af; color: #fff; text-decoration: none; }
.gsp-hero__cta--ghost { display: inline-flex; align-items: center; gap: 8px; color: #bfdbfe; border: 1.5px solid rgba(191,219,254,.5); padding: 14px 28px; border-radius: 8px; font-weight: 600; font-size: 15px; text-decoration: none; transition: background .2s, color .2s; }
.gsp-hero__cta--ghost:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }

.gsp-trust { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 20px 0; }
.gsp-trust__inner { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; }
.gsp-trust__item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #6b7280; }

.gsp-section { padding: 72px 0; }
.gsp-section--alt { background: #f9fafb; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; }
.gsp-section--dark { background: #0f172a; }

.gsp-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #1a56db; margin: 0 0 10px; text-align: center; }
.gsp-heading { font-size: clamp(22px, 2.8vw, 34px); font-weight: 800; color: #111827; line-height: 1.2; margin: 0 0 12px; text-align: center; }
.gsp-heading--light { color: #fff; }
.gsp-sub { font-size: 16px; color: #6b7280; text-align: center; max-width: 600px; margin: 0 auto 48px; line-height: 1.65; }
.gsp-sub--light { color: #93c5fd; }

.gsp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gsp-feature { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 10px; padding: 24px; transition: border-color .2s, box-shadow .2s; }
.gsp-feature:hover { border-color: #1a56db; box-shadow: 0 4px 20px rgba(26,86,219,.1); }
.gsp-feature__icon { font-size: 28px; display: block; margin-bottom: 12px; }
.gsp-feature__title { font-size: 15px; font-weight: 700; color: #111827; margin: 0 0 8px; }
.gsp-feature__desc { font-size: 14px; color: #6b7280; line-height: 1.6; margin: 0; }

.gsp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.gsp-step { text-align: center; }
.gsp-step__num { width: 48px; height: 48px; border-radius: 50%; background: #1a56db; color: #fff; font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.gsp-step__title { font-size: 15px; font-weight: 700; color: #111827; margin: 0 0 8px; }
.gsp-step__desc { font-size: 14px; color: #6b7280; line-height: 1.6; margin: 0; }

.gsp-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.gsp-stat { padding: 48px 24px; text-align: center; border-right: 1px solid rgba(255,255,255,.1); }
.gsp-stat:last-child { border-right: none; }
.gsp-stat__number { font-size: clamp(32px, 4vw, 52px); font-weight: 900; color: #fff; line-height: 1; margin: 0 0 8px; }
.gsp-stat__label { font-size: 14px; color: #93c5fd; font-weight: 500; margin: 0; }

.gsp-for-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 32px; }
.gsp-for-tag { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 100px; padding: 8px 18px; font-size: 14px; font-weight: 600; color: #111827; text-decoration: none; transition: border-color .15s, color .15s, background .15s; display: inline-block; }
.gsp-for-tag:hover { border-color: #1a56db; color: #1a56db; background: #eff6ff; text-decoration: none; }

.gsp-cta { background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%); padding: 88px 0; text-align: center; }
.gsp-cta__title { font-size: clamp(26px, 3.5vw, 42px); font-weight: 900; color: #fff; margin: 0 0 16px; line-height: 1.15; }
.gsp-cta__sub { font-size: 17px; color: #bfdbfe; max-width: 560px; margin: 0 auto 36px; line-height: 1.65; }
.gsp-cta__btn { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #1a56db; padding: 16px 36px; border-radius: 8px; font-weight: 800; font-size: 17px; text-decoration: none; transition: background .2s; }
.gsp-cta__btn:hover { background: #eff6ff; color: #1e40af; text-decoration: none; }

@media (max-width: 960px) {
    .gsp-features { grid-template-columns: repeat(2, 1fr); }
    .gsp-steps    { grid-template-columns: repeat(2, 1fr); }
    .gsp-hero     { padding: 56px 0 48px; }
}
@media (max-width: 600px) {
    .gsp-features { grid-template-columns: 1fr; }
    .gsp-steps    { grid-template-columns: 1fr; }
    .gsp-stats    { grid-template-columns: 1fr; }
    .gsp-stat     { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
    .gsp-stat:last-child { border-bottom: none; }
    .gsp-section  { padding: 52px 0; }
}
.pijush-nav__col--link .pijush-nav__col-link { font-weight: 600; }

/* ── Simple dropdown (non-mega) ───────────────────────────────────────────── */
.pijush-nav__submenu {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    min-width: 220px;
}

.pijush-nav__sub-item { margin: 0; }

.pijush-nav__sub-link {
    display: block;
    padding: 9px 20px;
    font-size: 14px;
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}

.pijush-nav__sub-link:hover {
    color: var(--color-primary);
    background: #f8f9fa;
}

.pijush-nav__sub-divider {
    list-style: none;
    padding: 4px 20px;
}

.pijush-nav__sub-divider span {
    display: block;
    height: 1px;
    background: #eee;
}

/* ── Hamburger button ─────────────────────────────────────────────────────── */
.pijush-nav__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    margin-left: auto;
}

.pijush-nav__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
    transform-origin: center;
}

.pijush-nav__toggle.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.pijush-nav__toggle.is-active span:nth-child(2) { opacity: 0; }
.pijush-nav__toggle.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }


/* Sub-toggle button: hidden on desktop, shown on mobile */
.pijush-nav__sub-toggle { display: none; }

/* ── Nav containers: dropdowns must escape GP's overflow:hidden ────────────── */
#site-navigation,
.main-navigation,
.main-nav {
    overflow: visible !important;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* ── Kill GeneratePress's duplicate hamburgers, KEEP the search icon ───────
       GP renders a second nav (#mobile-menu-control-wrapper) with its own
       hamburger (.menu-toggle) plus a search icon (.menu-bar-items), and a
       further stray toggle/search inside #site-navigation. Two competing
       hamburgers = the menu appears broken. Hide every GP hamburger, hide the
       duplicate search inside the nav, but keep ONE search icon from the
       control wrapper and re-position it next to our hamburger. */
    .menu-toggle,
    #mobile-menu-control-wrapper .menu-toggle,
    #site-navigation .menu-toggle,
    #site-navigation .inside-navigation .menu-bar-items {
        display: none !important;
    }

    /* GP header search icon — pin top-right, just left of our hamburger */
    #mobile-menu-control-wrapper .menu-bar-items {
        display: flex !important;
        position: absolute !important;
        right: 64px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10001 !important;
    }
    #mobile-menu-control-wrapper .menu-bar-item > a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        color: var(--color-text);
        font-size: 20px;
    }

    /* Header row: logo on left, hamburger on right */
    .inside-header {
        padding: 0 16px !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        text-align: left !important;
        position: relative !important;
        min-height: 60px !important;
    }

    /* Remove GP's per-child bottom margin gaps */
    .inside-header > * {
        margin-bottom: 0 !important;
    }

    /* Collapse the GP nav containers — overflow visible so fixed list escapes */
    #site-navigation,
    .main-navigation,
    .main-nav {
        display: block !important;
        flex: none !important;
        width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    /* Hamburger: absolutely positioned inside the header row — always top-right */
    .pijush-nav__toggle {
        display: flex !important;
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10001 !important;
        margin: 0 !important;
        width: 44px;
        height: 44px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    /* Full-screen dropdown list.
       GP injects an inline rule (specificity 1,4,0):
       .has-inline-mobile-toggle #site-navigation .inside-navigation > *:not(.navigation-search):not(.main-nav){display:none}
       which targets our list (a direct child of .inside-navigation). Plain
       specificity can't beat it, so the open state below uses !important. */
    .pijush-nav__list {
        display: none !important;
        position: fixed !important;
        top: 60px;
        left: 0;
        right: 0;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        padding: 12px 0 20px;
        margin: 0 !important;
        gap: 0;
        z-index: 9999;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }

    .pijush-nav__list.is-open { display: flex !important; }

    .pijush-nav__item { width: 100%; border-bottom: 1px solid #f0f0f0; }
    .pijush-nav__item:last-child { border-bottom: none; }

    .pijush-nav__link {
        padding: 14px 20px 14px 20px;
        padding-right: 56px; /* room for toggle button */
        justify-content: flex-start;
    }
    /* Hide desktop caret inside link on mobile */
    .pijush-nav__item.has-children > .pijush-nav__link .pijush-nav__caret {
        display: none;
    }

    /* Sub-toggle button: tap target in top-right of each parent item */
    .pijush-nav__sub-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0;
        top: 0;
        width: 52px;
        height: 52px;
        background: none;
        border: none;
        border-left: 1px solid #f0f0f0;
        cursor: pointer;
        padding: 0;
        z-index: 1;
    }
    .pijush-nav__sub-toggle::after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid #374151;
        transition: transform 0.2s;
    }
    .pijush-nav__item.is-active > .pijush-nav__sub-toggle::after {
        transform: rotate(180deg);
    }

    /* Override GP's blanket ".main-navigation ul { display:none }" on mobile */
    .pijush-nav__col-list,
    .pijush-nav__submenu {
        display: block !important;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* Accordion dropdowns on mobile */
    .pijush-nav__dropdown,
    .pijush-nav__dropdown--mega {
        display: none;
        position: static !important;
        box-shadow: none;
        border-top: none;
        border-radius: 0;
        background: #f8f9fa;
        transform: none !important;
        min-width: 0;
        animation: none;
        overflow: visible !important;
    }

    /* Touch devices fire :hover on tap — neutralize the desktop hover-open rule
       so submenus respond ONLY to an explicit click/tap (the .is-active class). */
    .pijush-nav__item.has-children:hover > .pijush-nav__dropdown,
    .pijush-nav__item.has-children:hover > .pijush-nav__dropdown--mega {
        display: none;
    }

    .pijush-nav__item.is-active > .pijush-nav__dropdown,
    .pijush-nav__item.is-active > .pijush-nav__dropdown--mega {
        display: block !important;
    }

    /* Stack mega columns vertically */
    .pijush-nav__mega {
        grid-template-columns: 1fr;
        padding: 8px 0;
        gap: 0;
    }

    .pijush-nav__col {
        border-right: none;
        border-bottom: 1px solid #eee;
        padding: 12px 20px;
    }

    .pijush-nav__col:last-child { border-bottom: none; }
    .pijush-nav__col-heading { margin-bottom: 8px; }
    .pijush-nav__col-link { padding: 6px 0; font-size: 15px; }

    .pijush-nav__submenu { padding: 4px 0; background: #f8f9fa; }
    .pijush-nav__sub-link { padding: 10px 20px; font-size: 15px; }

    .pijush-nav__item.is-cta { border-bottom: none; padding: 12px 20px; }
    .pijush-nav__cta-btn { padding: 12px 20px !important; justify-content: center; border-radius: var(--radius) !important; }
}

/* ============================================================
   SITE FOOTER — .psf- prefix
   ============================================================ */

.psf-footer {
    background: #0d0d1a;
    color: #94a3b8;
    font-family: var(--font-body);
    border-top: 3px solid var(--color-primary);
}

/* ── Shared wrap ──────────────────────────────────────────── */

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

/* ── Top section (4 columns) ──────────────────────────────── */

.psf-footer__top {
    padding: 64px 0 48px;
}

.psf-footer__top .psf-wrap {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 48px;
}

/* ── Brand column ─────────────────────────────────────────── */

.psf-brand__name {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}

.psf-brand__tagline {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--color-primary);
    font-weight: 600;
    margin: 0 0 16px;
}

.psf-brand__bio {
    font-size: 14px;
    line-height: 1.7;
    color: #718096;
    margin: 0 0 20px;
}

.psf-brand__cta {
    display: inline-block;
    padding: 10px 20px;
    background: var(--color-primary);
    color: #ffffff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition), transform var(--transition);
    margin-bottom: 24px;
}

.psf-brand__cta:hover {
    background: #1557b0;
    transform: translateY(-1px);
    color: #ffffff;
    text-decoration: none;
}

.psf-brand__social {
    display: flex;
    gap: 12px;
}

.psf-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
    color: #94a3b8;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}

.psf-social__link:hover {
    background: var(--color-primary);
    color: #ffffff;
    text-decoration: none;
}

/* ── Nav columns ──────────────────────────────────────────── */

.psf-col__heading {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.psf-col__heading--mt {
    margin-top: 28px;
}

.psf-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.psf-nav li {
    margin: 0;
    padding: 0;
}

.psf-nav a {
    display: block;
    padding: 5px 0;
    font-size: 14px;
    color: #718096;
    text-decoration: none;
    transition: color var(--transition), padding-left var(--transition);
    line-height: 1.5;
}

.psf-nav a:hover {
    color: #ffffff;
    padding-left: 4px;
    text-decoration: none;
}

/* ── Bottom bar ───────────────────────────────────────────── */

.psf-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 20px 0;
    background: #080812;
}

.psf-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.psf-footer__copy {
    font-size: 13px;
    color: #4a5568;
    margin: 0;
}

.psf-footer__legal {
    display: flex;
    align-items: center;
    gap: 12px;
}

.psf-footer__legal a {
    font-size: 13px;
    color: #4a5568;
    text-decoration: none;
    transition: color var(--transition);
}

.psf-footer__legal a:hover {
    color: #94a3b8;
    text-decoration: none;
}

.psf-footer__legal span {
    color: #2d3748;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 1024px) {
    .psf-footer__top .psf-wrap {
        grid-template-columns: 1fr 1fr;
        gap: 40px 48px;
    }
    .psf-col--brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .psf-footer__top {
        padding: 40px 0 32px;
    }
    .psf-footer__top .psf-wrap {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .psf-col--brand {
        grid-column: auto;
    }
    .psf-footer__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}