.skip-link {
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 100;
    transform: translateY(-140%);
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius-sm);
    color: var(--color-surface);
    background: var(--color-heading);
    text-decoration: none;
}

.skip-link:focus {
    transform: translateY(0);
}

.eyebrow {
    margin-block-end: var(--space-xs);
    color: var(--color-eyebrow);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.lede {
    max-width: 62ch;
    color: var(--color-muted);
    font-size: clamp(1.04rem, 1.6vw, 1.22rem);
    line-height: 1.65;
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.card__button {
    width: fit-content;
}

.button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0.78rem 1.05rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    box-shadow: none;
    font-weight: 800;
    line-height: 1.1;
    text-decoration: none;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button:disabled,
.button[aria-disabled="true"] {
    box-shadow: none;
    opacity: 0.72;
    transform: none;
}

.button-primary,
.button--primary {
    color: var(--color-on-brand);
    background: var(--color-brand);
    box-shadow: var(--button-shadow);
}

.button-primary:hover,
.button--primary:hover {
    background: var(--color-brand-dark);
}

.button-secondary,
.button--secondary {
    color: var(--color-heading);
    border-color: var(--color-border);
    background: var(--color-surface);
}

.button-secondary:hover,
.button--secondary:hover {
    border-color: var(--color-brand);
}

.button-outline,
.button--outline {
    color: var(--color-heading);
    border-color: color-mix(in srgb, var(--color-brand) 55%, var(--color-border));
    background: transparent;
}

.button-outline:hover,
.button--outline:hover {
    border-color: var(--color-brand-dark);
    color: var(--color-brand-dark);
    background: color-mix(in srgb, var(--color-brand) 7%, transparent);
}

.button-ghost,
.button--ghost {
    color: currentColor;
    border-color: color-mix(in srgb, currentColor 42%, transparent);
    background: transparent;
}

.button-ghost:hover,
.button--ghost:hover {
    border-color: currentColor;
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.button-soft,
.button--soft {
    color: var(--color-brand-dark);
    border-color: color-mix(in srgb, var(--color-brand) 18%, transparent);
    background: color-mix(in srgb, var(--color-brand) 10%, var(--color-surface));
}

.button-soft:hover,
.button--soft:hover {
    border-color: color-mix(in srgb, var(--color-brand) 42%, transparent);
    background: color-mix(in srgb, var(--color-brand) 16%, var(--color-surface));
}

.button--small {
    min-height: 38px;
    padding: 0.56rem 0.78rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
}

.button--on-dark.button-secondary,
.button--on-dark.button--secondary {
    color: var(--color-heading);
    border-color: transparent;
    background: var(--color-surface);
}

.button--on-dark.button-ghost,
.button--on-dark.button--ghost {
    color: var(--color-hero-text);
}

.button-text,
.inline-link {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-brand-dark);
    font-weight: 800;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.18em;
}

.button-text::after,
.inline-link::after {
    content: "->";
}

.hero .button-secondary,
.image-cta .button-secondary {
    border-color: transparent;
    color: var(--color-heading);
    background: var(--color-surface);
}

.hero .button-ghost,
.image-cta .button-ghost {
    color: var(--color-hero-text);
}

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(360px, 48vw, 520px);
    padding-block: var(--hero-space-inner);
    color: var(--color-hero-text);
    background: var(--color-cta);
}

.hero--image-overlay {
    background-color: var(--color-cta);
    background-image: var(--hero-image);
    background-position: center;
    background-size: cover;
}

.hero__background,
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero__background {
    background-color: var(--color-cta);
    background-image: var(--hero-image);
    background-position: center;
    background-size: cover;
    filter: saturate(1.08) contrast(1.04);
}

.hero__overlay {
    z-index: -1;
    background:
        linear-gradient(
            90deg,
            rgb(4 9 14 / var(--hero-overlay-opacity, var(--default-hero-overlay-opacity))) 0%,
            rgb(4 9 14 / 0.72) 52%,
            rgb(4 9 14 / 0.58) 100%
        );
}

.hero__shell {
    display: grid;
    min-height: inherit;
    align-items: center;
}

.hero__content {
    display: grid;
    justify-items: start;
    width: min(100%, var(--hero-content-width));
    max-width: var(--hero-content-width);
    margin-inline: auto;
    padding-block: var(--space-lg);
    text-align: left;
}

.hero h1 {
    max-width: var(--hero-heading-width);
    color: var(--color-hero-text);
    font-size: clamp(2.25rem, 4.6vw, 4.4rem);
    line-height: 1.05;
}

.hero .lede {
    color: var(--color-hero-muted);
}

.hero .lede {
    max-width: 68ch;
}

.hero__actions {
    justify-content: flex-start;
    margin-top: var(--space-md);
}

.hero__tags + .hero__actions {
    margin-top: var(--space-lg);
}

.hero__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-xs);
    margin: var(--space-md) 0 0;
    padding: 0;
    list-style: none;
}

.hero__tags li {
    padding: 0.52rem 0.76rem;
    border: 1px solid color-mix(in srgb, var(--color-hero-text) 32%, transparent);
    border-radius: var(--radius-sm);
    color: var(--color-hero-text);
    background: color-mix(in srgb, var(--color-hero-text) 11%, transparent);
    font-size: 0.9rem;
    font-weight: 800;
    backdrop-filter: blur(10px);
}

.image-cta-section {
    padding-block: clamp(1.75rem, 3vw, 3rem);
}

.section--image-contrast {
    padding-block: clamp(1.75rem, 3vw, 3rem);
    border-top: 0;
}

.image-cta {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, var(--image-cta-content-width));
    min-height: clamp(220px, 20vw, 260px);
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2rem);
    overflow: hidden;
    padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem);
    border-radius: var(--radius-md);
    color: var(--color-hero-text);
    text-align: left;
    background-color: var(--color-cta);
    background-image: var(--image-cta-image);
    background-position: center;
    background-size: cover;
    box-shadow: var(--shadow-lift);
}

.image-cta::before {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--image-cta-image);
    background-position: center;
    background-size: cover;
    filter: saturate(1.08) contrast(1.04);
    content: "";
}

.image-cta__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            90deg,
            rgb(4 9 14 / var(--image-cta-overlay-opacity, var(--default-image-cta-overlay-opacity))) 0%,
            rgb(4 9 14 / 0.7) 56%,
            rgb(4 9 14 / 0.56) 100%
        );
}

.image-cta__content {
    display: grid;
    justify-items: start;
    gap: var(--space-xs);
    width: 100%;
    max-width: var(--image-cta-content-width);
    margin-inline: auto;
}

.image-cta__content > *,
.cta-panel__content > * {
    margin-block-end: 0;
}

.image-cta h2 {
    color: var(--color-hero-text);
}

.image-cta h2 {
    max-width: min(100%, 860px);
    font-size: clamp(1.5rem, 3vw, 2.35rem);
}

.image-cta p {
    max-width: 68ch;
    color: var(--color-hero-muted);
}

.image-cta__actions {
    justify-content: flex-start;
    margin-top: var(--space-sm);
}

.image-cta-section-full-bleed.section--image-contrast {
    padding-block: 0;
}

.image-cta--full-bleed {
    width: 100%;
    max-width: none;
    min-height: clamp(320px, 42vw, 480px);
    grid-template-columns: minmax(0, var(--image-cta-content-width));
    align-content: center;
    padding-block: clamp(4rem, 7vw, 5.5rem);
    padding-inline: max(1rem, calc((100vw - var(--shell-width)) / 2));
    border-radius: 0;
    box-shadow: none;
}

.image-cta--full-bleed h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.06;
}

.image-cta--full-bleed .image-cta__actions {
    justify-content: flex-start;
    margin-top: var(--space-sm);
}

.image-cta--stacked {
    grid-template-columns: minmax(0, var(--image-cta-content-width));
}

.image-cta--stacked .image-cta__actions {
    justify-content: flex-start;
    margin-top: var(--space-sm);
}

.image-cta-align-center {
    text-align: center;
}

.image-cta-align-center .image-cta__content {
    justify-items: center;
}

.image-cta-align-center h2,
.image-cta-align-center p {
    margin-inline: auto;
}

.image-cta-align-center .image-cta__actions {
    justify-content: center;
}

.media-card,
.split-media {
    margin: 0;
}

.media-card img,
.split-media img,
.image-placeholder {
    display: block;
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    object-fit: cover;
}

.media-card img,
.split-media img,
.split-media .image-placeholder {
    aspect-ratio: 4 / 3;
}

.image-placeholder {
    min-height: 240px;
    background: linear-gradient(135deg, var(--color-tint), var(--color-surface));
}

figcaption {
    margin-top: 0.65rem;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.section-header {
    width: min(100%, var(--wide-content-width));
    max-width: var(--wide-content-width);
    margin-inline: auto;
    margin-bottom: var(--space-xl);
    text-align: left;
}

.compact-header {
    margin-bottom: 1.25rem;
}

.section-header p {
    max-width: var(--content-width);
    color: var(--color-muted);
}

.section-header .section-actions {
    justify-content: flex-start;
}

.section-align-center .section-header {
    text-align: center;
}

.section-align-center .section-header p {
    margin-inline: auto;
}

.section-align-center .section-header .section-actions,
.section-align-center .faq-tabs {
    justify-content: center;
}

.intro-section,
.process-section,
.testimonials-section,
.service-area-section,
.map-section {
    background: var(--color-surface);
}

.intro-grid,
.faq-preview-grid,
.form-grid,
.map-grid,
.service-area-grid,
.social-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: start;
}

.intro-copy {
    color: var(--color-muted);
    font-size: 1.08rem;
}

.intro-grid-single {
    grid-template-columns: minmax(0, var(--content-width));
    justify-content: center;
    text-align: left;
}

.intro-grid-single .intro-lead,
.intro-grid-single .intro-copy {
    display: grid;
    justify-items: start;
    gap: var(--space-sm);
}

.intro-grid-single .intro-lead > *,
.intro-grid-single .intro-copy > * {
    margin-block-end: 0;
}

.intro-grid-single .section-actions {
    justify-content: flex-start;
    margin-top: var(--space-xs);
}

.intro-grid-single.intro-align-center {
    text-align: center;
}

.intro-grid-single.intro-align-center .intro-lead,
.intro-grid-single.intro-align-center .intro-copy {
    justify-items: center;
}

.intro-grid-single.intro-align-center .section-actions {
    justify-content: center;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
}

.card-grid-featured {
    grid-template-columns: 1.15fr 0.925fr 0.925fr;
}

.card-grid-decision {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.card-grid-value {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-section-benefit-card {
    background: var(--color-page);
}

.info-card,
.contact-card {
    min-height: 100%;
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.info-card p,
.contact-card p {
    color: var(--color-muted);
}

.card-icon {
    display: inline-block;
    width: 2rem;
    height: 0.35rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    background: var(--color-brand);
}

.service-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-height: 320px;
    border-top: 4px solid var(--color-brand);
}

.service-card h3 {
    min-height: 3.3rem;
    max-width: 20ch;
    font-size: clamp(1.18rem, 2vw, 1.45rem);
}

.service-card .card-label {
    margin-bottom: 0;
    color: var(--color-brand-dark);
}

.service-card .best-for {
    display: grid;
    min-height: 5.6rem;
    align-content: start;
    margin-block: 0;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    background: var(--color-tint);
    font-size: 0.95rem;
}

.service-card .best-for strong {
    display: block;
    margin-bottom: 0.15rem;
    color: var(--color-heading);
}

.service-card > p:not(.card-label):not(.best-for):not(.card-meta) {
    flex: 1;
    margin-block: 0;
}

.service-card .card__actions {
    margin-top: auto;
    padding-top: var(--space-xs);
}

.card-media {
    margin-bottom: var(--space-xs);
}

.service-card .card-media {
    margin-bottom: 0;
}

.card-media img,
.card-media.image-placeholder {
    aspect-ratio: 16 / 10;
    box-shadow: none;
}

.info-card.has-card-image {
    gap: var(--space-sm);
}

.benefit-card {
    display: grid;
    gap: var(--space-xs);
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
    background: linear-gradient(180deg, var(--color-surface), var(--color-page));
}

.benefit-card::before {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface));
    content: "";
}

.benefit-card .card-icon {
    background: var(--color-accent);
}

.benefit-card h3 {
    max-width: 18ch;
}

.profile-card {
    border-color: var(--color-border);
}

.card-meta {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-heading);
    font-size: 0.9rem;
    font-weight: 800;
}

.card-label {
    margin-bottom: var(--space-xs);
    color: var(--color-accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.inline-link {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    margin-top: var(--space-xs);
    color: var(--color-brand-dark);
    font-weight: 800;
    text-decoration-thickness: 2px;
}

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

.split-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.85fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}

.split-copy > p {
    max-width: 64ch;
    color: var(--color-muted);
}

.check-list {
    display: grid;
    gap: 0.65rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--color-heading);
    font-weight: 700;
}

.check-list li::before {
    position: absolute;
    left: 0;
    top: 0.65rem;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--color-accent);
    content: "";
}

.process-grid,
.stats-grid,
.testimonial-grid,
.team-grid,
.comparison-grid {
    display: grid;
    gap: var(--space-md);
}

.process-grid,
.testimonial-grid,
.team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.process-timeline .process-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.process-timeline .process-step-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.process-timeline .process-step-card p {
    flex: 1;
}

.stats-grid,
.comparison-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.process-step,
.stat-card,
.testimonial-card,
.team-card,
.comparison-card,
.faq-preview-list article {
    min-height: 100%;
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.process-decision .process-grid {
    grid-template-columns: 1fr;
    max-width: 920px;
}

.process-decision .process-step-card {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    column-gap: var(--space-md);
    align-items: start;
    padding: var(--space-md);
}

.process-decision .process-step-card h3,
.process-decision .process-step-card p {
    grid-column: 2;
}

.step-number {
    display: inline-flex;
    width: 2.4rem;
    height: 2.4rem;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-sm);
    border-radius: 999px;
    color: var(--color-on-brand);
    background: var(--color-brand);
    font-size: 0.86rem;
    font-weight: 800;
}

.process-step p,
.comparison-card p,
.comparison-card li {
    color: var(--color-muted);
}

.stat-card {
    display: grid;
    align-content: start;
    justify-items: start;
    text-align: left;
    background: var(--color-tint);
}

.stats-align-center .stat-card {
    justify-items: center;
    text-align: center;
}

.stat-card strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--color-heading);
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1;
}

.stat-card span {
    display: block;
    color: var(--color-heading);
    font-weight: 800;
}

.stat-card p {
    margin-top: 0.65rem;
    color: var(--color-muted);
}

.stats-inline .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stats-inline .stat-card {
    padding-block: var(--space-md);
    border: 0;
    border-radius: 0;
    border-left: 1px solid var(--color-border);
    background: transparent;
    box-shadow: none;
}

.stats-inline .stat-card:first-child {
    border-left: 0;
}

.trust-section {
    background: var(--color-page);
}

.trust-panel {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(1.75rem, 4vw, 3.25rem);
    padding: var(--space-xl);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-subtle);
}

.trust-copy p,
.trust-list p {
    color: var(--color-muted);
}

.trust-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--space-md);
}

.trust-list article {
    padding-left: 1rem;
    border-left: 4px solid var(--color-accent);
}

.trust-panel-media {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr);
    align-items: center;
}

