/* ==========================================================================
   Hero — Variation C: Editorial Collage / Mosaic
   ==========================================================================
   An asymmetric CSS Grid mosaic that breaks the hero image into 5 tiles
   of varying sizes. Text content occupies one quadrant (bottom-left) while
   image tiles fill the rest, creating a magazine editorial layout.

   Grid areas (desktop 12-col, 8-row):
   ┌─────────────┬───────────┬───────────────────┐
   │             │           │                   │
   │   tile-1    │  tile-3   │      tile-3       │
   │  (tall,     │  (wide    │    (continued)    │
   │   3 cols)   │  strip,   │                   │
   │             │  5 cols)  ├─────────┬─────────┤
   │             │           │ tile-4  │ tile-5  │
   │             ├───────────┤(square) │(small)  │
   │             │           │         │         │
   ├─────────────┤  text     ├─────────┴─────────┤
   │             │  (body +  │                   │
   │   tile-1    │   CTAs)   │      tile-4       │
   │  (cont.)   │           │    (continued)    │
   └─────────────┴───────────┴───────────────────┘
   ========================================================================== */


/* --------------------------------------------------------------------------
   Grid Container
   -------------------------------------------------------------------------- */

.hero-mosaic {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--color-secondary);
}

.hero-mosaic__grid {
    display: grid;
    grid-template-columns: 3fr 4fr 3fr 2fr;
    grid-template-rows: 1fr 1fr 0.6fr 0.8fr 0.6fr;
    gap: 6px;
    height: var(--hero-height);
    padding: 6px;

    grid-template-areas:
        "tile1  tile3  tile3  tile3"
        "tile1  tile3  tile3  tile3"
        "tile1  text   tile4  tile5"
        "tile1  text   tile4  tile5"
        "tile1  text   tile4  tile5";
}


/* --------------------------------------------------------------------------
   Individual Tiles — shared
   -------------------------------------------------------------------------- */

.hero-mosaic__tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.hero-mosaic__tile-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.6s var(--ease-out);
}

.hero-mosaic__tile:hover .hero-mosaic__tile-img {
    transform: scale(1.03);
}

.hero-mosaic__tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(var(--color-secondary-rgb), 0.25) 0%,
        rgba(var(--color-secondary-rgb), 0.08) 100%
    );
    pointer-events: none;
    z-index: 1;
}

.hero-mosaic__tile-overlay--light {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(var(--color-secondary-rgb), 0.15) 100%
    );
}

.hero-mosaic__tile-overlay--dark {
    background: linear-gradient(
        45deg,
        rgba(var(--color-secondary-rgb), 0.5) 0%,
        rgba(0, 0, 0, 0.3) 100%
    );
}


/* --------------------------------------------------------------------------
   Tile 1 — Tall left column
   -------------------------------------------------------------------------- */

.hero-mosaic__tile--1 {
    grid-area: tile1;
}

.hero-mosaic__tile--1 .hero-mosaic__tile-img {
    background-position: 25% center;
}


/* --------------------------------------------------------------------------
   Tile 2 — Text cell (bottom-center)
   -------------------------------------------------------------------------- */

.hero-mosaic__tile--text {
    grid-area: text;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: var(--space-xl) var(--space-lg);
    background-color: var(--color-secondary-dark);
    border-radius: var(--radius-sm);
    z-index: 2;
}


/* --------------------------------------------------------------------------
   Tile 3 — Wide horizontal strip (top-right)
   -------------------------------------------------------------------------- */

.hero-mosaic__tile--3 {
    grid-area: tile3;
}

.hero-mosaic__tile--3 .hero-mosaic__tile-img {
    background-position: center 30%;
}


/* --------------------------------------------------------------------------
   Tile 4 — Square tile (center-right)
   -------------------------------------------------------------------------- */

.hero-mosaic__tile--4 {
    grid-area: tile4;
}

.hero-mosaic__tile--4 .hero-mosaic__tile-img {
    background-position: 60% center;
}

/* Red accent stripe — diagonal bar inside tile 4 */
.hero-mosaic__accent-stripe {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--color-primary);
    z-index: 2;
}


