/* =============================================================================
   INNER PAGES — Digital Marketing 2026 Theme
   Shared styles for all non-front pages. Requires tokens.css loaded before.
   ============================================================================= */


/* ── Reset homepage.css grid container for inner page sections ───────────────── */
/*    homepage.css sets .container to display:grid (12-col). Override it here    */
/*    so inner page wrappers get a plain block container instead.                */

.page-hero .container,
.ip-section .container,
.ip-cta-section .container,
.inner-page-body .container {
    display: block;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}


/* ── Typography ──────────────────────────────────────────────────────────────── */

body {
    font-family: var(--font-body);
    color: var(--color-ink);
    background: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    color: var(--color-ink);
}

a {
    color: inherit;
}

.entry-content a:not(.btn-primary):not(.btn-secondary):not(.btn-white):not(.btn-ghost-white) {
    color: #1E40AF;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.entry-content a:not(.btn-primary):not(.btn-secondary):not(.btn-white):not(.btn-ghost-white):hover {
    color: #1E3A8A;
}

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


/* ── Page Hero ───────────────────────────────────────────────────────────────── */

.page-hero {
    background: var(--color-bg-dark);
    padding: 100px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.page-hero .container {
    max-width: 760px;
}

.page-hero__eyebrow {
    display: inline-block;
    font-size: var(--text-eyebrow);
    font-weight: 600;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.12);
    border: 1px solid rgba(var(--color-primary-rgb), 0.25);
    padding: 6px 18px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-5);
}

.page-hero__title {
    font-family: var(--font-head);
    font-size: var(--text-h1);
    font-weight: 800;
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
    color: #ffffff;
    margin-bottom: var(--space-5);
}

.page-hero__lead {
    font-size: var(--text-lead);
    line-height: var(--lh-lead);
    color: rgba(255, 255, 255, 0.68);
    max-width: 580px;
    margin: 0 auto;
}

.page-hero__cta {
    margin-top: var(--space-6);
    display: flex;
    justify-content: center;
}


/* Inner page compact hero — slight step above the smallest size; below the original tall */
.page-hero--compact {
    padding: 80px 0 var(--space-8);
    min-height: 400px;
}

/* Glow + dot-grid opt-in modifier — same technique as homepage hero / final-CTA */
.page-hero--glow {
    position: relative;
    overflow: hidden;
}
/* Lime blob — top-right, identical values to .final-cta::before / .section--dark::before */
.page-hero--glow::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 600px;
    height: 600px;
    border-radius: var(--radius-full);
    background: rgba(var(--color-primary-rgb), 0.15);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
}
/* White dot-grid — identical SVG pattern used across all dark sections */
.page-hero--glow::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='white' fill-opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}
.page-hero--glow .container {
    position: relative;
    z-index: 1;
}

/* ── Section utilities ───────────────────────────────────────────────────────── */

.ip-section {
    padding: var(--section-py) 0;
    background-image: radial-gradient(rgba(10, 10, 10, 0.08) 1.2px, transparent 1.2px);
    background-size: 20px 20px;
}

.ip-section--soft {
    background: var(--color-bg-soft);
    background-image: radial-gradient(rgba(10, 10, 10, 0.08) 1.2px, transparent 1.2px);
    background-size: 20px 20px;
}

/* Trim double-padding between a soft section and the white section that follows it.
   The soft section's own 64px bottom padding already provides visual separation;
   the white section only needs a half-step of breathing room before its content. */
.ip-section--soft + .ip-section {
    padding-top: var(--space-6);
}

.ip-section--dark {
    background: var(--color-bg-dark);
}


.section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-8);
}

.eyebrow {
    display: block;
    font-size: var(--text-eyebrow);
    font-weight: 600;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}

.section-header h2 {
    font-size: var(--text-h2);
    font-weight: 800;
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    color: var(--color-ink);
    margin-bottom: var(--space-4);
}

.section-header p {
    font-size: var(--text-lead);
    line-height: var(--lh-lead);
    color: var(--color-body);
}

.ip-section--dark .section-header h2 {
    color: #ffffff;
}

.ip-section--dark .section-header p {
    color: rgba(255, 255, 255, 0.68);
}


/* ── Buttons ─────────────────────────────────────────────────────────────────── */

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 56px;
    padding: 0 var(--space-6);
    background: var(--color-accent);
    color: var(--color-on-primary);
    font-family: var(--font-body);
    font-size: var(--text-button);
    font-weight: 600;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-primary);
    transition: background var(--ease-out), transform var(--ease-out), box-shadow var(--ease-out);
    white-space: nowrap;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background: var(--color-primary);
    color: var(--color-on-primary);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(var(--color-primary-rgb), 0.35);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 56px;
    padding: 0 var(--space-6);
    background: transparent;
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-button);
    font-weight: 600;
    border: 2px solid var(--color-line);
    border-radius: var(--radius-full);
    transition: background var(--ease-out), color var(--ease-out), border-color var(--ease-out);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

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


/* ── Services grid ───────────────────────────────────────────────────────────── */

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

/* Service-page feature grid: 2×2 layout for "what's included" cards (4 items) */
.svc-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.svc-card {
    background: var(--color-bg);
    border: 1px solid #CBD5E1;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    transition: all var(--ease-out);
}

.svc-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border: 2px solid var(--color-primary);
}

.svc-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(var(--color-accent-rgb), 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-5);
    color: var(--color-accent);
    flex-shrink: 0;
}

.svc-card__title {
    font-size: var(--text-h4);
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: var(--space-3);
}

.svc-card__body {
    font-size: var(--text-small);
    line-height: var(--lh-body);
    color: var(--color-body);
    margin-bottom: var(--space-5);
    flex: 1;
}

.svc-card__link {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: gap var(--ease-out);
    margin-top: auto;
}

.svc-card__link:hover {
    gap: 8px;
}


/* ── Service intro: asymmetric two-column (mirrors .about-story pattern) ─────── */

.svc-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
    align-items: stretch;
}

.svc-intro__text h2 {
    font-size: var(--text-h2);
    font-weight: 800;
    line-height: var(--lh-h2);
    color: var(--color-ink);
    margin-bottom: var(--space-5);
}

.svc-intro__text p {
    font-size: var(--text-body);
    line-height: var(--lh-body);
    color: var(--color-body);
}

.svc-intro__visual {
    display: flex;
    align-items: stretch;
}

/* ── Service intro: promise card ────────────────────────────────────────────── */

.svc-promise-card {
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--space-8) var(--space-7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    transition: border-color var(--ease-out), box-shadow var(--ease-out);
}

.svc-promise-card:hover {
    border-color: rgba(var(--color-primary-rgb), 0.25);
    box-shadow: var(--shadow-lg);
}

.svc-promise-card__eyebrow {
    margin-bottom: var(--space-5);
}

.svc-promise-card__quote {
    font-family: var(--font-head);
    font-size: var(--text-h3);
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-ink);
    margin: 0 0 var(--space-6);
    flex: 1;
}

.svc-promise-card__seal {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-line);
    font-size: var(--text-small);
    color: var(--color-muted);
}