.trust-panel-media .trust-copy {
    display: grid;
    gap: var(--space-sm);
}

.trust-panel-media .trust-copy > *,
.trust-panel-media .trust-list > * {
    margin-block-end: 0;
}

.trust-panel-media .trust-list {
    grid-template-columns: 1fr;
    margin-top: var(--space-sm);
}

.trust-media img,
.trust-media .image-placeholder {
    aspect-ratio: 4 / 3;
}

.testimonial-card {
    display: grid;
    margin: 0;
    gap: var(--space-md);
}

.testimonial-card blockquote {
    margin: 0;
    color: var(--color-heading);
    font-size: 1.08rem;
    font-weight: 700;
}

.testimonial-card figcaption {
    display: grid;
    gap: 0.15rem;
    margin: 0;
}

.testimonial-card span,
.team-card p,
.faq-preview-grid p,
.faq-preview-list p,
.service-area-grid p,
.social-panel p {
    color: var(--color-muted);
}

.testimonials-spotlight .testimonial-grid {
    grid-template-columns: 1.2fr 0.9fr 0.9fr;
}

.testimonials-spotlight .testimonial-card:first-child {
    color: var(--color-cta-text);
    background: var(--color-cta);
}

.testimonials-spotlight .testimonial-card:first-child blockquote,
.testimonials-spotlight .testimonial-card:first-child strong {
    color: var(--color-cta-text);
}

.testimonials-spotlight .testimonial-card:first-child span {
    color: var(--color-cta-muted);
}

.faq-preview-list {
    display: grid;
    gap: 1rem;
}

.team-card {
    overflow: hidden;
    padding: 0;
    border-radius: var(--radius-lg);
}

.team-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--color-tint);
}

.profile-placeholder {
    aspect-ratio: 4 / 3;
}

.team-card > div {
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-lg);
}

.team-card .card-label {
    width: fit-content;
    padding: 0.3rem 0.55rem;
    border-radius: var(--radius-sm);
    color: var(--color-brand-dark);
    background: var(--color-tint);
}

.area-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.area-list li {
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-heading);
    background: var(--color-surface);
    font-weight: 800;
}

.contact-form-copy {
    display: grid;
    align-content: start;
    gap: var(--space-sm);
}

.contact-form-copy > * {
    margin-block-end: 0;
}

.form-contact-methods {
    display: grid;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}

.form-contact-card {
    min-height: auto;
    padding: var(--space-md);
}

.contact-form-placeholder {
    display: grid;
    gap: var(--space-md);
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.contact-form-placeholder label {
    display: grid;
    gap: 0.4rem;
    color: var(--color-heading);
    font-weight: 800;
}

.contact-form-placeholder input,
.contact-form-placeholder textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.9rem 0.95rem;
    color: var(--color-muted);
    background: var(--color-page);
    resize: vertical;
}

.contact-form-placeholder button {
    width: fit-content;
}

/* ─── Adglow contact form ─── */

.cf-panel {
    background: rgba(11, 11, 16, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-lg, 16px);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.cf-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.cf-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cf-field label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.cf-optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.7;
}

.cf-field input,
.cf-field select,
.cf-field textarea {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    color: var(--adglow-white);
    padding: 0.75rem 0.9rem;
    font-size: 0.9375rem;
    font-family: inherit;
    outline: none;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.cf-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2302B7D9' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

.cf-field select option {
    background: #0d0d14;
    color: var(--adglow-white);
}

.cf-field input::placeholder,
.cf-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.25);
}

.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
    border-color: rgba(2, 183, 217, 0.55);
    box-shadow: 0 0 0 3px rgba(2, 183, 217, 0.08);
}

.cf-field textarea {
    resize: vertical;
    min-height: 130px;
    line-height: 1.6;
}

.cf-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.cf-note {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.35);
    margin: 0;
    line-height: 1.5;
}

.cf-note a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.2);
    transition: color 0.2s ease;
}

.cf-note a:hover {
    color: #02B7D9;
}

/* Required field marker */
.cf-required {
    color: #f0166a;
    margin-left: 0.2em;
}

/* Honeypot — visually hidden, not display:none (that tips off bots) */
.cf-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Consent checkbox row */
.cf-consent {
    margin-top: 0.25rem;
}

.cf-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.55;
}

.cf-consent-label input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 0.1rem;
    accent-color: #02B7D9;
    cursor: pointer;
}

.cf-consent-label a {
    color: rgba(2, 183, 217, 0.85);
    text-decoration: underline;
    text-decoration-color: rgba(2, 183, 217, 0.35);
}

.cf-consent-label a:hover {
    color: #02B7D9;
}

/* Turnstile container */
.cf-turnstile {
    margin-top: 0.25rem;
}

/* Flash messages */
.cf-flash {
    border-radius: 8px;
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 1.25rem;
}

.cf-flash strong {
    display: block;
    margin-bottom: 0.2rem;
    font-weight: 700;
}

.cf-flash--success {
    background: rgba(164, 203, 10, 0.1);
    border: 1px solid rgba(164, 203, 10, 0.35);
    color: #c8e636;
}

.cf-flash--error {
    background: rgba(240, 22, 106, 0.09);
    border: 1px solid rgba(240, 22, 106, 0.30);
    color: rgba(255, 255, 255, 0.75);
}

.cf-flash--error a {
    color: #02B7D9;
    text-decoration: underline;
}

@media (max-width: 640px) {
    .cf-row {
        grid-template-columns: 1fr;
    }
}

.map-placeholder {
    display: grid;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-muted);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.map-placeholder img,
.map-placeholder .image-placeholder {
    aspect-ratio: 4 / 3;
    min-height: 320px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.map-placeholder figcaption {
    display: grid;
    gap: 0.2rem;
    margin: 0;
    padding: var(--space-md);
}

.map-placeholder strong {
    color: var(--color-heading);
    font-size: 1.25rem;
}

.social-panel {
    grid-template-columns: minmax(0, var(--content-width));
    align-items: start;
    gap: var(--space-sm);
    padding-block: 0;
}

.social-panel > div {
    display: grid;
    gap: var(--space-sm);
}

.social-panel > div > * {
    margin-block-end: 0;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.social-links a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-heading);
    background: var(--color-surface);
    font-weight: 800;
    text-decoration: none;
}

.comparison-card ul {
    display: grid;
    gap: var(--space-xs);
    margin-bottom: 0;
    padding-inline-start: 1.05rem;
}

.comparison-rows .comparison-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.comparison-rows .comparison-card {
    display: grid;
    gap: var(--space-sm);
    align-content: start;
    min-height: 100%;
    padding: var(--space-lg);
    border-top: 4px solid var(--color-accent);
    background: linear-gradient(180deg, var(--color-surface), var(--color-page));
}

.comparison-rows .comparison-card .card-label {
    width: fit-content;
    padding: 0.32rem 0.55rem;
    border-radius: var(--radius-sm);
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
}

.comparison-rows .comparison-card .card-label,
.comparison-rows .comparison-card h3,
.comparison-rows .comparison-card p {
    margin: 0;
}

.comparison-rows .comparison-card h3 {
    max-width: 18ch;
    font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.comparison-rows .comparison-card ul {
    margin-top: var(--space-xs);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
}

.comparison-guide .shell {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.75fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
}

.comparison-guide .section-header {
    grid-column: 1;
    margin-bottom: 0;
    margin-inline: 0;
    text-align: left;
}

.comparison-guide .section-header p {
    margin-inline: 0;
}

.comparison-guide .section-header .section-actions {
    justify-content: flex-start;
}

.comparison-guide .comparison-grid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-sm);
}

.comparison-visual {
    grid-column: 2;
    margin: 0;
}

.comparison-visual img,
.comparison-visual.image-placeholder {
    aspect-ratio: 4 / 3;
    max-height: 360px;
}

.comparison-guide .comparison-card {
    border-left: 4px solid var(--color-brand);
}

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

.story-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    gap: clamp(2rem, 6vw, 5rem);
}

.story-grid-media {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr);
    align-items: center;
}

.story-grid-media .story-heading,
.story-grid-media .story-copy {
    display: grid;
    gap: var(--space-sm);
}

.story-grid-media .story-heading > *,
.story-grid-media .story-copy > * {
    margin-block-end: 0;
}

.story-grid-media .story-copy {
    margin-top: var(--space-sm);
}

.story-grid-media .section-actions {
    margin-top: var(--space-xs);
}

.story-media img,
.story-media .image-placeholder {
    aspect-ratio: 4 / 3;
}

.story-copy {
    color: var(--color-muted);
    font-size: 1.08rem;
}

.story-grid-single {
    grid-template-columns: minmax(0, var(--content-width));
}

.story-grid-single .story-heading,
.story-grid-single .story-copy {
    display: grid;
    gap: var(--space-sm);
}

.story-grid-single .story-heading > *,
.story-grid-single .story-copy > * {
    margin-block-end: 0;
}

.story-grid-single .story-copy {
    margin-top: var(--space-sm);
}

.story-grid-single .section-actions {
    margin-top: var(--space-xs);
}

.story-copy blockquote {
    margin: 2rem 0 0;
    padding: 1.25rem;
    border-left: 4px solid var(--color-accent);
    color: var(--color-heading);
    background: var(--color-page);
}

.story-grid-single .story-copy blockquote {
    margin-top: var(--space-xs);
}

.story-copy blockquote p {
    color: var(--color-heading);
    font-weight: 800;
}

.story-copy cite {
    color: var(--color-muted);
    font-style: normal;
}

.timeline-section {
    background: var(--color-page);
}

.timeline-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: journey;
}

.timeline-list li {
    position: relative;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-brand);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.timeline-list li::before {
    display: inline-flex;
    width: 2.4rem;
    height: 2.4rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--color-on-brand);
    background: var(--color-brand);
    font-size: 0.85rem;
    font-weight: 800;
    counter-increment: journey;
    content: counter(journey);
}

.timeline-list span {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    padding: 0.32rem 0.55rem;
    border-radius: var(--radius-sm);
    color: var(--color-brand-dark);
    background: var(--color-tint);
    font-size: 0.82rem;
    font-weight: 800;
}

.timeline-list p {
    max-width: 62ch;
    color: var(--color-muted);
}

.category-nav-section {
    padding-block: var(--space-md) 0;
    background: var(--color-page);
}

.category-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.category-nav a {
    padding: 0.62rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-heading);
    background: var(--color-surface);
    font-weight: 800;
    text-decoration: none;
}

.category-nav a:hover {
    border-color: var(--color-brand);
    color: var(--color-brand-dark);
}

.cta-section {
    padding-block: clamp(1.75rem, 3vw, 3rem);
}

.cta-band,
.cta-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 3vw, 2rem);
    padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem);
    border-radius: var(--radius-lg);
    color: var(--color-cta-text);
    background: var(--color-cta);
    box-shadow: var(--shadow-lift);
}

.cta-panel__content {
    display: grid;
    gap: var(--space-xs);
    max-width: 900px;
}

.cta-band .action-row,
.cta-panel__actions {
    justify-content: flex-end;
    margin-top: 0;
}

.cta-band h2 {
    color: var(--color-cta-text);
}

.cta-band h2 {
    max-width: min(100%, 880px);
    font-size: clamp(1.5rem, 3vw, 2.35rem);
}

.cta-band p {
    max-width: 68ch;
    color: var(--color-cta-muted);
}

.cta-dark-band {
    background: var(--color-cta);
}

.cta-brand-band {
    background: linear-gradient(135deg, var(--color-brand), var(--color-brand-dark));
}

.cta-light-panel {
    border: 1px solid var(--color-border);
    color: var(--color-heading);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.cta-light-panel h2 {
    color: var(--color-heading);
}

.cta-light-panel p {
    color: var(--color-muted);
}

.cta-split-cta {
    grid-template-columns: minmax(0, 1fr) max-content;
    background: linear-gradient(135deg, var(--color-brand), var(--color-brand-dark));
}

.cta-contact-strip {
    border-radius: 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-heading);
    background: var(--color-tint);
    box-shadow: none;
}

.cta-contact-strip {
    padding-block: clamp(2rem, 3vw, 2.5rem);
}

.cta-contact-strip h2 {
    color: var(--color-heading);
}

.cta-contact-strip p {
    color: var(--color-muted);
}

.cta-simple-inline,
.cta-inline-cta {
    grid-template-columns: minmax(0, var(--content-width));
    align-items: flex-start;
    padding: 0;
    color: var(--color-heading);
    background: transparent;
    box-shadow: none;
}

.cta-simple-inline .action-row,
.cta-inline-cta .action-row {
    justify-content: flex-start;
    margin-top: var(--space-md);
}

.cta-simple-inline h2,
.cta-inline-cta h2 {
    color: var(--color-heading);
}

.cta-simple-inline .eyebrow,
.cta-inline-cta .eyebrow {
    color: var(--color-eyebrow);
}

.cta-simple-inline p,
.cta-inline-cta p {
    color: var(--color-muted);
}

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

.contact-card a {
    color: var(--color-brand-dark);
    font-weight: 800;
}

.faq-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-xs);
    margin-top: var(--space-md);
}

.faq-tab {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0.62rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-heading);
    background: var(--color-surface);
    font-weight: 800;
    line-height: 1.1;
    cursor: pointer;
}

.faq-tab:hover,
.faq-tab:focus-visible {
    border-color: var(--color-brand);
    color: var(--color-brand-dark);
}

.faq-tab[aria-selected="true"],
.faq-tab.is-active {
    border-color: var(--color-brand);
    color: var(--color-on-brand);
    background: var(--color-brand);
    box-shadow: var(--button-shadow);
}

.faq-list,
.faq-group-list,
.text-stack {
    display: grid;
    gap: var(--space-md);
}

.faq-group {
    display: grid;
    gap: var(--space-md);
}

.faq-group[data-faq-panel].is-active {
    display: grid;
    margin-top: 0;
}

.faq-group[hidden],
.faq-group[data-faq-panel][hidden] {
    display: none;
}

.faq-group + .faq-group {
    margin-top: var(--space-xl);
}

.faq-group[data-faq-panel] + .faq-group[data-faq-panel] {
    margin-top: 0;
}

.faq-group > h2 {
    margin-bottom: 0;
    font-size: 1.6rem;
}

.faq-group > p {
    max-width: 68ch;
    color: var(--color-muted);
}

.faq-item,
.text-block {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-subtle);
}

.faq-item {
    overflow: hidden;
    padding: 0;
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    color: var(--color-heading);
    font-weight: 800;
    cursor: pointer;
}

.faq-item summary::after {
    flex: 0 0 auto;
    width: 0.65rem;
    height: 0.65rem;
    border-right: 2px solid var(--color-brand);
    border-bottom: 2px solid var(--color-brand);
    transform: rotate(45deg);
    content: "";
}

.faq-item[open] summary::after {
    transform: rotate(225deg);
}

.faq-item p {
    padding: 0 var(--space-lg) var(--space-md);
    color: var(--color-muted);
}

.text-block {
    padding: 1.25rem;
}

.text-section-legal {
    background: var(--color-page);
    text-align: left;
}

.text-section-legal .text-stack {
    gap: var(--space-lg);
}

.text-section-legal .text-block {
    padding: 40px;
    border-color: color-mix(in srgb, var(--color-border) 72%, transparent);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: none;
}

.text-section-legal .text-block h2 {
    max-width: 24ch;
}

.text-section-legal .text-block p {
    max-width: 72ch;
}