/* --------------------------------------------------------------------------
   Tile 5 — Small detail tile (bottom-right)
   -------------------------------------------------------------------------- */

.hero-mosaic__tile--5 {
    grid-area: tile5;
}

.hero-mosaic__tile--5 .hero-mosaic__tile-img {
    background-position: 80% 70%;
}


/* --------------------------------------------------------------------------
   Text Content
   -------------------------------------------------------------------------- */

.hero-mosaic__content {
    max-width: 100%;
}

.hero-mosaic__kicker {
    font-family: var(--font-accent);
    font-size: var(--text-super);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-super);
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
    display: block;
}

.hero-mosaic__heading {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
    color: var(--text-inverse);
    margin-bottom: var(--space-md);
}

.hero-mosaic__body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--gray-300);
    margin-bottom: var(--space-lg);
    max-width: 38ch;
}

.hero-mosaic__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
}

/* Outline button — white on dark tile background */
.hero-mosaic__actions .btn--outline {
    color: var(--text-inverse);
    border-color: var(--text-inverse);
}

.hero-mosaic__actions .btn--outline:hover {
    background-color: var(--text-inverse);
    color: var(--color-secondary);
}


/* --------------------------------------------------------------------------
   Trust Badge Row — sits below the grid
   -------------------------------------------------------------------------- */

.hero-mosaic__trust {
    background-color: var(--color-secondary-dark);
    border-top: 2px solid var(--color-primary);
    padding: var(--space-lg) 0;
}

.hero-mosaic__trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xl) var(--space-3xl);
}

.hero-mosaic__trust-badge {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.hero-mosaic__trust-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    flex-shrink: 0;
}

.hero-mosaic__trust-text {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--gray-300);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Entrance Animations
   -------------------------------------------------------------------------- */

