/* =================================================================
   Dana Duhok — Pages
   Clean, minimal, spacious. Flat cards, tinted-accent icons,
   crisp grids. No glow, no blur, no rainbow gradients.
   ================================================================= */

/* Section primitive */
.section { padding: clamp(60px, 8.5vw, 116px) 0; position: relative; z-index: 1; }
.section--tight { padding: clamp(40px, 6vw, 70px) 0; }
.section--alt { background: var(--c-bg-2); }
.section-head { text-align: center; max-width: 740px; margin: 0 auto 56px; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-title { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem); margin-bottom: 16px; }
.section-lead {
    color: var(--c-text-2);
    font-size: clamp(1.04rem, .4vw + .96rem, 1.2rem);
    line-height: 1.65;
    max-width: 600px;
    margin: 0 auto;
}
.section-foot { display: flex; justify-content: center; margin-top: 48px; }

/* =================================================================
   HERO  (fallback when the slideshow is hidden)
   ================================================================= */
.hero {
    padding-top: clamp(36px, 5vw, 72px);
    padding-bottom: clamp(50px, 7vw, 90px);
    position: relative;
}
.hero__inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
}
.hero__copy { position: relative; z-index: 2; }
.hero__title {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: clamp(2.3rem, 1.2rem + 4vw, 4rem);
}
.hero__lead {
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--c-text-2);
    max-width: 540px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__trust {
    list-style: none; padding: 0; margin: 44px 0 0;
    display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 52px);
}
.hero__trust strong {
    display: block;
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--c-primary);
}
.hero__trust span { font-size: .82rem; color: var(--c-text-3); letter-spacing: .02em; }

/* HERO visual — clean flat dashboard mockup */
.hero__visual { position: relative; min-height: 420px; padding: 6px; }
.hero__visual::before { content: none; }

.dashboard-card {
    position: relative;
    z-index: 1;
    padding: 24px;
    display: flex; flex-direction: column;
    gap: 20px;
}
.dashboard-card__head { display: flex; align-items: center; justify-content: space-between; }
.dashboard-card__title {
    display: flex; align-items: center; gap: 9px;
    color: var(--c-text); font-weight: 600; font-size: .94rem;
}
.dashboard-card__title::before {
    content: '';
    width: 8px; height: 8px; border-radius: 999px;
    background: var(--c-success);
}
.dashboard-card__meta { color: var(--c-text-3); font-size: .78rem; }

.pulse-graph {
    height: 108px; width: 100%;
    background: var(--c-bg-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border);
    position: relative;
    overflow: hidden;
}
.pulse-graph svg { width: 100%; height: 100%; position: relative; z-index: 1; }
.pulse-path {
    stroke: var(--c-primary);
    stroke-width: 2.2; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: drawPulse 4s ease-in-out infinite;
}
@keyframes drawPulse {
    0%   { stroke-dashoffset: 1200; }
    55%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -1200; }
}

.dashboard-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vital {
    padding: 14px;
    border-radius: var(--radius-md);
    background: var(--c-bg-2);
    border: 1px solid var(--c-border);
}
.vital__label { font-size: .68rem; color: var(--c-text-3); letter-spacing: .1em; text-transform: uppercase; }
.vital__value {
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--c-text);
    margin-top: 4px;
    letter-spacing: -.02em;
}
.vital__value em { font-style: normal; font-size: .72rem; color: var(--c-text-3); margin-left: 3px; font-weight: 400; }
.vital__trend { margin-top: 8px; height: 3px; background: var(--c-border); border-radius: 999px; overflow: hidden; position: relative; }
.vital__trend::before {
    content: '';
    position: absolute; inset: 0;
    width: var(--w, 60%);
    background: var(--c-primary);
    border-radius: inherit;
}
.dashboard-card__chips { display: flex; flex-wrap: wrap; gap: 8px; }

.floating-card {
    position: absolute;
    padding: 12px 15px;
    display: flex; align-items: center; gap: 11px;
    border-radius: var(--radius-md);
    z-index: 2;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-md);
}
.floating-card strong { display: block; font-size: .9rem; color: var(--c-text); }
.floating-card span { font-size: .74rem; color: var(--c-text-3); }
.floating-card__icon {
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    background: var(--c-accent-soft);
    color: var(--c-primary);
    display: inline-flex; align-items: center; justify-content: center;
}
.floating-card__icon svg { width: 18px; height: 18px; stroke-width: 2; }
.floating-card--a { top: 6%; right: -4%; }
.floating-card--b { bottom: 8%; left: -6%; }

/* =================================================================
   TRUST BAR
   ================================================================= */
.trust-bar {
    padding: 26px 0;
    border-block: 1px solid var(--c-border);
    background: var(--c-bg-2);
}
.trust-bar__inner { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; }
.trust-bar__label {
    font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--c-text-3);
}
.trust-bar__logos {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 28px;
    font-weight: 600;
    color: var(--c-text-2);
}
.trust-bar__logos li { opacity: .7; transition: opacity .2s, color .2s; }
.trust-bar__logos li:hover { opacity: 1; color: var(--c-primary); }

/* =================================================================
   SERVICES grid
   ================================================================= */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
/* Open cards: no box by default, only a subtle hover lift */
.service-card {
    padding: 28px 4px 26px;
    display: flex; flex-direction: column;
    color: var(--c-text);
    transition: transform .25s ease;
}
.service-card:hover { transform: translateY(-4px); color: var(--c-text); }
.service-card__icon {
    width: 56px; height: 56px;
    border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    background: var(--grad-primary);
    color: #fff;
    box-shadow: var(--shadow-btn);
}
.service-card__icon svg { width: 27px; height: 27px; }
.service-card__title { font-size: 1.22rem; margin-bottom: 8px; }
.service-card__text { color: var(--c-text-2); font-size: .94rem; flex: 1; margin: 0 0 16px; }
.service-card__more {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 7px;
    font-weight: 600; color: var(--c-accent-ink);
    font-size: .9rem;
}
.service-card__more svg { width: 16px; height: 16px; transition: transform .25s; }
.service-card:hover .service-card__more svg { transform: translateX(4px); }

/* =================================================================
   WHY grid
   ================================================================= */