.svc-promise-card__seal svg {
    color: var(--color-accent);
    flex-shrink: 0;
}


/* ── Service difference: centered title + left text / right 3 stacked rows ───── */

.svc-diff {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
    align-items: start;
}

.svc-diff__text h3 {
    font-family: var(--font-head);
    font-size: var(--text-h3);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-ink);
    margin-bottom: var(--space-5);
}

.svc-diff__text p {
    font-size: var(--text-body);
    line-height: var(--lh-body);
    color: var(--color-body);
    margin-bottom: var(--space-4);
}

.svc-diff__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.svc-diff__row {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.svc-diff__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(var(--color-accent-rgb), 0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    flex-shrink: 0;
}

.svc-diff__content h4 {
    font-size: var(--text-h4);
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: var(--space-2);
}

.svc-diff__content p {
    font-size: var(--text-small);
    line-height: var(--lh-body);
    color: var(--color-body);
}


/* ── Process steps ───────────────────────────────────────────────────────────── */

.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

.process-step {
    background: var(--color-bg);
    border: 1px solid #CBD5E1;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all var(--ease-out);
}

.process-step:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border: 2px solid var(--color-primary);
}

.process-step__num {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-family: var(--font-head);
    font-size: var(--text-h4);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
}

.process-step__title {
    font-size: var(--text-h4);
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: var(--space-3);
}

.process-step__body {
    font-size: var(--text-small);
    color: var(--color-body);
    line-height: var(--lh-body);
}


/* ── Service reviews grid ───────────────────────────────────────────────────── */

.svc-reviews-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.svc-reviews-grid .t-card__initials {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-bg-dark, #0F172A);
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.svc-reviews-grid .review-toggle {
    background: none;
    border: none;
    color: var(--color-accent);
    font-weight: 600;
    font-size: var(--text-small);
    cursor: pointer;
    padding: 0;
    margin-top: 8px;
    display: inline-block;
}
.svc-reviews-grid .review-toggle:hover { text-decoration: underline; }


/* ── FAQ accordion ───────────────────────────────────────────────────────────── */

.svc-faq {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.svc-faq__item {
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.svc-faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-head);
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--color-ink);
    text-align: left;
    transition: background var(--ease-out), color var(--ease-out);
}

.svc-faq__q:hover {
    background: var(--color-bg-soft);
}

.svc-faq__q[aria-expanded="true"] {
    color: var(--color-accent);
}

.svc-faq__chevron {
    flex-shrink: 0;
    color: var(--color-muted);
    transition: transform var(--ease-out), color var(--ease-out);
}

.svc-faq__q[aria-expanded="true"] .svc-faq__chevron {
    transform: rotate(180deg);
    color: var(--color-accent);
}

.svc-faq__a {
    padding: 0 var(--space-6) var(--space-5);
    border-top: 1px solid var(--color-line);
    font-size: var(--text-body);
    line-height: var(--lh-body);
    color: var(--color-body);
}

.svc-faq__a p {
    padding-top: var(--space-4);
    margin: 0;
}


/* ── Stats bar ───────────────────────────────────────────────────────────────── */

.stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    text-align: center;
}

.stat-item__number {
    font-family: var(--font-head);
    font-size: 48px;
    font-weight: 800;
    color: var(--color-ink);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.ip-section--dark .stat-item__number {
    color: #ffffff;
}

.stat-item__label {
    font-size: var(--text-small);
    color: var(--color-body);
    font-weight: 500;
}

.ip-section--dark .stat-item__label {
    color: rgba(255, 255, 255, 0.60);
}

/* Glow modifier for dark ip-sections (e.g. stats band) — same blob + dot-grid as hero */
.ip-section--glow {
    position: relative;
    overflow: hidden;
}
.ip-section--glow::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 600px;
    height: 600px;
    border-radius: var(--radius-full);
    background: rgba(var(--color-primary-rgb), 0.15);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
}
.ip-section--glow::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='white' fill-opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}
.ip-section--glow > .container {
    position: relative;
    z-index: 1;
}


/* ── About: story layout ─────────────────────────────────────────────────────── */

.about-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
    align-items: stretch;
}

.about-story__text h2 {
    font-size: var(--text-h2);
    font-weight: 800;
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    color: var(--color-ink);
    margin-bottom: var(--space-5);
}

.about-story__text p {
    font-size: var(--text-body);
    line-height: var(--lh-body);
    color: var(--color-body);
    margin-bottom: var(--space-4);
}

/* Mission quote card — replaces the old SVG graphic; stretches to match text column */
.about-story__card {
    background: var(--color-bg-dark);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
/* Subtle lime glow bottom-right — same blob values as hero glow, scaled for card */
.about-story__card::before {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 280px;
    height: 280px;
    border-radius: var(--radius-full);
    background: rgba(var(--color-primary-rgb), 0.15);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.about-story__card > * {
    position: relative;
    z-index: 1;
}
.about-story__card-accent {
    display: block;
    font-size: var(--text-eyebrow);
    font-weight: 600;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-5);
}
.about-story__card-quote {
    font-family: var(--font-head);
    font-size: var(--text-h3);
    font-weight: 700;
    line-height: 1.35;
    color: #ffffff;
    font-style: normal;
    margin: 0 0 var(--space-5);
    margin-block-start: 0;
    margin-block-end: 0;
}
.about-story__card-attr {
    font-size: var(--text-small);
    color: rgba(255, 255, 255, 0.50);
    font-weight: 600;
    margin-top: var(--space-5);
}


/* ── Values ──────────────────────────────────────────────────────────────────── */

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.value-card {
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.value-card__icon {
    font-size: 32px;
    margin-bottom: var(--space-4);
    line-height: 1;
}

.value-card__title {
    font-size: var(--text-h4);
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: var(--space-3);
}

.value-card__body {
    font-size: var(--text-small);
    line-height: var(--lh-body);
    color: var(--color-body);
}


/* ── Team grid ───────────────────────────────────────────────────────────────── */

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 380px));
    gap: var(--space-5);
    justify-content: center;
}

.team-card {
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--ease-out), border-color var(--ease-out);
}

.team-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(var(--color-accent-rgb), 0.30);
}

/* Photo fills the card top at a consistent 1:1 square; object-fit covers varying source sizes */
.team-card__photo-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    flex-shrink: 0;
}

.team-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
    transition: transform 400ms ease-out;
}

.team-card:hover .team-card__photo {
    transform: scale(1.04);
}

/* Text + social body with its own padding */
.team-card__body {
    padding: var(--space-5) var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.team-card__social {
    margin-top: auto;
}

.team-card__name {
    font-size: var(--text-h4);
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: 4px;
}

.team-card__role {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-accent);
    margin-bottom: var(--space-4);
}

.team-card__bio {
    font-size: var(--text-small);
    line-height: var(--lh-body);
    color: var(--color-body);
}

.team-card__social {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-line);
}

.team-card__social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--color-line);
    color: var(--color-body);
    text-decoration: none;
    transition: border-color var(--ease-out), color var(--ease-out), background var(--ease-out);
}

.team-card__social-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-ink);
    background: rgba(var(--color-accent-rgb), 0.08);
}