@keyframes mosaicTileReveal {
    from {
        opacity: 0;
        transform: scale(1.08);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes mosaicTextSlide {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-mosaic__tile--1 {
    animation: mosaicTileReveal var(--animation-duration) var(--ease-animation) both;
    animation-delay: 0ms;
}

.hero-mosaic__tile--3 {
    animation: mosaicTileReveal var(--animation-duration) var(--ease-animation) both;
    animation-delay: calc(var(--stagger-base) * 1);
}

.hero-mosaic__tile--4 {
    animation: mosaicTileReveal var(--animation-duration) var(--ease-animation) both;
    animation-delay: calc(var(--stagger-base) * 2);
}

.hero-mosaic__tile--5 {
    animation: mosaicTileReveal var(--animation-duration) var(--ease-animation) both;
    animation-delay: calc(var(--stagger-base) * 3);
}

.hero-mosaic__content {
    animation: mosaicTextSlide var(--animation-duration) var(--ease-animation) both;
    animation-delay: calc(var(--stagger-base) * 2);
}

.hero-mosaic__trust {
    animation: mosaicTextSlide 500ms var(--ease-animation) both;
    animation-delay: calc(var(--stagger-base) * 4);
}


/* --------------------------------------------------------------------------
   Responsive: Tablet (max-width: 999px)
   -------------------------------------------------------------------------- */

@media (max-width: 999px) {
    .hero-mosaic__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 2fr 1.5fr 1.5fr;
        height: auto;
        min-height: 700px;

        grid-template-areas:
            "tile3  tile3"
            "tile1  tile4"
            "text   tile5";
    }

    .hero-mosaic__tile--text {
        padding: var(--space-lg);
        align-items: center;
    }

    .hero-mosaic__heading {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
    }

    .hero-mosaic__body {
        display: none;
    }

    .hero-mosaic__actions {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .hero-mosaic__actions .btn {
        width: 100%;
        text-align: center;
    }

    .hero-mosaic__trust-row {
        gap: var(--space-lg) var(--space-xl);
    }
}


/* --------------------------------------------------------------------------
   Responsive: Mobile (max-width: 690px)
   -------------------------------------------------------------------------- */

@media (max-width: 690px) {
    .hero-mosaic__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 180px 140px auto;
        height: auto;
        min-height: 0;
        gap: 4px;
        padding: 4px;

        grid-template-areas:
            "tile3  tile1"
            "tile4  tile5"
            "text   text";
    }

    .hero-mosaic__tile--text {
        padding: var(--space-lg) var(--space-md);
        align-items: flex-start;
    }

    .hero-mosaic__heading {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .hero-mosaic__body {
        display: block;
        font-size: var(--text-sm);
        margin-bottom: var(--space-md);
    }

    .hero-mosaic__actions .btn {
        padding: 12px 24px;
        font-size: var(--text-sm);
    }

    .hero-mosaic__trust-row {
        flex-direction: column;
        align-items: center;
        gap: var(--space-md);
    }

    .hero-mosaic__trust-text {
        font-size: var(--text-xs);
    }
}


/* --------------------------------------------------------------------------
   No-image fallback
   -------------------------------------------------------------------------- */

.hero-mosaic__tile--1:empty,
.hero-mosaic__tile--3:empty,
.hero-mosaic__tile--4:empty,
.hero-mosaic__tile--5:empty {
    display: none;
}

/* When no image tiles exist, text fills full width */
.hero-mosaic__grid:has(> .hero-mosaic__tile--text:only-child) {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "text";
    min-height: 500px;
}


/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .hero-mosaic__tile--1,
    .hero-mosaic__tile--3,
    .hero-mosaic__tile--4,
    .hero-mosaic__tile--5,
    .hero-mosaic__content,
    .hero-mosaic__trust {
        animation: none;
    }

    .hero-mosaic__tile:hover .hero-mosaic__tile-img {
        transform: none;
    }
}


/* ==========================================================================
   S-005: Emergency Service Banner — Variation C (Editorial Mosaic)
   ==========================================================================
   Matches the editorial/mosaic hero aesthetic. Dark secondary bg with
   a bold red left-border accent. Typography follows the collage's
   editorial feel — tighter, more structured.
   ========================================================================== */

.emergency-banner {
    background-color: var(--color-secondary-dark);
    color: var(--text-inverse);
    padding: var(--space-lg) 0;
    position: relative;
    overflow: hidden;
    border-left: 6px solid var(--color-primary);
}

.emergency-banner__inner {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    flex-wrap: wrap;
}

.emergency-banner__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 0;
    background: var(--color-primary);
    color: var(--text-inverse);
}

.emergency-banner__content {
    flex: 1;
    min-width: 280px;
}

.emergency-banner__heading {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-inverse);
    margin: 0 0 var(--space-3xs) 0;
    line-height: var(--leading-tight);
}

.emergency-banner__body {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-regular);
    line-height: var(--leading-normal);
    color: var(--gray-300);
    margin: 0;
}

.emergency-banner__cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-xl);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-inverse);
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast),
                transform var(--transition-fast);
    white-space: nowrap;
}

.emergency-banner__cta:hover {
    background-color: var(--color-primary-dark);
    transform: translateY(-1px);
    color: var(--text-inverse);
}

.emergency-banner__cta-icon {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .emergency-banner {
        border-left: 4px solid var(--color-primary);
    }

    .emergency-banner__inner {
        flex-direction: column;
        text-align: left;
        gap: var(--space-md);
    }

    .emergency-banner__cta {
        width: 100%;
        justify-content: center;
    }
}



/* ==========================================================================
   S-006: Services Overview Grid — Variation C (Editorial / Mosaic)
   ==========================================================================
   Matches the editorial mosaic hero. Asymmetric 3-column layout with one
   oversized featured card. Dark background section with light text.
   Cards have thin red left-border accents. Magazine-style typography
   with tight heading tracking.
   ========================================================================== */

.services-grid {
    padding: var(--space-4xl) 0;
    background-color: var(--color-secondary);
    color: var(--text-inverse);
    position: relative;
}


/* ── Section Header ─────────────────────────────────────────────────────── */

.services-grid__header {
    text-align: left;
    max-width: 560px;
    margin: 0 0 var(--space-3xl) 0;
}

.services-grid__kicker {
    display: inline-block;
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-super);
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.services-grid__heading {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--text-inverse);
    margin: 0 0 var(--space-md) 0;
}