.why-grid {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.why-card { padding: 32px 28px; }
.why-card__num {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    border-radius: var(--radius-md);
    background: var(--grad-primary);
    box-shadow: var(--shadow-btn);
    margin-bottom: 18px;
    letter-spacing: -.02em;
}
.why-card h3 { font-size: 1.24rem; margin-bottom: 8px; }
.why-card p  { font-size: .94rem; margin: 0; color: var(--c-text-2); }

/* =================================================================
   PEOPLE / CLIENTS cards
   ================================================================= */
.doctors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}
.doctor-card {
    padding: 24px 16px;
    text-align: center;
    color: var(--c-text);
    transition: transform .25s ease;
}
.doctor-card:hover { transform: translateY(-4px); color: var(--c-text); }
.doctor-card__avatar {
    width: 84px; height: 84px;
    border-radius: 999px;
    margin: 0 auto 16px;
    background: var(--c-primary);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.5rem;
    position: relative;
    letter-spacing: -.01em;
}
.doctor-card__avatar--xl { width: 112px; height: 112px; font-size: 2rem; }
.doctor-card__name { font-size: 1.12rem; margin-bottom: 4px; }
.doctor-card__title { font-size: .85rem; color: var(--c-text-3); margin-bottom: 14px; }
.doctor-card__chip {
    display: inline-block;
    padding: 4px 12px; border-radius: 999px; font-size: .74rem; font-weight: 600;
    color: var(--c-primary);
    background: var(--c-accent-soft);
    border: 1px solid color-mix(in srgb, var(--c-primary) 22%, transparent);
}
.doctor-card__years { display: block; font-size: .8rem; color: var(--c-text-3); margin-top: 10px; }
.doctor-card__langs { list-style: none; padding: 0; margin: 12px 0 0; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.doctor-card__langs li {
    font-size: .68rem; padding: 2px 8px; border-radius: 999px;
    background: var(--c-surface-glass); color: var(--c-text-3);
    border: 1px solid var(--c-border);
}

/* =================================================================
   STATS
   ================================================================= */
.stats-row {
    padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 24px;
    text-align: center;
}
.stat__value {
    display: block;
    font-size: clamp(2.2rem, 3vw, 3rem);
    color: var(--c-primary);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.035em;
}
.stat__label { display: block; font-size: .82rem; color: var(--c-text-3); margin-top: 8px; letter-spacing: .02em; }

/* =================================================================
   Interior-page cards — clear surfaces
   -----------------------------------------------------------------
   These pages mark cards with `.glass`, which already supplies the
   surface (bg + border + radius + shadow). The earlier open / "de-boxed"
   look stripped that and left cards floating on the dark background;
   here we keep the surface and just restore the padding the open
   layout had collapsed, plus a consistent hover lift.
   ================================================================= */
.service-card.glass { padding: 30px 26px 26px; }
.doctor-card.glass  { padding: 30px 20px; }
.stats-row.glass    { padding: clamp(26px, 3vw, 38px) clamp(22px, 3vw, 36px); }

/* Keep inline pills / links from stretching full-width inside the
   column-flex cards (default align-items:stretch blows them out). */
.service-card .chip,
.service-card__icon,
.service-card__more { align-self: flex-start; }

.service-card.glass--glow:hover,
.why-card.glass--glow:hover,
.doctor-card.glass--glow:hover {
    border-color: var(--c-border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

/* Section background tones — all mix the brand accent over the base, so the
   page reads as a sequence of distinct zones while staying one hue, and a
   single accent change re-skins every zone. Tones step up in accent strength:
   base (0%) → --alt (6%) → --tint (11%) → --band (full gradient). */
.section--alt  { background: var(--c-bg-2); }
.section--tint { background: color-mix(in srgb, var(--c-primary) 11%, var(--c-bg-base)); }
.section--band {
    background: var(--grad-hero);
    color: #fff;
}
.section--band .section-title { color: #fff; }
.section--band .section-lead  { color: rgba(255,255,255,.9); }
.section--band .eyebrow { background: rgba(255,255,255,.16); color: #fff; }
.section--band .eyebrow__dot { background: #fff; }
.section--band .stat__value { color: #fff; }
.section--band .stat__label { color: rgba(255,255,255,.82); }

/* =================================================================
   Per-section background "skins" — each section gets its own
   single-hue accent treatment (dots, grid, diagonal wash, soft
   radial tint, fade…) so every zone feels distinct while the page
   stays monochrome. Every colour is mixed from --c-primary over the
   theme base, so changing the Brand accent re-skins them all, and
   they adapt automatically between light and dark themes.
   Patterns are kept faint so text and cards stay perfectly legible.
   ================================================================= */

/* Fine dot grid on the base surface */
.section--dots {
    background-color: var(--c-bg-base);
    background-image: radial-gradient(circle,
        color-mix(in srgb, var(--c-primary) 22%, transparent) 1px, transparent 1.6px);
    background-size: 22px 22px;
    background-position: -11px -11px;
}

/* Square hairline grid on the base surface */
.section--grid {
    background-color: var(--c-bg-base);
    background-image:
        linear-gradient(color-mix(in srgb, var(--c-primary) 7%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--c-primary) 7%, transparent) 1px, transparent 1px);
    background-size: 44px 44px;
}

/* Faint diagonal pin-stripes on the base surface */
.section--stripes {
    background-color: var(--c-bg-base);
    background-image: repeating-linear-gradient(45deg,
        color-mix(in srgb, var(--c-primary) 6%, transparent) 0 1px,
        transparent 1px 16px);
}

/* Horizontal hairlines (ledger rules) on the soft wash */
.section--rule {
    background-color: var(--c-bg-2);
    background-image: repeating-linear-gradient(0deg,
        transparent 0 39px,
        color-mix(in srgb, var(--c-primary) 6%, transparent) 39px 40px);
}

/* Diagonal gradient wash — light → stronger accent across the section */
.section--diag {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--c-primary) 3%,  var(--c-bg-base)) 0%,
        color-mix(in srgb, var(--c-primary) 13%, var(--c-bg-base)) 100%);
}

/* Soft radial tint anchored top-right on the base surface */
.section--glow {
    background:
        radial-gradient(90% 130% at 100% 0%,
            color-mix(in srgb, var(--c-primary) 13%, transparent) 0%, transparent 58%),
        var(--c-bg-base);
}

/* Two-corner radial tint over the soft wash */
.section--mesh {
    background:
        radial-gradient(62% 85% at 0% 0%,
            color-mix(in srgb, var(--c-primary) 11%, transparent), transparent 55%),
        radial-gradient(62% 85% at 100% 100%,
            color-mix(in srgb, var(--c-primary) 10%, transparent), transparent 55%),
        var(--c-bg-2);
}

/* Vertical fade — base at the top easing into the soft wash, so the
   section dissolves into the one below it */
.section--fade {
    background: linear-gradient(180deg, var(--c-bg-base) 0%, var(--c-bg-2) 100%);
}

/* Reverse fade — soft wash easing back down to base (closes the page) */
.section--fade-up {
    background: linear-gradient(180deg, var(--c-bg-2) 0%, var(--c-bg-base) 100%);
}

/* Wide diagonal light beam sweeping across the base surface */
.section--beam {
    background:
        linear-gradient(115deg,
            transparent 0%, transparent 40%,
            color-mix(in srgb, var(--c-primary) 9%, transparent) 50%,
            transparent 60%, transparent 100%),
        var(--c-bg-base);
}

/* -----------------------------------------------------------------
   Texture is reserved for the hero. Every content section keeps its
   solid background colour but drops the dot / grid / stripe / rule
   pattern, so only the hero reads as "lined" and the rest of the page
   stays clean. (Hero texture lives on .page-hero::after — untouched.)
   ----------------------------------------------------------------- */
.section.section--dots,
.section.section--grid,
.section.section--stripes,
.section.section--rule {
    background-image: none;
}

/* "How it works" — open numbered steps, no boxes */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 36px 32px;
}
.step__num {
    width: 50px; height: 50px; border-radius: 999px;
    background: var(--grad-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.1rem;
    box-shadow: var(--shadow-btn);
    margin-bottom: 18px;
}
.step h3 { font-size: 1.22rem; margin-bottom: 8px; }
.step p  { color: var(--c-text-2); margin: 0; }

/* Newsletter — a single gradient feature panel (intentional, not a card grid) */
.newsletter {
    background: var(--grad-hero);
    color: #fff;
    border-radius: var(--radius-2xl);
    padding: clamp(36px, 5vw, 64px);
    text-align: center;
}
.newsletter .eyebrow { background: rgba(255,255,255,.16); color: #fff; }
.newsletter .eyebrow__dot { background: #fff; }
.newsletter h2 { color: #fff; margin: 16px 0 10px; }
.newsletter p  { color: rgba(255,255,255,.9); max-width: 560px; margin: 0 auto 24px; }
.newsletter__form { display: flex; gap: 10px; max-width: 520px; margin: 0 auto; }
.newsletter__form input {
    flex: 1; min-width: 0;
    padding: 14px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.4);
    background: rgba(255,255,255,.14);
    color: #fff;
    font-family: inherit; font-size: .98rem;
}
.newsletter__form input::placeholder { color: rgba(255,255,255,.72); }
.newsletter__form input:focus { outline: none; border-color: #fff; background: rgba(255,255,255,.2); }
.newsletter__form .btn--primary { background: #fff; color: var(--c-primary-2); box-shadow: none; }
.newsletter__form .btn--primary:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(0,0,0,.4); }
.newsletter__note { font-size: .82rem; color: rgba(255,255,255,.8); margin-top: 14px; }
@media (max-width: 560px) { .newsletter__form { flex-direction: column; } }

/* =================================================================
   TESTIMONIALS
   ================================================================= */
.testimonial-grid {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.testimonial { padding: 28px; }
.testimonial__quote { font-size: 1.02rem; line-height: 1.6; color: var(--c-text); margin-bottom: 20px; }
.testimonial__author { display: flex; align-items: center; gap: 12px; }
.testimonial__author strong { display: block; font-weight: 600; }
.testimonial__author span { font-size: .82rem; color: var(--c-text-3); }

/* =================================================================
   CTA
   ================================================================= */
.section--cta { padding-bottom: clamp(50px, 7vw, 90px); }
.cta {
    padding: clamp(36px, 4.5vw, 60px);
    display: grid; grid-template-columns: 1.4fr 1fr;
    gap: 32px; align-items: center;
    position: relative; overflow: hidden;
    background: var(--grad-hero);
    border: 0;
    color: #fff;
}
.cta::before { content: none; }
.cta__copy h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.7rem); color: #fff; }
.cta__copy p { color: rgba(255,255,255,.92); }
.cta .eyebrow { background: rgba(255,255,255,.16); color: #fff; }
.cta .eyebrow__dot { background: #fff; }
.cta .btn--primary { background: #fff; color: var(--c-primary-2); box-shadow: none; }
.cta .btn--primary:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 10px 28px -10px rgba(0,0,0,.4); }
.cta .btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.cta .btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }
.cta__copy h2 { margin: 10px 0; }
.cta__copy p { margin: 0; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

/* =================================================================
   PAGE HERO (interior pages)
   ================================================================= */
.page-hero {
    padding: clamp(36px, 5vw, 72px) 0 clamp(20px, 3vw, 40px);
    text-align: center;
    position: relative;
}
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero__title { margin: 0 0 14px; }
.page-hero__lead { max-width: 660px; margin: 0 auto; color: var(--c-text-2); font-size: 1.05rem; line-height: 1.6; }
.back-link {
    display: inline-flex; gap: 6px;
    color: var(--c-text-3); font-size: .9rem;
    margin-bottom: 14px;
}
.back-link:hover { color: var(--c-primary); }

/* Detail hero */
.detail-hero {
    display: grid; grid-template-columns: 1.4fr .8fr; gap: 32px; align-items: center; text-align: left;
}
.detail-hero__icon, .detail-hero__avatar { padding: 32px; text-align: center; }
.detail-hero__icon svg { color: var(--c-primary); }
.detail-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.detail-hero__avatar strong { display: block; font-size: 1.35rem; margin-top: 14px; }

.detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; }
.detail-body, .detail-side { padding: 32px; }
.detail-body h2, .detail-side h3 { margin-top: 0; }
.detail-body p { color: var(--c-text-2); }

.kv { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; }
.kv dt { color: var(--c-text-3); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.kv dd { margin: 0; color: var(--c-text); font-size: .96rem; }

/* About */
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.about-block { padding: 32px; }

/* About — unified page: anchor offset (clear the fixed nav) + in-page jump nav */
.page-about [id] { scroll-margin-top: 110px; }
.about-jump { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.about-jump__card { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 18px; border-radius: var(--radius-lg); text-decoration: none; color: var(--c-text); }
.about-jump__title { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; letter-spacing: -.02em; }
.about-jump__text { color: var(--c-text-2); font-size: .92rem; line-height: 1.5; flex: 1; }
.about-jump__card .service-card__more { margin-top: 4px; }
.values-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.value-card { padding: 32px 28px; }
.value-card__num {
    font-size: 1.2rem; font-weight: 800;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: var(--radius-md);
    background: var(--grad-primary);
    box-shadow: var(--shadow-btn);
    margin-bottom: 14px;
}

/* Form shell */
.form-shell { display: grid; grid-template-columns: 1.4fr .8fr; gap: 18px; align-items: start; }
.form-aside { padding: 32px; }
.form-aside h3 { margin-top: 0; }
/* Sidebar column that stacks more than one card (e.g. the quote page's
   "Why work with us?" card + contact card), keeping the same gap. */
.form-aside-stack { display: grid; gap: 18px; align-items: start; }

/* Filter bar */
.filter-bar {
    padding: 16px;
    display: flex; flex-wrap: wrap; gap: 16px;
    align-items: center; justify-content: space-between;
    margin-bottom: 26px;
}
.filter-bar__input {
    flex: 1; min-width: 220px;
    padding: 11px 15px;
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border-strong);
    background: var(--c-bg-base);
    color: var(--c-text);
    font-family: inherit; font-size: .94rem;
}
.filter-bar__input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 16%, transparent);
}
.filter-bar__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-btn {
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    cursor: pointer;
    font-size: .82rem; font-weight: 500;
    color: var(--c-text-2);
    font-family: inherit;
    transition: background-color .18s, color .18s, border-color .18s;
}
.chip-btn:hover { color: var(--c-primary); border-color: var(--c-primary); }
.chip-btn.is-active {
    background: var(--c-primary); color: #fff;
    border-color: var(--c-primary);
}

/* Hours — modern segmented rows: each day is its own soft tile with the
   time as a tabular figure on the right; "Closed" days read as a muted pill. */
.hours { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.hours__row {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    background: var(--c-surface-2);
    border: 1px solid transparent;
    color: var(--c-text-2);
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.hours__row:hover {
    background: color-mix(in srgb, var(--c-primary) 7%, var(--c-surface-2));
    transform: translateX(2px);
}
.hours__day { font-weight: 500; min-width: 0; }
.hours__time {
    color: var(--c-text); font-weight: 700;
    font-size: .9rem; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* "Closed" days read as a muted pill rather than bold hours */
.hours__row.is-closed .hours__time {
    font-weight: 600; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--c-text-3);
    padding: 4px 11px; border-radius: 999px;
    background: color-mix(in srgb, var(--c-text-3) 13%, transparent);
}
.hours__row--empty { background: transparent; }

/* Timezone caption — tells visitors which clock the schedule refers to */
.hours__tz {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 12px;
    font-size: .8rem; color: var(--c-text-3);
}
.hours__tz strong { color: var(--c-text-2); font-weight: 700; white-space: nowrap; }
.hours__tz-ico { display: inline-grid; place-items: center; color: var(--c-primary); flex-shrink: 0; }
.hours__tz-ico .ico { width: 15px; height: 15px; }

/* =================================================================
   Contact card — the featured "Office & hours" aside
   ================================================================= */
/* The soft brand glow is painted as a background layer on the card itself —
   NOT a positioned element. A previous absolutely-positioned glow with
   z-index:-1 and negative offsets escaped the clip and broke page layout
   (footer reflowed into a side column); a background layer can never do that. */
.contact-card {
    overflow: hidden;
    background:
        radial-gradient(220px 200px at calc(100% + 8px) -8px,
            color-mix(in srgb, var(--c-primary) 16%, transparent), transparent 70%),
        var(--c-surface);
}
.contact-card.glass--glow:hover { transform: translateY(-3px); }

/* gradient accent beam along the top edge */
.contact-card__beam {
    position: absolute; inset: 0 0 auto 0; height: 4px;
    background: var(--grad-primary);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* section titles with an accent icon badge */
.contact-card__title { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.contact-card__title-ico {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px; flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--c-tint);
    color: var(--c-primary);
}
.contact-card__title-ico .ico { width: 20px; height: 20px; }

/* contact rows rendered as branded icon chips */
.contact-list--chips li { align-items: center; gap: 13px; }
.contact-list--chips .contact-list__icon {
    display: inline-grid; place-items: center;
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--c-accent-soft);
    color: var(--c-primary);
    opacity: 1;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.contact-list--chips .contact-list__icon .ico { width: 17px; height: 17px; }
.contact-list--chips li:hover .contact-list__icon {
    background: var(--c-primary); color: #fff; transform: scale(1.06);
}

/* hours header carries the live status pill */
.contact-card__hours-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.contact-card__hours-head .contact-card__title { margin-bottom: 0; }

/* open / closed status pill */
.status-pill {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .76rem; font-weight: 600; letter-spacing: .02em;
    padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}
.status-pill__dot { width: 8px; height: 8px; border-radius: 50%; position: relative; flex-shrink: 0; }
.status-pill--open  { color: var(--c-success); background: color-mix(in srgb, var(--c-success) 15%, transparent); }
.status-pill--open  .status-pill__dot { background: var(--c-success); }
.status-pill--open  .status-pill__dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: inherit; animation: statusPulse 2s ease-out infinite;
}
.status-pill--closed { color: var(--c-text-3); background: color-mix(in srgb, var(--c-text-3) 12%, transparent); }
.status-pill--closed .status-pill__dot { background: var(--c-text-3); }

@keyframes statusPulse {
    0%        { transform: scale(1);   opacity: .55; }
    70%, 100% { transform: scale(2.6); opacity: 0; }
}

/* highlight the row matching today — a bold brand tile with an accent rail */
.hours__row.is-today {
    background: color-mix(in srgb, var(--c-primary) 12%, var(--c-surface));
    border-color: color-mix(in srgb, var(--c-primary) 28%, transparent);
    box-shadow: inset 3px 0 0 var(--c-primary);
    padding-left: 16px;
    color: var(--c-text);
}
.hours__row.is-today:hover { transform: none; }
.hours__row.is-today .hours__time { color: var(--c-primary); }
.hours__row.is-today.is-closed .hours__time {
    color: var(--c-primary);
    background: color-mix(in srgb, var(--c-primary) 14%, transparent);
}
.hours__today {
    display: inline-block; margin-left: 8px;
    font-style: normal; font-size: .62rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--c-on-accent); background: var(--c-primary);
    padding: 2px 8px; border-radius: 999px; vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
    .status-pill--open .status-pill__dot::after { animation: none; }
    .contact-card.glass--glow:hover { transform: none; }
}

/* =================================================================
   "Why work with us?" — a highlighted, full-width SECTION (not a card).
   Stands alone on home; sits before/after the form on quote & contact.
   Refined directional wash: a quiet single-hue diagonal gives the band
   crafted tonal depth (deepening toward the upper-right) with a soft pool
   of brand colour easing in top-left where the heading sits, seated by a
   fine inset top-edge highlight and thin neutral rules. All colour derives
   from --c-primary via color-mix over the theme base, so it re-skins with
   the brand accent and adapts to light/dark. No saturated fill, so the
   benefits as clean icon + text items (no boxes) keep their normal tokens.
   ================================================================= */
.whywork-section {
    background:
        radial-gradient(110% 120% at 0% 0%,
            color-mix(in srgb, var(--c-primary) 5%, transparent) 0%,
            transparent 60%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--c-primary) 4%,  var(--c-bg-base)) 0%,
            color-mix(in srgb, var(--c-primary) 11%, var(--c-bg-base)) 100%);
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-primary) 7%, transparent);
}
.whywork-grid {
    list-style: none; padding: 0; margin: clamp(30px, 3.4vw, 48px) 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(264px, 1fr));
    gap: clamp(22px, 2.6vw, 38px);
}
.whywork-benefit { display: flex; gap: 16px; align-items: flex-start; text-align: left; }
.whywork-benefit__icon {
    display: inline-grid; place-items: center;
    width: 46px; height: 46px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--c-surface);
    border: 1px solid var(--c-accent-tint);
    color: var(--c-primary);
}
.whywork-benefit__icon .ico { width: 22px; height: 22px; }
.whywork-benefit__body { padding-top: 2px; }
.whywork-benefit__title { margin: 0; font-size: 1.06rem; line-height: 1.25; }
.whywork-benefit__text  { margin: 6px 0 0; color: var(--c-text-2); font-size: .94rem; line-height: 1.55; }
.whywork-cta { margin-top: clamp(30px, 3.4vw, 46px); text-align: center; }

/* Auth */
.auth-page { background: var(--c-bg-2); }
.auth-shell {
    min-height: calc(100vh - 200px);
    display: flex; align-items: center; justify-content: center;
    padding: 60px 20px;
}
.auth-card { width: min(440px, 100%); padding: 38px; }
.auth-card__brand { text-align: center; margin-bottom: 24px; }
.auth-card__brand svg { margin: 0 auto 14px; }
.auth-card__brand h1 { font-size: 1.6rem; margin: 0 0 6px; }
.auth-card__brand .muted { font-size: .92rem; }
.auth-card__back { text-align: center; margin: 20px 0 0; }
.auth-card__back a { color: var(--c-text-3); }
.auth-card__back a:hover { color: var(--c-primary); }

/* Map frame */
.map-frame {
    position: relative;
    aspect-ratio: 16 / 7;
    min-height: 340px;
    overflow: hidden;
    padding: 0;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
html[data-mode="dark"] .map-frame iframe { filter: invert(0.9) hue-rotate(180deg); }
.map-fallback {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-accent-ink);
    font-weight: 600;
    background: var(--c-tint);
}

/* =================================================================
   CUSTOM (admin-built) pages
   ================================================================= */
.custom-hero {
    padding: clamp(60px, 9vw, 130px) 0;
    text-align: center;
    position: relative;
}
.custom-hero--image {
    background-size: cover;
    background-position: center;
    color: #fff;
    min-height: 60vh;
    display: flex; align-items: center;
}
.custom-hero__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8,16,32,.62), rgba(8,16,32,.72));
}
.custom-hero__inner { position: relative; z-index: 1; max-width: 820px; margin-inline: auto; }
.custom-hero--image .custom-hero__inner .eyebrow { color: #fff; }
.custom-hero--image .eyebrow__dot { background: #fff; }
.custom-hero__title { margin: 18px 0 14px; font-size: clamp(2.4rem, 1.4rem + 4vw, 4.4rem); }
.custom-hero--image .custom-hero__title { color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.custom-hero__lead { font-size: 1.15rem; line-height: 1.65; color: var(--c-text-2); max-width: 620px; margin: 0 auto; }
.custom-hero--image .custom-hero__lead { color: rgba(255,255,255,.94); text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.custom-hero__cta { margin-top: 28px; }

.page-prose { font-size: 1.08rem; line-height: 1.8; color: var(--c-text-2); }
.page-prose strong { color: var(--c-text); }

.custom-banner { width: 100%; border-radius: var(--radius-xl); border: 1px solid var(--c-border); display: block; }
.custom-banner__caption { margin-top: 12px; text-align: center; font-size: .9rem; }

/* Errors */
.error-shell { min-height: 60vh; display: flex; align-items: center; }
.error-card { padding: 48px; text-align: center; }
.error-card h1 {
    font-size: 4.4rem;
    color: var(--c-primary);
    margin: 0 0 8px; line-height: 1;
    letter-spacing: -.04em;
}

/* =================================================================
   PER-PAGE IDENTITY
   -----------------------------------------------------------------
   Every interior page DERIVES its accent from the BRAND accent colour
   (admin Settings → falls back to the active theme hue), rotated a
   different amount around the colour wheel. Change the brand accent
   and all the pages shift with it while staying distinct from each
   other. Theming is scoped to the page content, so the navbar &
   footer keep the pure brand colour. Derived tokens are recomputed
   here because custom props computed at :root don't re-cascade.
   Browsers without relative-colour syntax fall back to the brand hue.
   ================================================================= */
:is(.page-about,.page-services,.page-products,.page-solutions,.page-clients,.page-logistics,.page-news,.page-contact) {
    /* the origin every page rotates from = the brand accent */
    --c-brand: var(--c-accent, var(--c-hue, #2563EB));

    --grad-primary:      linear-gradient(135deg, var(--c-primary) 0%, var(--c-teal) 100%);
    --grad-primary-deep: linear-gradient(135deg, var(--c-primary-2) 0%, var(--c-primary) 100%);
    --grad-hero:         linear-gradient(135deg, var(--c-primary-2) 0%, var(--c-primary) 45%, var(--c-teal) 100%);
    --grad-text:         linear-gradient(120deg, var(--c-primary), var(--c-teal));
    --c-accent-soft:     color-mix(in srgb, var(--c-primary) 14%, transparent);
    --c-accent-tint:     color-mix(in srgb, var(--c-primary) 8%, transparent);
    --c-tint:            color-mix(in srgb, var(--c-primary) 13%, transparent);
}
/* Companion shades derived from each page's primary via relative-colour
   syntax. In hsl(from …) the l channel resolves to a NUMBER (0–100), so the
   delta must be a bare number — `calc(l - 9%)` mixes number with percentage,
   which is a type error that makes the colour invalid (turning anything that
   uses var(--c-primary-2), e.g. the button :hover fill, transparent).
   Guarded by @supports so browsers without relative colour keep the solid
   :root fallbacks (--c-primary-2 / --c-teal) instead of an invalid value. */
@supports (color: hsl(from red h s l)) {
    :is(.page-about,.page-services,.page-products,.page-solutions,.page-clients,.page-logistics,.page-news,.page-contact) {
        --c-primary-2: hsl(from var(--c-primary) h s calc(l - 9));
        --c-teal:      hsl(from var(--c-primary) h s calc(l + 12)); /* same hue — monochromatic companion */
    }
}
html[data-mode="light"] :is(.page-about,.page-services,.page-products,.page-solutions,.page-clients,.page-logistics,.page-news,.page-contact) { --c-accent-ink: color-mix(in srgb, var(--c-primary) 80%, #000); }
html[data-mode="dark"]  :is(.page-about,.page-services,.page-products,.page-solutions,.page-clients,.page-logistics,.page-news,.page-contact) { --c-accent-ink: color-mix(in srgb, var(--c-primary) 62%, #fff); }

/* Every page uses the SINGLE brand accent — per-page hue rotation removed.
   (Each page used to spin --c-primary +150°…+320° around the wheel, which is
   what made every page look like a different colour.) */
.page-about,
.page-services,
.page-products,
.page-solutions,
.page-logistics,
.page-clients,
.page-news,
.page-contact   { --c-primary: var(--c-brand); }

/* signature hero: glow + texture layer, positioned per page */
:is(.page-about,.page-services,.page-products,.page-solutions,.page-clients,.page-logistics,.page-news,.page-contact) .page-hero {
    position: relative; overflow: hidden;
    padding-top: clamp(50px, 6vw, 96px);
    padding-bottom: clamp(34px, 4vw, 58px);
}
:is(.page-about,.page-services,.page-products,.page-solutions,.page-clients,.page-logistics,.page-news,.page-contact) .page-hero::before {
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background: radial-gradient(58% 78% at var(--hero-glow, 50% -8%),
        color-mix(in srgb, var(--c-primary) 24%, transparent), transparent 68%);
}
:is(.page-about,.page-services,.page-products,.page-solutions,.page-clients,.page-logistics,.page-news,.page-contact) .page-hero::after {
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55;
    -webkit-mask: linear-gradient(180deg, #000 25%, transparent 92%);
            mask: linear-gradient(180deg, #000 25%, transparent 92%);
}
:is(.page-about,.page-services,.page-products,.page-solutions,.page-clients,.page-logistics,.page-news,.page-contact) .page-hero > .container { position: relative; z-index: 1; }

/* About — centred hub, concentric rings */
.page-about .page-hero { --hero-glow: 50% -12%; }
.page-about .page-hero::after {
    background: repeating-radial-gradient(circle at 50% -28%,
        transparent 0 56px, color-mix(in srgb, var(--c-primary) 28%, transparent) 56px 57px);
}

/* Services — left-aligned, dotted grid drifting in from the right */
.page-services .page-hero { --hero-glow: 86% -14%; }
.page-services .page-hero::after {
    background-image: radial-gradient(color-mix(in srgb, var(--c-primary) 42%, transparent) 1.4px, transparent 1.7px);
    background-size: 26px 26px;
    -webkit-mask: radial-gradient(72% 130% at 100% 0%, #000, transparent 72%);
            mask: radial-gradient(72% 130% at 100% 0%, #000, transparent 72%);
}

/* Clients — centred, soft secondary wash bottom-left */
.page-clients .page-hero { --hero-glow: 50% -10%; }
.page-clients .page-hero::after {
    background: radial-gradient(42% 75% at 10% 135%, color-mix(in srgb, var(--c-primary) 17%, transparent), transparent 70%);
    opacity: 1;
}

/* Logistics — left-aligned, in-transit diagonal lines (cold-chain) */
.page-logistics .page-hero { --hero-glow: 12% -14%; }
.page-logistics .page-hero::after {
    background-image: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--c-primary) 16%, transparent) 0 1px, transparent 1px 17px);
}

/* News — left-aligned, editorial horizontal rules */
.page-news .page-hero { --hero-glow: 84% -14%; }
.page-news .page-hero::after {
    background-image: repeating-linear-gradient(0deg,
        color-mix(in srgb, var(--c-primary) 15%, transparent) 0 1px, transparent 1px 30px);
    -webkit-mask: linear-gradient(90deg, transparent, #000 62%);
            mask: linear-gradient(90deg, transparent, #000 62%);
}

/* Products — centred, blueprint catalogue grid (rows & columns of SKUs) */
.page-products .page-hero { --hero-glow: 50% -12%; }
.page-products .page-hero::after {
    background-image:
        repeating-linear-gradient(0deg,  color-mix(in srgb, var(--c-primary) 13%, transparent) 0 1px, transparent 1px 32px),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--c-primary) 13%, transparent) 0 1px, transparent 1px 32px);
    -webkit-mask: radial-gradient(120% 92% at 50% -10%, #000 34%, transparent 80%);
            mask: radial-gradient(120% 92% at 50% -10%, #000 34%, transparent 80%);
}

/* Solutions — centred, interlocking diagonal mesh (integrated systems) */
.page-solutions .page-hero { --hero-glow: 82% -14%; }
.page-solutions .page-hero::after {
    background-image:
        repeating-linear-gradient(45deg,  color-mix(in srgb, var(--c-primary) 11%, transparent) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(-45deg, color-mix(in srgb, var(--c-primary) 11%, transparent) 0 1px, transparent 1px 24px);
    -webkit-mask: radial-gradient(78% 128% at 100% 0%, #000, transparent 72%);
            mask: radial-gradient(78% 128% at 100% 0%, #000, transparent 72%);
}

/* Contact — centred, calm vertical rules fading in from the top */
.page-contact .page-hero { --hero-glow: 50% -12%; }
.page-contact .page-hero::after {
    background-image: repeating-linear-gradient(90deg,
        color-mix(in srgb, var(--c-primary) 12%, transparent) 0 1px, transparent 1px 34px);
    -webkit-mask: radial-gradient(120% 90% at 50% -8%, #000 30%, transparent 82%);
            mask: radial-gradient(120% 90% at 50% -8%, #000 30%, transparent 82%);
}

/* left-aligned hero pages get matching left-aligned heads */
:is(.page-services,.page-logistics,.page-news) .page-hero { text-align: left; }
:is(.page-services,.page-logistics,.page-news) .page-hero__lead { margin-left: 0; margin-right: auto; }
.page-news .section-head { text-align: left; max-width: 760px; margin-left: 0; }
.page-news .section-head .section-lead { margin-left: 0; }

/* =================================================================
   SERVICES — rich entries: spotlight, badges, stats, process steps,
   gallery, FAQ accordion, and the "something special" block.
   Every hue resolves through --c-primary, so the page stays monochrome.
   ================================================================= */

/* Accent badge (cards + spotlight) */
.svc-badge {
    display: inline-flex; align-items: center; gap: 6px;
    align-self: flex-start;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--grad-primary);
    padding: 5px 11px; border-radius: 999px;
    box-shadow: var(--shadow-btn);
}
.svc-badge--star::before { content: "★"; font-size: .82em; }
.service-card__badge { position: absolute; top: 16px; right: 16px; z-index: 2; }
.service-card__tagline { color: var(--c-accent-ink); font-weight: 600; font-size: .9rem; margin: 0 0 10px; }

/* Featured spotlight */
.svc-spotlight {
    display: grid; grid-template-columns: .9fr 1.1fr;
    overflow: hidden; margin-bottom: 26px; color: var(--c-text);
}
.svc-spotlight:hover { color: var(--c-text); }
.svc-spotlight__media { position: relative; min-height: 280px; background: var(--c-surface-2); }
.svc-spotlight__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.svc-spotlight__iconwrap {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--grad-hero);
}
.svc-spotlight__iconwrap svg { width: 84px; height: 84px; color: #fff; }
.svc-spotlight__body { padding: clamp(26px, 3.4vw, 44px); display: flex; flex-direction: column; }
.svc-spotlight__title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); margin: 12px 0 0; }
.svc-spotlight__tagline { color: var(--c-accent-ink); font-weight: 600; margin: 8px 0 0; }
.svc-spotlight__text { color: var(--c-text-2); margin: 8px 0 0; }
.svc-spotlight__stats { display: flex; flex-wrap: wrap; gap: 26px 34px; margin: 22px 0 4px; }
.svc-spotlight__more {
    margin-top: 20px; display: inline-flex; align-items: center; gap: 8px;
    font-weight: 700; color: var(--c-accent-ink);
}
.svc-spotlight__more svg { width: 18px; height: 18px; transition: transform .25s; }
.svc-spotlight:hover .svc-spotlight__more svg { transform: translateX(4px); }

/* Stat unit (spotlight + detail band) */
.svc-stat { display: flex; flex-direction: column; }
.svc-stat__value { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); font-weight: 800; color: var(--c-primary); line-height: 1; letter-spacing: -.03em; }
.svc-stat__label { font-size: .82rem; color: var(--c-text-3); margin-top: 7px; }
.svc-stat--lg .svc-stat__value { font-size: clamp(1.8rem, 1.2rem + 1.8vw, 2.6rem); }

/* Something special — custom request block */
.svc-special {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    gap: clamp(20px, 3vw, 38px); padding: clamp(26px, 3.2vw, 44px);
}
.svc-special__icon {
    width: 72px; height: 72px; border-radius: var(--radius-lg); flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--grad-primary); color: #fff; box-shadow: var(--shadow-btn);
}
.svc-special__icon svg { width: 34px; height: 34px; }
.svc-special__title { margin: 12px 0 8px; }
.svc-special__text { color: var(--c-text-2); margin: 0; max-width: 62ch; }
.svc-special__action { flex-shrink: 0; }

/* Detail-page extras */
.detail-hero__tagline { color: var(--c-accent-ink); font-weight: 600; font-size: 1.05rem; margin: 0 0 8px; }
.detail-hero__price { display: inline-flex; align-items: center; color: var(--c-text-2); font-weight: 600; font-size: .92rem; margin: 14px 0 0; }
.detail-hero__img { min-height: 260px; background-size: cover; background-position: center; padding: 0; }
.detail-side__cta { margin-top: 22px; }

.svc-statsband {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: clamp(20px, 3vw, 40px); text-align: center;
    padding: clamp(26px, 3vw, 40px);
}
.svc-statsband .svc-stat { align-items: center; }

/* Process steps */
.svc-steps {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.svc-step { display: flex; gap: 18px; padding: 26px 24px; align-items: flex-start; }
.svc-step__num {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.1rem; color: #fff;
    background: var(--grad-primary); box-shadow: var(--shadow-btn);
}
.svc-step__title { font-size: 1.1rem; margin: 4px 0 6px; }
.svc-step__text { color: var(--c-text-2); font-size: .94rem; margin: 0; }

/* Gallery */
.svc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.svc-gallery__item { overflow: hidden; padding: 0; aspect-ratio: 4 / 3; }
.svc-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.svc-gallery__item:hover img { transform: scale(1.05); }

/* FAQ accordion (native <details>) */
.svc-faq { display: flex; flex-direction: column; gap: 12px; }
.svc-faq__item { padding: 0 22px; }
.svc-faq__q {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    cursor: pointer; list-style: none; padding: 18px 0;
    font-weight: 600; color: var(--c-text);
}
.svc-faq__q::-webkit-details-marker { display: none; }
.svc-faq__chev { width: 20px; height: 20px; color: var(--c-text-3); transition: transform .25s ease; flex-shrink: 0; }
.svc-faq__item[open] .svc-faq__chev { transform: rotate(180deg); }
.svc-faq__a { color: var(--c-text-2); padding: 0 0 20px; margin: -4px 0 0; }

@media (max-width: 820px) {
    .svc-spotlight { grid-template-columns: 1fr; }
    .svc-spotlight__media { min-height: 200px; }
    .svc-special { grid-template-columns: 1fr; text-align: left; }
}


/* =================================================================
   CLIENTS — full-height "CLIENTSCAPE".
   The hero and every sector each fill 100vh; each sector is rendered
   with a distinct archetype (split · showcase · band · editorial) so
   no two feel alike. A fixed rail tracks/jumps between sectors.
   Scoped to .page-clients. Single brand hue; works light + dark.
   ================================================================= */

/* Let the hero rise to the very top (the floating nav overlaps it) and
   gently snap each full-height panel into view. Proximity, not mandatory,
   so tall sectors never trap the scroll. */
.site-main.page-clients { padding-top: 0; }
html:has(.page-clients) { scroll-snap-type: y proximity; scroll-padding-top: 0; }

.page-clients .cscape__sec {
    position: relative;
    min-height: 100svh;
    display: grid; align-content: center;
    scroll-snap-align: start;
    padding-block: clamp(108px, 14vh, 168px);
    overflow: hidden;
}

/* ---- Hero ---- */
.page-clients .cscape-hero { text-align: center; }
.page-clients .cscape-hero .eyebrow { margin-bottom: 22px; }
.page-clients .cscape-hero__title {
    margin: 0 0 18px; font-weight: 800;
    font-size: clamp(2.6rem, 1.5rem + 4.6vw, 5rem); line-height: 1.02; letter-spacing: -.035em;
}
.page-clients .cscape-hero__lead {
    max-width: 720px; margin: 0 auto; color: var(--c-text-2);
    font-size: clamp(1.02rem, .96rem + .4vw, 1.22rem); line-height: 1.6;
}
.page-clients .cscape-hero__stats {
    display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(26px, 6vw, 86px);
    margin: clamp(40px, 6vh, 72px) auto 0;
}
.page-clients .csstat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.page-clients .csstat__value {
    font-family: var(--font-display); font-weight: 800; line-height: 1;
    font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.2rem); letter-spacing: -.04em;
    background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
    font-variant-numeric: tabular-nums;
}
.page-clients .csstat__label {
    font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-3);
}

/* =================================================================
   Sector — shared scaffold (archetypes restyle it below)
   ================================================================= */
.page-clients .cssector { display: grid; gap: clamp(30px, 4vw, 58px); }
.page-clients .cssector__head { display: grid; gap: 14px; align-content: start; }
.page-clients .cssector__ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 16px;
    color: var(--c-on-accent); background: var(--grad-hero);
    box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--c-primary) 65%, transparent);
}
.page-clients .cssector__ico .ico { width: 26px; height: 26px; }
.page-clients .cssector__kicker {
    font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-3);
}
.page-clients .cssector__title {
    margin: 0; font-weight: 800; letter-spacing: -.03em;
    font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); line-height: 1.05;
}
.page-clients .cssector__desc { margin: 0; max-width: 56ch; color: var(--c-text-2); font-size: 1.05rem; line-height: 1.6; }

.page-clients .cssector__partners { list-style: none; margin: 0; padding: 0; }
.page-clients .cspartner { display: flex; align-items: center; gap: 14px; min-width: 0; }
.page-clients .cspartner__mark {
    flex: none; width: 46px; height: 46px; border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .95rem; color: var(--c-on-accent); background: var(--grad-hero);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 16%, transparent);
}
.page-clients .cspartner__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.page-clients .cspartner__name { font-size: 1.02rem; font-weight: 700; line-height: 1.25; color: var(--c-text); }
.page-clients .cspartner__loc { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--c-text-3); }
.page-clients .cspartner__loc .ico { width: 13px; height: 13px; color: var(--c-primary); opacity: .85; }
.page-clients .cspartner__since {
    flex: none; font-size: .76rem; font-weight: 600; color: var(--c-text-3);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ----- Archetype A · SPLIT : sticky intro left, editorial rows right ----- */
.page-clients .cscape-sector--split .cssector {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: clamp(30px, 5vw, 76px);
}
.page-clients .cscape-sector--split .cssector__head { position: sticky; top: clamp(120px, 22vh, 200px); }
.page-clients .cscape-sector--split .cssector__partners { display: grid; }
.page-clients .cscape-sector--split .cspartner { padding: 18px 4px; border-top: 1px solid var(--c-border); }
.page-clients .cscape-sector--split .cspartner:last-child { border-bottom: 1px solid var(--c-border); }
.page-clients .cscape-sector--split .cspartner { transition: padding-left .25s ease; }
.page-clients .cscape-sector--split .cspartner:hover { padding-left: 14px; }

/* ----- Archetype B · SHOWCASE : tinted, centered, hairline logo wall ----- */
.page-clients .cscape-sector--showcase { background: var(--c-bg-2); }
.page-clients .cscape-sector--showcase .cssector { justify-items: center; }
.page-clients .cscape-sector--showcase .cssector__head { text-align: center; justify-items: center; max-width: 760px; }
.page-clients .cscape-sector--showcase .cssector__ico { margin-inline: auto; }
.page-clients .cscape-sector--showcase .cssector__desc { margin-inline: auto; }
.page-clients .cscape-sector--showcase .cssector__partners {
    width: 100%; max-width: 1000px; margin-inline: auto;
    display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 1.2vw, 16px);
}
.page-clients .cscape-sector--showcase .cspartner {
    flex: 0 1 210px; flex-direction: column; text-align: center; gap: 13px;
    padding: clamp(22px, 2.6vw, 32px) 20px; border-radius: var(--radius-lg);
    transition: background-color .25s ease, transform .25s ease;
}
.page-clients .cscape-sector--showcase .cspartner:hover { background: var(--c-surface); transform: translateY(-3px); }
.page-clients .cscape-sector--showcase .cspartner__mark { width: 52px; height: 52px; border-radius: 14px; font-size: 1rem; }
.page-clients .cscape-sector--showcase .cspartner__body { align-items: center; flex: 0 0 auto; gap: 5px; }
.page-clients .cscape-sector--showcase .cspartner__since { font-size: .72rem; }

/* ----- Archetype C · BAND : full-bleed accent, partners as pills ----- */
.page-clients .cscape-sector--band { background: var(--grad-hero); color: #fff; }
.page-clients .cscape-sector--band .cssector { justify-items: center; }
.page-clients .cscape-sector--band .cssector__head { text-align: center; justify-items: center; max-width: 780px; }
.page-clients .cscape-sector--band .cssector__ico { margin-inline: auto; background: rgba(255,255,255,.16); box-shadow: none; }
.page-clients .cscape-sector--band .cssector__kicker { color: rgba(255,255,255,.78); }
.page-clients .cscape-sector--band .cssector__title { color: #fff; }
.page-clients .cscape-sector--band .cssector__desc { color: rgba(255,255,255,.9); margin-inline: auto; }
.page-clients .cscape-sector--band .cssector__partners {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.page-clients .cscape-sector--band .cspartner {
    gap: 11px; padding: 10px 18px 10px 11px; border-radius: 999px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
    transition: background-color .25s ease, transform .25s ease;
}
.page-clients .cscape-sector--band .cspartner:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.page-clients .cscape-sector--band .cspartner__mark { width: 38px; height: 38px; border-radius: 11px; background: #fff; color: var(--c-primary-2); box-shadow: none; }
.page-clients .cscape-sector--band .cspartner__name { color: #fff; font-size: .98rem; }
.page-clients .cscape-sector--band .cspartner__loc { color: rgba(255,255,255,.78); }
.page-clients .cscape-sector--band .cspartner__loc .ico { color: #fff; }
.page-clients .cscape-sector--band .cspartner__since { color: rgba(255,255,255,.78); }

/* ----- Archetype D · EDITORIAL : giant faint icon watermark, two-col list ----- */
.page-clients .cscape-sector--editorial { background: var(--c-surface-2); }
.page-clients .cssector__watermark {
    position: absolute; top: 50%; right: clamp(-70px, -2vw, -10px); transform: translateY(-50%);
    width: clamp(280px, 40vw, 560px); pointer-events: none; z-index: 0;
    color: var(--c-primary); opacity: .06;
}
.page-clients .cssector__watermark-ico { width: 100%; height: auto; stroke-width: 1.1; }
.page-clients .cscape-sector--editorial .container { position: relative; z-index: 1; }
.page-clients .cscape-sector--editorial .cssector__head { max-width: 60ch; }
.page-clients .cscape-sector--editorial .cssector__partners {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px);
}
.page-clients .cscape-sector--editorial .cspartner { padding: 16px 4px; border-bottom: 1px solid var(--c-border); }
.page-clients .cscape-sector--editorial .cspartner__mark {
    width: 40px; height: 40px; border-radius: 11px; font-size: .85rem;
    background: var(--c-tint); color: var(--c-accent-ink); box-shadow: none;
}

/* =================================================================
   MORE ARCHETYPES — all share the .cssector scaffold; only the look
   changes (background · intro alignment · partner layout). Selectable
   per industry; see client_section_designs() in core/helpers.php.
   ================================================================= */

/* ----- E · SPOTLIGHT : dark section + accent aura, glassy pills ----- */
.page-clients .cscape-sector--spotlight {
    background: linear-gradient(180deg, #0e1730 0%, #080d1a 100%); color: #fff;
    position: relative; overflow: hidden; isolation: isolate;
}
.page-clients .cscape-sector--spotlight::before {
    content: ""; position: absolute; z-index: -1; left: 50%; top: 30%;
    width: min(900px, 120%); aspect-ratio: 1; transform: translate(-50%, -50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--c-primary) 55%, transparent), transparent 60%);
    filter: blur(40px); opacity: .42; pointer-events: none;
}
.page-clients .cscape-sector--spotlight .cssector { justify-items: center; }
.page-clients .cscape-sector--spotlight .cssector__head { text-align: center; justify-items: center; max-width: 780px; }
.page-clients .cscape-sector--spotlight .cssector__ico { margin-inline: auto; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); box-shadow: none; }
.page-clients .cscape-sector--spotlight .cssector__kicker { color: rgba(255,255,255,.7); }
.page-clients .cscape-sector--spotlight .cssector__title { color: #fff; }
.page-clients .cscape-sector--spotlight .cssector__desc { color: rgba(255,255,255,.72); margin-inline: auto; }
.page-clients .cscape-sector--spotlight .cssector__partners { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.page-clients .cscape-sector--spotlight .cspartner {
    gap: 11px; padding: 12px 18px 12px 12px; border-radius: 14px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: background-color .25s ease, transform .25s ease;
}
.page-clients .cscape-sector--spotlight .cspartner:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.page-clients .cscape-sector--spotlight .cspartner__name { color: #fff; }
.page-clients .cscape-sector--spotlight .cspartner__loc { color: rgba(255,255,255,.66); }
.page-clients .cscape-sector--spotlight .cspartner__loc .ico { color: var(--c-primary); opacity: 1; }
.page-clients .cscape-sector--spotlight .cspartner__since { color: rgba(255,255,255,.66); }

/* ----- F · STACK : centered intro, big full-width stacked rows ----- */
.page-clients .cscape-sector--stack .cssector { justify-items: center; }
.page-clients .cscape-sector--stack .cssector__head { text-align: center; justify-items: center; max-width: 720px; }
.page-clients .cscape-sector--stack .cssector__ico { margin-inline: auto; }
.page-clients .cscape-sector--stack .cssector__desc { margin-inline: auto; }
.page-clients .cscape-sector--stack .cssector__partners { display: grid; width: 100%; max-width: 900px; margin-inline: auto; }
.page-clients .cscape-sector--stack .cspartner { padding: 22px 6px; border-top: 1px solid var(--c-border); transition: padding-left .25s ease; }
.page-clients .cscape-sector--stack .cspartner:last-child { border-bottom: 1px solid var(--c-border); }
.page-clients .cscape-sector--stack .cspartner:hover { padding-left: 16px; }
.page-clients .cscape-sector--stack .cspartner__mark { width: 52px; height: 52px; }
.page-clients .cscape-sector--stack .cspartner__name { font-size: 1.1rem; }

/* ----- G · GRID : tinted, centered intro, soft tile grid ----- */
.page-clients .cscape-sector--grid { background: var(--c-bg-2); }
.page-clients .cscape-sector--grid .cssector { justify-items: center; }
.page-clients .cscape-sector--grid .cssector__head { text-align: center; justify-items: center; max-width: 720px; }
.page-clients .cscape-sector--grid .cssector__ico { margin-inline: auto; }
.page-clients .cscape-sector--grid .cssector__desc { margin-inline: auto; }
.page-clients .cscape-sector--grid .cssector__partners { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.page-clients .cscape-sector--grid .cspartner {
    flex-direction: column; align-items: flex-start; gap: 13px; padding: 22px;
    border-radius: var(--radius-lg); background: var(--c-surface); box-shadow: var(--shadow-sm);
    transition: transform .25s ease, box-shadow .25s ease;
}
.page-clients .cscape-sector--grid .cspartner:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* ----- H · RAIL : horizontal scroll-snap cards ----- */
.page-clients .cscape-sector--rail .cssector__partners {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity;
    padding: 4px 4px 16px; margin-inline: -4px; scrollbar-width: thin;
}
.page-clients .cscape-sector--rail .cspartner {
    flex: 0 0 248px; scroll-snap-align: start; flex-direction: column; align-items: flex-start; gap: 14px;
    padding: 22px; border-radius: var(--radius-lg); background: var(--c-surface); border: 1px solid var(--c-border);
}

/* ----- I · MINIMAL : inline name chips (name-forward) ----- */
.page-clients .cscape-sector--minimal .cssector__partners { display: flex; flex-wrap: wrap; gap: 10px; }
.page-clients .cscape-sector--minimal .cspartner {
    gap: 9px; padding: 8px 15px 8px 9px; border-radius: 999px;
    border: 1px solid var(--c-border); background: var(--c-surface);
    transition: border-color .2s ease, transform .2s ease;
}
.page-clients .cscape-sector--minimal .cspartner:hover { border-color: var(--c-border-strong); transform: translateY(-2px); }
.page-clients .cscape-sector--minimal .cspartner__mark { width: 28px; height: 28px; border-radius: 8px; font-size: .72rem; }
.page-clients .cscape-sector--minimal .cspartner__name { font-size: .92rem; }
.page-clients .cscape-sector--minimal .cspartner__loc,
.page-clients .cscape-sector--minimal .cspartner__since { display: none; }

/* ----- J · FEATURE : left intro, compact two-up partner grid ----- */
.page-clients .cscape-sector--feature .cssector {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(30px, 5vw, 72px);
}
.page-clients .cscape-sector--feature .cssector__partners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.page-clients .cscape-sector--feature .cspartner__since { display: none; }

/* ----- K · COLUMNS : multi-column flowing list ----- */
.page-clients .cscape-sector--columns { background: var(--c-surface-2); }
.page-clients .cscape-sector--columns .cssector__partners { display: block; columns: 2; column-gap: clamp(28px, 4vw, 56px); }
.page-clients .cscape-sector--columns .cspartner { break-inside: avoid; padding: 14px 0; border-bottom: 1px solid var(--c-border); }

/* ----- L · PANEL : gradient intro panel + rows ----- */
.page-clients .cscape-sector--panel .cssector {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: stretch; gap: clamp(24px, 4vw, 56px);
}
.page-clients .cscape-sector--panel .cssector__head {
    background: var(--grad-hero); color: #fff; border-radius: var(--radius-2xl);
    padding: clamp(28px, 3.5vw, 48px); align-content: center;
    box-shadow: 0 30px 70px -30px color-mix(in srgb, var(--c-primary) 70%, transparent);
}
.page-clients .cscape-sector--panel .cssector__ico { background: rgba(255,255,255,.18); box-shadow: none; }
.page-clients .cscape-sector--panel .cssector__kicker { color: rgba(255,255,255,.8); }
.page-clients .cscape-sector--panel .cssector__title { color: #fff; }
.page-clients .cscape-sector--panel .cssector__desc { color: rgba(255,255,255,.9); }
.page-clients .cscape-sector--panel .cssector__partners { display: grid; align-content: center; }
.page-clients .cscape-sector--panel .cspartner { padding: 16px 4px; border-top: 1px solid var(--c-border); }
.page-clients .cscape-sector--panel .cspartner:last-child { border-bottom: 1px solid var(--c-border); }

/* ----- M · CENTER : centered narrow single-column rows ----- */
.page-clients .cscape-sector--center { background: var(--c-bg-2); }
.page-clients .cscape-sector--center .cssector { justify-items: center; }
.page-clients .cscape-sector--center .cssector__head { text-align: center; justify-items: center; max-width: 680px; }
.page-clients .cscape-sector--center .cssector__ico { margin-inline: auto; }
.page-clients .cscape-sector--center .cssector__desc { margin-inline: auto; }
.page-clients .cscape-sector--center .cssector__partners { display: grid; width: 100%; max-width: 640px; margin-inline: auto; }
.page-clients .cscape-sector--center .cspartner { padding: 16px 4px; border-bottom: 1px solid var(--c-border); }
.page-clients .cscape-sector--center .cspartner:first-child { border-top: 1px solid var(--c-border); }

/* ----- N · WALL : bordered hairline grid (logo wall with rules) ----- */
.page-clients .cscape-sector--wall .cssector { justify-items: center; }
.page-clients .cscape-sector--wall .cssector__head { text-align: center; justify-items: center; max-width: 720px; }
.page-clients .cscape-sector--wall .cssector__ico { margin-inline: auto; }
.page-clients .cscape-sector--wall .cssector__desc { margin-inline: auto; }
.page-clients .cscape-sector--wall .cssector__partners {
    width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden;
}
.page-clients .cscape-sector--wall .cspartner {
    flex-direction: column; align-items: center; text-align: center; gap: 12px;
    padding: clamp(24px, 3vw, 34px) 18px; background: var(--c-surface);
    border-right: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border);
    transition: background-color .25s ease;
}
.page-clients .cscape-sector--wall .cspartner:hover { background: var(--c-surface-2); }
.page-clients .cscape-sector--wall .cspartner__body { align-items: center; }

/* ----- O · MONO : big-monogram rows (mark-led) ----- */
.page-clients .cscape-sector--mono { background: var(--c-surface-2); }
.page-clients .cscape-sector--mono .cssector__partners { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.page-clients .cscape-sector--mono .cspartner { gap: 18px; padding: 16px; border-radius: var(--radius-lg); transition: background-color .25s ease; }
.page-clients .cscape-sector--mono .cspartner:hover { background: var(--c-surface); }
.page-clients .cscape-sector--mono .cspartner__mark { width: 60px; height: 60px; border-radius: 16px; font-size: 1.15rem; }

/* =================================================================
   Closing CTA — modern DARK SPOTLIGHT finale.
   A sleek deep-ink section with an ambient brand-accent aura, a glowing
   eyebrow dot, an accent hairline and a gradient button. Highlighted
   without the loud flat fill — the same dark-mode look in both themes.
   ================================================================= */
.page-clients .cscape-cta {
    background: linear-gradient(180deg, #0e1730 0%, #080d1a 100%);
    color: #fff; text-align: center;
    position: relative; overflow: hidden; isolation: isolate;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(255,255,255,.06);
}
/* primary brand spotlight behind the headline (blurred, bleeding) */
.page-clients .cscape-cta::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    left: 50%; top: 34%; width: min(880px, 116%); aspect-ratio: 1; transform: translate(-50%, -50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--c-primary) 62%, transparent), transparent 60%);
    filter: blur(38px); opacity: .5;
}
/* companion glow lower-right for depth + a faint top sheen */
.page-clients .cscape-cta::after {
    content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
    background:
        radial-gradient(48% 58% at 84% 116%, color-mix(in srgb, var(--c-teal) 48%, transparent), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.05), transparent 26%);
    opacity: .9;
}
.page-clients .csfin { position: relative; z-index: 1; max-width: 820px; margin-inline: auto; }
.page-clients .csfin .eyebrow {
    margin-bottom: 22px; color: #fff;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
}
.page-clients .csfin .eyebrow__dot { background: var(--c-primary); box-shadow: 0 0 12px 1px var(--c-primary); }
.page-clients .csfin__title {
    margin: 0 0 18px; color: #fff; font-weight: 800; letter-spacing: -.035em;
    font-size: clamp(2.4rem, 1.4rem + 4.2vw, 4.6rem); line-height: 1.02;
}
.page-clients .csfin__lead { margin: 0 auto; max-width: 54ch; color: rgba(255,255,255,.72); font-size: 1.16rem; line-height: 1.6; }
.page-clients .csfin__rule {
    display: block; width: min(440px, 64%); height: 1px; margin: clamp(30px, 4.5vh, 48px) auto;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-primary) 60%, transparent), transparent);
}
.page-clients .csfin__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.page-clients .cscape-cta .btn--primary {
    background: var(--grad-hero); color: var(--c-on-accent); border-color: transparent;
    box-shadow: 0 14px 40px -10px color-mix(in srgb, var(--c-primary) 70%, transparent);
}
.page-clients .cscape-cta .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 20px 52px -12px color-mix(in srgb, var(--c-primary) 82%, transparent); }
.page-clients .cscape-cta .btn--ghost { background: rgba(255,255,255,.04); color: #fff; border-color: rgba(255,255,255,.28); }
.page-clients .cscape-cta .btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.6); }

/* =================================================================
   Responsive + motion
   ================================================================= */
@media (max-width: 1024px) {
    html:has(.page-clients) { scroll-snap-type: none; }   /* free scroll on tablets/phones */
    /* every two-column archetype collapses to a single stacked column */
    .page-clients .cscape-sector--split .cssector,
    .page-clients .cscape-sector--feature .cssector,
    .page-clients .cscape-sector--panel .cssector { grid-template-columns: 1fr; }
    .page-clients .cscape-sector--split .cssector__head { position: static; }
    .page-clients .csfin { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 44px); }
}
@media (max-width: 640px) {
    .page-clients .cscape__sec { min-height: auto; padding-block: clamp(80px, 16vh, 120px); scroll-snap-align: none; }
    .page-clients .cscape-hero { min-height: 100svh; }
    /* collapse every multi-column partner layout to one column on phones */
    .page-clients .cscape-sector--editorial .cssector__partners,
    .page-clients .cscape-sector--feature .cssector__partners { grid-template-columns: 1fr; }
    .page-clients .cscape-sector--columns .cssector__partners { columns: 1; }
    .page-clients .cssector__watermark { width: clamp(220px, 64vw, 360px); }
}
@media (prefers-reduced-motion: reduce) {
    html:has(.page-clients) { scroll-snap-type: none; }
}