/* ── Case study cards ────────────────────────────────────────────────────────── */

.cases-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.case-card {
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: box-shadow var(--ease-out), transform var(--ease-out);
}

.case-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.case-card__industry {
    display: inline-block;
    width: fit-content;
    font-size: var(--text-eyebrow);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    background: rgba(var(--color-accent-rgb), 0.10);
    padding: 4px 14px;
    border-radius: var(--radius-full);
}

.case-card__title {
    font-size: var(--text-h3);
    font-weight: 700;
    color: var(--color-ink);
    line-height: var(--lh-h3);
}

.case-card__body {
    font-size: var(--text-body);
    line-height: var(--lh-body);
    color: var(--color-body);
    flex: 1;
}

.cases-grid--three {
    grid-template-columns: repeat(3, 1fr);
}

.case-card__btn {
    margin-top: auto;
    align-self: flex-start;
    height: 44px;
}

.case-card__stats {
    display: flex;
    gap: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-line);
}

.case-stat__value {
    font-family: var(--font-head);
    font-size: var(--text-h3);
    font-weight: 800;
    color: var(--color-ink);
    line-height: 1;
    margin-bottom: 4px;
}

.case-stat__label {
    font-size: var(--text-small);
    color: var(--color-muted);
}


/* ── Contact section ─────────────────────────────────────────────────────────── */

.contact-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--space-6);
    align-items: stretch;
}

/* Left panel — dark card */
.contact-info-panel {
    background: var(--color-bg-dark);
    border-radius: var(--radius-xl);
    padding: var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    height: 100%;
    position: relative;
    overflow: hidden;
}
/* Lime blob — scaled down for narrow card: 300×300px, blur 80px (vs hero 600px/120px).
   Same color/opacity as homepage. Positioned top-right, offset so it peeks into the corner. */
.contact-info-panel::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 300px;
    height: 300px;
    border-radius: var(--radius-full);
    background: rgba(var(--color-primary-rgb), 0.15);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
/* White dot-grid — same SVG pattern, same opacity */
.contact-info-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='white' fill-opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}
/* All direct flex children above the pseudo-element layers */
.contact-info-panel > * {
    position: relative;
    z-index: 1;
}

.contact-info-panel__title {
    font-size: var(--text-h3);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: var(--space-3);
}

.contact-info-panel__lead {
    font-size: var(--text-small);
    color: rgba(255, 255, 255, 0.60);
    line-height: var(--lh-body);
}

/* Contact items */
.contact-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-top: var(--space-2);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.contact-item__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(var(--color-accent-rgb), 0.15);
    border: 1px solid rgba(var(--color-accent-rgb), 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-accent);
}

.contact-item__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.contact-item__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.40);
}

.contact-item__value {
    font-size: var(--text-small);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    line-height: 1.5;
    transition: color var(--ease-out);
}

a.contact-item__value:hover {
    color: #ffffff;
}

/* Hours box */
.contact-hours-box {
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-hours-box__title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.40);
    margin-bottom: var(--space-3);
}

.contact-hours-box__row {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-small);
    color: rgba(255, 255, 255, 0.65);
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.contact-hours-box__row:last-child {
    border-bottom: none;
}

/* Trust quote */
.contact-trust {
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: auto;
}

.contact-trust__stars {
    color: var(--color-gold);
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: var(--space-3);
}

.contact-trust__text {
    font-size: var(--text-small);
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: var(--space-2);
}

.contact-trust__author {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.40);
    font-weight: 600;
}

/* Real customer review — flows directly after office details; gap from parent flex handles spacing */
.contact-review {
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-review__stars {
    color: #ffffff;
    font-size: var(--text-small);
    letter-spacing: 2px;
    margin-bottom: var(--space-3);
}

.contact-review__quote {
    font-size: var(--text-small);
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: var(--space-2);
    margin-block-start: 0;
    margin-block-end: 0;
}

.contact-review__author {
    font-size: var(--text-small);
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
    margin-top: var(--space-2);
}

/* Right panel — form card */
.contact-form-card {
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.contact-form-card__header {
    padding: var(--space-6) var(--space-7) var(--space-5);
    border-bottom: 1px solid var(--color-line);
}

.contact-form-card__header h2 {
    font-size: var(--text-h3);
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: var(--space-2);
}

.contact-form-card__header p {
    font-size: var(--text-small);
    color: var(--color-body);
    line-height: var(--lh-body);
}

.contact-form-card form {
    padding: var(--space-6) var(--space-7);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.form-group label {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-ink);
}

.form-group .req {
    color: var(--color-error);
    margin-left: 2px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-4);
    border: 1.5px solid var(--color-muted);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-ink);
    background: var(--color-bg);
    transition: border-color var(--ease-out), box-shadow var(--ease-out);
    outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--color-muted);
}

.form-group input:focus,
.form-group input:focus-visible,
.form-group textarea:focus,
.form-group textarea:focus-visible {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);
}

.form-group textarea {
    height: 120px;
    padding: var(--space-3) var(--space-4);
    resize: none;
}

/* Custom select */
.form-select-wrap {
    position: relative;
}

.form-select-wrap select {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-7) 0 var(--space-4);
    border: 1.5px solid var(--color-muted);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-small);
    color: var(--color-ink);
    background: var(--color-bg);
    appearance: none;
    outline: none;
    cursor: pointer;
    transition: border-color var(--ease-out), box-shadow var(--ease-out);
}

.form-select-wrap select:focus,
.form-select-wrap select:focus-visible {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);
}

.form-select-arrow {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted);
    pointer-events: none;
}

/* Footer: negative side margins cancel the form's var(--space-7) side padding so the
   background band spans card-full-width; the footer's own padding then re-aligns the
   button to var(--space-7) from the card edge — matching the form fields above exactly */
.contact-form-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-5);
    margin-left: calc(-1 * var(--space-7));
    margin-right: calc(-1 * var(--space-7));
    padding: var(--space-5) var(--space-7) var(--space-6);
    border-top: 1px solid var(--color-line);
    background: var(--color-bg-soft);
}

.contact-form-card__note {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 12px;
    color: var(--color-muted);
    line-height: 1.4;
}

.contact-form-card__note svg {
    flex-shrink: 0;
    color: var(--color-success);
}

/* Success state */
.form-success {
    display: none;
    text-align: center;
    padding: var(--space-10) var(--space-7);
}

.form-success.is-visible {
    display: block;
}

.form-success__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    color: var(--color-success);
}

.form-success h3 {
    font-size: var(--text-h3);
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: var(--space-3);
}

.form-success p {
    font-size: var(--text-body);
    color: var(--color-body);
}


/* ── Blog grid ───────────────────────────────────────────────────────────────── */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.blog-card {
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--ease-out), transform var(--ease-out);
}

.blog-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.blog-card__thumb {
    aspect-ratio: 16 / 9;
    background: var(--color-primary-soft-hex);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.blog-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card__body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
}

.blog-card__meta {
    font-size: var(--text-small);
    color: var(--color-muted);
}

.blog-card__title {
    font-size: var(--text-h4);
    font-weight: 700;
    color: var(--color-ink);
    line-height: var(--lh-h3);
}