.services-grid__body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    line-height: var(--leading-relaxed);
    color: var(--gray-300);
    margin: 0;
}


/* ── Card Grid — Editorial layout ──────────────────────────────────────── */

.services-grid__cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-md);
}

/* First card spans 2 rows for featured emphasis */
.services-grid__card:first-child {
    grid-row: 1 / 3;
    padding: var(--space-2xl);
}

.services-grid__card {
    display: flex;
    flex-direction: column;
    padding: var(--space-xl) var(--space-lg);
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid var(--color-primary);
    border-radius: 0;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    transition: background-color var(--transition-base),
                transform var(--transition-base);

    animation: cardSlideIn 450ms var(--ease-animation) both;
    animation-delay: calc(var(--stagger-base) * var(--card-index));
}

@keyframes cardSlideIn {
    from {
        opacity: 0;
        transform: translateX(-16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.services-grid__card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}


/* ── Card Icon ──────────────────────────────────────────────────────────── */

.services-grid__card-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: var(--color-primary);
    color: var(--text-inverse);
    margin-bottom: var(--space-lg);
    transition: transform var(--transition-base);
}

.services-grid__card-icon svg {
    width: 22px;
    height: 22px;
}

.services-grid__card:hover .services-grid__card-icon {
    transform: scale(1.05);
}


/* ── Card Text ──────────────────────────────────────────────────────────── */

.services-grid__card-title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-inverse);
    margin: 0 0 var(--space-sm) 0;
}

.services-grid__card:first-child .services-grid__card-title {
    font-size: var(--text-xl);
}

.services-grid__card-desc {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-regular);
    line-height: var(--leading-relaxed);
    color: var(--gray-400);
    margin: 0;
    flex-grow: 1;
}


/* ── Card Arrow ─────────────────────────────────────────────────────────── */

.services-grid__card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-top: var(--space-lg);
    border-radius: 0;
    background-color: transparent;
    color: var(--gray-500);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast),
                transform var(--transition-fast);
}

.services-grid__card:hover .services-grid__card-arrow {
    background-color: var(--color-primary);
    color: var(--text-inverse);
    border-color: var(--color-primary);
    transform: translateX(4px);
}


/* ── Footer CTA ─────────────────────────────────────────────────────────── */

.services-grid__footer {
    text-align: left;
    margin-top: var(--space-2xl);
}

.services-grid__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-inverse);
    padding: var(--space-sm) 0;
    border: none;
    border-bottom: 2px solid var(--color-primary);
    background: transparent;
    transition: color var(--transition-fast),
                border-color var(--transition-fast);
}

.services-grid__cta:hover {
    color: var(--color-primary);
}

.services-grid__cta svg {
    transition: transform var(--transition-fast);
}

.services-grid__cta:hover svg {
    transform: translateX(6px);
}


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

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

    .services-grid__card:first-child {
        grid-row: auto;
        padding: var(--space-xl) var(--space-lg);
    }

    .services-grid__card:first-child .services-grid__card-title {
        font-size: var(--text-base);
    }

    .services-grid__heading {
        font-size: var(--text-3xl);
    }
}

@media (max-width: 690px) {
    .services-grid {
        padding: var(--space-3xl) 0;
    }

    .services-grid__cards {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .services-grid__card {
        flex-direction: row;
        align-items: center;
        gap: var(--space-md);
        padding: var(--space-md) var(--space-lg);
    }

    .services-grid__card-icon {
        margin-bottom: 0;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
    }

    .services-grid__card-desc {
        display: none;
    }

    .services-grid__card-arrow {
        margin-top: 0;
        margin-left: auto;
    }

    .services-grid__heading {
        font-size: var(--text-2xl);
    }
}



/* ==========================================================================
   S-007: Trust Signals — Variation C (Editorial / Mosaic)
   ==========================================================================
   Dark bg, left-aligned. 2-column asymmetric layout: left column has
   header text, right has trust point grid. Red accent lines. Editorial
   feel matching mosaic hero.
   ========================================================================== */

.trust-signals {
    padding: var(--space-4xl) 0;
    background-color: var(--color-secondary-dark);
    color: var(--text-inverse);
    position: relative;
}


.trust-signals__header {
    text-align: left;
    max-width: 100%;
    margin: 0 0 var(--space-3xl) 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: end;
}

.trust-signals__kicker {
    display: inline-block;
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-super);
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.trust-signals__heading {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--text-inverse);
    margin: 0;
}