.text-block h2 {
    font-size: 1.35rem;
}

.text-block p,
.text-block li {
    color: var(--color-muted);
}

.muted {
    color: var(--color-muted);
    font-size: 0.95rem;
}

/* ==========================================================================
   Phase 4 — Adglow header, navigation, buttons, and footer
   ========================================================================== */

/* --- Header: dark glass --- */
.site-header {
    background: rgba(7, 16, 31, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.header-brand {
    color: var(--adglow-white);
}

.header-brand__name {
    color: var(--adglow-white);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* --- Nav links: light text on dark, blue hover/active --- */
.site-nav a {
    color: rgba(232, 237, 247, 0.65);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
}

.site-nav a:hover {
    color: var(--adglow-white);
    background: rgba(31, 94, 255, 0.14);
}

.site-nav a[aria-current="page"] {
    color: var(--adglow-blue-bright);
    background: rgba(31, 94, 255, 0.16);
}

/* --- CTA button in header: pill shape --- */
.header-cta.button {
    border-radius: var(--radius-pill);
    padding-inline: 1.1rem;
    font-size: 0.875rem;
}

/* --- Primary button: gradient + pill sitewide --- */
.button-primary,
.button--primary {
    background: var(--btn-primary-bg);
    border-radius: var(--radius-pill);
}

.button-primary:hover,
.button--primary:hover {
    background: linear-gradient(135deg, var(--color-brand-dark) 0%, var(--adglow-blue) 100%);
    box-shadow: var(--glow-blue-strong);
}

/* --- Secondary button: pill sitewide --- */
.button-secondary,
.button--secondary {
    border-radius: var(--radius-pill);
}

/* --- Footer: dark digital grid overlay --- */
.site-footer {
    position: relative;
    overflow: hidden;
    border-top: 2px solid rgba(2, 183, 217, 0.55);
    box-shadow: 0 -4px 32px rgba(2, 183, 217, 0.07);
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--bg-grid-image);
    background-size: var(--bg-grid-size);
    opacity: 0.45;
    pointer-events: none;
}

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

/* --- Footer tagline --- */
.footer-tagline {
    margin: 0;
    max-width: 30ch;
    color: var(--color-footer-muted);
    font-size: 0.875rem;
    line-height: 1.6;
}

/* --- Footer social links --- */
.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: var(--space-xs);
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.footer-social a:hover {
    border-color: var(--adglow-blue);
    color: var(--adglow-white);
    background: rgba(31, 94, 255, 0.14);
}

/* --- Footer contact icons --- */
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.footer-contact-item--indent {
    padding-left: calc(13px + 0.5rem);
}

.footer-contact-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-top: 0.15em;
    color: var(--color-eyebrow);
}

/* --- Footer nav bullet dots --- */
.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav ul li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.footer-nav ul li::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-eyebrow);
    opacity: 0.7;
}

/* --- Footer bottom border --- */
.footer-bottom {
    border-top-color: rgba(255, 255, 255, 0.10);
}

/* ==========================================================================
   Phase 5 — Homepage sections
   ========================================================================== */

/* --- Hero: no-image dark digital background --- */
.hero.no-media {
    min-height: clamp(480px, 58vw, 700px);
}

.hero.no-media .hero__background {
    background: linear-gradient(150deg, #03050d 0%, #07101f 55%, #0a1022 100%);
}

.hero.no-media .hero__overlay {
    background:
        radial-gradient(ellipse at 78% 60%, rgba(31, 94, 255, 0.16), transparent 44%),
        rgba(3, 5, 13, 0.04);
}

/* --- Stats strip --- */
.stats-section.stats-inline {
    background: var(--color-surface);
    padding-block: var(--section-space-sm);
}

.stats-section.stats-inline .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.stats-section.stats-inline .stat-card {
    background: transparent;
    border: none;
    border-top: 3px solid rgba(31, 94, 255, 0.28);
    border-radius: 0;
    box-shadow: none;
    padding: var(--space-md) 0;
    align-items: flex-start;
}

.stats-section.stats-inline .stat-card strong {
    color: #02B7D9;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    letter-spacing: -0.04em;
}

.stats-section.stats-inline .stat-card span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--adglow-text-dark);
    font-weight: 700;
}

.stats-section.stats-inline .stat-card p {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* --- Services overview: 3-column grid --- */
.card-section-service-card {
    background: var(--color-tint);
}

.card-grid-grid .service-card {
    padding: var(--space-xl);
    min-height: 200px;
    border-top-width: 3px;
    box-shadow: none;
    transition: var(--card-transition);
    display: flex;
    flex-direction: column;
}

.card-grid-grid .service-card:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-3px);
    border-top-color: var(--adglow-blue);
}

.card-grid-grid .service-card .card-label {
    color: var(--adglow-blue);
    font-size: 0.72rem;
    letter-spacing: 0.09em;
}

.card-grid-grid .service-card h3 {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 700;
    min-height: auto;
    margin-block: var(--space-2xs) var(--space-xs);
}

.card-grid-grid .service-card > p:not(.best-for):not(.card-label) {
    font-size: 0.9rem;
    line-height: 1.65;
    flex: 1;
    color: var(--color-muted);
}

.card-grid-grid .service-card > p.best-for,
.card-grid-grid .service-card > p.card-label {
    flex: none;
}

/* --- Campaign management: dark split panel --- */
#campaign-mgmt-feature {
    background: var(--adglow-ink);
    color: var(--adglow-text-light);
    position: relative;
    overflow: hidden;
    border-top: none;
}

/* grid removed — ambient canvas handles site-wide grid */

#campaign-mgmt-feature .split-grid {
    position: relative;
    z-index: 1;
}

#campaign-mgmt-feature .eyebrow {
    color: var(--color-eyebrow);
}

#campaign-mgmt-feature h2 {
    color: var(--adglow-white);
}

#campaign-mgmt-feature .split-copy > p:not(.eyebrow) {
    color: rgba(232, 237, 247, 0.78);
}

#campaign-mgmt-feature .check-list li {
    color: rgba(232, 237, 247, 0.88);
}

#campaign-mgmt-feature .check-list li::before {
    background: var(--adglow-blue);
}

#campaign-mgmt-feature .split-media .image-placeholder {
    background: linear-gradient(135deg, rgba(31, 94, 255, 0.14) 0%, rgba(3, 5, 13, 0.55) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    min-height: 320px;
    border-radius: var(--radius-lg);
}

#campaign-mgmt-feature .button--secondary {
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--adglow-text-light);
}

#campaign-mgmt-feature .button--secondary:hover {
    border-color: var(--adglow-blue);
    background: rgba(31, 94, 255, 0.16);
    color: var(--adglow-white);
}

/* --- Platform chips section --- */
.platform-chips-section {
    background: var(--adglow-navy);
    color: var(--adglow-text-light);
    position: relative;
    overflow: hidden;
    border-top: none;
}

/* grid removed — ambient canvas handles site-wide grid */

.platform-chips-section .shell {
    position: relative;
    z-index: 1;
}

.platform-chips-section .section-header {
    margin-bottom: var(--space-2xl);
    max-width: 56ch;
}

.platform-chips-section .section-header h2 {
    color: var(--adglow-white);
}

.platform-chips-section .section-header p:not(.eyebrow) {
    color: rgba(232, 237, 247, 0.72);
}

.platform-chips-section .eyebrow {
    color: var(--color-eyebrow);
}

.chip-groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.chip-group__heading {
    margin: 0 0 var(--space-md);
    color: rgba(232, 237, 247, 0.46);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.platform-chip {
    padding: 0.46rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-pill);
    color: rgba(232, 237, 247, 0.88);
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: default;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.platform-chip:hover {
    border-color: var(--adglow-blue);
    background: rgba(31, 94, 255, 0.18);
    color: var(--adglow-white);
}

.platform-chips-section .section-actions {
    justify-content: flex-start;
    margin-top: 0;
}

/* --- Why Adglow: light section following dark --- */
.card-section-benefit-card {
    border-top: none;
}

.benefit-card {
    transition: var(--card-transition);
}

.benefit-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card);
    border-color: rgba(31, 94, 255, 0.26);
}

.benefit-card .card-label {
    color: var(--adglow-blue);
}

/* --- Regional coverage: dark section --- */
.card-section-region-chip {
    background: var(--adglow-black);
    color: var(--adglow-text-light);
    position: relative;
    overflow: hidden;
    border-top: none;
}

/* grid removed — ambient canvas handles site-wide grid */

.card-section-region-chip .shell {
    position: relative;
    z-index: 1;
}

.card-section-region-chip .eyebrow {
    color: var(--color-eyebrow);
}

.card-section-region-chip .section-header h2 {
    color: var(--adglow-white);
}

.card-section-region-chip .section-header p:not(.eyebrow) {
    color: rgba(232, 237, 247, 0.72);
}

#regional-coverage .card-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.card-grid-compact .region-chip {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: var(--space-md);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
    min-height: auto;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.card-grid-compact .region-chip:hover {
    border-color: var(--adglow-blue);
    background: rgba(31, 94, 255, 0.09);
}

.card-grid-compact .region-chip .card-label {
    color: var(--adglow-white);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0;
}

.card-grid-compact .region-chip > p {
    color: rgba(232, 237, 247, 0.50);
    font-size: 0.78rem;
    margin: 0;
}

/* --- Brand experience: text chip grid --- */
.card-section-brand-chip {
    background: var(--color-surface);
    border-top: none;
}

.card-section-brand-chip .section-header {
    text-align: center;
    max-width: 56ch;
    margin-inline: auto;
    margin-bottom: var(--space-2xl);
}

#brand-experience .card-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-sm);
}

.card-grid-compact .brand-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: none;
    min-height: auto;
    text-align: center;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.card-grid-compact .brand-chip:hover {
    border-color: rgba(31, 94, 255, 0.26);
    background: rgba(31, 94, 255, 0.04);
}

.card-grid-compact .brand-chip .card-label {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--adglow-text-dark);
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0;
    white-space: nowrap;
}

/* --- Final CTA: dark digital when no image --- */
.image-cta:not(.has-media) {
    background: var(--bg-dark-digital);
}

/* grid removed — ambient canvas handles site-wide grid */

.image-cta:not(.has-media) .image-cta__overlay {
    background:
        radial-gradient(ellipse at 20% 60%, rgba(31, 94, 255, 0.22), transparent 44%),
        rgba(3, 5, 13, 0.10);
}

/* ==========================================================================
   Phase 5A — Dark-first visual overhaul: ambient overlay, hero wordmark,
   dark sections, glassmorphism cards, accent bars, scan animation
   ========================================================================== */

/* ---- Ambient canvas: SINGLE grid + SINGLE scanline, always behind all content ----
   z-index: -1 puts this below all body flow content; html provides #0b0b10 base.
   ---- */
.adglow-ambient {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

/* Single grid: 100px cyan, radial mask so edges dissolve */
.adglow-ambient::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(2, 183, 217, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2, 183, 217, 0.09) 1px, transparent 1px);
    background-size: 100px 100px;
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 35%, black 0%, transparent 100%);
    mask-image: radial-gradient(ellipse 90% 80% at 50% 35%, black 0%, transparent 100%);
}

/* Single scanline: 1px horizontal gradient, moves vertically */
.adglow-ambient::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    top: 5%;
    background: linear-gradient(90deg, transparent 5%, rgba(2, 183, 217, 0.30) 50%, transparent 95%);
    animation: ambientScan 14s ease-in-out infinite;
}

@keyframes ambientScan {
    0%,  100% { opacity: 0; top: 5%; }
    12%        { opacity: 0.9; }
    88%        { opacity: 0.9; }
    50%        { top: 90%; }
}

@media (prefers-reduced-motion: reduce) {
    .adglow-ambient::after { animation: none; opacity: 0; }
}

/* ---- Global eyebrow colour — p.eyebrow beats .section-header p (same specificity, later position) ---- */
p.eyebrow,
.eyebrow {
    color: var(--color-eyebrow);
}

/* ---- Hero: Mexico-style large ghosted wordmark + centred layout ---- */
.hero__brand-display {
    text-align: center;
    position: relative;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.hero__wordmark {
    display: block;
    font-family: var(--font-family-base);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 0.88;
    font-size: clamp(5rem, 18vw, 14rem);
    color: rgba(232, 237, 247, 0.09);
    text-shadow:
        0 0 60px rgba(55, 161, 255, 0.38),
        0 0 160px rgba(55, 161, 255, 0.16);
}

/* Home hero centred layout */
#home-hero {
    min-height: clamp(660px, 90vh, 920px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#home-hero .hero__shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xl);
    padding-block: clamp(3rem, 8vw, 6rem);
    width: 100%;
    position: relative;
    z-index: 2;
}

#home-hero .hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 660px;
    text-align: center;
    gap: var(--space-md);
    position: relative;
    z-index: 2;
}

#home-hero .eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    margin-bottom: 0;
}

#home-hero h1 {
    font-size: clamp(1.9rem, 4vw, 3.2rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--adglow-white);
    max-width: 20ch;
    margin: 0;
}

#home-hero .lede {
    color: rgba(232, 237, 247, 0.62);
    max-width: 52ch;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

#home-hero .hero__actions {
    justify-content: center;
    margin-top: var(--space-sm);
}

/* hero overflow: contain glow effects */
#home-hero {
    overflow: hidden;
}

/* ---- Stats: dark data strip override ---- */
.stats-section.stats-inline {
    background: var(--adglow-ink);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding-block: var(--section-space);
}

.stats-section.stats-inline .stat-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 3px solid rgba(55, 161, 255, 0.50);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    align-items: flex-start;
}

.stats-section.stats-inline .stat-card strong {
    font-size: clamp(2.4rem, 5vw, 3.8rem);
}

.stats-section.stats-inline .stat-card span {
    color: rgba(232, 237, 247, 0.50);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 700;
}

/* ---- Services: dark glassmorphism cards with accent bars ---- */
.card-section-service-card {
    background: var(--adglow-navy);
    border-top: none;
}

.card-grid-grid .service-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-top-width: 3px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.card-grid-grid .service-card:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045));
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.40), 0 0 40px rgba(31, 94, 255, 0.14);
}

.card-grid-grid .service-card h3 {
    color: var(--adglow-white);
}

.card-grid-grid .service-card > p {
    color: rgba(232, 237, 247, 0.62);
}

