:root {
    --bg: #f8f9fb;
    --surface: #ffffff;
    --dark: #0a1628;
    --dark-soft: #132238;
    --text: #0f172a;
    --muted: #64748b;
    --border: #e2e8f0;
    --accent: #0d3057;
    --accent-hover: #173f73;
    --accent-light: #e4edf6;
    --success: #166534;
    --error: #991b1b;
    --radius: 14px;
    --radius-lg: 24px;
    --shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 24px 64px rgba(15, 23, 42, 0.1);
    --font-sans: "DM Sans", system-ui, sans-serif;
    --font-heading: "Jost", "DM Sans", system-ui, sans-serif;
    --font-serif: var(--font-sans);
    --container: min(1400px, calc(100% - 3rem));
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    text-decoration: none;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.4rem, 5vw, 3.75rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: 0 0 0.75rem; }
h3 { font-size: 1.35rem; margin: 0 0 0.5rem; }
h4 { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.75rem; color: var(--muted); }

p { margin: 0 0 1rem; }

.container {
    width: var(--container);
    margin: 0 auto;
}

.content-narrow {
    max-width: 42rem;
    margin: 0 auto;
}

.content-narrow p {
    font-size: 1.0625rem;
    line-height: 1.75;
}

/* ── Top info bar ── */

.site-topbar {
    background: #0d3057;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.8125rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
}

.site-topbar-contact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem 1.35rem;
    min-width: 0;
}

.site-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: inherit;
    text-decoration: none;
    line-height: 1.3;
    white-space: nowrap;
}

a.site-topbar-item:hover,
a.site-topbar-item:focus-visible {
    color: #fff;
}

.site-topbar-item--text {
    display: none;
}

.site-topbar-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 0.95rem;
    height: 0.95rem;
    opacity: 0.9;
}

.site-topbar-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.site-topbar-social {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.site-topbar-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.1);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.site-topbar-social-link svg {
    display: block;
    width: 0.85rem;
    height: 0.85rem;
}

.site-topbar-social-link:hover,
.site-topbar-social-link:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

@media (max-width: 1024px) {
    .site-topbar-inner {
        padding: 0.5rem 1.5rem;
        box-sizing: border-box;
    }

    .site-topbar-contact {
        gap: 0.75rem 1rem;
    }

    .site-topbar-item--text {
        display: none;
    }

    .header-inner {
        width: 100%;
        max-width: none;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.75rem 1.5rem;
        box-sizing: border-box;
    }

    .site-logo {
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100% - 3.25rem);
    }

    .site-logo-image--wordmark {
        height: clamp(44px, 7vw, 58px);
        width: auto;
        max-width: 100%;
    }

    .page-home-reference .site-logo-image--wordmark {
        height: clamp(44px, 7vw, 58px);
    }

    .nav-toggle {
        margin-left: 0;
        flex-shrink: 0;
    }

    .site-nav-mobile-inner {
        width: 100%;
        max-width: none;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        box-sizing: border-box;
    }
}

/* Sticky header phone: mobile only (hidden on desktop) */
.header-phone-sticky {
    display: none !important;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    margin-right: 0.55rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: rgba(15, 45, 90, 0.06);
    color: var(--ref-navy, #0f2d5a);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.header-phone-sticky-icon {
    display: inline-flex;
    color: var(--ref-navy, #0f2d5a);
}

.header-phone-sticky--menu {
    display: none !important;
    justify-content: center;
    margin: 0 0 0.75rem;
    margin-left: 0;
    margin-right: 0;
}

@media (max-width: 767px) {
    .header-phone-sticky {
        display: inline-flex !important;
    }

    .header-phone-sticky-label {
        font-variant-numeric: tabular-nums;
    }

    .header-phone-sticky--menu {
        display: flex !important;
    }

    .header-inner .site-logo {
        flex: 0 1 auto;
        max-width: calc(100% - 9.5rem);
    }
}

@media (max-width: 1280px) {
    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .site-topbar {
        display: none !important;
    }

    .header-inner {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }

    .site-logo-image--wordmark,
    .page-home-reference .site-logo-image--wordmark {
        height: 42px;
    }

    .site-nav-mobile-inner {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .header-inner.container,
    .site-nav-mobile-inner.container,
    .site-topbar-inner.container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* ── Header ── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    overflow: visible;
}

.header-inner {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.5vw, 2rem);
    padding: 1rem 0;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--text);
    flex-shrink: 1;
    min-width: 0;
}

.logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--accent);
    color: #fff;
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 1.2rem;
    font-weight: 800;
    flex-shrink: 0;
}

.site-logo-image {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
    flex-shrink: 0;
}

.site-logo-image--wordmark {
    width: auto;
    height: clamp(48px, 5.5vw, 80px);
    max-width: 100%;
    border-radius: 0;
}

.logo-text {
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.site-nav {
    display: flex;
    gap: clamp(0.75rem, 1.25vw, 1.75rem);
    margin-left: auto;
    align-self: stretch;
    align-items: stretch;
}

.site-nav--desktop {
    flex-wrap: nowrap;
    flex-shrink: 0;
    white-space: nowrap;
    align-self: stretch;
    align-items: stretch;
}

.site-nav--desktop > a,
.site-nav--desktop .nav-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    align-self: stretch;
}

.site-nav a {
    text-decoration: none;
    color: var(--muted);
    font-size: 0.925rem;
    font-weight: 500;
    transition: color 0.2s;
}

.site-nav a.is-active,
.site-nav--desktop .nav-item--has-children.is-active > a {
    color: var(--text);
    font-weight: 600;
}

.site-nav--desktop > a.is-active,
.site-nav--desktop .nav-item--has-children.is-active > a {
    box-shadow: inset 0 -2px 0 var(--accent);
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.nav-item--has-children > a {
    text-decoration: none;
    color: var(--muted);
    font-size: 0.925rem;
    font-weight: 500;
    transition: color 0.2s;
}

.site-nav--desktop .nav-item--has-children:hover > a,
.site-nav--desktop .nav-item--has-children:focus-within > a {
    color: var(--text);
}

.site-nav--desktop .nav-submenu-indicator {
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin-left: 0.1rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-0.1rem);
    opacity: 0.7;
    flex-shrink: 0;
}

.site-nav--desktop .nav-item--has-children.is-active .nav-submenu-indicator,
.site-nav--desktop .nav-item--has-children:hover .nav-submenu-indicator,
.site-nav--desktop .nav-item--has-children:focus-within .nav-submenu-indicator {
    opacity: 1;
}

.site-nav--desktop .nav-submenu-toggle {
    display: none;
}

.nav-submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.nav-submenu-toggle span {
    display: block;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s;
}

.nav-item--has-children.is-open > .nav-submenu-toggle span,
.nav-mobile-item.is-open > .nav-mobile-row .nav-submenu-toggle span {
    transform: rotate(-135deg);
}

.site-nav--desktop .nav-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0;
    min-width: 11rem;
    padding: 0.45rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    gap: 0.1rem;
    z-index: 120;
}

/* Keep hover alive from the parent link down into the panel */
.site-nav--desktop .nav-item--has-children::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 0.85rem;
    pointer-events: auto;
}

.site-nav--desktop .nav-submenu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 0.85rem;
}

.site-nav--desktop .nav-item--has-children:hover > .nav-submenu,
.site-nav--desktop .nav-item--has-children:focus-within > .nav-submenu {
    display: flex;
}

.nav-submenu a {
    display: block;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 500;
}

.nav-submenu a:hover {
    color: var(--text);
    background: var(--accent-light);
}

.nav-submenu a.is-active {
    color: var(--accent);
    background: var(--accent-light);
    font-weight: 600;
}

/* Nested flyout (SEO Education under Blog) */
.site-nav--desktop .nav-submenu .nav-item--nested {
    position: relative;
}

.site-nav--desktop .nav-submenu .nav-item--nested > a,
.site-nav--desktop .nav-submenu .nav-submenu-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    width: 100%;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.site-nav--desktop .nav-submenu .nav-submenu-trigger:hover {
    color: var(--text);
    background: var(--accent-light);
}

.site-nav--desktop .nav-submenu-indicator--nested {
    position: static;
    flex-shrink: 0;
    margin-left: auto;
    transform: rotate(-90deg);
}

.site-nav--desktop .nav-submenu--flyout {
    display: none;
    top: -0.45rem;
    left: calc(100% - 0.55rem);
    min-width: 15rem;
    max-width: 20rem;
    z-index: 121;
}

.site-nav--desktop .nav-submenu--flyout::before {
    left: auto;
    right: 100%;
    top: 0;
    bottom: 0;
    width: 0.75rem;
    height: auto;
}

/* Bridge the path from SEO Education into the flyout */
.site-nav--desktop .nav-submenu .nav-item--nested::after {
    left: auto;
    right: -0.75rem;
    top: 0;
    bottom: 0;
    width: 0.85rem;
    height: auto;
}

.site-nav--desktop .nav-item--nested:hover > .nav-submenu--flyout,
.site-nav--desktop .nav-item--nested:focus-within > .nav-submenu--flyout {
    display: flex;
}

.site-nav--desktop .nav-submenu--flyout-mega {
    left: auto;
    right: calc(100% - 0.4rem);
    top: -0.45rem;
    min-width: min(38rem, calc(100vw - 2rem));
    max-width: min(42rem, calc(100vw - 2rem));
    max-height: min(72vh, 34rem);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.55rem;
    gap: 0.12rem 0.4rem;
    grid-template-columns: 1fr 1fr;
    align-content: start;
}

.site-nav--desktop .nav-item--nested:hover > .nav-submenu--flyout-mega,
.site-nav--desktop .nav-item--nested:focus-within > .nav-submenu--flyout-mega {
    display: grid;
}

.site-nav--desktop .nav-submenu--flyout-mega a {
    padding: 0.4rem 0.55rem;
    line-height: 1.35;
    white-space: normal;
}

.site-nav--desktop .nav-item--nested:has(> .nav-submenu--flyout-mega)::after {
    left: -0.85rem;
    right: auto;
    width: 0.9rem;
    top: 0;
    bottom: 0;
    height: auto;
}

.site-nav--desktop .nav-submenu--flyout-mega::before {
    left: 100%;
    right: auto;
    top: 0;
    bottom: 0;
    width: 0.9rem;
    height: auto;
}

.site-nav a:hover {
    color: var(--text);
}

.header-cta {
    flex-shrink: 1;
    min-width: 0;
}

.header-cta--desktop {
    padding: clamp(0.45rem, 0.35vw + 0.35rem, 0.6rem) clamp(0.7rem, 0.8vw + 0.45rem, 1.2rem);
    font-size: clamp(0.75rem, 0.35vw + 0.62rem, 0.875rem);
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.nav-toggle:hover {
    border-color: rgba(91, 92, 246, 0.35);
    background: var(--accent-light);
}

.nav-toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--text);
    transition: transform 0.2s, opacity 0.2s;
}

body.nav-open .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

body.nav-open .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

body.nav-open .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.site-nav-mobile {
    border-top: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
}

.site-nav-mobile:not([hidden]) {
    display: block;
}

.site-nav-mobile-inner {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1rem 0 1.35rem;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.site-nav-mobile-links {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.site-nav-mobile-links a {
    display: block;
    padding: 0.75rem 0;
    text-decoration: none;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}

.nav-mobile-item {
    border-bottom: 1px solid var(--border);
}

.nav-mobile-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav-mobile-row > a {
    flex: 1;
    display: block;
    padding: 0.75rem 0;
    text-decoration: none;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 600;
    border-bottom: none;
}

.nav-mobile-row .nav-submenu-toggle {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--text);
}

.site-nav-mobile-links .nav-submenu {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0 0.5rem 0.75rem;
}

.site-nav-mobile-links .nav-submenu[hidden] {
    display: none;
}

.site-nav-mobile-links .nav-submenu-link {
    display: block;
    padding: 0.55rem 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
}

.site-nav-mobile-links .nav-submenu-link:hover {
    color: var(--accent);
}

.site-nav-mobile-links a.is-active,
.site-nav-mobile-links .nav-submenu-link.is-active {
    color: var(--accent);
    font-weight: 600;
}

.site-nav-mobile-links .nav-mobile-item.is-active > .nav-mobile-row > a {
    color: var(--accent);
}

.site-nav-mobile-links a:hover {
    color: var(--accent);
}

body.nav-open {
    overflow: hidden;
}

/* ── Buttons ── */

.button,
button.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.925rem;
    font-weight: 600;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
}

.button:hover,
button.button:hover {
    background: var(--accent-hover);
    color: #fff;
}

.button-sm {
    padding: 0.6rem 1.2rem;
    font-size: 0.875rem;
}

.button-outline {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
}

.button-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.button-light {
    background: #fff;
    color: var(--accent);
}

.button-light:hover {
    background: var(--accent-light);
    color: var(--accent-hover);
}

.button-secondary {
    background: var(--accent-light);
    color: var(--accent);
}

.button-secondary:hover {
    background: #ddd9fc;
}

.button-full {
    width: 100%;
}

.text-link {
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    color: var(--accent);
}

.text-link:hover {
    color: var(--accent-hover);
}

/* ── Hero ── */

.hero-home {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(17, 17, 24, 0.88) 0%, rgba(17, 17, 24, 0.55) 60%, rgba(91, 92, 246, 0.35) 100%);
}

.hero-content {
    position: relative;
    z-index: 1;
    padding: 6rem 0;
    max-width: 720px;
    color: #fff;
}

.hero-content h1 {
    color: #fff;
}

.hero-lead {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 2rem;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-bottom: 1rem;
}

.eyebrow-light {
    color: rgba(255, 255, 255, 0.6);
}

/* ── Page hero (inner pages) ── */

.page-hero {
    position: relative;
    overflow: hidden;
    background: var(--dark);
    color: #fff;
    padding: 5rem 0 4rem;
}

.page-hero .hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.page-hero .hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 24, 0.72);
}

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

.page-hero-short {
    padding: 4rem 0 3rem;
}

.page-hero h1 {
    color: #fff;
    max-width: 680px;
}

.page-hero-lead {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.72);
    max-width: 560px;
    margin-bottom: 0;
}

.page-hero-lead a {
    color: rgba(255, 255, 255, 0.92);
}

/* ── Sections ── */

.section {
    padding: 5rem 0;
}

.section-muted {
    background: var(--surface);
}

.section-dark {
    background: var(--dark);
    color: #fff;
}

.section-dark h2,
.section-dark h3 {
    color: #fff;
}

.section-dark p {
    color: rgba(255, 255, 255, 0.72);
}

.section-header {
    max-width: 600px;
    margin-bottom: 3rem;
}

.section-header.centered {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.section-lead {
    color: var(--muted);
    font-size: 1.05rem;
}

.section-cta {
    margin-top: 2.5rem;
}

/* ── Stats ── */

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

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    text-align: center;
}

.stat strong {
    display: block;
    font-family: var(--font-sans);
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 0.35rem;
}

.stat span {
    font-size: 0.875rem;
    color: var(--muted);
}

/* ── Service cards (home) ── */

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

.service-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    transition: box-shadow 0.25s, transform 0.25s;
}

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

.service-icon {
    font-family: var(--font-sans);
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 1rem;
    opacity: 0.7;
}

.service-card h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.1rem;
}

.service-card p {
    color: var(--muted);
    font-size: 0.95rem;
    margin: 0;
}

/* ── Split layout ── */

.split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.split-image img {
    border-radius: var(--radius-lg);
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

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

.check-list li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.75rem;
    color: rgba(255, 255, 255, 0.82);
}

.check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
}

.check-list-light li {
    color: var(--text);
}

.text-link-light {
    color: rgba(255, 255, 255, 0.85);
}

.text-link-light:hover {
    color: #fff;
}

/* ── Work grid ── */

.work-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.25rem;
}

.work-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16/10;
}

.work-card-large {
    grid-row: span 2;
    aspect-ratio: auto;
}

.work-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

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

.work-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(17, 17, 24, 0.85) 0%, transparent 55%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    color: #fff;
}

.work-tag {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0.35rem;
}

.work-overlay h3 {
    color: #fff;
    font-size: 1.25rem;
    margin: 0;
}

.work-overlay p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
}

/* ── Post cards ── */

.post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.post-grid--cols-1 {
    grid-template-columns: 1fr;
}

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

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

.post-grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.post-card {
    background: var(--bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: box-shadow 0.25s;
}

.post-card:hover {
    box-shadow: var(--shadow);
}

.post-card-image {
    display: block;
    overflow: hidden;
}

.post-card-image img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    transition: transform 0.35s;
}

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

.post-card-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.post-card-body h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.post-card-body h3 a {
    color: var(--text);
    text-decoration: none;
}

.post-card-body h3 a:hover {
    color: var(--accent);
}

.post-card-body p {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.post-meta {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.read-more {
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--accent);
}

.post-taxonomy,
.blog-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.post-header .post-taxonomy {
    margin-bottom: 1rem;
}

.taxonomy-pill {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--accent-light);
    color: var(--accent);
    border: 1px solid transparent;
    transition: background 0.2s, border-color 0.2s;
}

.taxonomy-pill:hover {
    background: #ddd9fc;
    color: var(--accent-hover);
}

.taxonomy-pill.is-active {
    background: var(--accent);
    color: #fff;
}

.taxonomy-pill-category {
    background: #ede9fe;
    color: #5b21b6;
}

.taxonomy-pill-category:hover {
    background: #ddd6fe;
    color: #4c1d95;
}

.taxonomy-pill-category.is-active {
    background: #5b21b6;
    color: #fff;
}

.taxonomy-pill-tag {
    background: #f1f5f9;
    color: #475569;
}

.taxonomy-pill-tag:hover {
    background: #e2e8f0;
    color: #334155;
}

.taxonomy-pill-tag.is-active {
    background: #334155;
    color: #fff;
}

.blog-filters-section {
    padding: 1.5rem 0 0;
}

.blog-filters {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
}

.blog-filter-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 0.5rem;
}

.blog-filters--minimal {
    background: transparent;
    border: none;
    padding: 0;
    gap: 0.75rem;
}

.blog-filters--minimal .blog-filter-label {
    font-size: 0.7rem;
    margin-bottom: 0.35rem;
}

.blog-filters--tabs {
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.blog-filters--tabs .blog-filter-group {
    border-bottom: 1px solid var(--border);
}

.blog-filters--tabs .blog-filter-group:last-child {
    border-bottom: none;
}

.blog-filters--tabs .blog-filter-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 0.5rem;
    scrollbar-width: none;
}

.blog-filters--tabs .blog-filter-pills::-webkit-scrollbar {
    display: none;
}

.blog-filters--tabs .taxonomy-pill {
    border-radius: 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
}

.blog-filters--tabs .taxonomy-pill:hover {
    background: transparent;
    color: var(--accent);
}

.blog-filters--tabs .taxonomy-pill.is-active {
    background: transparent;
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.blog-filters--tabs .taxonomy-pill-category.is-active {
    background: transparent;
    color: #5b21b6;
    border-bottom-color: #5b21b6;
}

.blog-filters--tabs .taxonomy-pill-tag.is-active {
    background: transparent;
    color: var(--text);
    border-bottom-color: var(--text);
}

.blog-filters--compact {
    padding: 0.85rem 1rem;
}

.blog-filters--compact .blog-filter-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
}

.blog-filters--compact .taxonomy-pill {
    flex-shrink: 0;
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
}

.blog-filters--dropdown {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.blog-filter-dropdown {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: min(100%, 220px);
    flex: 1;
}

.blog-filter-select {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    font-size: 0.9rem;
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
}

.blog-filter-select:focus {
    outline: none;
    border-color: var(--accent);
}

/* ── Blog page ── */

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

.blog-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: box-shadow 0.25s;
}

.blog-card:hover {
    box-shadow: var(--shadow-lg);
}

.blog-card-featured {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
}

.blog-card-featured .blog-card-image img {
    height: 100%;
    aspect-ratio: unset;
    min-height: 320px;
}

.blog-card-image {
    display: block;
    overflow: hidden;
}

.blog-card-image img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    transition: transform 0.35s;
}

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

.blog-card-body {
    padding: 1.75rem 2rem;
}

.blog-card-body h2 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.blog-card-featured .blog-card-body h2 {
    font-size: 1.6rem;
}

.blog-card-body h2 a {
    color: var(--text);
    text-decoration: none;
}

.blog-card-body h2 a:hover {
    color: var(--accent);
}

.blog-card-body p {
    color: var(--muted);
    font-size: 0.95rem;
}

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

.blog-grid--grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.blog-grid--grid-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.blog-grid--grid-4 .blog-card-body {
    padding: 1.25rem 1.5rem;
}

.blog-grid--grid-4 .blog-card-body h2 {
    font-size: 1rem;
}

.blog-grid--stack {
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

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

.blog-grid--list .blog-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: stretch;
}

.blog-grid--list .blog-card-image img {
    height: 100%;
    min-height: 140px;
    aspect-ratio: unset;
}

.blog-grid--list .blog-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-grid--magazine {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.blog-card-hero {
    grid-column: 1 / -1;
}

.blog-card-hero .blog-card-image img {
    aspect-ratio: 21/9;
    max-height: 420px;
}

.blog-card-hero .blog-card-body h2 {
    font-size: 1.75rem;
}

.blog-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 2.5rem;
}

.blog-page-link,
.blog-page-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
}

.blog-page-link {
    color: var(--text);
    border: 1px solid var(--border);
    background: var(--surface);
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.blog-page-link:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.blog-page-current {
    background: var(--accent);
    color: #fff;
}

/* ── Single post ── */

.post-single {
    padding-bottom: 4rem;
}

.post-header {
    background: var(--dark);
    color: #fff;
    padding: 4rem 0 3rem;
}

.post-header h1 {
    color: #fff;
    max-width: 760px;
}

.post-header .post-meta a {
    color: rgba(255, 255, 255, 0.6);
}

.post-excerpt {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.15rem;
    max-width: 640px;
}

.post-featured-image {
    margin: -2rem 0 2.5rem;
}

.post-featured-image img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.photo-credit {
    margin-top: 0.65rem;
    font-size: 0.8rem;
    color: var(--muted);
    text-align: right;
}

.photo-credit a {
    color: var(--muted);
}

.post-content {
    max-width: 720px;
    font-size: 1.05rem;
    line-height: 1.75;
}

.post-content h1 {
    margin-top: 2.5rem;
    font-size: 2rem;
    line-height: 1.2;
}

.post-content h2 {
    margin-top: 2.5rem;
    font-size: 1.6rem;
    line-height: 1.25;
}

.post-content h3 {
    margin-top: 2rem;
    font-size: 1.25rem;
    line-height: 1.3;
}

.post-content p,
.post-content ul,
.post-content ol {
    margin-bottom: 1.25rem;
}

.post-content ul,
.post-content ol {
    padding-left: 1.4rem;
}

.post-content li {
    margin-bottom: 0.35rem;
}

.post-content a {
    font-weight: 500;
}

.post-content blockquote {
    margin: 1.75rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid #6366f1;
    background: rgba(99, 102, 241, 0.06);
    border-radius: 0 12px 12px 0;
    color: #312e81;
    font-style: italic;
}

.post-content pre,
.post-content pre.ql-syntax {
    margin: 1.5rem 0;
    padding: 1rem 1.15rem;
    background: #1e1e2e;
    color: #e8e8ef;
    border-radius: 12px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9rem;
    line-height: 1.55;
}

.post-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
    background: rgba(99, 102, 241, 0.08);
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
}

.post-content pre code {
    background: none;
    padding: 0;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1.5rem 0;
    box-shadow: var(--shadow);
}

.post-content .ql-align-center {
    text-align: center;
}

.post-content .ql-align-right {
    text-align: right;
}

.post-content .ql-align-justify {
    text-align: justify;
}

.post-content img.ql-align-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.post-content img.ql-align-right {
    display: block;
    margin-left: auto;
    margin-right: 0;
}

.post-footer {
    max-width: 720px;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.post-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.post-nav-spacer {
    display: block;
}

.post-nav-link {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    text-decoration: none;
    color: var(--text);
    box-shadow: var(--shadow);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.post-nav-link:hover {
    border-color: rgba(91, 92, 246, 0.35);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.post-nav-prev {
    text-align: left;
}

.post-nav-next {
    text-align: right;
    margin-left: auto;
}

.post-nav-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.post-nav-prev .post-nav-label::before {
    content: '← ';
}

.post-nav-next .post-nav-label::after {
    content: ' →';
}

.post-nav-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--accent);
}

.post-nav-link:hover .post-nav-title {
    color: var(--accent-hover);
}

.post-back-link {
    display: inline-block;
}

/* ── Services page ── */

.services-list {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.service-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
}

.service-block-reverse {
    direction: rtl;
}

.service-block-reverse > * {
    direction: ltr;
}

.service-block-image img {
    border-radius: var(--radius-lg);
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    box-shadow: var(--shadow);
}

.service-number {
    display: block;
    font-family: var(--font-sans);
    font-size: 3rem;
    color: var(--accent);
    opacity: 0.25;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.service-block h2 {
    margin-bottom: 1rem;
}

.service-block p {
    color: var(--muted);
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0;
}

.feature-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text);
    font-size: 0.95rem;
}

.feature-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--accent);
}

.service-price {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: var(--muted);
}

.service-price strong {
    color: var(--text);
    font-size: 1.1rem;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.process-step {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
}

.process-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--accent-light);
    color: var(--accent);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.process-step h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
}

.process-step p {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0;
}

/* ── Contact ── */

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 4rem;
    align-items: start;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contact-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
}

.contact-card h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 0.35rem;
}

.contact-card a {
    font-weight: 600;
    text-decoration: none;
}

.contact-hours {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0.25rem 0 0;
}

.contact-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: 0.5rem;
}

.contact-image img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.contact-form-wrap {
    min-width: 0;
}

.contact-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.content-access-section {
    padding: clamp(3rem, 8vw, 6rem) 0;
}

.content-access-gate {
    max-width: 28rem;
    margin: 0 auto;
}

.content-access-gate-title {
    font-family: var(--font-display, inherit);
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    margin-bottom: 0.75rem;
}

.content-access-gate-lead {
    color: var(--text-muted, #5c5c6f);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.content-access-gate-error {
    margin-bottom: 1rem;
}

.content-access-gate-form {
    margin-top: 0;
}

.contact-form-wrap .contact-notice {
    margin-bottom: 1rem;
}

.contact-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow);
}

.contact-form-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.25rem;
}

.form-group {
    margin-bottom: 1.25rem;
    min-width: 0;
}

.form-group--full {
    grid-column: 1 / -1;
}

.form-group--half {
    grid-column: span 1;
}

.form-group--checkbox {
    display: block;
}

.form-group--checkbox-group {
    border: 0;
    padding: 0;
    margin: 0 0 1.25rem;
    min-width: 0;
}

.form-group--checkbox-group legend {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--text);
    padding: 0;
}

.contact-checkbox-group-options {
    display: grid;
    gap: 0.75rem;
}

.contact-checkbox-group-options--vertical {
    grid-template-columns: 1fr;
}

.contact-checkbox-group-options--horizontal {
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

.contact-checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    margin: 0;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.contact-checkbox-option:hover {
    border-color: #cbd5e1;
}

.contact-checkbox-option:has(input:checked) {
    border-color: var(--accent);
    background: rgba(37, 99, 235, 0.06);
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.contact-checkbox-option:focus-within {
    outline: none;
    border-color: var(--accent);
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
}

.form-group .checkbox-label {
    display: inline-flex;
}

.checkbox-label input[type="checkbox"],
.form-group input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
    accent-color: var(--accent);
    flex-shrink: 0;
}

.checkbox-label span {
    line-height: 1.45;
}

.form-group > label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--text);
}

.form-required {
    color: var(--error);
    font-weight: 700;
    margin-left: 0.15em;
}

.form-group input:not([type="checkbox"]),
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    font-size: 0.95rem;
    background: var(--bg);
    transition: border-color 0.2s;
}

.form-group input:not([type="checkbox"]):focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}

/* ── CTA banner ── */

.cta-banner {
    background: var(--accent);
    padding: 4rem 0;
}

.cta-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.cta-banner h2 {
    color: #fff;
    margin-bottom: 0.5rem;
}

.cta-banner p {
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
    max-width: 480px;
}

/* ── Newsletter ── */

.newsletter-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.newsletter-form {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.newsletter-form input {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font: inherit;
    min-width: 240px;
    background: var(--bg);
}

.case-studies-count {
    margin: 0 0 1.25rem;
    color: var(--muted);
    font-size: 0.9rem;
}

.page-case-studies .taxonomy-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}


.site-footer {
    background: var(--dark);
    color: rgba(255, 255, 255, 0.65);
    margin-top: 0;
}

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

.footer-brand .site-logo {
    margin-bottom: 0.75rem;
}

.footer-brand .site-logo-image {
    filter: brightness(0) invert(1);
}

.footer-brand .site-logo-image--wordmark {
    width: auto;
    height: 56px;
    max-width: min(280px, 100%);
}

.footer-brand .logo-text {
    color: #fff;
}

.footer-brand p {
    font-size: 0.9rem;
    max-width: 320px;
    line-height: 1.55;
}

.footer-links h4,
.footer-locations h4,
.footer-contact h4 {
    margin: 0 0 0.85rem;
    color: rgba(255, 255, 255, 0.45);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-links,
.footer-locations,
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-links a,
.footer-locations a,
.footer-contact a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.footer-links a:hover,
.footer-locations a:hover,
.footer-contact a:hover {
    color: #fff;
}

.footer-contact p {
    font-size: 0.9rem;
    margin: 0;
}

.footer-address {
    max-width: 18rem;
    line-height: 1.5;
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.35rem;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.footer-social-link svg {
    width: 0.95rem;
    height: 0.95rem;
}

.footer-social-link:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 1.75rem;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.25rem 0;
}

.footer-bottom p {
    font-size: 0.85rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.4);
}

.footer-badges {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-left: auto;
}

.footer-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.footer-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

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

.footer-badge--google {
    padding: 0.35rem 0.55rem;
}

.footer-badge--google img {
    width: 132px;
    height: 47px;
}

.footer-badge--tbr {
    padding: 0.2rem;
}

.footer-badge--tbr img {
    width: 68px;
    height: 68px;
}

@media (max-width: 640px) {
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-badges {
        margin-left: 0;
    }

    .footer-badge--google img {
        width: 118px;
        height: 42px;
    }

    .footer-badge--tbr img {
        width: 60px;
        height: 60px;
    }
}

/* ── 404 ── */

.error-page {
    text-align: center;
    padding: 6rem 2rem;
}

.error-page h1 {
    font-size: 6rem;
    color: var(--accent);
    opacity: 0.3;
    margin-bottom: 0.5rem;
}

.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--muted);
}

/* ── Scroll reveal & motion ── */

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-up {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-52px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-right {
    opacity: 0;
    transform: translateX(52px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible,
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
    opacity: 1;
    transform: none;
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

@keyframes hero-fade-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.hero-animate > * {
    opacity: 0;
    animation: hero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-animate > *:nth-child(1) { animation-delay: 0.1s; }
.hero-animate > *:nth-child(2) { animation-delay: 0.22s; }
.hero-animate > *:nth-child(3) { animation-delay: 0.34s; }
.hero-animate > *:nth-child(4) { animation-delay: 0.46s; }
.hero-animate > *:nth-child(5) { animation-delay: 0.58s; }

.hero-bg {
    animation: hero-ken-burns 20s ease-in-out infinite alternate;
}

@keyframes hero-ken-burns {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-up,
    .reveal-left,
    .reveal-right {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero-animate > * {
        opacity: 1;
        animation: none;
    }

    .hero-bg {
        animation: none;
    }
}

/* ── Trust bar ── */

.trust-bar {
    padding: 2rem 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.trust-bar-label {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 1.25rem;
}

.trust-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem 3rem;
}

.trust-logo {
    font-family: var(--font-sans);
    font-size: 1.15rem;
    color: var(--muted);
    opacity: 0.55;
    transition: opacity 0.25s, color 0.25s;
}

.trust-logo:hover {
    opacity: 1;
    color: var(--text);
}

/* ── Testimonials ── */

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.testimonial-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s, transform 0.3s;
}

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

.testimonial-quote {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: 1.5rem;
    flex: 1;
}

.testimonial-quote::before {
    content: "\201C";
    display: block;
    font-family: var(--font-sans);
    font-size: 2.5rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0.4;
    margin-bottom: 0.5rem;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.testimonial-name {
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0;
}

.testimonial-role {
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0;
}

/* ── Values grid ── */

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.value-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
}

.value-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--accent-light);
}

.value-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    background: var(--accent-light);
    color: var(--accent);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.value-card h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.value-card p {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0;
}

/* ── Team grid ── */

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.team-card {
    text-align: center;
}

.team-photo {
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 1rem;
    aspect-ratio: 3/4;
    background: var(--border);
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

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

.team-card h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}

.team-role {
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.team-bio {
    font-size: 0.9rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.6;
}

/* ── Timeline ── */

.timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
}

.timeline::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: var(--border);
}

.timeline-item {
    text-align: center;
    padding: 0 1rem;
    position: relative;
}

.timeline-year {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}

.timeline-item h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.timeline-item p {
    font-size: 0.875rem;
    color: var(--muted);
    margin: 0;
}

/* ── FAQ accordion ── */

.faq-list {
    max-width: 760px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--border);
}

.faq-item:first-child {
    border-top: 1px solid var(--border);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    background: none;
    border: none;
    font: inherit;
    font-weight: 600;
    font-size: 1rem;
    text-align: left;
    color: var(--text);
    cursor: pointer;
    transition: color 0.2s;
}

.faq-question:hover {
    color: var(--accent);
}

.faq-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: transform 0.3s, background 0.2s;
}

.faq-item.is-open .faq-icon {
    transform: rotate(45deg);
    background: var(--accent);
    color: #fff;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
}

.faq-item.is-open .faq-answer {
    max-height: 500px;
    padding-bottom: 1.25rem;
}

.faq-answer p {
    color: var(--muted);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.7;
}

/* ── Premium homepage (IIAS) ── */

.page-home-premium {
    --premium-dark: #060d18;
    --premium-navy: #0c1a2e;
    --premium-blue: #1a6bff;
    --premium-blue-soft: rgba(26, 107, 255, 0.12);
    --premium-glow: rgba(26, 107, 255, 0.45);
}

/* Hero */
.hero-premium {
    position: relative;
    min-height: clamp(640px, 92vh, 920px);
    display: flex;
    align-items: center;
    padding: clamp(6rem, 10vw, 8rem) 0 clamp(4rem, 6vw, 5rem);
    overflow: hidden;
    background: var(--premium-dark);
    color: #fff;
}

.hero-premium-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.22;
}

.hero-premium-mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 15% 20%, rgba(26, 107, 255, 0.35), transparent 60%),
        radial-gradient(ellipse 50% 45% at 85% 15%, rgba(99, 102, 241, 0.2), transparent 55%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(14, 165, 233, 0.15), transparent 60%);
    pointer-events: none;
}

.hero-premium-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.hero-premium-copy h1 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2.6rem, 5.5vw, 4.5rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    color: #fff;
    margin-bottom: 1.35rem;
}

.hero-proof-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 1.75rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(8px);
}

.hero-stars {
    color: #fbbf24;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
}

.hero-lead-premium {
    font-size: clamp(1.05rem, 2vw, 1.22rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.72);
    max-width: 540px;
    margin: 0 0 2.25rem;
}

.hero-premium .hero-microcopy {
    color: rgba(255, 255, 255, 0.55);
    max-width: 480px;
    text-align: left;
    margin: 0;
}

.hero-premium .hero-cta-block {
    align-items: flex-start;
}

.button-glow {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 40px var(--premium-glow);
}

.button-glow:hover {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 16px 48px var(--premium-glow);
    transform: translateY(-2px);
}

.hero-premium-visual {
    position: relative;
}

.browser-frame {
    background: #0f172a;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45);
}

.browser-chrome {
    display: flex;
    gap: 6px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.browser-chrome span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}

.browser-chrome span:first-child { background: #ff5f57; }
.browser-chrome span:nth-child(2) { background: #febc2e; }
.browser-chrome span:nth-child(3) { background: #28c840; }

.browser-frame img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    object-position: top;
}

.hero-float-card {
    position: absolute;
    padding: 0.9rem 1.1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--text);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(12px);
}

.hero-float-card strong {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--accent);
}

.hero-float-card span {
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 600;
}

.hero-float-card-stats {
    left: -1.5rem;
    bottom: 18%;
}

.hero-float-card-rating {
    right: -0.5rem;
    top: 12%;
}

/* Trust bar */
.trust-premium {
    padding: 2.25rem 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.trust-premium-inner {
    display: grid;
    gap: 1.5rem;
}

.trust-premium-creds {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.trust-premium-creds p {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
}

.trust-google-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--border);
    font-size: 0.78rem;
    font-weight: 700;
    color: #4285f4;
    box-shadow: var(--shadow);
}

.logo-marquee-premium .trust-logo {
    opacity: 0.5;
    font-size: 1.05rem;
}

/* Stats band */
.stats-premium {
    padding: clamp(3.5rem, 6vw, 5rem) 0;
    background: linear-gradient(135deg, var(--premium-navy) 0%, var(--premium-dark) 100%);
}

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

.stat-premium {
    text-align: center;
    padding: 2rem 1rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.stat-premium strong {
    display: block;
    font-family: var(--font-sans);
    font-size: clamp(2.6rem, 5vw, 3.75rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, #fff 0%, #93c5fd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-premium span {
    font-size: 0.92rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    text-transform: lowercase;
}

/* Section headers */
.section-head-premium {
    max-width: 760px;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head-premium.centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-head-premium h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.035em;
    line-height: 1.1;
}

/* Portfolio bento */
.section-work-premium {
    padding: clamp(5rem, 9vw, 8rem) 0;
    background: var(--bg);
}

.portfolio-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 1.5rem;
}

.portfolio-bento-card {
    border-radius: 20px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.portfolio-bento-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.12);
}

.portfolio-bento-featured {
    grid-column: span 1;
}

.portfolio-bento-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.portfolio-bento-devices {
    position: relative;
    padding: 1.25rem 1.25rem 2.5rem;
    background: linear-gradient(180deg, #eef2f7 0%, #f8fafc 100%);
}

.browser-frame-sm img {
    aspect-ratio: 16/10;
}

.portfolio-bento-phone {
    position: absolute;
    right: 1rem;
    bottom: 0.5rem;
    width: 26%;
    border-radius: 14px;
    overflow: hidden;
    border: 3px solid var(--surface);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}

.portfolio-bento-phone img {
    width: 100%;
    aspect-ratio: 9/19;
    object-fit: cover;
    object-position: top;
}

.portfolio-bento-meta {
    padding: 1.35rem 1.5rem 1.5rem;
}

.portfolio-visit {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.25s, transform 0.25s;
}

.portfolio-bento-card:hover .portfolio-visit {
    opacity: 1;
    transform: translateY(0);
}

/* Results */
.section-results-premium {
    padding: clamp(5rem, 9vw, 8rem) 0;
    background: var(--premium-dark);
    color: #fff;
}

.section-head-premium-light h2 {
    color: #fff;
}

.results-premium-layout {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.result-feature {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
}

.result-feature-visual {
    position: relative;
}

.result-feature-visual img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
}

.result-feature-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.result-feature-copy {
    padding: 1.75rem 2rem 2rem;
}

.result-feature-copy h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

.result-feature-copy p {
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

.results-premium-side {
    display: grid;
    gap: 1rem;
}

.result-side-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.result-side-card img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 10px;
}

.result-side-copy h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    margin: 0.15rem 0;
}

.result-side-copy p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.result-quote-premium {
    margin: 0;
    padding: 2rem;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(26, 107, 255, 0.25), rgba(99, 102, 241, 0.15));
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.result-quote-premium .result-quote-text {
    font-family: var(--font-sans);
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    line-height: 1.35;
    margin: 0 0 1rem;
}

.result-quote-premium .result-quote-name {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* Problem */
.problem-premium {
    position: relative;
    padding: clamp(5rem, 10vw, 8rem) 0;
    overflow: hidden;
}

.problem-premium-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.problem-premium-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(6, 13, 24, 0.92) 0%, rgba(12, 26, 46, 0.85) 100%);
}

.problem-premium-inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    text-align: center;
    margin: 0 auto;
    color: #fff;
}

.problem-premium-inner h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 3rem);
    letter-spacing: -0.035em;
    margin-bottom: 1.25rem;
}

.problem-lead {
    font-size: 1.15rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

/* Services */
.services-premium {
    padding: clamp(5rem, 9vw, 8rem) 0;
    background: var(--bg);
}

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

.service-premium-card {
    border-radius: 20px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: transform 0.3s, box-shadow 0.3s;
}

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

.service-premium-visual {
    position: relative;
    overflow: hidden;
}

.service-premium-visual img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.service-premium-card:hover .service-premium-visual img {
    transform: scale(1.04);
}

.service-premium-num {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--accent);
}

.service-premium-copy {
    padding: 1.75rem;
}

.service-premium-copy h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.35rem;
    margin-bottom: 0.5rem;
}

.service-premium-copy p {
    color: var(--muted);
    margin-bottom: 1rem;
}

/* Guide */
.guide-premium {
    padding: clamp(5rem, 9vw, 8rem) 0;
    background: var(--premium-navy);
    color: #fff;
}

.guide-premium-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.guide-premium-copy h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.9rem, 3.5vw, 2.75rem);
    letter-spacing: -0.03em;
    margin-bottom: 1.25rem;
}

.guide-lead {
    font-size: 1.1rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 1.75rem;
}

.guide-premium-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 2rem;
}

.guide-premium-badges span {
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.8rem;
    font-weight: 600;
}

.guide-premium-visual img {
    width: 100%;
    border-radius: 20px;
    aspect-ratio: 4/5;
    object-fit: cover;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}

.button-outline-light {
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.button-outline-light:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* Reviews marquee */
.reviews-premium {
    padding: clamp(4rem, 8vw, 6rem) 0;
    background: var(--surface);
    overflow: hidden;
}

.reviews-marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    margin-top: 2rem;
}

.reviews-marquee-track {
    display: flex;
    gap: 1.25rem;
    width: max-content;
    animation: reviews-marquee 45s linear infinite;
}

@keyframes reviews-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.review-premium-card {
    flex: 0 0 360px;
    margin: 0;
    padding: 2rem;
    border-radius: 18px;
    background: var(--bg);
    border: 1px solid var(--border);
}

.review-stars {
    display: block;
    color: #fbbf24;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}

.review-premium-card p {
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 1.25rem;
}

/* Process */
.process-premium {
    padding: clamp(5rem, 9vw, 8rem) 0;
    background: var(--bg);
}

.process-premium-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    position: relative;
}

.process-premium-grid::before {
    content: '';
    position: absolute;
    top: 2.2rem;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    z-index: 0;
}

.process-premium-step {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 1.5rem 1rem;
}

.process-premium-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 8px 24px var(--premium-glow);
}

.process-premium-step h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.process-premium-step p {
    font-size: 0.92rem;
    color: var(--muted);
    margin: 0;
}

.process-premium-image {
    margin-top: 3rem;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.process-premium-image img {
    width: 100%;
    aspect-ratio: 21/9;
    object-fit: cover;
}

/* Final CTA */
.cta-premium {
    position: relative;
    padding: clamp(5rem, 10vw, 8rem) 0;
    background: var(--premium-dark);
    overflow: hidden;
}

.cta-premium-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 50% 100%, rgba(26, 107, 255, 0.35), transparent 70%),
        radial-gradient(ellipse 40% 50% at 20% 30%, rgba(99, 102, 241, 0.15), transparent 60%);
    pointer-events: none;
}

.cta-premium-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
}

.cta-premium-inner h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    letter-spacing: -0.035em;
    max-width: 700px;
    margin: 0 auto 1rem;
}

.cta-premium-inner .cta-microcopy {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 2rem;
}

/* Shared marquee (trust) */
.logo-marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logo-marquee-track {
    display: flex;
    gap: 4rem;
    width: max-content;
    animation: logo-marquee 28s linear infinite;
}

@keyframes logo-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.logo-marquee .trust-logo {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
    white-space: nowrap;
}

.portfolio-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.result-stat {
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #93c5fd;
    margin: 0 0 0.35rem;
}

@media (max-width: 1100px) {
    .hero-premium-grid,
    .guide-premium-grid,
    .results-premium-layout {
        grid-template-columns: 1fr;
    }

    .hero-premium-visual {
        max-width: 560px;
        margin: 0 auto;
    }

    .hero-float-card-stats { left: 0; }
    .hero-float-card-rating { right: 0; }
}

@media (max-width: 900px) {
    .portfolio-bento,
    .services-premium-grid,
    .stats-premium-grid,
    .process-premium-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-premium-grid::before {
        display: none;
    }
}

@media (max-width: 640px) {
    .portfolio-bento,
    .services-premium-grid,
    .stats-premium-grid,
    .process-premium-grid {
        grid-template-columns: 1fr;
    }

    .result-side-card {
        grid-template-columns: 1fr;
    }

    .hero-premium .hero-cta-block {
        align-items: stretch;
    }

    .hero-premium .hero-microcopy {
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo-marquee-track,
    .reviews-marquee-track {
        animation: none;
    }
}

/* IIAS brand guide v2 overrides: Rand/Vignelli/Rams, navy-led, one gold accent. */
.page-home-premium {
    --brand-navy: #0d3057;
    --brand-aubergine: #2e1847;
    --brand-emerald: #123d2e;
    --brand-gold: #e2b94a;
    --brand-cream: #f4efe3;
    --brand-cloud: #f5f7fa;
    --brand-ink: #111827;
    --brand-muted: #6b7280;
    --premium-dark: var(--brand-navy);
    --premium-navy: var(--brand-navy);
    --premium-blue: var(--brand-gold);
    --premium-blue-soft: rgba(226, 185, 74, 0.14);
    --premium-glow: rgba(226, 185, 74, 0.28);
    background: var(--brand-cloud);
}

.page-home-premium .site-header {
    background: rgba(245, 247, 250, 0.9);
    border-bottom-color: rgba(13, 48, 87, 0.1);
}

.page-home-premium .site-nav a {
    color: rgba(13, 48, 87, 0.82);
}

.page-home-premium .site-nav a:hover,
.page-home-premium .site-nav a.is-active {
    color: var(--brand-navy);
}

.page-home-premium .button {
    background: var(--brand-gold);
    color: var(--brand-navy);
    border-color: var(--brand-gold);
    font-weight: 800;
}

.page-home-premium .button:hover {
    background: #d7aa34;
    border-color: #d7aa34;
    color: var(--brand-navy);
}

.page-home-premium .button-outline,
.page-home-premium .button-outline-light {
    background: transparent;
    color: inherit;
}

.hero-premium {
    min-height: clamp(680px, 94vh, 940px);
    background:
        linear-gradient(135deg, rgba(13, 48, 87, 0.98) 0%, rgba(13, 48, 87, 0.94) 54%, rgba(46, 24, 71, 0.96) 100%);
}

.hero-premium-bg {
    mix-blend-mode: luminosity;
    opacity: 0.12;
    filter: saturate(0.6) contrast(1.12);
}

.hero-premium-mesh {
    background:
        radial-gradient(ellipse 46% 40% at 82% 18%, rgba(226, 185, 74, 0.2), transparent 60%),
        linear-gradient(90deg, rgba(13, 48, 87, 0.15) 0 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px);
    background-size: auto, 72px 72px, 72px 72px;
}

.hero-premium::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    background: linear-gradient(90deg, var(--brand-navy), var(--brand-gold), var(--brand-emerald));
}

.hero-proof-pill {
    border-radius: 10px;
    background: rgba(244, 239, 227, 0.08);
    border-color: rgba(244, 239, 227, 0.18);
    color: rgba(244, 239, 227, 0.82);
}

.hero-stars,
.review-stars {
    color: var(--brand-gold);
}

.hero-brand-kicker {
    margin: 0 0 1rem;
    color: var(--brand-gold);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.hero-premium-copy h1 {
    max-width: 780px;
    font-size: clamp(2.7rem, 5.4vw, 5rem);
    letter-spacing: -0.055em;
    color: #fffdf7;
}

.hero-lead-premium {
    color: rgba(244, 239, 227, 0.76);
}

.hero-premium .hero-microcopy {
    color: rgba(244, 239, 227, 0.58);
}

.button-glow,
.button-glow:hover {
    box-shadow: 0 0 0 1px rgba(244, 239, 227, 0.18), 0 16px 45px rgba(226, 185, 74, 0.24);
}

.browser-frame {
    border-radius: 8px;
    background: #071f39;
    border-color: rgba(244, 239, 227, 0.18);
    box-shadow: 0 42px 86px rgba(0, 0, 0, 0.38);
}

.browser-chrome {
    background: rgba(244, 239, 227, 0.06);
    border-bottom-color: rgba(244, 239, 227, 0.1);
}

.browser-chrome span {
    background: rgba(244, 239, 227, 0.35) !important;
}

.hero-float-card {
    border-radius: 8px;
    background: rgba(244, 239, 227, 0.96);
    border-left: 4px solid var(--brand-gold);
}

.hero-float-card strong {
    color: var(--brand-navy);
}

.trust-premium,
.reviews-premium {
    background: var(--brand-cream);
}

.trust-premium {
    border-bottom-color: rgba(13, 48, 87, 0.12);
}

.trust-google-badge {
    color: var(--brand-navy);
    background: #fffdf8;
    border-color: rgba(13, 48, 87, 0.12);
    box-shadow: none;
}

.trust-premium-creds p,
.logo-marquee-premium .trust-logo {
    color: rgba(13, 48, 87, 0.72);
}

.stats-premium,
.section-results-premium,
.cta-premium {
    background: var(--brand-navy);
}

.stat-premium {
    border-radius: 8px;
    background: rgba(244, 239, 227, 0.055);
    border-color: rgba(244, 239, 227, 0.12);
}

.stat-premium strong {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--brand-gold);
}

.stat-premium span {
    color: rgba(244, 239, 227, 0.7);
}

.section-work-premium,
.services-premium,
.process-premium {
    background: var(--brand-cloud);
}

.section-head-premium .eyebrow,
.portfolio-tag {
    color: var(--brand-emerald);
}

.section-head-premium h2,
.service-premium-copy h3,
.process-premium-step h3,
.portfolio-bento-meta h3 {
    color: var(--brand-ink);
}

.section-head-premium h2 {
    letter-spacing: -0.045em;
}

.portfolio-bento-card,
.service-premium-card,
.review-premium-card {
    border-radius: 8px;
    border-color: rgba(13, 48, 87, 0.1);
    box-shadow: 0 18px 40px rgba(13, 48, 87, 0.06);
}

.portfolio-bento-card:hover,
.service-premium-card:hover {
    box-shadow: 0 30px 70px rgba(13, 48, 87, 0.14);
}

.portfolio-bento-devices {
    background:
        linear-gradient(135deg, rgba(13, 48, 87, 0.06), rgba(226, 185, 74, 0.14)),
        var(--brand-cream);
}

.portfolio-visit,
.text-link {
    color: var(--brand-emerald);
}

.result-feature,
.result-side-card,
.result-quote-premium {
    border-radius: 8px;
    background: rgba(244, 239, 227, 0.055);
    border-color: rgba(244, 239, 227, 0.12);
}

.result-feature-badge {
    border-radius: 6px;
    background: var(--brand-gold);
    color: var(--brand-navy);
}

.result-stat {
    color: var(--brand-gold);
}

.result-quote-premium {
    background: linear-gradient(135deg, rgba(226, 185, 74, 0.18), rgba(18, 61, 46, 0.28));
}

.problem-premium-overlay {
    background: linear-gradient(135deg, rgba(13, 48, 87, 0.92) 0%, rgba(18, 61, 46, 0.84) 100%);
}

.service-premium-num,
.process-premium-num {
    border-radius: 6px;
    background: var(--brand-gold);
    color: var(--brand-navy);
    box-shadow: none;
}

.guide-premium {
    background:
        linear-gradient(135deg, rgba(13, 48, 87, 0.97), rgba(18, 61, 46, 0.95)),
        var(--brand-navy);
}

.guide-premium-badges span {
    border-radius: 6px;
    color: var(--brand-cream);
    border-color: rgba(244, 239, 227, 0.18);
}

.guide-premium-visual img,
.process-premium-image {
    border-radius: 8px;
}

.review-premium-card {
    background: #fffdf8;
    border-left: 4px solid var(--brand-gold);
}

.process-premium-grid::before {
    background: linear-gradient(90deg, transparent, rgba(13, 48, 87, 0.18), transparent);
}

.cta-premium-glow {
    background:
        radial-gradient(ellipse 52% 80% at 50% 100%, rgba(226, 185, 74, 0.16), transparent 70%),
        radial-gradient(ellipse 38% 48% at 18% 24%, rgba(18, 61, 46, 0.35), transparent 62%);
}

.cta-premium-inner h2 {
    color: #fffdf8;
}

.cta-premium-inner .cta-microcopy {
    color: rgba(244, 239, 227, 0.68);
}

/* Legacy modern homepage aliases (kept for admin preview compatibility) */
.page-home-modern .hero-modern,
.page-home-premium .hero-modern { display: none; }

/* Homepage polish pass: stronger CTAs, refined motion, more deliberate hierarchy. */
.hero-premium-mesh {
    animation: hero-grid-drift 18s ease-in-out infinite alternate;
}

@keyframes hero-grid-drift {
    from { transform: translate3d(0, 0, 0); opacity: 0.88; }
    to { transform: translate3d(-18px, 12px, 0); opacity: 1; }
}

.hero-premium-copy {
    animation: hero-copy-rise 0.9s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

@keyframes hero-copy-rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-premium-visual {
    animation: hero-device-float 7s ease-in-out infinite;
    transform-origin: 50% 50%;
}

@keyframes hero-device-float {
    0%, 100% { transform: translateY(0) rotate(-0.6deg); }
    50% { transform: translateY(-12px) rotate(0.4deg); }
}

.hero-float-card {
    animation: proof-card-float 6s ease-in-out infinite;
}

.hero-float-card-rating {
    animation-delay: -2.2s;
}

@keyframes proof-card-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.hero-cta-upgraded {
    gap: 0.9rem;
}

.hero-cta-actions,
.cta-premium-actions {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.button-growth-review {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12rem;
    min-width: 230px;
    overflow: hidden;
    isolation: isolate;
}

.button-growth-review::after {
    content: '';
    position: absolute;
    inset: -120% auto -120% -40%;
    width: 42%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.48), transparent);
    animation: cta-shine 4.8s ease-in-out infinite;
    z-index: -1;
}

@keyframes cta-shine {
    0%, 42% { left: -45%; }
    62%, 100% { left: 130%; }
}

.button-growth-review span {
    line-height: 1.1;
}

.button-growth-review small {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.72;
}

.button-see-work {
    border-color: rgba(244, 239, 227, 0.32);
    color: var(--brand-cream);
    background: rgba(244, 239, 227, 0.05);
}

.button-see-work:hover {
    background: rgba(244, 239, 227, 0.1);
    border-color: rgba(244, 239, 227, 0.48);
}

.hero-cta-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.hero-cta-proof span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.34rem 0.58rem;
    border-radius: 6px;
    background: rgba(244, 239, 227, 0.08);
    border: 1px solid rgba(244, 239, 227, 0.12);
    color: rgba(244, 239, 227, 0.72);
    font-size: 0.72rem;
    font-weight: 800;
}

.hero-cta-proof span::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-gold);
}

.browser-frame-hero::after,
.portfolio-bento-devices::after,
.service-premium-visual::after,
.result-feature-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.08) 45%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.9s ease;
}

.browser-frame-hero,
.portfolio-bento-devices,
.service-premium-visual,
.result-feature-visual {
    position: relative;
}

.hero-premium-visual:hover .browser-frame-hero::after,
.portfolio-bento-card:hover .portfolio-bento-devices::after,
.service-premium-card:hover .service-premium-visual::after,
.result-feature:hover .result-feature-visual::after {
    transform: translateX(120%);
}

.portfolio-bento-card {
    transform-origin: 50% 70%;
}

.portfolio-bento-card:hover {
    transform: translateY(-8px) scale(1.012);
}

.portfolio-bento-card:hover .portfolio-bento-phone {
    transform: translateY(-6px) rotate(1.5deg);
}

.portfolio-bento-phone {
    transition: transform 0.35s ease;
}

.stat-premium {
    position: relative;
    overflow: hidden;
}

.stat-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--brand-gold), transparent);
    opacity: 0.7;
}

.service-premium-card {
    position: relative;
}

.service-premium-card::after {
    content: '';
    position: absolute;
    inset: auto 1.5rem 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand-gold), var(--brand-emerald));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.service-premium-card:hover::after {
    transform: scaleX(1);
}

.review-premium-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-premium-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(13, 48, 87, 0.12);
}

.process-premium-step {
    transition: transform 0.3s ease;
}

.process-premium-step:hover {
    transform: translateY(-5px);
}

.cta-premium-actions {
    justify-content: center;
    flex-direction: column;
}

.cta-premium-actions p {
    max-width: 520px;
    margin: 0;
    color: rgba(244, 239, 227, 0.68);
    font-size: 0.95rem;
}

.cta-premium .button-growth-review {
    align-items: center;
}

@media (max-width: 640px) {
    .hero-cta-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .button-growth-review {
        width: 100%;
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-premium-mesh,
    .hero-premium-copy,
    .hero-premium-visual,
    .hero-float-card,
    .button-growth-review::after {
        animation: none;
    }
}

/* IIAS homepage reference rebuild: white dashboard design. */
.page-home-reference {
    --ref-navy: #0d3057;
    --ref-blue: #173f73;
    --ref-purple: #2e1847;
    --ref-emerald: #0d6049;
    --ref-gold: #e7b83f;
    --ref-teal: #14b8a6;
    --ref-cyan: #22d3ee;
    --ref-violet: #8b5cf6;
    --ref-coral: #f97316;
    --ref-midnight: #061528;
    --ref-cream: #fbf8ef;
    --ref-bg: #f6f8fb;
    --ref-card: #ffffff;
    --ref-text: #10233d;
    --ref-muted: #5f6f83;
    --ref-border: #e5ebf2;
    --ref-shadow: 0 16px 42px rgba(16, 35, 61, 0.08);
    --ref-glow: rgba(13, 48, 87, 0.12);
    --ref-gradient-border: linear-gradient(135deg, var(--ref-cyan), var(--ref-violet), var(--ref-teal), var(--ref-gold));
    --ref-body: 1.0625rem;
    --ref-s: 1.0416667;
    background: var(--ref-bg);
    color: var(--ref-text);
    font-size: var(--ref-body);
    line-height: 1.65;
}

.page-home-reference .site-topbar {
    background: var(--ref-navy);
    font-size: calc(0.8125rem * var(--ref-s));
}

.page-home-reference .site-header {
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(13, 48, 87, 0.08);
    backdrop-filter: blur(16px);
}

.page-home-reference .header-inner {
    padding: 0.85rem 0;
}

.page-home-reference .site-logo-image--wordmark {
    width: auto;
    height: clamp(48px, 5.5vw, 80px);
    max-width: 100%;
}

.page-home-reference .site-logo-image:not(.site-logo-image--wordmark) {
    width: 32px;
    height: 32px;
}

.page-home-reference .logo-text {
    color: var(--ref-navy);
    font-size: calc(0.86rem * var(--ref-s));
}

.page-home-reference .site-nav a,
.page-home-reference .site-nav--desktop .nav-item--has-children > a {
    color: var(--ref-text);
    font-size: clamp(0.8125rem, 0.35vw + 0.72rem, 1.0625rem);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.page-home-reference .site-nav--desktop .nav-submenu a,
.page-home-reference .site-nav--desktop .nav-submenu-link {
    font-size: calc(0.9375rem * var(--ref-s));
    font-weight: 600;
}

.page-home-reference .site-nav-mobile-links a,
.page-home-reference .site-nav-mobile-links .nav-submenu-link {
    font-size: 1.0625rem;
    font-weight: 700;
}

.page-home-reference .site-nav a:hover,
.page-home-reference .site-nav a.is-active {
    color: var(--ref-navy);
}

.page-home-reference .header-cta,
.page-home-reference .header-cta--mobile {
    font-weight: 800;
}

.page-home-reference .header-cta--desktop {
    font-size: clamp(0.75rem, 0.35vw + 0.68rem, calc(0.9375rem * var(--ref-s)));
    padding: clamp(0.5rem, 0.35vw + 0.38rem, 0.72rem) clamp(0.75rem, 0.9vw + 0.35rem, 1.15rem);
}

.page-home-reference .header-cta--mobile {
    font-size: calc(0.9375rem * var(--ref-s));
    padding: 0.72rem 1.15rem;
}

.page-home-reference .header-cta {
    border-radius: 999px;
    background: var(--ref-gold);
    border-color: var(--ref-gold);
    color: var(--ref-navy);
    box-shadow: 0 10px 24px rgba(231, 184, 63, 0.24);
}

.page-home-reference .site-nav--desktop {
    gap: clamp(0.75rem, 1.4vw, 2rem);
}

.page-home-reference .site-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 0;
    color: var(--ref-muted);
    font-size: calc(0.9rem * var(--ref-s));
    background:
        radial-gradient(ellipse 90% 70% at 12% -10%, rgba(231, 184, 63, 0.18), transparent 58%),
        radial-gradient(ellipse 80% 60% at 92% 110%, rgba(13, 48, 87, 0.08), transparent 52%),
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.95), transparent 42%),
        linear-gradient(180deg, #ffffff 0%, var(--ref-cream) 42%, #f2ebdc 100%);
    border-top: 1px solid rgba(13, 48, 87, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 -18px 48px rgba(13, 48, 87, 0.06);
}

.page-home-reference .site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(13, 48, 87, 0.04) 1px, transparent 1px),
        linear-gradient(0deg, rgba(13, 48, 87, 0.03) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 72%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.page-home-reference .site-footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--ref-navy) 0%,
        var(--ref-blue) 18%,
        var(--ref-gold) 50%,
        var(--ref-blue) 82%,
        var(--ref-navy) 100%
    );
    z-index: 2;
}

.page-home-reference .footer-grid,
.page-home-reference .footer-bottom {
    position: relative;
    z-index: 1;
}

.page-home-reference .footer-grid {
    gap: clamp(2rem, 4vw, 3.5rem);
    padding: clamp(3.25rem, 5.5vw, 4.5rem) 0 clamp(2.5rem, 4vw, 3.25rem);
}

.page-home-reference .footer-brand .site-logo-image {
    filter: none;
}

.page-home-reference .footer-brand .logo-text {
    color: var(--ref-navy);
}

.page-home-reference .footer-brand p {
    color: var(--ref-muted);
    max-width: 340px;
    line-height: 1.65;
}

.page-home-reference .site-footer h4 {
    font-size: calc(0.72rem * var(--ref-s));
    color: var(--ref-navy);
    letter-spacing: 0.12em;
}

.page-home-reference .site-footer a,
.page-home-reference .site-footer p {
    font-size: calc(0.9rem * var(--ref-s));
    color: var(--ref-muted);
}

.page-home-reference .site-footer a {
    color: var(--ref-navy);
    font-weight: 600;
}

.page-home-reference .site-footer a:hover {
    color: var(--ref-blue);
}

.page-home-reference .footer-contact a {
    font-size: calc(0.85rem * var(--ref-s));
}

.page-home-reference .footer-address {
    color: var(--ref-muted);
}

.page-home-reference .footer-social-link {
    border-color: rgba(13, 48, 87, 0.12);
    background: rgba(255, 255, 255, 0.72);
    color: var(--ref-navy);
    box-shadow: 0 8px 18px rgba(13, 48, 87, 0.06);
}

.page-home-reference .footer-social-link:hover {
    color: var(--ref-navy);
    border-color: rgba(231, 184, 63, 0.65);
    background: rgba(231, 184, 63, 0.18);
}

.page-home-reference .footer-bottom {
    border-top: 1px solid rgba(13, 48, 87, 0.08);
    padding: 1.35rem 0 1.65rem;
}

.page-home-reference .footer-bottom p {
    color: rgba(13, 48, 87, 0.52);
    font-size: calc(0.82rem * var(--ref-s));
}

.page-home-reference .footer-badge {
    background: #fff;
    border: 1px solid rgba(13, 48, 87, 0.1);
    box-shadow: 0 10px 22px rgba(13, 48, 87, 0.08);
}

.page-home-reference .footer-badge:hover {
    border-color: rgba(231, 184, 63, 0.55);
    box-shadow: 0 14px 28px rgba(13, 48, 87, 0.12);
}

/* Section rhythm: alternate soft bands so the page breathes without loud blocks. */

.home-ref-hero {
    position: relative;
    min-height: min(90vh, 920px);
    display: flex;
    align-items: center;
    padding: clamp(3rem, 6vw, 5.75rem) 0 2rem;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(34, 211, 238, 0.22), transparent 50%),
        radial-gradient(ellipse 70% 55% at 90% 15%, rgba(139, 92, 246, 0.2), transparent 48%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(20, 184, 166, 0.18), transparent 55%),
        linear-gradient(155deg, var(--ref-midnight) 0%, var(--ref-navy) 38%, #1a3a6e 100%);
}

.home-ref-hero--roomy {
    padding-top: clamp(2.5rem, 5vw, 4.5rem);
    padding-bottom: clamp(2rem, 4vw, 3.25rem);
}

.home-ref-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 82%);
    pointer-events: none;
}

.home-ref-hero::after {
    content: '';
    position: absolute;
    right: -8vw;
    top: -10rem;
    width: min(52vw, 720px);
    height: min(52vw, 720px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.18), rgba(139, 92, 246, 0.12) 45%, transparent 70%);
    filter: blur(4px);
    pointer-events: none;
}

.home-ref-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    filter: saturate(1.05) contrast(1.05);
    mix-blend-mode: soft-light;
    pointer-events: none;
}

.home-ref-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(300px, 0.85fr) minmax(420px, 1.15fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.home-ref-hero-copy h1 {
    font-family: var(--font-heading);
    font-weight: 900;
    max-width: 590px;
    margin: 0 0 1.1rem;
    color: #fff;
    font-size: clamp(2.15rem, 4.8vw, 4.15rem);
    line-height: 1.02;
    letter-spacing: -0.06em;
}

.home-ref-hero .home-ref-eyebrow {
    color: rgba(255, 255, 255, 0.78);
}

.home-ref-hero .home-ref-lead {
    color: rgba(255, 255, 255, 0.86);
}

.home-ref-lead {
    max-width: 560px;
    margin: 0 0 1.45rem;
    color: var(--ref-muted);
    font-size: clamp(calc(1.06rem * var(--ref-s)), 1.55vw, calc(1.2rem * var(--ref-s)));
    line-height: 1.7;
}

.home-ref-hero .home-ref-link {
    color: rgba(255, 255, 255, 0.92);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    padding: 0.72rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.home-ref-hero .home-ref-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.5);
}

.home-ref-hero .home-ref-microcopy {
    color: rgba(255, 255, 255, 0.62);
}

.home-ref-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--ref-navy);
    font-size: calc(0.82rem * var(--ref-s));
    font-weight: 900;
    text-decoration: none;
}

.home-ref-microcopy {
    max-width: 520px;
    margin: 0;
    color: #6d7b8d;
    font-size: calc(0.92rem * var(--ref-s));
    line-height: 1.6;
}

.home-ref-actions {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.home-ref-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.82rem 1.1rem;
    border-radius: 8px;
    background: var(--ref-gold);
    border: 1px solid var(--ref-gold);
    color: var(--ref-navy);
    font-size: calc(0.82rem * var(--ref-s));
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(231, 184, 63, 0.22);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.home-ref-button:hover {
    color: var(--ref-navy);
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(231, 184, 63, 0.3);
}

.home-ref-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--ref-navy);
    font-size: calc(0.82rem * var(--ref-s));
    font-weight: 900;
    text-decoration: none;
}

.home-ref-microcopy {
    max-width: 520px;
    margin: 0;
    color: #6d7b8d;
    font-size: calc(0.92rem * var(--ref-s));
    line-height: 1.6;
}

.home-ref-hero-visual {
    position: relative;
    min-height: clamp(360px, 46vw, 560px);
    isolation: isolate;
}

.home-ref-hero-visual--simple .home-ref-card-rankings,
.home-ref-hero-visual--simple .home-ref-card-chart {
    display: none;
}

.home-ref-hero-visual--simple .home-ref-card-ads {
    right: 4%;
    bottom: 6%;
}

.home-ref-hero-visual::before {
    content: '';
    position: absolute;
    inset: 10% 0 6% 10%;
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(34, 211, 238, 0.14), rgba(139, 92, 246, 0.12)),
        rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transform: rotate(-1.5deg);
    z-index: 0;
}

.home-ref-browser {
    position: absolute;
    inset: 9% 8% auto 8%;
    z-index: 2;
    border-radius: 16px;
    overflow: hidden;
    border: 3px solid transparent;
    background:
        linear-gradient(#0c223c, #0c223c) padding-box,
        var(--ref-gradient-border) border-box;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
    animation: ref-float 7s ease-in-out infinite;
}

.home-ref-browser-bar {
    display: flex;
    gap: 5px;
    padding: 9px 12px;
    background: #0a192d;
}

.home-ref-browser-bar span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
}

.home-ref-browser img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top;
}

.home-ref-card {
    position: absolute;
    z-index: 5;
    padding: 1rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
    animation: ref-card-in 0.75s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.home-ref-card p {
    margin: 0 0 0.65rem;
    color: var(--ref-text);
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 900;
}

.home-ref-card-rankings {
    top: 0;
    right: 2%;
    width: min(210px, 34%);
}

.home-ref-card-rankings span {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.28rem 0;
    color: var(--ref-muted);
    font-size: calc(0.68rem * var(--ref-s));
}

.home-ref-card-rankings strong {
    color: var(--ref-teal);
}

.home-ref-card-ads {
    left: 1%;
    bottom: 14%;
    width: 172px;
    animation-delay: 0.15s;
}

.home-ref-card-ads strong {
    display: block;
    color: var(--ref-violet);
    font-size: calc(1.2rem * var(--ref-s));
}

.home-ref-card-ads em {
    float: right;
    color: var(--ref-teal);
    font-size: calc(0.68rem * var(--ref-s));
    font-style: normal;
}

.home-ref-card-ads span {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--ref-muted);
    font-size: calc(0.66rem * var(--ref-s));
}

.home-ref-card-chart {
    right: 0;
    bottom: 7%;
    width: min(260px, 40%);
    animation-delay: 0.3s;
}

.home-ref-card-chart strong {
    color: var(--ref-teal);
    font-size: calc(1.75rem * var(--ref-s));
}

.home-ref-card-chart span {
    display: block;
    margin-top: 0.15rem;
    color: var(--ref-muted);
    font-size: calc(0.66rem * var(--ref-s));
    line-height: 1.35;
}

.home-ref-card-chart svg,
.home-ref-result-card svg {
    width: 100%;
    height: auto;
    fill: none;
}

.home-ref-card-chart polyline,
.home-ref-result-card polyline {
    stroke: var(--ref-teal);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes ref-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

@keyframes ref-card-in {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.home-ref-eyebrow {
    margin: 0 0 0.85rem;
    color: var(--ref-navy);
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-ref-hero-copy .home-ref-eyebrow {
    margin-bottom: 1rem;
}

.home-ref-eyebrow--branded {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    letter-spacing: 0.1em;
}

.home-ref-hero .home-ref-eyebrow--branded,
.home-ref-eyebrow--branded {
    color: rgba(255, 255, 255, 0.78);
}

.home-ref-hero .home-ref-eyebrow--branded {
    text-shadow: 0 1px 2px rgba(6, 21, 40, 0.75), 0 0 16px rgba(6, 21, 40, 0.45);
}

.home-ref-hero .home-ref-eyebrow--branded .is-web,
.home-ref-eyebrow--branded .is-web,
.home-ref-hero .home-ref-eyebrow--branded .is-ads,
.home-ref-eyebrow--branded .is-ads,
.home-ref-hero .home-ref-eyebrow--branded .is-seo,
.home-ref-eyebrow--branded .is-seo,
.home-ref-hero .home-ref-eyebrow--branded .is-sep,
.home-ref-eyebrow--branded .is-sep { color: inherit; }

.home-ref-proof {
    background: linear-gradient(90deg, var(--ref-navy) 0%, #1e4a7a 35%, #0f766e 70%, var(--ref-teal) 100%);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.home-ref-proof-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.95rem 0;
}

.home-ref-proof-row span {
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.home-ref-logos {
    position: relative;
    background:
        linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid var(--ref-border);
    overflow: hidden;
}

.home-ref-logos-intro {
    margin: 0;
    padding: 1.35rem 1.25rem 0.35rem;
    text-align: center;
    color: var(--ref-muted);
    font-size: calc(0.82rem * var(--ref-s));
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-ref-logos::before,
.home-ref-logos::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 1;
    width: min(8vw, 96px);
    background: linear-gradient(90deg, #fff 10%, transparent);
    pointer-events: none;
}

.home-ref-logos::after {
    inset: 0 0 0 auto;
    background: linear-gradient(270deg, #f8fafc 10%, transparent);
}

.home-ref-logo-marquee {
    overflow: hidden;
    padding: 1.35rem 0;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.home-ref-logo-track {
    display: flex;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    width: max-content;
    padding: 0.25rem 0;
    animation: home-ref-logo-marquee 38s linear infinite;
}

.home-ref-logo-track:hover {
    animation-play-state: paused;
}

.home-ref-logo-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 52px;
    padding: 0 0.5rem;
}

.home-ref-logo-item img {
    display: block;
    width: auto;
    max-width: clamp(110px, 12vw, 160px);
    max-height: 42px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(12%) sepia(28%) saturate(2145%) hue-rotate(186deg) brightness(92%) contrast(95%);
    opacity: 0.72;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.home-ref-logo-item:hover img {
    opacity: 1;
    transform: scale(1.04);
}

@keyframes home-ref-logo-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.home-ref-stats {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 20%, rgba(34, 211, 238, 0.1), transparent 28rem),
        radial-gradient(circle at 92% 70%, rgba(139, 92, 246, 0.1), transparent 24rem),
        radial-gradient(circle at 50% 0%, rgba(20, 184, 166, 0.08), transparent 20rem),
        linear-gradient(180deg, #fff 0%, #f4f8fc 100%);
}

.home-ref-stats::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(13, 48, 87, 0.03) 1px, transparent 1px),
        linear-gradient(0deg, rgba(13, 48, 87, 0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
    pointer-events: none;
}

.home-ref-stats .container {
    position: relative;
    z-index: 1;
}

.home-ref-stats-head {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 1.35rem;
}

.home-ref-stats-head h2 {
    margin: 0;
}

.home-ref-stats-head .home-ref-section-lead {
    margin: 0;
    max-width: 520px;
}

.home-ref-work {
    background: #fff;
    padding: clamp(2.75rem, 5.5vw, 4.5rem) 0;
}

.home-ref-problem--solo {
    padding: clamp(2.75rem, 5.5vw, 4.25rem) 0;
    background: linear-gradient(180deg, #f4f7fb 0%, #fff 100%);
}

.home-ref-problem-solo-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.home-ref-problem--solo h2 {
    margin: 0 0 0.9rem;
    color: var(--ref-navy);
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(1.7rem, 3.2vw, 2.55rem);
    line-height: 1.05;
    letter-spacing: -0.055em;
}

.home-ref-problem--solo .home-ref-problem-lead {
    margin: 0 auto 1rem;
    max-width: 560px;
    color: var(--ref-muted);
    font-size: calc(0.98rem * var(--ref-s));
    line-height: 1.65;
}

.home-ref-promise {
    margin: 0 auto 0.25rem;
    max-width: 520px;
    color: var(--ref-navy);
    font-size: calc(1.05rem * var(--ref-s));
    font-weight: 900;
    letter-spacing: -0.02em;
}

.home-ref-services-band {
    padding: 0 0 clamp(2.5rem, 5vw, 3.75rem);
    background: #fff;
}

.home-ref-ads {
    padding: clamp(2.75rem, 5.5vw, 4.5rem) 0;
    background: linear-gradient(180deg, #f7fafc 0%, #eef4f9 100%);
}

.home-ref-ads-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.75rem;
}

.home-ref-ads-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 15.5rem;
    padding: 1.45rem 1.35rem 1.5rem;
    border-radius: 18px;
    background:
        radial-gradient(ellipse 90% 80% at 110% 120%, rgba(20, 184, 166, 0.22), transparent 56%),
        radial-gradient(ellipse 48% 40% at 100% -10%, rgba(13, 48, 87, 0.06), transparent 52%),
        linear-gradient(180deg, #ffffff 0%, #f6fbfb 100%);
    border: 1px solid rgba(13, 48, 87, 0.08);
    box-shadow: 0 16px 34px rgba(13, 48, 87, 0.07);
}

.home-ref-ads-card--logo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(112deg, #fff 0%, #fff 28%, rgba(255, 255, 255, 0.78) 46%, rgba(255, 255, 255, 0.18) 68%, transparent 86%);
}

.home-ref-ads-card-copy {
    position: relative;
    z-index: 2;
    max-width: 17rem;
}

.home-ref-ads-card--logo .home-ref-ads-card-copy {
    max-width: min(18rem, 74%);
}

.home-ref-ads-card-mark {
    position: absolute;
    z-index: 0;
    inset: -8% -14% -16% 22%;
    pointer-events: none;
}

.home-ref-ads-card-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 100% 58%;
    opacity: 0.18;
    filter: saturate(0.88) contrast(1.12);
    mix-blend-mode: multiply;
    transform: scale(1.12);
    transform-origin: 100% 70%;
    -webkit-mask-image: radial-gradient(95% 90% at 92% 70%, #000 0%, rgba(0, 0, 0, 0.78) 38%, transparent 76%);
    mask-image: radial-gradient(95% 90% at 92% 70%, #000 0%, rgba(0, 0, 0, 0.78) 38%, transparent 76%);
    transition: opacity 0.45s ease, transform 0.55s ease;
}

.home-ref-ads-card-mark--portrait img {
    object-position: 100% 42%;
    transform: scale(1.2);
    transform-origin: 100% 40%;
    -webkit-mask-image: radial-gradient(88% 95% at 96% 45%, #000 0%, rgba(0, 0, 0, 0.75) 40%, transparent 76%);
    mask-image: radial-gradient(88% 95% at 96% 45%, #000 0%, rgba(0, 0, 0, 0.75) 40%, transparent 76%);
}

.home-ref-ads-card-mark--wide img {
    object-position: 100% 72%;
    transform: scale(1.18);
    transform-origin: 100% 78%;
}

.home-ref-ads-card:hover .home-ref-ads-card-mark img {
    opacity: 0.26;
    transform: scale(1.18);
}

.home-ref-ads-card:hover .home-ref-ads-card-mark--portrait img {
    transform: scale(1.26);
}

.home-ref-ads-card:hover .home-ref-ads-card-mark--wide img {
    transform: scale(1.24);
}

@media (prefers-reduced-motion: reduce) {
    .home-ref-ads-card-mark img,
    .home-ref-ads-card:hover .home-ref-ads-card-mark img,
    .home-ref-ads-card:hover .home-ref-ads-card-mark--portrait img,
    .home-ref-ads-card:hover .home-ref-ads-card-mark--wide img {
        transition: none;
        transform: scale(1.12);
    }

    .home-ref-ads-card-mark--portrait img {
        transform: scale(1.2);
    }

    .home-ref-ads-card-mark--wide img {
        transform: scale(1.18);
    }
}

.home-ref-ads-kicker {
    margin: 0 0 0.45rem;
    color: var(--ref-teal, #0d9488);
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.home-ref-ads-card h3 {
    margin: 0 0 0.65rem;
    color: var(--ref-navy);
    font-size: calc(1.05rem * var(--ref-s));
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.home-ref-ads-metric {
    margin: 0 0 0.35rem;
    color: var(--ref-navy);
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.home-ref-ads-detail {
    margin: 0;
    color: var(--ref-muted);
    font-size: calc(0.88rem * var(--ref-s));
    line-height: 1.45;
}

@media (max-width: 900px) {
    .home-ref-ads-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .home-ref-ads-grid {
        grid-template-columns: 1fr;
    }

    .home-ref-ads-card--logo .home-ref-ads-card-copy {
        max-width: 78%;
    }

    .home-ref-ads-card-mark {
        inset: -18% -24% -28% 12%;
    }
}

.home-ref-results {
    background: #fff;
}

.home-ref-case-studies {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 10% 0%, rgba(34, 211, 238, 0.18), transparent 55%),
        radial-gradient(ellipse 70% 55% at 90% 100%, rgba(231, 184, 63, 0.2), transparent 52%),
        linear-gradient(180deg, #07182d 0%, #0d3057 42%, #123a66 100%);
    color: rgba(255, 255, 255, 0.86);
}

.home-ref-case-studies-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
    pointer-events: none;
}

.home-ref-case-studies > .container {
    position: relative;
    z-index: 1;
}

.home-ref-case-studies .home-ref-eyebrow {
    color: var(--ref-gold);
}

.home-ref-case-studies .home-ref-section-lead {
    color: rgba(255, 255, 255, 0.78);
}

.home-ref-problem-services {
    background: #fff;
}

.home-ref-guide {
    background: #fff;
}

.home-ref-process {
    background: #fff;
}

.home-ref-stats,
.home-ref-results,
.home-ref-case-studies,
.home-ref-problem-services,
.home-ref-guide,
.home-ref-reviews,
.home-ref-process {
    padding: clamp(1.75rem, 4vw, 3.2rem) 0;
}

.home-ref-stats h2,
.home-ref-results h2,
.home-ref-review-head h2,
.home-ref-process h2 {
    font-family: var(--font-heading);
    font-weight: 900;
    margin: 0 0 0.65rem;
    color: var(--ref-navy);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    letter-spacing: -0.035em;
}

.home-ref-work h2 {
    font-family: var(--font-heading);
    font-weight: 900;
    margin: 0 0 0.75rem;
    color: var(--ref-navy);
    font-size: clamp(1.55rem, 3.2vw, 2.35rem);
    line-height: 1.08;
    letter-spacing: -0.045em;
    max-width: 18ch;
}

.home-ref-case-studies h2 {
    font-family: var(--font-heading);
    font-weight: 900;
    margin: 0 0 0.65rem;
    color: #fff;
    font-size: clamp(1.7rem, 3.4vw, 2.55rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.home-ref-section-lead {
    max-width: 680px;
    margin: 0 0 1.5rem;
    color: var(--ref-muted);
    font-size: calc(1.02rem * var(--ref-s));
    line-height: 1.72;
}

.home-ref-section-lead--compact {
    margin-bottom: 1.25rem;
    font-size: calc(0.98rem * var(--ref-s));
}

.home-ref-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.15rem;
}

.home-ref-stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-height: 168px;
    padding: 1.35rem 1.25rem 1.2rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(13, 48, 87, 0.08);
    box-shadow:
        0 18px 40px rgba(13, 48, 87, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s ease,
                border-color 0.35s ease;
}

.home-ref-stat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.55), transparent 48%);
    pointer-events: none;
}

.home-ref-stat-card:hover {
    transform: translateY(-5px);
    border-color: rgba(13, 48, 87, 0.14);
    box-shadow: 0 28px 56px rgba(13, 48, 87, 0.12);
}

.home-ref-stat-card-top {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.home-ref-stat-accent {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(13, 48, 87, 0.06);
}

.home-ref-stat-card--navy {
    border-top: 3px solid var(--ref-cyan);
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.14), rgba(255, 255, 255, 0.96));
}

.home-ref-stat-card--emerald {
    border-top: 3px solid var(--ref-teal);
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.14), rgba(255, 255, 255, 0.96));
}

.home-ref-stat-card--purple {
    border-top: 3px solid var(--ref-violet);
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.14), rgba(255, 255, 255, 0.96));
}

.home-ref-stat-card--gold {
    border-top: 3px solid var(--ref-gold);
    background: linear-gradient(180deg, rgba(231, 184, 63, 0.18), rgba(255, 255, 255, 0.96));
}

.home-ref-stat-card--navy .home-ref-stat-accent { background: var(--ref-cyan); box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.14); }
.home-ref-stat-card--emerald .home-ref-stat-accent { background: var(--ref-teal); box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.14); }
.home-ref-stat-card--purple .home-ref-stat-accent { background: var(--ref-violet); box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.14); }
.home-ref-stat-card--gold .home-ref-stat-accent { background: var(--ref-gold); box-shadow: 0 0 0 4px rgba(231, 184, 63, 0.18); }

.home-ref-stat-card--navy .home-ref-stat-number { color: var(--ref-navy); }
.home-ref-stat-card--emerald .home-ref-stat-number { color: #0f766e; }
.home-ref-stat-card--purple .home-ref-stat-number { color: #6d28d9; }
.home-ref-stat-card--gold .home-ref-stat-number { color: #9a7420; }

.home-ref-stat-label {
    margin: 0;
    color: var(--ref-muted);
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-ref-stat-number {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--ref-navy);
    font-size: clamp(2.15rem, 4.2vw, 3rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
}

.home-ref-stat-desc {
    position: relative;
    z-index: 1;
    margin: auto 0 0;
    color: var(--ref-muted);
    font-size: calc(0.88rem * var(--ref-s));
    line-height: 1.45;
    font-weight: 600;
}

.home-ref-work-card,
.home-ref-result-card,
.home-ref-quote {
    border: 1px solid var(--ref-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(16, 35, 61, 0.05);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s ease,
                border-color 0.35s ease;
}

.home-ref-result-card:hover,
.home-ref-quote:hover {
    transform: translateY(-3px);
    border-color: rgba(13, 48, 87, 0.14);
    box-shadow: 0 20px 44px rgba(13, 48, 87, 0.1);
}

.home-ref-work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}

.home-ref-work-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(13, 48, 87, 0.1);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(13, 48, 87, 0.06);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.home-ref-work-card::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--ref-gradient-border);
}

.home-ref-work-card:hover {
    transform: translateY(-5px);
    border-color: rgba(13, 48, 87, 0.16);
    box-shadow: 0 22px 48px rgba(13, 48, 87, 0.12);
}

.home-ref-work-card:hover .home-ref-work-browser-viewport img,
.home-ref-work-card:hover .home-ref-work-phone-screen img {
    transform: scale(1.03);
}

.home-ref-work-shot {
    position: relative;
    aspect-ratio: 16 / 11;
    min-height: 230px;
    background: linear-gradient(145deg, #e9eef5 0%, #f6f8fb 52%, #e3eaf3 100%);
    overflow: hidden;
}

.home-ref-work-browser {
    position: absolute;
    left: 4%;
    top: 8%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 85%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow:
        0 16px 36px rgba(13, 48, 87, 0.14),
        0 0 0 1px rgba(13, 48, 87, 0.08);
}

.home-ref-work-browser-bar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
    padding: 0.45rem 0.55rem;
    background: linear-gradient(180deg, #1e3350 0%, #152a42 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.home-ref-work-browser-dots {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
}

.home-ref-work-browser-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
}

.home-ref-work-browser-dots span:nth-child(1) { background: #ff5f57; }
.home-ref-work-browser-dots span:nth-child(2) { background: #febc2e; }
.home-ref-work-browser-dots span:nth-child(3) { background: #28c840; }

.home-ref-work-browser-url {
    flex: 1;
    height: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.home-ref-work-browser-viewport {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #fff;
}

.home-ref-work-browser-viewport img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.45s ease;
}

.home-ref-work-phone {
    position: absolute;
    right: 6%;
    bottom: 5%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 66%;
    width: auto;
    aspect-ratio: 9 / 19.5;
    padding: 4px;
    border-radius: 16px;
    background: linear-gradient(160deg, #2a3544 0%, #0f172a 55%, #050a12 100%);
    box-shadow:
        0 20px 40px rgba(13, 48, 87, 0.22),
        0 0 0 2px rgba(255, 255, 255, 0.96),
        0 0 0 3px rgba(13, 48, 87, 0.1);
}

.home-ref-work-phone-notch {
    position: absolute;
    top: 7px;
    left: 50%;
    z-index: 2;
    width: 24%;
    height: 3px;
    border-radius: 999px;
    background: #050a12;
    transform: translateX(-50%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

.home-ref-work-phone-screen {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
}

.home-ref-work-phone-screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    transition: transform 0.45s ease;
}

.home-ref-work-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.95rem 1rem 1.05rem;
    border-top: 1px solid var(--ref-border);
    background: #fff;
}

.home-ref-work-meta strong {
    color: var(--ref-navy);
    font-size: calc(0.92rem * var(--ref-s));
    line-height: 1.25;
    font-weight: 900;
}

.home-ref-work-meta span {
    align-self: flex-start;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: rgba(231, 184, 63, 0.14);
    border: 1px solid rgba(231, 184, 63, 0.35);
    color: #8a6a12;
    font-size: calc(0.62rem * var(--ref-s));
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.home-ref-results-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.home-ref-case-studies-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    flex-wrap: wrap;
    margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.home-ref-case-studies-copy {
    max-width: 42rem;
}

.home-ref-case-studies-copy h2 {
    max-width: 16ch;
    color: #fff;
    font-size: clamp(1.7rem, 3.4vw, 2.55rem) !important;
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.home-ref-case-studies-all {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #fff;
    font-size: calc(0.92rem * var(--ref-s));
    font-weight: 800;
    text-decoration: none;
    border-bottom: 2px solid rgba(231, 184, 63, 0.85);
    padding-bottom: 0.15rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.home-ref-case-studies-all:hover {
    color: var(--ref-gold);
    border-color: #fff;
}

.home-ref-case-studies-list {
    display: grid;
    gap: clamp(1.75rem, 4vw, 2.75rem);
}

.home-ref-case-study {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
    gap: clamp(1.25rem, 3vw, 2.4rem);
    align-items: stretch;
    padding: clamp(1rem, 2vw, 1.25rem);
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
}

.home-ref-case-study--finquest {
    background:
        radial-gradient(ellipse 80% 70% at 100% 0%, rgba(45, 212, 191, 0.22), transparent 55%),
        linear-gradient(145deg, rgba(6, 78, 59, 0.72), rgba(15, 118, 110, 0.45) 45%, rgba(8, 28, 38, 0.88));
    border-color: rgba(45, 212, 191, 0.28);
    box-shadow:
        0 28px 60px rgba(6, 78, 59, 0.35),
        inset 0 1px 0 rgba(167, 243, 208, 0.18);
}

.home-ref-case-study--sterling {
    background:
        radial-gradient(ellipse 80% 70% at 0% 0%, rgba(59, 130, 246, 0.28), transparent 55%),
        linear-gradient(145deg, rgba(30, 58, 138, 0.78), rgba(37, 99, 235, 0.4) 48%, rgba(15, 23, 42, 0.9));
    border-color: rgba(96, 165, 250, 0.32);
    box-shadow:
        0 28px 60px rgba(30, 64, 175, 0.38),
        inset 0 1px 0 rgba(191, 219, 254, 0.18);
}

.home-ref-case-study--ag {
    background:
        radial-gradient(ellipse 80% 70% at 100% 10%, rgba(196, 163, 90, 0.28), transparent 52%),
        linear-gradient(145deg, rgba(24, 24, 27, 0.95), rgba(39, 39, 42, 0.85) 48%, rgba(17, 24, 39, 0.92));
    border-color: rgba(196, 163, 90, 0.35);
    box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(253, 230, 138, 0.14);
}

.home-ref-case-study--finquest .cs-visual {
    background:
        radial-gradient(circle at 15% 10%, rgba(45, 212, 191, 0.25), transparent 42%),
        linear-gradient(160deg, #042f2e 0%, #0f766e 55%, #064e3b 100%);
}

.home-ref-case-study--sterling .cs-visual {
    background:
        radial-gradient(circle at 15% 10%, rgba(96, 165, 250, 0.28), transparent 42%),
        linear-gradient(160deg, #0f172a 0%, #1e3a8a 55%, #172554 100%);
}

.home-ref-case-study--ag .cs-visual {
    background:
        radial-gradient(circle at 15% 10%, rgba(196, 163, 90, 0.24), transparent 42%),
        linear-gradient(160deg, #09090b 0%, #27272a 55%, #18181b 100%);
}

.home-ref-case-study--finquest .home-ref-case-study-tag {
    background: rgba(45, 212, 191, 0.18);
    border-color: rgba(45, 212, 191, 0.45);
    color: #99f6e4;
}

.home-ref-case-study--sterling .home-ref-case-study-tag {
    background: rgba(96, 165, 250, 0.18);
    border-color: rgba(96, 165, 250, 0.45);
    color: #bfdbfe;
}

.home-ref-case-study--ag .home-ref-case-study-tag {
    background: rgba(196, 163, 90, 0.18);
    border-color: rgba(196, 163, 90, 0.5);
    color: #f5d06a;
}

.home-ref-case-study--finquest .home-ref-case-study-link,
.home-ref-case-study--finquest .home-ref-case-study-url {
    color: #5eead4;
}

.home-ref-case-study--sterling .home-ref-case-study-link,
.home-ref-case-study--sterling .home-ref-case-study-url {
    color: #93c5fd;
}

.home-ref-case-study--ag .home-ref-case-study-link,
.home-ref-case-study--ag .home-ref-case-study-url {
    color: #e7b83f;
}

.home-ref-case-study--fvpd {
    background:
        radial-gradient(ellipse 80% 70% at 0% 0%, rgba(190, 242, 100, 0.22), transparent 52%),
        linear-gradient(145deg, rgba(76, 29, 149, 0.78), rgba(22, 101, 52, 0.42) 48%, rgba(15, 23, 42, 0.92));
    border-color: rgba(190, 242, 100, 0.32);
    box-shadow:
        0 28px 60px rgba(76, 29, 149, 0.38),
        inset 0 1px 0 rgba(233, 213, 255, 0.16);
}

.home-ref-case-study--fvpd .cs-visual {
    background:
        radial-gradient(circle at 15% 10%, rgba(190, 242, 100, 0.22), transparent 42%),
        linear-gradient(160deg, #3b0764 0%, #166534 55%, #1e1b4b 100%);
}

.home-ref-case-study--fvpd .home-ref-case-study-tag {
    background: rgba(190, 242, 100, 0.16);
    border-color: rgba(190, 242, 100, 0.45);
    color: #d9f99d;
}

.home-ref-case-study--fvpd .home-ref-case-study-link,
.home-ref-case-study--fvpd .home-ref-case-study-url {
    color: #bef264;
}

.home-ref-case-study-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: min(100%, 240px);
    margin: 0 0 0.95rem;
    padding: 0.7rem 0.95rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(13, 48, 87, 0.06);
}

.home-ref-case-study-logo--light {
    background: #0a1a2e;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.home-ref-case-study-logo img {
    display: block;
    width: auto;
    height: 44px;
    max-width: 200px;
    object-fit: contain;
}

.home-ref-case-study--ag .home-ref-case-study-logo img {
    height: 48px;
    max-width: 220px;
}

.home-ref-case-study--flip {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
}

.home-ref-case-study--flip .home-ref-case-study-media {
    order: 2;
}

.home-ref-case-study--flip .home-ref-case-study-body {
    order: 1;
}

.home-ref-case-study-media {
    min-height: 100%;
}

.cs-visual {
    position: relative;
    height: 100%;
    min-height: 340px;
    padding: 1.1rem 1.15rem 1.2rem;
    border-radius: 22px;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 10%, rgba(34, 211, 238, 0.22), transparent 42%),
        linear-gradient(160deg, #081526 0%, #102844 55%, #0b1c33 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.cs-visual-glow {
    position: absolute;
    width: 220px;
    height: 220px;
    right: -40px;
    top: -50px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.35), transparent 68%);
    filter: blur(8px);
    pointer-events: none;
    animation: csGlowPulse 4.5s ease-in-out infinite;
}

.cs-visual-glow--gold {
    background: radial-gradient(circle, rgba(231, 184, 63, 0.4), transparent 68%);
}

.cs-visual-glow--violet {
    background: radial-gradient(circle, rgba(167, 139, 250, 0.38), transparent 68%);
}

@keyframes csGlowPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

.cs-visual-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.95rem;
}

.cs-visual-live {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cs-visual-live i {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
    animation: csLivePulse 1.6s ease-out infinite;
}

@keyframes csLivePulse {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.65); }
    70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.cs-visual-chip {
    display: inline-flex;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.16);
    border: 1px solid rgba(34, 211, 238, 0.4);
    color: #67e8f9;
    font-size: 0.72rem;
    font-weight: 800;
}

.cs-visual-chip--gold {
    background: rgba(231, 184, 63, 0.16);
    border-color: rgba(231, 184, 63, 0.45);
    color: #f5d06a;
}

.cs-growth-compare {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.cs-growth-stat {
    position: relative;
    padding: 0.85rem 0.85rem 0.75rem;
    border-radius: 16px;
    overflow: hidden;
    min-height: 132px;
}

.cs-growth-stat--clicks {
    background: linear-gradient(145deg, #1d4ed8 0%, #2563eb 55%, #0ea5e9 100%);
}

.cs-growth-stat--impressions {
    background: linear-gradient(145deg, #0f766e 0%, #14b8a6 50%, #22d3ee 100%);
}

.cs-growth-label {
    display: block;
    margin-bottom: 0.35rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cs-growth-stat strong {
    display: block;
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}

.cs-growth-stat em {
    display: block;
    margin-top: 0.3rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 600;
}

.cs-growth-delta {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
    color: #bbf7d0;
    font-size: 0.68rem;
    font-weight: 900;
}

.cs-growth-bars {
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.7rem;
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
    height: 2rem;
}

.cs-growth-bar {
    display: block;
    width: 42%;
    height: 0;
    border-radius: 6px 6px 2px 2px;
    transition: height 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.cs-growth-bar--before {
    background: rgba(255, 255, 255, 0.28);
}

.cs-growth-bar--after {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.35);
}

.home-ref-case-study.is-visible .cs-growth-bar {
    height: var(--h);
}

.cs-line-chart {
    position: relative;
    z-index: 1;
    margin-top: 0.25rem;
}

.cs-line-chart svg {
    display: block;
    width: 100%;
    height: 110px;
}

.cs-line-stroke {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.cs-line-fill {
    opacity: 0;
    transition: opacity 1.1s ease 0.35s;
}

.home-ref-case-study.is-visible .cs-line-stroke {
    stroke-dashoffset: 0;
}

.home-ref-case-study.is-visible .cs-line-fill {
    opacity: 1;
}

.cs-line-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cs-rank-table {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.4rem;
}

.cs-rank-head,
.cs-rank-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.4rem 4.2rem;
    gap: 0.55rem;
    align-items: center;
}

.cs-rank-head {
    padding: 0 0.35rem 0.35rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cs-rank-row {
    padding: 0.55rem 0.65rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s ease, transform 0.45s ease, background 0.2s ease;
    transition-delay: calc(var(--i, 0) * 0.08s);
}

.home-ref-case-study.is-visible .cs-rank-row {
    opacity: 1;
    transform: none;
}

.cs-rank-row:hover {
    background: rgba(255, 255, 255, 0.1);
}

.cs-rank-kw {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-rank-pos {
    justify-self: center;
    min-width: 2.4rem;
    padding: 0.2rem 0.4rem;
    border-radius: 999px;
    text-align: center;
    background: rgba(34, 211, 238, 0.16);
    color: #67e8f9;
    font-size: 0.78rem;
    font-weight: 900;
}

.cs-rank-pos--gold {
    background: linear-gradient(135deg, #e7b83f, #f5d06a);
    color: #0d3057;
    box-shadow: 0 0 18px rgba(231, 184, 63, 0.45);
}

.cs-rank-pos--silver {
    background: rgba(148, 163, 184, 0.22);
    color: #e2e8f0;
}

.cs-rank-diff {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: #4ade80;
    font-size: 0.78rem;
    font-weight: 900;
}

.cs-rank-diff span {
    display: inline-block;
    animation: csArrowBounce 1.4s ease-in-out infinite;
}

@keyframes csArrowBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.cs-podium {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
    align-items: end;
    margin-bottom: 0.85rem;
    min-height: 120px;
}

.cs-podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    padding: 0.7rem 0.4rem;
    border-radius: 14px 14px 8px 8px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
}

.cs-podium-item strong {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
}

.cs-podium-item span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.25;
}

.cs-podium-item--1 {
    min-height: 110px;
    background: linear-gradient(180deg, rgba(231, 184, 63, 0.45), rgba(231, 184, 63, 0.12));
    border-color: rgba(231, 184, 63, 0.5);
    box-shadow: 0 12px 28px rgba(231, 184, 63, 0.22);
    transform: translateY(-6px);
}

.cs-podium-item--2 {
    min-height: 88px;
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.28), rgba(34, 211, 238, 0.08));
}

.cs-podium-item--3 {
    min-height: 76px;
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.28), rgba(167, 139, 250, 0.08));
}

.cs-rank-table--compact {
    max-height: 168px;
    overflow: hidden;
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}

.home-ref-case-study-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.35rem 0.25rem 0.35rem 0;
}

.home-ref-case-study-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.75rem;
    margin-bottom: 0.55rem;
}

.home-ref-case-study-tag {
    display: inline-flex;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: rgba(231, 184, 63, 0.18);
    border: 1px solid rgba(231, 184, 63, 0.45);
    color: #f5d06a;
    font-size: calc(0.68rem * var(--ref-s));
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.home-ref-case-study-kicker {
    color: rgba(255, 255, 255, 0.62);
    font-size: calc(0.82rem * var(--ref-s));
    font-weight: 700;
}

.home-ref-case-study-headline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem 0.65rem;
    margin: 0 0 0.55rem;
}

.home-ref-case-study-headline strong {
    color: #fff;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    background: linear-gradient(90deg, #fff 0%, #67e8f9 45%, #e7b83f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.home-ref-case-study-headline span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.9rem;
    font-weight: 700;
}

.home-ref-case-study-body h3 {
    margin: 0 0 0.35rem;
    color: #fff;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.home-ref-case-study-url {
    display: inline-block;
    margin-bottom: 0.75rem;
    color: #67e8f9;
    font-size: calc(0.88rem * var(--ref-s));
    font-weight: 700;
    text-decoration: none;
}

.home-ref-case-study-url:hover {
    color: #fff;
    text-decoration: underline;
}

.home-ref-case-study-body > p {
    margin: 0 0 1.1rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: calc(0.95rem * var(--ref-s));
    line-height: 1.6;
    max-width: 38rem;
}

.home-ref-case-study-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1.15rem;
}

.home-ref-case-study-metrics div {
    padding: 0.8rem 0.7rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.home-ref-case-study-metrics strong {
    display: block;
    color: #fff;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
}

.home-ref-case-study-metrics span {
    display: block;
    margin-top: 0.35rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: calc(0.66rem * var(--ref-s));
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.home-ref-case-study-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ref-gold);
    font-size: calc(0.92rem * var(--ref-s));
    font-weight: 800;
    text-decoration: none;
}

.home-ref-case-study-link:hover {
    color: #fff;
}

.home-ref-case-studies-foot {
    display: flex;
    justify-content: center;
    margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

@media (max-width: 900px) {
    .home-ref-case-study,
    .home-ref-case-study--flip {
        grid-template-columns: 1fr;
    }

    .home-ref-case-study--flip .home-ref-case-study-media,
    .home-ref-case-study--flip .home-ref-case-study-body {
        order: initial;
    }

    .home-ref-case-studies-copy h2 {
        max-width: none;
    }

    .cs-visual {
        min-height: 300px;
    }
}

@media (max-width: 640px) {
    .home-ref-case-study-metrics,
    .cs-growth-compare {
        grid-template-columns: 1fr;
    }

    .cs-rank-kw {
        white-space: normal;
    }
}

/* SEO page: case-study boards in a grid, copy on top, numbers below. */
.home-ref-case-studies--grid .home-ref-case-studies-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
    align-items: stretch;
}

.home-ref-case-studies--count-2 .home-ref-case-studies-list,
.home-ref-case-studies--count-4 .home-ref-case-studies-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-ref-case-studies--grid .home-ref-case-study,
.home-ref-case-studies--grid .home-ref-case-study--flip {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 0;
    padding: 1rem 1rem 1.05rem;
    border-radius: 22px;
    height: 100%;
}

.home-ref-case-studies--grid .home-ref-case-study-body {
    display: contents;
}

.home-ref-case-studies--grid .home-ref-case-study-logo { order: 1; margin-bottom: 0.55rem; }
.home-ref-case-studies--grid .home-ref-case-study-meta { order: 2; }
.home-ref-case-studies--grid .home-ref-case-study h3 { order: 3; }
.home-ref-case-studies--grid .home-ref-case-study-url { order: 4; }
.home-ref-case-studies--grid .home-ref-case-study-headline { order: 5; }
.home-ref-case-studies--grid .home-ref-case-study-body > p { order: 6; }
.home-ref-case-studies--grid .home-ref-case-study-media { order: 7; flex: 1; min-height: 0; margin-top: 0.75rem; }
.home-ref-case-studies--grid .home-ref-case-study-metrics { order: 8; margin-top: 0.75rem; margin-bottom: 0; }
.home-ref-case-studies--grid .home-ref-case-study-link { order: 9; margin-top: 0.75rem; }

.home-ref-case-studies--grid .home-ref-case-study-headline strong {
    font-size: clamp(1.25rem, 1.6vw, 1.55rem);
}

.home-ref-case-studies--grid .home-ref-case-study h3 {
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
}

.home-ref-case-studies--grid .home-ref-case-study-body > p {
    margin-bottom: 0;
    font-size: calc(0.88rem * var(--ref-s));
    line-height: 1.5;
}

.home-ref-case-studies--grid .home-ref-case-study-metrics {
    grid-template-columns: 1fr;
    gap: 0.4rem;
}

.home-ref-case-studies--grid .home-ref-case-study-metrics div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.45rem 0.65rem;
}

.home-ref-case-studies--grid .home-ref-case-study-metrics strong {
    font-size: 1.15rem;
}

.home-ref-case-studies--grid .home-ref-case-study-metrics span {
    text-align: right;
}

.home-ref-case-studies--grid .cs-visual {
    min-height: 0;
    height: auto;
    padding: 0.85rem 0.85rem 0.9rem;
    border-radius: 16px;
}

.home-ref-case-studies--grid .cs-growth-compare {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.home-ref-case-studies--grid .cs-growth-stat {
    min-height: 0;
    padding: 0.7rem 0.75rem 2.15rem;
}

.home-ref-case-studies--grid .cs-growth-stat strong {
    font-size: 1.45rem;
}

.home-ref-case-studies--grid .cs-growth-bars {
    height: 1.35rem;
    bottom: 0.5rem;
}

.home-ref-case-studies--grid .cs-line-chart svg {
    height: 72px;
}

.home-ref-case-studies--grid .cs-visual--ranks .cs-rank-row:nth-child(n+6),
.home-ref-case-studies--grid .cs-visual--leaderboard .cs-rank-row:nth-child(n+4) {
    display: none;
}

.home-ref-case-studies--grid .cs-podium {
    gap: 0.35rem;
    margin-bottom: 0.55rem;
}

.home-ref-case-studies--grid .cs-podium-item--1,
.home-ref-case-studies--grid .cs-podium-item--2,
.home-ref-case-studies--grid .cs-podium-item--3 {
    min-height: 64px;
    transform: none;
}

.home-ref-case-studies--grid .cs-rank-table--compact {
    max-height: none;
    mask-image: none;
}

.home-ref-case-studies--grid .home-ref-case-studies-copy h2 {
    max-width: 22ch;
}

.home-ref-case-studies--grid .home-ref-case-studies-foot {
    display: none;
}

@media (max-width: 1024px) {
    .home-ref-case-studies--grid .home-ref-case-studies-list {
        grid-template-columns: 1fr;
    }

    .home-ref-case-studies--grid .home-ref-case-study-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-ref-case-studies--grid .home-ref-case-study-metrics div {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }

    .home-ref-case-studies--grid .home-ref-case-study-metrics span {
        text-align: left;
    }

    .home-ref-case-studies--grid .cs-growth-compare {
        grid-template-columns: 1fr 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cs-visual-glow,
    .cs-visual-live i,
    .cs-rank-diff span {
        animation: none;
    }

    .cs-line-stroke,
    .cs-line-fill,
    .cs-growth-bar,
    .cs-rank-row {
        transition: none;
        opacity: 1;
        transform: none;
        stroke-dashoffset: 0;
        height: var(--h);
    }
}

.home-ref-result-card,
.home-ref-quote {
    display: flex;
    flex-direction: column;
    min-height: 280px;
    padding: 1.35rem 1.35rem 1.1rem;
}

.home-ref-result-kicker {
    margin: 0 0 0.35rem;
    color: var(--ref-muted);
    font-size: calc(0.68rem * var(--ref-s));
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.home-ref-result-card h3 {
    margin: 0 0 0.85rem;
    color: var(--ref-navy);
    font-size: calc(0.92rem * var(--ref-s));
    line-height: 1.3;
    font-weight: 900;
}

.home-ref-result-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.home-ref-result-metrics div {
    text-align: center;
}

.home-ref-result-metrics strong {
    display: block;
    color: var(--ref-navy);
    font-size: calc(1.35rem * var(--ref-s));
    line-height: 1;
}

.home-ref-result-metrics span {
    display: block;
    margin-top: 0.2rem;
    color: var(--ref-muted);
    font-size: calc(0.62rem * var(--ref-s));
    font-weight: 700;
    text-transform: uppercase;
}

.home-ref-result-stat {
    margin: 0 0 0.5rem;
    color: var(--ref-purple);
    font-size: calc(1.5rem * var(--ref-s));
    font-weight: 900;
    line-height: 1;
}

.home-ref-result-stat--large {
    font-size: calc(2rem * var(--ref-s));
    color: var(--ref-navy);
}

.home-ref-result-chart {
    margin-top: auto;
    padding-top: 0.5rem;
}

.home-ref-result-chart svg {
    width: 100%;
    height: auto;
    fill: none;
}

.home-ref-result-chart--line polyline {
    stroke: var(--ref-emerald);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-ref-result-chart--bars {
    display: flex;
    align-items: end;
    gap: 0.4rem;
    height: 90px;
}

.home-ref-result-chart--bars span {
    flex: 1;
    min-width: 10px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, #9b7bc7, var(--ref-purple));
}

.home-ref-quote {
    background: #fffdf6;
    border-color: #f0e6c8;
}

.home-ref-quote-mark {
    color: var(--ref-gold);
    font-family: var(--font-sans);
    font-size: calc(3.5rem * var(--ref-s));
    line-height: 0.55;
}

.home-ref-quote p {
    flex: 1;
    color: var(--ref-navy);
    font-size: calc(1.15rem * var(--ref-s));
    font-weight: 900;
    line-height: 1.25;
    margin: 0.5rem 0 1rem;
}

.home-ref-quote-stars {
    display: block;
    color: var(--ref-gold);
    font-size: calc(0.72rem * var(--ref-s));
    letter-spacing: 0.08em;
    margin-bottom: 0.25rem;
}

.home-ref-quote footer {
    color: var(--ref-navy);
    font-size: calc(0.78rem * var(--ref-s));
    font-weight: 900;
}

.home-ref-quote small {
    display: block;
    margin-top: 0.2rem;
    color: var(--ref-muted);
    font-size: calc(0.66rem * var(--ref-s));
    font-weight: 700;
}

.home-ref-problem-services-grid,
.home-ref-guide-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

.page-digital-marketing-services .home-ref-guide-grid {
    align-items: start;
}

.page-digital-marketing-services .about-staff-mosaic {
    width: 100%;
}

.home-ref-problem h2,
.home-ref-guide h2 {
    font-family: var(--font-heading);
    font-weight: 900;
    margin: 0 0 0.9rem;
    color: var(--ref-navy);
    font-size: clamp(1.7rem, 3.2vw, 2.55rem);
    line-height: 1.05;
    letter-spacing: -0.055em;
}

.home-ref-problem-lead,
.home-ref-guide-lead {
    color: var(--ref-muted);
    font-size: calc(0.95rem * var(--ref-s));
    line-height: 1.65;
}

.home-ref-funnel {
    width: min(280px, 100%);
    margin: 1.5rem auto 0;
    text-align: center;
}

.home-ref-funnel-title {
    margin: 0 0 0.65rem;
    color: var(--ref-muted);
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.home-ref-funnel span,
.home-ref-funnel strong {
    display: block;
    margin: 0 auto 0.28rem;
    padding: 0.65rem 1rem;
    color: #fff;
    font-size: calc(0.78rem * var(--ref-s));
    font-weight: 900;
    clip-path: polygon(8% 0, 92% 0, 84% 100%, 16% 100%);
}

.home-ref-funnel span:nth-child(2) { width: 100%; background: var(--ref-navy); }
.home-ref-funnel span:nth-child(3) { width: 72%; background: #285d87; }
.home-ref-funnel strong { width: 44%; background: var(--ref-emerald); margin-top: 0.1rem; }

.home-ref-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.home-ref-service-card {
    position: relative;
    display: flex;
    min-height: 250px;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.35rem;
    border-radius: 16px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(145deg, #0d3057 0%, var(--ref-blue) 55%, #1e4a7a 100%);
    box-shadow: 0 18px 40px rgba(13, 48, 87, 0.22);
    overflow: hidden;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease;
}

.home-ref-service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.16), transparent 42%);
    pointer-events: none;
}

.home-ref-service-card:nth-child(2) {
    background: linear-gradient(145deg, #0d6049 0%, var(--ref-teal) 55%, #2dd4bf 100%);
}

.home-ref-service-card:nth-child(3) {
    background: linear-gradient(145deg, #2e1847 0%, var(--ref-violet) 55%, #a78bfa 100%);
}

.home-ref-service-card:hover {
    color: #fff;
    transform: translateY(-6px);
    box-shadow: 0 28px 56px rgba(16, 35, 61, 0.24), 0 0 0 1px rgba(231, 184, 63, 0.18);
}

.home-ref-service-card > span.home-ref-service-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.14);
    font-size: inherit;
    line-height: 1;
}

.home-ref-service-icon svg {
    width: 26px;
    height: 26px;
    color: #fff;
}

.home-ref-service-card h3 {
    margin: auto 0 0.5rem;
    color: #fff;
    font-size: calc(1.25rem * var(--ref-s));
}

.home-ref-service-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: calc(0.92rem * var(--ref-s));
    line-height: 1.62;
}

.home-ref-service-card em {
    margin-top: 1.2rem;
    color: var(--ref-gold);
    font-style: normal;
    font-size: calc(1.4rem * var(--ref-s));
}

.home-ref-guide-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
    margin-top: 1.4rem;
}

.home-ref-guide-body p {
    margin: 0 0 0.85rem;
}

.home-ref-guide-body p:last-child {
    margin-bottom: 0;
}

.home-ref-guide-points span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--ref-navy);
    font-size: calc(0.78rem * var(--ref-s));
    font-weight: 900;
}

.home-ref-guide-points svg {
    width: 18px;
    height: 18px;
    color: var(--ref-gold);
    flex-shrink: 0;
}

.home-ref-team-image {
    width: 100%;
    aspect-ratio: 16 / 8.7;
    object-fit: cover;
    border-radius: 16px;
    box-shadow:
        0 28px 56px rgba(13, 48, 87, 0.14),
        0 0 0 3px rgba(34, 211, 238, 0.55),
        0 0 0 6px rgba(139, 92, 246, 0.28);
}

.page-about .home-ref-guide--muted .home-ref-team-image {
    aspect-ratio: 980 / 440;
    border-radius: 20px;
    border: 1px solid rgba(13, 48, 87, 0.1);
    box-shadow:
        0 24px 56px rgba(13, 48, 87, 0.14),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset;
    object-position: center;
}

.home-ref-reviews {
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    padding-bottom: clamp(2.25rem, 4vw, 3.5rem);
    overflow: hidden;
}

.home-ref-review-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}

.home-ref-review-head-copy h2 {
    margin-bottom: 0.45rem;
}

.home-ref-review-score {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 0.1rem;
    padding: 0.9rem 1.15rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--ref-border);
    box-shadow: 0 14px 36px rgba(13, 48, 87, 0.07);
    text-align: right;
}

.home-ref-review-score-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #f8faff;
    border: 1px solid #e3eaf5;
}

.home-ref-google-logo {
    display: block;
    flex-shrink: 0;
}

.home-ref-review-score-stars {
    color: var(--ref-gold);
    font-size: calc(0.78rem * var(--ref-s));
    letter-spacing: 0.06em;
}

.home-ref-review-score strong {
    color: var(--ref-navy);
    font-size: calc(1.65rem * var(--ref-s));
    line-height: 1;
    letter-spacing: -0.04em;
}

.home-ref-review-score > span:last-child {
    color: var(--ref-muted);
    font-size: calc(0.68rem * var(--ref-s));
    font-weight: 700;
}

.home-ref-review-marquee {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.home-ref-review-track {
    display: flex;
    gap: 1.25rem;
    width: max-content;
    padding: 0.35rem 0 1.25rem;
    animation: home-ref-review-marquee 52s linear infinite;
}

.home-ref-review-track:hover {
    animation-play-state: paused;
}

@keyframes home-ref-review-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.home-ref-review-card {
    position: relative;
    flex: 0 0 min(380px, 84vw);
    margin: 0;
    padding: 1.55rem 1.55rem 1.35rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(13, 48, 87, 0.1);
    box-shadow: 0 20px 50px rgba(13, 48, 87, 0.08);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    overflow: hidden;
}

.home-ref-review-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ref-cyan), var(--ref-violet), var(--ref-teal), var(--ref-gold));
}

.home-ref-review-card:hover {
    transform: translateY(-6px);
    border-color: rgba(13, 48, 87, 0.16);
    box-shadow: 0 28px 64px rgba(13, 48, 87, 0.14);
}

.home-ref-review-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.home-ref-review-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 999px;
    background: #f8faff;
    border: 1px solid #e3eaf5;
}

.home-ref-review-stars {
    color: var(--ref-gold);
    font-size: calc(0.82rem * var(--ref-s));
    letter-spacing: 0.08em;
}

.home-ref-review-mark {
    display: block;
    color: rgba(231, 184, 63, 0.35);
    font-family: var(--font-sans);
    font-size: calc(3.25rem * var(--ref-s));
    line-height: 0.55;
    margin-bottom: 0.15rem;
}

.home-ref-review-quote,
.home-ref-review-card p {
    min-height: 4.5rem;
    margin: 0 0 1.35rem;
    color: var(--ref-text);
    font-size: calc(0.92rem * var(--ref-s));
    line-height: 1.65;
    font-weight: 500;
}

.home-ref-review-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ref-border);
}

.home-ref-review-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ref-navy), #285d87);
    color: #fff;
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 900;
    letter-spacing: 0.04em;
    overflow: hidden;
}

.home-ref-review-avatar--photo {
    background: #e8edf2;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(13, 48, 87, 0.08);
}

.home-ref-review-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-ref-review-author strong {
    display: block;
    color: var(--ref-navy);
    font-size: calc(0.82rem * var(--ref-s));
    font-weight: 900;
    line-height: 1.2;
}

.home-ref-review-author span {
    display: block;
    margin-top: 0.12rem;
    color: var(--ref-muted);
    font-size: calc(0.68rem * var(--ref-s));
    font-weight: 700;
}

.home-ref-review-stars .is-off {
    opacity: 0.22;
}

.home-ref-review-more {
    margin: 0.55rem 0 0;
}

.home-ref-review-more a {
    color: var(--ref-navy);
    font-size: calc(0.82rem * var(--ref-s));
    font-weight: 800;
    text-decoration: none;
}

.home-ref-review-more a:hover {
    text-decoration: underline;
}

.home-ref-hero--testimonials {
    min-height: clamp(360px, 48vh, 480px);
}

.home-ref-hero--testimonials .home-ref-hero-grid {
    grid-template-columns: minmax(280px, 1.15fr) minmax(220px, 0.7fr);
}

.home-ref-review-score--hero {
    justify-self: end;
    align-items: center;
    text-align: center;
    padding: 1.35rem 1.5rem 1.2rem;
}

.home-ref-review-score-link {
    margin-top: 0.45rem;
    color: var(--ref-navy);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}

.home-ref-review-score-link:hover {
    text-decoration: underline;
}

.home-ref-reviews--page {
    overflow: visible;
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
}

.home-ref-review-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
}

.home-ref-reviews--page .home-ref-review-card {
    flex: none;
    width: 100%;
    min-width: 0;
}

.home-ref-reviews--page .home-ref-review-quote,
.home-ref-reviews--page .home-ref-review-card p {
    min-height: 0;
}

.home-ref-review-card--stars-only {
    padding: 1.15rem 1.2rem 1.05rem;
}

.home-ref-review-card--stars-only .home-ref-review-author {
    padding-top: 0;
    border-top: 0;
}

.home-ref-review-stars-only-heading {
    margin: 2.25rem 0 1rem;
    color: var(--ref-navy);
    font-size: 1.05rem;
    font-weight: 800;
}

.home-ref-review-grid--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-ref-process-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.home-ref-process-row article {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.home-ref-process-row span {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ref-navy);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 8px 20px rgba(13, 48, 87, 0.22);
}

.home-ref-process-row p {
    margin: 0;
    color: var(--ref-text);
    font-size: calc(0.82rem * var(--ref-s));
    line-height: 1.45;
}

.home-ref-dms-services,
.home-ref-dms-faq {
    padding: clamp(1.75rem, 4vw, 3.2rem) 0;
    background: #fff;
}

.home-ref-service-grid--hub {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-ref-service-eyebrow {
    margin: 0 0 0.35rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: calc(0.66rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-ref-dms-related {
    max-width: 720px;
    margin: 1.35rem 0 0;
    color: var(--ref-muted);
    font-size: calc(0.92rem * var(--ref-s));
    line-height: 1.65;
}

.home-ref-dms-related a {
    color: var(--ref-navy);
    font-weight: 800;
}

.home-ref-guide-grid--reverse {
    grid-template-columns: 1.25fr 1fr;
}

.home-ref-guide-grid--reverse .home-ref-team-image {
    order: -1;
}

.home-ref-wd-seo {
    padding: clamp(1.75rem, 4vw, 3rem) 0;
    background: #f8faff;
}

.home-ref-wd-process-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.home-ref-wd-process-grid .home-ref-dms-process-step {
    margin: 0;
}

@media (max-width: 1100px) {
    .home-ref-guide-grid--reverse {
        grid-template-columns: 1fr;
    }

    .home-ref-guide-grid--reverse .home-ref-team-image {
        order: 0;
    }
}

@media (max-width: 640px) {
    .home-ref-wd-process-grid {
        grid-template-columns: 1fr;
    }
}

.home-ref-process-row--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-ref-process-row--three article {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.25rem;
    border-radius: 12px;
    background: #f8faff;
    border: 1px solid var(--ref-border);
}

.home-ref-process-row--three h3 {
    margin: 0 0 0.35rem;
    color: var(--ref-navy);
    font-size: calc(1rem * var(--ref-s));
    font-weight: 900;
}

.home-ref-process-row--three article p {
    font-size: calc(0.88rem * var(--ref-s));
    line-height: 1.6;
}

.home-ref-button--on-dark {
    margin-top: 1.25rem;
}

.home-ref-manifesto-copy a {
    color: var(--ref-gold);
    font-weight: 800;
}

.home-ref-dms-faq-list {
    max-width: 760px;
    display: grid;
    gap: 0.7rem;
}

.home-ref-dms-faq .faq-item,
.home-ref-dms-faq .home-ref-dms-faq-item {
    margin: 0;
    border: 1px solid var(--ref-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(13, 48, 87, 0.05);
    overflow: hidden;
}

.home-ref-dms-faq .home-ref-dms-faq-item:first-child {
    border-top: 1px solid var(--ref-border);
}

.home-ref-dms-faq .faq-question {
    color: var(--ref-navy);
    font-weight: 800;
    padding: 1rem 1.1rem;
    gap: 0.85rem;
}

.home-ref-dms-faq .faq-question:hover {
    background: #f8fafc;
}

.home-ref-dms-faq .home-ref-dms-faq-item.is-open {
    border-color: rgba(13, 48, 87, 0.18);
    box-shadow: 0 14px 30px rgba(13, 48, 87, 0.08);
}

.home-ref-dms-faq .home-ref-dms-faq-item.is-open .faq-question {
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    border-bottom: 1px solid rgba(13, 48, 87, 0.08);
}

.home-ref-dms-faq .faq-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(13, 48, 87, 0.06);
    color: var(--ref-navy);
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    line-height: 1;
}

.home-ref-dms-faq .home-ref-dms-faq-item.is-open .faq-icon {
    background: var(--ref-gold);
    color: var(--ref-navy);
}

.home-ref-dms-faq .faq-answer {
    padding: 0 1.1rem;
}

.home-ref-dms-faq .home-ref-dms-faq-item.is-open .faq-answer {
    padding-bottom: 1rem;
}

.home-ref-dms-faq .faq-answer p {
    color: var(--ref-muted);
    line-height: 1.65;
}

.home-ref-dms-faq .faq-answer a {
    color: var(--ref-navy);
    font-weight: 800;
}

@media (max-width: 1100px) {
    .home-ref-service-grid--hub,
    .home-ref-process-row--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .home-ref-service-grid--hub,
    .home-ref-process-row--three {
        grid-template-columns: 1fr;
    }
}

/* Digital marketing services — page-specific layouts */
.home-ref-section-lead--light {
    color: rgba(255, 255, 255, 0.72);
    max-width: 560px;
}

.home-ref-dms-why {
    background: #fff;
}

.home-ref-dms-why-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: stretch;
}

.home-ref-dms-why-visual {
    position: relative;
    display: flex;
    min-height: 100%;
}

.home-ref-dms-why-photo {
    flex: 1;
    width: 100%;
    min-height: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 56px rgba(13, 48, 87, 0.14);
}

.home-ref-dms-why-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center 22%;
}

.home-ref-dms-why-badge {
    position: absolute;
    right: -0.5rem;
    bottom: -0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: var(--ref-navy);
    color: #fff;
    box-shadow: 0 16px 36px rgba(13, 48, 87, 0.24);
}

.home-ref-dms-why-badge strong {
    display: block;
    color: var(--ref-gold);
    font-size: calc(1.45rem * var(--ref-s));
    line-height: 1;
}

.home-ref-dms-why-badge span {
    display: block;
    margin-top: 0.25rem;
    font-size: calc(0.66rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

.home-ref-dms-why-stack {
    display: grid;
    gap: 0.85rem;
}

.home-ref-dms-why-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    padding: 1rem 1.05rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--ref-border);
    box-shadow: 0 12px 28px rgba(13, 48, 87, 0.06);
}

.home-ref-dms-why-num {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ref-navy);
    color: #fff;
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(13, 48, 87, 0.22);
}

.home-ref-dms-why-item h3 {
    margin: 0 0 0.35rem;
    color: var(--ref-navy);
    font-size: calc(0.98rem * var(--ref-s));
    font-weight: 900;
}

.home-ref-dms-why-item p {
    margin: 0;
    color: var(--ref-muted);
    font-size: calc(0.88rem * var(--ref-s));
    line-height: 1.6;
}

.home-ref-service-grid--hub .home-ref-service-card {
    background: linear-gradient(145deg, #0d3057 0%, #173f6b 55%, #0a2545 100%);
    box-shadow: 0 18px 40px rgba(13, 48, 87, 0.22);
}

.home-ref-service-grid--hub .home-ref-service-card::before {
    background: radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.12), transparent 42%);
}

.home-ref-service-grid--hub .home-ref-service-card.home-ref-service-card--web {
    background: linear-gradient(145deg, #0d3057 0%, #1a4a7a 52%, #0a2545 100%);
    box-shadow: 0 18px 40px rgba(13, 48, 87, 0.24), inset 0 0 0 1px rgba(231, 184, 63, 0.35);
}

.home-ref-service-grid--hub .home-ref-service-card.home-ref-service-card--seo {
    background: linear-gradient(145deg, #2e1847 0%, #6d28d9 52%, #4c1d95 100%);
    box-shadow: 0 18px 40px rgba(46, 24, 71, 0.26), inset 0 0 0 1px rgba(167, 139, 250, 0.32);
}

.home-ref-service-grid--hub .home-ref-service-card.home-ref-service-card--ads {
    background: linear-gradient(145deg, #123d2e 0%, #047857 55%, #0b2e22 100%);
    box-shadow: 0 18px 40px rgba(18, 61, 46, 0.26), inset 0 0 0 1px rgba(110, 231, 183, 0.3);
}

.home-ref-dms-results {
    padding: clamp(1.75rem, 4vw, 3.2rem) 0;
    background: #fff;
}

.home-ref-dms-results-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.home-ref-dms-result-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(13, 48, 87, 0.1);
    box-shadow: 0 16px 36px rgba(13, 48, 87, 0.08);
}

.home-ref-dms-result-shot {
    position: relative;
    background: #0b1f38;
    padding: 0.65rem 0.65rem 0;
}

.home-ref-browser--compact {
    position: relative;
    inset: auto;
    margin: 0;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    border: 0;
    box-shadow: none;
    background: #fff;
    animation: none;
}

.home-ref-browser--compact .home-ref-browser-bar {
    padding: 0.4rem 0.6rem;
    background: #eef2f7;
}

.home-ref-browser--compact img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    max-height: none;
    object-fit: cover;
    object-position: center top;
}

.home-ref-dms-result-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.05rem 1.1rem 1.2rem;
    background: linear-gradient(180deg, #fff 0%, #f7fafc 100%);
}

.home-ref-dms-result-meta {
    margin: 0;
    color: var(--ref-navy);
    font-size: calc(0.68rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-ref-dms-result-card h3 {
    margin: 0;
    color: var(--ref-navy);
    font-size: calc(1.12rem * var(--ref-s));
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.home-ref-dms-result-card p {
    margin: 0;
    color: var(--ref-muted);
    font-size: calc(0.9rem * var(--ref-s));
    line-height: 1.5;
}

@media (max-width: 1100px) {
    .home-ref-dms-results-grid {
        grid-template-columns: 1fr;
    }
}

/* Website Design page — DMS tone; gold reserved for primary CTAs only */
.page-website-design .home-ref-wd-folio-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-website-design .home-ref-wd-folio-card {
    color: inherit;
    text-decoration: none;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}

.page-website-design .home-ref-wd-folio-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px rgba(13, 48, 87, 0.14);
}

.page-website-design .home-ref-wd-folio-card:hover h3 {
    color: var(--ref-navy);
}

.page-website-design .home-ref-wd-fundamentals {
    padding: clamp(1.75rem, 4vw, 3.2rem) 0;
    background: linear-gradient(180deg, #f7fafc 0%, #fff 100%);
}

.page-website-design .home-ref-wd-pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.page-website-design .home-ref-wd-pillar {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 100%;
    padding: 1.35rem 1.25rem 1.45rem;
    border-radius: 16px;
    color: #fff;
    box-shadow: 0 18px 40px rgba(13, 48, 87, 0.16);
}

.page-website-design .home-ref-wd-pillar--navy {
    background: linear-gradient(145deg, #0d3057 0%, #1a4a7a 52%, #0a2545 100%);
}

.page-website-design .home-ref-wd-pillar--teal {
    background: linear-gradient(145deg, #0f766e 0%, #14b8a6 55%, #0d5c56 100%);
}

.page-website-design .home-ref-wd-pillar--emerald {
    background: linear-gradient(145deg, #123d2e 0%, #047857 55%, #0b2e22 100%);
}

.page-website-design .home-ref-wd-pillar-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.page-website-design .home-ref-wd-pillar h3 {
    margin: 0;
    color: #fff;
    font-size: calc(1.15rem * var(--ref-s));
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.25;
}

.page-website-design .home-ref-wd-pillar p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: calc(0.9rem * var(--ref-s));
    line-height: 1.6;
}

.page-website-design .home-ref-wd-service-grid .home-ref-service-card.home-ref-service-card--web {
    box-shadow: 0 18px 40px rgba(13, 48, 87, 0.24);
}

.page-website-design .home-ref-service-card em {
    color: rgba(255, 255, 255, 0.92);
}

.page-website-design .home-ref-dms-partner {
    background:
        radial-gradient(circle at 12% 18%, rgba(34, 211, 238, 0.14), transparent 34%),
        radial-gradient(circle at 88% 72%, rgba(110, 231, 183, 0.12), transparent 36%),
        linear-gradient(145deg, #071526 0%, #0d3057 42%, #123d2e 100%);
}

.page-website-design .home-ref-dms-faq .home-ref-dms-faq-item.is-open .faq-icon {
    background: var(--ref-teal);
    color: #fff;
}

@media (max-width: 1100px) {
    .page-website-design .home-ref-wd-folio-grid,
    .page-website-design .home-ref-wd-pillar-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1101px) and (max-width: 1280px) {
    .page-website-design .home-ref-wd-folio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.home-ref-service-grid--hub .home-ref-service-card > span.home-ref-service-icon {
    margin-bottom: 0.85rem;
}

.home-ref-dms-partner {
    position: relative;
    overflow: hidden;
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(231, 184, 63, 0.16), transparent 34%),
        radial-gradient(circle at 88% 72%, rgba(110, 231, 183, 0.12), transparent 36%),
        linear-gradient(145deg, #071526 0%, #0d3057 42%, #2e1847 100%);
    color: #fff;
}

.home-ref-dms-partner-glow {
    position: absolute;
    inset: 10% 8% auto;
    height: 280px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 68%);
    pointer-events: none;
}

.home-ref-dms-partner-inner {
    position: relative;
    z-index: 1;
}

.home-ref-dms-partner-head {
    max-width: 680px;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.home-ref-dms-partner-head h2 {
    margin: 0 0 0.65rem;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(1.65rem, 3.5vw, 2.65rem);
    letter-spacing: -0.05em;
    line-height: 1.02;
}

.home-ref-dms-partner-canvas {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: start;
}

.home-ref-dms-partner-visual {
    position: relative;
    min-height: 520px;
}

.home-ref-dms-partner-photo {
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.35);
}

.home-ref-dms-partner-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-ref-dms-partner-photo--main {
    width: 100%;
    aspect-ratio: 4 / 5;
}

.home-ref-dms-partner-photo--accent {
    position: absolute;
    right: -1.25rem;
    bottom: 4.5rem;
    width: min(52%, 240px);
    aspect-ratio: 4 / 3;
    transform: rotate(4deg);
}

.home-ref-dms-partner-proof {
    position: absolute;
    left: -0.5rem;
    bottom: 0.5rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--ref-navy);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.home-ref-dms-partner-proof-stars {
    display: block;
    color: var(--ref-gold);
    font-size: calc(0.72rem * var(--ref-s));
    letter-spacing: 0.08em;
}

.home-ref-dms-partner-proof strong {
    display: block;
    font-size: calc(1.35rem * var(--ref-s));
    line-height: 1.1;
}

.home-ref-dms-partner-proof span:last-child {
    display: block;
    margin-top: 0.15rem;
    color: var(--ref-muted);
    font-size: calc(0.66rem * var(--ref-s));
    font-weight: 800;
}

.home-ref-dms-partner-orbit {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(110px, auto);
    gap: 0.85rem;
}

.home-ref-dms-partner-spine {
    position: absolute;
    left: 0.65rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: linear-gradient(180deg, var(--ref-gold), rgba(231, 184, 63, 0.08));
    border-radius: 999px;
    pointer-events: none;
}

.home-ref-dms-partner-node {
    position: relative;
    padding: 1.1rem 1.15rem 1.1rem 1.35rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.home-ref-dms-partner-node--tone-1 {
    background:
        linear-gradient(145deg, rgba(253, 230, 138, 0.22), rgba(255, 255, 255, 0.05)),
        rgba(255, 255, 255, 0.06);
    border-color: rgba(253, 230, 138, 0.28);
}

.home-ref-dms-partner-node--tone-2 {
    background:
        linear-gradient(145deg, rgba(167, 243, 208, 0.2), rgba(255, 255, 255, 0.05)),
        rgba(255, 255, 255, 0.06);
    border-color: rgba(167, 243, 208, 0.28);
}

.home-ref-dms-partner-node--tone-3 {
    background:
        linear-gradient(145deg, rgba(165, 243, 252, 0.2), rgba(255, 255, 255, 0.05)),
        rgba(255, 255, 255, 0.06);
    border-color: rgba(165, 243, 252, 0.28);
}

.home-ref-dms-partner-node--tone-4 {
    background:
        linear-gradient(145deg, rgba(221, 214, 254, 0.22), rgba(255, 255, 255, 0.05)),
        rgba(255, 255, 255, 0.06);
    border-color: rgba(221, 214, 254, 0.28);
}

.home-ref-dms-partner-node--tone-5 {
    background:
        linear-gradient(145deg, rgba(254, 215, 170, 0.22), rgba(255, 255, 255, 0.05)),
        rgba(255, 255, 255, 0.06);
    border-color: rgba(254, 215, 170, 0.28);
}

.home-ref-dms-partner-node--tone-6 {
    background:
        linear-gradient(145deg, rgba(187, 247, 208, 0.2), rgba(255, 255, 255, 0.05)),
        rgba(255, 255, 255, 0.06);
    border-color: rgba(187, 247, 208, 0.28);
}

.home-ref-dms-partner-node--tone-7 {
    background:
        linear-gradient(145deg, rgba(186, 230, 253, 0.22), rgba(255, 255, 255, 0.05)),
        rgba(255, 255, 255, 0.06);
    border-color: rgba(186, 230, 253, 0.28);
}

.home-ref-dms-partner-node::before {
    content: '';
    position: absolute;
    left: -1.05rem;
    top: 1.35rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ref-gold);
    box-shadow: 0 0 0 4px rgba(231, 184, 63, 0.18);
}

.home-ref-dms-partner-node--feature {
    grid-column: 1 / span 7;
    grid-row: 1;
    padding: 1.35rem 1.35rem 1.35rem 1.55rem;
}

.home-ref-dms-partner-node--tall {
    grid-column: 8 / span 5;
    grid-row: 1 / span 2;
}

.home-ref-dms-partner-node--compact:nth-of-type(3) {
    grid-column: 1 / span 4;
    grid-row: 2;
}

.home-ref-dms-partner-node--compact:nth-of-type(4) {
    grid-column: 5 / span 3;
    grid-row: 2;
}

.home-ref-dms-partner-node--wide:nth-of-type(5) {
    grid-column: 1 / span 6;
    grid-row: 3;
}

.home-ref-dms-partner-node--wide:nth-of-type(6) {
    grid-column: 7 / span 6;
    grid-row: 3;
}

.home-ref-dms-partner-node--full,
.home-ref-dms-partner-node--wide:nth-of-type(7) {
    grid-column: 1 / span 12;
    grid-row: 4;
}

.home-ref-dms-partner-node-num {
    display: inline-block;
    margin-bottom: 0.45rem;
    color: var(--ref-gold);
    font-size: calc(0.66rem * var(--ref-s));
    font-weight: 900;
    letter-spacing: 0.12em;
}

.home-ref-dms-partner-node h3 {
    margin: 0 0 0.45rem;
    color: #fff;
    font-size: calc(1rem * var(--ref-s));
    font-weight: 900;
    line-height: 1.2;
    overflow-wrap: break-word;
}

.home-ref-dms-partner-node--feature h3 {
    font-size: calc(1.2rem * var(--ref-s));
}

.home-ref-dms-partner-node p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: calc(0.84rem * var(--ref-s));
    line-height: 1.6;
}

.home-ref-dms-process {
    background: #f8faff;
}

.home-ref-dms-process-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

.home-ref-dms-process-visual img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(13, 48, 87, 0.12);
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.home-ref-dms-process-steps {
    display: grid;
    gap: 0.85rem;
    margin-top: 1rem;
}

.home-ref-dms-process-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    padding: 1rem 1.05rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--ref-border);
}

.home-ref-dms-process-step > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ref-navy);
    color: #fff;
    font-weight: 900;
}


.home-ref-dms-process-step h3 {
    margin: 0 0 0.35rem;
    color: var(--ref-navy);
    font-size: calc(0.98rem * var(--ref-s));
    font-weight: 900;
}

.home-ref-dms-process-step p {
    margin: 0;
    color: var(--ref-muted);
    font-size: calc(0.88rem * var(--ref-s));
    line-height: 1.6;
}

.home-ref-dms-manifesto {
    position: relative;
    overflow: hidden;
}

.home-ref-dms-manifesto-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.22;
}

.home-ref-dms-manifesto .container {
    position: relative;
    z-index: 1;
}

@media (max-width: 1100px) {
    .home-ref-dms-why-grid,
    .home-ref-dms-process-grid,
    .home-ref-dms-partner-canvas {
        grid-template-columns: 1fr;
    }

    .home-ref-dms-partner-visual {
        min-height: 0;
        max-width: 420px;
        margin: 0 auto;
    }

    .home-ref-dms-partner-orbit {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .home-ref-dms-partner-node,
    .home-ref-dms-partner-node--feature,
    .home-ref-dms-partner-node--tall,
    .home-ref-dms-partner-node--compact:nth-of-type(3),
    .home-ref-dms-partner-node--compact:nth-of-type(4),
    .home-ref-dms-partner-node--wide:nth-of-type(5),
    .home-ref-dms-partner-node--wide:nth-of-type(6),
    .home-ref-dms-partner-node--full,
    .home-ref-dms-partner-node--wide:nth-of-type(7) {
        grid-column: 1;
        grid-row: auto;
    }

    .home-ref-dms-partner-spine,
    .home-ref-dms-partner-node::before {
        display: none;
    }
}

@media (max-width: 767px) {
    .home-ref-dms-partner-photo--accent {
        right: 0.5rem;
        bottom: 3.5rem;
        width: 46%;
        transform: rotate(2deg);
    }

    .home-ref-dms-why-photo {
        min-height: 320px;
        aspect-ratio: 4 / 3;
    }

    .home-ref-dms-why-photo img {
        min-height: 0;
    }

    .home-ref-dms-why-badge {
        right: 0.5rem;
        bottom: -0.5rem;
    }
}

.home-ref-final {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 4.5rem);
    color: var(--ref-navy);
    background: linear-gradient(155deg, var(--ref-midnight) 0%, var(--ref-navy) 55%, #1a3a6e 100%);
}

.home-ref-final::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
    pointer-events: none;
    z-index: 0;
}

.home-ref-final-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2rem);
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, var(--ref-gold) 0%, #f5d06a 45%, #fde68a 100%);
    box-shadow:
        0 28px 56px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}

.home-ref-final-copy h2 {
    margin: 0 0 0.35rem;
    max-width: 520px;
    color: var(--ref-navy);
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(1.25rem, 2.5vw, 1.65rem);
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.home-ref-final-copy p {
    margin: 0;
    color: rgba(13, 48, 87, 0.78);
    font-size: calc(0.82rem * var(--ref-s));
}

.home-ref-final-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-shrink: 0;
    min-height: 48px;
    padding: 0.85rem 1.35rem;
    border-radius: 999px;
    background: rgba(13, 48, 87, 0.1);
    border: 1.5px solid var(--ref-navy);
    color: var(--ref-navy);
    font-size: calc(0.82rem * var(--ref-s));
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: none;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.home-ref-final-button:hover {
    background: var(--ref-navy);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: none;
}

@media (max-width: 1100px) {
    .home-ref-hero-grid,
    .home-ref-problem-services-grid,
    .home-ref-guide-grid,
    .home-ref-final-inner {
        grid-template-columns: 1fr;
    }

    .home-ref-final-inner {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }

    .home-ref-final-copy h2 {
        max-width: none;
    }

    .home-ref-work-grid,
    .home-ref-results-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-ref-service-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 980px) {
    .home-ref-review-grid,
    .home-ref-review-grid--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-ref-hero--testimonials .home-ref-hero-grid {
        grid-template-columns: 1fr;
    }

    .home-ref-review-score--hero {
        justify-self: start;
    }
}

@media (max-width: 820px) {
    .home-ref-proof-row,
    .home-ref-stat-grid,
    .home-ref-process-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-ref-work-grid,
    .home-ref-results-grid,
    .home-ref-service-grid,
    .home-ref-guide-points {
        grid-template-columns: 1fr 1fr;
    }

    .home-ref-hero-visual {
        min-height: 480px;
    }
}

@media (max-width: 580px) {
    .home-ref-actions,
    .home-ref-review-head {
        align-items: stretch;
        flex-direction: column;
    }

    .home-ref-review-grid,
    .home-ref-review-grid--compact {
        grid-template-columns: 1fr;
    }

    .home-ref-review-score {
        align-items: flex-start;
        text-align: left;
    }

    .home-ref-proof-row,
    .home-ref-stat-grid,
    .home-ref-work-grid,
    .home-ref-results-grid,
    .home-ref-service-grid,
    .home-ref-process-row,
    .home-ref-guide-points {
        grid-template-columns: 1fr;
    }

    .home-ref-card-rankings,
    .home-ref-card-chart,
    .home-ref-card-ads {
        position: relative;
        inset: auto;
        width: 100%;
        margin-top: 0.75rem;
    }

    .home-ref-browser {
        position: relative;
        inset: auto;
    }

    .home-ref-final-button {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .home-ref-hero-visual {
        min-height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-ref-browser,
    .home-ref-card,
    .home-ref-review-track,
    .home-ref-logo-track {
        animation: none;
    }
}

/* ── Why choose us ── */

.why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.why-card {
    display: flex;
    gap: 1.25rem;
    padding: 1.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: box-shadow 0.3s, transform 0.3s;
}

.why-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.why-num {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: var(--accent-light);
    color: var(--accent);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.why-card h3 {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.why-card p {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0;
}

@media (max-width: 1024px) {
    .testimonial-grid,
    .values-grid,
    .team-grid,
    .why-grid,
    .post-grid--cols-3,
    .post-grid--cols-4 {
        grid-template-columns: 1fr 1fr;
    }

    .timeline {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .timeline::before {
        display: none;
    }
}

@media (max-width: 767px) {
    .testimonial-grid,
    .values-grid,
    .team-grid,
    .why-grid,
    .timeline,
    .contact-layout,
    .contact-form-fields,
    .post-grid--cols-2,
    .post-grid--cols-3,
    .post-grid--cols-4 {
        grid-template-columns: 1fr;
    }

    .form-group--half {
        grid-column: 1 / -1;
    }
}

/* Responsive layout rules: generated from Admin → Options → Layout breakpoints */


/* ── Shared notices (contact form; admin notices live in admin.css) ── */

.notice {
    padding: 0.9rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.notice-success {
    background: #dcfce7;
    color: var(--success);
}

.notice-error {
    background: #fee2e2;
    color: var(--error);
}

.notice ul {
    margin: 0;
    padding-left: 1.2rem;
}

.contact-notice {
    align-self: start;
}

    .contact-layout .notice ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* About page — extends homepage reference design */
.home-ref-hero--about {
    min-height: clamp(460px, 64vh, 600px);
    padding-bottom: 2.75rem;
}

.home-ref-hero-visual--about-team {
    min-height: clamp(420px, 46vw, 540px);
}

.home-ref-about-hero-stage {
    position: absolute;
    inset: 5% 9% 18% 9%;
    z-index: 2;
    border-radius: 24px;
    border: 3px solid transparent;
    background:
        radial-gradient(circle at 30% 28%, rgba(34, 211, 238, 0.14), transparent 44%),
        radial-gradient(circle at 72% 64%, rgba(139, 92, 246, 0.12), transparent 48%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(238, 244, 249, 0.9)) padding-box,
        var(--ref-gradient-border) border-box;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.home-ref-about-hero-orbit-system {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
}

.home-ref-about-hero-orbit-ring {
    position: absolute;
    left: 50%;
    top: 42%;
    border-radius: 50%;
    border: 1px dashed rgba(13, 48, 87, 0.16);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.home-ref-about-hero-orbit-ring--outer {
    width: min(78%, 280px);
    aspect-ratio: 1;
}

.home-ref-about-hero-orbit-ring--inner {
    width: min(50%, 180px);
    aspect-ratio: 1;
    border-color: rgba(231, 184, 63, 0.35);
}

.home-ref-about-hero-orbit-track {
    position: absolute;
    left: 50%;
    top: 42%;
    width: 0;
    height: 0;
    pointer-events: none;
}

.home-ref-about-hero-planet {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow:
        0 0 0 1px rgba(13, 48, 87, 0.1),
        0 12px 28px rgba(13, 48, 87, 0.2);
    animation: about-planet-orbit var(--orbit-duration, 34s) linear infinite;
    animation-delay: calc(var(--orbit-duration, 34s) * -1 * var(--orbit-i) / var(--orbit-count));
    will-change: transform;
    pointer-events: auto;
    color: inherit;
    text-decoration: none;
}

.home-ref-about-hero-planet--outer {
    --orbit-duration: 120s;
    --orbit-radius: clamp(88px, 12vw, 118px);
    width: clamp(46px, 6.4vw, 58px);
    height: clamp(46px, 6.4vw, 58px);
    margin: calc(clamp(46px, 6.4vw, 58px) / -2);
}

.home-ref-about-hero-planet--inner {
    --orbit-duration: 90s;
    --orbit-radius: clamp(56px, 8.5vw, 76px);
    width: clamp(50px, 7.2vw, 64px);
    height: clamp(50px, 7.2vw, 64px);
    margin: calc(clamp(50px, 7.2vw, 64px) / -2);
    animation-direction: reverse;
}

.home-ref-about-hero-planet img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes about-planet-orbit {
    from {
        transform: rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(var(--orbit-radius)) rotate(-360deg);
    }
}

.home-ref-about-hero-quote {
    position: absolute;
    left: 50%;
    bottom: 5%;
    z-index: 4;
    width: min(70%, 240px);
    margin: 0;
    padding: 0.75rem 0.9rem;
    border-radius: 14px;
    background: rgba(13, 48, 87, 0.92);
    color: #fff;
    text-align: center;
    transform: translateX(-50%);
    box-shadow: 0 16px 36px rgba(13, 48, 87, 0.24);
}

.home-ref-about-hero-quote p {
    margin: 0 0 0.35rem;
    font-family: var(--font-sans);
    font-size: calc(0.95rem * var(--ref-s));
    line-height: 1.35;
}

.home-ref-about-hero-quote cite {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: calc(0.66rem * var(--ref-s));
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.home-ref-card-about-since {
    top: 0;
    right: 0;
    width: min(190px, 36%);
    animation-delay: 0.1s;
}

.home-ref-card-about-tone-navy {
    background: linear-gradient(145deg, #0d3057, #1a4f7a);
    border-color: rgba(13, 48, 87, 0.35);
    color: #fff;
}

.home-ref-card-about-tone-navy p,
.home-ref-card-about-tone-navy span {
    color: rgba(255, 255, 255, 0.78);
}

.home-ref-card-about-tone-navy strong {
    color: var(--ref-gold);
}

.home-ref-card-about-since strong {
    display: block;
    font-size: calc(1.65rem * var(--ref-s));
    line-height: 1;
}

.home-ref-card-about-since span {
    display: block;
    margin-top: 0.35rem;
    font-size: calc(0.66rem * var(--ref-s));
    line-height: 1.35;
}

.home-ref-card-about-experience {
    left: -4%;
    bottom: 2%;
    width: min(200px, 38%);
    animation-delay: 0.25s;
}

.home-ref-card-about-tone-emerald {
    background: linear-gradient(145deg, #ecfdf5, #d1fae5);
    border-color: #6ee7b7;
}

.home-ref-card-about-experience strong {
    display: block;
    color: #047857;
    font-size: calc(1.55rem * var(--ref-s));
    line-height: 1;
}

.home-ref-card-about-experience span {
    display: block;
    margin-top: 0.35rem;
    color: #065f46;
    font-size: calc(0.66rem * var(--ref-s));
    line-height: 1.35;
}

.home-ref-card-about-bc {
    right: -4%;
    bottom: -2%;
    width: min(180px, 34%);
    animation-delay: 0.4s;
}

.home-ref-card-about-tone-gold {
    background: linear-gradient(145deg, #fff8e8, #fdecc8);
    border-color: #e7b83f;
}

.home-ref-card-about-bc strong {
    display: block;
    color: #9a6700;
    font-size: calc(1.35rem * var(--ref-s));
    line-height: 1;
}

.home-ref-card-about-bc span {
    display: block;
    margin-top: 0.35rem;
    color: #7a5200;
    font-size: calc(0.66rem * var(--ref-s));
    line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
    .home-ref-about-hero-planet {
        animation: none;
    }

    .home-ref-about-hero-planet--outer:nth-child(1) { transform: rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg); }
    .home-ref-about-hero-planet--outer:nth-child(2) { transform: rotate(90deg) translateX(var(--orbit-radius)) rotate(-90deg); }
    .home-ref-about-hero-planet--outer:nth-child(3) { transform: rotate(180deg) translateX(var(--orbit-radius)) rotate(-180deg); }
    .home-ref-about-hero-planet--outer:nth-child(4) { transform: rotate(270deg) translateX(var(--orbit-radius)) rotate(-270deg); }
    .home-ref-about-hero-planet--inner:nth-child(1) { transform: rotate(0deg) translateX(var(--orbit-radius)) rotate(0deg); }
    .home-ref-about-hero-planet--inner:nth-child(2) { transform: rotate(120deg) translateX(var(--orbit-radius)) rotate(-120deg); }
    .home-ref-about-hero-planet--inner:nth-child(3) { transform: rotate(240deg) translateX(var(--orbit-radius)) rotate(-240deg); }
}

@keyframes ref-about-face-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.home-ref-pullquote {
    margin: 1.25rem 0 0;
    color: var(--ref-navy);
    font-family: var(--font-sans);
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
    font-weight: 900;
    line-height: 1.25;
}

.home-ref-guide--muted {
    background: var(--ref-cream);
}

.home-ref-about-services,
.home-ref-about-competencies,
.home-ref-about-history,
.home-ref-about-team {
    padding: clamp(1.75rem, 4vw, 3.2rem) 0;
    background: #fff;
}

.home-ref-about-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.15rem;
}

.home-ref-about-panel {
    padding: 1.5rem 1.35rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--ref-border);
    box-shadow: 0 12px 30px rgba(16, 35, 61, 0.05);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.home-ref-about-panel:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(13, 48, 87, 0.1);
}

.home-ref-about-panel h3 {
    margin: 0.35rem 0 0.75rem;
    color: var(--ref-navy);
    font-size: calc(1.05rem * var(--ref-s));
    font-weight: 900;
    letter-spacing: -0.03em;
}

.home-ref-about-panel p {
    margin: 0 0 0.75rem;
    color: var(--ref-muted);
    font-size: calc(0.92rem * var(--ref-s));
    line-height: 1.65;
}

.home-ref-about-panel p:last-child {
    margin-bottom: 0;
}

.home-ref-competency-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem;
}

.home-ref-competency-card {
    padding: 1.5rem 1.35rem;
    border-radius: 16px;
    background: var(--ref-bg);
    border: 1px solid var(--ref-border);
}

.home-ref-competency-card h3 {
    margin: 0 0 1rem;
    color: var(--ref-navy);
    font-size: calc(1rem * var(--ref-s));
    font-weight: 900;
}

.home-ref-check-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.55rem;
}

.home-ref-check-list li {
    position: relative;
    padding-left: 1.35rem;
    color: var(--ref-text);
    font-size: calc(0.88rem * var(--ref-s));
    font-weight: 600;
    line-height: 1.45;
}

.home-ref-check-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ref-gold);
    box-shadow: 0 0 0 3px rgba(231, 184, 63, 0.2);
}

.home-ref-about-manifesto {
    padding: clamp(2rem, 4vw, 3rem) 0;
    background: linear-gradient(135deg, var(--ref-navy) 0%, var(--ref-purple) 100%);
    color: #fff;
}

.home-ref-eyebrow--light {
    color: rgba(255, 255, 255, 0.72);
}

.home-ref-about-manifesto h2 {
    margin: 0 0 1rem;
    max-width: 640px;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
    letter-spacing: -0.035em;
}

.home-ref-manifesto-copy p {
    max-width: 720px;
    margin: 0 0 0.85rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: calc(0.98rem * var(--ref-s));
    line-height: 1.72;
}

.home-ref-manifesto-copy p:last-child {
    margin-bottom: 0;
}

.home-ref-stat-grid--values .home-ref-stat-card {
    min-height: 220px;
}

.home-ref-value-card .home-ref-stat-label {
    text-transform: none;
    letter-spacing: -0.02em;
    font-size: calc(0.92rem * var(--ref-s));
    line-height: 1.3;
}

.home-ref-value-body p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--ref-muted);
    font-size: calc(0.88rem * var(--ref-s));
    line-height: 1.55;
    font-weight: 600;
}

.home-ref-founder-quote {
    margin: 0 0 2rem;
    padding: 1.75rem 1.5rem;
    border-radius: 16px;
    background: var(--ref-cream);
    border: 1px solid var(--ref-border);
    box-shadow: 0 12px 30px rgba(16, 35, 61, 0.05);
}

.home-ref-founder-quote p {
    margin: 0 0 1rem;
    color: var(--ref-text);
    font-family: var(--font-sans);
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    line-height: 1.5;
}

.home-ref-founder-quote footer strong {
    display: block;
    color: var(--ref-navy);
    font-size: calc(0.92rem * var(--ref-s));
}

.home-ref-founder-quote footer span {
    color: var(--ref-muted);
    font-size: calc(0.78rem * var(--ref-s));
    font-weight: 700;
}

.home-ref-timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.home-ref-timeline-item {
    padding: 1.1rem 1rem;
    border-radius: 12px;
    background: var(--ref-bg);
    border: 1px solid var(--ref-border);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.home-ref-timeline-item:hover {
    transform: translateY(-3px);
    border-color: rgba(13, 48, 87, 0.16);
}

.home-ref-timeline-year {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--ref-gold);
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-ref-timeline-item p {
    margin: 0;
    color: var(--ref-text);
    font-size: calc(0.86rem * var(--ref-s));
    font-weight: 700;
    line-height: 1.45;
}

.home-ref-team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.home-ref-team-hover-hint {
    margin: 0.75rem 0 0;
    color: var(--ref-muted);
    font-size: calc(0.78rem * var(--ref-s));
    font-weight: 700;
    font-style: italic;
}

.home-ref-team-image--funky {
    border-radius: 22px;
    transform: rotate(-1.5deg);
    box-shadow:
        0 22px 50px rgba(13, 48, 87, 0.14),
        0 0 0 4px rgba(231, 184, 63, 0.35);
}

.home-ref-team-card {
    display: block;
    width: 100%;
    padding: 1.25rem 1rem 1.1rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--ref-border);
    box-shadow: 0 10px 28px rgba(16, 35, 61, 0.05);
    text-align: center;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

a.home-ref-team-card:hover,
a.home-ref-team-card:focus-visible {
    color: inherit;
    text-decoration: none;
}

.home-ref-team-card:focus-visible {
    outline: 3px solid rgba(231, 184, 63, 0.65);
    outline-offset: 3px;
}

.home-ref-team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(13, 48, 87, 0.1);
}

.home-ref-team-avatar {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 0.85rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ref-navy), #285d87);
    color: #fff;
    font-size: calc(0.82rem * var(--ref-s));
    font-weight: 900;
    letter-spacing: 0.04em;
    overflow: hidden;
}

.home-ref-team-avatar--photo {
    background: #e8edf2;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(13, 48, 87, 0.08);
}

.home-ref-team-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
}

.home-ref-team-avatar--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
}

.home-ref-team-card h3,
.home-ref-team-card-name {
    margin: 0 0 0.2rem;
    color: var(--ref-navy);
    font-size: calc(0.95rem * var(--ref-s));
    font-weight: 900;
}

.home-ref-team-card p,
.home-ref-team-card-role {
    display: block;
    margin: 0;
    color: var(--ref-muted);
    font-size: calc(0.75rem * var(--ref-s));
    font-weight: 700;
}

.home-ref-team-card-more {
    display: inline-block;
    margin-top: 0.55rem;
    color: var(--ref-navy);
    font-size: calc(0.7rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.02em;
    opacity: 0.45;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.home-ref-team-card:hover .home-ref-team-card-more,
.home-ref-team-card:focus-visible .home-ref-team-card-more {
    opacity: 1;
    color: var(--ref-navy);
}

body.team-modal-open {
    overflow: hidden;
}

.home-ref-team-modal[hidden] {
    display: none !important;
}

.home-ref-team-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: clamp(0.85rem, 2.6vw, 2rem);
}

.home-ref-team-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 20, 36, 0.72);
    backdrop-filter: blur(4px);
}

.home-ref-team-modal-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(1160px, 100%);
    max-height: min(94vh, 920px);
    overflow: hidden;
    border-radius: 28px;
    background: #fff;
    border: 1px solid var(--ref-border);
    box-shadow: 0 32px 90px rgba(8, 20, 36, 0.3);
    animation: ref-card-in 0.35s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.home-ref-team-modal-close {
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(13, 48, 87, 0.08);
    color: var(--ref-navy);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.home-ref-team-modal-close:hover {
    background: rgba(13, 48, 87, 0.14);
}

.home-ref-team-modal-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: clamp(2rem, 3.6vw, 3rem) clamp(2rem, 3.8vw, 3.25rem) clamp(2rem, 3.6vw, 3rem);
}

.home-ref-team-modal-layout {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: clamp(1.75rem, 3.2vw, 2.75rem);
    align-items: start;
}

.home-ref-team-modal-photo-wrap {
    position: sticky;
    top: 0;
}

.home-ref-team-modal-photo {
    display: block;
    width: 100%;
    border-radius: 22px;
    object-fit: cover;
    object-position: 50% 14%;
    aspect-ratio: 4 / 5;
    background: #f4f7fb;
    box-shadow: 0 18px 44px rgba(13, 48, 87, 0.14);
}

.home-ref-team-modal-copy {
    padding-right: 2.5rem;
    min-width: 0;
}

.home-ref-team-modal-copy .home-ref-eyebrow {
    margin-bottom: 0.45rem;
}

.home-ref-team-modal-copy h3 {
    margin: 0 0 0.4rem;
    color: var(--ref-navy);
    font-size: clamp(1.7rem, 2.8vw, 2.25rem);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1.12;
}

.home-ref-team-modal-role {
    margin: 0 0 1.5rem;
    color: var(--ref-gold);
    font-size: calc(0.86rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-ref-team-modal-bio {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1.45fr);
    gap: 0.9rem 1rem;
    align-items: start;
}

.home-ref-team-modal-bio p {
    margin: 0;
    color: var(--ref-muted);
    font-size: calc(1rem * var(--ref-s));
    line-height: 1.7;
}

.home-ref-team-modal-bio > p:has(> strong) {
    display: grid;
    align-content: start;
    gap: 0.45rem;
    padding: 1.05rem 1.1rem 1.1rem;
    border-radius: 16px;
    background: #f4f7fb;
    font-size: calc(0.92rem * var(--ref-s));
    line-height: 1.5;
}

.home-ref-team-modal-bio > p:not(:has(> strong)),
.home-ref-team-modal-bio > ul,
.home-ref-team-modal-bio > .home-ref-team-modal-meta,
.home-ref-team-modal-bio > .home-ref-team-modal-tags {
    grid-column: 1 / -1;
}

.home-ref-team-modal-bio > p:not(:has(> strong)) {
    margin-top: 1.05rem;
    max-width: 58ch;
}

.home-ref-team-modal-bio > p:not(:has(> strong)) + p:not(:has(> strong)) {
    margin-top: 0.85rem;
}

.home-ref-team-modal-bio p:last-child {
    margin-bottom: 0;
}

.home-ref-team-modal-bio strong {
    display: block;
    color: var(--ref-navy);
    font-size: calc(0.64rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.home-ref-team-modal-bio > p:has(> strong) span {
    display: block;
    color: var(--ref-navy);
    font-weight: 600;
    line-height: 1.45;
    overflow-wrap: break-word;
}

.home-ref-team-modal-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin: 0 0 0.5rem;
    padding: 0;
    border: 0;
}

.home-ref-team-modal-meta p {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: #f4f7fb;
    font-size: calc(0.9rem * var(--ref-s));
    line-height: 1.5;
}

.home-ref-team-modal-meta strong {
    display: block;
    margin: 0;
    color: var(--ref-navy);
    font-size: calc(0.66rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.home-ref-team-modal-meta span {
    display: block;
    color: var(--ref-navy);
    font-weight: 600;
    line-height: 1.45;
}

.home-ref-team-modal-bio > ul,
.home-ref-team-modal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 1.15rem 0 0;
    padding: 1.35rem 0 0;
    border-top: 1px solid var(--ref-border);
    list-style: none;
}

.home-ref-team-modal-bio > ul li,
.home-ref-team-modal-tags li {
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    background: rgba(13, 48, 87, 0.07);
    color: var(--ref-navy);
    font-size: calc(0.78rem * var(--ref-s));
    font-weight: 700;
}

@media (max-width: 980px) {
    .home-ref-team-modal-layout {
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
        gap: 1.5rem;
    }

    .home-ref-team-modal-bio {
        grid-template-columns: 1fr 1fr;
    }

    .home-ref-team-modal-bio > p:has(> strong):nth-of-type(3) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .home-ref-team-modal-layout {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .home-ref-team-modal-photo-wrap {
        position: static;
        max-width: 240px;
        margin: 0 auto;
    }

    .home-ref-team-modal-copy {
        padding-right: 0;
        padding-top: 0.15rem;
    }

    .home-ref-team-modal-content {
        padding: 3.5rem 1.35rem 1.75rem;
    }

    .home-ref-team-modal-copy h3 {
        text-align: center;
    }

    .home-ref-team-modal-copy .home-ref-eyebrow,
    .home-ref-team-modal-role {
        text-align: center;
    }

    .home-ref-team-modal-role {
        margin-bottom: 1.2rem;
    }

    .home-ref-team-modal-bio {
        grid-template-columns: 1fr 1fr;
    }

    .home-ref-team-modal-bio > p:not(:has(> strong)) {
        max-width: none;
        margin-top: 0.95rem;
    }
}

@media (max-width: 520px) {
    .home-ref-team-modal-photo-wrap {
        max-width: 188px;
    }

    .home-ref-team-modal-photo {
        aspect-ratio: 1;
        object-position: 50% 18%;
    }

    .home-ref-team-modal-bio {
        grid-template-columns: 1fr;
    }

    .home-ref-team-modal-bio > p:has(> strong):nth-of-type(3) {
        grid-column: auto;
    }
}

.home-ref-address {
    margin: 1rem 0 0;
    color: var(--ref-navy);
    font-size: calc(0.92rem * var(--ref-s));
    font-weight: 700;
    line-height: 1.5;
}

.home-ref-about-careers {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2.25rem, 4.5vw, 3.25rem) 0;
    color: #fff;
    background:
        radial-gradient(ellipse 70% 80% at 18% 100%, rgba(34, 211, 238, 0.16), transparent 58%),
        radial-gradient(ellipse 60% 70% at 88% 20%, rgba(139, 92, 246, 0.14), transparent 52%),
        linear-gradient(135deg, var(--ref-midnight) 0%, var(--ref-navy) 42%, #5b21b6 100%);
}

.home-ref-about-careers::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
    pointer-events: none;
    z-index: 0;
}

.home-ref-about-careers-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.5rem;
}

.home-ref-about-careers .home-ref-eyebrow {
    color: var(--ref-cyan);
}

.home-ref-about-careers h2 {
    margin: 0.35rem 0 0.65rem;
    color: #fff;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    font-weight: 900;
    letter-spacing: -0.035em;
}

.home-ref-about-careers .home-ref-section-lead {
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 0;
}

.home-ref-about-careers .home-ref-button {
    flex-shrink: 0;
    border-radius: 999px;
}

@media (max-width: 1100px) {
    .home-ref-hero--about {
        min-height: auto;
    }

    .home-ref-hero-visual--about-team {
        min-height: 360px;
    }

    .home-ref-about-services-grid,
    .home-ref-competency-grid,
    .home-ref-timeline,
    .home-ref-team-grid,
    .home-ref-about-careers-inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 820px) {
    .home-ref-hero-visual--about-team {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
        min-height: 0;
    }

    .home-ref-about-hero-stage {
        position: relative;
        inset: auto;
        width: 100%;
        min-height: 300px;
        flex-shrink: 0;
    }

    .home-ref-card-about-since,
    .home-ref-card-about-experience,
    .home-ref-card-about-bc {
        position: static;
        width: 100%;
        max-width: none;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        animation: none;
    }
}

@media (max-width: 767px) {
    .home-ref-about-services-grid,
    .home-ref-competency-grid,
    .home-ref-timeline,
    .home-ref-team-grid {
        grid-template-columns: 1fr;
    }

    .home-ref-about-careers-inner {
        grid-template-columns: 1fr;
    }

    .home-ref-hero-visual--about-team {
        min-height: 0;
    }

    .home-ref-about-hero-orbit-ring--outer {
        width: min(92%, 250px);
    }

    .home-ref-about-hero-orbit-ring--inner {
        width: min(62%, 170px);
    }

    .home-ref-about-hero-stage {
        min-height: 280px;
    }

    .home-ref-about-hero-orbit-system {
        min-height: 240px;
    }

    .home-ref-about-hero-planet--outer {
        --orbit-duration: 180s;
        --orbit-radius: 88px;
        width: 44px;
        height: 44px;
        margin: -22px;
    }

    .home-ref-about-hero-planet--inner {
        --orbit-duration: 140s;
        --orbit-radius: 58px;
        width: 50px;
        height: 50px;
        margin: -25px;
    }

    .home-ref-about-hero-quote {
        width: min(94%, 280px);
        padding: 0.7rem 0.85rem;
        bottom: 6%;
    }

    .home-ref-card-about-since,
    .home-ref-card-about-experience,
    .home-ref-card-about-bc {
        padding: 0.85rem 0.9rem;
    }

    .home-ref-card-about-since strong,
    .home-ref-card-about-experience strong {
        font-size: calc(1.25rem * var(--ref-s));
    }

    .home-ref-card-about-bc strong {
        font-size: calc(1.15rem * var(--ref-s));
    }
}

/* Website design page — editorial / bento layout (distinct from About orbit layout). */
.page-website-design {
    --wd-radius: 16px;
    --wd-radius-lg: 22px;
    --wd-border: linear-gradient(135deg, var(--ref-cyan), var(--ref-violet), var(--ref-teal));
    overflow-x: clip;
}

.page-website-design .wd-eyebrow {
    margin: 0 0 0.65rem;
    color: var(--ref-navy);
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.page-website-design .wd-eyebrow--light {
    color: rgba(255, 255, 255, 0.78);
}

.page-website-design .wd-section-head {
    max-width: 720px;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.page-website-design .wd-section-head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.page-website-design .wd-section-head h2 {
    margin: 0 0 0.75rem;
    color: var(--ref-navy);
    font-family: var(--font-heading);
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.page-website-design .wd-section-lead,
.page-website-design .wd-lead {
    margin: 0;
    color: var(--ref-muted);
    font-size: calc(0.98rem * var(--ref-s));
    line-height: 1.65;
}

.page-website-design .wd-lead {
    font-size: calc(1.05rem * var(--ref-s));
    max-width: 38rem;
}

.page-website-design .wd-prose p {
    margin: 0 0 1rem;
    color: var(--ref-muted);
    line-height: 1.7;
}

.page-website-design .wd-prose p:last-child {
    margin-bottom: 0;
}

.page-website-design .wd-prose a,
.page-website-design .wd-related a {
    color: var(--ref-navy);
    font-weight: 700;
}

.page-website-design .wd-prose--light a {
    color: var(--ref-gold);
    font-weight: 700;
}

.page-website-design .wd-prose--light p {
    color: rgba(255, 255, 255, 0.82);
}

.page-website-design .wd-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.78rem 1.35rem;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: calc(0.9rem * var(--ref-s));
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}

.page-website-design .wd-btn--gold {
    background: var(--ref-gold);
    color: var(--ref-navy);
    box-shadow: 0 12px 28px rgba(231, 184, 63, 0.32);
}

.page-website-design .wd-btn--gold:hover {
    transform: translateY(-2px);
    color: var(--ref-navy);
}

.page-website-design .wd-btn--navy {
    background: var(--ref-navy);
    color: #fff;
    box-shadow: 0 12px 28px rgba(13, 48, 87, 0.22);
}

.page-website-design .wd-btn--navy:hover {
    background: var(--ref-blue);
    color: #fff;
    transform: translateY(-2px);
}

.page-website-design .wd-btn--ghost {
    color: rgba(255, 255, 255, 0.92);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
}

.page-website-design .wd-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.page-website-design .wd-hero {
    position: relative;
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
    background:
        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(34, 211, 238, 0.22), transparent 50%),
        radial-gradient(ellipse 70% 55% at 90% 15%, rgba(139, 92, 246, 0.2), transparent 48%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(20, 184, 166, 0.18), transparent 55%),
        linear-gradient(155deg, var(--ref-midnight) 0%, var(--ref-navy) 38%, #1a3a6e 100%);
    overflow: hidden;
}

.page-website-design .wd-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.14;
    mix-blend-mode: luminosity;
}

.page-website-design .wd-hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, #000 20%, transparent 95%);
}

.page-website-design .wd-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

.page-website-design .wd-hero-copy h1 {
    margin: 0 0 1rem;
    color: #fff;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.page-website-design .wd-hero-copy .wd-lead {
    color: rgba(255, 255, 255, 0.82);
}

.page-website-design .wd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.35rem;
}

.page-website-design .wd-hero-micro {
    margin: 1.1rem 0 0;
    max-width: 34rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: calc(0.88rem * var(--ref-s));
    line-height: 1.55;
}

.page-website-design .wd-device-stack {
    position: relative;
    min-height: 340px;
}

.page-website-design .wd-device {
    border-radius: var(--wd-radius);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    border: 3px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        var(--wd-border) border-box;
}

.page-website-design .wd-device--desktop {
    width: min(100%, 520px);
    margin-left: auto;
}

.page-website-design .wd-device-chrome {
    display: flex;
    gap: 6px;
    padding: 0.65rem 0.85rem;
    background: #eef2f7;
    border-bottom: 1px solid var(--ref-border);
}

.page-website-design .wd-device-chrome span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cfd8e3;
}

.page-website-design .wd-device-chrome span:nth-child(1) { background: #ff5f57; }
.page-website-design .wd-device-chrome span:nth-child(2) { background: #febc2e; }
.page-website-design .wd-device-chrome span:nth-child(3) { background: #28c840; }

.page-website-design .wd-device--desktop img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.page-website-design .wd-device--phone {
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    width: 132px;
    padding: 0.45rem 0.45rem 0.65rem;
    border-radius: 22px;
    border: 3px solid #1a1a1a;
}

.page-website-design .wd-device-notch {
    width: 42%;
    height: 5px;
    margin: 0 auto 0.35rem;
    border-radius: 999px;
    background: #1a1a1a;
}

.page-website-design .wd-device--phone img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: 14px;
}

.page-website-design .wd-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 1.15rem 0 0;
    padding: 0;
    list-style: none;
}

.page-website-design .wd-hero-stats li {
    padding: 0.65rem 0.95rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
}

.page-website-design .wd-hero-stats strong {
    display: block;
    color: var(--ref-cyan);
    font-size: calc(1.15rem * var(--ref-s));
    font-weight: 900;
    line-height: 1.1;
}

.page-website-design .wd-hero-stats span {
    color: rgba(255, 255, 255, 0.72);
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page-website-design .wd-trust-bar {
    background: linear-gradient(90deg, var(--ref-navy) 0%, #1e4a7a 35%, #0f766e 70%, var(--ref-teal) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.page-website-design .wd-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.95rem 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-website-design .wd-trust-row span {
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.page-website-design .wd-trust-row span:not(:last-child)::after {
    content: none;
    margin: 0;
}

.page-website-design .wd-intro {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: #fff;
}

.page-website-design .wd-intro-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(1.25rem, 3vw, 2.25rem);
    align-items: center;
}

.page-website-design .wd-intro-media,
.page-website-design .wd-intro-mosaic {
    margin: 0;
    padding: 4px;
    border-radius: calc(var(--wd-radius-lg) + 4px);
    background: var(--wd-border);
    box-shadow: 0 24px 50px rgba(13, 48, 87, 0.14);
    overflow: hidden;
}

.page-website-design .wd-intro-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--wd-radius-lg);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.page-website-design .wd-intro-card {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: clamp(1.35rem, 3vw, 2rem);
    border-radius: var(--wd-radius-lg);
    background: var(--ref-cream);
    border: 1px solid rgba(13, 48, 87, 0.08);
    box-shadow: 0 20px 50px rgba(13, 48, 87, 0.1);
}

.page-website-design .wd-hero-stats li:nth-child(1) {
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.18), rgba(34, 211, 238, 0.08));
    border-color: rgba(34, 211, 238, 0.25);
}

.page-website-design .wd-hero-stats li:nth-child(1) strong {
    color: var(--ref-cyan);
}

.page-website-design .wd-hero-stats li:nth-child(2) {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.18), rgba(139, 92, 246, 0.08));
    border-color: rgba(139, 92, 246, 0.25);
}

.page-website-design .wd-hero-stats li:nth-child(2) strong {
    color: #c4b5fd;
}

.page-website-design .wd-hero-stats li:nth-child(3) {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.08));
    border-color: rgba(16, 185, 129, 0.3);
}

.page-website-design .wd-hero-stats li:nth-child(3) strong {
    color: #6ee7b7;
}

.page-website-design .wd-callout {
    margin: 1.25rem 0 0;
    padding: 1rem 1.15rem;
    border-left: 4px solid var(--ref-teal);
    border-radius: 0 14px 14px 0;
    background: linear-gradient(90deg, rgba(20, 184, 166, 0.12), rgba(34, 211, 238, 0.06));
    color: var(--ref-navy);
    font-size: calc(1rem * var(--ref-s));
    font-weight: 700;
    line-height: 1.5;
}

.page-website-design .wd-pillars {
    padding: clamp(2rem, 4vw, 3.5rem) 0;
    background: var(--ref-bg);
}

.page-website-design .wd-work {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: #fff;
}

.page-website-design .wd-work-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.page-website-design .wd-work-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--wd-radius);
    background: #fff;
    border: 1px solid rgba(13, 48, 87, 0.1);
    box-shadow: 0 16px 36px rgba(13, 48, 87, 0.08);
    text-decoration: none;
    color: inherit;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}

.page-website-design .wd-work-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px rgba(13, 48, 87, 0.14);
}

.page-website-design .wd-work-shot {
    background: #0b1f38;
    overflow: hidden;
}

.page-website-design .wd-work-shot img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center top;
}

.page-website-design .wd-work-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.1rem 1.15rem;
}

.page-website-design .wd-work-chip {
    margin: 0;
    color: var(--ref-teal);
    font-size: calc(0.68rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-website-design .wd-work-body h3 {
    margin: 0;
    color: var(--ref-navy);
    font-size: calc(1.05rem * var(--ref-s));
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.page-website-design .wd-proof-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
}

.page-website-design .wd-proof-rating {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: var(--ref-cream);
    border: 1px solid rgba(13, 48, 87, 0.08);
    color: var(--ref-muted);
    font-size: calc(0.82rem * var(--ref-s));
    font-weight: 700;
}

.page-website-design .wd-proof-rating span {
    color: var(--ref-teal);
    letter-spacing: 0.05em;
}

.page-website-design .wd-proof-rating strong {
    color: var(--ref-navy);
    font-size: calc(1.05rem * var(--ref-s));
}

.page-website-design .wd-work-body p {
    margin: 0;
    color: var(--ref-muted);
    font-size: calc(0.88rem * var(--ref-s));
    line-height: 1.5;
}

.page-website-design .wd-pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.page-website-design .wd-pillar {
    padding: 1.35rem 1.25rem 1.5rem;
    border-radius: var(--wd-radius);
    border: none;
    box-shadow: 0 16px 36px rgba(13, 48, 87, 0.12);
    color: #fff;
}

.page-website-design .wd-pillar--navy {
    background: linear-gradient(145deg, #0d3057 0%, #1a4a7a 52%, #0a2545 100%);
    box-shadow: 0 18px 40px rgba(13, 48, 87, 0.24);
}

.page-website-design .wd-pillar--teal {
    background: linear-gradient(145deg, #0f766e 0%, #14b8a6 55%, #0d5c56 100%);
    box-shadow: 0 18px 40px rgba(15, 118, 110, 0.24);
}

.page-website-design .wd-pillar--emerald {
    background: linear-gradient(145deg, #123d2e 0%, #047857 55%, #0b2e22 100%);
    box-shadow: 0 18px 40px rgba(18, 61, 46, 0.26);
}

.page-website-design .wd-pillar-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.85rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: calc(0.85rem * var(--ref-s));
    font-weight: 900;
}

.page-website-design .wd-pillar--gold .wd-pillar-num,
.page-website-design .wd-pillar--teal .wd-pillar-num,
.page-website-design .wd-pillar--emerald .wd-pillar-num,
.page-website-design .wd-pillar--navy .wd-pillar-num {
    background: rgba(255, 255, 255, 0.22);
}

.page-website-design .wd-pillar h3 {
    margin: 0 0 0.55rem;
    color: #fff;
    font-size: calc(1.05rem * var(--ref-s));
    font-weight: 900;
    line-height: 1.25;
}

.page-website-design .wd-pillar p {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: calc(0.88rem * var(--ref-s));
    line-height: 1.6;
}

.page-website-design .wd-seo-band {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background:
        radial-gradient(circle at 12% 18%, rgba(34, 211, 238, 0.14), transparent 34%),
        radial-gradient(circle at 88% 72%, rgba(110, 231, 183, 0.12), transparent 36%),
        linear-gradient(145deg, #071526 0%, #0d3057 42%, #123d2e 100%);
}

.page-website-design .wd-seo-grid {
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: center;
}

.page-website-design .wd-seo-copy h2 {
    margin: 0 0 0.85rem;
    color: #fff;
    font-size: clamp(1.55rem, 2.8vw, 2.15rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.page-website-design .wd-seo-visual {
    position: relative;
    padding-bottom: 5.5rem;
}

.page-website-design .wd-seo-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--wd-radius-lg);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
}

.page-website-design .wd-seo-metrics {
    position: absolute;
    left: -1rem;
    bottom: -1rem;
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-website-design .wd-seo-metrics li {
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

.page-website-design .wd-seo-metrics strong {
    display: block;
    color: var(--ref-navy);
    font-size: calc(1rem * var(--ref-s));
    font-weight: 900;
}

.page-website-design .wd-seo-metrics span {
    color: var(--ref-muted);
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 700;
}

.page-website-design .wd-seo-metrics li:nth-child(1) strong { color: var(--ref-navy); }
.page-website-design .wd-seo-metrics li:nth-child(2) strong { color: var(--ref-cyan); }
.page-website-design .wd-seo-metrics li:nth-child(3) strong { color: var(--ref-violet); }
.page-website-design .wd-seo-metrics li:nth-child(4) strong { color: var(--ref-teal); }

.page-website-design .wd-services {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: #fff;
}

.page-website-design .wd-build-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.page-website-design .wd-build-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--wd-radius);
    background: var(--ref-bg);
    border: 1px solid var(--ref-border);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

a.wd-build-card:hover {
    transform: translateY(-4px);
    border-color: rgba(13, 48, 87, 0.16);
    box-shadow: var(--ref-shadow);
}

.page-website-design .wd-build-thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.page-website-design .wd-build-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-website-design .wd-build-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.1rem 1.15rem 1.2rem;
}

.page-website-design .wd-build-body h3 {
    margin: 0 0 0.45rem;
    color: var(--ref-navy);
    font-size: calc(1.05rem * var(--ref-s));
    font-weight: 900;
    line-height: 1.25;
}

.page-website-design .wd-build-body p {
    margin: 0;
    color: var(--ref-muted);
    font-size: calc(0.88rem * var(--ref-s));
    line-height: 1.6;
}

.page-website-design .wd-includes {
    margin-top: 1.75rem;
    padding: 1.15rem 1.25rem 1.25rem;
    border-radius: var(--wd-radius);
    background: var(--ref-cream);
    border: 1px solid rgba(13, 48, 87, 0.08);
}

.page-website-design .wd-includes-label {
    margin: 0 0 0.75rem;
    color: var(--ref-navy);
    font-size: calc(0.78rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-website-design .wd-includes ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-website-design .wd-includes li {
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(13, 48, 87, 0.1);
    color: var(--ref-navy);
    font-size: calc(0.78rem * var(--ref-s));
    font-weight: 700;
}

.page-website-design .wd-process-note {
    max-width: 720px;
    margin: 1.75rem auto 0;
    text-align: center;
    color: var(--ref-muted);
    font-size: calc(0.98rem * var(--ref-s));
    line-height: 1.6;
}

.page-website-design .wd-bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.page-website-design .wd-bento-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--wd-radius);
    background: var(--ref-bg);
    border: 1px solid var(--ref-border);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.page-website-design .wd-bento-card--wide {
    grid-column: span 2;
}

.page-website-design .wd-bento-card:hover {
    transform: translateY(-4px);
    border-color: rgba(13, 48, 87, 0.16);
    box-shadow: var(--ref-shadow);
}

.page-website-design .wd-bento-thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.page-website-design .wd-bento-card--wide .wd-bento-thumb {
    aspect-ratio: 21 / 9;
}

.page-website-design .wd-bento-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.page-website-design .wd-bento-card:hover .wd-bento-thumb img {
    transform: scale(1.04);
}

.page-website-design .wd-bento-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1rem 1rem 1.1rem;
}

.page-website-design .wd-bento-label {
    margin: 0 0 0.25rem;
    color: var(--ref-teal);
    font-size: calc(0.68rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-website-design .wd-bento-body h3 {
    margin: 0 0 0.4rem;
    color: var(--ref-navy);
    font-size: calc(0.98rem * var(--ref-s));
    font-weight: 900;
    line-height: 1.25;
}

.page-website-design .wd-bento-body p {
    margin: 0;
    flex: 1;
    color: var(--ref-muted);
    font-size: calc(0.82rem * var(--ref-s));
    line-height: 1.55;
}

.page-website-design .wd-bento-link {
    margin-top: 0.75rem;
    color: var(--ref-teal);
    font-size: calc(0.8rem * var(--ref-s));
    font-weight: 800;
    font-style: normal;
}

.page-website-design .wd-related {
    max-width: 760px;
    margin: 1.5rem 0 0;
    color: var(--ref-muted);
    font-size: calc(0.92rem * var(--ref-s));
    line-height: 1.65;
}

.page-website-design .wd-related--inline {
    margin: 0;
}

.page-website-design .wd-advantages {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: var(--ref-cream);
}

.page-website-design .wd-advantages-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

.page-website-design .wd-advantages-media {
    position: relative;
    min-height: 420px;
}

.page-website-design .wd-advantages-photo {
    display: block;
    border-radius: var(--wd-radius-lg);
    object-fit: cover;
    box-shadow: var(--ref-shadow);
}

.page-website-design .wd-advantages-photo--main {
    width: 78%;
    aspect-ratio: 4 / 5;
}

.page-website-design .wd-advantages-photo--accent {
    position: absolute;
    right: 0;
    bottom: 2.5rem;
    width: 52%;
    aspect-ratio: 4 / 3;
    border: 4px solid var(--ref-cream);
}

.page-website-design .wd-advantages-rating {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--ref-shadow);
    color: var(--ref-muted);
    font-size: calc(0.78rem * var(--ref-s));
    font-weight: 700;
}

.page-website-design .wd-advantages-rating span {
    color: var(--ref-teal);
    letter-spacing: 0.05em;
}

.page-website-design .wd-advantages-rating strong {
    color: var(--ref-navy);
    font-size: calc(1.05rem * var(--ref-s));
}

.page-website-design .wd-advantage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.page-website-design .wd-advantage {
    padding: 1rem 1rem 1.05rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(13, 48, 87, 0.08);
    border-left: 3px solid var(--ref-teal);
}

.page-website-design .wd-advantage h3 {
    margin: 0 0 0.35rem;
    color: var(--ref-navy);
    font-size: calc(0.92rem * var(--ref-s));
    font-weight: 900;
    line-height: 1.3;
}

.page-website-design .wd-advantage p {
    margin: 0;
    color: var(--ref-muted);
    font-size: calc(0.8rem * var(--ref-s));
    line-height: 1.55;
}

.page-website-design .wd-process {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: #fff;
}

.page-website-design .wd-process-body {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: start;
}

.page-website-design .wd-process-photo {
    margin: 0;
    position: sticky;
    top: 6rem;
    border-radius: var(--wd-radius-lg);
    overflow: hidden;
    box-shadow: var(--ref-shadow);
}

.page-website-design .wd-process-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.page-website-design .wd-timeline {
    margin: 0;
    padding: 0 0 0 1.5rem;
    list-style: none;
    border-left: 2px solid var(--ref-border);
}

.page-website-design .wd-timeline-step {
    position: relative;
    padding: 0 0 1.35rem 1.25rem;
}

.page-website-design .wd-timeline-step:last-child {
    padding-bottom: 0;
}

.page-website-design .wd-timeline-marker {
    position: absolute;
    left: -1.5rem;
    top: 0.1rem;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--ref-navy);
    color: #fff;
    font-size: calc(0.75rem * var(--ref-s));
    font-weight: 900;
    box-shadow: 0 0 0 4px #fff;
}


.page-website-design .wd-timeline-content h3 {
    margin: 0 0 0.25rem;
    color: var(--ref-navy);
    font-size: calc(0.95rem * var(--ref-s));
    font-weight: 900;
}

.page-website-design .wd-timeline-content p {
    margin: 0;
    color: var(--ref-muted);
    font-size: calc(0.84rem * var(--ref-s));
    line-height: 1.55;
}

.page-website-design .wd-spotlight {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: var(--ref-bg);
}

.page-website-design .wd-spotlight-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: center;
}

.page-website-design .wd-spotlight-copy h2 {
    margin: 0 0 0.85rem;
    color: var(--ref-navy);
    font-size: clamp(1.55rem, 2.8vw, 2.1rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.page-website-design .wd-spotlight-copy .wd-btn {
    margin-top: 1.25rem;
}

.page-website-design .wd-spotlight-media {
    margin: 0;
    padding: 4px;
    border-radius: calc(var(--wd-radius-lg) + 4px);
    background: var(--wd-border);
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(13, 48, 87, 0.14);
}

.page-website-design .wd-spotlight-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--wd-radius-lg);
}

.page-website-design .wd-faq {
    padding: clamp(2rem, 4vw, 3rem) 0;
    background: #fff;
}

.page-website-design .wd-faq-grid {
    max-width: 720px;
    margin: 0 auto;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.page-website-design .wd-faq-item.faq-item {
    position: relative;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--ref-border);
    background: transparent;
}

.page-website-design .wd-faq-item.faq-item:first-child {
    border-top: 1px solid var(--ref-border);
}

.page-website-design .wd-faq-item.faq-item:last-child {
    border-bottom: 1px solid var(--ref-border);
}

.page-website-design .wd-faq-item.is-open::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1rem;
    bottom: 1rem;
    width: 3px;
    border-radius: 2px;
    background: var(--ref-teal);
}

.page-website-design .wd-faq-item .faq-question {
    padding: 1.35rem 0 1.35rem 0.15rem;
    color: var(--ref-navy);
    font-weight: 800;
    font-size: calc(1rem * var(--ref-s));
    line-height: 1.4;
}

.page-website-design .wd-faq-item .faq-question:hover {
    color: var(--ref-navy);
    background: transparent;
}

.page-website-design .wd-faq-item.is-open .faq-question {
    background: transparent;
    padding-bottom: 0.65rem;
    padding-left: 1rem;
}

.page-website-design .wd-faq-item .faq-icon {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0;
    background: transparent;
    color: var(--ref-teal);
    font-size: 0;
    position: relative;
    flex-shrink: 0;
}

.page-website-design .wd-faq-item .faq-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-12%);
    transition: transform 0.25s ease, color 0.2s ease;
}

.page-website-design .wd-faq-item.is-open .faq-icon {
    transform: none;
    background: transparent;
    color: var(--ref-navy);
}

.page-website-design .wd-faq-item.is-open .faq-icon::after {
    transform: rotate(-135deg) translateY(12%);
}

.page-website-design .wd-faq-item .faq-answer {
    padding: 0 0 0 0.15rem;
}

.page-website-design .wd-faq-item.is-open .faq-answer {
    max-height: 600px;
    padding: 0 0 1.35rem 1rem;
}

.page-website-design .wd-faq-item .faq-answer p {
    color: var(--ref-muted);
    font-size: calc(0.94rem * var(--ref-s));
    line-height: 1.7;
}

.page-website-design .wd-cta {
    position: relative;
    isolation: isolate;
    padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 4.5rem);
    color: var(--ref-navy);
    background: linear-gradient(155deg, var(--ref-midnight) 0%, var(--ref-navy) 55%, #1a3a6e 100%);
    overflow: hidden;
}

.page-website-design .wd-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
    pointer-events: none;
    z-index: 0;
}

.page-website-design .wd-cta .container {
    position: relative;
    z-index: 1;
}

.page-website-design .wd-cta-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: var(--wd-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, var(--ref-gold) 0%, #f5d06a 45%, #fde68a 100%);
    box-shadow:
        0 28px 56px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}

.page-website-design .wd-cta-copy h2 {
    margin: 0 0 0.35rem;
    color: var(--ref-navy);
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.page-website-design .wd-cta-copy p {
    margin: 0;
    color: rgba(13, 48, 87, 0.78);
    font-size: calc(0.92rem * var(--ref-s));
    font-weight: 600;
}

.page-website-design .wd-cta-card .wd-btn--gold {
    flex-shrink: 0;
    background: rgba(13, 48, 87, 0.1);
    border: 1.5px solid var(--ref-navy);
    color: var(--ref-navy);
    box-shadow: none;
}

.page-website-design .wd-cta-card .wd-btn--gold:hover {
    background: var(--ref-navy);
    color: #fff;
}

@media (max-width: 1100px) {
    .page-website-design .wd-hero-inner,
    .page-website-design .wd-intro-layout,
    .page-website-design .wd-seo-grid,
    .page-website-design .wd-advantages-layout,
    .page-website-design .wd-process-body,
    .page-website-design .wd-spotlight-layout {
        grid-template-columns: 1fr;
    }

    .page-website-design .wd-build-grid,
    .page-website-design .wd-work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-website-design .wd-intro-card {
        margin: 0;
    }

    .page-website-design .wd-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-website-design .wd-bento-card--wide {
        grid-column: span 2;
    }

    .page-website-design .wd-pillar-grid {
        grid-template-columns: 1fr;
    }

    .page-website-design .wd-process-photo {
        position: static;
    }

    .page-website-design .wd-advantages-media {
        min-height: 320px;
        margin-bottom: 1rem;
    }
}

@media (max-width: 640px) {
    .page-website-design .wd-bento,
    .page-website-design .wd-advantage-grid,
    .page-website-design .wd-build-grid,
    .page-website-design .wd-work-grid {
        grid-template-columns: 1fr;
    }

    .page-website-design .wd-bento-card--wide {
        grid-column: span 1;
    }

    .page-website-design .wd-trust-row span:not(:last-child)::after {
        display: none;
    }

    .page-website-design .wd-device--phone {
        width: 108px;
    }

    .page-website-design .wd-cta-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Search engine optimization page — modern tech / vibrant layout. */
.page-seo-service {
    --seo-radius: 18px;
    --seo-radius-lg: 24px;
    --seo-midnight: #061528;
    --seo-navy: #0d3057;
    --seo-teal: #14b8a6;
    --seo-cyan: #22d3ee;
    --seo-emerald: #10b981;
    --seo-violet: #8b5cf6;
    --seo-coral: #f97316;
    --seo-gold: #e7b83f;
    overflow-x: clip;
}

.page-seo-service .seo-eyebrow {
    margin: 0 0 0.65rem;
    color: var(--ref-navy);
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.page-seo-service .seo-eyebrow--light {
    color: rgba(255, 255, 255, 0.78);
}

.page-search-engine-optimization .seo-eyebrow:not(.seo-eyebrow--light) {
    color: var(--seo-violet);
}

.page-search-engine-marketing .seo-eyebrow:not(.seo-eyebrow--light) {
    color: var(--seo-teal);
}

.page-seo-service .seo-hero .seo-eyebrow,
.page-seo-service .seo-strategy .seo-eyebrow,
.page-website-design .wd-hero .wd-eyebrow,
.page-website-design .wd-seo-band .wd-eyebrow {
    color: rgba(255, 255, 255, 0.78);
}

.page-seo-service .seo-section-head {
    max-width: 720px;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.page-seo-service .seo-section-head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.page-seo-service .seo-section-head h2 {
    margin: 0 0 0.75rem;
    color: var(--ref-navy);
    font-family: var(--font-heading);
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.page-seo-service .seo-section-lead,
.page-seo-service .seo-lead {
    margin: 0;
    color: var(--ref-muted);
    font-size: calc(0.98rem * var(--ref-s));
    line-height: 1.65;
}

.page-seo-service .seo-lead {
    font-size: calc(1.05rem * var(--ref-s));
    max-width: 38rem;
}

.page-seo-service .seo-prose p {
    margin: 0 0 1rem;
    color: var(--ref-muted);
    line-height: 1.7;
}

.page-seo-service .seo-prose p:last-child {
    margin-bottom: 0;
}

.page-seo-service .seo-prose a,
.page-seo-service .seo-related a {
    color: var(--seo-navy);
    font-weight: 700;
}

.page-seo-service .seo-prose--light p {
    color: rgba(255, 255, 255, 0.88);
}

.page-seo-service .seo-prose--light a {
    color: var(--seo-gold);
}

.page-seo-service .seo-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.78rem 1.35rem;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: calc(0.9rem * var(--ref-s));
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}

.page-seo-service .seo-btn--gold {
    background: linear-gradient(135deg, var(--seo-gold) 0%, #f5d06a 100%);
    color: var(--seo-navy);
    box-shadow: 0 14px 32px rgba(231, 184, 63, 0.38);
}

.page-seo-service .seo-btn--gold:hover {
    transform: translateY(-2px);
    color: var(--seo-navy);
}

.page-seo-service .seo-btn--navy {
    background: var(--seo-navy);
    color: #fff;
    box-shadow: 0 12px 28px rgba(13, 48, 87, 0.22);
}

.page-seo-service .seo-btn--navy:hover {
    background: var(--ref-blue);
    color: #fff;
    transform: translateY(-2px);
}

.page-seo-service .seo-btn--emerald {
    background: linear-gradient(135deg, var(--seo-teal) 0%, var(--seo-emerald) 100%);
    color: #fff;
    box-shadow: 0 14px 32px rgba(20, 184, 166, 0.35);
}

.page-seo-service .seo-btn--emerald:hover {
    transform: translateY(-2px);
    color: #fff;
}

.page-seo-service .seo-btn--ghost {
    color: rgba(255, 255, 255, 0.95);
    border: 1.5px solid rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
}

.page-seo-service .seo-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.page-seo-service .seo-hero {
    position: relative;
    padding: clamp(2.75rem, 5.5vw, 4.5rem) 0 clamp(2.25rem, 4vw, 3.25rem);
    background:
        radial-gradient(ellipse 80% 60% at 10% 20%, rgba(34, 211, 238, 0.22), transparent 50%),
        radial-gradient(ellipse 70% 55% at 90% 15%, rgba(139, 92, 246, 0.2), transparent 48%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(20, 184, 166, 0.18), transparent 55%),
        linear-gradient(155deg, var(--seo-midnight) 0%, var(--seo-navy) 38%, #1a3a6e 100%);
    overflow: hidden;
}

.page-seo-service .seo-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.22;
    mix-blend-mode: soft-light;
}

.page-seo-service .seo-hero-glow {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(circle at 60% 40%, #000 0%, transparent 72%);
    pointer-events: none;
}

.page-seo-service .seo-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

.page-seo-service .seo-hero-copy h1 {
    margin: 0 0 1rem;
    color: #fff;
    font-family: var(--font-heading);
    font-size: clamp(2.1rem, 4.8vw, 3.4rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.page-seo-service .seo-hero-copy .seo-lead {
    color: rgba(255, 255, 255, 0.86);
}

.page-seo-service .seo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.35rem;
}

.page-seo-service .seo-hero-rank {
    position: relative;
    min-height: 380px;
}

.page-seo-service .seo-rank-card {
    position: relative;
    z-index: 2;
    border-radius: var(--seo-radius-lg);
    border: 3px solid transparent;
    background:
        linear-gradient(rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.97)) padding-box,
        linear-gradient(135deg, var(--seo-cyan), var(--seo-violet), var(--seo-teal), var(--seo-gold)) border-box;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.page-seo-service .seo-rank-card::before {
    content: none;
    display: none;
}

.page-seo-service .seo-rank-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    background: linear-gradient(90deg, #f0fdfa 0%, #eef2ff 100%);
    border-bottom: 1px solid var(--ref-border);
}

.page-seo-service .seo-rank-query {
    color: var(--seo-navy);
    font-size: calc(0.84rem * var(--ref-s));
    font-weight: 700;
}

.page-seo-service .seo-rank-pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--seo-teal), var(--seo-emerald));
    color: #fff;
    font-size: calc(0.78rem * var(--ref-s));
    font-weight: 900;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
}

.page-seo-service .seo-rank-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.page-seo-service .seo-rank-list {
    margin: 0;
    padding: 0.85rem 1rem 1.05rem;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.page-seo-service .seo-rank-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(13, 48, 87, 0.04), rgba(13, 48, 87, 0.02));
    border: 1px solid rgba(13, 48, 87, 0.08);
}

.page-seo-service .seo-rank-term {
    color: var(--seo-navy);
    font-size: calc(0.78rem * var(--ref-s));
    font-weight: 700;
    line-height: 1.35;
}

.page-seo-service .seo-rank-move {
    flex-shrink: 0;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--seo-teal), var(--seo-emerald));
    color: #fff;
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 900;
}

.page-seo-service .seo-ranked-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.35rem;
}

.page-seo-service .seo-ranked-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

.page-seo-service .seo-ranked-shot img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top center;
}

.page-seo-service .seo-ranked-body {
    padding: 1rem 1.05rem 1.15rem;
}

.page-seo-service .seo-ranked-client {
    margin: 0;
    color: var(--seo-navy);
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-seo-service .seo-ranked-industry {
    margin: 0.15rem 0 0.55rem;
    color: var(--ref-muted);
    font-size: calc(0.76rem * var(--ref-s));
    line-height: 1.4;
}

.page-seo-service .seo-ranked-headline {
    margin: 0 0 0.65rem;
    color: var(--seo-navy);
    font-size: calc(1rem * var(--ref-s));
    font-weight: 900;
    line-height: 1.3;
}

.page-seo-service .seo-ranked-keywords {
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.page-seo-service .seo-ranked-keywords li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    background: var(--ref-cream);
    border: 1px solid rgba(13, 48, 87, 0.08);
}

.page-seo-service .seo-ranked-term {
    color: var(--seo-navy);
    font-size: calc(0.74rem * var(--ref-s));
    font-weight: 700;
    line-height: 1.35;
}

.page-seo-service .seo-ranked-pos {
    flex-shrink: 0;
    color: var(--seo-teal);
    font-size: calc(0.78rem * var(--ref-s));
    font-weight: 900;
}

.page-seo-service .seo-ranked-stat {
    margin: 0 0 0.55rem;
    color: var(--seo-navy);
    font-size: calc(1.05rem * var(--ref-s));
    font-weight: 900;
    line-height: 1.25;
}

.page-seo-service .seo-ranked-footnote {
    margin: 0;
    color: var(--ref-muted);
    font-size: calc(0.82rem * var(--ref-s));
    line-height: 1.5;
}

.page-seo-service .seo-mosaic-card--linked .seo-mosaic-body::after {
    content: "Learn more →";
    display: block;
    margin-top: 0.55rem;
    color: var(--seo-violet);
    font-size: calc(0.78rem * var(--ref-s));
    font-weight: 800;
}

.page-seo-service .seo-rank-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0;
    padding: 0.9rem 1rem 1.05rem;
    list-style: none;
}

.page-seo-service .seo-rank-stat {
    padding: 0.65rem 0.5rem;
    border-radius: 12px;
    text-align: center;
}

.page-seo-service .seo-rank-stat--cyan {
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.16), rgba(34, 211, 238, 0.06));
}

.page-seo-service .seo-rank-stat--violet {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.16), rgba(139, 92, 246, 0.06));
}

.page-seo-service .seo-rank-stat--gold {
    background: linear-gradient(180deg, rgba(231, 184, 63, 0.2), rgba(231, 184, 63, 0.08));
}

.page-seo-service .seo-rank-stats strong {
    display: block;
    color: var(--seo-navy);
    font-size: calc(1.08rem * var(--ref-s));
    font-weight: 900;
    line-height: 1.1;
}

.page-seo-service .seo-rank-stats span {
    display: block;
    margin-top: 0.15rem;
    color: var(--ref-muted);
    font-size: calc(0.66rem * var(--ref-s));
    line-height: 1.3;
}

.page-seo-service .seo-rank-float {
    position: absolute;
    z-index: 5;
    padding: 0.6rem 0.9rem;
    border-radius: 14px;
    color: var(--seo-navy);
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 800;
    line-height: 1.2;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

.page-seo-service .seo-rank-float span {
    display: block;
    font-size: calc(1.05rem * var(--ref-s));
    font-weight: 900;
}

.page-seo-service .seo-rank-float--up {
    top: 10%;
    left: -5%;
    background: linear-gradient(135deg, #fff 0%, #ecfeff 100%);
}

.page-seo-service .seo-rank-float--up span {
    color: var(--seo-teal);
}

.page-seo-service .seo-rank-float--leads {
    right: -3%;
    bottom: 16%;
    background: linear-gradient(135deg, #fff 0%, #faf5ff 100%);
}

.page-seo-service .seo-rank-float--leads span {
    color: var(--seo-violet);
}

.page-seo-service .seo-trust-bar {
    padding: 0.95rem 0;
    background: linear-gradient(90deg, var(--seo-navy) 0%, #1e4a7a 35%, #0f766e 70%, var(--seo-teal) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.page-seo-service .seo-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
}

.page-seo-service .seo-trust-row span {
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-seo-service .seo-trust-row span:not(:last-child)::after {
    content: none;
}

.page-seo-service .seo-define {
    padding: clamp(2.75rem, 5vw, 4.25rem) 0;
    background:
        radial-gradient(circle at 85% 20%, rgba(34, 211, 238, 0.08), transparent 32%),
        radial-gradient(circle at 10% 80%, rgba(139, 92, 246, 0.06), transparent 28%),
        linear-gradient(180deg, #fff 0%, #f4f8fc 100%);
}

.page-seo-service .seo-define-layout {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

.page-seo-service .seo-define-media {
    position: relative;
    margin: 0;
    padding: 4px;
    border-radius: calc(var(--seo-radius-lg) + 4px);
    background: linear-gradient(135deg, var(--seo-cyan), var(--seo-violet), var(--seo-teal));
    box-shadow: 0 24px 50px rgba(13, 48, 87, 0.14);
}

.page-seo-service .seo-define-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--seo-radius-lg);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.page-seo-service .seo-callout {
    margin: 1.25rem 0 0;
    padding: 1rem 1.15rem;
    border-left: 4px solid var(--seo-teal);
    border-radius: 0 14px 14px 0;
    background: linear-gradient(90deg, rgba(20, 184, 166, 0.12), rgba(34, 211, 238, 0.06));
    color: var(--seo-navy);
    font-size: calc(0.92rem * var(--ref-s));
    font-weight: 700;
    line-height: 1.55;
}

.page-seo-service .seo-why {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background:
        radial-gradient(circle at 0% 50%, rgba(139, 92, 246, 0.07), transparent 40%),
        var(--ref-bg);
}

.page-seo-service .seo-why-wrap {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: center;
}

.page-seo-service .seo-why-visual {
    margin: 0;
    position: relative;
}

.page-seo-service .seo-why-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--seo-radius-lg);
    box-shadow: 0 28px 56px rgba(13, 48, 87, 0.14);
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.page-seo-service .seo-why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.page-seo-service .seo-why-card {
    padding: 1.35rem 1.2rem;
    border-radius: var(--seo-radius);
    border: none;
    box-shadow: 0 16px 36px rgba(13, 48, 87, 0.12);
    color: #fff;
}

.page-seo-service .seo-why-card--teal {
    background: linear-gradient(145deg, #0f766e 0%, var(--seo-teal) 55%, #2dd4bf 100%);
}

.page-seo-service .seo-why-card--violet {
    background: linear-gradient(145deg, #5b21b6 0%, var(--seo-violet) 55%, #a78bfa 100%);
}

.page-seo-service .seo-why-card--navy {
    background: linear-gradient(145deg, #0c2442 0%, var(--seo-navy) 55%, #1e5a8a 100%);
}

.page-seo-service .seo-why-card--gold {
    background: linear-gradient(145deg, #9a6700 0%, var(--seo-gold) 55%, #f5d06a 100%);
    color: var(--seo-navy);
}

.page-seo-service .seo-why-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.22);
    font-size: calc(0.82rem * var(--ref-s));
    font-weight: 900;
}

.page-seo-service .seo-why-card--gold .seo-why-icon {
    background: rgba(13, 48, 87, 0.12);
    color: var(--seo-navy);
}

.page-seo-service .seo-why-card h3 {
    margin: 0 0 0.5rem;
    font-size: calc(1.05rem * var(--ref-s));
    font-weight: 900;
    line-height: 1.25;
}

.page-seo-service .seo-why-card p {
    margin: 0;
    font-size: calc(0.88rem * var(--ref-s));
    line-height: 1.65;
    opacity: 0.92;
}

.page-seo-service .seo-why-card--gold p {
    color: rgba(13, 48, 87, 0.82);
    opacity: 1;
}

.page-seo-service .seo-strategy {
    padding: clamp(2.75rem, 5vw, 4.25rem) 0;
    background:
        radial-gradient(ellipse 80% 70% at 20% 0%, rgba(34, 211, 238, 0.15), transparent 55%),
        radial-gradient(ellipse 70% 60% at 100% 100%, rgba(139, 92, 246, 0.18), transparent 50%),
        linear-gradient(145deg, var(--seo-midnight) 0%, var(--seo-navy) 45%, #312e81 100%);
    color: #fff;
}

.page-seo-service .seo-strategy-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

.page-seo-service .seo-strategy-copy h2 {
    margin: 0 0 1rem;
    color: #fff;
    font-size: clamp(1.55rem, 2.8vw, 2.15rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.page-seo-service .seo-strategy-list {
    margin: 1.25rem 0 1.5rem;
    padding: 0;
    list-style: none;
}

.page-seo-service .seo-strategy-list li {
    position: relative;
    padding: 0.5rem 0 0.5rem 1.75rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: calc(0.92rem * var(--ref-s));
    font-weight: 600;
    line-height: 1.45;
}

.page-seo-service .seo-strategy-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0.5rem;
    color: var(--seo-cyan);
    font-weight: 900;
}

.page-seo-service .seo-strategy-media {
    position: relative;
    margin: 0;
    padding: 4px;
    border-radius: calc(var(--seo-radius-lg) + 4px);
    background: linear-gradient(135deg, var(--seo-cyan), var(--seo-violet));
}

.page-seo-service .seo-strategy-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--seo-radius-lg);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.page-seo-service .seo-strategy-badge {
    position: absolute;
    left: 1.25rem;
    bottom: -0.85rem;
    padding: 0.7rem 1rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
    color: var(--seo-navy);
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 700;
    line-height: 1.2;
}

.page-seo-service .seo-strategy-badge strong {
    display: block;
    font-size: calc(1.15rem * var(--ref-s));
    font-weight: 900;
    color: var(--seo-teal);
}

.page-seo-service .seo-services {
    padding: clamp(2.75rem, 5vw, 4.25rem) 0;
    background:
        linear-gradient(180deg, #fff 0%, #f8fafc 100%),
        repeating-linear-gradient(90deg, rgba(13, 48, 87, 0.02) 0, rgba(13, 48, 87, 0.02) 1px, transparent 1px, transparent 48px),
        repeating-linear-gradient(0deg, rgba(13, 48, 87, 0.02) 0, rgba(13, 48, 87, 0.02) 1px, transparent 1px, transparent 48px);
}

.page-seo-service .seo-mosaic {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.page-seo-service .seo-mosaic-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--seo-radius);
    border: 1px solid var(--ref-border);
    background: #fff;
    box-shadow: 0 12px 32px rgba(13, 48, 87, 0.08);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-seo-service .seo-mosaic-card::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--seo-accent, var(--seo-teal));
}

.page-seo-service .seo-mosaic-card--teal { --seo-accent: var(--seo-teal); }
.page-seo-service .seo-mosaic-card--cyan { --seo-accent: var(--seo-cyan); }
.page-seo-service .seo-mosaic-card--violet { --seo-accent: var(--seo-violet); }
.page-seo-service .seo-mosaic-card--coral { --seo-accent: var(--seo-coral); }
.page-seo-service .seo-mosaic-card--navy { --seo-accent: var(--seo-navy); }
.page-seo-service .seo-mosaic-card--emerald { --seo-accent: var(--seo-emerald); }
.page-seo-service .seo-mosaic-card--gold { --seo-accent: var(--seo-gold); }

.page-seo-service .seo-mosaic-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 48px rgba(13, 48, 87, 0.14);
}

.page-seo-service .seo-mosaic-card--featured {
    grid-column: span 2;
    flex-direction: row;
}

.page-seo-service .seo-mosaic-thumb {
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.page-seo-service .seo-mosaic-card--featured .seo-mosaic-thumb {
    width: 44%;
}

.page-seo-service .seo-mosaic-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(6, 21, 40, 0.35) 100%);
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.page-seo-service .seo-mosaic-card:hover .seo-mosaic-thumb::after {
    opacity: 0.35;
}

.page-seo-service .seo-mosaic-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 170px;
    object-fit: cover;
    transition: transform 0.35s ease, filter 0.35s ease;
    filter: saturate(1.08) contrast(1.02);
}

.page-seo-service .seo-mosaic-card:hover .seo-mosaic-thumb img {
    transform: scale(1.04);
    filter: saturate(1.18) contrast(1.05);
}

.page-seo-service .seo-mosaic-body {
    padding: 1.15rem 1.2rem 1.2rem;
}

.page-seo-service .seo-mosaic-label {
    margin: 0 0 0.3rem;
    color: var(--seo-accent, var(--seo-teal));
    font-size: calc(0.66rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-seo-service .seo-mosaic-body h3 {
    margin: 0 0 0.45rem;
    color: var(--ref-navy);
    font-size: calc(1rem * var(--ref-s));
    font-weight: 900;
    line-height: 1.25;
}

.page-seo-service .seo-mosaic-body p {
    margin: 0 0 0.65rem;
    color: var(--ref-muted);
    font-size: calc(0.86rem * var(--ref-s));
    line-height: 1.6;
}

.page-seo-service .seo-mosaic-link {
    color: var(--seo-accent, var(--seo-teal));
    font-size: calc(0.82rem * var(--ref-s));
    font-weight: 800;
}

.page-seo-service .seo-related {
    max-width: 760px;
    margin: 1.5rem auto 0;
    text-align: center;
    color: var(--ref-muted);
    font-size: calc(0.92rem * var(--ref-s));
    line-height: 1.65;
}

.page-seo-service .seo-proof {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background:
        radial-gradient(circle at 80% 20%, rgba(34, 211, 238, 0.12), transparent 35%),
        linear-gradient(155deg, var(--seo-midnight) 0%, var(--seo-navy) 100%);
    color: #fff;
}

.page-seo-service .seo-proof .seo-eyebrow {
    color: rgba(255, 255, 255, 0.78);
}

.page-seo-service .seo-proof .seo-section-head h2 {
    color: #fff;
}

.page-seo-service .seo-proof .seo-prose p {
    color: rgba(255, 255, 255, 0.82);
}

.page-seo-service .seo-proof-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

.page-seo-service .seo-proof-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.page-seo-service .seo-proof-metrics li {
    flex: 1 1 120px;
    padding: 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
    backdrop-filter: blur(8px);
}

.page-seo-service .seo-proof-metrics li:nth-child(1) strong { color: var(--seo-cyan); }
.page-seo-service .seo-proof-metrics li:nth-child(2) strong { color: var(--seo-violet); }
.page-seo-service .seo-proof-metrics li:nth-child(3) strong { color: var(--seo-teal); }

.page-seo-service .seo-hero-micro {
    margin: 1.1rem 0 0;
    max-width: 34rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: calc(0.88rem * var(--ref-s));
    line-height: 1.55;
}

.page-seo-service .seo-named-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.35rem;
}

.page-seo-service .seo-named-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

.page-seo-service .seo-named-shot img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
}

.page-seo-service .seo-named-body {
    padding: 0.95rem 1.05rem 1.1rem;
}

.page-seo-service .seo-named-client {
    margin: 0 0 0.3rem;
    color: var(--seo-navy);
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-seo-service .seo-named-stat {
    margin: 0 0 0.25rem;
    color: var(--seo-navy);
    font-size: calc(1.05rem * var(--ref-s));
    font-weight: 900;
    line-height: 1.25;
}

.page-seo-service .seo-named-detail {
    margin: 0;
    color: var(--ref-muted);
    font-size: calc(0.82rem * var(--ref-s));
    line-height: 1.45;
}

.page-seo-service .seo-includes {
    margin-top: 1.5rem;
    padding: 1.1rem 1.2rem;
    border-radius: 16px;
    background: var(--ref-cream);
    border: 1px solid rgba(13, 48, 87, 0.08);
}

.page-seo-service .seo-includes-label {
    margin: 0 0 0.7rem;
    color: var(--seo-navy);
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-seo-service .seo-includes ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-seo-service .seo-includes li {
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(13, 48, 87, 0.1);
    color: var(--seo-navy);
    font-size: calc(0.78rem * var(--ref-s));
    font-weight: 700;
}

.page-seo-service .seo-mosaic--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-seo-service .seo-cta-card .seo-btn--gold {
    flex-shrink: 0;
    background: rgba(13, 48, 87, 0.1);
    border: 1.5px solid var(--seo-navy);
    color: var(--seo-navy);
    box-shadow: none;
}

.page-seo-service .seo-cta-card .seo-btn--gold:hover {
    background: var(--seo-navy);
    color: #fff;
}

.page-seo-service .seo-spec-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.page-seo-service .seo-spec-list li {
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.page-seo-service .seo-spec-list strong {
    display: block;
    margin-bottom: 0.2rem;
    color: #fff;
}

.page-seo-service .seo-spec-list span {
    color: rgba(255, 255, 255, 0.75);
    font-size: calc(0.88rem * var(--ref-s));
    line-height: 1.45;
}

@media (max-width: 900px) {
    .page-seo-service .seo-named-proof,
    .page-seo-service .seo-ranked-proof,
    .page-seo-service .seo-mosaic--three {
        grid-template-columns: 1fr;
    }
}

.page-seo-service .seo-proof-metrics strong {
    display: block;
    font-size: calc(1.4rem * var(--ref-s));
    font-weight: 900;
    line-height: 1;
}

.page-seo-service .seo-proof-metrics span {
    display: block;
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: calc(0.7rem * var(--ref-s));
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.page-seo-service .seo-proof-visual {
    margin: 0;
    padding: 4px;
    border-radius: calc(var(--seo-radius-lg) + 4px);
    background: linear-gradient(135deg, var(--seo-cyan), var(--seo-teal));
}

.page-seo-service .seo-proof-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--seo-radius-lg);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.page-seo-service .seo-process {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: linear-gradient(180deg, #fff 0%, #f0fdfa 100%);
}

.page-seo-service .seo-process-layout {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: start;
}

.page-seo-service .seo-process-photo {
    position: sticky;
    top: 6rem;
    margin: 0;
    padding: 4px;
    border-radius: calc(var(--seo-radius-lg) + 4px);
    background: linear-gradient(135deg, var(--seo-violet), var(--seo-coral));
}

.page-seo-service .seo-process-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--seo-radius-lg);
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.page-seo-service .seo-pipeline {
    display: grid;
    gap: 0.65rem;
}

.page-seo-service .seo-process > .container > .seo-pipeline,
.page-seo-service .seo-process > .container > .awd-pipeline {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.page-seo-service .seo-pipeline-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: start;
    padding: 1rem 1.05rem;
    border-radius: 14px;
    border: 1px solid rgba(13, 48, 87, 0.08);
    background: #fff;
    box-shadow: 0 8px 24px rgba(13, 48, 87, 0.06);
}

.page-seo-service .seo-pipeline-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    background: var(--seo-navy);
    color: #fff;
    font-size: calc(0.78rem * var(--ref-s));
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(13, 48, 87, 0.15);
}

.page-seo-service .seo-pipeline-content h3 {
    margin: 0 0 0.25rem;
    color: var(--ref-navy);
    font-size: calc(0.95rem * var(--ref-s));
    font-weight: 900;
    line-height: 1.3;
}

.page-seo-service .seo-pipeline-content p {
    margin: 0;
    color: var(--ref-muted);
    font-size: calc(0.86rem * var(--ref-s));
    line-height: 1.55;
}

.page-seo-service .seo-spotlight {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background:
        radial-gradient(circle at 15% 50%, rgba(139, 92, 246, 0.08), transparent 40%),
        radial-gradient(circle at 90% 30%, rgba(34, 211, 238, 0.1), transparent 35%),
        linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.page-seo-service .seo-spotlight-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}

.page-seo-service .seo-spotlight-copy h2 {
    margin: 0 0 1rem;
    color: var(--ref-navy);
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.page-seo-service .seo-spotlight-copy .seo-btn {
    margin-top: 1.25rem;
}

.page-seo-service .seo-spotlight-media {
    margin: 0;
    padding: 4px;
    border-radius: calc(var(--seo-radius-lg) + 4px);
    background: linear-gradient(135deg, var(--seo-teal), var(--seo-violet), var(--seo-gold));
}

.page-seo-service .seo-spotlight-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--seo-radius-lg);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.page-seo-service .seo-faq {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.08), transparent 45%),
        #fff;
}

.page-seo-service .seo-faq-grid {
    max-width: 720px;
    margin: 0 auto;
}

.page-seo-service .seo-faq-item.faq-item {
    position: relative;
    border-bottom: 1px solid var(--ref-border);
}

.page-seo-service .seo-faq-item.faq-item:first-child {
    border-top: 1px solid var(--ref-border);
}

.page-seo-service .seo-faq-item.is-open::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1rem;
    bottom: 1rem;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--seo-cyan), var(--seo-violet));
}

.page-seo-service .seo-faq-item .faq-question {
    padding: 1.35rem 0 1.35rem 0.15rem;
    color: var(--ref-navy);
    font-weight: 800;
    font-size: calc(1rem * var(--ref-s));
    line-height: 1.4;
}

.page-seo-service .seo-faq-item .faq-question:hover {
    background: transparent;
}

.page-seo-service .seo-faq-item.is-open .faq-question {
    padding-bottom: 0.65rem;
    padding-left: 1rem;
}

.page-seo-service .seo-faq-item .faq-icon {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0;
    background: transparent;
    color: var(--seo-teal);
    font-size: 0;
    position: relative;
}

.page-seo-service .seo-faq-item .faq-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-12%);
    transition: transform 0.25s ease;
}

.page-seo-service .seo-faq-item.is-open .faq-icon {
    transform: none;
    color: var(--seo-violet);
}

.page-seo-service .seo-faq-item.is-open .faq-icon::after {
    transform: rotate(-135deg) translateY(12%);
}

.page-seo-service .seo-faq-item.is-open .faq-answer {
    max-height: 600px;
    padding: 0 0 1.35rem 1rem;
}

.page-seo-service .seo-faq-item .faq-answer p {
    color: var(--ref-muted);
    font-size: calc(0.94rem * var(--ref-s));
    line-height: 1.7;
}

.page-seo-service .seo-cta {
    position: relative;
    isolation: isolate;
    padding: clamp(2.75rem, 5.5vw, 4rem) 0 clamp(3.25rem, 6vw, 4.75rem);
    background: linear-gradient(155deg, var(--seo-midnight) 0%, var(--seo-navy) 55%, #1a3a6e 100%);
    overflow: hidden;
}

.page-seo-service .seo-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
    pointer-events: none;
    z-index: 0;
}

.page-seo-service .seo-cta .container {
    position: relative;
    z-index: 1;
}

.page-seo-service .seo-cta-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: clamp(1.5rem, 3vw, 2rem);
    border-radius: var(--seo-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, var(--seo-gold) 0%, #f5d06a 45%, #fde68a 100%);
    box-shadow:
        0 28px 56px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}

.page-seo-service .seo-cta-copy h2 {
    margin: 0 0 0.35rem;
    color: var(--seo-navy);
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.page-seo-service .seo-cta-copy p {
    margin: 0;
    color: rgba(13, 48, 87, 0.78);
    font-size: calc(0.92rem * var(--ref-s));
    font-weight: 600;
}

@media (max-width: 1100px) {
    .page-seo-service .seo-hero-inner,
    .page-seo-service .seo-define-layout,
    .page-seo-service .seo-why-wrap,
    .page-seo-service .seo-strategy-layout,
    .page-seo-service .seo-proof-layout,
    .page-seo-service .seo-process-layout,
    .page-seo-service .seo-spotlight-layout {
        grid-template-columns: 1fr;
    }

    .page-seo-service .seo-why-visual {
        display: none;
    }

    .page-seo-service .seo-why-grid {
        grid-template-columns: 1fr;
    }

    .page-seo-service .seo-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-seo-service .seo-mosaic-card--featured {
        grid-column: span 2;
        flex-direction: column;
    }

    .page-seo-service .seo-mosaic-card--featured .seo-mosaic-thumb {
        width: 100%;
    }

    .page-seo-service .seo-process-photo {
        position: static;
    }

    .page-seo-service .seo-rank-float--up,
    .page-seo-service .seo-rank-float--leads {
        display: none;
    }
}

@media (max-width: 640px) {
    .page-seo-service .seo-mosaic {
        grid-template-columns: 1fr;
    }

    .page-seo-service .seo-mosaic-card--featured {
        grid-column: span 1;
    }

    .page-seo-service .seo-rank-stats {
        grid-template-columns: 1fr;
    }

    .page-seo-service .seo-cta-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Page builder preview (admin logged in + ?builder=1) */
body.page-builder-mode [data-easy-block-id] {
    position: relative;
    cursor: pointer;
    outline: 2px dashed transparent;
    outline-offset: 4px;
    transition: outline-color 0.15s ease;
}

body.page-builder-mode [data-easy-block-id]:hover {
    outline-color: rgba(99, 102, 241, 0.55);
}

body.page-builder-mode [data-easy-block-id].is-builder-selected {
    outline: 2px solid #6366f1;
    outline-offset: 4px;
}

body.page-builder-mode [data-easy-block-id].is-builder-pending-remove,
[data-easy-block-id].is-builder-pending-remove {
    opacity: 0.38;
    filter: grayscale(0.35);
    pointer-events: none;
    outline: 2px dashed rgba(244, 63, 94, 0.55) !important;
    outline-offset: 4px;
    transition: opacity 0.25s ease, filter 0.25s ease, outline-color 0.25s ease;
}

/* ── Community page ── */

.page-community-support .community-hero-card {
    display: flex;
    justify-content: center;
}

.page-community-support .community-team-card {
    margin: 0;
    position: relative;
    width: min(100%, 520px);
    border-radius: 28px;
    overflow: hidden;
    background: #fff;
    box-shadow:
        0 24px 48px rgba(13, 48, 87, 0.16),
        0 0 0 1px rgba(13, 48, 87, 0.06);
}

.page-community-support .community-team-card img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center 40%;
}

.page-community-support .community-team-card figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.1rem 1.25rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: #fff;
    background: linear-gradient(180deg, transparent 0%, rgba(13, 48, 87, 0.88) 70%);
}

.page-community-support .community-team-card strong {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.page-community-support .community-team-card span {
    font-size: 0.88rem;
    opacity: 0.9;
}

.page-community-support .community-photo-strip {
    padding: clamp(3rem, 6vw, 4.5rem) 0;
    background: #f5f7fa;
}

.page-community-support .community-photo-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1.75rem;
}

.page-community-support .community-photo-item {
    margin: 0;
    border-radius: 1rem;
    overflow: hidden;
    background: #d7dde6;
    aspect-ratio: 4 / 3;
}

.page-community-support .community-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.page-community-support .community-orgs {
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.page-community-support .community-org-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.page-community-support .community-org-card {
    --org-accent: var(--seo-teal);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.35rem 1.4rem 1.25rem;
    border-radius: 18px;
    text-decoration: none;
    color: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
    border: 1px solid rgba(13, 48, 87, 0.08);
    box-shadow: 0 12px 28px rgba(13, 48, 87, 0.05);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-community-support .community-org-card--navy { --org-accent: var(--seo-navy); }
.page-community-support .community-org-card--teal { --org-accent: var(--seo-teal); }
.page-community-support .community-org-card--gold { --org-accent: var(--seo-gold); }
.page-community-support .community-org-card--violet { --org-accent: var(--seo-violet); }
.page-community-support .community-org-card--cyan { --org-accent: var(--seo-cyan); }
.page-community-support .community-org-card--emerald { --org-accent: var(--seo-emerald); }
.page-community-support .community-org-card--coral { --org-accent: var(--seo-coral); }

.page-community-support .community-org-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--org-accent) 45%, transparent);
    box-shadow: 0 18px 36px rgba(13, 48, 87, 0.1);
}

.page-community-support .community-org-focus {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--org-accent);
    background: color-mix(in srgb, var(--org-accent) 14%, #fff);
}

.page-community-support .community-org-card h3 {
    margin: 0;
    color: var(--ref-navy);
    font-size: calc(1.12rem * var(--ref-s));
    font-weight: 850;
    letter-spacing: -0.03em;
    line-height: 1.25;
}

.page-community-support .community-org-blurb,
.page-community-support .community-org-blurb p {
    margin: 0;
    color: var(--ref-muted);
    font-size: calc(0.92rem * var(--ref-s));
    line-height: 1.55;
}

.page-community-support .community-org-link {
    margin-top: auto;
    padding-top: 0.35rem;
    color: var(--ref-navy);
    font-size: 0.88rem;
    font-weight: 700;
}

.page-community-support .community-org-card:hover .community-org-link {
    color: var(--org-accent);
}

.page-community-support .seo-spotlight-aside {
    display: grid;
    gap: 0.85rem;
}

.page-community-support .seo-spotlight-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1.15rem 1.25rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(13, 48, 87, 0.08);
    box-shadow: 0 10px 24px rgba(13, 48, 87, 0.05);
}

.page-community-support .seo-spotlight-stat strong {
    color: var(--ref-navy);
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}

.page-community-support .seo-spotlight-stat span {
    color: var(--ref-muted);
    font-size: 0.9rem;
    font-weight: 600;
}

@media (max-width: 900px) {
    .page-community-support .community-org-grid {
        grid-template-columns: 1fr;
    }

    .page-community-support .community-photo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .page-community-support .community-team-card {
        width: min(100%, 320px);
    }

    .page-community-support .community-photo-grid {
        grid-template-columns: 1fr;
    }
}


/* ===== Case studies index + rich single ===== */
.page-case-studies,
.page-case-study,
.page-blog-v2,
.page-post-v2,
.page-contact-v2,
.page-location-v2 {
    --cs-navy: #0d3057;
    --cs-midnight: #061528;
    --cs-gold: #e7b83f;
    --cs-cream: #f7f3e8;
    --cs-sky: #e8f1ff;
    --cs-mint: #e6f6f0;
    --cs-amber: #fff1de;
    --cs-teal: #14b8a6;
    --cs-muted: #5f6f83;
    --cs-border: #e5ebf2;
    --cs-web: #1565d8;
    --cs-seo: #0d6049;
    --cs-sem: #b45309;
}

.page-case-studies,
.page-blog-v2,
.page-post-v2,
.page-contact-v2,
.page-location-v2 {
    background:
        radial-gradient(900px 420px at 8% 18%, rgba(21, 101, 216, 0.1), transparent 58%),
        radial-gradient(700px 360px at 92% 32%, rgba(20, 184, 166, 0.12), transparent 55%),
        radial-gradient(820px 380px at 70% 78%, rgba(231, 184, 63, 0.14), transparent 60%),
        linear-gradient(180deg, #eef4ff 0%, var(--cs-cream) 38%, #f3faf7 72%, #fff8ec 100%);
}

.cs-eyebrow {
    margin: 0 0 0.65rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cs-gold);
}

.cs-eyebrow--on-dark { color: var(--cs-gold); }

.cs-type-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(21, 101, 216, 0.14);
    color: var(--cs-web);
    border: 1px solid rgba(21, 101, 216, 0.18);
}
.cs-type-pill--seo {
    background: rgba(13, 96, 73, 0.14);
    color: var(--cs-seo);
    border-color: rgba(13, 96, 73, 0.2);
}
.cs-type-pill--sem {
    background: rgba(180, 83, 9, 0.16);
    color: var(--cs-sem);
    border-color: rgba(180, 83, 9, 0.22);
}

.cs-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}
.cs-chip-list li {
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: rgba(21, 101, 216, 0.08);
    border: 1px solid rgba(21, 101, 216, 0.14);
    color: var(--cs-navy);
    font-size: 0.82rem;
    font-weight: 700;
}
.cs-chip-list--compact li { font-size: 0.75rem; padding: 0.3rem 0.6rem; }
.cs-card--seo .cs-chip-list li,
.cs-featured-card--seo .cs-chip-list li {
    background: rgba(13, 96, 73, 0.1);
    border-color: rgba(13, 96, 73, 0.18);
    color: #0a4d3a;
}
.cs-card--sem .cs-chip-list li,
.cs-featured-card--sem .cs-chip-list li {
    background: rgba(180, 83, 9, 0.12);
    border-color: rgba(180, 83, 9, 0.2);
    color: #8a3d07;
}
.cs-card--web-design .cs-chip-list li,
.cs-featured-card--web-design .cs-chip-list li {
    background: rgba(21, 101, 216, 0.1);
    border-color: rgba(21, 101, 216, 0.18);
    color: #0b4aa8;
}

.cs-text-link { font-weight: 700; color: var(--cs-navy); text-decoration: none; }
.cs-text-link:hover { color: var(--accent); }
.cs-text-link--light { color: rgba(255, 255, 255, 0.88); }
.cs-text-link--light:hover { color: var(--cs-gold); }

.cs-index-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(920px 460px at 12% -8%, rgba(231, 184, 63, 0.38), transparent 56%),
        radial-gradient(860px 480px at 88% 8%, rgba(21, 101, 216, 0.42), transparent 52%),
        radial-gradient(720px 420px at 55% 100%, rgba(20, 184, 166, 0.28), transparent 58%),
        linear-gradient(155deg, #04101f 0%, #0a2850 42%, #0e3d6e 72%, #0b3b4a 100%);
    color: #fff;
    padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(4rem, 7vw, 5.5rem);
}
.cs-index-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--cs-gold) 0%, var(--cs-web) 35%, var(--cs-teal) 68%, var(--cs-sem) 100%);
}
.cs-index-hero-glow {
    position: absolute;
    inset: auto -10% -40% 40%;
    height: 60%;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.28), transparent 65%);
    pointer-events: none;
}
.cs-index-hero-inner { position: relative; max-width: 920px; }
.cs-index-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
    font-weight: 900;
}
.cs-index-hero-lead,
.cs-index-hero .page-hero-lead {
    margin: 1.1rem 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    max-width: 46rem;
}
.cs-index-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 2.25rem;
}
.cs-index-stat {
    display: block;
    padding: 1rem 1.1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
a.cs-index-stat:hover,
a.cs-index-stat:focus-visible {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 12px 24px rgba(0, 0, 0, 0.22);
}
a.cs-index-stat:focus-visible {
    outline: 2px solid var(--cs-gold);
    outline-offset: 3px;
}
a.cs-index-stat.is-active {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 0 2px rgba(255, 255, 255, 0.28);
}
.cs-index-stat strong {
    display: block;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    color: var(--cs-gold);
    line-height: 1;
}
.cs-index-stat span {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 600;
}
.cs-index-stat--all {
    background: linear-gradient(160deg, rgba(231, 184, 63, 0.28), rgba(255, 255, 255, 0.06));
    border-color: rgba(231, 184, 63, 0.45);
}
.cs-index-stat--web {
    background: linear-gradient(160deg, rgba(21, 101, 216, 0.34), rgba(255, 255, 255, 0.06));
    border-color: rgba(96, 165, 250, 0.45);
}
.cs-index-stat--web strong { color: #93c5fd; }
.cs-index-stat--seo {
    background: linear-gradient(160deg, rgba(20, 184, 166, 0.3), rgba(255, 255, 255, 0.06));
    border-color: rgba(45, 212, 191, 0.42);
}
.cs-index-stat--seo strong { color: #5eead4; }
.cs-index-stat--sem {
    background: linear-gradient(160deg, rgba(245, 158, 11, 0.3), rgba(255, 255, 255, 0.06));
    border-color: rgba(251, 191, 36, 0.45);
}
.cs-index-stat--sem strong { color: #fcd34d; }

.cs-index-featured {
    margin-top: 0;
    padding: clamp(1.75rem, 3.5vw, 2.75rem) 0 0.5rem;
    position: relative;
    z-index: 2;
}
.cs-featured-card {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    overflow: hidden;
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(232, 241, 255, 0.95), rgba(255, 255, 255, 0.98) 45%, rgba(255, 248, 236, 0.9));
    box-shadow: 0 28px 70px rgba(6, 21, 40, 0.16);
    border: 1px solid rgba(21, 101, 216, 0.16);
}
.cs-featured-card--web-design {
    border-color: rgba(21, 101, 216, 0.28);
    box-shadow: 0 28px 70px rgba(21, 101, 216, 0.14);
}
.cs-featured-card--seo {
    background:
        linear-gradient(135deg, rgba(230, 246, 240, 0.98), rgba(255, 255, 255, 0.98) 45%, rgba(236, 253, 245, 0.9));
    border-color: rgba(13, 96, 73, 0.24);
    box-shadow: 0 28px 70px rgba(13, 96, 73, 0.12);
}
.cs-featured-card--sem {
    background:
        linear-gradient(135deg, rgba(255, 241, 222, 0.98), rgba(255, 255, 255, 0.98) 45%, rgba(255, 247, 237, 0.92));
    border-color: rgba(180, 83, 9, 0.24);
    box-shadow: 0 28px 70px rgba(180, 83, 9, 0.12);
}
.cs-featured-media {
    position: relative;
    align-self: start;
    width: 100%;
    aspect-ratio: 6 / 5;
    overflow: hidden;
    background: #eef2f7;
}
.cs-featured-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
}
.cs-featured-logo {
    position: absolute;
    left: 1.25rem;
    bottom: 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.cs-featured-logo--light {
    background: rgba(10, 26, 46, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.cs-featured-logo img { width: min(180px, 40vw); height: auto; }
.cs-featured-body {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.cs-featured-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}
.cs-featured-industry { color: var(--cs-muted); font-size: 0.88rem; font-weight: 600; }
.cs-featured-body h2 {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--cs-navy);
}
.cs-featured-body h2 a { color: inherit; text-decoration: none; }
.cs-featured-body h2 a:hover { color: var(--accent); }
.cs-featured-summary {
    margin: 0.85rem 0 0;
    color: var(--cs-muted);
    font-size: 1.02rem;
}
.cs-featured-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1.35rem;
}
.cs-featured-cta {
    background: linear-gradient(135deg, var(--cs-web), #0b4aa8);
    border: none;
    box-shadow: 0 10px 24px rgba(21, 101, 216, 0.28);
}
.cs-featured-cta:hover { background: linear-gradient(135deg, #1d6ef0, var(--cs-web)); }
.cs-featured-card--seo .cs-featured-cta {
    background: linear-gradient(135deg, var(--cs-seo), #0f766e);
    box-shadow: 0 10px 24px rgba(13, 96, 73, 0.28);
}
.cs-featured-card--sem .cs-featured-cta {
    background: linear-gradient(135deg, var(--cs-sem), #c2410c);
    box-shadow: 0 10px 24px rgba(180, 83, 9, 0.28);
}

.cs-index-filters { padding: 2.25rem 0 0.5rem; }
.cs-filter-bar { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.cs-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(21, 101, 216, 0.16);
    color: var(--cs-navy);
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.cs-filter em {
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(21, 101, 216, 0.1);
    color: var(--cs-web);
}
.cs-filter--web-design { border-color: rgba(21, 101, 216, 0.28); }
.cs-filter--seo {
    border-color: rgba(13, 96, 73, 0.28);
    background: rgba(230, 246, 240, 0.85);
}
.cs-filter--seo em { background: rgba(13, 96, 73, 0.12); color: var(--cs-seo); }
.cs-filter--sem {
    border-color: rgba(180, 83, 9, 0.28);
    background: rgba(255, 241, 222, 0.9);
}
.cs-filter--sem em { background: rgba(180, 83, 9, 0.14); color: var(--cs-sem); }
.cs-filter:hover,
.cs-filter.is-active {
    background: var(--cs-navy);
    border-color: var(--cs-navy);
    color: #fff;
    box-shadow: 0 10px 22px rgba(13, 48, 87, 0.18);
}
.cs-filter--web-design:hover,
.cs-filter--web-design.is-active {
    background: linear-gradient(135deg, var(--cs-web), #0b4aa8);
    border-color: var(--cs-web);
}
.cs-filter--seo:hover,
.cs-filter--seo.is-active {
    background: linear-gradient(135deg, var(--cs-seo), #0f766e);
    border-color: var(--cs-seo);
}
.cs-filter--sem:hover,
.cs-filter--sem.is-active {
    background: linear-gradient(135deg, var(--cs-sem), #c2410c);
    border-color: var(--cs-sem);
}
.cs-filter:hover em,
.cs-filter.is-active em { background: rgba(255, 255, 255, 0.2); color: #fff; }
.cs-index-count { margin: 1rem 0 0; color: var(--cs-muted); font-size: 0.92rem; }

.cs-index-grid-section { padding: 1.25rem 0 3.5rem; }
.cs-index-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
.cs-card {
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
    border: 1px solid rgba(21, 101, 216, 0.12);
    box-shadow: 0 12px 32px rgba(16, 35, 61, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.cs-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(21, 101, 216, 0.16);
}
.cs-card-media {
    position: relative;
    display: block;
    aspect-ratio: 6 / 5;
    overflow: hidden;
    background: #eef2f7;
}
.cs-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
}
.cs-card-media-fallback {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0d3057, #1565d8 55%, #14b8a6);
}
.cs-card--seo .cs-card-media-fallback {
    background: linear-gradient(135deg, #064e3b, #0d6049 50%, #14b8a6);
}
.cs-card--sem .cs-card-media-fallback {
    background: linear-gradient(135deg, #7c2d12, #b45309 50%, #e7b83f);
}
.cs-card-media .cs-type-pill {
    position: absolute;
    left: 0.85rem;
    top: 0.85rem;
    z-index: 1;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 8px 18px rgba(6, 21, 40, 0.12);
}

.cs-video-badge {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.7rem 0.28rem 0.32rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(6, 21, 40, 0.78);
    border: 1px solid rgba(231, 184, 63, 0.38);
    box-shadow: 0 10px 22px rgba(6, 21, 40, 0.22);
    backdrop-filter: blur(10px);
    pointer-events: none;
}

.cs-video-badge-play {
    display: grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: var(--cs-gold, #e7b83f);
    color: #0a1628;
    box-shadow: 0 0 0 3px rgba(231, 184, 63, 0.18);
}

.cs-video-badge-play svg {
    display: block;
    width: 0.72rem;
    height: 0.72rem;
    margin-left: 0.08rem;
}

.cs-card:hover .cs-video-badge,
.cs-featured-card:hover .cs-video-badge {
    background: rgba(6, 21, 40, 0.88);
    border-color: rgba(231, 184, 63, 0.62);
}

.cs-featured-media .cs-video-badge {
    top: 1.1rem;
    right: 1.1rem;
}
.cs-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1.2rem 1.25rem 1.35rem;
    flex: 1;
}
.cs-card-body h2 {
    margin: 0;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--cs-navy);
}
.cs-card-body h2 a { color: inherit; text-decoration: none; }
.cs-card-body h2 a:hover { color: var(--cs-web); }
.cs-card--seo .cs-card-body h2 a:hover { color: var(--cs-seo); }
.cs-card--sem .cs-card-body h2 a:hover { color: var(--cs-sem); }
.cs-card-body > p { margin: 0; color: var(--cs-muted); font-size: 0.94rem; flex: 1; }
.cs-card-link { margin-top: 0.35rem; font-weight: 800; color: var(--cs-web); text-decoration: none; }
.cs-card--seo .cs-card-link { color: var(--cs-seo); }
.cs-card--sem .cs-card-link { color: var(--cs-sem); }
.cs-card-link:hover { color: var(--cs-navy); }

.cs-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: center;
    margin-top: 2.5rem;
}
.cs-page-link,
.cs-page-current {
    min-width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(21, 101, 216, 0.18);
    background: rgba(255, 255, 255, 0.95);
    color: var(--cs-navy);
    font-weight: 700;
    text-decoration: none;
}
.cs-page-link:hover {
    border-color: var(--cs-web);
    color: var(--cs-web);
    background: var(--cs-sky);
}
.cs-page-current {
    background: linear-gradient(135deg, var(--cs-web), #0b4aa8);
    border-color: var(--cs-web);
    color: #fff;
    box-shadow: 0 8px 18px rgba(21, 101, 216, 0.28);
}

.cs-index-cta {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(700px 280px at 12% 20%, rgba(231, 184, 63, 0.28), transparent 55%),
        radial-gradient(640px 260px at 88% 80%, rgba(20, 184, 166, 0.22), transparent 55%),
        linear-gradient(135deg, #04101f 0%, #0a2850 48%, #0b3b4a 100%);
    color: #fff;
    padding: clamp(2.75rem, 5vw, 4rem) 0;
}
.cs-index-cta::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, var(--cs-gold), var(--cs-web), var(--cs-teal), var(--cs-sem));
}
.cs-index-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.cs-index-cta h2 {
    margin: 0 0 0.65rem;
    color: #fff;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    letter-spacing: -0.03em;
}
.cs-index-cta p { margin: 0; color: rgba(255, 255, 255, 0.75); max-width: 36rem; }

.cs-index-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
}

.cs-index-cta .cs-text-link {
    color: rgba(255, 255, 255, 0.82);
}

.cs-index-cta .cs-text-link:hover {
    color: #fff;
}
.button-light { background: var(--cs-gold); color: var(--cs-midnight); border: none; }
.button-light:hover { background: #f0c85a; color: var(--cs-midnight); }

.cs-single-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 420px at 10% 0%, rgba(231, 184, 63, 0.2), transparent 55%),
        linear-gradient(155deg, var(--cs-midnight), var(--cs-navy) 60%, #10233d);
    color: #fff;
    padding: clamp(2.75rem, 6vw, 4.5rem) 0;
}
.cs-single-hero-glow {
    position: absolute;
    inset: 20% -20% -30% 50%;
    background: radial-gradient(circle, rgba(21, 101, 216, 0.25), transparent 60%);
    pointer-events: none;
}
.cs-breadcrumb {
    margin: 0 0 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
}
.cs-breadcrumb a { color: rgba(255, 255, 255, 0.85); text-decoration: none; font-weight: 700; }
.cs-breadcrumb a:hover { color: var(--cs-gold); }
.cs-single-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
}
.cs-single-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    margin-bottom: 0.75rem;
}
.cs-single-hero-tags .cs-type-pill { background: rgba(255, 255, 255, 0.12); color: #fff; }
.cs-single-industry { color: rgba(255, 255, 255, 0.7); font-size: 0.88rem; font-weight: 600; }
.cs-single-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    letter-spacing: -0.04em;
    line-height: 1.05;
    font-weight: 900;
}
.cs-single-lead {
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.08rem;
    max-width: 38rem;
}
.cs-single-hero .cs-chip-list li {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.cs-single-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}
.cs-single-logo--hero {
    margin: 0 0 0.85rem;
    padding: 0.55rem 0.85rem;
    background: rgba(255, 255, 255, 0.96);
}
.cs-single-logo--hero.cs-single-logo--light {
    background: rgba(10, 26, 46, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.cs-single-logo--hero img { width: min(160px, 42vw); }
.cs-single-hero-visual { display: grid; gap: 1rem; position: relative; }
.cs-single-logo {
    justify-self: start;
    padding: 0.85rem 1.1rem;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}
.cs-single-logo--light {
    background: #0a1a2e;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.cs-single-logo img { width: min(220px, 55vw); height: auto; }
.cs-single-hero-shot {
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.35);
}
.cs-single-hero-shot img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    object-position: top center;
}

/* Cinematic hero device stack */
.cs-hero-devices {
    position: relative;
    min-height: clamp(280px, 34vw, 420px);
    margin-right: clamp(0rem, 2vw, 1.5rem);
}
.cs-hero-device { margin: 0; position: absolute; }
.cs-hero-device--desktop {
    left: 0;
    right: 12%;
    top: 0;
    z-index: 1;
}
.cs-hero-device--desktop .cs-device-chrome {
    border-radius: 14px 14px 0 0;
    background: #e8eef6;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 0;
}
.cs-hero-device--desktop .cs-device-screen {
    border-radius: 0 0 14px 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-top: 0;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
    background: #0b1220;
}
.cs-hero-device--desktop img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    object-position: top center;
}
.cs-hero-device--tablet {
    width: clamp(120px, 16vw, 180px);
    right: 18%;
    bottom: -6%;
    z-index: 2;
    border: 7px solid #1b2433;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4);
    background: #111;
}
.cs-hero-device--tablet img {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top center;
}
.cs-hero-device--phone {
    width: clamp(88px, 11vw, 128px);
    right: 0;
    bottom: -2%;
    z-index: 3;
}
.cs-hero-device--phone .cs-device-notch {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 36%;
    height: 7px;
    border-radius: 999px;
    background: #0b1220;
    z-index: 2;
}
.cs-hero-device--phone .cs-device-screen {
    border-radius: 18px;
    overflow: hidden;
    border: 4px solid #121a27;
    background: #111;
    box-shadow: 0 26px 50px rgba(0, 0, 0, 0.45);
}
.cs-hero-device--phone img {
    width: 100%;
    display: block;
    aspect-ratio: 390 / 900;
    object-fit: contain;
    object-position: top center;
}

.cs-meta-strip {
    margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.cs-meta-strip div { margin: 0; }
.cs-meta-strip dt {
    margin: 0 0 0.25rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cs-gold);
}
.cs-meta-strip dd {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
}

.cs-voice-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    gap: clamp(1.25rem, 3vw, 2.25rem);
    align-items: center;
}
.cs-pull-quote {
    margin: 0;
    padding: clamp(1.25rem, 3vw, 1.85rem);
    border-radius: 22px;
    background: linear-gradient(160deg, #0f2744, #163456);
    color: #fff;
    box-shadow: 0 18px 40px rgba(16, 35, 61, 0.12);
    border: 1px solid rgba(231, 184, 63, 0.28);
}
.cs-pull-quote p {
    margin: 0;
    font-size: clamp(1.2rem, 2.2vw, 1.55rem);
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}
.cs-pull-quote footer {
    margin-top: 1rem;
    display: grid;
    gap: 0.15rem;
}
.cs-pull-quote strong {
    color: var(--cs-gold);
    font-size: 0.95rem;
}
.cs-pull-quote span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.86rem;
}

.cs-single-compare { padding: clamp(2.75rem, 5vw, 4.5rem) 0; background: #f4f7fb; }
.cs-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
}
.cs-compare-card {
    margin: 0;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--cs-border);
    background: #fff;
    box-shadow: 0 16px 40px rgba(16, 35, 61, 0.08);
}
.cs-compare-shot {
    display: block;
    background: #eef3f8;
    cursor: zoom-in;
    padding: 0 0.15rem 0.15rem;
}
.cs-compare-card img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: center top;
}
.cs-compare-card--after img { filter: none; }
.cs-compare-label {
    display: inline-flex;
    margin: 0.85rem 0.85rem 0.55rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(10, 26, 46, 0.86);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.cs-compare-card--after .cs-compare-label {
    background: var(--cs-brand, var(--accent));
}

.cs-related { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.cs-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.cs-related-card {
    display: grid;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--cs-border);
    background: #fff;
    box-shadow: 0 12px 28px rgba(16, 35, 61, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cs-related-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(16, 35, 61, 0.12);
}
.cs-related-media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #eef2f7;
}
.cs-related-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}
.cs-related-body {
    display: grid;
    gap: 0.35rem;
    padding: 0 1rem 1.1rem;
}
.cs-related-body strong {
    color: var(--cs-navy);
    font-size: 1.05rem;
}
.cs-related-body span {
    color: var(--cs-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.cs-sticky-live {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 0.75rem 0;
    background: rgba(10, 26, 46, 0.94);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(110%);
    transition: transform 0.28s ease;
}
.cs-sticky-live.is-visible { transform: translateY(0); }
.cs-sticky-live-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #fff;
    font-weight: 700;
}
.cs-sticky-live .button { margin: 0; }

.cs-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.cs-reveal.is-in,
.cs-reveal.is-visible {
    opacity: 1;
    transform: none;
}
/* Tall screenshot rows must stay visible — IO thresholds can miss them. */
.cs-page-showcase.cs-reveal {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .cs-reveal { opacity: 1; transform: none; transition: none; }
    .cs-sticky-live { transition: none; }
}

.cs-single-video,
.cs-single-challenge,
.cs-single-pages,
.cs-single-solutions,
.cs-single-conclusion { padding: clamp(2.75rem, 5vw, 4.5rem) 0; }

.cs-single-section-head { max-width: 720px; margin-bottom: 1.75rem; }
.cs-single-section-head h2,
.cs-single-challenge h2,
.cs-single-conclusion h2 {
    margin: 0;
    color: var(--cs-navy);
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    letter-spacing: -0.03em;
    line-height: 1.15;
}
.cs-section-lead { margin: 0.85rem 0 0; color: var(--cs-muted); font-size: 1.05rem; }

.cs-video-frame {
    position: relative;
    width: min(960px, 100%);
    aspect-ratio: 16 / 9;
    min-height: 12rem;
    border-radius: 22px;
    overflow: hidden;
    background-color: #000;
    background-position: center;
    background-size: cover;
    box-shadow: 0 24px 60px rgba(16, 35, 61, 0.18);
    border: 1px solid var(--cs-border);
}
.cs-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.cs-single-challenge { background: linear-gradient(180deg, #f6f8fb 0%, #fff 100%); }
.cs-single-split {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}
.cs-single-challenge p { color: var(--cs-muted); font-size: 1.02rem; }
.cs-overview-card {
    padding: 1.5rem;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--cs-border);
    box-shadow: 0 16px 40px rgba(16, 35, 61, 0.07);
}
.cs-overview-card h3 { margin: 0 0 0.75rem; color: var(--cs-navy); font-size: 1.35rem; }
.cs-overview-card p { margin: 0 0 0.75rem; color: var(--cs-muted); font-size: 0.95rem; }
.cs-check-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0.45rem; }
.cs-check-list li {
    position: relative;
    padding-left: 1.4rem;
    color: var(--cs-navy);
    font-weight: 700;
    font-size: 0.92rem;
}
.cs-check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--cs-gold);
}

.cs-pages-wrap { max-width: 1240px; }
.cs-single-section-head--wide { max-width: 820px; }
.cs-pages-stack {
    display: grid;
    gap: clamp(2.75rem, 6vw, 4.5rem);
}
.cs-page-showcase {
    display: grid;
    grid-template-columns: minmax(200px, 0.62fr) minmax(0, 1.7fr);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: start;
}
.cs-page-showcase--flip {
    grid-template-columns: minmax(0, 1.55fr) minmax(220px, 0.78fr);
}
.cs-page-showcase--flip .cs-page-showcase-copy { order: 2; }
.cs-page-showcase--flip .cs-page-showcase-devices { order: 1; }
.cs-page-showcase-copy {
    padding-bottom: 0.5rem;
}
.cs-page-index {
    margin: 0 0 0.45rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}
.cs-page-showcase-copy h3 {
    margin: 0 0 0.55rem;
    color: var(--cs-navy);
    font-size: clamp(1.45rem, 2.4vw, 1.85rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.cs-page-showcase-copy > p {
    margin: 0 0 0.95rem;
    color: var(--cs-muted);
    font-size: 1.02rem;
    line-height: 1.55;
    max-width: 34ch;
}
.cs-device-labels {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.cs-device-labels li {
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: #eef3fb;
    color: var(--cs-navy);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cs-page-showcase-devices {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: clamp(0.65rem, 1.5vw, 1.1rem);
    align-items: end;
    min-height: 280px;
}
.cs-page-showcase-devices[data-devices="2"] {
    grid-template-columns: minmax(0, 1fr) auto;
}
.cs-page-showcase-devices[data-devices="1"] {
    grid-template-columns: minmax(0, 1fr);
}

.cs-device {
    margin: 0;
    position: relative;
}
.cs-device--desktop {
    min-width: 0;
}
.cs-device-chrome {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.85rem;
    background: #e8eef6;
    border: 1px solid #d3dce8;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
}
.cs-device-chrome span {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #ff5f57;
}
.cs-device-chrome span:nth-child(2) { background: #febc2e; }
.cs-device-chrome span:nth-child(3) { background: #28c840; }
.cs-device-chrome em {
    margin-left: auto;
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7c93;
}
.cs-device--desktop .cs-device-screen {
    border: 1px solid #d3dce8;
    border-top: 0;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    background: #0f172a;
    box-shadow: 0 28px 60px rgba(16, 35, 61, 0.18);
}
.cs-device--desktop img {
    width: 100%;
    display: block;
    height: auto;
    object-fit: contain;
    object-position: top center;
}
.cs-device-screen a {
    display: block;
    color: inherit;
}

.cs-device--tablet {
    width: clamp(148px, 18vw, 210px);
    z-index: 2;
}
.cs-device--tablet .cs-device-bezel {
    position: absolute;
    inset: -8px;
    border-radius: 18px;
    border: 8px solid #1b2433;
    box-shadow: 0 24px 48px rgba(16, 35, 61, 0.22);
    pointer-events: none;
}
.cs-device--tablet .cs-device-screen {
    border-radius: 10px;
    overflow: hidden;
    background: #111;
}
.cs-device--tablet img {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: top center;
}
.cs-device--tablet figcaption,
.cs-device--phone figcaption {
    margin-top: 0.55rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7c93;
}

.cs-device--phone {
    width: clamp(108px, 13vw, 168px);
    z-index: 3;
}
.cs-device--phone .cs-device-notch {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36%;
    height: 8px;
    border-radius: 999px;
    background: #0b1220;
    z-index: 2;
}
.cs-device--phone .cs-device-screen {
    border-radius: 22px;
    overflow: hidden;
    border: 5px solid #121a27;
    background: #111;
    box-shadow: 0 26px 50px rgba(16, 35, 61, 0.28);
}
.cs-device--phone img {
    width: 100%;
    display: block;
    aspect-ratio: 390 / 900;
    object-fit: contain;
    object-position: top center;
}

/* Legacy selectors kept for older markup / cached pages */
.cs-pages-grid { display: grid; gap: 2rem; }
.cs-page-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
    gap: 1.5rem;
    align-items: center;
    padding: 1.25rem;
    border-radius: 24px;
    background: #fff;
    border: 1px solid var(--cs-border);
    box-shadow: 0 14px 36px rgba(16, 35, 61, 0.06);
}
.cs-page-card:nth-child(even) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); }
.cs-page-card:nth-child(even) .cs-page-devices { order: 2; }
.cs-page-devices {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: end;
}
.cs-device-browser {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #d7dee8;
    background: #eef2f7;
    box-shadow: 0 16px 36px rgba(16, 35, 61, 0.12);
}
.cs-device-browser-bar {
    display: flex;
    gap: 0.35rem;
    padding: 0.55rem 0.75rem;
    background: #e5ebf2;
}
.cs-device-browser-bar span {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #ff5f57;
}
.cs-device-browser-bar span:nth-child(2) { background: #febc2e; }
.cs-device-browser-bar span:nth-child(3) { background: #28c840; }
.cs-device-browser img {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
}
.cs-device-phone {
    width: min(110px, 28%);
    border-radius: 18px;
    overflow: hidden;
    border: 3px solid #1a2433;
    box-shadow: 0 18px 36px rgba(16, 35, 61, 0.22);
    background: #111;
    margin-bottom: 0.35rem;
}
.cs-device-phone img {
    width: 100%;
    display: block;
    aspect-ratio: 390 / 900;
    object-fit: contain;
    object-position: top center;
}
.cs-page-copy h3 {
    margin: 0 0 0.55rem;
    color: var(--cs-navy);
    font-size: 1.45rem;
    letter-spacing: -0.02em;
}
.cs-page-copy p { margin: 0 0 0.85rem; color: var(--cs-muted); }

.cs-solutions-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.cs-solution-card {
    padding: 1.35rem 1.4rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--cs-border);
}
.cs-solution-card h3 { margin: 0 0 0.45rem; color: var(--cs-navy); font-size: 1.1rem; }
.cs-solution-card p { margin: 0; color: var(--cs-muted); font-size: 0.96rem; }

.cs-gallery-wrap {
    position: relative;
    margin-top: 2rem;
}
.cs-gallery {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2.3rem) / 3);
    grid-template-columns: unset;
    gap: 1.15rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0.35rem 0.15rem 1rem;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.cs-gallery-item {
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--cs-border);
    box-shadow: 0 16px 40px rgba(16, 35, 61, 0.08);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.cs-gallery-thumb {
    display: block;
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
    background: #eef2f7;
}
.cs-gallery-thumb::after {
    content: '';
    position: absolute;
    inset: auto 0.75rem 0.75rem auto;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d3057' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / 1.05rem no-repeat;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    opacity: 0.92;
    pointer-events: none;
}
.cs-gallery-thumb img {
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.35s ease;
}
.cs-gallery-thumb:hover img {
    transform: scale(1.04);
}
.cs-gallery-item figcaption {
    padding: 0.75rem 1rem;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--cs-navy);
    background: #fff;
}
.cs-gallery-scroll-btn {
    position: absolute;
    top: calc(50% - 1.5rem);
    z-index: 2;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(13, 48, 87, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--cs-navy);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(16, 35, 61, 0.16);
    display: grid;
    place-items: center;
    transition: background 0.2s ease, transform 0.2s ease;
}
.cs-gallery-scroll-btn:hover {
    background: #fff;
    transform: scale(1.05);
}
.cs-gallery-scroll-prev { left: -0.35rem; }
.cs-gallery-scroll-next { right: -0.35rem; }

/* Case study lightbox */
.cs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10050;
    background: rgba(8, 14, 24, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 3vw, 2.5rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
.cs-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}
.cs-lightbox-inner {
    position: relative;
    width: min(1400px, 96vw);
    max-height: 92vh;
    display: grid;
    gap: 0.75rem;
    justify-items: center;
}
.cs-lightbox-inner img {
    width: auto;
    height: auto;
    max-width: 100%;
            max-height: min(88vh, 1100px);
    border-radius: 12px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
    object-fit: contain;
    background: #0b1220;
}
.cs-lightbox-caption {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
}
.cs-lightbox-counter {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.cs-lightbox-close,
.cs-lightbox-nav {
    position: absolute;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s ease;
}
.cs-lightbox-close:hover,
.cs-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.28);
}
.cs-lightbox-close {
    top: 1rem;
    right: 1rem;
    width: 48px;
    height: 48px;
    font-size: 1.6rem;
    line-height: 1;
}
.cs-lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    font-size: 2.2rem;
    line-height: 1;
    display: grid;
    place-items: center;
}
.cs-lightbox-prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.cs-lightbox-next { right: clamp(0.5rem, 2vw, 1.5rem); }
body.cs-lightbox-open { overflow: hidden; }

.cs-single-outcomes {
    background: linear-gradient(135deg, var(--cs-midnight), var(--cs-navy));
    color: #fff;
    padding: clamp(2.75rem, 5vw, 4rem) 0;
}
.cs-outcomes-inner { display: grid; gap: 1.5rem; }
.cs-outcomes-inner h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    letter-spacing: -0.03em;
}
.cs-outcomes-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
.cs-outcomes-list li {
    padding: 1rem 1.1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 700;
}
.cs-conclusion-text {
    margin: 1rem 0 0;
    max-width: 48rem;
    color: var(--cs-muted);
    font-size: 1.08rem;
}

.cs-stack-warning {
    padding: clamp(2rem, 4vw, 3rem) 0;
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.06), rgba(13, 48, 87, 0.04));
    border-top: 1px solid rgba(220, 38, 38, 0.12);
    border-bottom: 1px solid rgba(13, 48, 87, 0.08);
}
.cs-stack-warning-inner {
    display: grid;
    gap: 1.25rem;
    align-items: center;
}
.cs-stack-warning h2 {
    margin: 0.35rem 0 0.65rem;
    font-size: clamp(1.45rem, 2.8vw, 2rem);
    letter-spacing: -0.03em;
    color: var(--cs-midnight);
}
.cs-stack-warning p {
    margin: 0;
    max-width: 44rem;
    color: var(--cs-muted);
    line-height: 1.6;
}
@media (min-width: 768px) {
    .cs-stack-warning-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2rem;
    }
}

.cs-single-cta {
    background: #0a1628;
    color: #fff;
    padding: clamp(2.75rem, 5vw, 4rem) 0;
}
.cs-single-cta-inner {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    align-items: end;
}
.cs-single-cta h2 {
    margin: 0 0 0.65rem;
    color: #fff;
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    letter-spacing: -0.03em;
}
.cs-single-cta p { margin: 0; color: rgba(255, 255, 255, 0.75); max-width: 36rem; }
.cs-cta-note { margin-top: 0.85rem !important; color: var(--cs-gold) !important; font-weight: 700; }
.cs-single-cta-actions { display: grid; gap: 0.85rem; justify-items: start; }

.cs-single-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 2rem 0 3.5rem;
}
.cs-nav-link {
    display: grid;
    gap: 0.25rem;
    padding: 1.1rem 1.2rem;
    border-radius: 16px;
    border: 1px solid var(--cs-border);
    background: #fff;
    text-decoration: none;
    color: var(--cs-navy);
}
.cs-nav-link--next { text-align: right; }
.cs-nav-link span {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--cs-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cs-nav-link strong { font-size: 1.05rem; }

@media (max-width: 980px) {
    .cs-index-stats,
    .cs-index-grid,
    .cs-solutions-grid,
    .cs-outcomes-list,
    .cs-related-grid,
    .cs-compare-grid,
    .cs-meta-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-featured-card,
    .cs-single-hero-grid,
    .cs-single-split,
    .cs-page-card,
    .cs-page-card:nth-child(even),
    .cs-page-showcase,
    .cs-page-showcase--flip,
    .cs-voice-grid { grid-template-columns: 1fr; }
    .cs-page-card:nth-child(even) .cs-page-devices { order: 0; }
    .cs-page-showcase--flip .cs-page-showcase-copy,
    .cs-page-showcase--flip .cs-page-showcase-devices { order: 0; }
    .cs-page-showcase-devices {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }
    .cs-device--tablet { width: clamp(130px, 22vw, 180px); }
    .cs-device--phone { width: clamp(96px, 16vw, 140px); }
    .cs-gallery {
        grid-auto-columns: calc((100% - 1.15rem) / 2);
    }
    .cs-hero-devices {
        min-height: 300px;
        margin: 0.5rem 0 1.5rem;
    }
    .cs-hero-device--tablet { right: 14%; width: 140px; }
    .cs-hero-device--phone { width: 100px; }
}
@media (max-width: 640px) {
    .cs-index-stats,
    .cs-index-grid,
    .cs-solutions-grid,
    .cs-outcomes-list,
    .cs-related-grid,
    .cs-compare-grid,
    .cs-meta-strip,
    .cs-single-nav { grid-template-columns: 1fr; }
    .cs-device-phone { width: 92px; }
    .cs-page-showcase-devices,
    .cs-page-showcase-devices[data-devices="2"],
    .cs-page-showcase-devices[data-devices="3"] {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .cs-device--desktop { width: 100%; }
    .cs-device--tablet { width: min(220px, 58vw); }
    .cs-device--phone { width: min(160px, 42vw); }
    .cs-index-cta-inner,
    .cs-single-cta-inner { align-items: stretch; }
    .cs-gallery {
        grid-auto-columns: 85%;
    }
    .cs-gallery-scroll-prev { left: 0.15rem; }
    .cs-gallery-scroll-next { right: 0.15rem; }
    .cs-lightbox-nav {
        width: 44px;
        height: 44px;
        font-size: 1.7rem;
    }
    .cs-sticky-live-inner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}


/* Case study metrics */
.cs-metrics-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 1.25rem;
}
.cs-metric {
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.cs-metric strong {
    display: block;
    color: var(--cs-gold);
    font-size: clamp(1.35rem, 2.5vw, 1.8rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.05;
}
.cs-metric span {
    display: block;
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.82rem;
    font-weight: 600;
}

/* SEO case studies — stats wall + proof screenshot grid */
.cs-seo-stats {
    padding: clamp(2.25rem, 4.5vw, 3.5rem) 0;
    background: linear-gradient(180deg, #f7fafc 0%, #fff 100%);
    border-bottom: 1px solid rgba(13, 48, 87, 0.06);
}

.cs-seo-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

.cs-seo-stat {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 100%;
    padding: 1.25rem 1.2rem 1.35rem;
    border-radius: 16px;
    background: linear-gradient(145deg, #0d3057 0%, #1a4a7a 52%, #0a2545 100%);
    color: #fff;
    box-shadow: 0 18px 40px rgba(13, 48, 87, 0.16);
}

.cs-seo-stat:nth-child(3n+2) {
    background: linear-gradient(145deg, #0f766e 0%, #14b8a6 55%, #0d5c56 100%);
}

.cs-seo-stat:nth-child(3n+3) {
    background: linear-gradient(145deg, #123d2e 0%, #047857 55%, #0b2e22 100%);
}

.cs-seo-stat strong {
    color: #fff;
    font-size: clamp(1.55rem, 2.8vw, 2.1rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.cs-seo-stat span {
    color: rgba(255, 255, 255, 0.88);
    font-size: calc(0.9rem * var(--ref-s, 1));
    font-weight: 700;
    line-height: 1.35;
}

.cs-seo-stat em {
    margin-top: auto;
    padding-top: 0.55rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 600;
}

.cs-seo-proof {
    padding: clamp(2.5rem, 5vw, 4.25rem) 0;
    background: #f4f7fb;
}

.cs-seo-proof-stack {
    display: grid;
    gap: clamp(1.25rem, 2.4vw, 1.85rem);
}

.cs-seo-proof-board {
    margin: 0;
    padding: clamp(1.15rem, 2vw, 1.6rem);
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(13, 48, 87, 0.1);
    box-shadow: 0 18px 40px rgba(13, 48, 87, 0.07);
}

.cs-seo-proof-board-head {
    max-width: 46rem;
    margin: 0 0 1.05rem;
}
.cs-seo-proof-board-head .cs-page-index {
    margin-bottom: 0.35rem;
}
.cs-seo-proof-board-head h3 {
    margin: 0 0 0.45rem;
    color: var(--cs-navy);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.cs-seo-proof-board-head p:not(.cs-page-index) {
    margin: 0;
    color: var(--cs-muted);
    font-size: 0.98rem;
    line-height: 1.5;
}

.cs-seo-proof-board-body {
    display: grid;
    gap: 1rem;
}

.cs-seo-proof-figure {
    margin: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.cs-seo-proof-kicker {
    align-self: flex-start;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: #eef3fb;
    color: var(--cs-navy);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.cs-seo-proof-kicker--after {
    background: var(--cs-brand, var(--accent));
    color: #0d3057;
}

.cs-seo-proof-media {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 1rem;
    border-radius: 16px;
    background:
        linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%);
    border: 1px solid rgba(13, 48, 87, 0.06);
    cursor: zoom-in;
}
.cs-seo-proof-media img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    object-position: top center;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(13, 48, 87, 0.1);
}

.cs-seo-proof-board--table {
    display: grid;
    grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
    gap: clamp(1rem, 2vw, 1.75rem);
    align-items: start;
}
.cs-seo-proof-board--table .cs-seo-proof-board-head {
    margin: 0;
    max-width: none;
    padding-top: 0.35rem;
}
.cs-seo-proof-board--table .cs-seo-proof-media {
    padding: 0.75rem;
}
.cs-seo-proof-board--table .cs-seo-proof-media img {
    max-height: 640px;
    width: 100%;
    max-width: 760px;
    margin: 0;
}

.cs-seo-proof-board--chart .cs-seo-proof-media {
    padding: 0.85rem;
}
.cs-seo-proof-board--chart .cs-seo-proof-media img {
    width: 100%;
    max-height: none;
    box-shadow: none;
    border-radius: 8px;
}

.cs-seo-proof-board--pair .cs-seo-proof-board-body,
.cs-seo-proof-board--maps .cs-seo-proof-board-body {
    grid-template-columns: minmax(0, 1.7fr) minmax(200px, 0.7fr);
    align-items: stretch;
}
.cs-seo-proof-board--maps .cs-seo-proof-board-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cs-seo-proof-board--pair .cs-seo-proof-figure,
.cs-seo-proof-board--maps .cs-seo-proof-figure {
    height: 100%;
}
.cs-seo-proof-board--pair .cs-seo-proof-media {
    flex: 1;
    min-height: 220px;
}
.cs-seo-proof-board--pair .cs-seo-proof-media img,
.cs-seo-proof-board--maps .cs-seo-proof-media img {
    width: 100%;
    max-height: none;
}
.cs-seo-proof-board--maps .cs-seo-proof-media {
    padding: 0.55rem;
    background: #fff;
}
.cs-seo-proof-board--maps .cs-seo-proof-media img {
    box-shadow: none;
    border-radius: 8px;
}

.cs-seo-proof-figure figcaption {
    color: var(--cs-muted);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.45;
}

.cs-single--seo .cs-single-pages,
.cs-single--sem .cs-single-pages {
    background: linear-gradient(180deg, #f7fafc 0%, #fff 100%);
}

@media (max-width: 900px) {
    .cs-seo-stats-grid,
    .cs-seo-proof-board--table,
    .cs-seo-proof-board--pair .cs-seo-proof-board-body,
    .cs-seo-proof-board--maps .cs-seo-proof-board-body {
        grid-template-columns: 1fr;
    }
}

.cs-card--web-design {
    border-top: 4px solid var(--cs-web);
    border-color: rgba(21, 101, 216, 0.16);
}
.cs-card--seo {
    border-top: 4px solid var(--cs-seo);
    border-color: rgba(13, 96, 73, 0.16);
    background: linear-gradient(180deg, #fff 0%, #f4fbf8 100%);
}
.cs-card--seo:hover { box-shadow: 0 22px 48px rgba(13, 96, 73, 0.16); }
.cs-card--sem {
    border-top: 4px solid var(--cs-sem);
    border-color: rgba(180, 83, 9, 0.18);
    background: linear-gradient(180deg, #fff 0%, #fffaf3 100%);
}
.cs-card--sem:hover { box-shadow: 0 22px 48px rgba(180, 83, 9, 0.14); }

@media (max-width: 720px) {
    .cs-metrics-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Blog index + single (aligned with case studies) ===== */
.cs-chip-list a {
    color: inherit;
    text-decoration: none;
}
.cs-chip-list a:hover { color: var(--cs-web); }

.blog-v2-card-meta {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--cs-muted);
}

.blog-v2-grid .cs-card-body h2,
.blog-v2-grid .cs-card-body h3 {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
}
.blog-v2-grid .cs-card-body h3 a {
    color: inherit;
    text-decoration: none;
}
.blog-v2-grid .cs-card-body h3 a:hover { color: var(--cs-web); }

.blog-v2-featured .cs-featured-media {
    align-self: stretch;
    min-height: 100%;
}
.blog-v2-featured .cs-featured-media a {
    position: absolute;
    inset: 0;
    display: block;
}
.blog-v2-featured .cs-featured-media img,
.blog-v2-grid .cs-card-media img {
    object-fit: cover;
    object-position: center;
}
@media (min-width: 981px) {
    .blog-v2-featured .cs-featured-media {
        aspect-ratio: auto;
        height: 100%;
    }
}

.blog-v2-pagination .cs-page-link--nav {
    min-width: auto;
    padding: 0 1.05rem;
}
.blog-v2-pagination .cs-page-link.is-disabled {
    opacity: 0.38;
    pointer-events: none;
    box-shadow: none;
}
.blog-v2-pagination .cs-page-ellipsis {
    min-width: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cs-muted);
    font-weight: 800;
    letter-spacing: 0.12em;
}

.page-blog-v2 .cs-index-empty-note {
    margin: 0;
    color: var(--cs-muted);
    font-weight: 600;
}

.post-v2-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(920px 460px at 12% -8%, rgba(231, 184, 63, 0.38), transparent 56%),
        radial-gradient(860px 480px at 88% 8%, rgba(21, 101, 216, 0.42), transparent 52%),
        radial-gradient(720px 420px at 55% 100%, rgba(20, 184, 166, 0.28), transparent 58%),
        linear-gradient(155deg, #04101f 0%, #0a2850 42%, #0e3d6e 72%, #0b3b4a 100%);
    color: #fff;
    padding: clamp(3rem, 6.5vw, 5.25rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.page-post-has-featured .post-v2-hero {
    /* Room for the overlapping featured image so tags stay readable */
    padding-bottom: clamp(4.25rem, 8vw, 6rem);
}
.post-v2-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--cs-gold) 0%, var(--cs-web) 35%, var(--cs-teal) 68%, var(--cs-sem) 100%);
}
.post-v2-hero-glow {
    position: absolute;
    inset: auto -10% -40% 40%;
    height: 60%;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.28), transparent 65%);
    pointer-events: none;
}
.post-v2-hero-inner {
    position: relative;
    max-width: 820px;
}
.post-v2-hero .cs-eyebrow,
.post-v2-hero .cs-eyebrow a {
    color: var(--cs-gold);
    text-decoration: none;
}
.post-v2-hero .cs-eyebrow a:hover { color: #fff; }
.post-v2-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 4.6vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: 900;
}
.post-v2-excerpt {
    margin: 1.1rem 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    max-width: 42rem;
    line-height: 1.55;
}
.post-v2-tags {
    margin-top: 1.35rem;
}
.post-v2-tags li {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.post-v2-tags a:hover { color: var(--cs-gold); }

.post-v2-featured {
    position: relative;
    z-index: 2;
    margin: clamp(-2.25rem, -5vw, -3.75rem) 0 0;
}
.post-v2-featured img {
    display: block;
    width: 100%;
    height: clamp(240px, 42vw, 560px);
    max-height: none;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: clamp(14px, 2.2vw, 22px);
    box-shadow: 0 24px 60px rgba(6, 21, 40, 0.28);
    background: #fff;
}

.post-v2-body-wrap {
    padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
.page-post-v2 .post-content {
    max-width: 720px;
}
.page-post-v2 .post-content h2 {
    color: var(--cs-navy);
    letter-spacing: -0.02em;
}
.page-post-v2 .post-content a {
    color: var(--cs-web);
    font-weight: 700;
}

.post-v2-toc-inline {
    margin: 0 0 2rem;
    padding: 1.15rem 1.25rem;
    border-radius: 18px;
    background: linear-gradient(180deg, #fff 0%, #f4f8ff 100%);
    border: 1px solid rgba(21, 101, 216, 0.14);
    box-shadow: 0 10px 30px rgba(13, 48, 87, 0.06);
}
.post-v2-toc-title {
    margin: 0 0 0.65rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cs-navy);
}
.post-v2-toc-inline ol {
    margin: 0;
    padding-left: 1.15rem;
}
.post-v2-toc-inline li { margin-bottom: 0.35rem; }
.post-v2-toc-inline a {
    color: var(--cs-navy);
    text-decoration: none;
    font-weight: 600;
}
.post-v2-toc-inline a:hover { color: var(--cs-web); }

.post-v2-related-grid {
    margin: 3.5rem 0 1rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--cs-border);
}
.post-v2-related-head { margin-bottom: 1.5rem; max-width: 40rem; }
.post-v2-related-head h2 {
    margin: 0;
    color: var(--cs-navy);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    letter-spacing: -0.03em;
}
.post-v2-related-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.post-v2-footer { margin-top: 2.5rem; }
.post-v2-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}
.post-v2-nav .post-nav-link {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.15rem 1.25rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--cs-border);
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(13, 48, 87, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.post-v2-nav .post-nav-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(13, 48, 87, 0.1);
}
.post-v2-nav .post-nav-next { text-align: right; }
.post-v2-nav .post-nav-label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cs-muted);
}
.post-v2-nav .post-nav-title {
    color: var(--cs-navy);
    font-weight: 800;
    line-height: 1.3;
}

.post-v2-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 0 0 1.75rem;
    padding: 1.75rem 1.85rem;
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(500px 220px at 90% 0%, rgba(231, 184, 63, 0.35), transparent 60%),
        linear-gradient(135deg, #0a2850 0%, #0e3d6e 55%, #0b3b4a 100%);
    box-shadow: 0 18px 40px rgba(6, 21, 40, 0.18);
}
.post-v2-cta h2 {
    margin: 0 0 0.45rem;
    color: #fff;
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    letter-spacing: -0.02em;
}
.post-v2-cta p { margin: 0; color: rgba(255, 255, 255, 0.82); max-width: 34rem; }
.post-v2-cta .button {
    flex-shrink: 0;
    background: var(--cs-gold);
    color: #0a1a2f;
    border: none;
    font-weight: 800;
}
.post-v2-cta .button:hover {
    background: #f0c85a;
    color: #061528;
}

.page-post-v2 .post-back-link {
    font-weight: 700;
    color: var(--cs-navy);
}

/* TOC column + under-TOC helpful CTA */
.page-post-v2 .post-v2-sidebar {
    position: sticky;
    top: 5.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-self: start;
    z-index: 10;
    max-height: calc(100vh - 6.5rem);
    overflow: auto;
    padding-bottom: 0.25rem;
}
.page-post-v2 .post-v2-sidebar .post-toc {
    position: static;
}
.page-post-v2 .post-v2-sidebar .post-toc-desktop {
    max-height: none;
    overflow: visible;
}

.post-v2-sidebar-panel {
    margin: 0;
    padding: 1.25rem 1.3rem 1.35rem;
    border-radius: 18px;
    background:
        radial-gradient(420px 180px at 100% 0%, rgba(231, 184, 63, 0.22), transparent 55%),
        linear-gradient(160deg, #0a2850 0%, #0e3d6e 55%, #0b3b4a 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 36px rgba(6, 21, 40, 0.18);
}
.post-v2-sidebar-panel--inline {
    margin: 0 0 2rem;
    max-width: 36rem;
}
.post-v2-sidebar-eyebrow {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cs-gold);
}
.post-v2-sidebar-heading {
    margin: 0 0 0.75rem;
    color: #fff;
    font-size: 1.15rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
}
.post-v2-sidebar-list {
    margin: 0 0 0.9rem;
    padding-left: 1.1rem;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.9rem;
    line-height: 1.45;
}
.post-v2-sidebar-list li { margin-bottom: 0.35rem; }
.post-v2-sidebar-note {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.88rem;
    line-height: 1.45;
}
.post-v2-sidebar-cta {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    background: var(--cs-gold);
    color: #0a1a2f;
    border: none;
    font-weight: 800;
}
.post-v2-sidebar-cta:hover {
    background: #f0c85a;
    color: #061528;
}
.post-v2-sidebar-contact {
    margin: 0.85rem 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.72);
    text-align: center;
}
.post-v2-sidebar-contact a {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    text-decoration: none;
}
.post-v2-sidebar-contact a:hover { color: var(--cs-gold); }

@media (max-width: 980px) {
    .post-v2-related-cards { grid-template-columns: 1fr; }
    .page-post-has-featured .post-v2-hero {
        padding-bottom: 4.5rem;
    }
    .post-v2-featured {
        margin-top: -2.75rem;
    }
    .post-v2-featured img {
        height: 320px;
    }
    .page-post-v2 .post-v2-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }
}
@media (max-width: 720px) {
    .page-post-has-featured .post-v2-hero {
        padding: 2.75rem 0 3.65rem;
    }
    .post-v2-featured {
        margin-top: -2.1rem;
    }
    .post-v2-featured img {
        height: 250px;
        border-radius: 16px;
        box-shadow: 0 16px 36px rgba(6, 21, 40, 0.22);
    }
    .post-v2-body-wrap {
        padding-top: 1.35rem;
    }
    .post-v2-nav { grid-template-columns: 1fr; }
    .post-v2-nav .post-nav-next { text-align: left; }
    .post-v2-cta {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 480px) {
    .page-post-has-featured .post-v2-hero {
        padding: 2.35rem 0 3.25rem;
    }
    .post-v2-featured {
        margin-top: -1.75rem;
    }
    .post-v2-featured img {
        height: 220px;
        border-radius: 14px;
    }
}

/* ===== Contact page v2 ===== */
.cs-eyebrow--dark { color: var(--cs-navy); }

.contact-v2-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3.75rem, 7vw, 5.5rem);
    background:
        radial-gradient(920px 460px at 12% -8%, rgba(231, 184, 63, 0.38), transparent 56%),
        radial-gradient(860px 480px at 88% 8%, rgba(21, 101, 216, 0.42), transparent 52%),
        radial-gradient(720px 420px at 55% 100%, rgba(20, 184, 166, 0.28), transparent 58%),
        linear-gradient(155deg, #04101f 0%, #0a2850 42%, #0e3d6e 72%, #0b3b4a 100%);
}
.contact-v2-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--cs-gold) 0%, var(--cs-web) 35%, var(--cs-teal) 68%, var(--cs-sem) 100%);
}
.contact-v2-hero-glow {
    position: absolute;
    inset: auto -10% -40% 40%;
    height: 60%;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.28), transparent 65%);
    pointer-events: none;
}
.contact-v2-hero-inner {
    position: relative;
    max-width: 820px;
}
.contact-v2-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(2.2rem, 5vw, 3.55rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
    font-weight: 900;
}
.contact-v2-hero-lead {
    margin: 1.15rem 0 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: clamp(1.05rem, 2vw, 1.22rem);
    max-width: 42rem;
    line-height: 1.55;
}
.contact-v2-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 1.75rem;
}
.contact-v2-hero-actions .button-light {
    background: var(--cs-gold);
    color: #0a1a2f;
    border: none;
    font-weight: 800;
}
.contact-v2-hero-actions .button-light:hover {
    background: #f0c85a;
    color: #061528;
}
.contact-v2-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 2.35rem;
    max-width: 40rem;
}
.contact-v2-stat {
    padding: 1rem 1.1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(8px);
}
.contact-v2-stat strong {
    display: block;
    color: #fff;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}
.contact-v2-stat span {
    display: block;
    margin-top: 0.2rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.84rem;
    font-weight: 600;
}

.contact-v2-main {
    padding: clamp(2.5rem, 5vw, 4rem) 0 3rem;
}
.contact-v2-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: start;
}

.contact-v2-aside-intro h2 {
    margin: 0 0 0.75rem;
    color: var(--cs-navy);
    font-size: clamp(1.55rem, 3vw, 2.1rem);
    letter-spacing: -0.03em;
    line-height: 1.15;
}
.contact-v2-aside-intro p {
    margin: 0;
    color: var(--cs-muted);
    line-height: 1.6;
}

.contact-v2-channels {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}
.contact-v2-channels li {
    padding: 1rem 0;
    border-top: 1px solid rgba(13, 48, 87, 0.1);
}
.contact-v2-channels li:last-child {
    border-bottom: 1px solid rgba(13, 48, 87, 0.1);
}
.contact-v2-channel-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cs-muted);
}
.contact-v2-channels a,
.contact-v2-channel-value {
    display: block;
    color: var(--cs-navy);
    font-weight: 800;
    font-size: 1.05rem;
    text-decoration: none;
    line-height: 1.35;
}
.contact-v2-channels a:hover { color: var(--cs-web); }
.contact-v2-channel-note,
.contact-v2-map-link {
    display: inline-block;
    margin-top: 0.3rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--cs-muted);
}
.contact-v2-map-link {
    color: var(--cs-web);
    text-decoration: none;
}
.contact-v2-map-link:hover { color: var(--cs-navy); }

.contact-v2-steps {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.85rem;
}
.contact-v2-steps li {
    display: grid;
    gap: 0.2rem;
    padding: 0.95rem 1.05rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(21, 101, 216, 0.12);
}
.contact-v2-steps strong {
    color: var(--cs-navy);
    font-size: 0.95rem;
}
.contact-v2-steps span {
    color: var(--cs-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.contact-v2-trust {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
}
.contact-v2-trust p {
    margin: 0 0 0.55rem;
    color: var(--cs-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.contact-v2-form-panel {
    position: relative;
    padding: clamp(1.35rem, 3vw, 1.85rem);
    border-radius: 24px;
    background: linear-gradient(180deg, #fff 0%, #f7faff 100%);
    border: 1px solid rgba(21, 101, 216, 0.14);
    box-shadow: 0 24px 60px rgba(6, 21, 40, 0.1);
}
.contact-v2-form-head {
    margin-bottom: 1.25rem;
}
.contact-v2-form-head h2 {
    margin: 0 0 0.45rem;
    color: var(--cs-navy);
    font-size: clamp(1.45rem, 2.5vw, 1.85rem);
    letter-spacing: -0.03em;
}
.contact-v2-form-head p {
    margin: 0;
    color: var(--cs-muted);
}

.page-contact-v2 .contact-form-wrap {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}
.page-contact-v2 .contact-form {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}
.page-contact-v2 .contact-form-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem 1rem;
}
.page-contact-v2 .form-group--full,
.page-contact-v2 .form-group--checkbox-group,
.page-contact-v2 .contact-form-fields > .form-group:has(textarea),
.page-contact-v2 .contact-form-fields > .form-group--checkbox-group {
    grid-column: 1 / -1;
}
.page-contact-v2 .contact-form label,
.page-contact-v2 .contact-form legend {
    color: var(--cs-navy);
    font-weight: 700;
    font-size: 0.9rem;
}
.page-contact-v2 .contact-form input[type="text"],
.page-contact-v2 .contact-form input[type="email"],
.page-contact-v2 .contact-form input[type="number"],
.page-contact-v2 .contact-form textarea,
.page-contact-v2 .contact-form select {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(13, 48, 87, 0.16);
    background: #fff;
    padding: 0.85rem 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.page-contact-v2 .contact-form input:focus,
.page-contact-v2 .contact-form textarea:focus,
.page-contact-v2 .contact-form select:focus {
    outline: none;
    border-color: rgba(21, 101, 216, 0.55);
    box-shadow: 0 0 0 4px rgba(21, 101, 216, 0.12);
}
.page-contact-v2 .contact-checkbox-group-options--horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}
.page-contact-v2 .contact-checkbox-option {
    border-radius: 999px;
    border: 1px solid rgba(21, 101, 216, 0.18);
    background: rgba(21, 101, 216, 0.05);
    padding: 0.55rem 0.9rem;
}
.page-contact-v2 .contact-checkbox-option:has(input:checked) {
    background: rgba(21, 101, 216, 0.14);
    border-color: rgba(21, 101, 216, 0.4);
}
.page-contact-v2 .captcha-local {
    margin-top: 0.35rem;
}
.page-contact-v2 .contact-form .button,
.page-contact-v2 .contact-form .button-full {
    margin-top: 0.35rem;
    width: 100%;
    justify-content: center;
    background: var(--cs-navy);
    border: none;
    font-weight: 800;
    padding: 0.95rem 1.25rem;
    border-radius: 14px;
}
.page-contact-v2 .contact-form .button:hover {
    background: #0a3d78;
}
.contact-v2-success h2 {
    margin: 0 0 0.55rem;
    color: var(--cs-navy);
}
.contact-v2-success p { color: var(--cs-muted); }

.contact-v2-map {
    padding: 0 0 3rem;
}
.contact-v2-map-frame {
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(13, 48, 87, 0.12);
    box-shadow: 0 18px 44px rgba(6, 21, 40, 0.08);
    background: #dbe7f5;
    aspect-ratio: 21 / 9;
    min-height: 240px;
}
.contact-v2-map-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.contact-v2-faq {
    padding: 0 0 clamp(3.5rem, 7vw, 5rem);
}
.contact-v2-faq-inner {
    display: grid;
    gap: 1.5rem;
}
.contact-v2-faq-inner > div:first-child h2 {
    margin: 0;
    color: var(--cs-navy);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    letter-spacing: -0.03em;
}
.contact-v2-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.contact-v2-faq-grid article {
    padding: 1.25rem 1.3rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(13, 48, 87, 0.1);
}
.contact-v2-faq-grid h3 {
    margin: 0 0 0.45rem;
    color: var(--cs-navy);
    font-size: 1.05rem;
}
.contact-v2-faq-grid p {
    margin: 0;
    color: var(--cs-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

@media (max-width: 980px) {
    .contact-v2-layout {
        grid-template-columns: 1fr;
    }
    .contact-v2-hero-stats {
        grid-template-columns: 1fr;
        max-width: 20rem;
    }
    .contact-v2-map-frame {
        aspect-ratio: 16 / 10;
    }
}
@media (max-width: 720px) {
    .page-contact-v2 .contact-form-fields {
        grid-template-columns: 1fr;
    }
    .contact-v2-faq-grid {
        grid-template-columns: 1fr;
    }
    .contact-v2-hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== Location / city service pages ===== */
.page-location-v2.loc-city-abbotsford {
    --loc-city-tint: rgba(231, 184, 63, 0.16);
}
.page-location-v2.loc-city-chilliwack {
    --loc-city-tint: rgba(20, 184, 166, 0.16);
}
.page-location-v2.loc-city-langley {
    --loc-city-tint: rgba(21, 101, 216, 0.16);
}

.loc-svc-dms { --loc-accent: var(--cs-web); --loc-accent-soft: rgba(21, 101, 216, 0.14); --loc-accent-deep: #0b4aa8; }
.loc-svc-web { --loc-accent: var(--cs-web); --loc-accent-soft: rgba(21, 101, 216, 0.16); --loc-accent-deep: #0b4aa8; }
.loc-svc-seo { --loc-accent: var(--cs-seo); --loc-accent-soft: rgba(13, 96, 73, 0.14); --loc-accent-deep: #0f766e; }
.loc-svc-sem { --loc-accent: var(--cs-sem); --loc-accent-soft: rgba(180, 83, 9, 0.16); --loc-accent-deep: #c2410c; }
.loc-svc-gold { --loc-accent: var(--cs-gold); --loc-accent-soft: rgba(231, 184, 63, 0.22); --loc-accent-deep: #b45309; }
.loc-svc-teal { --loc-accent: var(--cs-teal); --loc-accent-soft: rgba(20, 184, 166, 0.16); --loc-accent-deep: #0f766e; }
.loc-svc-coral { --loc-accent: #c2410c; --loc-accent-soft: rgba(194, 65, 12, 0.14); --loc-accent-deep: #9a3412; }

.loc-v2-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3.75rem, 7vw, 5.5rem);
    --loc-accent: var(--cs-web);
    --loc-accent-soft: rgba(21, 101, 216, 0.14);
    --loc-accent-deep: #0b4aa8;
    background: #04101f;
}
.loc-v2-hero-media {
    position: absolute;
    inset: 0;
    background-image: var(--loc-hero-image);
    background-size: cover;
    background-position: center;
    transform: scale(1.04);
    filter: saturate(1.08) contrast(1.05);
}
.loc-v2-hero-wash {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(4, 16, 31, 0.92) 0%, rgba(10, 40, 80, 0.82) 46%, rgba(4, 16, 31, 0.55) 100%),
        radial-gradient(720px 360px at 18% 10%, color-mix(in srgb, var(--loc-accent) 45%, transparent), transparent 60%),
        radial-gradient(640px 320px at 88% 80%, rgba(231, 184, 63, 0.28), transparent 58%);
}
.loc-v2-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--cs-gold) 0%, var(--loc-accent) 42%, var(--cs-teal) 100%);
}
.loc-v2-hero-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: end;
}
.loc-v2-hero-copy { max-width: 40rem; }
.loc-v2-hero h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(2.15rem, 5vw, 3.45rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
    font-weight: 900;
}
.loc-v2-hero-lead {
    margin: 1.15rem 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    max-width: 44rem;
    line-height: 1.55;
}
.loc-v2-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 1.75rem;
}
.loc-v2-hero-actions .button-light {
    background: var(--cs-gold);
    color: #0a1a2f;
    border: none;
    font-weight: 800;
}
.loc-v2-hero-actions .button-light:hover {
    background: #f0c85a;
    color: #061528;
}
.loc-v2-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 2.35rem;
}
.loc-v2-stat {
    padding: 1rem 1.05rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
}
.loc-v2-stat strong {
    display: block;
    color: #fff;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}
.loc-v2-stat span {
    display: block;
    margin-top: 0.2rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
    font-weight: 600;
}
.loc-v2-hero-figure {
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
    background: rgba(255, 255, 255, 0.06);
}
.loc-v2-hero-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.loc-v2-intro,
.loc-v2-pillars,
.loc-v2-market,
.loc-v2-process,
.loc-v2-siblings,
.loc-v2-faq {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.loc-v2-intro {
    background:
        radial-gradient(680px 280px at 8% 0%, var(--loc-city-tint, rgba(21, 101, 216, 0.12)), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent);
}
.loc-v2-pillars {
    background:
        radial-gradient(720px 300px at 90% 20%, var(--loc-accent-soft, rgba(21, 101, 216, 0.12)), transparent 65%);
}
.loc-v2-market {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(232, 241, 255, 0.55));
}
.loc-v2-process {
    background:
        radial-gradient(640px 260px at 20% 100%, var(--loc-accent-soft, rgba(20, 184, 166, 0.14)), transparent 70%);
}
.loc-v2-siblings {
    background: linear-gradient(180deg, rgba(255, 248, 236, 0.7), rgba(255, 255, 255, 0.35));
}
.loc-v2-intro-grid,
.loc-v2-market-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}
.loc-v2-intro-grid {
    align-items: stretch;
}
.loc-v2-intro-copy {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    align-self: stretch;
    box-sizing: border-box;
    padding: clamp(1.75rem, 3.2vw, 2.6rem);
    border-radius: 24px;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82)),
        var(--loc-accent-soft, rgba(21, 101, 216, 0.1));
    border: 1px solid color-mix(in srgb, var(--loc-accent, var(--cs-web)) 20%, transparent);
    box-shadow: 0 16px 40px rgba(6, 21, 40, 0.06);
}
.loc-v2-intro-copy .cs-eyebrow {
    margin: 0 0 0.2rem;
}
.loc-v2-intro-copy h2 {
    margin: 0 0 0.35rem;
}
.loc-v2-intro-copy .loc-v2-intro-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 1rem;
    min-height: 0;
}
.loc-v2-intro-copy .loc-v2-intro-body > p {
    margin: 0;
}
.loc-v2-intro-copy .check-list,
.loc-v2-intro-copy ul {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0.85rem;
}
.loc-v2-intro-copy .check-list li,
.loc-v2-intro-copy ul li {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding: 1.05rem 1.15rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid color-mix(in srgb, var(--loc-accent, var(--cs-web)) 16%, transparent);
    font-weight: 600;
    line-height: 1.45;
}
.loc-v2-intro-copy h2,
.loc-v2-section-head h2,
.loc-v2-market h2 {
    margin: 0 0 0.85rem;
    color: var(--cs-navy);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    letter-spacing: -0.03em;
    line-height: 1.15;
}
.loc-v2-intro-copy p,
.loc-v2-section-head p,
.loc-v2-market p {
    color: var(--cs-muted);
    line-height: 1.7;
}
.loc-v2-intro-copy p + p {
    margin-top: 1rem;
}
.loc-v2-intro-media {
    display: grid;
    gap: 1rem;
    align-content: start;
}
.loc-v2-photo-frame {
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--loc-accent, var(--cs-web)) 28%, transparent);
    box-shadow: 0 18px 40px rgba(6, 21, 40, 0.1);
    background: #fff;
}
.loc-v2-photo-frame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.loc-v2-photo-frame--proof img { aspect-ratio: 5 / 4; }
.loc-v2-photo-frame figcaption {
    padding: 0.85rem 1rem 1rem;
    color: var(--cs-muted);
    font-size: 0.9rem;
    line-height: 1.45;
    background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--loc-accent-soft, rgba(21, 101, 216, 0.1)) 70%, #fff));
}
.loc-v2-aside-card {
    padding: 1.35rem 1.4rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid color-mix(in srgb, var(--loc-accent, var(--cs-web)) 22%, transparent);
    box-shadow: 0 16px 40px rgba(6, 21, 40, 0.06);
}
.loc-v2-aside-card h3 {
    margin: 0 0 0.85rem;
    color: var(--cs-navy);
    font-size: 1.15rem;
}
.loc-v2-chip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.loc-v2-chip-list li {
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    background: var(--loc-accent-soft, rgba(21, 101, 216, 0.08));
    border: 1px solid color-mix(in srgb, var(--loc-accent, var(--cs-web)) 24%, transparent);
    color: var(--cs-navy);
    font-size: 0.82rem;
    font-weight: 700;
}
.loc-v2-aside-note {
    margin: 1rem 0 0;
    color: var(--cs-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}
.loc-v2-aside-note a {
    color: var(--loc-accent, var(--cs-web));
    font-weight: 700;
    text-decoration: none;
}
.loc-v2-aside-note a:hover { color: var(--cs-navy); }

.loc-v2-section-head { max-width: 46rem; margin-bottom: 1.5rem; }
.loc-v2-pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.loc-v2-pillar {
    padding: 1.35rem 1.3rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid color-mix(in srgb, var(--loc-accent, var(--cs-web)) 18%, transparent);
    box-shadow: 0 12px 30px rgba(6, 21, 40, 0.05);
    border-top: 3px solid var(--loc-accent, var(--cs-web));
}
.loc-v2-pillar-num {
    display: inline-flex;
    margin-bottom: 0.65rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--loc-accent, var(--cs-web));
}
.loc-v2-pillar h3 {
    margin: 0 0 0.45rem;
    color: var(--cs-navy);
    font-size: 1.1rem;
}
.loc-v2-pillar p {
    margin: 0;
    color: var(--cs-muted);
    line-height: 1.55;
}

.loc-v2-industry-list {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}
.loc-v2-industry-list li {
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid color-mix(in srgb, var(--loc-accent, var(--cs-web)) 16%, transparent);
    color: var(--cs-navy);
    font-weight: 700;
    font-size: 0.95rem;
}

.loc-v2-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.loc-v2-steps li {
    display: grid;
    gap: 0.35rem;
    padding: 1.2rem 1.25rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid color-mix(in srgb, var(--loc-accent, var(--cs-web)) 18%, transparent);
}
.loc-v2-steps strong { color: var(--cs-navy); }
.loc-v2-steps span { color: var(--cs-muted); font-size: 0.94rem; line-height: 1.5; }

.loc-v2-sibling-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.loc-v2-sibling-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.25rem 1.3rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(13, 48, 87, 0.1);
    border-left: 4px solid var(--loc-accent, var(--cs-web));
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(6, 21, 40, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.loc-v2-sibling-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(6, 21, 40, 0.1);
}
.loc-v2-sibling-label {
    color: var(--cs-navy);
    font-weight: 800;
    font-size: 1.05rem;
}
.loc-v2-sibling-desc {
    color: var(--cs-muted);
    font-size: 0.92rem;
    line-height: 1.45;
    flex: 1;
}
.loc-v2-sibling-go {
    color: var(--loc-accent, var(--cs-web));
    font-weight: 800;
    font-size: 0.9rem;
}

/* Inner-page colours: website design navy, Google Ads teal, SEO violet. */
.loc-v2-sibling-card.loc-sib-web { --loc-accent: var(--cs-navy, #0d3057); }
.loc-v2-sibling-card.loc-sib-sem { --loc-accent: var(--cs-teal, #14b8a6); }
.loc-v2-sibling-card.loc-sib-seo { --loc-accent: #8b5cf6; }
.loc-v2-sibling-card.loc-sib-dms { --loc-accent: var(--cs-web, #1565d8); }

.loc-v2-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.loc-v2-faq-grid article {
    padding: 1.25rem 1.3rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(13, 48, 87, 0.1);
}
.loc-v2-faq-grid h3 {
    margin: 0 0 0.45rem;
    color: var(--cs-navy);
    font-size: 1.05rem;
}
.loc-v2-faq-grid p {
    margin: 0;
    color: var(--cs-muted);
    font-size: 0.95rem;
    line-height: 1.55;
}

.loc-v2-cta {
    padding: 0 0 clamp(3.5rem, 7vw, 5rem);
}
.loc-v2-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.85rem 2rem;
    border-radius: 24px;
    color: #fff;
    background:
        radial-gradient(500px 220px at 90% 0%, rgba(231, 184, 63, 0.35), transparent 60%),
        linear-gradient(135deg, #0a2850 0%, var(--loc-accent-deep, #0e3d6e) 55%, #0b3b4a 100%);
    box-shadow: 0 18px 40px rgba(6, 21, 40, 0.18);
}
.loc-v2-cta-inner h2 {
    margin: 0 0 0.45rem;
    color: #fff;
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    letter-spacing: -0.02em;
}
.loc-v2-cta-inner p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    max-width: 36rem;
}
.loc-v2-cta-inner .button-light {
    flex-shrink: 0;
    background: var(--cs-gold);
    color: #0a1a2f;
    border: none;
    font-weight: 800;
}
.loc-v2-cta-inner .button-light:hover {
    background: #f0c85a;
    color: #061528;
}

@media (max-width: 980px) {
    .loc-v2-hero-layout,
    .loc-v2-hero-stats,
    .loc-v2-intro-grid,
    .loc-v2-market-grid,
    .loc-v2-pillar-grid,
    .loc-v2-steps,
    .loc-v2-sibling-grid,
    .loc-v2-faq-grid {
        grid-template-columns: 1fr;
    }
    .loc-v2-industry-list { grid-template-columns: 1fr; }
    .loc-v2-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }
    .loc-v2-hero-figure { max-width: 28rem; }
}
@media (max-width: 720px) {
    .loc-v2-hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }
    .loc-v2-hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* —— Mike Johnson legacy tribute —— */
/* Mike Johnson legacy tribute */
.page-the-legacy-of-mike-johnson {
    --ml-navy: #0d3057;
    --ml-ink: #132238;
    --ml-muted: #5b6b7c;
    --ml-gold: #e2b94a;
    --ml-cloud: #f5f7fa;
    --ml-line: rgba(13, 48, 87, 0.1);
    background: #fff;
}

.page-the-legacy-of-mike-johnson .mike-legacy {
    color: var(--ml-ink);
}

.mike-legacy-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.mike-legacy-reveal.is-in {
    opacity: 1;
    transform: none;
}

.mike-legacy-eyebrow {
    margin: 0 0 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ml-gold);
}

.mike-legacy-hero {
    position: relative;
    min-height: min(78vh, 720px);
    display: flex;
    align-items: flex-end;
    padding: 7rem 0 4.5rem;
    overflow: hidden;
    background: #081018;
}

.mike-legacy-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 22%;
    transform: scale(1.04);
    filter: saturate(0.88) contrast(1.05);
    animation: mike-legacy- ken 18s ease-out forwards;
}

@keyframes mike-legacy-ken {
    from { transform: scale(1.08); }
    to { transform: scale(1.02); }
}

.mike-legacy-hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg, rgba(8, 16, 24, 0.88) 0%, rgba(8, 16, 24, 0.55) 48%, rgba(8, 16, 24, 0.28) 100%),
        linear-gradient(180deg, rgba(8, 16, 24, 0.2) 0%, rgba(8, 16, 24, 0.82) 100%);
}

.mike-legacy-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 38rem;
    color: #fff;
}

.mike-legacy-kicker {
    margin: 0 0 0.85rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

.mike-legacy-hero h1 {
    margin: 0 0 1rem;
    font-size: clamp(2.6rem, 6.2vw, 4.35rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 700;
}

.mike-legacy-roles {
    margin: 0 0 1.15rem;
    font-size: 1.02rem;
    letter-spacing: 0.02em;
    color: var(--ml-gold);
}

.mike-legacy-lead {
    margin: 0 0 1.5rem;
    font-size: 1.08rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88);
    max-width: 34rem;
}

.mike-legacy-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 1.75rem;
}

.mike-legacy-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1rem;
    border-radius: 0.45rem;
    background: var(--ml-gold);
    color: #132238;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease;
}

.mike-legacy-chip:hover {
    background: #efc965;
    color: #132238;
    transform: translateY(-1px);
}

.mike-legacy-chip--ghost {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.mike-legacy-chip--ghost:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.mike-legacy-date {
    margin: 0;
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.55);
}

.mike-legacy-section {
    padding: clamp(3.5rem, 6vw, 5.5rem) 0;
}

.mike-legacy-section--gallery,
.mike-legacy-section--memories {
    background: var(--ml-cloud);
}

.mike-legacy-section--promise {
    background:
        radial-gradient(ellipse at 10% 0%, rgba(226, 185, 74, 0.08), transparent 45%),
        #fff;
}

.mike-legacy-section--share {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(226, 185, 74, 0.14), transparent 55%),
        linear-gradient(180deg, #0d3057 0%, #0a2746 100%);
    color: #fff;
}

.mike-legacy-section--share .mike-legacy-eyebrow {
    color: var(--ml-gold);
}

.mike-legacy-section--share .mike-legacy-section-head h2 {
    color: #fff;
}

.mike-legacy-section--share .mike-legacy-section-head p {
    color: rgba(255, 255, 255, 0.78);
}

.mike-legacy-section-head {
    max-width: 36rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.mike-legacy-section-head h2 {
    margin: 0;
    font-size: clamp(1.85rem, 3.4vw, 2.55rem);
    letter-spacing: -0.03em;
    color: var(--ml-navy);
}

.mike-legacy-section-head p {
    margin: 0.75rem 0 0;
    color: var(--ml-muted);
    font-size: 1.02rem;
    line-height: 1.55;
}

.mike-legacy-prose {
    max-width: 40rem;
    margin: 0 auto;
}

.mike-legacy-prose h2 {
    margin: 0 0 1.4rem;
    font-size: clamp(1.85rem, 3.4vw, 2.45rem);
    letter-spacing: -0.03em;
    color: var(--ml-navy);
}

.mike-legacy-prose p {
    margin: 0 0 1.15rem;
    font-size: 1.06rem;
    line-height: 1.78;
    color: #243447;
}

.mike-legacy-drop {
    font-size: clamp(1.2rem, 2.2vw, 1.4rem) !important;
    line-height: 1.55 !important;
    color: var(--ml-navy) !important;
    font-weight: 600;
}

.mike-legacy-desk-sign {
    margin: 2.25rem 0 1.5rem;
    padding: 1.75rem 1.5rem;
    text-align: center;
    background: linear-gradient(135deg, rgba(13, 48, 87, 0.04), rgba(226, 185, 74, 0.12));
    border: 1px solid var(--ml-line);
    border-radius: 1rem;
}

.mike-legacy-desk-sign blockquote {
    margin: 0 0 0.65rem;
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    font-style: italic;
    font-weight: 600;
    color: var(--ml-navy);
    letter-spacing: -0.02em;
}

.mike-legacy-desk-sign figcaption {
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ml-muted);
}

.mike-legacy-gallery {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.75rem;
}

.mike-legacy-gallery-item {
    position: relative;
    display: block;
    grid-column: span 4;
    overflow: hidden;
    border-radius: 0.85rem;
    background: #d7dde6;
    aspect-ratio: 4 / 3;
    cursor: zoom-in;
    text-decoration: none;
    isolation: isolate;
}

.mike-legacy-gallery-item--feature {
    grid-column: span 8;
    aspect-ratio: 16 / 10;
}

.mike-legacy-gallery-item:nth-child(2),
.mike-legacy-gallery-item:nth-child(3) {
    grid-column: span 4;
}

.mike-legacy-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s ease, filter 0.35s ease;
}

.mike-legacy-gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(8, 16, 24, 0.35));
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.mike-legacy-gallery-zoom {
    position: absolute;
    right: 0.85rem;
    bottom: 0.85rem;
    z-index: 2;
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ml-navy);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.28s ease, transform 0.28s ease;
    pointer-events: none;
}

.mike-legacy-gallery-item:hover img,
.mike-legacy-gallery-item:focus-visible img {
    transform: scale(1.05);
    filter: brightness(1.03);
}

.mike-legacy-gallery-item:hover::after,
.mike-legacy-gallery-item:focus-visible::after,
.mike-legacy-gallery-item:hover .mike-legacy-gallery-zoom,
.mike-legacy-gallery-item:focus-visible .mike-legacy-gallery-zoom {
    opacity: 1;
    transform: none;
}

.mike-legacy-memories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem 1.5rem;
}

.mike-legacy-memory {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1.35rem 0;
    border-top: 1px solid var(--ml-line);
}

.mike-legacy-memory:nth-child(1),
.mike-legacy-memory:nth-child(2) {
    border-top: none;
    padding-top: 0;
}

.mike-legacy-memory-mark {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(13, 48, 87, 0.08);
    color: var(--ml-navy);
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.mike-legacy-memory-text {
    margin: 0 0 0.9rem;
    font-size: 0.98rem;
    line-height: 1.68;
    color: #2a3748;
}

.mike-legacy-memory-meta {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.mike-legacy-memory-meta strong {
    color: var(--ml-navy);
    font-size: 0.95rem;
}

.mike-legacy-memory-meta span {
    font-size: 0.86rem;
    color: var(--ml-muted);
}

.mike-legacy-form-wrap {
    max-width: 36rem;
    margin: 0 auto;
}

.mike-legacy-form-wrap .contact-form-wrap {
    margin-top: 0.25rem;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.mike-legacy-section--share .contact-form {
    background: #fff;
    border: none;
    border-radius: 1rem;
    padding: 1.75rem 1.65rem 1.5rem;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    color: var(--ml-ink);
}

.mike-legacy-section--share .contact-form-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1rem;
}

.mike-legacy-section--share .contact-form .form-group--full,
.mike-legacy-section--share .contact-form .form-group:has(textarea),
.mike-legacy-section--share .contact-form .form-group:has(input[type="number"]),
.mike-legacy-section--share .contact-form .captcha-wrap,
.mike-legacy-section--share .contact-form .form-group.captcha-field {
    grid-column: 1 / -1;
}

.mike-legacy-section--share .contact-form .form-group {
    margin: 0;
}

.mike-legacy-section--share .contact-form .form-group > label,
.mike-legacy-section--share .contact-form label:not(.checkbox-label) {
    display: block;
    margin: 0 0 0.4rem;
    color: var(--ml-navy);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.mike-legacy-section--share .contact-form .form-required {
    color: #b42318;
}

.mike-legacy-section--share .contact-form input:not([type="checkbox"]),
.mike-legacy-section--share .contact-form textarea,
.mike-legacy-section--share .contact-form select {
    width: 100%;
    background: #f5f7fa;
    border: 1px solid rgba(13, 48, 87, 0.16);
    border-radius: 0.55rem;
    color: var(--ml-ink);
    padding: 0.8rem 0.95rem;
    font-size: 0.98rem;
    line-height: 1.4;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.mike-legacy-section--share .contact-form textarea {
    min-height: 9rem;
    resize: vertical;
}

.mike-legacy-section--share .contact-form input:not([type="checkbox"]):focus,
.mike-legacy-section--share .contact-form textarea:focus,
.mike-legacy-section--share .contact-form select:focus {
    outline: none;
    background: #fff;
    border-color: var(--ml-navy);
    box-shadow: 0 0 0 3px rgba(13, 48, 87, 0.12);
}

.mike-legacy-section--share .contact-form input::placeholder,
.mike-legacy-section--share .contact-form textarea::placeholder {
    color: #8a96a6;
}

.mike-legacy-section--share .contact-form .button,
.mike-legacy-section--share .contact-form .button-full {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.95rem 1.25rem;
    background: var(--ml-gold);
    color: #132238;
    border: none;
    border-radius: 0.55rem;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: none;
}

.mike-legacy-section--share .contact-form .button:hover,
.mike-legacy-section--share .contact-form .button-full:hover {
    background: #efc965;
    color: #132238;
}

.mike-legacy-section--share .contact-form > .form-group,
.mike-legacy-section--share .contact-form .captcha-local {
    margin-top: 0.35rem;
    margin-bottom: 1rem;
}

.mike-legacy-section--share .contact-form .captcha-local {
    padding: 0.9rem 1rem;
    background: #f5f7fa;
    border: 1px solid rgba(13, 48, 87, 0.12);
    border-radius: 0.55rem;
}

.mike-legacy-section--share .contact-form .captcha-local label {
    margin-bottom: 0.45rem;
}

.mike-legacy-section--share .contact-form .captcha-local input {
    max-width: 8rem;
}

.mike-legacy-section--share .notice-success {
    background: rgba(226, 185, 74, 0.16);
    border-color: rgba(226, 185, 74, 0.45);
}

@media (max-width: 900px) {
    .mike-legacy-gallery-item,
    .mike-legacy-gallery-item--feature,
    .mike-legacy-gallery-item:nth-child(2),
    .mike-legacy-gallery-item:nth-child(3) {
        grid-column: span 6;
        aspect-ratio: 4 / 3;
    }

    .mike-legacy-memories {
        grid-template-columns: 1fr;
    }

    .mike-legacy-memory:nth-child(2) {
        border-top: 1px solid var(--ml-line);
        padding-top: 1.35rem;
    }
}

@media (max-width: 640px) {
    .mike-legacy-hero {
        min-height: 72vh;
        padding: 5.5rem 0 3.25rem;
    }

    .mike-legacy-hero h1 {
        font-size: clamp(2.2rem, 11vw, 2.9rem);
    }

    .mike-legacy-gallery-item,
    .mike-legacy-gallery-item--feature,
    .mike-legacy-gallery-item:nth-child(2),
    .mike-legacy-gallery-item:nth-child(3) {
        grid-column: span 12;
    }

    .mike-legacy-section {
        padding: 3rem 0;
    }

    .mike-legacy-form-wrap .contact-form-wrap {
        padding: 0;
    }

    .mike-legacy-section--share .contact-form {
        padding: 1.35rem 1.15rem 1.2rem;
    }

    .mike-legacy-section--share .contact-form-fields {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mike-legacy-hero-bg {
        animation: none;
    }

    .mike-legacy-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* SEO Education (imported Elementor pages) */
.page-seo-education-import .post-v2-hero,
.page-seo-education-import .post-v2-featured,
.page-seo-education-import .post-v2-related-grid,
.page-seo-education-import .post-v2-cta {
    display: none;
}

.page-seo-education-import .post-single-v2 {
    padding-top: 0;
}

.page-seo-education-import .post-content {
    max-width: none;
}

.page-seo-education-import .post-content .elementor {
    width: 100%;
}

.page-seo-education-import .post-v2-body-wrap {
    padding-top: 0;
}

.seo-ed-hub-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.seo-ed-hub-card {
    background: var(--surface-elevated, #fff);
    border: 1px solid var(--line, rgba(0, 0, 0, 0.08));
    border-radius: 0.75rem;
    padding: 1.25rem 1.35rem;
}

.seo-ed-hub-card h2 {
    font-size: 1.05rem;
    margin: 0 0 0.5rem;
}

.seo-ed-hub-card p {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    color: var(--text-muted, #555);
}

.page-seo-education-import .qodef-qi-before-after {
    position: relative;
    max-width: 52rem;
    margin: 1.5rem auto;
}

.page-seo-education-import .seo-ed-ba-hint {
    margin: 0 0 0.65rem;
    font-size: 0.85rem;
    color: var(--text-muted, #555);
    text-align: center;
}

.page-seo-education-import .qodef-before-after-image-holder {
    position: relative;
    width: 100%;
    line-height: 0;
    overflow: hidden;
    cursor: ew-resize;
    touch-action: pan-y;
    background: #f4f0f8;
    border-radius: 10px;
    border: 1px solid rgba(107, 45, 138, 0.15);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.page-seo-education-import .qodef-before-after-image-holder::before,
.page-seo-education-import .qodef-before-after-image-holder::after {
    content: '';
    position: absolute;
    top: 0.65rem;
    z-index: 4;
    padding: 0.22rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    background: rgba(17, 24, 39, 0.78);
    color: #fff;
    pointer-events: none;
}

.page-seo-education-import .qodef-before-after-image-holder::before {
    content: 'Before';
    left: 0.65rem;
}

.page-seo-education-import .qodef-before-after-image-holder::after {
    content: 'After';
    right: 0.65rem;
}

.page-seo-education-import .qodef-before-after-image-holder img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    object-fit: fill;
    object-position: top left;
}

.page-seo-education-import .seo-ed-ba-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    margin-left: -1.5px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 14px rgba(0, 0, 0, 0.28);
    z-index: 2;
    pointer-events: none;
}

.page-seo-education-import .qodef-handle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
}

.page-seo-education-import .seo-ed-ba-handle-knob {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.45rem 0.72rem;
    border-radius: 999px;
    background: rgba(91, 45, 138, 0.96);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 2px solid #fff;
    box-shadow: 0 6px 22px rgba(17, 24, 39, 0.35);
    cursor: ew-resize;
    animation: seo-ed-ba-pulse 2.4s ease-in-out infinite;
}

.page-seo-education-import .seo-ed-ba-handle-arrows {
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.2em;
    font-weight: 800;
}

.page-seo-education-import .seo-ed-ba-handle-label {
    line-height: 1.1;
}

.page-seo-education-import .qodef-before-after-image-holder.seo-ed-ba-dragging .seo-ed-ba-handle-knob {
    animation: none;
    transform: scale(1.06);
}

@keyframes seo-ed-ba-pulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 6px 22px rgba(17, 24, 39, 0.35);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 8px 26px rgba(91, 45, 138, 0.45);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-seo-education-import .seo-ed-ba-handle-knob {
        animation: none;
    }
}

.page-seo-education-import .elementor-accordion-title {
    cursor: pointer;
}

.page-seo-education-import .elementor-headline-dynamic-text {
    color: var(--brand-primary, #5b2d8a);
}

/* Combined SEO / Maps / AI page */
.page-seo-combined #search-rankings,
.page-seo-combined #map-ranking,
.page-seo-combined #map-proof,
.page-seo-combined #ai-ranking,
.page-seo-combined #proof,
.page-seo-combined #what-you-get,
.page-seo-combined #process,
.page-seo-combined #faq,
.page-seo-combined #where-people-look {
    scroll-margin-top: 6.25rem;
}

.page-seo-combined .seo-hero-inner {
    align-items: stretch;
}

.page-seo-combined .seo-hero-rank {
    min-height: 520px;
}

.page-seo-combined .seo-hero-stack {
    position: relative;
    height: 100%;
    min-height: 500px;
}

.page-seo-combined .seo-float-card {
    position: absolute;
    z-index: 3;
    padding: 0.85rem 0.9rem 1rem;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.9);
    animation: ref-card-in 0.8s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.page-seo-combined .seo-float-card--rank {
    top: 0;
    right: 0;
    width: min(280px, 62%);
    z-index: 3;
}

.page-seo-combined .seo-float-card--map {
    top: 36%;
    left: 0;
    width: min(300px, 68%);
    z-index: 4;
    animation-delay: 0.16s;
}

.page-seo-combined .seo-float-card--ai {
    right: 4%;
    bottom: 0;
    width: min(320px, 72%);
    z-index: 5;
    animation-delay: 0.3s;
}

.page-seo-combined .seo-float-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.7rem;
    color: var(--seo-navy);
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-seo-combined .seo-float-icon {
    display: inline-flex;
    width: 1.45rem;
    height: 1.45rem;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(13, 48, 87, 0.08);
    color: var(--seo-teal);
}

.page-seo-combined .seo-float-icon svg {
    width: 0.9rem;
    height: 0.9rem;
}

.page-seo-combined .seo-float-card--rank .seo-float-icon { color: var(--seo-violet); background: rgba(139, 92, 246, 0.12); }
.page-seo-combined .seo-float-card--map .seo-float-icon { color: var(--seo-teal); background: rgba(20, 184, 166, 0.14); }
.page-seo-combined .seo-float-card--ai .seo-float-icon { color: #7c3aed; background: rgba(124, 58, 237, 0.12); }

.page-seo-combined .seo-float-card .seo-rank-list {
    padding: 0;
}

.page-seo-combined .seo-geo-pair {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.page-seo-combined .seo-geo-mini {
    flex: 1;
    min-width: 0;
}

.page-seo-combined .seo-geo-label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--ref-muted);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.page-seo-combined .seo-geo-arrow {
    flex-shrink: 0;
    color: var(--seo-teal);
    font-weight: 900;
}

.page-seo-combined .seo-geo-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.page-seo-combined .seo-geo-dot {
    display: block;
    aspect-ratio: 1;
    border-radius: 3px;
}

.page-seo-combined .seo-geo-dot--1 { background: #ef4444; }
.page-seo-combined .seo-geo-dot--2 { background: #f97316; }
.page-seo-combined .seo-geo-dot--3 { background: #eab308; }
.page-seo-combined .seo-geo-dot--4 { background: #84cc16; }
.page-seo-combined .seo-geo-dot--5 { background: #22c55e; }

.page-seo-combined .seo-ai-q {
    margin: 0 0 0.45rem;
    padding: 0.45rem 0.6rem;
    border-radius: 10px 10px 10px 4px;
    background: #f1f5f9;
    color: var(--seo-navy);
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 700;
    line-height: 1.4;
}

.page-seo-combined .seo-ai-a {
    margin: 0 0 0.65rem;
    padding: 0.5rem 0.65rem;
    border-radius: 10px 10px 4px 10px;
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    color: var(--seo-navy);
    font-size: calc(0.72rem * var(--ref-s));
    line-height: 1.45;
}

.page-seo-combined .seo-ai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-seo-combined .seo-ai-chips li {
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.page-seo-combined .seo-callout--stack {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.page-seo-combined .seo-callout--stack span,
.page-seo-combined .seo-callout--stack em {
    display: block;
    font-style: normal;
}

.page-seo-combined .seo-callout--stack em {
    margin-top: 0.45rem;
    font-weight: 800;
}

.page-seo-combined .seo-look {
    padding: clamp(2.75rem, 5vw, 4.25rem) 0;
    background:
        radial-gradient(ellipse 70% 50% at 90% 0%, rgba(139, 92, 246, 0.08), transparent 50%),
        #fff;
}

.page-seo-combined .seo-look-layout {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.page-seo-combined .seo-look-cards {
    display: grid;
    gap: 0.85rem;
}

.page-seo-combined .seo-look-card {
    display: block;
    padding: 1.15rem 1.2rem 1.2rem;
    border-radius: 16px;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 16px 36px rgba(13, 48, 87, 0.14);
    transition: transform 0.2s ease;
}

.page-seo-combined .seo-look-card:hover {
    transform: translateY(-3px);
}

.page-seo-combined .seo-look-card--violet { background: linear-gradient(145deg, #5b21b6 0%, var(--seo-violet) 60%, #a78bfa 100%); }
.page-seo-combined .seo-look-card--teal { background: linear-gradient(145deg, #0f766e 0%, var(--seo-teal) 60%, #2dd4bf 100%); }
.page-seo-combined .seo-look-card--navy { background: linear-gradient(145deg, #0c2442 0%, var(--seo-navy) 60%, #1e5a8a 100%); }

.page-seo-combined .seo-look-label {
    margin: 0 0 0.3rem;
    font-size: calc(0.68rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.8;
}

.page-seo-combined .seo-look-card h3 {
    margin: 0 0 0.4rem;
    font-size: calc(1.05rem * var(--ref-s));
    font-weight: 900;
    line-height: 1.25;
}

.page-seo-combined .seo-look-card p {
    margin: 0;
    font-size: calc(0.86rem * var(--ref-s));
    line-height: 1.55;
    opacity: 0.92;
}

.page-seo-combined .seo-serp {
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(13, 48, 87, 0.1);
    box-shadow: 0 24px 50px rgba(13, 48, 87, 0.14);
}

.page-seo-combined .seo-serp-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.7rem 0.85rem;
    background: #0a192d;
}

.page-seo-combined .seo-serp-chrome > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
}

.page-seo-combined .seo-serp-url {
    margin-left: 0.6rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.68rem;
}

.page-seo-combined .seo-serp-q {
    padding: 0.7rem 1rem 0.5rem;
    color: var(--seo-navy);
    font-size: calc(0.92rem * var(--ref-s));
    font-weight: 800;
}

.page-seo-combined .seo-serp-zone {
    margin: 0 0.75rem 0.7rem;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
}

.page-seo-combined .seo-serp-zone--ai { background: rgba(139, 92, 246, 0.1); }
.page-seo-combined .seo-serp-zone--map { background: rgba(20, 184, 166, 0.1); }
.page-seo-combined .seo-serp-zone--organic { background: rgba(13, 48, 87, 0.06); }

.page-seo-combined .seo-serp-zone-label {
    margin: 0 0 0.35rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--seo-navy);
    opacity: 0.65;
}

.page-seo-combined .seo-serp-zone p {
    margin: 0;
    color: var(--seo-navy);
    font-size: calc(0.78rem * var(--ref-s));
    line-height: 1.45;
}

.page-seo-combined .seo-serp-map {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 0.65rem;
    align-items: center;
}

.page-seo-combined .seo-serp-pins {
    position: relative;
    height: 88px;
    border-radius: 10px;
    background:
        radial-gradient(circle at 30% 40%, #86efac 0 6px, transparent 7px),
        radial-gradient(circle at 62% 55%, #86efac 0 6px, transparent 7px),
        radial-gradient(circle at 48% 28%, #fbbf24 0 6px, transparent 7px),
        linear-gradient(180deg, #dbeafe, #e2e8f0);
}

.page-seo-combined .seo-serp-pins i {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: #ef4444;
}

.page-seo-combined .seo-serp-pins i:nth-child(1) { left: 28%; top: 32%; background: #22c55e; }
.page-seo-combined .seo-serp-pins i:nth-child(2) { left: 58%; top: 48%; }
.page-seo-combined .seo-serp-pins i:nth-child(3) { left: 44%; top: 18%; }

.page-seo-combined .seo-serp-map ul,
.page-seo-combined .seo-serp-organic {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-seo-combined .seo-serp-map li,
.page-seo-combined .seo-serp-organic li {
    padding: 0.28rem 0.4rem;
    border-radius: 8px;
}

.page-seo-combined .seo-serp-map li.is-on,
.page-seo-combined .seo-serp-organic li.is-on {
    background: rgba(255, 255, 255, 0.7);
}

.page-seo-combined .seo-serp-map strong,
.page-seo-combined .seo-serp-link {
    display: block;
    color: #1d4ed8;
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 800;
}

.page-seo-combined .seo-serp-map span,
.page-seo-combined .seo-serp-organic span {
    display: block;
    color: var(--ref-muted);
    font-size: calc(0.64rem * var(--ref-s));
}

.page-seo-combined .seo-serp-green { color: #047857 !important; }

.page-seo-combined .seo-map-proof-wrap {
    padding: clamp(2.75rem, 5.5vw, 4.25rem) 0 clamp(2.75rem, 5vw, 4rem);
    background: linear-gradient(180deg, #071427 0%, #0c2442 100%);
    color: #fff;
}

.page-seo-combined .home-ref-case-studies + .seo-map-proof-wrap {
    margin-top: -1px;
}

.page-seo-combined .home-ref-case-studies.home-ref-case-studies--grid {
    padding-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
}

.page-seo-combined .seo-map-proof-wrap .seo-section-head {
    margin-bottom: clamp(1.85rem, 3.5vw, 2.85rem);
    max-width: 38rem;
}

.page-seo-combined .seo-map-proof-wrap .seo-section-head h2,
.page-seo-combined .seo-map-proof-wrap .seo-section-lead {
    color: #fff;
}

.page-seo-combined .seo-map-proof-wrap .seo-section-lead {
    opacity: 0.82;
}

.page-seo-combined .seo-geo-proof {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem;
}

.page-seo-combined .seo-geo-proof-card {
    display: block;
    padding: 1.45rem 1.4rem 1.5rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-decoration: none;
    color: inherit;
}

.page-seo-combined .seo-geo-proof-client {
    margin: 0 0 0.25rem;
    color: #67e8f9;
    font-size: calc(0.68rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-seo-combined .seo-geo-proof-card h3 {
    margin: 0 0 0.85rem;
    font-size: calc(1.05rem * var(--ref-s));
    font-weight: 900;
    line-height: 1.25;
}

.page-seo-combined .seo-geo-proof-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.page-seo-combined .seo-geo-proof-card figure {
    margin: 0;
}

.page-seo-combined .seo-geo-proof-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    background: #fff;
}

.page-seo-combined .seo-geo-proof-shot--contain {
    object-fit: contain;
    padding: 0.65rem;
}

.page-seo-combined .seo-geo-proof-card figcaption {
    margin-top: 0.4rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: calc(0.7rem * var(--ref-s));
}

.page-seo-combined .seo-geo-proof-single img {
    aspect-ratio: 16 / 10;
}

.page-seo-combined .seo-work-kickers {
    background: #0c2442;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.page-seo-combined .seo-work-kicker-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem 1rem;
    padding: 0.85rem 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.page-seo-combined .seo-work-kicker-row a {
    color: #fff;
    text-decoration: none;
}

.page-seo-combined .seo-work-kicker-row a:hover {
    color: var(--seo-gold);
}

.page-seo-combined .seo-work {
    padding: clamp(2.75rem, 5vw, 4.25rem) 0;
}

.page-seo-combined .seo-work-head {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
    gap: 1.25rem 2rem;
    align-items: center;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.page-seo-combined .seo-work-head .seo-section-head {
    margin-bottom: 0;
    max-width: none;
}

.page-seo-combined .seo-work-head-media {
    margin: 0;
}

.page-seo-combined .seo-work-head-media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(13, 48, 87, 0.12);
}

.page-seo-combined .seo-work--search-rankings { background: #fff; }
.page-seo-combined .seo-work--map-ranking { background: linear-gradient(180deg, #f0fdfa 0%, #fff 100%); }
.page-seo-combined .seo-work--ai-ranking { background: linear-gradient(180deg, #f5f3ff 0%, #fff 100%); }

.page-seo-combined .seo-work-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.page-seo-combined .seo-work-card {
    padding: 1.25rem 1.2rem 1.35rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(13, 48, 87, 0.08);
    box-shadow: 0 12px 28px rgba(13, 48, 87, 0.06);
}

.page-seo-combined .seo-work-label {
    margin: 0 0 0.65rem;
    color: var(--seo-teal);
    font-size: calc(0.72rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.35;
}

.page-seo-combined .seo-ai-note {
    margin-top: 1.5rem;
    padding: 1.25rem 1.35rem;
    border-radius: 16px;
    background: #0c2442;
    color: #fff;
}

.page-seo-combined .seo-ai-note p {
    margin: 0 0 0.75rem;
    font-size: calc(0.92rem * var(--ref-s));
    line-height: 1.6;
    opacity: 0.92;
}

.page-seo-combined .seo-ai-note h3 {
    margin: 0.4rem 0 0.55rem;
    font-size: calc(1.15rem * var(--ref-s));
    font-weight: 900;
}

.page-seo-combined .seo-ai-note p:last-child {
    margin-bottom: 0;
}

.page-seo-combined .seo-stack {
    padding: clamp(2.75rem, 5vw, 4.25rem) 0;
    background: var(--ref-cream, #f8fafc);
}

.page-seo-combined .seo-stack-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.page-seo-combined .seo-stack-col {
    padding: 1.3rem 1.25rem 1.4rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(13, 48, 87, 0.08);
}

.page-seo-combined .seo-stack-col h3 {
    margin: 0 0 0.85rem;
    color: var(--seo-navy);
    font-size: calc(1rem * var(--ref-s));
    font-weight: 900;
}

.page-seo-combined .seo-stack-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-seo-combined .seo-stack-col li {
    position: relative;
    padding: 0.35rem 0 0.35rem 1.1rem;
    color: var(--seo-navy);
    font-size: calc(0.86rem * var(--ref-s));
    line-height: 1.45;
}

.page-seo-combined .seo-stack-col li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--seo-teal);
}

@media (max-width: 1100px) {
    .page-seo-combined .seo-look-layout,
    .page-seo-combined .seo-geo-proof,
    .page-seo-combined .seo-work-grid,
    .page-seo-combined .seo-stack-grid {
        grid-template-columns: 1fr;
    }

    .page-seo-combined .seo-work-head {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .page-seo-combined .seo-work-head-media img {
        max-height: 200px;
    }

    .page-seo-combined .seo-hero-rank {
        min-height: 420px;
    }

    .page-seo-combined .seo-float-card--rank,
    .page-seo-combined .seo-float-card--map,
    .page-seo-combined .seo-float-card--ai {
        width: min(280px, 70%);
    }
}

@media (max-width: 640px) {
    .page-seo-combined .seo-hero-stack {
        min-height: 0;
        display: grid;
        gap: 0.75rem;
    }

    .page-seo-combined .seo-float-card {
        position: relative;
        inset: auto;
        width: 100% !important;
        animation: none;
    }

    .page-seo-combined .seo-hero-rank {
        min-height: 0;
    }

    .page-seo-combined .seo-geo-proof-pair,
    .page-seo-combined .seo-serp-map {
        grid-template-columns: 1fr;
    }
}

/* Drag-to-compare before/after slider */
.iias-ba {
    width: 100%;
}

.iias-ba-hint {
    margin: 0 0 0.55rem;
    color: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    text-align: center;
    opacity: 0.78;
}

.iias-ba-holder {
    position: relative;
    width: 100%;
    aspect-ratio: 504 / 600;
    overflow: hidden;
    cursor: ew-resize;
    touch-action: pan-y;
    border-radius: 12px;
    background: #eef3fb;
    border: 1px solid rgba(13, 48, 87, 0.12);
}

.iias-ba-holder::before,
.iias-ba-holder::after {
    position: absolute;
    top: 0.65rem;
    z-index: 4;
    padding: 0.22rem 0.55rem;
    border-radius: 4px;
    background: rgba(17, 24, 39, 0.78);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1.3;
    text-transform: uppercase;
    pointer-events: none;
}

.iias-ba-holder::before {
    content: attr(data-before-label);
    left: 0.65rem;
}

.iias-ba-holder::after {
    content: attr(data-after-label);
    right: 0.65rem;
}

.iias-ba-holder > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
}

.iias-ba-holder > img:first-of-type {
    z-index: 2;
    clip-path: inset(0 50% 0 0);
}

.iias-ba-holder > img:nth-of-type(2) {
    z-index: 1;
}

.iias-ba-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 3;
    width: 3px;
    margin-left: -1.5px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 14px rgba(0, 0, 0, 0.28);
    pointer-events: none;
}

.iias-ba-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.iias-ba-knob {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.08rem;
    padding: 0.42rem 0.7rem;
    border-radius: 999px;
    background: #0d3057;
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 6px 22px rgba(17, 24, 39, 0.35);
}

.iias-ba-arrows {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    line-height: 1;
}

.iias-ba-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.iias-ba-holder.is-dragging .iias-ba-knob {
    transform: scale(1.06);
}

.cs-seo-proof-board--slider .cs-seo-proof-board-body {
    display: block;
}

.cs-seo-proof-split {
    display: grid;
    grid-template-columns: 65fr 35fr;
    gap: clamp(1.25rem, 2.4vw, 1.85rem);
    align-items: stretch;
}
.cs-seo-proof-split > .cs-seo-proof-board {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
}
.cs-seo-proof-split .cs-seo-proof-board-head {
    flex: 0 0 auto;
}
.cs-seo-proof-split .cs-seo-proof-board-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.cs-seo-proof-split .cs-seo-proof-figure,
.cs-seo-proof-split .cs-seo-proof-media {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}
.cs-seo-proof-split .cs-seo-proof-media {
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.cs-seo-proof-split .cs-seo-proof-media img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center top;
}
.cs-seo-proof-split .iias-ba {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.cs-seo-proof-split .iias-ba-holder {
    width: 100%;
}

@media (max-width: 900px) {
    .cs-seo-proof-split {
        grid-template-columns: 1fr;
    }
}

.cs-seo-proof-board--slider .iias-ba-hint,
.cs-single-compare .iias-ba-hint {
    color: var(--cs-muted, #5b6b7f);
}

.page-seo-combined .seo-geo-proof {
    align-items: stretch;
}

.page-seo-combined .seo-geo-proof-card--slider {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.page-seo-combined .seo-geo-proof-card--slider .iias-ba {
    flex: 1 1 auto;
}

.page-seo-combined .seo-geo-proof-card--slider .iias-ba-hint {
    color: rgba(255, 255, 255, 0.72);
}

.page-seo-combined .seo-geo-proof-card--slider .iias-ba-holder {
    background: #06182d;
    border-color: rgba(255, 255, 255, 0.14);
}

.page-seo-combined .seo-geo-proof-card--slider .iias-ba-knob {
    background: #0ea5e9;
}

.page-seo-combined .seo-geo-proof-link {
    margin-top: auto;
    padding-top: 0.9rem;
    color: var(--seo-gold);
    font-size: calc(0.82rem * var(--ref-s));
    font-weight: 800;
    text-decoration: none;
}

.page-seo-combined .seo-geo-proof-link:hover {
    text-decoration: underline;
}

/* Hosting page — servers, status panel, hosted websites */
.page-hosting .seo-hero {
    background:
        radial-gradient(ellipse 70% 55% at 12% 18%, rgba(16, 185, 129, 0.22), transparent 50%),
        radial-gradient(ellipse 60% 50% at 88% 12%, rgba(34, 211, 238, 0.18), transparent 48%),
        linear-gradient(155deg, #04101f 0%, #0b2a4a 42%, #0f3d5e 100%);
}

.page-hosting .seo-hero-bg {
    opacity: 0.48;
    mix-blend-mode: luminosity;
}

.page-hosting .host-hero-visual {
    position: relative;
    min-height: 500px;
}

.page-hosting .host-browser {
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.page-hosting .host-browser-bar,
.page-hosting .host-frame .host-browser-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.55rem 0.75rem;
    background: #e8eef5;
    border-bottom: 1px solid rgba(13, 48, 87, 0.08);
}

.page-hosting .host-browser-bar span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cfd8e3;
}

.page-hosting .host-browser-bar span:nth-child(1) { background: #ff5f57; }
.page-hosting .host-browser-bar span:nth-child(2) { background: #febc2e; }
.page-hosting .host-browser-bar span:nth-child(3) { background: #28c840; }

.page-hosting .host-url {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1;
    margin: 0 0 0 0.45rem;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.page-hosting .host-url svg {
    color: #10b981;
    flex-shrink: 0;
}

.page-hosting .host-browser img,
.page-hosting .host-frame img,
.page-hosting .host-site-shot img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center top;
}

.page-hosting .host-browser--main {
    width: min(100%, 520px);
    margin-left: auto;
}

.page-hosting .host-browser--main img {
    aspect-ratio: 16 / 11;
}

.page-hosting .host-browser--side {
    position: absolute;
    left: 0;
    bottom: 1.25rem;
    width: min(46%, 230px);
    z-index: 3;
    transform: rotate(-4deg);
}

.page-hosting .host-browser--side img {
    aspect-ratio: 16 / 10;
}

.page-hosting .host-status {
    position: absolute;
    left: 0;
    top: 0.35rem;
    z-index: 4;
    width: min(46%, 210px);
    padding: 0.85rem 0.9rem 0.95rem;
    border-radius: 16px;
    background: rgba(7, 24, 42, 0.92);
    border: 1px solid rgba(103, 232, 249, 0.28);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
    color: #fff;
    backdrop-filter: blur(10px);
}

.page-hosting .host-status-label {
    margin: 0 0 0.65rem;
    color: #67e8f9;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.page-hosting .host-status ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-hosting .host-status li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.38rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.72);
}

.page-hosting .host-status li:first-child {
    border-top: 0;
}

.page-hosting .host-status strong {
    color: #fff;
    font-weight: 800;
}

.page-hosting .host-ok {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #6ee7b7;
}

.page-hosting .host-ok i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.22);
    animation: host-pulse 1.6s ease-in-out infinite;
}

@keyframes host-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.22); }
    50% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0.08); }
}

.page-hosting .host-phone {
    position: absolute;
    right: 0.2rem;
    bottom: -0.35rem;
    z-index: 5;
    width: 118px;
    padding: 0.45rem 0.42rem 0.55rem;
    border-radius: 22px;
    background: #111;
    border: 3px solid #1f2937;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
}

.page-hosting .host-phone-notch {
    display: block;
    width: 42%;
    height: 5px;
    margin: 0 auto 0.35rem;
    border-radius: 999px;
    background: #3f3f46;
}

.page-hosting .host-phone img {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    object-position: center top;
    border-radius: 12px;
}

.page-hosting .host-frame {
    padding: 0 !important;
    background: #e8eef5 !important;
    overflow: hidden;
}

.page-hosting .seo-why-visual.host-frame img {
    border-radius: 0 0 18px 18px;
    aspect-ratio: 4 / 5;
}

.page-hosting .seo-spotlight-media.host-frame img {
    border-radius: 0 0 18px 18px;
    object-position: center top;
}

.page-hosting .seo-why-visual img {
    object-position: 58% 38%;
}

.page-hosting .host-rack {
    position: relative;
}

.page-hosting .host-rack img {
    object-position: center;
}

.page-hosting .host-rack-chip {
    position: absolute;
    left: 0.85rem;
    bottom: 0.85rem;
    margin: 0;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: rgba(7, 24, 42, 0.88);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.page-hosting .host-sites {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: #fff;
    scroll-margin-top: 6.25rem;
}

.page-hosting #services,
.page-hosting #work,
.page-hosting #process,
.page-hosting #faq {
    scroll-margin-top: 6.25rem;
}

.page-hosting .host-sites-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.page-hosting .host-sites-grid > :not(.host-site-card) {
    display: contents;
}

.page-hosting .host-site-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(13, 48, 87, 0.1);
    box-shadow: 0 16px 36px rgba(13, 48, 87, 0.08);
    text-decoration: none;
    color: inherit;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}

.page-hosting .host-site-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px rgba(13, 48, 87, 0.14);
}

.page-hosting .host-site-shot {
    background: #0b1f38;
    overflow: hidden;
}

.page-hosting .host-site-shot img {
    aspect-ratio: 16 / 10;
}

.page-hosting .host-site-body {
    padding: 1rem 1.1rem 1.15rem;
}

.page-hosting .host-site-body p {
    margin: 0 0 0.25rem;
    color: var(--seo-teal);
    font-size: calc(0.68rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-hosting .host-site-body h3 {
    margin: 0;
    color: var(--seo-navy);
    font-size: calc(1.05rem * var(--ref-s));
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.page-hosting .seo-mosaic-thumb {
    min-height: 190px;
}

.page-hosting .seo-mosaic-thumb img {
    object-position: center top;
    aspect-ratio: 16 / 10;
    min-height: 190px;
}

.page-hosting .seo-spotlight-copy .seo-btn {
    margin-top: 1.25rem;
}

@media (max-width: 1100px) {
    .page-hosting .seo-why-visual {
        display: block;
        max-width: 420px;
    }

    .page-hosting .host-hero-visual {
        min-height: 0;
        padding-bottom: 2rem;
    }

    .page-hosting .host-browser--side {
        position: relative;
        left: auto;
        bottom: auto;
        width: min(100%, 280px);
        margin-top: 1rem;
        transform: none;
    }

    .page-hosting .host-status {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        margin: 1rem 0 0;
    }

    .page-hosting .host-phone {
        display: none;
    }

    .page-hosting .host-sites-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .page-hosting .host-sites-grid {
        grid-template-columns: 1fr;
    }

    .page-hosting .host-browser--main {
        width: 100%;
    }
}

.page-about .about-growth-visual,
.about-staff-mosaic {
    width: 100%;
    margin: 0;
}

.page-about .about-growth-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 1.25rem 1.2rem 1.1rem;
    border-radius: 22px;
    background:
        radial-gradient(circle at 88% 12%, rgba(245, 197, 66, 0.18), transparent 32%),
        linear-gradient(155deg, #071a33 0%, #0d3057 48%, #0b4a46 100%);
    box-shadow:
        0 28px 56px rgba(13, 48, 87, 0.18),
        0 0 0 3px rgba(34, 211, 238, 0.45),
        0 0 0 6px rgba(139, 92, 246, 0.22);
}

.page-about .about-growth-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.page-about .about-growth-head p {
    margin: 0;
    color: #fff;
    font-size: calc(0.92rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: -0.02em;
}

.page-about .about-growth-head span {
    color: #99f6e4;
    font-size: calc(0.68rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-about .about-growth-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.page-about .about-growth-metrics div {
    padding: 0.7rem 0.65rem 0.75rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.page-about .about-growth-metrics strong {
    display: block;
    color: #fff;
    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
}

.page-about .about-growth-metrics span {
    display: block;
    margin-top: 0.28rem;
    color: rgba(226, 232, 240, 0.82);
    font-size: calc(0.68rem * var(--ref-s));
    font-weight: 700;
    line-height: 1.25;
}

.page-about .about-growth-chart {
    display: block;
    width: 100%;
    height: auto;
    margin: 0.85rem 0 0.35rem;
}

.page-about .about-growth-note {
    margin: 0;
    color: rgba(226, 232, 240, 0.78);
    font-size: calc(0.78rem * var(--ref-s));
    font-weight: 650;
    line-height: 1.4;
}

.about-staff-mosaic-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.55rem;
    min-height: 360px;
    aspect-ratio: 5 / 4.15;
}

.about-staff-tile {
    position: relative;
    display: block;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 28px rgba(13, 48, 87, 0.12);
    color: inherit;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

a.about-staff-tile:hover,
a.about-staff-tile:focus-visible {
    color: inherit;
    text-decoration: none;
    transform: translateY(-4px);
    box-shadow: 0 22px 40px rgba(13, 48, 87, 0.18);
}

.about-staff-tile--lead {
    grid-row: 1 / span 2;
}

.about-staff-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
}

.about-staff-tile figcaption,
.about-staff-tile .about-staff-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.6rem 0.65rem 0.55rem;
    background: linear-gradient(180deg, transparent 0%, rgba(7, 26, 51, 0.92) 78%);
    color: #fff;
}

.about-staff-tile figcaption strong,
.about-staff-tile figcaption span,
.about-staff-tile .about-staff-caption strong,
.about-staff-tile .about-staff-caption span {
    display: block;
}

.about-staff-tile figcaption strong,
.about-staff-tile .about-staff-caption strong {
    font-size: calc(0.78rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.about-staff-tile figcaption span,
.about-staff-tile .about-staff-caption span {
    margin-top: 0.08rem;
    color: #99f6e4;
    font-size: calc(0.6rem * var(--ref-s));
    font-weight: 700;
    line-height: 1.2;
}

.about-staff-tile:not(.about-staff-tile--lead) figcaption span,
.about-staff-tile:not(.about-staff-tile--lead) .about-staff-caption span {
    display: none;
}

.about-staff-tile--lead figcaption,
.about-staff-tile--lead .about-staff-caption {
    padding: 2.2rem 0.85rem 0.75rem;
}

.about-staff-tile--lead figcaption strong,
.about-staff-tile--lead .about-staff-caption strong {
    font-size: calc(1rem * var(--ref-s));
}

.about-staff-mosaic--studio .about-staff-mosaic-grid {
    grid-template-columns: 1fr 1fr 1fr 1.45fr;
    gap: 0.4rem;
    min-height: 0;
    aspect-ratio: 4 / 3.15;
}

.about-staff-mosaic--studio .about-staff-tile {
    border-radius: 12px;
}

.about-staff-mosaic--studio .about-staff-tile--lead {
    grid-column: 4;
    grid-row: 1 / span 2;
}

.about-staff-mosaic--studio .about-staff-tile:not(.about-staff-tile--lead) .about-staff-caption span {
    display: block;
}

@media (max-width: 1100px) {
    .about-staff-mosaic-grid {
        min-height: 280px;
    }
}

@media (max-width: 720px) {
    .page-about .about-growth-metrics {
        grid-template-columns: 1fr;
    }

    .about-staff-mosaic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        aspect-ratio: auto;
        min-height: 0;
    }

    .about-staff-mosaic--studio .about-staff-mosaic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        aspect-ratio: auto;
    }

    .about-staff-tile--lead,
    .about-staff-mosaic--studio .about-staff-tile--lead {
        grid-row: auto;
        grid-column: 1 / span 2;
        min-height: 240px;
    }

    .about-staff-tile {
        min-height: 180px;
    }
}

.team-photo-crop-keara,
img.team-photo-crop-keara {
    object-position: 50% 48%;
    transform: scale(1.52);
    transform-origin: 50% 48%;
}

.about-staff-tile img.team-photo-crop-keara {
    transform: scale(1.22);
    transform-origin: 50% 46%;
}

.team-profile-photo.team-photo-crop-keara {
    transform: scale(1.32);
    transform-origin: 50% 46%;
}

.page-team-profile .team-profile-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(5.5rem, 10vw, 7.5rem) 0 4.5rem;
    background:
        radial-gradient(ellipse 80% 70% at 78% 18%, rgba(231, 184, 63, 0.22), transparent 52%),
        radial-gradient(ellipse 60% 50% at 8% 88%, rgba(20, 184, 166, 0.18), transparent 55%),
        linear-gradient(160deg, #061528 0%, #0d3057 52%, #132c4d 100%);
    color: #fff;
}

.page-team-profile .team-profile-hero-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at 70% 30%, #000 28%, transparent 78%);
    pointer-events: none;
}

.page-team-profile .team-profile-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 4rem);
    align-items: center;
}

.page-team-profile .team-profile-portrait-wrap {
    position: relative;
    max-width: 420px;
}

.page-team-profile .team-profile-portrait {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: 32px;
    background: #132c4d;
    box-shadow:
        0 0 0 6px rgba(255, 255, 255, 0.12),
        0 0 0 10px rgba(231, 184, 63, 0.55),
        0 32px 70px rgba(0, 0, 0, 0.35);
}

.page-team-profile .team-profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
}

.page-team-profile .team-profile-initials {
    display: grid;
    place-items: center;
    height: 100%;
    color: #fff;
    font-size: 3rem;
    font-weight: 900;
}

.page-team-profile .team-profile-badge {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    margin: 0;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: rgba(6, 21, 40, 0.82);
    border: 1px solid rgba(231, 184, 63, 0.55);
    color: #fde68a;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.page-team-profile .team-profile-crumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1rem;
    color: rgba(226, 232, 240, 0.62);
    font-size: 0.82rem;
    font-weight: 700;
}

.page-team-profile .team-profile-crumb a {
    color: #99f6e4;
}

.page-team-profile .team-profile-copy h1 {
    margin: 0 0 0.85rem;
    color: #fff;
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    letter-spacing: -0.05em;
}

.page-team-profile .team-profile-lead {
    margin: 0 0 1.5rem;
    max-width: 38rem;
    color: rgba(226, 232, 240, 0.88);
    font-size: 1.08rem;
    line-height: 1.65;
}

.page-team-profile .team-profile-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0 0 1.6rem;
}

.page-team-profile .team-profile-facts div {
    padding: 0.85rem 0.9rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.page-team-profile .team-profile-facts span {
    display: block;
    margin-bottom: 0.2rem;
    color: #99f6e4;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-team-profile .team-profile-facts strong {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.3;
}

.page-team-profile .team-profile-copy .home-ref-button--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
    box-shadow: none;
}

.page-team-profile .team-profile-copy .home-ref-button--ghost:hover {
    color: #fff;
    border-color: #e7b83f;
}

.page-team-profile .team-profile-story {
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: #fff;
}

.page-team-profile .team-profile-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
    gap: clamp(1.5rem, 4vw, 3.25rem);
    align-items: start;
}

.page-team-profile .team-profile-story-copy h2 {
    margin: 0 0 1.1rem;
    color: var(--ref-navy);
}

.page-team-profile .team-profile-story-copy p {
    margin: 0 0 1rem;
    color: var(--ref-text);
    font-size: 1.05rem;
}

.page-team-profile .team-profile-quote {
    margin: 0;
    padding: 1.6rem 1.5rem 1.4rem;
    border-radius: 24px;
    background: var(--ref-navy);
    color: #fff;
    box-shadow: 0 24px 50px rgba(13, 48, 87, 0.16);
}

.page-team-profile .team-profile-quote p {
    margin: 0 0 1rem;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.35;
}

.page-team-profile .team-profile-quote cite {
    color: #fde68a;
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 700;
}

.page-team-profile .team-profile-focus {
    padding: clamp(2.75rem, 5vw, 4.5rem) 0;
    background: var(--ref-bg);
}

.page-team-profile .team-profile-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-team-profile .team-profile-chips li {
    padding: 0.7rem 1rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--ref-border);
    color: var(--ref-navy);
    font-size: 0.92rem;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(13, 48, 87, 0.06);
}

.page-team-profile .team-profile-personal {
    padding: clamp(3.25rem, 6vw, 5.5rem) 0 clamp(3.75rem, 6vw, 5.75rem);
    background: #fff;
}

.page-team-profile .team-profile-personal-head {
    max-width: 40rem;
    margin-bottom: 1.85rem;
}

.page-team-profile .team-profile-personal-head h2 {
    margin-bottom: 0.85rem;
}

.page-team-profile .team-profile-personal-lead {
    margin: 0;
    color: var(--ref-muted);
    font-size: calc(1.08rem * var(--ref-s));
    line-height: 1.7;
}

.page-team-profile .team-profile-personal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem 1.25rem;
}

.page-team-profile .team-profile-personal-card {
    padding: 1.55rem 1.5rem 1.5rem;
    border-radius: 22px;
    background: var(--ref-bg);
    border: 1px solid var(--ref-border);
    box-shadow: 0 10px 28px rgba(13, 48, 87, 0.05);
}

.page-team-profile .team-profile-personal-card span {
    display: block;
    margin-bottom: 0.7rem;
    color: var(--ref-teal);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-team-profile .team-profile-personal-card p {
    margin: 0;
    color: var(--ref-navy);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.7;
}

.page-team-profile .team-profile-peers {
    padding: clamp(2.75rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 4.5rem);
    background: var(--ref-bg);
}

.page-team-profile .team-profile-peer-grid {
    margin-top: 1.25rem;
}

@media (max-width: 900px) {
    .page-team-profile .team-profile-hero-grid,
    .page-team-profile .team-profile-story-grid,
    .page-team-profile .team-profile-facts,
    .page-team-profile .team-profile-personal-grid {
        grid-template-columns: 1fr;
    }

    .page-team-profile .team-profile-portrait-wrap {
        max-width: 320px;
        margin: 0 auto;
    }

    .page-team-profile .team-profile-copy .home-ref-actions {
        flex-wrap: wrap;
    }
}

.page-search-engine-marketing .seo-hero-rank {
    min-height: 0;
}

.page-search-engine-marketing .ads-hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-search-engine-marketing .ads-laptop {
    width: min(100%, 560px);
    margin-left: auto;
    filter: drop-shadow(0 28px 48px rgba(0, 0, 0, 0.38));
}

.page-search-engine-marketing .ads-laptop-lid {
    padding: 10px 10px 0;
    border-radius: 18px 18px 8px 8px;
    background: linear-gradient(180deg, #1a2330 0%, #0b1220 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.page-search-engine-marketing .ads-hero-device {
    overflow: hidden;
    border-radius: 10px 10px 4px 4px;
    background: #fff;
}

.page-search-engine-marketing .ads-hero-device-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 0.7rem;
    background: #e8eef5;
    border-bottom: 1px solid rgba(13, 48, 87, 0.08);
}

.page-search-engine-marketing .ads-hero-device-bar span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cfd8e3;
}

.page-search-engine-marketing .ads-hero-device-bar span:nth-child(1) { background: #ff5f57; }
.page-search-engine-marketing .ads-hero-device-bar span:nth-child(2) { background: #febc2e; }
.page-search-engine-marketing .ads-hero-device-bar span:nth-child(3) { background: #28c840; }

.page-search-engine-marketing .ads-hero-url {
    flex: 1;
    margin: 0 0 0 0.4rem;
    padding: 0.18rem 0.65rem;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 0.68rem;
    font-weight: 700;
}

.page-search-engine-marketing .ads-hero-device img {
    display: block;
    width: 100%;
    height: auto;
}

.page-search-engine-marketing .seo-define-media img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: 62% 42%;
}

.page-search-engine-marketing .seo-process-photo img {
    object-position: 50% 42%;
}

.page-search-engine-marketing .seo-spotlight-media img {
    object-position: 50% 58%;
}

.page-search-engine-optimization .seo-process-photo img {
    object-position: 50% 38%;
}

.page-search-engine-optimization .seo-spotlight-media img {
    object-position: 50% 78%;
}

.page-search-engine-marketing .ads-laptop-base {
    position: relative;
    height: 14px;
    margin: 0 -18px 0;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(180deg, #2a3344 0%, #111827 100%);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28);
}

.page-search-engine-marketing .ads-laptop-base i {
    position: absolute;
    left: 50%;
    top: 3px;
    width: 72px;
    height: 6px;
    margin-left: -36px;
    border-radius: 999px;
    background: #0b1220;
}

.page-search-engine-marketing .ads-parts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.page-search-engine-marketing .ads-part-card {
    padding: 1.25rem 1.2rem 1.35rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(13, 48, 87, 0.08);
    box-shadow: 0 16px 36px rgba(13, 48, 87, 0.08);
}

.page-search-engine-marketing .ads-part-card::before {
    content: '';
    display: block;
    width: 42px;
    height: 4px;
    margin-bottom: 0.85rem;
    border-radius: 999px;
    background: var(--seo-teal);
}

.page-search-engine-marketing .ads-part-card--teal::before { background: var(--seo-teal); }
.page-search-engine-marketing .ads-part-card--navy::before { background: var(--seo-navy); }
.page-search-engine-marketing .ads-part-card--violet::before { background: var(--seo-violet); }
.page-search-engine-marketing .ads-part-card--emerald::before { background: var(--seo-emerald); }

.page-search-engine-marketing .ads-part-label {
    margin: 0 0 0.35rem;
    color: var(--seo-teal);
    font-size: calc(0.7rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-search-engine-marketing .ads-part-card--navy .ads-part-label { color: var(--seo-navy); }
.page-search-engine-marketing .ads-part-card--violet .ads-part-label { color: var(--seo-violet); }
.page-search-engine-marketing .ads-part-card--emerald .ads-part-label { color: var(--seo-emerald); }

.page-search-engine-marketing .ads-part-card h3 {
    margin: 0 0 0.55rem;
    color: var(--seo-navy);
    font-size: calc(1.15rem * var(--ref-s));
    font-weight: 900;
    line-height: 1.2;
}

.page-search-engine-marketing .ads-part-card p {
    margin: 0;
    color: var(--seo-navy);
    font-size: calc(0.92rem * var(--ref-s));
    line-height: 1.55;
    opacity: 0.88;
}

.page-search-engine-marketing .seo-named-proof {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.page-search-engine-marketing .seo-named-card {
    grid-column: span 2;
}

.page-search-engine-marketing .seo-named-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.page-search-engine-marketing .seo-named-card:nth-child(5) {
    grid-column: 4 / span 2;
}

.page-search-engine-marketing .ads-costs {
    padding: clamp(2.75rem, 5vw, 4.25rem) 0;
    background: var(--seo-navy);
}

.page-search-engine-marketing .ads-costs .seo-eyebrow {
    color: rgba(255, 255, 255, 0.78);
}

.page-search-engine-marketing .ads-costs h2,
.page-search-engine-marketing .ads-costs .seo-section-lead {
    color: #fff;
}

.page-search-engine-marketing .ads-costs .seo-section-lead {
    opacity: 0.82;
}

.page-search-engine-marketing .ads-cost-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.page-search-engine-marketing .ads-cost-card {
    padding: 1.25rem 1.2rem 1.4rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(10, 22, 40, 0.08);
    color: var(--text);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
}

.page-search-engine-marketing .ads-cost-when {
    display: inline-block;
    margin-bottom: 0.7rem;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    background: rgba(10, 22, 40, 0.06);
    color: var(--seo-navy);
    font-size: calc(0.68rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-search-engine-marketing .ads-cost-card h3 {
    margin: 0 0 0.55rem;
    font-size: calc(1.25rem * var(--ref-s));
    font-weight: 900;
    color: var(--seo-navy);
}

.page-search-engine-marketing .ads-cost-card p {
    margin: 0;
    color: var(--muted);
    font-size: calc(0.9rem * var(--ref-s));
    line-height: 1.55;
}

.page-search-engine-marketing #work,
.page-search-engine-marketing #services,
.page-search-engine-marketing #process,
.page-search-engine-marketing #what-you-pay,
.page-search-engine-marketing #faq {
    scroll-margin-top: 6.25rem;
}

@media (max-width: 900px) {
    .page-search-engine-marketing .ads-parts-grid,
    .page-search-engine-marketing .ads-cost-grid {
        grid-template-columns: 1fr;
    }

    .page-search-engine-marketing .ads-laptop {
        margin: 0 auto;
    }

    .page-search-engine-marketing .seo-named-proof {
        grid-template-columns: 1fr;
    }

    .page-search-engine-marketing .seo-named-card,
    .page-search-engine-marketing .seo-named-card:nth-child(4),
    .page-search-engine-marketing .seo-named-card:nth-child(5) {
        grid-column: auto;
    }
}

/* Abbotsford website design — dedicated layout, Ads/WD components. */
.page-abbotsford-website-design .wd-hero .seo-actions {
    margin-top: 1.35rem;
}

.page-abbotsford-website-design .awd-why {
    max-width: 720px;
}

.page-abbotsford-website-design .awd-why h2 {
    margin: 0 0 0.85rem;
    color: var(--ref-navy);
}

.page-abbotsford-website-design .seo-named-card {
    color: inherit;
}

.page-abbotsford-website-design .seo-named-client {
    text-transform: none;
    letter-spacing: -0.02em;
    font-size: calc(0.98rem * var(--ref-s));
    font-weight: 900;
}

.page-abbotsford-website-design .awd-card-link {
    display: inline-block;
    margin-top: 0.75rem;
    color: var(--ref-navy);
    font-size: calc(0.82rem * var(--ref-s));
    font-weight: 800;
    text-decoration: none;
}

.page-abbotsford-website-design .awd-card-link:hover {
    text-decoration: underline;
}

.page-abbotsford-website-design .awd-proof-all {
    margin: 1.35rem 0 0;
    text-align: center;
}

.page-abbotsford-website-design .awd-proof-all a {
    color: var(--ref-navy);
    font-weight: 800;
}

.page-abbotsford-website-design .awd-parts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.page-abbotsford-website-design .ads-part-card {
    padding: 1.25rem 1.2rem 1.35rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(13, 48, 87, 0.08);
    box-shadow: 0 16px 36px rgba(13, 48, 87, 0.08);
}

.page-abbotsford-website-design .ads-part-card::before {
    content: '';
    display: block;
    width: 42px;
    height: 4px;
    margin-bottom: 0.85rem;
    border-radius: 999px;
    background: var(--seo-navy);
}

.page-abbotsford-website-design .ads-part-card--teal::before { background: var(--seo-teal); }
.page-abbotsford-website-design .ads-part-card--navy::before { background: var(--seo-navy); }
.page-abbotsford-website-design .ads-part-card--violet::before { background: var(--seo-violet); }
.page-abbotsford-website-design .ads-part-card--emerald::before { background: var(--seo-emerald); }

.page-abbotsford-website-design .ads-part-card h3.ads-part-label {
    margin: 0 0 0.45rem;
    color: var(--seo-navy);
    font-size: calc(0.7rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-abbotsford-website-design .ads-part-card--teal h3.ads-part-label { color: var(--seo-teal); }
.page-abbotsford-website-design .ads-part-card--violet h3.ads-part-label { color: var(--seo-violet); }
.page-abbotsford-website-design .ads-part-card--emerald h3.ads-part-label { color: var(--seo-emerald); }

.page-abbotsford-website-design .awd-part-title {
    margin: 0 0 0.55rem;
    color: var(--seo-navy);
    font-size: calc(1.15rem * var(--ref-s));
    font-weight: 900;
    line-height: 1.2;
}

.page-abbotsford-website-design .ads-part-card p {
    margin: 0;
    color: var(--ref-muted);
    font-size: calc(0.9rem * var(--ref-s));
    line-height: 1.55;
}

.page-abbotsford-website-design .awd-part-card--wide {
    grid-column: 1 / -1;
}

.page-abbotsford-website-design .awd-detail-line {
    max-width: 720px;
    margin: 1.35rem auto 0;
    color: var(--ref-muted);
    font-size: calc(0.92rem * var(--ref-s));
    line-height: 1.65;
    text-align: center;
}

.page-abbotsford-website-design .awd-detail-line a {
    color: var(--ref-navy);
    font-weight: 700;
}

.page-abbotsford-website-design .awd-pipeline {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.page-abbotsford-website-design .awd-more {
    padding: 1.75rem 0 3rem;
    background: #fff;
}

.page-abbotsford-website-design .awd-more h2 {
    margin: 0 0 0.5rem;
    color: var(--ref-navy);
    font-size: calc(1.15rem * var(--ref-s));
}

.page-abbotsford-website-design .awd-more p {
    margin: 0;
    color: var(--ref-muted);
}

.page-abbotsford-website-design .awd-more a {
    color: var(--ref-navy);
    font-weight: 700;
}

.page-abbotsford-website-design #work,
.page-abbotsford-website-design #services,
.page-abbotsford-website-design #process,
.page-abbotsford-website-design #faq {
    scroll-margin-top: 6.25rem;
}

@media (max-width: 900px) {
    .page-abbotsford-website-design .awd-parts-grid {
        grid-template-columns: 1fr;
    }
}

/* Abbotsford SEO — dedicated layout, Ads/SEO components. */
.page-abbotsford-seo .awd-why {
    max-width: 720px;
}

.page-abbotsford-seo .awd-why h2 {
    margin: 0 0 0.85rem;
    color: var(--ref-navy);
}

.page-abbotsford-seo .seo-geo-proof-card h3.seo-named-client {
    text-transform: none;
    letter-spacing: -0.02em;
    color: #fff;
    font-size: calc(1.02rem * var(--ref-s));
}

.page-abbotsford-seo .aseo-proof-stat {
    margin: 0.35rem 0 0.55rem;
    color: var(--seo-gold);
    font-size: calc(1.05rem * var(--ref-s));
    font-weight: 800;
    line-height: 1.3;
}

.page-abbotsford-seo .aseo-proof-detail {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: calc(0.9rem * var(--ref-s));
    line-height: 1.55;
}

.page-abbotsford-seo .aseo-proof-shot {
    margin: 0 0 0.85rem;
    overflow: hidden;
    border-radius: 12px;
}

.page-abbotsford-seo .aseo-proof-shot img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
}

.page-abbotsford-seo .aseo-reviews {
    margin-top: 2rem;
    padding: 0;
    background: transparent;
}

.page-abbotsford-seo .aseo-other {
    margin: 1.5rem 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: calc(0.95rem * var(--ref-s));
    line-height: 1.6;
    text-align: center;
}

.page-abbotsford-seo .aseo-other a {
    color: var(--seo-gold);
    font-weight: 700;
}

.page-abbotsford-seo .awd-parts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.page-abbotsford-seo .ads-part-card {
    padding: 1.25rem 1.2rem 1.35rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(13, 48, 87, 0.08);
    box-shadow: 0 16px 36px rgba(13, 48, 87, 0.08);
}

.page-abbotsford-seo .ads-part-card::before {
    content: '';
    display: block;
    width: 42px;
    height: 4px;
    margin-bottom: 0.85rem;
    border-radius: 999px;
    background: var(--seo-navy);
}

.page-abbotsford-seo .ads-part-card--teal::before { background: var(--seo-teal); }
.page-abbotsford-seo .ads-part-card--navy::before { background: var(--seo-navy); }
.page-abbotsford-seo .ads-part-card--violet::before { background: var(--seo-violet); }
.page-abbotsford-seo .ads-part-card--emerald::before { background: var(--seo-emerald); }

.page-abbotsford-seo .ads-part-card h3.ads-part-label {
    margin: 0 0 0.45rem;
    color: var(--seo-navy);
    font-size: calc(0.7rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-abbotsford-seo .ads-part-card--teal h3.ads-part-label { color: var(--seo-teal); }
.page-abbotsford-seo .ads-part-card--violet h3.ads-part-label { color: var(--seo-violet); }
.page-abbotsford-seo .ads-part-card--emerald h3.ads-part-label { color: var(--seo-emerald); }

.page-abbotsford-seo .awd-part-title {
    margin: 0 0 0.55rem;
    color: var(--seo-navy);
    font-size: calc(1.15rem * var(--ref-s));
    font-weight: 900;
    line-height: 1.2;
}

.page-abbotsford-seo .ads-part-card p {
    margin: 0;
    color: var(--ref-muted);
    font-size: calc(0.9rem * var(--ref-s));
    line-height: 1.55;
}

.page-abbotsford-seo .awd-part-card--wide {
    grid-column: 1 / -1;
}

.page-abbotsford-seo .awd-detail-line {
    max-width: 760px;
    margin: 1.35rem auto 0;
    color: var(--ref-muted);
    font-size: calc(0.92rem * var(--ref-s));
    line-height: 1.65;
    text-align: center;
}

.page-abbotsford-seo .awd-detail-line a {
    color: var(--ref-navy);
    font-weight: 700;
}

.page-abbotsford-seo .awd-pipeline {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.page-abbotsford-seo .awd-more {
    padding: 1.75rem 0 3rem;
    background: #fff;
}

.page-abbotsford-seo .awd-more h2 {
    margin: 0 0 0.5rem;
    color: var(--ref-navy);
    font-size: calc(1.15rem * var(--ref-s));
}

.page-abbotsford-seo .awd-more p {
    margin: 0;
    color: var(--ref-muted);
}

.page-abbotsford-seo .awd-more a {
    color: var(--ref-navy);
    font-weight: 700;
}

.page-abbotsford-seo #proof,
.page-abbotsford-seo #services,
.page-abbotsford-seo #process,
.page-abbotsford-seo #faq {
    scroll-margin-top: 6.25rem;
}

@media (max-width: 900px) {
    .page-abbotsford-seo .awd-parts-grid,
    .page-abbotsford-seo .aseo-proof-split {
        grid-template-columns: 1fr;
    }
}

/* Abbotsford Google Ads — dedicated layout, SEM hero laptop + Ads cards. */
.page-abbotsford-ppc-google-ads-agency .seo-hero-rank {
    min-height: 0;
}

.page-abbotsford-ppc-google-ads-agency .ads-hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-abbotsford-ppc-google-ads-agency .ads-laptop {
    width: min(100%, 560px);
    margin-left: auto;
    filter: drop-shadow(0 28px 48px rgba(0, 0, 0, 0.38));
}

.page-abbotsford-ppc-google-ads-agency .ads-laptop-lid {
    padding: 10px 10px 0;
    border-radius: 18px 18px 8px 8px;
    background: linear-gradient(180deg, #1a2330 0%, #0b1220 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.page-abbotsford-ppc-google-ads-agency .ads-hero-device {
    overflow: hidden;
    border-radius: 10px 10px 4px 4px;
    background: #fff;
}

.page-abbotsford-ppc-google-ads-agency .ads-hero-device-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 0.7rem;
    background: #e8eef5;
    border-bottom: 1px solid rgba(13, 48, 87, 0.08);
}

.page-abbotsford-ppc-google-ads-agency .ads-hero-device-bar span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cfd8e3;
}

.page-abbotsford-ppc-google-ads-agency .ads-hero-device-bar span:nth-child(1) { background: #ff5f57; }
.page-abbotsford-ppc-google-ads-agency .ads-hero-device-bar span:nth-child(2) { background: #febc2e; }
.page-abbotsford-ppc-google-ads-agency .ads-hero-device-bar span:nth-child(3) { background: #28c840; }

.page-abbotsford-ppc-google-ads-agency .ads-hero-url {
    flex: 1;
    margin: 0 0 0 0.4rem;
    padding: 0.18rem 0.65rem;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 0.68rem;
    font-weight: 700;
}

.page-abbotsford-ppc-google-ads-agency .ads-hero-device img {
    display: block;
    width: 100%;
    height: auto;
}

.page-abbotsford-ppc-google-ads-agency .ads-laptop-base {
    position: relative;
    height: 14px;
    margin: 0 -18px 0;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(180deg, #2a3344 0%, #111827 100%);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28);
}

.page-abbotsford-ppc-google-ads-agency .ads-laptop-base i {
    position: absolute;
    left: 50%;
    top: 3px;
    width: 72px;
    height: 6px;
    margin-left: -36px;
    border-radius: 999px;
    background: #0b1220;
}

.page-abbotsford-ppc-google-ads-agency .awd-why {
    max-width: 720px;
}

.page-abbotsford-ppc-google-ads-agency .awd-why h2 {
    margin: 0 0 0.85rem;
    color: var(--ref-navy);
}

.page-abbotsford-ppc-google-ads-agency .seo-named-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-abbotsford-ppc-google-ads-agency .seo-named-card {
    color: inherit;
}

.page-abbotsford-ppc-google-ads-agency .seo-named-client {
    text-transform: none;
    letter-spacing: -0.02em;
    font-size: calc(0.98rem * var(--ref-s));
    font-weight: 900;
}

.page-abbotsford-ppc-google-ads-agency .awd-card-link {
    display: inline-block;
    margin-top: 0.75rem;
    color: var(--ref-navy);
    font-size: calc(0.82rem * var(--ref-s));
    font-weight: 800;
    text-decoration: none;
}

.page-abbotsford-ppc-google-ads-agency .awd-card-link:hover {
    text-decoration: underline;
}

.page-abbotsford-ppc-google-ads-agency .awd-proof-all {
    margin: 1.35rem 0 0;
    text-align: center;
}

.page-abbotsford-ppc-google-ads-agency .awd-proof-all a {
    color: var(--ref-navy);
    font-weight: 800;
}

.page-abbotsford-ppc-google-ads-agency .awd-parts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.page-abbotsford-ppc-google-ads-agency .ads-part-card {
    padding: 1.25rem 1.2rem 1.35rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(13, 48, 87, 0.08);
    box-shadow: 0 16px 36px rgba(13, 48, 87, 0.08);
}

.page-abbotsford-ppc-google-ads-agency .ads-part-card::before {
    content: '';
    display: block;
    width: 42px;
    height: 4px;
    margin-bottom: 0.85rem;
    border-radius: 999px;
    background: var(--seo-navy);
}

.page-abbotsford-ppc-google-ads-agency .ads-part-card--teal::before { background: var(--seo-teal); }
.page-abbotsford-ppc-google-ads-agency .ads-part-card--navy::before { background: var(--seo-navy); }
.page-abbotsford-ppc-google-ads-agency .ads-part-card--violet::before { background: var(--seo-violet); }
.page-abbotsford-ppc-google-ads-agency .ads-part-card--emerald::before { background: var(--seo-emerald); }

.page-abbotsford-ppc-google-ads-agency .ads-part-card h3.ads-part-label {
    margin: 0 0 0.45rem;
    color: var(--seo-navy);
    font-size: calc(0.7rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-abbotsford-ppc-google-ads-agency .ads-part-card--teal h3.ads-part-label { color: var(--seo-teal); }
.page-abbotsford-ppc-google-ads-agency .ads-part-card--violet h3.ads-part-label { color: var(--seo-violet); }
.page-abbotsford-ppc-google-ads-agency .ads-part-card--emerald h3.ads-part-label { color: var(--seo-emerald); }

.page-abbotsford-ppc-google-ads-agency .awd-part-title {
    margin: 0 0 0.55rem;
    color: var(--seo-navy);
    font-size: calc(1.15rem * var(--ref-s));
    font-weight: 900;
    line-height: 1.2;
}

.page-abbotsford-ppc-google-ads-agency .ads-part-card p {
    margin: 0;
    color: var(--ref-muted);
    font-size: calc(0.9rem * var(--ref-s));
    line-height: 1.55;
}

.page-abbotsford-ppc-google-ads-agency .awd-part-card--wide {
    grid-column: 1 / -1;
}

.page-abbotsford-ppc-google-ads-agency .awd-detail-line {
    max-width: 720px;
    margin: 1.35rem auto 0;
    color: var(--ref-muted);
    font-size: calc(0.92rem * var(--ref-s));
    line-height: 1.65;
    text-align: center;
}

.page-abbotsford-ppc-google-ads-agency .awd-detail-line a {
    color: var(--ref-navy);
    font-weight: 700;
}

.page-abbotsford-ppc-google-ads-agency .awd-pipeline {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.page-abbotsford-ppc-google-ads-agency .awd-more {
    padding: 1.75rem 0 3rem;
    background: #fff;
}

.page-abbotsford-ppc-google-ads-agency .awd-more h2 {
    margin: 0 0 0.5rem;
    color: var(--ref-navy);
    font-size: calc(1.15rem * var(--ref-s));
}

.page-abbotsford-ppc-google-ads-agency .awd-more p {
    margin: 0;
    color: var(--ref-muted);
}

.page-abbotsford-ppc-google-ads-agency .awd-more a {
    color: var(--ref-navy);
    font-weight: 700;
}

.page-abbotsford-ppc-google-ads-agency #work,
.page-abbotsford-ppc-google-ads-agency #services,
.page-abbotsford-ppc-google-ads-agency #process,
.page-abbotsford-ppc-google-ads-agency #faq {
    scroll-margin-top: 6.25rem;
}

@media (max-width: 900px) {
    .page-abbotsford-ppc-google-ads-agency .awd-parts-grid,
    .page-abbotsford-ppc-google-ads-agency .seo-named-proof {
        grid-template-columns: 1fr;
    }

    .page-abbotsford-ppc-google-ads-agency .ads-laptop {
        margin: 0 auto;
    }
}

/* City digital marketing pages — Abbotsford, Chilliwack, Langley. */
.adms-page .wd-hero .seo-actions {
    margin-top: 1.35rem;
}

.adms-page .wd-eyebrow.home-ref-eyebrow--branded {
    color: rgba(255, 255, 255, 0.72);
}

.adms-page .wd-eyebrow.home-ref-eyebrow--branded .is-web {
    color: #93c5fd;
}

.adms-page .wd-eyebrow.home-ref-eyebrow--branded .is-ads {
    color: #5eead4;
}

.adms-page .wd-eyebrow.home-ref-eyebrow--branded .is-seo {
    color: #c4b5fd;
}

.adms-page .wd-eyebrow.home-ref-eyebrow--branded .is-city {
    color: #fff;
}

.adms-page .awd-why {
    max-width: 720px;
}

.adms-page .awd-why h2 {
    margin: 0 0 0.85rem;
    color: var(--ref-navy);
}

.adms-page .seo-named-card {
    color: inherit;
}

.adms-page .adms-proof-card {
    position: relative;
    color: var(--ref-navy);
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28);
}

.adms-page .adms-proof-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: var(--seo-navy);
}

.adms-page .adms-proof-card--web::after { background: var(--seo-navy); }
.adms-page .adms-proof-card--ads::after { background: var(--seo-teal); }
.adms-page .adms-proof-card--seo::after { background: var(--seo-violet); }

.adms-page .adms-proof-body {
    padding-top: 1.05rem;
}

.adms-page .adms-proof-meta {
    margin: 0 0 0.35rem;
    color: var(--ref-muted);
    font-size: calc(0.7rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.adms-page .adms-proof-figure {
    margin: 0;
    color: var(--seo-navy);
    font-family: var(--font-heading);
    font-size: clamp(2.35rem, 4.2vw, 3.15rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.95;
}

.adms-page .adms-proof-card--web .adms-proof-figure { color: var(--seo-navy); }
.adms-page .adms-proof-card--ads .adms-proof-figure { color: var(--seo-teal); }
.adms-page .adms-proof-card--seo .adms-proof-figure { color: var(--seo-violet); }

.adms-page .adms-proof-unit {
    margin: 0.28rem 0 0.7rem;
    color: var(--ref-navy);
    font-size: calc(1.02rem * var(--ref-s));
    font-weight: 800;
    line-height: 1.25;
}

.adms-page .seo-proof .awd-card-link {
    color: var(--seo-navy);
}

.adms-page .awd-card-link {
    display: inline-block;
    margin-top: 0.75rem;
    color: var(--seo-navy);
    font-size: calc(0.82rem * var(--ref-s));
    font-weight: 800;
    text-decoration: none;
}

.adms-page .awd-card-link:hover {
    text-decoration: underline;
}

.adms-page .seo-proof .seo-section-lead {
    color: rgba(255, 255, 255, 0.78);
}

.adms-page .awd-proof-all {
    margin: 1.35rem 0 0;
    text-align: center;
}

.adms-page .seo-proof .awd-proof-all a {
    color: #fff;
    font-weight: 800;
}

.adms-page .seo-proof {
    padding-bottom: clamp(3.4rem, 5.5vw, 4.6rem);
}

.adms-mid-cta {
    position: relative;
    z-index: 2;
    margin-top: -2.25rem;
    padding: 0 0 clamp(2.25rem, 4vw, 2.85rem);
    background: transparent;
}

.adms-page .seo-services {
    padding-top: clamp(1.5rem, 3vw, 2.15rem);
}

.adms-mid-cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.15rem 1.5rem;
    padding: clamp(1.2rem, 2.4vw, 1.65rem) clamp(1.25rem, 2.5vw, 1.85rem);
    border-radius: 18px;
    background: linear-gradient(145deg, #0d3057 0%, #173f73 58%, #0a2545 100%);
    box-shadow: 0 18px 40px rgba(13, 48, 87, 0.22);
}

.adms-mid-cta-copy {
    flex: 1 1 18rem;
    min-width: 0;
}

.adms-mid-cta-eyebrow {
    margin: 0 0 0.3rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: calc(0.68rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.adms-mid-cta-copy h2 {
    margin: 0 0 0.35rem;
    color: #fff;
    font-size: clamp(1.28rem, 2.4vw, 1.7rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.adms-mid-cta-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: calc(0.92rem * var(--ref-s));
    line-height: 1.5;
}

.adms-page .awd-parts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.adms-page .ads-part-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.3rem 1.25rem 1.4rem;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(145deg, #0d3057 0%, #173f6b 55%, #0a2545 100%);
    border: 0;
    box-shadow: 0 18px 40px rgba(13, 48, 87, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.adms-page .ads-part-card::before {
    display: none;
}

.adms-page .ads-part-card--web {
    background: linear-gradient(145deg, #0d3057 0%, #1a4a7a 52%, #0a2545 100%);
    box-shadow: 0 18px 40px rgba(13, 48, 87, 0.24), inset 0 0 0 1px rgba(147, 197, 253, 0.32);
}

.adms-page .ads-part-card--ads {
    background: linear-gradient(145deg, #123d2e 0%, #047857 55%, #0b2e22 100%);
    box-shadow: 0 18px 40px rgba(18, 61, 46, 0.26), inset 0 0 0 1px rgba(110, 231, 183, 0.3);
}

.adms-page .ads-part-card--seo {
    background: linear-gradient(145deg, #2e1847 0%, #6d28d9 52%, #4c1d95 100%);
    box-shadow: 0 18px 40px rgba(46, 24, 71, 0.26), inset 0 0 0 1px rgba(167, 139, 250, 0.32);
}

.adms-page .adms-part-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    margin-bottom: 0.85rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.adms-page .adms-part-icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.adms-page .ads-part-card--web .adms-part-icon { background: rgba(147, 197, 253, 0.18); color: #bfdbfe; }
.adms-page .ads-part-card--ads .adms-part-icon { background: rgba(45, 212, 191, 0.18); color: #99f6e4; }
.adms-page .ads-part-card--seo .adms-part-icon { background: rgba(196, 181, 253, 0.2); color: #ddd6fe; }

.adms-page .ads-part-card h3.ads-part-label {
    margin: 0 0 0.45rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: calc(0.68rem * var(--ref-s));
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.adms-page .ads-part-card--web h3.ads-part-label { color: #93c5fd; }
.adms-page .ads-part-card--ads h3.ads-part-label { color: #5eead4; }
.adms-page .ads-part-card--seo h3.ads-part-label { color: #c4b5fd; }

.adms-page .awd-part-title {
    margin: 0 0 0.55rem;
    color: #fff;
    font-size: calc(1.18rem * var(--ref-s));
    font-weight: 900;
    line-height: 1.2;
}

.adms-page .adms-part-card--primary .awd-part-title {
    font-size: calc(1.28rem * var(--ref-s));
}

.adms-page .ads-part-card p {
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: calc(0.9rem * var(--ref-s));
    line-height: 1.55;
}

.adms-page .ads-part-card > p:not(.awd-part-title) {
    flex: 1 1 auto;
}

.adms-page .ads-part-card .awd-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    gap: 0.35rem;
    margin-top: auto;
    padding: 0.58rem 1.05rem;
    border-radius: 999px;
    background: #fff;
    color: var(--seo-navy);
    font-size: calc(0.78rem * var(--ref-s));
    line-height: 1.25;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.adms-page .ads-part-card .awd-card-link:hover {
    color: var(--seo-navy);
    text-decoration: none;
    transform: translateY(-2px);
    filter: brightness(1.04);
}

.adms-page .ads-part-card--web .awd-card-link { color: #0d3057; }
.adms-page .ads-part-card--ads .awd-card-link { color: #0f766e; }
.adms-page .ads-part-card--seo .awd-card-link { color: #5b21b6; }

.adms-page .awd-part-card--wide {
    grid-column: 1 / -1;
}

.adms-page .awd-detail-line {
    max-width: 720px;
    margin: 1.35rem auto 0;
    color: var(--ref-muted);
    font-size: calc(0.92rem * var(--ref-s));
    line-height: 1.65;
    text-align: center;
}

.adms-page .awd-detail-line a {
    color: var(--ref-navy);
    font-weight: 700;
}

.adms-page .awd-pipeline {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.adms-page .awd-more {
    padding: 1.75rem 0 3rem;
    background: #fff;
}

.adms-page .awd-more h2 {
    margin: 0 0 0.5rem;
    color: var(--ref-navy);
    font-size: calc(1.15rem * var(--ref-s));
}

.adms-page .awd-more p {
    margin: 0;
    color: var(--ref-muted);
}

.adms-page .awd-more a {
    color: var(--ref-navy);
    font-weight: 700;
}

.awd-more a.awd-more-link--web { color: var(--seo-navy, #0d3057); }
.awd-more a.awd-more-link--ads { color: var(--seo-teal, #14b8a6); }
.awd-more a.awd-more-link--seo { color: var(--seo-violet, #8b5cf6); }
.awd-more a.awd-more-link--dms { color: var(--seo-navy, #0d3057); }

.adms-page #work,
.adms-page #services,
.adms-page #process,
.adms-page #faq {
    scroll-margin-top: 6.25rem;
}

@media (max-width: 900px) {
    .adms-page .awd-parts-grid,
    .adms-page .seo-named-proof {
        grid-template-columns: 1fr;
    }

    .adms-mid-cta {
        margin-top: -1.75rem;
        padding-bottom: 1.85rem;
    }

    .adms-mid-cta-inner {
        align-items: flex-start;
    }
}

/* City service pages (website, Ads, SEO) share adms-page proof / CTA / parts. */
.aads-page .ads-hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.aads-page .ads-laptop {
    width: min(100%, 560px);
    margin-left: auto;
    filter: drop-shadow(0 28px 48px rgba(0, 0, 0, 0.38));
}

.aads-page .ads-laptop-lid {
    padding: 10px 10px 0;
    border-radius: 18px 18px 8px 8px;
    background: linear-gradient(180deg, #1a2330 0%, #0b1220 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.aads-page .ads-hero-device {
    overflow: hidden;
    border-radius: 10px 10px 4px 4px;
    background: #fff;
}

.aads-page .ads-hero-device-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 0.7rem;
    background: #e8eef5;
    border-bottom: 1px solid rgba(13, 48, 87, 0.08);
}

.aads-page .ads-hero-device-bar span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cfd8e3;
}

.aads-page .ads-hero-device-bar span:nth-child(1) { background: #ff5f57; }
.aads-page .ads-hero-device-bar span:nth-child(2) { background: #febc2e; }
.aads-page .ads-hero-device-bar span:nth-child(3) { background: #28c840; }

.aads-page .ads-hero-url {
    flex: 1;
    margin: 0 0 0 0.4rem;
    padding: 0.18rem 0.65rem;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 0.68rem;
    font-weight: 700;
}

.aads-page .ads-hero-device img {
    display: block;
    width: 100%;
    height: auto;
}

.aads-page .ads-laptop-base {
    position: relative;
    height: 14px;
    margin: 0 -18px 0;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(180deg, #2a3344 0%, #111827 100%);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.28);
}

.aads-page .ads-laptop-base i {
    position: absolute;
    left: 50%;
    top: 3px;
    width: 72px;
    height: 6px;
    margin-left: -36px;
    border-radius: 999px;
    background: #0b1220;
}

.aads-page .seo-named-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.aseo-page .seo-geo-proof-card .adms-proof-meta {
    color: rgba(255, 255, 255, 0.62);
}

.aseo-page .seo-geo-proof-card h3.adms-proof-figure {
    margin: 0.1rem 0 0.2rem;
    color: #fff;
    font-family: var(--font-heading);
    font-size: clamp(2.35rem, 4.2vw, 3.15rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 0.95;
}

.aseo-page .seo-geo-proof-card .adms-proof-unit {
    margin: 0.2rem 0 0.75rem;
    color: var(--seo-gold);
    font-size: calc(1.02rem * var(--ref-s));
    font-weight: 800;
    line-height: 1.25;
}

.acity-svc #proof {
    scroll-margin-top: 6.25rem;
}

.legal-page .legal-prose {
    max-width: 46rem;
}

.legal-page .legal-prose h1 {
    margin-bottom: 0.75rem;
}

.legal-page .legal-updated {
    color: var(--muted, #64748b);
    font-size: 0.95rem;
    margin: 0 0 1.5rem;
}

.legal-page .legal-note {
    background: var(--surface, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 0.75rem;
    padding: 1rem 1.15rem;
    margin: 0 0 2rem;
    font-size: 0.95rem;
}

.legal-page .legal-prose h2 {
    margin-top: 2.25rem;
    font-size: 1.35rem;
}

.legal-page .legal-prose h3 {
    margin-top: 1.5rem;
    font-size: 1.1rem;
}

.legal-page .legal-prose p,
.legal-page .legal-prose li {
    line-height: 1.7;
}

.legal-page .legal-prose ol,
.legal-page .legal-prose ul {
    padding-left: 1.25rem;
}

.footer-bottom p a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

@media (max-width: 900px) {
    .aads-page .seo-named-proof,
    .aads-page .ads-laptop {
        margin-left: auto;
        margin-right: auto;
        grid-template-columns: 1fr;
    }
}