.blog-card__title a {
    text-decoration: none;
    transition: color var(--ease-out);
}

.blog-card__title a:hover {
    color: var(--color-accent);
}

.blog-card__excerpt {
    font-size: var(--text-small);
    color: var(--color-body);
    line-height: var(--lh-body);
    flex: 1;
}

.blog-card__link {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: gap var(--ease-out);
    margin-top: auto;
}

.blog-card__link:hover {
    gap: 8px;
}

.blog-no-posts {
    text-align: center;
    padding: var(--space-10) 0;
    grid-column: 1 / -1;
}

.blog-no-posts p {
    color: var(--color-body);
    margin-top: var(--space-3);
}


/* ── Pagination ──────────────────────────────────────────────────────────────── */

.pagination-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--space-8);
}

.pagination-wrap .nav-links {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.pagination-wrap .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-body);
    border: 1.5px solid var(--color-line);
    transition: all var(--ease-out);
    text-decoration: none;
}

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

.pagination-wrap .page-numbers.dots {
    border: none;
    pointer-events: none;
}


/* ── CTA section ─────────────────────────────────────────────────────────────── */

.ip-cta-section {
    background: var(--color-bg-dark);
    padding: var(--section-py) 0;
    text-align: center;
}

/* Floating CTA — square top, 15px bottom corners + footer separation + glow */
.ip-cta-section--float {
    border-radius: 0 0 15px 15px;
    margin-bottom: var(--space-6);
    position: relative;
    overflow: hidden;
    padding: var(--space-10) 0;
}
/* Lime glow blob — same values as .page-hero--glow::before / .final-cta::before */
.ip-cta-section--float::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 600px;
    height: 600px;
    border-radius: var(--radius-full);
    background: rgba(var(--color-primary-rgb), 0.15);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
}
/* White dot grid — same SVG pattern as all dark sections */
.ip-cta-section--float::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='white' fill-opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}
.ip-cta-section--float > .container {
    position: relative;
    z-index: 1;
}
/* Larger heading — one step up from --text-h2 to --text-h1 */
.ip-cta-section--float h2 {
    font-size: var(--text-h1);
    line-height: var(--lh-h1);
}

.ip-cta-section .eyebrow {
    color: rgba(var(--color-primary-rgb), 0.9);
}

.ip-cta-section h2 {
    font-size: var(--text-h2);
    font-weight: 800;
    color: #ffffff;
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    margin-bottom: var(--space-4);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.ip-cta-section > .container > p {
    font-size: var(--text-lead);
    color: rgba(255, 255, 255, 0.68);
    margin-bottom: var(--space-7);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: var(--lh-lead);
}

.ip-cta-section .cta-btn-group {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.btn-white {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 56px;
    padding: 0 var(--space-6);
    background: #ffffff;
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-button);
    font-weight: 600;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: background var(--ease-out), transform var(--ease-out);
}

.btn-white:hover {
    background: var(--color-primary-soft-hex);
    transform: translateY(-2px);
}

.btn-ghost-white {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 56px;
    padding: 0 var(--space-6);
    background: transparent;
    color: #ffffff;
    font-family: var(--font-body);
    font-size: var(--text-button);
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: border-color var(--ease-out), background var(--ease-out);
}

.btn-ghost-white:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}


/* ── Generic page content (page.php) ─────────────────────────────────────────── */

.inner-page-body {
    padding: var(--section-py) 0;
}

.inner-page-body .entry-content {
    max-width: 760px;
}

.inner-page-body .entry-content h2,
.inner-page-body .entry-content h3 {
    margin-top: var(--space-7);
    margin-bottom: var(--space-4);
}

.inner-page-body .entry-content p {
    margin-bottom: var(--space-4);
    line-height: var(--lh-body);
    color: var(--color-body);
}

.inner-page-body .entry-content ul,
.inner-page-body .entry-content ol {
    list-style: revert;
    padding-left: var(--space-6);
    margin-bottom: var(--space-4);
}

.inner-page-body .entry-content li {
    margin-bottom: var(--space-2);
    color: var(--color-body);
    line-height: var(--lh-body);
}

.inner-page-body .entry-content a:not(.btn-primary):not(.btn-secondary):not(.btn-white):not(.btn-ghost-white) {
    color: #1E40AF;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.inner-page-body .entry-content a:not(.btn-primary):not(.btn-secondary):not(.btn-white):not(.btn-ghost-white):hover {
    color: #1E3A8A;
}


/* ── 404 page ────────────────────────────────────────────────────────────────── */

.page-404-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: var(--space-10) 0;
}


/* ── Search form ─────────────────────────────────────────────────────────────── */

.search-form-wrap {
    max-width: 560px;
    margin: 0 auto var(--space-8);
}

.blog-no-posts .search-form-wrap {
    margin-top: var(--space-5);
}

.blog-no-posts .btn-primary {
    margin-top: var(--space-6);
}

.search-form-wrap .search-form {
    display: flex;
    gap: var(--space-3);
}

.search-form-wrap .search-form label {
    flex: 1;
    display: flex;
}

.search-form-wrap .search-field {
    flex: 1;
    height: 56px;
    padding: 0 var(--space-5);
    border: 1.5px solid var(--color-line);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--color-ink);
    background: var(--color-bg);
    transition: border-color var(--ease-out), box-shadow var(--ease-out);
    outline: none;
}

.search-form-wrap .search-field:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.10);
}

.search-form-wrap .search-submit {
    height: 56px;
    padding: 0 var(--space-6);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-family: var(--font-body);
    font-size: var(--text-button);
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--ease-out);
    white-space: nowrap;
}

.search-form-wrap .search-submit:hover {
    background: var(--color-accent);
    color: var(--color-on-primary);
}


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

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

    .stats-bar {
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--space-7);
    }

    .about-story {
        grid-template-columns: 1fr;
    }

    .about-story__visual {
        display: none;
    }

    .about-story__card {
        display: none;
    }

    .svc-intro {
        grid-template-columns: 1fr;
    }

    .svc-diff {
        grid-template-columns: 1fr;
    }

    .svc-reviews-grid {
        grid-template-columns: 1fr;
    }

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

    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .contact-form-card__footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-hero__title {
        font-size: var(--text-h1-mob);
    }

    .ip-cta-section h2 {
        font-size: var(--text-h2-mob);
    }

    .ip-cta-section--float h2 {
        font-size: var(--text-h1-mob);
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        justify-content: unset;
    }

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

    .cs-result-tile__num {
        font-size: 48px;
    }
}