/* Accent-bar colour per card: Phase 5D exact colours */
.card-grid-grid .service-card:nth-child(1) { border-top-color: #02B7D9; }
.card-grid-grid .service-card:nth-child(2) { border-top-color: #BC0A4C; }
.card-grid-grid .service-card:nth-child(3) { border-top-color: #A4CB0A; }
.card-grid-grid .service-card:nth-child(4) { border-top-color: #DF8502; }
.card-grid-grid .service-card:nth-child(5) { border-top-color: #02B7D9; }
.card-grid-grid .service-card:nth-child(6) { border-top-color: #BC0A4C; }

/* ---- Campaign management dark panel: enhanced ---- */
#campaign-mgmt-feature {
    border-top: none;
}

/* ---- Platform chips: grid lines removed from section ::before (ambient handles it) ---- */
.platform-chips-section {
    background: var(--adglow-ink);
}

/* ---- Why Adglow: dark cards with accent bars ---- */
.card-section-benefit-card {
    background: var(--adglow-navy);
    border-top: none;
}

.benefit-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-top-width: 3px;
}

.benefit-card:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.38), 0 0 32px rgba(31, 94, 255, 0.12);
}

.benefit-card:nth-child(1) { border-top-color: #02B7D9; }
.benefit-card:nth-child(2) { border-top-color: #BC0A4C; }
.benefit-card:nth-child(3) { border-top-color: #A4CB0A; }
.benefit-card:nth-child(4) { border-top-color: #DF8502; }
.benefit-card:nth-child(5) { border-top-color: #02B7D9; }

.benefit-card h3 {
    color: var(--adglow-white);
}

.benefit-card .card-label {
    color: var(--adglow-blue-bright);
}

.benefit-card p {
    color: rgba(232, 237, 247, 0.65);
}

/* ---- Regional coverage: consistent with dark system ---- */
.card-section-region-chip {
    background: var(--adglow-black);
}

/* ---- Brand chips: dark panel, light text fix ---- */
.card-section-brand-chip {
    background: var(--adglow-panel);
    border-top: none;
}

.card-grid-compact .brand-chip {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
}

.card-grid-compact .brand-chip:hover {
    border-color: var(--adglow-blue);
    background: rgba(31, 94, 255, 0.10);
}

.card-grid-compact .brand-chip .card-label {
    color: rgba(232, 237, 247, 0.78);
}

/* ---- Final CTA: reinforced dark grid ---- */
.image-cta-section.section--image-contrast {
    border-top: none;
}

/* ---- Section separator: none between dark sections ---- */
.stats-section.stats-inline,
.card-section-service-card,
.card-section-benefit-card,
.card-section-region-chip,
.card-section-brand-chip,
.platform-chips-section {
    border-top: none;
}

/* ---- Increased section vertical space (generous Mexico-like rhythm) ---- */
#home-hero + .section,
.card-section-service-card,
#campaign-mgmt-feature,
.platform-chips-section,
.card-section-benefit-card,
#regional-coverage,
#brand-experience {
    padding-block: var(--section-space-lg);
}

/* ==========================================================================
   Phase 5B — Continuous canvas, thin scanline, card energy, interactions
   ========================================================================== */

/* Phase 5B site background + ambient overrides removed — theme.css + Phase 5A block handle these */

/* ---- Homepage: transparent sections → continuous #0b0b10 canvas ---- */
.stats-section.stats-inline,
.card-section-service-card,
.platform-chips-section,
.card-section-benefit-card,
.card-section-region-chip,
.card-section-brand-chip {
    background: transparent;
}

/* Campaign feature: very faint dark veil only */
#campaign-mgmt-feature {
    background: rgba(0, 0, 0, 0.20);
}

/* ---- Hero wordmark: white, dominant ---- */
.hero__wordmark {
    font-size: clamp(6rem, 22vw, 18rem);
    color: rgba(255, 255, 255, 0.82);
    -webkit-text-stroke: 0;
    text-shadow:
        0 0 60px  rgba(2, 183, 217, 0.28),
        0 0 160px rgba(2, 183, 217, 0.12);
}

.hero__subline {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: rgba(232, 237, 247, 0.28);
    margin: 0.55rem 0 0;
    text-align: center;
}

/* Phase 5B hero scanline removed — single ambient scanline handles this */

/* ---- Layout: alternating left-aligned headers for visual asymmetry ---- */
.card-section-service-card .section-header,
.platform-chips-section .section-header,
.card-section-region-chip .section-header {
    text-align: left;
    max-width: 56ch;
    margin-inline: 0;
}

/* ---- Service card hover glows: exact Phase 5D accent colours ---- */
.card-grid-grid .service-card:nth-child(1):hover {
    border-color: rgba(2, 183, 217, 0.60);
    box-shadow: 0 28px 80px rgba(0,0,0,0.44), 0 0 44px rgba(2, 183, 217, 0.24), inset 0 1px 0 rgba(2, 183, 217, 0.25);
}
.card-grid-grid .service-card:nth-child(2):hover {
    border-color: rgba(188, 10, 76, 0.60);
    box-shadow: 0 28px 80px rgba(0,0,0,0.44), 0 0 44px rgba(188, 10, 76, 0.24), inset 0 1px 0 rgba(188, 10, 76, 0.25);
}
.card-grid-grid .service-card:nth-child(3):hover {
    border-color: rgba(164, 203, 10, 0.55);
    box-shadow: 0 28px 80px rgba(0,0,0,0.44), 0 0 44px rgba(164, 203, 10, 0.20), inset 0 1px 0 rgba(164, 203, 10, 0.22);
}
.card-grid-grid .service-card:nth-child(4):hover {
    border-color: rgba(223, 133, 2, 0.60);
    box-shadow: 0 28px 80px rgba(0,0,0,0.44), 0 0 44px rgba(223, 133, 2, 0.24), inset 0 1px 0 rgba(223, 133, 2, 0.25);
}
.card-grid-grid .service-card:nth-child(5):hover {
    border-color: rgba(2, 183, 217, 0.60);
    box-shadow: 0 28px 80px rgba(0,0,0,0.44), 0 0 44px rgba(2, 183, 217, 0.24), inset 0 1px 0 rgba(2, 183, 217, 0.25);
}
.card-grid-grid .service-card:nth-child(6):hover {
    border-color: rgba(188, 10, 76, 0.60);
    box-shadow: 0 28px 80px rgba(0,0,0,0.44), 0 0 44px rgba(188, 10, 76, 0.24), inset 0 1px 0 rgba(188, 10, 76, 0.25);
}

/* ---- Benefit card hover glows: exact Phase 5D accent colours ---- */
.benefit-card:nth-child(1):hover { box-shadow: 0 20px 64px rgba(0,0,0,0.40), 0 0 40px rgba(2, 183, 217, 0.28); }
.benefit-card:nth-child(2):hover { box-shadow: 0 20px 64px rgba(0,0,0,0.40), 0 0 40px rgba(188, 10, 76, 0.28); }
.benefit-card:nth-child(3):hover { box-shadow: 0 20px 64px rgba(0,0,0,0.40), 0 0 40px rgba(164, 203, 10, 0.22); }
.benefit-card:nth-child(4):hover { box-shadow: 0 20px 64px rgba(0,0,0,0.40), 0 0 40px rgba(223, 133, 2, 0.28); }
.benefit-card:nth-child(5):hover { box-shadow: 0 20px 64px rgba(0,0,0,0.40), 0 0 40px rgba(188, 10, 76, 0.28); }

/* ---- Stat card accent bars: exact Phase 5D colours ---- */
.stats-section.stats-inline .stat-card:nth-child(1) { border-top-color: var(--adglow-cyan); }
.stats-section.stats-inline .stat-card:nth-child(2) { border-top-color: var(--adglow-magenta); }
.stats-section.stats-inline .stat-card:nth-child(3) { border-top-color: var(--adglow-lime); }
.stats-section.stats-inline .stat-card:nth-child(4) { border-top-color: var(--adglow-amber); }
.stats-section.stats-inline .stat-card:nth-child(5) { border-top-color: var(--adglow-cyan); }

/* ---- Platform chip hover ---- */
.platform-chip:hover {
    border-color: var(--adglow-cyan);
    background: rgba(2, 183, 217, 0.10);
    color: var(--adglow-white);
    box-shadow: 0 0 14px rgba(2, 183, 217, 0.24);
}

/* ---- Region chip hover ---- */
.card-grid-compact .region-chip:hover {
    border-color: var(--adglow-cyan);
    background: rgba(2, 183, 217, 0.07);
    box-shadow: 0 0 20px rgba(2, 183, 217, 0.16);
}

/* ---- Brand chip hover ---- */
.card-grid-compact .brand-chip:hover {
    border-color: var(--adglow-cyan);
    background: rgba(2, 183, 217, 0.08);
    box-shadow: 0 0 14px rgba(2, 183, 217, 0.16);
}

/* ---- Scroll reveal animation ---- */
.will-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.will-reveal.is-revealed {
    opacity: 1;
    transform: none;
}

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

/* ==========================================================================
   Phase 5C — Mexico reference integration
   Exact accent colours, ambient fix, scanline style, Space Grotesk,
   intel-module / glow-border / status-badge / signal-line / marker-* patterns.
   ========================================================================== */

/* Phase 5C ambient z-index/grid/scanline overrides removed — consolidated in Phase 5A block */

/* wordmark override removed — Phase 5B block has the canonical white/dominant version */

/* ---- Hero accent labels (4 coloured pills below wordmark subline) ---- */
.hero__accent-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.hero__accent-label {
    font-family: var(--font-family-mono);
    font-size: 0.62rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    opacity: 0.82;
    white-space: nowrap;
}

.hero__accent-label--cyan    { color: #02B7D9; border-color: rgba(2, 183, 217, 0.45); }
.hero__accent-label--magenta { color: #BC0A4C; border-color: rgba(188, 10, 76, 0.45); }
.hero__accent-label--lime    { color: #A4CB0A; border-color: rgba(164, 203, 10, 0.45); }
.hero__accent-label--amber   { color: #DF8502; border-color: rgba(223, 133, 2, 0.45); }

/* ---- Montserrat for eyebrow labels — light weight, uppercase ---- */
.eyebrow {
    font-family: var(--font-family-base);
    font-weight: 300;
}

.status-badge,
.chip-group__heading,
.hero__subline {
    font-family: var(--font-family-base);
}

/* ---- intel-module: dark transparent card with cyan border ---- */
.intel-module {
    background: rgba(2, 183, 217, 0.03);
    border: 1px solid rgba(2, 183, 217, 0.10);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.intel-module:hover {
    background: rgba(2, 183, 217, 0.07);
    border-color: rgba(2, 183, 217, 0.26);
    box-shadow: 0 0 28px rgba(2, 183, 217, 0.10);
}

/* ---- glow-border: subtle accent border hover ---- */
.glow-border {
    border: 1px solid rgba(2, 183, 217, 0.12);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.glow-border:hover {
    border-color: rgba(2, 183, 217, 0.36);
    box-shadow: 0 0 24px rgba(2, 183, 217, 0.10);
}

/* ---- status-badge: tiny monospace pill ---- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-family-mono);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(2, 183, 217, 0.70);
    border: 1px solid rgba(2, 183, 217, 0.20);
    border-radius: 999px;
    padding: 3px 10px;
}

/* ---- signal-line: animated horizontal glow flow ---- */
.signal-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(2, 183, 217, 0.38), transparent) 0 0 / 200% 100%;
    animation: signalFlow 6s linear infinite;
}

@keyframes signalFlow {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .signal-line { animation: none; }
}

/* ---- node-dot: pulsing cyan dot ---- */
.node-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #02B7D9;
    animation: nodePulse 2.5s ease-in-out infinite;
}

@keyframes nodePulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.6); }
}

@media (prefers-reduced-motion: reduce) {
    .node-dot { animation: none; opacity: 0.6; }
}

/* ---- marker-* text highlight styles ---- */
.marker-cyan    { background: linear-gradient(transparent 55%, rgba(2, 183, 217, 0.22) 0); }
.marker-magenta { background: linear-gradient(transparent 55%, rgba(188, 10, 76, 0.20) 0); }
.marker-lime    { background: linear-gradient(transparent 55%, rgba(164, 203, 10, 0.22) 0); }
.marker-amber   { background: linear-gradient(transparent 55%, rgba(223, 133, 2, 0.20) 0); }

/* Phase 5C duplicate hover/accent rules removed — Phase 5B block above has the final versions */

/* ---- Custom scrollbar ---- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #0b0b10; }
::-webkit-scrollbar-thumb { background: rgba(2, 183, 217, 0.30); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(2, 183, 217, 0.58); }

/* ==========================================================================
   Phase 5E — Card colour identity system
   Visible tinted backgrounds per card, replacing flat glassmorphism.
   CSS variables set via nth-child; base card reads them with var().
   Explicit border-top-color on each nth-child ensures specificity wins over
   earlier Phase 5B/5D nth-child border-top-color declarations.
   ========================================================================== */

/* ---- Service cards: per-card colour variables ---- */
.card-grid-grid .service-card:nth-child(1) {
    --card-accent-soft:   rgba(2, 183, 217, 0.22);
    --card-accent-hover:  rgba(2, 183, 217, 0.33);
    --card-accent-border: rgba(2, 183, 217, 0.68);
    --card-accent-top:    #02B7D9;
    --card-accent-glow:   rgba(2, 183, 217, 0.22);
    border-top-color: #02B7D9;
}
.card-grid-grid .service-card:nth-child(2) {
    --card-accent-soft:   rgba(188, 10, 76, 0.22);
    --card-accent-hover:  rgba(188, 10, 76, 0.33);
    --card-accent-border: rgba(188, 10, 76, 0.65);
    --card-accent-top:    #BC0A4C;
    --card-accent-glow:   rgba(188, 10, 76, 0.20);
    border-top-color: #BC0A4C;
}
.card-grid-grid .service-card:nth-child(3) {
    --card-accent-soft:   rgba(164, 203, 10, 0.20);
    --card-accent-hover:  rgba(164, 203, 10, 0.30);
    --card-accent-border: rgba(164, 203, 10, 0.62);
    --card-accent-top:    #A4CB0A;
    --card-accent-glow:   rgba(164, 203, 10, 0.18);
    border-top-color: #A4CB0A;
}
.card-grid-grid .service-card:nth-child(4) {
    --card-accent-soft:   rgba(223, 133, 2, 0.22);
    --card-accent-hover:  rgba(223, 133, 2, 0.33);
    --card-accent-border: rgba(223, 133, 2, 0.68);
    --card-accent-top:    #DF8502;
    --card-accent-glow:   rgba(223, 133, 2, 0.20);
    border-top-color: #DF8502;
}
.card-grid-grid .service-card:nth-child(5) {
    --card-accent-soft:   rgba(31, 94, 255, 0.22);
    --card-accent-hover:  rgba(31, 94, 255, 0.33);
    --card-accent-border: rgba(31, 94, 255, 0.68);
    --card-accent-top:    #1F5EFF;
    --card-accent-glow:   rgba(31, 94, 255, 0.22);
    border-top-color: #1F5EFF;
}
.card-grid-grid .service-card:nth-child(6) {
    --card-accent-soft:   rgba(155, 0, 230, 0.22);
    --card-accent-hover:  rgba(155, 0, 230, 0.33);
    --card-accent-border: rgba(155, 0, 230, 0.62);
    --card-accent-top:    #9B00E6;
    --card-accent-glow:   rgba(155, 0, 230, 0.20);
    border-top-color: #9B00E6;
}

/* ---- Stat cards: per-card colour variables ---- */
.stats-section.stats-inline .stat-card:nth-child(1) {
    --card-accent-soft:   rgba(2, 183, 217, 0.20);
    --card-accent-hover:  rgba(2, 183, 217, 0.30);
    --card-accent-border: rgba(2, 183, 217, 0.60);
    --card-accent-top:    #02B7D9;
    --card-accent-glow:   rgba(2, 183, 217, 0.18);
    border-top-color: #02B7D9;
}
.stats-section.stats-inline .stat-card:nth-child(2) {
    --card-accent-soft:   rgba(188, 10, 76, 0.20);
    --card-accent-hover:  rgba(188, 10, 76, 0.30);
    --card-accent-border: rgba(188, 10, 76, 0.58);
    --card-accent-top:    #BC0A4C;
    --card-accent-glow:   rgba(188, 10, 76, 0.18);
    border-top-color: #BC0A4C;
}
.stats-section.stats-inline .stat-card:nth-child(3) {
    --card-accent-soft:   rgba(164, 203, 10, 0.18);
    --card-accent-hover:  rgba(164, 203, 10, 0.28);
    --card-accent-border: rgba(164, 203, 10, 0.56);
    --card-accent-top:    #A4CB0A;
    --card-accent-glow:   rgba(164, 203, 10, 0.15);
    border-top-color: #A4CB0A;
}
.stats-section.stats-inline .stat-card:nth-child(4) {
    --card-accent-soft:   rgba(223, 133, 2, 0.20);
    --card-accent-hover:  rgba(223, 133, 2, 0.30);
    --card-accent-border: rgba(223, 133, 2, 0.60);
    --card-accent-top:    #DF8502;
    --card-accent-glow:   rgba(223, 133, 2, 0.18);
    border-top-color: #DF8502;
}
.stats-section.stats-inline .stat-card:nth-child(5) {
    --card-accent-soft:   rgba(31, 94, 255, 0.20);
    --card-accent-hover:  rgba(31, 94, 255, 0.30);
    --card-accent-border: rgba(31, 94, 255, 0.60);
    --card-accent-top:    #1F5EFF;
    --card-accent-glow:   rgba(31, 94, 255, 0.20);
    border-top-color: #1F5EFF;
}

/* ---- Benefit cards: per-card colour variables ---- */
.benefit-card:nth-child(1) {
    --card-accent-soft:   rgba(2, 183, 217, 0.22);
    --card-accent-hover:  rgba(2, 183, 217, 0.33);
    --card-accent-border: rgba(2, 183, 217, 0.65);
    --card-accent-top:    #02B7D9;
    --card-accent-glow:   rgba(2, 183, 217, 0.20);
    border-top-color: #02B7D9;
}
.benefit-card:nth-child(2) {
    --card-accent-soft:   rgba(188, 10, 76, 0.22);
    --card-accent-hover:  rgba(188, 10, 76, 0.33);
    --card-accent-border: rgba(188, 10, 76, 0.62);
    --card-accent-top:    #BC0A4C;
    --card-accent-glow:   rgba(188, 10, 76, 0.18);
    border-top-color: #BC0A4C;
}
.benefit-card:nth-child(3) {
    --card-accent-soft:   rgba(164, 203, 10, 0.20);
    --card-accent-hover:  rgba(164, 203, 10, 0.30);
    --card-accent-border: rgba(164, 203, 10, 0.60);
    --card-accent-top:    #A4CB0A;
    --card-accent-glow:   rgba(164, 203, 10, 0.16);
    border-top-color: #A4CB0A;
}
.benefit-card:nth-child(4) {
    --card-accent-soft:   rgba(223, 133, 2, 0.22);
    --card-accent-hover:  rgba(223, 133, 2, 0.33);
    --card-accent-border: rgba(223, 133, 2, 0.65);
    --card-accent-top:    #DF8502;
    --card-accent-glow:   rgba(223, 133, 2, 0.18);
    border-top-color: #DF8502;
}
.benefit-card:nth-child(5) {
    --card-accent-soft:   rgba(31, 94, 255, 0.22);
    --card-accent-hover:  rgba(31, 94, 255, 0.33);
    --card-accent-border: rgba(31, 94, 255, 0.65);
    --card-accent-top:    #1F5EFF;
    --card-accent-glow:   rgba(31, 94, 255, 0.20);
    border-top-color: #1F5EFF;
}

/* ---- Service card base: visible radial tint from top-left ---- */
.card-grid-grid .service-card {
    background: radial-gradient(
        circle at top left,
        var(--card-accent-soft, rgba(2, 183, 217, 0.14)) 0%,
        rgba(255, 255, 255, 0.025) 36%,
        rgba(11, 11, 16, 0.92) 100%
    );
    border: 1px solid var(--card-accent-border, rgba(255, 255, 255, 0.14));
    border-top: 3px solid var(--card-accent-top, var(--adglow-cyan));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03),
        0 16px 44px rgba(0, 0, 0, 0.34),
        0 0 32px var(--card-accent-glow, rgba(2, 183, 217, 0.12));
    transition: opacity 0.55s ease, transform 0.55s ease, background 0.3s ease, box-shadow 0.3s ease, border-color 0.25s ease;
}

/* ---- Service card hover: deeper tint + lift ---- */
.card-grid-grid .service-card:hover {
    transform: translateY(-6px);
    background: radial-gradient(
        circle at top left,
        var(--card-accent-hover, rgba(2, 183, 217, 0.28)) 0%,
        rgba(255, 255, 255, 0.035) 40%,
        rgba(11, 11, 16, 0.95) 100%
    );
}

/* ---- Stat card base: visible radial tint ---- */
.stats-section.stats-inline .stat-card {
    background: radial-gradient(
        circle at top left,
        var(--card-accent-soft, rgba(2, 183, 217, 0.14)) 0%,
        rgba(255, 255, 255, 0.018) 38%,
        rgba(11, 11, 16, 0.88) 100%
    );
    border: 1px solid var(--card-accent-border, rgba(255, 255, 255, 0.10));
    border-top: 3px solid var(--card-accent-top, var(--adglow-cyan));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.025),
        0 12px 36px rgba(0, 0, 0, 0.30),
        0 0 28px var(--card-accent-glow, rgba(2, 183, 217, 0.10));
}

/* Stat number adopts card accent colour */
.stats-section.stats-inline .stat-card strong {
    color: var(--card-accent-top, var(--adglow-cyan));
}

/* ---- Benefit card base: visible radial tint ---- */
.benefit-card {
    background: radial-gradient(
        circle at top left,
        var(--card-accent-soft, rgba(2, 183, 217, 0.14)) 0%,
        rgba(255, 255, 255, 0.022) 36%,
        rgba(11, 11, 16, 0.90) 100%
    );
    border: 1px solid var(--card-accent-border, rgba(255, 255, 255, 0.12));
    border-top: 3px solid var(--card-accent-top, var(--adglow-cyan));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.025),
        0 14px 40px rgba(0, 0, 0, 0.32),
        0 0 28px var(--card-accent-glow, rgba(2, 183, 217, 0.10));
    transition: opacity 0.55s ease, transform 0.55s ease, background 0.3s ease, box-shadow 0.3s ease, border-color 0.25s ease;
}

/* ---- Benefit card hover: deeper tint + lift ---- */
.benefit-card:hover {
    transform: translateY(-5px);
    background: radial-gradient(
        circle at top left,
        var(--card-accent-hover, rgba(2, 183, 217, 0.28)) 0%,
        rgba(255, 255, 255, 0.030) 40%,
        rgba(11, 11, 16, 0.94) 100%
    );
}

/* ---- Card labels adopt card accent ---- */
.card-grid-grid .service-card .card-label,
.benefit-card .card-label {
    color: var(--card-accent-top, var(--adglow-blue-bright));
}

/* ==========================================================================
   Phase 5F — Homepage layout refinement
   Hero compact, chip centering, services header width, insight panels,
   market node regional cards.
   ========================================================================== */

/* ---- 1. Hero: reduced height + chip centering ---- */
#home-hero {
    min-height: clamp(520px, 74vh, 780px);
}

.hero__accent-labels {
    justify-content: center;
}

/* ---- 2. Services section header: wider heading width ---- */
.card-section-service-card .section-header {
    max-width: 72ch;
}

/* ---- 3. Insight panels section (Why Adglow redesign) ---- */
.insight-panels-section {
    background: transparent;
    border-top: none;
    padding-block: var(--section-space-lg);
}

.insight-panels-header {
    text-align: center;
    max-width: 860px;
    margin-inline: auto;
    margin-bottom: var(--space-2xl);
}

.insight-panels-header p {
    margin-inline: auto;
}

.insight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-bottom: var(--space-xl);
}