.trust-signals__body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    line-height: var(--leading-relaxed);
    color: var(--gray-300);
    margin: 0;
    align-self: end;
}


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

.trust-signals__point {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--color-primary);
    border-radius: 0;
    transition: background-color var(--transition-base),
                transform var(--transition-base);

    animation: trustSlide 450ms var(--ease-animation) both;
    animation-delay: calc(var(--stagger-base) * var(--point-index));
}

@keyframes trustSlide {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

.trust-signals__point:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(4px);
}


.trust-signals__point-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: var(--color-primary);
    color: var(--text-inverse);
}

.trust-signals__point-icon svg {
    width: 20px;
    height: 20px;
}


.trust-signals__point-title {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-inverse);
    margin: 0 0 var(--space-2xs) 0;
}

.trust-signals__point-desc {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--font-regular);
    line-height: var(--leading-relaxed);
    color: var(--gray-400);
    margin: 0;
}


@media (max-width: 999px) {
    .trust-signals__header {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .trust-signals__heading {
        font-size: var(--text-3xl);
    }
}

@media (max-width: 690px) {
    .trust-signals {
        padding: var(--space-3xl) 0;
    }

    .trust-signals__grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .trust-signals__heading {
        font-size: var(--text-2xl);
    }
}




/* ==========================================================================
   S-008: About / Story Preview — Variation C (Editorial / Mosaic)
   ==========================================================================
   Dark bg, overlapping layout: image bleeds outside grid, text overlaps
   with a dark panel. Red accent lines. Strong editorial impact.
   ========================================================================== */

.about-preview {
    padding: var(--space-4xl) 0;
    background-color: var(--color-secondary-dark);
    color: var(--text-inverse);
    position: relative;
    overflow: hidden;
}

.about-preview__grid {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 0;
    align-items: stretch;
    min-height: 480px;
}


/* ── Image ─────────────────────────────────────────────────────────────── */

.about-preview__media {
    position: relative;
    overflow: hidden;
}

/* Red top bar on image */
.about-preview__media::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--color-primary);
    z-index: 2;
}

.about-preview__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.85) contrast(1.05);
    transition: filter var(--transition-slow);
}

.about-preview__media:hover .about-preview__image {
    filter: brightness(0.95) contrast(1.05);
}

.about-preview__image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-preview__image-placeholder svg {
    width: 64px;
    height: 64px;
    color: var(--gray-500);
}


/* ── Content panel overlapping image ──────────────────────────────────── */

.about-preview__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-3xl) var(--space-3xl) var(--space-3xl) var(--space-2xl);
    background: rgba(var(--color-secondary-rgb), 0.95);
    margin-left: calc(-1 * var(--space-2xl));
    position: relative;
    z-index: 1;
    border-left: 4px solid var(--color-primary);
}

.about-preview__kicker {
    display: inline-block;
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-super);
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.about-preview__heading {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--text-inverse);
    margin: 0 0 var(--space-lg) 0;
}

.about-preview__body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    line-height: var(--leading-relaxed);
    color: var(--gray-300);
    margin: 0 0 var(--space-md) 0;
}

.about-preview__body--highlight {
    color: var(--text-inverse);
    font-weight: var(--font-semibold);
}

.about-preview__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-inverse);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: var(--space-2xs);
    transition: color var(--transition-base),
                border-color var(--transition-base);
}

.about-preview__cta:hover {
    color: var(--color-primary);
}

.about-preview__cta-arrow {
    width: 18px;
    height: 18px;
    transition: transform var(--transition-fast);
}

.about-preview__cta:hover .about-preview__cta-arrow {
    transform: translateX(4px);
}


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

@media (max-width: 999px) {
    .about-preview__heading {
        font-size: var(--text-3xl);
    }

    .about-preview__content {
        padding: var(--space-2xl);
        margin-left: calc(-1 * var(--space-lg));
    }
}