@media ( max-width: 767px ) {
    .services-grid,
    .values-grid,
    .process-steps,
    .svc-features-grid {
        grid-template-columns: 1fr;
    }

    .team-grid {
        grid-template-columns: 1fr;
        justify-content: unset;
    }

    .ip-cta-section--float {
        border-radius: 0 0 15px 15px;
        padding: var(--space-9) 0;
    }

    .cases-grid,
    .cases-grid--three {
        grid-template-columns: 1fr;
    }

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

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

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

    .ip-section {
        padding: var(--section-py-mob) 0;
    }

    .page-hero {
        padding: 80px 0 64px;
    }

    .page-hero__title {
        font-size: 32px;
    }

    .page-hero__lead {
        font-size: var(--text-body);
    }

    .contact-form-card {
        padding: var(--space-6);
    }

    .page-hero--compact {
        padding: 56px 0 var(--space-7);
    }

    .form-submit-row {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =============================================================================
   HEADER — shared styles for inner pages
   ============================================================================= */

.site-header-v2 {
    position: sticky;
    top: 0;
    z-index: 999;
    height: 80px;
    background: rgba(0,0,0,0.95);
    border-bottom: 1px solid transparent;
    transition: border-color var(--ease-out), backdrop-filter var(--ease-out), background var(--ease-out);
}
.site-header-v2.is-scrolled {
    border-bottom-color: rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.site-header-v2 > .container {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0;
}

.header-logo-wrap { display: flex; align-items: center; margin-right: auto; }
.header-logo {
    font-family: var(--font-head);
    font-size: var(--text-h3);
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.header-logo .accent { color: var(--color-primary); }
.header-logo-img { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: block; }

.header-nav-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.header-nav {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    list-style: none;
}
.header-nav a {
    font-size: var(--text-body);
    font-weight: 500;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
    transition: color var(--ease-out);
}
.header-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    border-radius: 1px;
    transition: width var(--ease-out);
}
.header-nav a:hover { color: var(--color-primary); }
.header-nav a:hover::after { width: 100%; }

.header-cta-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.header-cta-btn {
    height: 44px;
    padding: 0 var(--space-5);
    background: var(--color-accent);
    color: var(--color-on-primary);
    font-size: var(--text-small);
    font-weight: 600;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: all var(--ease-out);
    white-space: nowrap;
}
.header-cta-btn:hover { background: var(--color-primary); color: var(--color-on-primary); transform: translateY(-1px); }

.header-hamburger {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #ffffff;
    margin-left: auto;
}

@media (max-width: 1023px) {
    .header-nav-wrap { display: none; }
    .header-cta-wrap { display: none; }
    .header-hamburger { display: flex; }
    .mobile-overlay { display: flex; }
}
@media (max-width: 767px) {
    .site-header-v2 { height: 64px; }
    .site-header-v2 > .container { display: flex; }
}


/* =============================================================================
   FOOTER — shared styles for inner pages
   ============================================================================= */

.site-footer-v2 {
    background: var(--color-bg-dark);
    padding: var(--space-9) 0 var(--space-7);
}
.site-footer-v2 .container { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }

.footer-brand   { grid-column: 1 / 5; }
.footer-col-ql  { grid-column: 5 / 8; }
.footer-col-svc { grid-column: 8 / 11; }
.footer-col-cta { grid-column: 11 / 13; }

.footer-brand .footer-logo {
    font-family: var(--font-head);
    font-size: var(--text-h3);
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.footer-brand .footer-logo .accent { color: var(--color-primary); }
.footer-brand .footer-logo-img { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.footer-tagline {
    font-size: var(--text-small);
    color: #94A3B8;
    margin-top: var(--space-3);
    line-height: var(--lh-body);
    max-width: 260px;
}
.footer-social {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-5);
}
.footer-social-btn {
    width: 32px; height: 32px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.7);
    display: flex; align-items: center; justify-content: center;
    border: none; cursor: pointer;
    text-decoration: none;
    transition: all var(--ease-out);
}
.footer-social-btn:hover { background: var(--color-primary); color: var(--color-on-primary); }

.footer-col-heading {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
    display: block;
    margin-bottom: var(--space-5);
}
.footer-link-list { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; }
.footer-link-list a { font-size: var(--text-body); color: #CBD5E1; text-decoration: none; transition: color var(--ease-out); }
.footer-link-list a:hover { color: #fff; }
.footer-contact-item { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-small); color: #CBD5E1; margin-bottom: var(--space-3); }
.footer-contact-item svg { flex-shrink: 0; margin-top: 1px; color: var(--color-primary); }
.footer-contact-item a { color: #CBD5E1; text-decoration: none; transition: color var(--ease-out); }
.footer-contact-item a:hover { color: #fff; }

.footer-bottom {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding-top: var(--space-6);
    margin-top: var(--space-8);
    border-top: 1px solid rgba(255,255,255,0.10);
}
.footer-copy { font-size: var(--text-small); color: var(--color-muted); }
.footer-copy a { color: var(--color-muted); text-decoration: none; transition: color var(--ease-out); }
.footer-copy a:hover { color: #fff; }
.footer-legal { display: flex; gap: var(--space-5); }
.footer-legal a { font-size: var(--text-small); color: var(--color-muted); text-decoration: none; transition: color var(--ease-out); }
.footer-legal a:hover { color: #fff; }

@media (max-width: 1023px) {
    .site-footer-v2 .container { grid-template-columns: repeat(6, 1fr); }
    .footer-brand   { grid-column: 1 / -1; }
    .footer-col-ql  { grid-column: 1 / 3; }
    .footer-col-svc { grid-column: 3 / 5; }
    .footer-col-cta { grid-column: 5 / 7; }
}
@media (max-width: 767px) {
    .site-footer-v2 .container { grid-template-columns: 1fr 1fr; row-gap: var(--space-7); }
    .footer-brand   { grid-column: 1 / -1; }
    .footer-col-ql  { grid-column: 1 / 2; }
    .footer-col-svc { grid-column: 2 / 3; }
    .footer-col-cta { grid-column: 1 / -1; }
    .footer-bottom  { flex-direction: column; align-items: flex-start; }
}


/* =============================================================================
   SINGLE POST — single.php
   ============================================================================= */

/* Scroll progress bar */
.post-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1000;
    pointer-events: none;
}
.post-progress__bar {
    height: 100%;
    width: 0%;
    background: var(--color-accent);
    transition: width 80ms linear;
}

/* Breadcrumbs */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-size: var(--text-small);
    color: var(--color-muted);
    padding: var(--space-5) 0 0;
}
.breadcrumbs a {
    color: var(--color-body);
    text-decoration: none;
    transition: color var(--ease-out);
}
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs__sep     { color: var(--color-line); }
.breadcrumbs__current { color: var(--color-muted); }

/* Post header */
.post-header {
    padding: var(--space-6) 0 var(--space-7);
    max-width: 760px;
}
.post-header__eyebrow {
    display: inline-block;
    font-size: var(--text-eyebrow);
    font-weight: 600;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-primary);
    text-decoration: none;
    margin-bottom: var(--space-4);
    transition: color var(--ease-out);
}
.post-header__eyebrow:hover { color: var(--color-primary-dark); }
.post-header__title {
    font-family: var(--font-head);
    font-size: var(--text-h1);
    font-weight: 700;
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
    color: var(--color-ink);
    margin: 0 0 var(--space-5);
}
.post-meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: var(--text-small);
    color: var(--color-muted);
}
.post-meta__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.post-meta__author { color: var(--color-body); font-weight: 600; }
.post-meta__sep    { color: var(--color-line); }

/* Featured image */
.post-featured {
    margin: 0 0 var(--space-3);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.post-featured img {
    width: 100%;
    height: auto;
    display: block;
}
.post-featured figcaption {
    font-size: var(--text-small);
    color: var(--color-muted);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-soft);
    text-align: center;
}
@media (min-width: 1024px) {
    .post-featured {
        max-width: 900px;
    }
}

/* Share row */
.post-share {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    margin-bottom: var(--space-5);
}
.post-share__label {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-muted);
    margin-right: var(--space-2);
}
.post-share__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 36px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-full);
    border: 1.5px solid var(--color-line);
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-body);
    text-decoration: none;
    background: var(--color-bg);
    transition: border-color var(--ease-out), color var(--ease-out), background var(--ease-out);
}
.post-share__btn:hover {
    border-color: var(--color-primary);
    color: var(--color-ink);
    background: rgba(var(--color-primary-rgb), 0.06);
}

/* Two-column layout */
.post-layout { display: block; }
.post-toc    { display: none; }

.post-layout:not(.has-toc) .post-layout__main {
    max-width: 760px;
}

@media (min-width: 1080px) {
    .post-layout.has-toc {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 260px;
        gap: var(--space-8);
        align-items: start;
    }
    .post-layout.has-toc .post-toc {
        display: block;
        position: sticky;
        top: calc(80px + var(--space-4));
    }
}

/* TOC */
.post-toc__title {
    font-size: var(--text-small);
    font-weight: 700;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-muted);
    margin-bottom: var(--space-4);
}
.post-toc__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.post-toc__anchor {
    display: block;
    font-size: var(--text-small);
    color: var(--color-body);
    text-decoration: none;
    padding: var(--space-2) var(--space-4);
    border-left: 2px solid var(--color-line);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    line-height: 1.4;
    transition: color var(--ease-out), border-color var(--ease-out), background var(--ease-out);
}
.post-toc__anchor:hover,
.post-toc__anchor.is-active {
    color: var(--color-ink);
    border-left-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.06);
}
.post-toc__anchor.is-active { font-weight: 600; }
.post-toc__list li.is-h3 .post-toc__anchor {
    padding-left: var(--space-6);
    font-size: var(--text-micro);
}