.insight-card {
    position: relative;
    background: rgba(11, 11, 16, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-md);
    padding: var(--space-xl) var(--space-xl) var(--space-2xl);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.insight-card:hover {
    transform: translateY(-4px);
}

.insight-card__dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-bottom: var(--space-lg);
    flex-shrink: 0;
}

.insight-card__title {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--adglow-white);
    margin-bottom: var(--space-sm);
    line-height: 1.2;
}

.insight-card__text {
    color: rgba(232, 237, 247, 0.60);
    font-size: 0.94rem;
    line-height: 1.72;
    margin: 0;
}

/* Accent variants — solid backgrounds */
.insight-card--cyan {
    background: #02B7D9;
    border-color: #02B7D9;
}
.insight-card--cyan .insight-card__dot {
    background: #fff;
}

.insight-card--magenta {
    background: #BC0A4C;
    border-color: #BC0A4C;
}
.insight-card--magenta .insight-card__dot {
    background: #fff;
}

.insight-card--lime {
    background: #B0DA09;
    border-color: #B0DA09;
    color: #03050d;
}
.insight-card--lime .insight-card__dot {
    background: #03050d;
}
.insight-card--lime .insight-card__title {
    color: #03050d;
}
.insight-card--lime .insight-card__text {
    color: rgba(3, 5, 13, 0.75);
}

/* ---- Proof modules row ---- */
.proof-modules {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.proof-module {
    background: rgba(11, 11, 16, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.proof-module:hover {
    transform: translateY(-3px);
}

.proof-module__value {
    font-family: var(--font-family-mono);
    font-size: clamp(0.95rem, 1.8vw, 1.2rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
}

.proof-module__label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: rgba(232, 237, 247, 0.44);
    line-height: 1.35;
}

.proof-module--cyan   { border-top: 2px solid #02B7D9; box-shadow: 0 0 18px rgba(2, 183, 217, 0.07); }
.proof-module--magenta{ border-top: 2px solid #BC0A4C; box-shadow: 0 0 18px rgba(188, 10, 76, 0.07); }
.proof-module--lime   { border-top: 2px solid #A4CB0A; box-shadow: 0 0 18px rgba(164, 203, 10, 0.06); }
.proof-module--amber  { border-top: 2px solid #DF8502; box-shadow: 0 0 18px rgba(223, 133, 2, 0.07); }

.proof-module--cyan    .proof-module__value { color: #02B7D9; }
.proof-module--magenta .proof-module__value { color: #BC0A4C; }
.proof-module--lime    .proof-module__value { color: #A4CB0A; }
.proof-module--amber   .proof-module__value { color: #DF8502; }

/* ---- 4. Market node regional redesign ---- */
.card-section-market-node {
    background: transparent;
    border-top: none;
    padding-block: var(--section-space-lg);
}

.card-section-market-node .section-header {
    text-align: left;
    max-width: 720px;
    margin-inline: 0;
    margin-bottom: var(--space-2xl);
}

/* ID selector required — overrides Phase 5 #regional-coverage .card-grid-compact rule (specificity 1,1,0) */
#regional-coverage .card-grid-compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
}

/* South Africa: primary market — wider card */
#regional-coverage .card-grid-compact .market-node:nth-child(1) {
    grid-column: span 2;
}

.card-grid-compact .market-node {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: var(--space-lg);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-md);
    background: radial-gradient(circle at top right, var(--node-accent, rgba(2, 183, 217, 0.12)) 0%, rgba(11, 11, 16, 0.88) 60%);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28), 0 0 20px var(--node-glow, rgba(2, 183, 217, 0.07));
    min-height: auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
}

/* Accent dot top-right */
.card-grid-compact .market-node::after {
    content: '';
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--node-dot-color, #02B7D9);
    box-shadow: 0 0 8px var(--node-dot-color, #02B7D9);
    opacity: 0.80;
}

.card-grid-compact .market-node h3 {
    color: var(--adglow-white);
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
    padding-right: 1.5rem;
}

/* South Africa primary: larger heading */
#regional-coverage .card-grid-compact .market-node:nth-child(1) h3 {
    font-size: clamp(1rem, 1.8vw, 1.3rem);
}

.card-grid-compact .market-node .card-label {
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(232, 237, 247, 0.42);
    margin-bottom: 0;
}

.card-grid-compact .market-node:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.38), 0 0 30px var(--node-glow, rgba(2, 183, 217, 0.12));
}

/* Per-node accent colour variables */
.card-grid-compact .market-node:nth-child(1) {
    --node-accent:     rgba(2, 183, 217, 0.20);
    --node-glow:       rgba(2, 183, 217, 0.14);
    --node-dot-color:  #02B7D9;
    border-color: rgba(2, 183, 217, 0.26);
}
.card-grid-compact .market-node:nth-child(2) {
    --node-accent:     rgba(188, 10, 76, 0.18);
    --node-glow:       rgba(188, 10, 76, 0.12);
    --node-dot-color:  #BC0A4C;
    border-color: rgba(188, 10, 76, 0.22);
}
.card-grid-compact .market-node:nth-child(3) {
    --node-accent:     rgba(164, 203, 10, 0.16);
    --node-glow:       rgba(164, 203, 10, 0.11);
    --node-dot-color:  #A4CB0A;
    border-color: rgba(164, 203, 10, 0.20);
}
.card-grid-compact .market-node:nth-child(4) {
    --node-accent:     rgba(223, 133, 2, 0.18);
    --node-glow:       rgba(223, 133, 2, 0.12);
    --node-dot-color:  #DF8502;
    border-color: rgba(223, 133, 2, 0.22);
}
.card-grid-compact .market-node:nth-child(5) {
    --node-accent:     rgba(2, 183, 217, 0.16);
    --node-glow:       rgba(2, 183, 217, 0.11);
    --node-dot-color:  #02B7D9;
    border-color: rgba(2, 183, 217, 0.20);
}
.card-grid-compact .market-node:nth-child(6) {
    --node-accent:     rgba(188, 10, 76, 0.16);
    --node-glow:       rgba(188, 10, 76, 0.11);
    --node-dot-color:  #BC0A4C;
    border-color: rgba(188, 10, 76, 0.20);
}
.card-grid-compact .market-node:nth-child(7) {
    --node-accent:     rgba(164, 203, 10, 0.15);
    --node-glow:       rgba(164, 203, 10, 0.10);
    --node-dot-color:  #A4CB0A;
    border-color: rgba(164, 203, 10, 0.18);
}

/* ─── Regional cards: flag icon ─── */

/* Reset the base decorative-bar style for flag icons in regional cards */
#regional-coverage .market-node .card-icon {
    display: block;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    margin-bottom: var(--space-sm);
    line-height: 0;
}

/* Flag image: small, rounded, subtle shadow */
#regional-coverage .market-node .card-icon .flag-img {
    display: block;
    width: 36px;
    height: 24px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    opacity: 0.88;
}

/* ---- chip-icon: logo-ready slot inside platform chips ---- */
.chip-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 0.35em;
    vertical-align: middle;
    line-height: 1;
}

/* ==========================================================================
   Phase 6 — Internal page dark visual system
   All internal page sections reveal the ambient canvas; components styled as
   dark glass floating modules with the homepage accent colour system.
   ========================================================================== */

/* ─── 1. Section backgrounds: transparent to show ambient canvas ─── */
.intro-section,
.process-section,
.split-section,
.faq-section,
.contact-section,
.trust-section,
.social-section,
.card-section-platform-card {
    background: transparent;
}

/* ─── 2. Internal hero: left-aligned compact treatment ─── */
.hero:not(#home-hero) .hero__content {
    max-width: 820px;
    padding-block: var(--hero-space-inner);
}

.hero:not(#home-hero) h1 {
    font-size: clamp(1.9rem, 4.5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
    color: var(--adglow-white);
    max-width: 22ch;
}

.hero:not(#home-hero) .lede {
    color: rgba(232, 237, 247, 0.68);
    font-size: 1rem;
    max-width: 56ch;
    line-height: 1.7;
}

.hero:not(#home-hero) .eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
}

.hero.no-media:not(#home-hero) .hero__overlay {
    background:
        radial-gradient(ellipse at 72% 50%, rgba(31, 94, 255, 0.14), transparent 48%),
        radial-gradient(ellipse at 20% 80%, rgba(2, 183, 217, 0.07), transparent 40%),
        rgba(3, 5, 13, 0.06);
}

/* ─── About / Services pages: compact page-title hero ─── */
#about-hero,
#services-hero,
#platforms-hero,
#impact-hero,
#faq-hero,
#contact-hero {
    min-height: 0;
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

#about-hero .hero__shell,
#services-hero .hero__shell,
#platforms-hero .hero__shell,
#impact-hero .hero__shell,
#faq-hero .hero__shell,
#contact-hero .hero__shell {
    align-items: start;
}

#about-hero .hero__content,
#services-hero .hero__content,
#platforms-hero .hero__content,
#impact-hero .hero__content,
#faq-hero .hero__content,
#contact-hero .hero__content {
    max-width: min(100%, 480px);
    margin-inline: 0;
    padding-block: 0;
}

#about-hero h1,
#services-hero h1,
#platforms-hero h1,
#impact-hero h1,
#faq-hero h1,
#contact-hero h1 {
    font-size: clamp(1.75rem, 2.8vw, 2.4rem);
    max-width: none;
}