@media (max-width: 690px) {
    .about-preview {
        padding: var(--space-3xl) 0;
    }

    .about-preview__grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .about-preview__media {
        max-height: 280px;
    }

    .about-preview__content {
        margin-left: 0;
        padding: var(--space-xl) var(--space-lg);
        border-left: none;
        border-top: 4px solid var(--color-primary);
    }

    .about-preview__heading {
        font-size: var(--text-2xl);
    }
}




/* ==========================================================================
   S-009: Testimonials Carousel — Variation C (Editorial / Mosaic)
   ==========================================================================
   Dark bg, left-aligned header. Large featured testimonial on left,
   two stacked smaller cards on right. Red accent lines. Editorial.
   ========================================================================== */

.testimonials {
    padding: var(--space-4xl) 0;
    background-color: var(--color-secondary-dark);
    color: var(--text-inverse);
    position: relative;
}

.testimonials__header {
    text-align: left;
    max-width: 560px;
    margin: 0 0 var(--space-2xl) 0;
    padding-left: var(--space-lg);
    border-left: 4px solid var(--color-primary);
}

.testimonials__kicker {
    display: inline-block;
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-super);
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.testimonials__heading {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--text-inverse);
    margin: 0;
}


.testimonials__carousel {
    position: relative;
}

.testimonials__track {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-md);
}

/* First card spans both rows = featured */
.testimonials__card:first-child {
    grid-row: 1 / 3;
    padding: var(--space-2xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.testimonials__card {
    padding: var(--space-xl);
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--color-primary);
    border-radius: 0;
    transition: background-color var(--transition-base),
                transform var(--transition-base);

    animation: testimonialSlide 450ms var(--ease-animation) both;
}

.testimonials__card:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(4px);
}

@keyframes testimonialSlide {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Featured card = bigger text */
.testimonials__card:first-child .testimonials__text {
    font-size: var(--text-lg);
}

.testimonials__card:first-child .testimonials__star {
    width: 20px;
    height: 20px;
}


.testimonials__stars {
    display: flex;
    gap: 2px;
    margin-bottom: var(--space-md);
}

.testimonials__star {
    width: 16px;
    height: 16px;
    fill: var(--gray-600);
}

.testimonials__star--filled {
    fill: var(--color-primary);
}

.testimonials__text {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-regular);
    line-height: var(--leading-relaxed);
    color: var(--gray-300);
    margin: 0 0 var(--space-lg) 0;
    font-style: normal;
}

.testimonials__attribution {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.testimonials__name {
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--text-inverse);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.testimonials__source {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--gray-500);
}

.testimonials__source::before {
    content: '—';
    margin-right: var(--space-2xs);
}


.testimonials__nav {
    position: absolute;
    top: var(--space-md);
    width: 40px;
    height: 40px;
    border-radius: 0;
    background: var(--color-primary);
    border: none;
    color: var(--text-inverse);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-base);
}

.testimonials__nav:hover { background: var(--color-primary-dark); }
.testimonials__nav svg { width: 18px; height: 18px; }
.testimonials__nav--prev { right: calc(var(--space-md) + 48px); }
.testimonials__nav--next { right: var(--space-md); }


.testimonials__dots {
    display: flex;
    gap: var(--space-xs);
    margin-top: var(--space-xl);
}

.testimonials__dot {
    width: 24px;
    height: 3px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-base);
}

.testimonials__dot--active {
    background: var(--color-primary);
}


.testimonials__footer {
    margin-top: var(--space-2xl);
}

.testimonials__cta {
    display: inline-block;
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-inverse);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: var(--space-2xs);
    transition: color var(--transition-base);
}

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


@media (max-width: 999px) {
    .testimonials__heading { font-size: var(--text-3xl); }
}

@media (max-width: 690px) {
    .testimonials { padding: var(--space-3xl) 0; }
    .testimonials__track { grid-template-columns: 1fr; }
    .testimonials__card:first-child { grid-row: auto; }
    .testimonials__heading { font-size: var(--text-2xl); }
    .testimonials__nav { display: none; }
}