/* Post tags */
.post-tags {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding-top: var(--space-7);
    border-top: 1px solid var(--color-line);
    margin-top: var(--space-7);
}
.post-tags__label {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-muted);
}
.post-tags__tag {
    display: inline-block;
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    border: 1.5px solid var(--color-line);
    font-size: var(--text-small);
    color: var(--color-body);
    text-decoration: none;
    transition: border-color var(--ease-out), color var(--ease-out);
}
.post-tags__tag:hover {
    border-color: var(--color-primary);
    color: var(--color-ink);
}

/* Author bio */
.post-author {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    padding: var(--space-6);
    background: var(--color-bg-soft);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-line);
    margin-top: var(--space-5);
    max-width: 760px;
}
.post-author__avatar {
    width: var(--space-8);
    height: var(--space-8);
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.post-author__name {
    font-size: var(--text-body);
    font-weight: 700;
    color: var(--color-ink);
    margin: 0 0 var(--space-2);
}
.post-author__bio {
    font-size: var(--text-small);
    color: var(--color-body);
    line-height: var(--lh-body);
    margin: 0;
}

/* Related posts heading */
.related-posts-heading {
    font-family: var(--font-head);
    font-size: var(--text-h2);
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: var(--space-7);
    text-align: center;
}

/* ── Responsive: single post ─────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .post-header__title    { font-size: var(--text-h1-mob); }
    .post-author           { flex-direction: column; }
}


/* =============================================================================
   FREE TOOLS PAGE
   ============================================================================= */

.tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

/* Floating look always on; hover adds subtle lift + accent border */
.tool-card {
    background: #fff;
    border: 1px solid #CBD5E1;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: transform var(--ease-out), box-shadow var(--ease-out), border-color var(--ease-out);
}
.tool-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.13);
    transform: translateY(-4px);
    border-color: var(--color-primary);
}

.tool-card__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: rgba(0,255,255,0.09);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    color: var(--color-accent);
    flex-shrink: 0;
}

.tool-card__name {
    font-size: var(--text-h4);
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: var(--space-3);
}
.tool-card__desc {
    font-size: var(--text-small);
    line-height: var(--lh-body);
    color: var(--color-body);
    flex: 1;
    margin-bottom: var(--space-5);
}
.tool-card__btn {
    height: 44px;
    padding: 0 var(--space-5);
    font-size: var(--text-small);
    align-self: flex-start;
}

/* ── Load more ── */
.tools-load-more {
    text-align: center;
    margin-top: var(--space-7);
}

/* ── Share row ── */
.tools-share {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.tools-share__label {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-body);
    white-space: nowrap;
}
.tools-share__links {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.tools-share__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-body);
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all var(--ease-out);
}
.tools-share__btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

@media (max-width: 1023px) {
    .tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .tools-grid { grid-template-columns: 1fr; }
    .tools-share { flex-direction: column; align-items: flex-start; }
}


/* =============================================================================
   VIDEO LIBRARY PAGE
   ============================================================================= */

.vid-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

/* Floating card — border + shadow always on; hover adds lift + accent */
.vid-card {
    background: #fff;
    border: 1px solid #CBD5E1;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform var(--ease-out), box-shadow var(--ease-out), border-color var(--ease-out);
}
.vid-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.13);
    transform: translateY(-4px);
    border-color: var(--color-primary);
}

/* Thumbnail: 16:9 with dark fallback background */
.vid-card__thumb-wrap {
    aspect-ratio: 16 / 9;
    background: #0F172A;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
.vid-card__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vid-card__thumb-fallback {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
}
.vid-card__thumb-wrap.has-fallback .vid-card__thumb     { display: none; }
.vid-card__thumb-wrap.has-fallback .vid-card__thumb-fallback { display: flex; }

/* Card body */
.vid-card__body {
    padding: var(--space-5) var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.vid-card__topic {
    font-size: var(--text-h4);
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: var(--space-3);
}
.vid-card__desc {
    font-size: var(--text-small);
    line-height: var(--lh-body);
    color: var(--color-body);
    flex: 1;
    margin-bottom: var(--space-5);
}
.vid-card__btn {
    height: 44px;
    padding: 0 var(--space-5);
    font-size: var(--text-small);
    align-self: flex-start;
}

/* ── Load more ── */
.vid-load-more {
    text-align: center;
    margin-top: var(--space-7);
}

@media (max-width: 1023px) {
    .vid-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .vid-grid { grid-template-columns: 1fr; }
}


/* =============================================================================
   QUIZ HUB PAGE
   ============================================================================= */

.quiz-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

/* Floating card — border + shadow always on; hover adds lift + accent */
.quiz-card {
    background: #fff;
    border: 1px solid #CBD5E1;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: transform var(--ease-out), box-shadow var(--ease-out), border-color var(--ease-out);
}
.quiz-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.13);
    transform: translateY(-4px);
    border-color: var(--color-primary);
}

.quiz-card__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: rgba(0,255,255,0.09);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    color: var(--color-accent);
    flex-shrink: 0;
}