/* ─── 3. Intro text: dark typography treatment ─── */
.intro-section .intro-lead h2 {
    font-size: clamp(1.55rem, 3vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--adglow-white);
}

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

.intro-section .intro-copy p {
    color: var(--adglow-muted);
    line-height: 1.72;
}

/* ─── 4. Split panel: dark content + glass image placeholder ─── */
.split-section .split-copy h2 {
    font-size: clamp(1.55rem, 2.8vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--adglow-white);
}


.split-section .split-copy > p:not(.eyebrow) {
    color: var(--adglow-muted);
    line-height: 1.7;
}

.split-section .check-list li {
    color: rgba(232, 237, 247, 0.84);
}

.split-section .check-list li::before {
    background: #02B7D9;
}

.split-section .split-media .image-placeholder {
    background: linear-gradient(
        135deg,
        rgba(2, 183, 217, 0.07) 0%,
        rgba(11, 11, 16, 0.60) 100%
    );
    border: 1px solid rgba(2, 183, 217, 0.16);
    min-height: 320px;
    border-radius: var(--radius-lg);
}

/* ─── 5. Process steps: dark glass numbered tech cards ─── */
.process-section .section-header h2 {
    color: var(--adglow-white);
    font-size: clamp(1.55rem, 2.8vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
}

.process-section .section-header > p:not(.eyebrow) {
    color: var(--adglow-muted);
}


.process-step.process-step-card {
    background: rgba(11, 11, 16, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-step.process-step-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.36);
}

.process-grid .process-step-card:nth-child(1) { border-top: 2px solid #02B7D9; }
.process-grid .process-step-card:nth-child(2) { border-top: 2px solid #BC0A4C; }
.process-grid .process-step-card:nth-child(3) { border-top: 2px solid #A4CB0A; }
.process-grid .process-step-card:nth-child(4) { border-top: 2px solid #DF8502; }
.process-grid .process-step-card:nth-child(5) { border-top: 2px solid #02B7D9; }

.process-step.process-step-card .step-number {
    display: block;
    font-family: var(--font-family-mono);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: var(--space-sm);
}

.process-grid .process-step-card:nth-child(1) .step-number { color: rgba(2, 183, 217, 0.28); }
.process-grid .process-step-card:nth-child(2) .step-number { color: rgba(188, 10, 76, 0.35); }
.process-grid .process-step-card:nth-child(3) .step-number { color: rgba(164, 203, 10, 0.30); }
.process-grid .process-step-card:nth-child(4) .step-number { color: rgba(223, 133, 2, 0.30); }
.process-grid .process-step-card:nth-child(5) .step-number { color: rgba(2, 183, 217, 0.28); }

.process-step.process-step-card h3 {
    color: var(--adglow-white);
    font-size: 0.97rem;
    font-weight: 700;
    margin-block: var(--space-xs) var(--space-sm);
}

.process-step.process-step-card > p {
    color: var(--adglow-muted);
    font-size: 0.9rem;
    line-height: 1.65;
}

/* ─── 6. Trust points: dark glass panel + accent-bordered items ─── */
.trust-section .trust-panel {
    background: rgba(11, 11, 16, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-md);
    padding: var(--space-2xl);
    gap: clamp(2rem, 4vw, 3.5rem);
}

.trust-section .trust-copy h2 {
    color: var(--adglow-white);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
}


.trust-section .trust-copy > p:not(.eyebrow) {
    color: var(--adglow-muted);
    line-height: 1.7;
}

.trust-section .trust-list article {
    background: rgba(11, 11, 16, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-sm);
    padding: var(--space-lg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trust-section .trust-list article:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.30);
}

.trust-list article:nth-child(1) { border-top: 2px solid #02B7D9; }
.trust-list article:nth-child(2) { border-top: 2px solid #BC0A4C; }
.trust-list article:nth-child(3) { border-top: 2px solid #A4CB0A; }
.trust-list article:nth-child(4) { border-top: 2px solid #DF8502; }
.trust-list article:nth-child(5) { border-top: 2px solid #02B7D9; }
.trust-list article:nth-child(6) { border-top: 2px solid #BC0A4C; }
.trust-list article:nth-child(7) { border-top: 2px solid #A4CB0A; }

.trust-section .trust-list article h3 {
    color: var(--adglow-white);
    font-size: 0.93rem;
    font-weight: 700;
    margin-block: 0 var(--space-xs);
}

.trust-section .trust-list article p {
    color: var(--adglow-muted);
    font-size: 0.875rem;
    line-height: 1.6;
}

/* ─── 7. FAQ: dark technical accordion modules ─── */
.faq-section .section-header h1 {
    color: var(--adglow-white);
    font-size: clamp(1.9rem, 4.5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
}

.faq-section .section-header > p:not(.eyebrow) {
    color: var(--adglow-muted);
}


#faq-list .section-header {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.faq-item {
    background: rgba(11, 11, 16, 0.72);
    border-color: rgba(255, 255, 255, 0.09);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-item:hover {
    border-color: rgba(2, 183, 217, 0.28);
}

.faq-item[open] {
    border-color: rgba(2, 183, 217, 0.38);
    box-shadow: 0 0 22px rgba(2, 183, 217, 0.07);
}

.faq-item summary {
    color: var(--adglow-white);
    font-weight: 600;
    font-size: 0.97rem;
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
}

.faq-item summary::after {
    border-right-color: #02B7D9;
    border-bottom-color: #02B7D9;
}

.faq-item p {
    color: var(--adglow-muted);
    font-size: 0.93rem;
    line-height: 1.72;
}

/* ─── 8. FAQ Split: two-column how-we-work section ─── */

.faq-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
}

.faq-split-eyebrow {
    color: #02B7D9;
}

.faq-split-heading {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--adglow-white);
    margin-block: 0.5rem 1.25rem;
    max-width: none;
}

.faq-split-desc {
    color: var(--color-muted);
    font-size: 0.9375rem;
    line-height: 1.65;
    margin-bottom: 1.75rem;
}

.faq-split-subheading {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    margin-bottom: 1rem;
}

.faq-split-visual {
    position: sticky;
    top: 6rem;
}

.faq-split-image-panel {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(2, 183, 217, 0.22);
    box-shadow: 0 0 32px rgba(2, 183, 217, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    background: rgba(11, 11, 16, 0.80);
    aspect-ratio: 3 / 4;
}

.faq-split-image-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.faq-split-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 400px;
    background: linear-gradient(145deg, rgba(2, 183, 217, 0.05) 0%, rgba(31, 94, 255, 0.04) 60%, rgba(11, 11, 16, 0) 100%);
}

@media (max-width: 768px) {
    .faq-split-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .faq-split-visual {
        position: static;
        order: 2;
    }

    .faq-split-image-panel {
        aspect-ratio: 16 / 9;
    }
}

/* ─── 9. Contact: dark floating contact modules ─── */
.contact-section .section-header h2 {
    color: var(--adglow-white);
    font-size: clamp(1.55rem, 2.8vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
}

.contact-section .section-header > p {
    color: var(--adglow-muted);
}


.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.contact-card {
    background: rgba(11, 11, 16, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.32);
}

/* Solid colour cards */
.contact-card--solid {
    border-color: transparent;
}

.contact-card--solid:hover {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

/* Icon */
.contact-card-icon {
    display: block;
    width: 28px;
    height: 28px;
    margin-bottom: 1.25rem;
    opacity: 0.85;
}

.contact-card h3 {
    font-family: var(--font-family-mono);
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
    color: rgba(232, 237, 247, 0.50);
}

.contact-card--solid h3 {
    color: currentColor;
    opacity: 0.65;
}

.contact-card a {
    color: var(--adglow-white);
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    display: block;
    word-break: break-all;
    transition: opacity 0.2s ease;
}

.contact-card--solid a {
    color: currentColor;
    font-weight: 800;
}

.contact-card a:hover {
    opacity: 0.82;
}

.contact-card > p {
    color: var(--adglow-white);
    font-size: 1rem;
    font-weight: 700;
}

.contact-card--solid > p {
    color: currentColor;
    font-weight: 800;
}

.contact-card .muted {
    display: block;
    margin-top: var(--space-xs);
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--adglow-muted);
}

.contact-card--solid .muted {
    color: currentColor;
    opacity: 0.72;
}

/* ─── 9. Platform-card: dark glass chip cards ─── */
.card-section-platform-card .section-header h2 {
    color: var(--adglow-white);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
}

.card-section-platform-card .section-header > p {
    color: var(--adglow-muted);
}


.info-card.platform-card {
    background: rgba(11, 11, 16, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-sm);
    padding: var(--space-md) var(--space-lg);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.55s ease;
}

.info-card.platform-card:hover {
    transform: translateY(-2px);
    border-color: rgba(2, 183, 217, 0.28);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

.info-card.platform-card .card-label {
    display: block;
    font-family: var(--font-family-mono);
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #02B7D9;
    margin-bottom: var(--space-xs);
}

.info-card.platform-card h3 {
    color: var(--adglow-white);
    font-size: 0.9rem;
    font-weight: 700;
    margin-block: 0 var(--space-xs);
}

.info-card.platform-card > p {
    color: var(--adglow-muted);
    font-size: 0.875rem;
    line-height: 1.62;
}

/* ─── 10. Brand logo tiles ─── */

#brand-experience .card-grid-compact {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.card-grid-compact .brand-logo-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    padding: 1.25rem;
    background: rgba(11, 11, 16, 0.60);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.card-grid-compact .brand-logo-card:hover {
    border-color: rgba(2, 183, 217, 0.28);
    background: rgba(11, 11, 16, 0.88);
}

.card-grid-compact .brand-logo-card .card-media {
    background: none;
    border-radius: 0;
    aspect-ratio: unset;
    margin: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-grid-compact .brand-logo-card .card-media img {
    width: auto;
    height: 44px;
    max-width: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Visually hide the label — logo image is the visual, alt text covers accessibility */
.card-grid-compact .brand-logo-card .card-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── 11. Social links section ─── */
.social-section .social-panel {
    grid-template-columns: 1fr;
    background: rgba(11, 11, 16, 0.50);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-md);
    padding: var(--space-xl) var(--space-2xl);
}

.social-section h2 {
    color: var(--adglow-white);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}


.social-section > p,
.social-section div > p {
    color: var(--adglow-muted);
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: var(--space-md);
}

.social-links a {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
    color: rgba(232, 237, 247, 0.70);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.social-links a:hover {
    border-color: var(--adglow-blue);
    color: var(--adglow-white);
    background: rgba(31, 94, 255, 0.14);
}

/* ─── 11. Legal pages: two-column — heading left, content right ─── */
.text-section-legal {
    background: transparent;
}

/* Side-by-side grid: narrow heading column + wide content column */
.text-section-legal .shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
}

/* Heading column: sticky so it stays in view while scrolling */
.text-section-legal .section-header {
    position: sticky;
    top: 5rem;
}

.text-section-legal .section-header h1 {
    color: var(--adglow-white);
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

/* Content column: full remaining width, no extra max-width cap */
.text-section-legal .text-stack {
    display: block;
    min-width: 0;
}

.text-section-legal .text-block {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: var(--space-xl);
}

.text-section-legal .text-block h2 {
    color: var(--adglow-white);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.text-section-legal .text-block p,
.text-section-legal .text-block li {
    color: var(--adglow-muted);
    line-height: 1.75;
}

/* Mobile: stack vertically */
@media (max-width: 700px) {
    .text-section-legal .shell {
        grid-template-columns: 1fr;
    }

    .text-section-legal .section-header {
        position: static;
    }
}

/* ─── 12. Services page: best-for label treatment ─── */
.service-card .best-for {
    font-size: 0.83rem;
    margin-block: var(--space-xs);
    line-height: 1.55;
    padding-left: var(--space-sm);
    border-left: 2px solid rgba(2, 183, 217, 0.28);
    color: var(--adglow-muted);
}

.service-card .best-for strong {
    display: block;
    margin-bottom: 0.15em;
    font-family: var(--font-family-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(2, 183, 217, 0.65);
}

/* 7th service card accent — cycle resumes at cyan */
.card-grid-grid .service-card:nth-child(7) {
    --card-accent-soft:   rgba(2, 183, 217, 0.22);
    --card-accent-hover:  rgba(2, 183, 217, 0.33);
    --card-accent-border: rgba(2, 183, 217, 0.68);
    --card-accent-top:    #02B7D9;
    --card-accent-glow:   rgba(2, 183, 217, 0.22);
    border-top-color: #02B7D9;
}

.card-grid-grid .service-card:nth-child(7):hover {
    border-color: rgba(2, 183, 217, 0.60);
    box-shadow: 0 28px 80px rgba(0,0,0,0.44), 0 0 44px rgba(2, 183, 217, 0.24), inset 0 1px 0 rgba(2, 183, 217, 0.25);
}

/* ==========================================================================
   Phase 7 — Services and Platforms refinement
   Services: Campaign Management featured (span-2), 4-colour accent cycle.
   Process: 6-step workflow badge treatment (overrides Phase 6 large ghost number).
   Platforms: accent borders, label colour, certification badge.
   ========================================================================== */

/* ─── 1. Service cards: Campaign Management featured ─── */

/* Force 3-column grid so span-2 maths is predictable */
#service-list .card-grid-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Campaign Management spans 2 of 3 columns */
#service-list .card-grid-grid .service-card:nth-child(1) {
    grid-column: span 2;
}

/* Mobile: single column */
@media (max-width: 900px) {
    #service-list .card-grid-grid {
        grid-template-columns: 1fr !important;
    }
    #service-list .card-grid-grid .service-card,
    #service-list .card-grid-grid .service-card:nth-child(1),
    #service-list .card-grid-grid .service-card:nth-child(7) {
        grid-column: span 1 !important;
    }
}

/* ─── 2. Service cards: 4-colour accent cycle (ID beats Phase-5E class) ─── */

#service-list .card-grid-grid .service-card:nth-child(1) {
    --card-accent-soft:   rgba(188, 10, 76, 0.14);
    --card-accent-hover:  rgba(188, 10, 76, 0.26);
    --card-accent-border: rgba(188, 10, 76, 0.65);
    --card-accent-top:    #BC0A4C;
    --card-accent-glow:   rgba(188, 10, 76, 0.20);
    border-top-color: #BC0A4C;
    background: linear-gradient(135deg, rgba(188, 10, 76, 0.07) 0%, rgba(11, 11, 16, 0.80) 55%);
}

#service-list .card-grid-grid .service-card:nth-child(1) h3 {
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    letter-spacing: -0.02em;
}

#service-list .card-grid-grid .service-card:nth-child(1) .card-label::after {
    content: ' · Primary service';
    color: rgba(188, 10, 76, 0.65);
    font-size: 0.58rem;
    letter-spacing: 0.06em;
}

#service-list .card-grid-grid .service-card:nth-child(1):hover {
    border-color: rgba(188, 10, 76, 0.50);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.44), 0 0 44px rgba(188, 10, 76, 0.15), inset 0 1px 0 rgba(188, 10, 76, 0.18);
}

#service-list .card-grid-grid .service-card:nth-child(2) {
    --card-accent-soft:   rgba(2, 183, 217, 0.22);
    --card-accent-hover:  rgba(2, 183, 217, 0.33);
    --card-accent-border: rgba(2, 183, 217, 0.68);
    --card-accent-top:    #02B7D9;
    --card-accent-glow:   rgba(2, 183, 217, 0.22);
    border-top-color: #02B7D9;
}

#service-list .card-grid-grid .service-card:nth-child(3) {
    --card-accent-soft:   rgba(223, 133, 2, 0.18);
    --card-accent-hover:  rgba(223, 133, 2, 0.28);
    --card-accent-border: rgba(223, 133, 2, 0.65);
    --card-accent-top:    #DF8502;
    --card-accent-glow:   rgba(223, 133, 2, 0.18);
    border-top-color: #DF8502;
}

#service-list .card-grid-grid .service-card:nth-child(4) {
    --card-accent-soft:   rgba(164, 203, 10, 0.18);
    --card-accent-hover:  rgba(164, 203, 10, 0.28);
    --card-accent-border: rgba(164, 203, 10, 0.65);
    --card-accent-top:    #A4CB0A;
    --card-accent-glow:   rgba(164, 203, 10, 0.18);
    border-top-color: #A4CB0A;
}

#service-list .card-grid-grid .service-card:nth-child(5) {
    --card-accent-soft:   rgba(188, 10, 76, 0.14);
    --card-accent-hover:  rgba(188, 10, 76, 0.26);
    --card-accent-border: rgba(188, 10, 76, 0.65);
    --card-accent-top:    #BC0A4C;
    --card-accent-glow:   rgba(188, 10, 76, 0.20);
    border-top-color: #BC0A4C;
}

#service-list .card-grid-grid .service-card:nth-child(6) {
    --card-accent-soft:   rgba(2, 183, 217, 0.22);
    --card-accent-hover:  rgba(2, 183, 217, 0.33);
    --card-accent-border: rgba(2, 183, 217, 0.68);
    --card-accent-top:    #02B7D9;
    --card-accent-glow:   rgba(2, 183, 217, 0.22);
    border-top-color: #02B7D9;
}

/* Radio and Podcast spans 2 columns to fill the last row alongside TV */
#service-list .card-grid-grid .service-card:nth-child(7) {
    grid-column: span 2;
}

/* Service card CTA buttons — solid blue pill style */
#service-list .card__button {
    background: linear-gradient(135deg, #1f5eff 0%, #37a1ff 100%);
    color: #fff;
    border-color: transparent;
    border-radius: 999px;
}

#service-list .card__button:hover {
    background: linear-gradient(135deg, #163bbf 0%, #1f5eff 100%);
    color: #fff;
    border-color: transparent;
}

/* ─── 3. Process section: 6-step workflow badge treatment ─── */

/* Align section header to the same left edge as the cards */
#campaign-process .section-header {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

/* 3 columns for 2 clean rows of 3 */
#campaign-process .process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Step badge — solid fill, white number */
#campaign-process .process-step.process-step-card .step-number {
    display: inline-flex;
    align-items: center;
    width: auto;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1;
    padding: 0.28rem 0.65rem;
    border-radius: 3px;
    margin-bottom: var(--space-md);
    color: #fff;
    /* background set by nth-child rules below */
}

/* 4-colour cycle for step border-top and badge background */
#campaign-process .process-grid .process-step-card:nth-child(1) { border-top: 2px solid #BC0A4C; }
#campaign-process .process-grid .process-step-card:nth-child(2) { border-top: 2px solid #02B7D9; }
#campaign-process .process-grid .process-step-card:nth-child(3) { border-top: 2px solid #DF8502; }
#campaign-process .process-grid .process-step-card:nth-child(4) { border-top: 2px solid #A4CB0A; }
#campaign-process .process-grid .process-step-card:nth-child(5) { border-top: 2px solid #BC0A4C; }
#campaign-process .process-grid .process-step-card:nth-child(6) { border-top: 2px solid #02B7D9; }

#campaign-process .process-grid .process-step-card:nth-child(1) .step-number { background: #BC0A4C; }
#campaign-process .process-grid .process-step-card:nth-child(2) .step-number { background: #02B7D9; }
#campaign-process .process-grid .process-step-card:nth-child(3) .step-number { background: #DF8502; }
#campaign-process .process-grid .process-step-card:nth-child(4) .step-number { background: #A4CB0A; }
#campaign-process .process-grid .process-step-card:nth-child(5) .step-number { background: #BC0A4C; }
#campaign-process .process-grid .process-step-card:nth-child(6) .step-number { background: #02B7D9; }

#campaign-process .process-step.process-step-card h3 {
    font-size: 1.0rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--adglow-white);
}

/* ─── 4. Platforms intro: extra top breathing room below the compact hero ─── */

#platforms-digital-intro {
    padding-block-start: clamp(3rem, 6vw, 5rem);
    padding-block-end: 1.5rem;
}

#digital-platforms {
    padding-block-start: 1.5rem;
}

#platforms-atl-intro {
    padding-block-end: 1.5rem;
}

#atl-channels {
    padding-block-start: 1.5rem;
}

/* ─── 5. Regional reach carousel ─── */

.trust-carousel-section .trust-carousel-header {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: var(--space-xl);
}

.trust-carousel-section .trust-carousel-header h2 {
    color: var(--adglow-white);
    font-size: clamp(1.55rem, 2.8vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
}

.trust-carousel-section .trust-carousel-header p:not(.eyebrow) {
    color: var(--adglow-muted);
    max-width: 560px;
    margin-inline: auto;
}

.region-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.region-carousel-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block: 0.5rem;
    flex: 1;
}

.region-carousel-track::-webkit-scrollbar { display: none; }

.region-card {
    flex: 0 0 min(80vw, 260px);
    scroll-snap-align: start;
    background: rgba(11, 11, 16, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 1.4rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.region-card:hover {
    border-color: rgba(2, 183, 217, 0.35);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
}

.region-card__flag {
    width: 72px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: block;
}

.region-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--adglow-white);
    margin: 0;
}

.region-card p {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--adglow-muted);
    margin: 0;
}

.region-carousel-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(11, 11, 16, 0.7);
    color: var(--adglow-white);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.region-carousel-btn:hover {
    background: rgba(2, 183, 217, 0.18);
    border-color: rgba(2, 183, 217, 0.5);
}

/* ─── 6. Digital platforms: accent borders and label colours ─── */

#digital-platforms .card-grid .info-card:nth-child(1) { border-top: 2px solid #BC0A4C; }
#digital-platforms .card-grid .info-card:nth-child(2) { border-top: 2px solid #02B7D9; }
#digital-platforms .card-grid .info-card:nth-child(3) { border-top: 2px solid #DF8502; }
#digital-platforms .card-grid .info-card:nth-child(4) { border-top: 2px solid #A4CB0A; }
#digital-platforms .card-grid .info-card:nth-child(5) { border-top: 2px solid #BC0A4C; }
#digital-platforms .card-grid .info-card:nth-child(6) { border-top: 2px solid #02B7D9; }
#digital-platforms .card-grid .info-card:nth-child(7) { border-top: 2px solid #DF8502; }
#digital-platforms .card-grid .info-card:nth-child(8) { border-top: 2px solid #A4CB0A; }
#digital-platforms .card-grid .info-card:nth-child(9) { border-top: 2px solid #BC0A4C; }

#digital-platforms .card-grid .info-card:nth-child(1) .card-label { color: #BC0A4C; }
#digital-platforms .card-grid .info-card:nth-child(2) .card-label { color: #02B7D9; }
#digital-platforms .card-grid .info-card:nth-child(3) .card-label { color: #DF8502; }
#digital-platforms .card-grid .info-card:nth-child(4) .card-label { color: #A4CB0A; }
#digital-platforms .card-grid .info-card:nth-child(5) .card-label { color: #BC0A4C; }
#digital-platforms .card-grid .info-card:nth-child(6) .card-label { color: #02B7D9; }
#digital-platforms .card-grid .info-card:nth-child(7) .card-label { color: #DF8502; }
#digital-platforms .card-grid .info-card:nth-child(8) .card-label { color: #A4CB0A; }
#digital-platforms .card-grid .info-card:nth-child(9) .card-label { color: #BC0A4C; }

/* Certified indicator appended to Meta and Google labels */
#digital-platforms .card-grid .info-card:nth-child(1) .card-label::after,
#digital-platforms .card-grid .info-card:nth-child(2) .card-label::after {
    content: ' · Certified';
    color: rgba(164, 203, 10, 0.75);
    font-size: 0.58rem;
    letter-spacing: 0.06em;
}

/* Meta and Google: slightly richer background to signal priority */
#digital-platforms .card-grid .info-card:nth-child(1),
#digital-platforms .card-grid .info-card:nth-child(2) {
    background: rgba(11, 11, 16, 0.82);
    border-color: rgba(255, 255, 255, 0.13);
}

/* Matched hover glows for Meta and Google */
#digital-platforms .card-grid .info-card:nth-child(1):hover {
    border-color: rgba(188, 10, 76, 0.40);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.30), 0 0 18px rgba(188, 10, 76, 0.08);
}

#digital-platforms .card-grid .info-card:nth-child(2):hover {
    border-color: rgba(2, 183, 217, 0.40);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.30), 0 0 18px rgba(2, 183, 217, 0.10);
}

/* ─── 5. ATL channels: solid colour backgrounds, 3+2 grid layout ─── */

/* 6-col grid: row 1 = 3 cards (2 cols each), row 2 = 2 cards (3 cols each) */
#atl-channels .card-grid {
    grid-template-columns: repeat(6, 1fr);
}

#atl-channels .card-grid .info-card {
    grid-column: span 2;
}

#atl-channels .card-grid .info-card:nth-child(4),
#atl-channels .card-grid .info-card:nth-child(5) {
    grid-column: span 3;
}

/* Solid background colours */
#atl-channels .card-grid .info-card:nth-child(1) { background: #BC0A4C; border-color: #BC0A4C; }
#atl-channels .card-grid .info-card:nth-child(2) { background: #02B7D9; border-color: #02B7D9; }
#atl-channels .card-grid .info-card:nth-child(3) { background: #DF8502; border-color: #DF8502; }
#atl-channels .card-grid .info-card:nth-child(4) { background: #A4CB0A; border-color: #A4CB0A; color: #03050d; }
#atl-channels .card-grid .info-card:nth-child(5) { background: #BC0A4C; border-color: #BC0A4C; }

/* White text on coloured backgrounds (cards 1, 2, 3, 5) */
#atl-channels .card-grid .info-card:nth-child(1) h3,
#atl-channels .card-grid .info-card:nth-child(2) h3,
#atl-channels .card-grid .info-card:nth-child(3) h3,
#atl-channels .card-grid .info-card:nth-child(5) h3 { color: #fff; }

#atl-channels .card-grid .info-card:nth-child(1) > p,
#atl-channels .card-grid .info-card:nth-child(2) > p,
#atl-channels .card-grid .info-card:nth-child(3) > p,
#atl-channels .card-grid .info-card:nth-child(5) > p { color: rgba(255, 255, 255, 0.82); }

#atl-channels .card-grid .info-card:nth-child(1) .card-label,
#atl-channels .card-grid .info-card:nth-child(2) .card-label,
#atl-channels .card-grid .info-card:nth-child(3) .card-label,
#atl-channels .card-grid .info-card:nth-child(5) .card-label { color: rgba(255, 255, 255, 0.72); }

/* Dark text on lime (card 4) */
#atl-channels .card-grid .info-card:nth-child(4) h3 { color: #03050d; }
#atl-channels .card-grid .info-card:nth-child(4) > p { color: rgba(3, 5, 13, 0.75); }
#atl-channels .card-grid .info-card:nth-child(4) .card-label { color: rgba(3, 5, 13, 0.65); }

/* "Contact Adglow" as text link with arrow — no button shape */
#atl-channels .card__actions { margin-top: auto; padding-top: var(--space-sm); }

#atl-channels .card__button {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    min-height: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    box-shadow: none;
    transition: color 0.2s ease, gap 0.2s ease;
}

#atl-channels .card__button::after {
    content: '→';
    display: inline-block;
    transition: transform 0.2s ease;
}

#atl-channels .card__button:hover {
    color: #fff;
    gap: 0.55rem;
    background: none;
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

#atl-channels .card__button:hover::after {
    transform: translateX(3px);
}

/* Dark text link on lime card (card 4) */
#atl-channels .card-grid .info-card:nth-child(4) .card__button { color: rgba(3, 5, 13, 0.65); }
#atl-channels .card-grid .info-card:nth-child(4) .card__button:hover { color: #03050d; }

/* DOOH popular indicator (3rd ATL card) */
#atl-channels .card-grid .info-card:nth-child(3) .card-label::after {
    content: ' · Popular';
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.58rem;
    letter-spacing: 0.06em;
}

/* Mobile: all ATL cards full width, stacked */
@media (max-width: 900px) {
    #atl-channels .card-grid {
        grid-template-columns: 1fr;
    }
    #atl-channels .card-grid .info-card,
    #atl-channels .card-grid .info-card:nth-child(4),
    #atl-channels .card-grid .info-card:nth-child(5) {
        grid-column: span 1;
    }
}

/* ==========================================================================
   Impact Dashboard — accountability engine section
   ========================================================================== */

.impact-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
}

/* Left copy column */

.impact-copy h2 {
    font-size: clamp(1.55rem, 2.8vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--adglow-white);
    margin-block: 0.75rem 1rem;
}

.impact-rule {
    width: 2.5rem;
    border: none;
    border-top: 2px solid #02B7D9;
    margin-block: 1.25rem;
}

.impact-copy p:not(.eyebrow) {
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--adglow-muted);
    margin-bottom: 0.9rem;
}

/* Right panels column */
.impact-panels {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Four-year record card */
.impact-record-card {
    position: relative;
    background: rgba(11, 11, 16, 0.75);
    border: 1px solid rgba(2, 183, 217, 0.22);
    border-radius: var(--radius-md);
    padding: 1.75rem 2rem;
    overflow: hidden;
}

/* Corner bracket decorations */
.impact-record-card::before,
.impact-record-card::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: rgba(2, 183, 217, 0.5);
    border-style: solid;
}