.quiz-card__title {
    font-size: var(--text-h4);
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: var(--space-3);
}
.quiz-card__desc {
    font-size: var(--text-small);
    line-height: var(--lh-body);
    color: var(--color-body);
    flex: 1;
    margin-bottom: var(--space-3);
}
.quiz-card__meta {
    font-size: var(--text-small);
    color: #64748B;
    margin-bottom: var(--space-5);
}
.quiz-card__btn {
    height: 44px;
    padding: 0 var(--space-5);
    font-size: var(--text-small);
    align-self: flex-start;
}

@media (max-width: 1023px) {
    .quiz-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .quiz-grid { grid-template-columns: 1fr; }
}


/* =============================================================================
   BUSINESS HEALTH CHECK QUIZ
   ============================================================================= */

.bhc-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-small);
    color: var(--color-body);
    text-decoration: none;
    margin-bottom: var(--space-6);
    transition: color var(--ease-out);
}
.bhc-back:hover { color: var(--color-accent); }

.bhc-wrap {
    max-width: 640px;
    margin: 0 auto;
}

.bhc-card {
    background: #fff;
    border: 1px solid #CBD5E1;
    border-radius: var(--radius-lg);
    padding: var(--space-7) var(--space-7);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* ── Intro screen ── */
.bhc-intro__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0,255,255,0.09);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    margin-bottom: var(--space-5);
}
.bhc-intro__title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-ink);
    margin-bottom: var(--space-4);
    line-height: 1.2;
}
.bhc-intro__blurb {
    font-size: 1rem;
    color: var(--color-body);
    line-height: var(--lh-body);
    margin-bottom: var(--space-6);
}
.bhc-wide-btn {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* ── Progress bar ── */
.bhc-progress { margin-bottom: var(--space-6); }
.bhc-progress__meta {
    font-size: var(--text-small);
    color: var(--color-body);
    margin-bottom: var(--space-3);
}
.bhc-progress__bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 99px;
    overflow: hidden;
}
.bhc-progress__fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: 99px;
    width: 0%;
    transition: width 0.35s ease;
}

/* ── Question ── */
.bhc-q-text {
    font-size: var(--text-h4);
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1.4;
    margin-bottom: var(--space-5);
}
.bhc-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.bhc-option {
    width: 100%;
    padding: var(--space-4) var(--space-5);
    background: var(--color-bg-soft);
    border: 1.5px solid #CBD5E1;
    border-radius: var(--radius-md);
    font-size: 1rem;
    color: var(--color-ink);
    text-align: left;
    cursor: pointer;
    line-height: 1.4;
    transition: border-color var(--ease-out), background var(--ease-out);
}
.bhc-option:hover {
    border-color: var(--color-accent);
    background: rgba(0,255,255,0.04);
}
.bhc-option.is-selected {
    border-color: var(--color-accent);
    background: rgba(0,255,255,0.08);
    font-weight: 600;
}
.bhc-nav { display: flex; justify-content: flex-end; }
.bhc-next-btn { min-width: min(160px, 100%); }
.bhc-next-btn:disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ── Results ── */
.bhc-score-wrap {
    text-align: center;
    padding-bottom: var(--space-6);
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: var(--space-6);
}
.bhc-score {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.bhc-score__num {
    font-size: 4.5rem;
    font-weight: 900;
    color: var(--color-ink);
    line-height: 1;
}
.bhc-score__denom {
    font-size: 1.5rem;
    color: var(--color-body);
}
.bhc-band {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--color-ink);
    margin-bottom: var(--space-3);
}
.bhc-band-msg {
    font-size: 1rem;
    color: var(--color-body);
    line-height: var(--lh-body);
    max-width: 480px;
    margin: 0 auto;
}

/* ── Breakdown list ── */
.bhc-breakdown {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.bhc-item {
    display: flex;
    gap: var(--space-3);
    font-size: var(--text-small);
    line-height: var(--lh-body);
    align-items: flex-start;
}
.bhc-item__check {
    color: #22C55E;
    font-weight: 700;
    flex-shrink: 0;
    width: 18px;
    margin-top: 1px;
}
.bhc-item__dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background: #F59E0B;
    flex-shrink: 0;
    margin-top: 6px;
}
.bhc-service-link {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 600;
}
.bhc-service-link:hover { text-decoration: underline; }

/* ── CTA block ── */
.bhc-result-cta {
    background: var(--color-bg-soft);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    text-align: center;
    margin-bottom: var(--space-5);
}
.bhc-cta-lead {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: var(--space-4);
}
.bhc-retake-wrap { text-align: center; }
.bhc-retake {
    background: none;
    border: none;
    color: var(--color-body);
    font-size: var(--text-small);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}
.bhc-retake:hover { color: var(--color-ink); }

@media (max-width: 767px) {
    .bhc-card        { padding: var(--space-6) var(--space-5); }
    .bhc-score__num  { font-size: 3.5rem; }
    .bhc-intro__title { font-size: 1.625rem; }
}


/* =============================================================================
   SERVICE MATCHER QUIZ  — result screen only (shared elements reuse .bhc-*)
   ============================================================================= */

.sm-result__intro {
    text-align: center;
    font-size: var(--text-small);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-body);
    margin-bottom: var(--space-4);
}

.sm-primary-card {
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
    margin-bottom: var(--space-5);
    background: rgba(0,255,255,0.04);
}
.sm-primary-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    margin: 0 auto var(--space-4);
}
.sm-primary-card__name {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--color-ink);
    margin-bottom: var(--space-3);
}
.sm-primary-card__why {
    font-size: var(--text-small);
    color: var(--color-body);
    line-height: var(--lh-body);
    max-width: 380px;
    margin: 0 auto var(--space-5);
}

.sm-secondary {
    text-align: center;
    font-size: var(--text-small);
    color: var(--color-body);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid #E2E8F0;
}


/* =============================================================================
   OUR WORK PAGE
   ============================================================================= */

/* ── Websites grid ─────────────────────────────────────────────────────────── */

.work-sites-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.work-site-card {
    background: #fff;
    border: 1px solid #CBD5E1;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 250ms var(--ease-out), transform 250ms var(--ease-out), border-color 250ms var(--ease-out);
}
.work-site-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.13);
    transform: translateY(-4px);
    border-color: var(--color-primary);
}

.work-site-card__img-wrap {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #F1F5F9;
}

.work-site-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.work-site-card__body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
}

.work-site-card__name {
    font-size: var(--text-h4);
    font-weight: 700;
    color: var(--color-ink);
    margin: 0;
}

.work-site-card__desc {
    font-size: var(--text-small);
    line-height: var(--lh-body);
    color: var(--color-body);
    margin: 0;
    flex: 1;
}

.work-site-card__btn {
    height: 44px;
    padding: 0 var(--space-5);
    font-size: var(--text-small);
    align-self: flex-start;
    margin-top: var(--space-2);
}

/* ── Logos grid ────────────────────────────────────────────────────────────── */

.work-logos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