.impact-record-card::before {
    top: 10px;
    left: 10px;
    border-width: 2px 0 0 2px;
}

.impact-record-card::after {
    top: 10px;
    right: 10px;
    border-width: 2px 2px 0 0;
}

.impact-record-eyebrow {
    font-family: var(--font-family-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #02B7D9;
    margin-bottom: 0.75rem;
}

.impact-record-hero {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.impact-record-number {
    font-size: clamp(3.5rem, 8vw, 5.5rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: #02B7D9;
}

.impact-record-unit {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--adglow-white);
    text-transform: uppercase;
}

.impact-record-stats {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-block: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 1rem;
}

.impact-record-divider {
    width: 1px;
    height: 2rem;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

.impact-record-stat__value {
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-weight: 800;
    color: #02B7D9;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.1;
}

.impact-record-stat__label {
    font-family: var(--font-family-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--adglow-muted);
    margin-top: 0.2rem;
}

.impact-record-bullets {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.impact-record-bullet {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-family-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--adglow-muted);
}

.impact-bullet-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #02B7D9;
    display: inline-block;
    flex-shrink: 0;
}

/* On schedule → pink, Reported clearly → lime */
.impact-record-bullet:nth-child(2) { color: #BC0A4C; }
.impact-record-bullet:nth-child(2) .impact-bullet-dot { background: #BC0A4C; }
.impact-record-bullet:nth-child(3) { color: #B0DA09; }
.impact-record-bullet:nth-child(3) .impact-bullet-dot { background: #B0DA09; }

/* Proof cards 2x2 grid */
.impact-proof-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.impact-proof-card {
    position: relative;
    background: rgba(11, 11, 16, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 2px solid var(--card-accent, #02B7D9);
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.impact-proof-card:hover {
    border-color: var(--card-accent, #02B7D9);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
}

.impact-proof-card__inner {
    flex: 1;
}

.impact-proof-stat {
    font-size: clamp(0.85rem, 1.4vw, 1rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--card-accent, #02B7D9);
    text-transform: uppercase;
    margin-bottom: 0.2rem;
    line-height: 1.2;
}

.impact-proof-label {
    font-family: var(--font-family-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--adglow-muted);
    margin-bottom: 0.65rem;
}

.impact-proof-text {
    font-size: 0.8rem;
    line-height: 1.65;
    color: var(--adglow-muted);
}

.impact-proof-arrow {
    position: absolute;
    top: 0.75rem;
    right: 0.85rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.2);
    transition: color 0.2s ease;
}

.impact-proof-card:hover .impact-proof-arrow {
    color: var(--card-accent, #02B7D9);
}

/* Responsive */
@media (max-width: 860px) {
    .impact-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .impact-proof-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .impact-proof-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Phase 8 — Contact, CTA, and form handling
   Contact: 4 interface module cards. CTA sections: accent eyebrow + border.
   No form — phone / email / LinkedIn / direct contact methods only.
   ========================================================================== */

/* ─── 1. Image CTA: eyebrow size and spacing ─── */
.image-cta-section .eyebrow,
.image-cta .eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.18em;
}

/* ─── 2. Image CTA no-media: accent top border + reinforced dark glass ─── */
.image-cta:not(.has-media) {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 2px solid rgba(2, 183, 217, 0.40);
}

/* Full-bleed variant: top accent, no side borders (spans full width) */
.image-cta--full-bleed:not(.has-media) {
    border-inline: none;
    border-bottom: none;
    border-top: 2px solid rgba(2, 183, 217, 0.32);
}

/* ─── 3. Image CTA: h2 typography — large, confident, on-brand ─── */
.image-cta:not(.has-media) h2 {
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--adglow-white);
}

.image-cta--full-bleed:not(.has-media) h2 {
    font-size: clamp(1.9rem, 4vw, 3.2rem);
}

/* ─── 4. Contact page: 4-card grid — ensure 4 columns on desktop ─── */
#contact-details .contact-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ─── 5. Contact card: "Direct" label gets amber accent (4th card) ─── */
/* Phase 6 already sets nth-child(4) border-top amber — no change needed */

/* Contact card link target area: generous tap zone */
.contact-card a {
    display: block;
    word-break: break-all;
}

/* ─── 6. Credentials: solid coloured cards ─── */
#about-credentials .trust-list article {
    border-top: none;
    border: none;
}

/* White text on the first three coloured cards */
#about-credentials .trust-list article:nth-child(1) p,
#about-credentials .trust-list article:nth-child(2) p,
#about-credentials .trust-list article:nth-child(3) p {
    color: #fff;
}

/* Lime card (4th) needs dark text — white h3/p rules would otherwise override */
#about-credentials .trust-list article:nth-child(4) h3,
#about-credentials .trust-list article:nth-child(4) p {
    color: #03050d;
}

/* ─── 6. Contact what-to-include: trust section on contact page ─── */
#contact-what-to-include .trust-list article:nth-child(1) { border-top: 2px solid #02B7D9; }
#contact-what-to-include .trust-list article:nth-child(2) { border-top: 2px solid #BC0A4C; }
#contact-what-to-include .trust-list article:nth-child(3) { border-top: 2px solid #DF8502; }
#contact-what-to-include .trust-list article:nth-child(4) { border-top: 2px solid #A4CB0A; }

/* ─── 7. Footer CTA consistency ─── */
/* Footer already has dark treatment from Phase 5A. Ensure CTA links in footer use brand colours */
.site-footer a:not(.nav-link):not(.footer-brand) {
    color: rgba(232, 237, 247, 0.65);
    transition: color 0.2s ease;
}

.site-footer a:not(.nav-link):not(.footer-brand):hover {
    color: var(--adglow-white);
}

/* ==========================================================================
   Phase 9 — Component-level fixes for responsive polish
   ========================================================================== */

/* ─── Section separators: suppress between fully transparent dark sections ─── */
/* Prevents double-line artifacts where glass sections adjoin on dark canvas */
.intro-section + .card-grid-section,
.card-grid-section + .card-grid-section,
.card-grid-section + .intro-section,
.intro-section + .process-section,
.process-section + .image-cta-section,
.trust-section + .image-cta-section,
.card-grid-section + .image-cta-section,
.intro-section + .trust-section {
    border-top: none;
}

/* ─── FAQ: ensure summary always has adequate tap target ─── */
/* Base CSS already sets min-height: 64px (well above 44px minimum) ─── */
/* No override needed */

/* ─── Stats "At a glance": header matches grid width ─── */
#proof-points .section-header {
    width: 100%;
    max-width: 100%;
}

/* ─── Services overview (home): wider header, colored cards, per-card icons ─── */

#services-overview .section-header {
    width: 100%;
    max-width: 100%;
}

/* Base: dark text — works on bright cards (1, 2, 3, 4, 6) */
#services-overview .service-card {
    color: #03050d !important;
    border: none !important;
    border-top: 0 none transparent !important;
    border-top-width: 0 !important;
    border-top-style: none !important;
    border-top-color: transparent !important;
}

#services-overview .service-card .card-icon {
    display: block;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
    line-height: 0;
    margin-bottom: var(--space-sm);
    opacity: 0.90;
}

#services-overview .service-card .card-label {
    color: #03050d !important;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#services-overview .service-card h3 {
    color: #03050d !important;
}

#services-overview .service-card > p:not(.card-label) {
    color: rgba(0, 0, 0, 0.70) !important;
}

/* Per-card: background + matching color glow */
#services-overview .service-card:nth-child(1) { background: #F00A5E !important; box-shadow: 0 6px 28px rgba(240,  10,  94, 0.55); }
#services-overview .service-card:nth-child(2) { background: #F99400 !important; box-shadow: 0 6px 28px rgba(249, 148,   0, 0.55); }
#services-overview .service-card:nth-child(3) { background: #B0DA09 !important; box-shadow: 0 6px 28px rgba(176, 218,   9, 0.50); }
#services-overview .service-card:nth-child(4) { background: #00D9FF !important; box-shadow: 0 6px 28px rgba(  0, 217, 255, 0.50); }
#services-overview .service-card:nth-child(5) { background: #B80090 !important; box-shadow: 0 6px 28px rgba(184,   0, 144, 0.60); }
#services-overview .service-card:nth-child(6) { background: #FFFFFF !important; box-shadow: 0 6px 28px rgba(255, 255, 255, 0.30); }

/* Card 5 (#B80090) is dark — switch to white text */
#services-overview .service-card:nth-child(5)                           { color: #fff !important; }
#services-overview .service-card:nth-child(5) .card-label               { color: #fff !important; }
#services-overview .service-card:nth-child(5) h3                        { color: #fff !important; }
#services-overview .service-card:nth-child(5) > p:not(.card-label)      { color: rgba(255, 255, 255, 0.82) !important; }

/* Hover: intensify glow + lift */
#services-overview .service-card:nth-child(1):hover { box-shadow: 0 14px 48px rgba(240,  10,  94, 0.75); }
#services-overview .service-card:nth-child(2):hover { box-shadow: 0 14px 48px rgba(249, 148,   0, 0.75); }
#services-overview .service-card:nth-child(3):hover { box-shadow: 0 14px 48px rgba(176, 218,   9, 0.68); }
#services-overview .service-card:nth-child(4):hover { box-shadow: 0 14px 48px rgba(  0, 217, 255, 0.68); }
#services-overview .service-card:nth-child(5):hover { box-shadow: 0 14px 48px rgba(184,   0, 144, 0.80); }
#services-overview .service-card:nth-child(6):hover { box-shadow: 0 14px 48px rgba(255, 255, 255, 0.45); }

#services-overview .service-card:hover {
    border: none !important;
    filter: brightness(1.05);
    transform: translateY(-3px);
}

/* ═══════════════════════════════════════════════════════
   #platforms-overview — full rewrite
   ═══════════════════════════════════════════════════════ */

/* 1 — Header: flex column so every child centres as a flex item */
#platforms-overview .section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 100%;
    margin-inline: auto;
    margin-bottom: var(--space-xl);
}

#platforms-overview .section-header .eyebrow {
    margin-bottom: 0.5rem;
}

#platforms-overview .section-header h2 {
    font-size: clamp(1.6rem, 2.4vw, 2.6rem);
    margin: 0 0 1rem;
}

#platforms-overview .section-header > p:not(.eyebrow) {
    max-width: 620px;
    color: rgba(232, 237, 247, 0.72);
    margin: 0;
}

/* 2 — Module row: both blocks span full width, digital 1.6× wider than ATL */
#platforms-overview .chip-groups {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* 3 — ATL block */
#platforms-overview .chip-groups > .chip-group:nth-child(2) {
    --chip-group-dot: var(--adglow-cyan);
}

#platforms-overview .chip-groups > .chip-group:nth-child(1) {
    --chip-group-dot: #B0DA09;
}

/* 4 — Glass panel */
#platforms-overview .chip-group {
    position: relative;
    padding: var(--space-xl);
    border-radius: 14px;
    background: rgba(8, 12, 26, 0.90);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    min-width: 0;
}

/* Corner brackets */
#platforms-overview .chip-group::before,
#platforms-overview .chip-group::after {
    content: '';
    position: absolute;
    top: 10px;
    width: 14px;
    height: 14px;
    border-color: rgba(255, 255, 255, 0.30);
    border-style: solid;
}

#platforms-overview .chip-group::before {
    left: 10px;
    border-width: 2px 0 0 2px;
    border-radius: 2px 0 0 0;
}

#platforms-overview .chip-group::after {
    right: 10px;
    border-width: 2px 2px 0 0;
    border-radius: 0 2px 0 0;
}

/* 5 — Group heading with glowing dot */
#platforms-overview .chip-group__heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--space-lg);
    color: rgba(232, 237, 247, 0.55);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
}

#platforms-overview .chip-group__heading::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--chip-group-dot, var(--adglow-cyan));
    box-shadow: 0 0 8px var(--chip-group-dot, var(--adglow-cyan));
}

/* 6 — Chip tile grids */
#platforms-overview .chip-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

#platforms-overview .chip-groups > .chip-group:nth-child(2) .chip-list {
    grid-template-columns: repeat(2, 1fr);
}

/* 7 — Individual chip tile */
#platforms-overview .platform-chip {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 2.5px solid var(--chip-color, rgba(255, 255, 255, 0.18));
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    color: rgba(232, 237, 247, 0.90);
    cursor: default;
    transition: background var(--transition-fast), border-bottom-color var(--transition-fast);
}

#platforms-overview .platform-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    border-bottom-color: var(--chip-color, rgba(255, 255, 255, 0.45));
}

#platforms-overview .chip-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

#platforms-overview .chip-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: rgba(232, 237, 247, 0.82);
}

#platforms-overview .chip-icon svg {
    width: 28px;
    height: 28px;
}

/* 8 — Button centred below */
#platforms-overview .section-actions {
    margin-top: var(--space-xl);
    justify-content: center;
}

/* 9 — Responsive: stack vertically, clip overflow */
@media (max-width: 900px) {
    #platforms-overview {
        overflow-x: hidden;
    }

    #platforms-overview .chip-groups {
        grid-template-columns: 1fr;
    }

    #platforms-overview .chip-group {
        padding: var(--space-lg);
    }

    #platforms-overview .chip-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    /* Smaller chip tiles so longer labels (Programmatic, Pinterest) fit in 2-col */
    #platforms-overview .platform-chip {
        padding: 0.5rem 0.55rem;
        gap: 0.4rem;
        font-size: 0.78rem;
    }

    #platforms-overview .chip-logo {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    #platforms-overview .chip-icon svg {
        width: 22px;
        height: 22px;
    }
}

/* ─── Logo carousel section ─── */

.section.logo-carousel-section {
    background: transparent;
    border-top: none;
}

.logo-carousel-section .section-header {
    text-align: center;
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: var(--space-2xl);
}

.logo-carousel-section .section-header h2 {
    margin-inline: auto;
}

/* Overflow wrapper with soft edge fade */
.logo-carousel {
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 7%,
        black 93%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 7%,
        black 93%,
        transparent 100%
    );
}

/* Scrolling track: duplicated content enables seamless loop */
.logo-track {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: max-content;
    animation: logo-scroll 38s linear infinite;
}

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

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

@media (prefers-reduced-motion: reduce) {
    .logo-track {
        animation: none;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
    }
}

/* Individual logo tile */
.logo-slide {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    min-width: 150px;
    height: 84px;
    border-radius: 12px;
    background: rgba(11, 11, 16, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.logo-slide:hover {
    background: rgba(11, 11, 16, 0.90);
    border-color: rgba(2, 183, 217, 0.45);
    box-shadow: 0 0 16px rgba(2, 183, 217, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Logo image: contain, full-colour by default */
.logo-slide img {
    max-width: 110px;
    max-height: 44px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    filter: none;
    opacity: 1;
    transition: transform var(--transition-fast), filter var(--transition-fast);
}

.logo-slide:hover img {
    transform: scale(1.06);
    filter: brightness(1.15) drop-shadow(0 0 6px rgba(31, 94, 255, 0.25));
}

@media (max-width: 640px) {
    .logo-slide {
        min-width: 110px;
        height: 64px;
        padding: 0.7rem 1rem;
    }

    .logo-slide img {
        max-width: 80px;
        max-height: 36px;
    }
}