.work-logo-tile {
    background: #fff;
    border: 1px solid #CBD5E1;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    padding: var(--space-4);
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    transition: box-shadow 250ms var(--ease-out), transform 250ms var(--ease-out), border-color 250ms var(--ease-out);
}
.work-logo-tile:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.13);
    transform: translateY(-4px);
    border-color: var(--color-primary);
}

.work-logo-tile__img {
    width: 100%;
    max-height: 120px;
    object-fit: contain;
    display: block;
}

.work-logo-tile__name {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-body);
    text-align: center;
    margin: 0;
}

/* ── Social grid ───────────────────────────────────────────────────────────── */

.work-social-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

.work-social-tile {
    background: #fff;
    border: 1px solid #CBD5E1;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 250ms var(--ease-out), transform 250ms var(--ease-out), border-color 250ms var(--ease-out);
}
.work-social-tile:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.13);
    transform: translateY(-4px);
    border-color: var(--color-primary);
}

.work-social-tile__img-wrap {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #F1F5F9;
}

.work-social-tile__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.work-social-tile__name {
    font-size: var(--text-small);
    font-weight: 600;
    color: var(--color-body);
    text-align: center;
    padding: var(--space-3) var(--space-4);
    margin: 0;
}

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

@media (max-width: 1023px) {
    .work-sites-grid  { grid-template-columns: repeat(2, 1fr); }
    .work-logos-grid  { grid-template-columns: repeat(3, 1fr); }
    .work-social-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
    .work-sites-grid  { grid-template-columns: 1fr; }
    .work-logos-grid  { grid-template-columns: repeat(2, 1fr); }
    .work-social-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Lightbox ──────────────────────────────────────────────────────────────── */

[data-lightbox] { cursor: zoom-in; }

#workLightbox {
    display: none; /* JS sets display:flex to open */
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: var(--space-6);
}

#workLightboxInner {
    position: relative;
    max-width: min(90vw, 1200px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#workLightboxImg {
    display: block;
    max-width: 100%;
    max-height: 82vh;
    border-radius: var(--radius-md);
    object-fit: contain;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}

#workLightboxClose {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms, border-color 200ms;
    z-index: 10000;
}
#workLightboxClose:hover {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.45);
}

#workLightboxPrev,
#workLightboxNext {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms, border-color 200ms;
    z-index: 1;
    flex-shrink: 0;
}
#workLightboxPrev { left: 16px; }
#workLightboxNext { right: 16px; }
#workLightboxPrev:hover,
#workLightboxNext:hover {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.45);
}

#workLightboxCaption {
    text-align: center;
    color: rgba(255,255,255,0.72);
    font-size: var(--text-small);
    margin-top: var(--space-5);
    margin-bottom: 0;
    min-height: 1.4em;
}


/* =============================================================================
   CASE STUDY PAGE
   ============================================================================= */

/* ── Challenge ──────────────────────────────────────────────────────────────── */

.cs-challenge__intro {
    font-size: var(--text-lead);
    line-height: var(--lh-lead);
    color: var(--color-body);
    max-width: 720px;
    margin: 0 0 var(--space-7);
}

.cs-challenge__points {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 720px;
}

.cs-challenge__points li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-body);
    line-height: var(--lh-body);
    color: var(--color-body);
}

.cs-challenge__points li::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
    margin-top: 7px;
}

/* ── What We Did ────────────────────────────────────────────────────────────── */

.cs-what-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.cs-what-card {
    background: #fff;
    border: 1px solid #CBD5E1;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    padding: var(--space-6);
    transition: box-shadow 250ms var(--ease-out), transform 250ms var(--ease-out), border-color 250ms var(--ease-out);
}

.cs-what-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.13);
    transform: translateY(-4px);
    border-color: var(--color-primary);
}

.cs-what-card__title {
    font-size: var(--text-h4);
    font-weight: 700;
    color: var(--color-ink);
    margin: 0 0 var(--space-3);
}

.cs-what-card__text {
    font-size: var(--text-body);
    line-height: var(--lh-body);
    color: var(--color-body);
    margin: 0;
}

/* ── Results ────────────────────────────────────────────────────────────────── */

.cs-results-tiles {
    display: flex;
    justify-content: center;
    gap: var(--space-9);
    margin-bottom: var(--space-7);
    flex-wrap: wrap;
}

.cs-result-tile {
    text-align: center;
}

.cs-result-tile__num {
    font-family: var(--font-head);
    font-size: 64px;
    font-weight: 800;
    color: var(--color-accent);
    line-height: 1;
    margin-bottom: var(--space-2);
}

.cs-result-tile__label {
    font-size: var(--text-small);
    color: rgba(255,255,255,0.68);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cs-results-summary {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    font-size: var(--text-lead);
    line-height: var(--lh-lead);
    color: rgba(255,255,255,0.78);
}

/* ── Outcome list (qualitative results — no number tiles) ───────────────────── */

.cs-outcomes {
    list-style: none;
    padding: 0;
    margin: 0 auto var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 640px;
}

.cs-outcomes__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    font-size: var(--text-lead);
    line-height: var(--lh-lead);
    color: rgba(255,255,255,0.88);
}

.cs-outcomes__item::before {
    content: '';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 3px;
    background-color: var(--color-accent);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 7 6 11 12 3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
}

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

/* ── Challenge body layout ──────────────────────────────────────────────────── */

.cs-challenge__body {
    display: block;
}

.cs-challenge__body--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: start;
}

/* Remove max-width cap on left-column content — column already constrains width */
.cs-challenge__body--split .cs-challenge__intro,
.cs-challenge__body--split .cs-challenge__points {
    max-width: none;
}

/* ── Pull-quote ─────────────────────────────────────────────────────────────── */

.cs-pull-quote {
    position: relative;
    margin: 0;
    padding: var(--space-6) var(--space-6) var(--space-6) var(--space-7);
    background: rgba(0, 255, 255, 0.05);
    border-left: 4px solid var(--color-accent);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.cs-pull-quote::before {
    content: '\201C';
    position: absolute;
    top: var(--space-3);
    left: var(--space-5);
    font-size: 80px;
    line-height: 1;
    color: var(--color-accent);
    opacity: 0.35;
    font-family: var(--font-head);
    font-weight: 800;
    pointer-events: none;
}

.cs-pull-quote__text {
    font-size: var(--text-h3);
    font-weight: 700;
    font-family: var(--font-head);
    line-height: 1.25;
    color: var(--color-ink);
    margin: 0 0 var(--space-4);
}

.cs-pull-quote__sub {
    display: block;
    font-size: var(--text-small);
    font-weight: 500;
    color: var(--color-body-muted, #64748B);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}

/* ── Float-CTA separation from dark Results section ────────────────────────── */

.cs-page .ip-cta-section--float {
    margin-top: var(--space-8);
    border-radius: 15px;
}

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

@media (max-width: 767px) {
    .cs-what-grid        { grid-template-columns: 1fr; }
    .cs-results-tiles    { gap: var(--space-7); }
    .cs-result-tile__num { font-size: 48px; }
    .cs-challenge__body--split { grid-template-columns: 1fr; }
    .cs-pull-quote::before     { font-size: 60px; }
    .cs-pull-quote__text       { font-size: var(--text-h4); }
}