/* ============================================================
   Alsaree3 — Homepage section styles (Batch F2)
   Built on tokens.css + public-shell.css. Bootstrap 5 RTL aware.
   ============================================================ */

/* Safety net: if JS is slow or absent, trust tiles become visible after CSS animation delay.
   The JS IO path overrides this by adding .is-visible which sets opacity:1 + transform:none.
   @keyframes ensures tiles always appear even without JS. */
@keyframes asTileReveal {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}
.as-trust__tile {
    animation: asTileReveal .001ms calc(1500ms + var(--ti, 0) * 95ms) both;
}
.as-trust__tile.is-visible {
    animation: none;
    opacity: 1;
    transform: none;
}

/* ============================================================
   Hero — Precision Motion Edition (v4)
   JS-driven: --as-hero-scroll, --as-hero-tx, --as-hero-ty
   ============================================================ */
.as-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 55% at 88% -5%, rgba(var(--as-brand-600-rgb),.13), transparent 58%),
        radial-gradient(ellipse 50% 38% at 12% 108%, rgba(var(--as-brand-500-rgb),.07), transparent 55%),
        linear-gradient(180deg, var(--as-brand-50) 0%, #fff 68%);
    padding-block: var(--as-space-16) var(--as-space-20);
    /* JS-driven custom props */
    --as-hero-scroll: 0;
    --as-hero-tx: 0;
    --as-hero-ty: 0;
}

/* ── Atmosphere ── */
.as-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.as-hero__bg-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(14,22,35,.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,22,35,.026) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(62% 52% at 74% 26%, #000 18%, transparent 72%);
    -webkit-mask-image: radial-gradient(62% 52% at 74% 26%, #000 18%, transparent 72%);
    opacity: .8;
}
/* Orbs: scroll-reactive via CSS transform reading --as-hero-scroll */
.as-hero__bg-orb {
    position: absolute; border-radius: 50%;
    filter: blur(92px); opacity: .16;
    will-change: transform;
}
.as-hero__bg-orb--brand {
    width: 440px; height: 440px;
    inset-inline-end: -80px; top: -80px;
    background: radial-gradient(closest-side, rgba(var(--as-brand-600-rgb),.32), transparent 70%);
    transform: translate3d(
        calc(var(--as-hero-scroll) * -16px),
        calc(var(--as-hero-scroll) * -24px),
        0
    );
}
.as-hero__bg-orb--gold {
    width: 320px; height: 320px;
    inset-inline-start: -60px; bottom: -70px;
    background: radial-gradient(closest-side, rgba(var(--as-brand-500-rgb),.20), transparent 70%);
    transform: translate3d(
        calc(var(--as-hero-scroll) * 10px),
        calc(var(--as-hero-scroll) * 18px),
        0
    );
}
/* Vignette dissolves hero into the trust strip */
.as-hero__bg-vignette {
    position: absolute; inset-inline: 0; bottom: 0;
    height: 100px; pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.95));
}

/* ── Grid ── */
.as-hero__grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: var(--as-space-12);
    align-items: center;
}

/* ── Reveal cascade ──
   Eyebrow(0) → Title(1) → Lead(2) → Coverage(3) → CTAs(4) →
   CTA-sub(5) → Trust(6) → Proof(7) | Stage parallel(2)
*/
[data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity .8s cubic-bezier(.22,1,.36,1),
        transform .8s cubic-bezier(.22,1,.36,1);
    /* 80ms base: no element fires at t=0; 90ms step: restrained, premium stagger */
    transition-delay: calc(80ms + var(--d, 0) * 90ms);
}
.as-hero.is-ready [data-reveal] { opacity: 1; transform: none; }

/* ── Eyebrow ── */
.as-hero__eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: var(--as-fs-xs);
    font-weight: var(--as-fw-semibold);
    letter-spacing: .055em;
    text-transform: uppercase;
    color: var(--as-brand-700);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--as-brand-600-rgb),.14);
    padding: .38rem .9rem;
    border-radius: var(--as-radius-pill);
    box-shadow:
        0 1px 0 rgba(255,255,255,.8) inset,
        0 2px 10px rgba(var(--as-brand-600-rgb),.08);
    margin-bottom: var(--as-space-5);
}
.as-hero__eyebrow-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--as-success); flex: 0 0 auto;
    box-shadow: 0 0 0 0 rgba(31,138,92,.4);
    animation: asHeroDot 3.2s ease-out infinite;
}
@keyframes asHeroDot {
    0%   { box-shadow: 0 0 0 0 rgba(31,138,92,.4); }
    65%  { box-shadow: 0 0 0 7px rgba(31,138,92,0); }
    100% { box-shadow: 0 0 0 0 rgba(31,138,92,0); }
}

/* ── Headline ── */
.as-hero__title {
    font-size: clamp(2.25rem, 1.125rem + 3.75vw, 4rem);
    font-weight: var(--as-fw-bold);
    line-height: 1.12;
    letter-spacing: -.025em;
    color: var(--as-ink-900);
    margin: 0 0 var(--as-space-4);
    max-width: 21ch;
    text-wrap: balance;
}
.as-hero__title-accent {
    display: inline;
    background: linear-gradient(100deg, var(--as-brand-900) 0%, var(--as-brand-700) 45%, var(--as-brand-600) 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}

/* ── Lead ── */
.as-hero__lead {
    font-size: clamp(1rem, 0.875rem + 0.4167vw, 1.25rem);
    color: var(--as-ink-600);
    line-height: 1.75;
    margin: 0 0 var(--as-space-5);
    max-width: 52ch;
    text-wrap: pretty;
}

/* ── Coverage pills ── */
.as-hero__coverage {
    list-style: none; padding: 0; margin: 0 0 var(--as-space-6);
    display: flex; flex-wrap: wrap; gap: .45rem;
}
.as-hero__coverage li {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: var(--as-fs-sm);
    font-weight: var(--as-fw-medium);
    color: var(--as-ink-700);
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(var(--as-brand-600-rgb),.12);
    padding: .3rem .72rem;
    border-radius: var(--as-radius-pill);
    transition: border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.as-hero__coverage li:hover {
    border-color: var(--as-brand-400);
    color: var(--as-brand-800);
    box-shadow: 0 2px 8px rgba(var(--as-brand-600-rgb),.10);
}
.as-hero__coverage .bi { color: var(--as-brand-500); font-size: .85em; }

/* ── CTAs ── */
.as-hero__ctas {
    display: flex; flex-wrap: wrap; gap: .75rem;
    margin-bottom: var(--as-space-3);
}
.as-hero__cta-primary,
.as-hero__cta-secondary { min-width: 11.5rem; }

.as-hero__cta-primary {
    position: relative; overflow: hidden; isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255,255,255,.22) inset,
        0 10px 26px rgba(var(--as-brand-600-rgb),.24),
        0 3px 8px rgba(var(--as-brand-600-rgb),.16);
    transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease;
}
.as-hero__cta-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255,255,255,.22) inset,
        0 18px 36px rgba(var(--as-brand-600-rgb),.28),
        0 5px 12px rgba(var(--as-brand-600-rgb),.20);
}
.as-hero__cta-primary:active { transform: translateY(0); }
.as-hero__cta-label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .5rem; }
.as-hero__cta-shine {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: linear-gradient(110deg, transparent 28%, rgba(255,255,255,.15) 50%, transparent 72%);
    transform: translateX(-140%);
    transition: transform 1.0s cubic-bezier(.4,0,.2,1);
}
.as-hero__cta-primary:hover .as-hero__cta-shine { transform: translateX(140%); }

.as-hero__cta-secondary {
    transition: transform .22s ease, box-shadow .22s ease;
}
.as-hero__cta-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(11,42,74,.10);
}

.as-hero__cta-sub {
    margin: .25rem 0 var(--as-space-6);
    font-size: var(--as-fs-sm);
    color: var(--as-ink-500);
    display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.as-hero__phone {
    color: var(--as-ink-800);
    font-weight: var(--as-fw-semibold);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    transition: color .18s ease;
}
.as-hero__phone:hover { color: var(--as-brand-700); }

/* ── Inline trust list ── */
.as-hero__trust {
    list-style: none; padding: 0; margin: 0 0 var(--as-space-5);
    display: flex; flex-wrap: wrap; gap: .65rem 1.25rem;
    color: var(--as-ink-600); font-size: var(--as-fs-sm);
}
.as-hero__trust li { display: inline-flex; align-items: center; gap: .4rem; }
.as-hero__trust .bi { color: var(--as-success); flex: 0 0 auto; }

/* ── Proof bar ── */
.as-hero__proof {
    margin: 0;
    padding-top: var(--as-space-4);
    border-top: 1px solid rgba(var(--as-brand-600-rgb),.10);
    color: var(--as-ink-500);
    font-size: var(--as-fs-sm);
    display: inline-flex; flex-wrap: wrap; align-items: center;
    gap: .4rem .75rem;
    font-variant-numeric: tabular-nums;
}
.as-hero__proof strong {
    color: var(--as-ink-900);
    font-weight: var(--as-fw-bold);
    /* Subtle lift on numbers — feels alive */
    display: inline-block;
    transition: transform .2s ease, color .2s ease;
}
.as-hero__proof strong:hover {
    transform: translateY(-1px);
    color: var(--as-brand-700);
}

/* ── Premium element enhancements ─────────────────────── */

/* Eyebrow: shimmer sweep once on load */
@keyframes asEyebrowShimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 300% center; }
}
.as-hero.is-ready .as-hero__eyebrow {
    background-image:
        linear-gradient(
            90deg,
            rgba(255,255,255,.92) 0%,
            rgba(255,255,255,.92) 35%,
            rgba(255,255,255,1)   50%,
            rgba(255,255,255,.92) 65%,
            rgba(255,255,255,.92) 100%
        );
    background-size: 200% 100%;
    animation: asEyebrowShimmer 1.8s cubic-bezier(.4,0,.2,1) 0.5s 1 both;
}

/* Title accent: living gradient animation */
@keyframes asAccentFlow {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}
.as-hero__title-accent {
    background: linear-gradient(100deg, var(--as-brand-800) 0%, var(--as-brand-600) 36%, var(--as-brand-500) 58%, var(--as-brand-700) 82%, var(--as-brand-800) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: asAccentFlow 6s ease infinite;
}

/* Primary CTA: idle glow pulse */
@keyframes asCtaGlow {
    0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 10px 26px rgba(var(--as-brand-600-rgb),.24), 0 3px 8px rgba(var(--as-brand-600-rgb),.16); }
    50%       { box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 14px 34px rgba(var(--as-brand-600-rgb),.34), 0 5px 14px rgba(var(--as-brand-600-rgb),.24); }
}
.as-hero.is-ready .as-hero__cta-primary {
    animation: asCtaGlow 3.5s ease-in-out 2s infinite;
}
.as-hero__cta-primary:hover,
.as-hero__cta-primary:focus-visible {
    animation: none; /* pause idle pulse on interaction */
}

/* Coverage pills: icon color pop on hover */
.as-hero__coverage li:hover .bi {
    color: var(--as-brand-700);
    transform: scale(1.15);
    transition: transform .18s ease, color .18s ease;
}
.as-hero__coverage .bi {
    transition: transform .18s ease, color .18s ease;
}

/* Inline trust: icon bounce on hover */
.as-hero__trust li {
    transition: transform .2s cubic-bezier(.22,1,.36,1);
    cursor: default;
}
.as-hero__trust li:hover { transform: translateY(-1px); }
.as-hero__trust li:hover .bi {
    animation: asTrustBounce .4s cubic-bezier(.22,1,.36,1);
}
@keyframes asTrustBounce {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.30); }
    70%  { transform: scale(.9);  }
    100% { transform: scale(1); }
}

/* Chip: star-spin on hover */
.as-hero__chip--rating.is-visible:hover .bi {
    animation: asStarSpin .55s cubic-bezier(.22,1,.36,1);
}
@keyframes asStarSpin {
    0%   { transform: rotate(0)   scale(1);    }
    50%  { transform: rotate(20deg) scale(1.3); }
    100% { transform: rotate(0)   scale(1);    }
}

/* Chip badge: verified pulse on hover */
.as-hero__chip--badge.is-visible:hover .bi {
    animation: asBadgePop .45s cubic-bezier(.22,1,.36,1);
}
@keyframes asBadgePop {
    0%   { transform: scale(1);    }
    50%  { transform: scale(1.35); }
    100% { transform: scale(1);    }
}

/* ============================================================
   Stage — 3D-reactive media composition
   --as-hero-scroll: parallax translateY
   --as-hero-tx/ty:  pointer tilt (deg), desktop only
   ============================================================ */
.as-hero__stage {
    position: relative;
    aspect-ratio: 3 / 4;
    perspective: 900px;
    transform-style: preserve-3d;
    transform:
        translateY(calc(var(--as-hero-scroll) * -26px))
        rotateX(calc(var(--as-hero-ty) * 1deg))
        rotateY(calc(var(--as-hero-tx) * 1deg));
    will-change: transform;
    /* ease-out gives parallax a physical feel vs robotic linear */
    transition: transform .12s ease-out;
}

/* Depth accent panels */
.as-hero__stage-accent {
    position: absolute; border-radius: var(--as-radius-xl); z-index: 0;
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.as-hero__stage-accent--brand {
    inset: 6% 0% 16% 12%;
    background: var(--as-brand-gradient-rich);
    box-shadow:
        0 36px 72px -18px rgba(var(--as-brand-600-rgb),.26),
        0 10px 24px rgba(var(--as-brand-600-rgb),.14);
    transform: rotate(-2deg);
}
.as-hero__stage-accent--gold {
    inset: 26% 30% 0% 0%; height: 34%;
    background: linear-gradient(148deg, var(--as-brand-600), var(--as-brand-500));
    opacity: .68;
    border-radius: var(--as-radius-lg);
    transform: rotate(2.5deg);
    box-shadow: 0 20px 44px rgba(var(--as-brand-500-rgb),.18);
}
.as-hero__stage:hover .as-hero__stage-accent--brand { transform: rotate(-1deg) scale(1.006); }
.as-hero__stage:hover .as-hero__stage-accent--gold  { transform: rotate(1.6deg) scale(1.01); }

/* Media card */
.as-hero__media {
    position: relative; z-index: 2;
    border-radius: var(--as-radius-xl);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--as-ink-100);
    box-shadow:
        0 1px 0 rgba(255,255,255,.45) inset,
        0 44px 88px -22px rgba(11,42,74,.40),
        0 18px 40px -16px rgba(11,42,74,.28);
    transition: box-shadow .4s ease;
}
.as-hero__stage:hover .as-hero__media {
    box-shadow:
        0 1px 0 rgba(255,255,255,.45) inset,
        0 48px 90px -22px rgba(11,42,74,.42),
        0 20px 42px -16px rgba(11,42,74,.30);
}
.as-hero__media video,
.as-hero__media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
}
/* Poster shows by default; fades once reel is running */
.as-hero__poster {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 20%;
    display: block;
    z-index: 1;
    opacity: 1;
    transition: opacity 1.2s cubic-bezier(.4,0,.2,1);
}
.as-hero__poster.is-hidden { opacity: 0; pointer-events: none; }

/* ── Video reel ── */
.as-hero__reel {
    position: absolute; inset: 0;
    z-index: 2;
}
.as-hero__reel-vid {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 20%;
    display: block;
    /* All clips start invisible and zoomed-in slightly */
    opacity: 0;
    transform: scale(1.04);
    transition:
        opacity  .9s cubic-bezier(.4,0,.2,1),
        transform 9s cubic-bezier(.05,0,.1,1);
    will-change: opacity, transform;
}
/* Active clip: reveal + gentle ken-burns zoom-out */
.as-hero__reel-vid.is-active {
    opacity: 1;
    transform: scale(1);
}
/* Outgoing clip: fade + subtle zoom in (reverse feel) */
.as-hero__reel-vid.is-out {
    opacity: 0;
    transform: scale(1.02);
    transition:
        opacity  .9s cubic-bezier(.4,0,.2,1),
        transform .9s cubic-bezier(.4,0,.2,1);
}

/* ── Story-style progress dots ── */
.as-hero__reel-dots {
    position: absolute;
    inset-inline: var(--as-space-3);
    top: var(--as-space-3);
    z-index: 5;
    display: flex;
    gap: .3rem;
    pointer-events: none;
}
.as-hero__reel-dot {
    flex: 1;
    height: 3px;
    border-radius: 99px;
    background: rgba(255,255,255,.32);
    overflow: hidden;
    position: relative;
}
.as-hero__reel-dot::after {
    content: '';
    position: absolute; inset-block: 0; inset-inline-start: 0;
    width: 0%; height: 100%;
    background: rgba(255,255,255,.92);
    border-radius: inherit;
    transition: width .3s ease;
}
.as-hero__reel-dot.is-done::after { width: 100%; }
.as-hero__reel-dot.is-active::after {
    width: 100%;
    /* Fill animates over FALLBACK_DUR (7s) — JS sets actual duration via CSS var */
    transition: width var(--reel-dur, 7s) linear;
}
/* Reset fill for pending dots */
.as-hero__reel-dot.is-pending::after { width: 0%; transition: none; }
.as-hero__media-grad {
    position: absolute; inset: 0; pointer-events: none;
    /* z-index 3: above both poster(1) and video(2) — gradient is now always visible */
    z-index: 3;
    background:
        linear-gradient(180deg, rgba(8,22,46,.04) 0%, rgba(8,22,46,.55) 100%),
        linear-gradient(260deg, rgba(8,22,46,.10) 0%, transparent 48%);
}
.as-hero__media-frame {
    position: absolute; inset: 0; pointer-events: none;
    /* z-index 4: above gradient, topmost layer inside media */
    z-index: 4;
    border-radius: var(--as-radius-xl);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.18) inset,
        0 0 0 1px rgba(11,42,74,.04);
}

/* ── Floating chips — enter via JS (.is-visible) ── */
.as-hero__chip {
    position: absolute; z-index: 3;
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .65rem .9rem;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(var(--as-brand-600-rgb),.08);
    border-radius: var(--as-radius-lg);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.85) inset,
        0 12px 28px -8px rgba(11,42,74,.18),
        0 4px 10px rgba(11,42,74,.07);
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity .65s cubic-bezier(.22,1,.36,1),
        transform .65s cubic-bezier(.22,1,.36,1),
        box-shadow .28s ease;
}
.as-hero__chip.is-visible { opacity: 1; transform: translateY(0); }
.as-hero__chip.is-visible:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.85) inset,
        0 16px 32px -8px rgba(11,42,74,.22),
        0 5px 12px rgba(11,42,74,.09);
}

.as-hero__chip-body { display: inline-flex; flex-direction: column; line-height: 1.2; }
.as-hero__chip-body strong { font-size: var(--as-fs-sm); color: var(--as-ink-900); font-weight: var(--as-fw-bold); }
.as-hero__chip-body > span { font-size: var(--as-fs-xs); color: var(--as-ink-500); margin-top: .1rem; }
.as-hero__chip-icon {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--as-accent-100); color: var(--as-accent-600);
    font-size: 1rem; flex: 0 0 auto;
    box-shadow: 0 2px 6px rgba(var(--as-brand-500-rgb),.14);
}
.as-hero__chip-icon--badge {
    background: var(--as-brand-50); color: var(--as-brand-700);
    box-shadow: 0 2px 6px rgba(var(--as-brand-600-rgb),.12);
}

.as-hero__chip--rating { top: 8%; inset-inline-start: 4%; transition-delay: .6s; }
.as-hero__chip--badge  { bottom: 8%; inset-inline-end: 4%; transition-delay: .82s; }

/* ── Pulse dot ── */
.as-hero__pulse {
    position: relative; width: 14px; height: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.as-hero__pulse-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--as-success);
    box-shadow: 0 0 0 2px rgba(31,138,92,.2);
}
.as-hero__pulse-ring {
    position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid rgba(31,138,92,.5);
    animation: asHeroPulse 2.0s ease-out infinite;
}
@keyframes asHeroPulse {
    0%   { transform: scale(.55); opacity: 1; }
    100% { transform: scale(2.1); opacity: 0; }
}

/* ============================================================
   Tablet
   ============================================================ */
@media (max-width: 991.98px) {
    .as-hero { padding-block: var(--as-space-10); }
    .as-hero__grid { grid-template-columns: 1fr; gap: var(--as-space-8); }
    .as-hero__title { max-width: none; }
    .as-hero__stage {
        order: -1; /* video leads on tablet — video-first always */
        aspect-ratio: 16 / 9; max-width: 700px; margin-inline: auto;
        /* Disable pointer tilt; lighter parallax */
        transform: translateY(calc(var(--as-hero-scroll) * -14px));
        transition: transform .12s ease-out;
    }
    .as-hero__media { aspect-ratio: 16 / 9; }
    .as-hero__stage-accent--brand { inset: 5% 0% 14% 10%; }
    .as-hero__stage-accent--gold  { inset: 28% 22% 0% 0%; height: 34%; }
    /* Chips: repositioned for landscape frame on tablet */
    .as-hero__chip--rating { top: 10%; inset-inline-start: 3%; }
    .as-hero__chip--badge  { bottom: 10%; inset-inline-end: 3%; }
}

/* ============================================================
   Mobile — landscape stage first, full-width video
   ============================================================ */
@media (max-width: 767.98px) {
    .as-hero { padding-block: var(--as-space-4) var(--as-space-8); overflow: hidden; }
    .as-hero__grid { gap: var(--as-space-5); }

    /* Stage leads — video/image first, copy below */
    .as-hero__stage {
        order: -1;
        aspect-ratio: 16 / 9;
        max-width: none;
        transform: none !important; transition: none !important;
        /* Full-bleed: extend beyond container gutters */
        margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5);
        width: calc(100% + var(--bs-gutter-x, 1.5rem));
        border-radius: 0;
    }
    .as-hero__media {
        aspect-ratio: 16 / 9;
        border-radius: 0;
        box-shadow: 0 6px 24px -4px rgba(11,42,74,.22);
    }
    /* Hide accent panels on mobile — clean full-bleed */
    .as-hero__stage-accent--brand,
    .as-hero__stage-accent--gold  { display: none; }

    /* Chips: compact, positioned within the 16/9 frame */
    .as-hero__chip {
        padding: .4rem .6rem; gap: .4rem;
        border-radius: var(--as-radius-md, .5rem);
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    }
    .as-hero__chip-icon { width: 26px; height: 26px; font-size: .8rem; }
    .as-hero__chip-body strong { font-size: .75rem; }
    .as-hero__chip-body > span { display: none; }
    /* Rating chip: bottom-start corner of the frame, clear of edges */
    .as-hero__chip--rating {
        top: auto;
        bottom: var(--as-space-3);
        inset-inline-start: var(--as-space-3);
        inset-inline-end: auto;
    }
    .as-hero__chip--badge { display: none; }

    /* Copy column */
    .as-hero__copy { order: 0; }
    .as-hero__title { font-size: clamp(1.55rem, 5.2vw + .4rem, 2.1rem); max-width: none; }
    .as-hero__lead  { font-size: var(--as-fs-base); margin-bottom: var(--as-space-4); }

    /* Coverage pills */
    .as-hero__coverage { margin-bottom: var(--as-space-4); gap: .3rem; }
    .as-hero__coverage li { font-size: var(--as-fs-xs); padding: .25rem .55rem; }

    /* CTAs: stacked full-width */
    .as-hero__ctas { flex-direction: column; align-items: stretch; margin-bottom: var(--as-space-2); }
    .as-hero__cta-primary, .as-hero__cta-secondary { width: 100%; min-width: 0; }
    .as-hero__cta-sub { margin-bottom: var(--as-space-3); }

    /* Trust and proof: compact */
    .as-hero__trust { gap: .4rem .9rem; margin-bottom: var(--as-space-3); }
    .as-hero__proof { padding-top: var(--as-space-3); gap: .25rem .55rem; }

    /* Atmosphere */
    .as-hero__bg-grid { background-size: 32px 32px; opacity: .4; }
    .as-hero__bg-vignette { height: 50px; }
}

/* ============================================================
   Small phone — ≤480px
   ============================================================ */
@media (max-width: 480px) {
    /* Rein in full-bleed stage: pull it back to container width on very small screens
       so the video doesn't dominate the viewport edge-to-edge */
    .as-hero__stage {
        aspect-ratio: 16 / 9;
        margin-inline: 0;
        width: 100%;
        max-width: 100%;
        border-radius: var(--as-radius-lg, .75rem);
    }
    .as-hero__media  {
        aspect-ratio: 16 / 16;
        border-radius: var(--as-radius-lg, .75rem);
    }

    /* Typography: fluid down to very small screens */
    .as-hero__title  { font-size: clamp(1.35rem, 7.5vw, 1.75rem); line-height: 1.15; }
    .as-hero__lead   { font-size: .9rem; line-height: 1.65; margin-bottom: var(--as-space-3); }
    .as-hero__eyebrow { font-size: .65rem; padding: .3rem .7rem; margin-bottom: var(--as-space-3); }

    /* Coverage pills: minimal */
    .as-hero__coverage { margin-bottom: var(--as-space-3); gap: .25rem; }
    .as-hero__coverage li { font-size: .7rem; padding: .2rem .45rem; }

    /* CTAs */
    .as-hero__ctas { gap: .45rem; }

    /* Chip: even smaller, tight to corner */
    .as-hero__chip { padding: .35rem .5rem; gap: .35rem; }
    .as-hero__chip-icon { width: 22px; height: 22px; font-size: .72rem; }
    .as-hero__chip-body strong { font-size: .7rem; }
    .as-hero__chip--rating {
        bottom: var(--as-space-2);
        inset-inline-start: var(--as-space-2);
    }

    /* Proof bar */
    .as-hero__proof { font-size: .78rem; gap: .2rem .5rem; padding-top: var(--as-space-2); }
    .as-hero__trust { font-size: .78rem; gap: .35rem .75rem; margin-bottom: var(--as-space-2); }
}

/* ============================================================
   Reduced motion — hard kill
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .as-hero__bg-orb, .as-hero__eyebrow-dot, .as-hero__pulse-ring { animation: none !important; }
    /* Hide entire reel; poster stays as static background */
    .as-hero__reel          { display: none !important; }
    .as-hero__reel-dots     { display: none !important; }
    .as-hero__poster        { opacity: 1 !important; pointer-events: auto !important; }
    /* Kill all motion-driven animations */
    .as-hero__title-accent  { animation: none !important; }
    .as-hero__cta-primary   { animation: none !important; }
    [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .as-hero__chip { opacity: 1 !important; transform: none !important; transition: box-shadow .2s ease !important; }
    .as-hero__stage { transform: none !important; transition: none !important; }
    .as-hero__cta-primary:hover,
    .as-hero__cta-secondary:hover,
    .as-hero__coverage li:hover { transform: none !important; }
}

/* ============================================================
   Trust Strip — Premium Proof Section (v4)
   Tiles reveal via JS IO (.is-visible), stagger via --ti
   ============================================================ */
.as-trust {
    position: relative;
    /* Differentiated from pure #fff above/below — very subtle cool-blue tint */
    background: linear-gradient(180deg, #f7f9fc 0%, #f3f6fb 100%);
    border-bottom: 1px solid rgba(var(--as-brand-600-rgb),.08);
    /* Symmetric, intentional desktop rhythm */
    padding-block: var(--as-space-14);
    overflow: hidden;
}
/* Hero handoff line */
.as-trust::before {
    content: "";
    position: absolute; inset-inline: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--as-brand-600-rgb),.10) 14%,
        rgba(var(--as-brand-600-rgb),.28) 38%,
        rgba(var(--as-brand-600-rgb),.42) 50%,
        rgba(var(--as-brand-600-rgb),.28) 62%,
        rgba(var(--as-brand-600-rgb),.10) 86%,
        transparent 100%
    );
}
/* Section atmosphere */
.as-trust::after {
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(var(--as-brand-600-rgb),.06), transparent 72%);
}

.as-trust__grid {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--as-space-6);
}

/* Section header — subtle eyebrow above tiles */
.as-trust__head {
    text-align: center;
    margin-bottom: var(--as-space-8);
    position: relative; z-index: 1;
}
.as-trust__eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: var(--as-fs-xs);
    font-weight: var(--as-fw-semibold);
    letter-spacing: .065em;
    text-transform: uppercase;
    color: var(--as-brand-600);
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(var(--as-brand-600-rgb),.12);
    padding: .38rem 1rem;
    border-radius: var(--as-radius-pill);
    box-shadow:
        0 1px 0 rgba(255,255,255,.8) inset,
        0 2px 8px rgba(var(--as-brand-600-rgb),.07);
}
.as-trust__eyebrow-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--as-brand-500); flex: 0 0 auto;
    box-shadow: 0 0 0 2px rgba(var(--as-brand-600-rgb),.18);
}

/* Tile */
.as-trust__tile {
    display: flex;
    flex-direction: column;
    gap: var(--as-space-3);
    padding: var(--as-space-7) var(--as-space-6);
    background: #fff;
    border: 1px solid rgba(var(--as-brand-600-rgb),.10);
    border-radius: var(--as-radius-xl);
    box-shadow:
        0 1px 0 rgba(255,255,255,1) inset,
        0 -1px 0 rgba(var(--as-brand-600-rgb),.04) inset,
        0 8px 30px -10px rgba(11,42,74,.13),
        0 2px 6px rgba(11,42,74,.05);
    position: relative; overflow: hidden;
    /* Hidden until IO triggers */
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity .75s cubic-bezier(.22,1,.36,1),
        transform .75s cubic-bezier(.22,1,.36,1),
        box-shadow .32s ease,
        border-color .32s ease;
    transition-delay: calc(var(--ti, 0) * 80ms);
}
.as-trust__tile.is-visible { opacity: 1; transform: none; transition-delay: 0ms; }
.as-trust__tile.is-visible:hover {
    box-shadow:
        0 1px 0 rgba(255,255,255,1) inset,
        0 -1px 0 rgba(var(--as-brand-600-rgb),.04) inset,
        0 14px 36px -10px rgba(11,42,74,.16),
        0 4px 10px rgba(11,42,74,.08);
    border-color: rgba(var(--as-brand-600-rgb),.22);
    transform: translateY(-2px);
}
/* Inline-start brand edge — always present at low opacity, vivid on hover */
.as-trust__tile::before {
    content: "";
    position: absolute; inset-block: 22% 22%; inset-inline-start: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--as-brand-600), var(--as-brand-500));
    border-radius: 0 var(--as-radius-sm) var(--as-radius-sm) 0;
    opacity: .18;
    transition: opacity .3s ease, inset-block .3s ease;
}
.as-trust__tile:hover::before { opacity: .72; inset-block: 16% 16%; }

/* Icon */
.as-trust__icon {
    width: 52px; height: 52px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--as-radius-md);
    background: linear-gradient(135deg, var(--as-brand-50) 0%, var(--as-brand-100) 100%);
    color: var(--as-brand-600);
    font-size: 1.3rem; flex: 0 0 auto;
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 3px 10px rgba(var(--as-brand-600-rgb),.14);
    transition: background .28s ease, box-shadow .28s ease, color .28s ease;
}
.as-trust__tile:hover .as-trust__icon {
    background: linear-gradient(135deg, var(--as-brand-100) 0%, var(--as-brand-200) 100%);
    color: var(--as-brand-700);
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 5px 14px rgba(var(--as-brand-600-rgb),.22);
}

/* Number — dominant signal */
.as-trust__num {
    font-size: clamp(1.75rem, 1.9vw + .75rem, 2.4rem);
    font-weight: var(--as-fw-bold);
    color: var(--as-ink-900);
    line-height: 1.0;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    margin: var(--as-space-2) 0 0;
}

/* Label — quiet caption */
.as-trust__label {
    font-size: var(--as-fs-sm);
    font-weight: var(--as-fw-medium);
    color: var(--as-ink-500);
    line-height: 1.5;
    letter-spacing: .008em;
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
    .as-trust { padding-block: var(--as-space-10); }
    .as-trust__grid { grid-template-columns: repeat(2, 1fr); gap: var(--as-space-5); }
    .as-trust__head { margin-bottom: var(--as-space-6); }
    /* No lift transform on touch — avoid sticky hover states */
    .as-trust__tile.is-visible:hover { transform: none; }
}
@media (max-width: 575.98px) {
    .as-trust { padding-block: var(--as-space-8); }
    .as-trust__grid { gap: var(--as-space-3); }
    .as-trust__tile { padding: var(--as-space-5) var(--as-space-4); gap: var(--as-space-2); }
    .as-trust__icon { width: 40px; height: 40px; font-size: 1.05rem; }
    .as-trust__num { font-size: clamp(1.45rem, 5.5vw, 1.8rem); }
    .as-trust__label { font-size: var(--as-fs-xs); }
}
@media (prefers-reduced-motion: reduce) {
    .as-trust__tile {
        opacity: 1 !important; transform: none !important;
        transition: box-shadow .2s ease, border-color .2s ease !important;
    }
}

/* ---------- Section heading + generic eyebrow pill ---------- */
.as-sec-head { text-align: center; max-width: 700px; margin: 0 auto var(--as-space-10); }
.as-sec-head__title { margin: .45rem 0 .8rem; }
.as-sec-head__lead {
    color: var(--as-ink-600);
    font-size: clamp(.9375rem, .875rem + .2083vw, 1.0625rem);
    line-height: 1.78;
    max-width: 58ch;
    margin-inline: auto;
}
/* Generic eyebrow pill — matches Trust/About language */
.as-eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: var(--as-fs-xs);
    font-weight: var(--as-fw-semibold);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--as-brand-600);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(var(--as-brand-600-rgb),.13);
    padding: .38rem 1rem;
    border-radius: var(--as-radius-pill);
    box-shadow:
        0 1px 0 rgba(255,255,255,.8) inset,
        0 2px 8px rgba(var(--as-brand-600-rgb),.07);
}

/* ============================================================
   Services — Premium Capability Showcase
   Tiered layout: Flagship (60%) + Essentials (40%)
   Visual rhythm: editorial numbering, icon badges, border-glow
   ============================================================ */
.as-services {
    position: relative;
    background: #fff;
    padding-block: var(--as-space-16) var(--as-space-18);
    overflow: hidden;
}
/* Section bridge line */
.as-services::before {
    content: "";
    position: absolute; inset-inline: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--as-brand-600-rgb),.08) 24%,
        rgba(var(--as-brand-600-rgb),.14) 50%,
        rgba(var(--as-brand-600-rgb),.08) 76%,
        transparent 100%
    );
}
/* Light atmosphere (no grid texture — differentiate from About) */
.as-services::after {
    content: "";
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse 62% 52% at 50% 18%, rgba(var(--as-brand-600-rgb),.03), transparent 68%);
}

/* ── Tiered layout: 55/45 — more balanced on wide desktop ── */
.as-services__tier-layout {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
    gap: var(--as-space-8);
    align-items: start;
}

.as-services__flagship { display: flex; }
.as-services__essentials {
    display: flex;
    flex-direction: column;
    gap: var(--as-space-5);
}

/* ── Service card base ── */
.as-service {
    position: relative;
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid rgba(var(--as-brand-600-rgb),.10);
    border-radius: var(--as-radius-lg);
    overflow: hidden;
    height: 100%;
    /* Hidden until IO triggers reveal */
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity .72s cubic-bezier(.22,1,.36,1),
        transform .72s cubic-bezier(.22,1,.36,1),
        border-color .3s ease,
        box-shadow .3s ease;
    transition-delay: calc(var(--si, 0) * 75ms);
}
.as-service.is-visible { opacity: 1; transform: none; transition-delay: 0ms; }
/* Border-glow hover — only after reveal */
.as-service.is-visible:hover {
    border-color: rgba(var(--as-brand-600-rgb),.28);
    box-shadow:
        0 0 0 1px rgba(var(--as-brand-600-rgb),.12),
        0 8px 28px -8px rgba(11,42,74,.12);
}

/* Service number label — editorial style */
.as-service__num {
    position: absolute; top: var(--as-space-3); inset-inline-start: var(--as-space-3);
    z-index: 2;
    font-size: var(--as-fs-xs);
    font-weight: var(--as-fw-bold);
    font-variant-numeric: tabular-nums;
    color: var(--as-brand-700);
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    padding: .28rem .65rem;
    border-radius: var(--as-radius-md);
    box-shadow: 0 2px 8px rgba(var(--as-brand-600-rgb),.10);
    letter-spacing: .05em;
}

/* Icon badge — top-right glass card */
.as-service__badge {
    position: absolute; top: var(--as-space-3); inset-inline-end: var(--as-space-3);
    z-index: 2;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--as-brand-600-rgb),.08);
    border-radius: 50%;
    color: var(--as-brand-600);
    font-size: .95rem;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.7) inset,
        0 4px 12px rgba(var(--as-brand-600-rgb),.12);
    transition: transform .25s ease, box-shadow .25s ease;
}
.as-service:hover .as-service__badge {
    transform: scale(1.08);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.7) inset,
        0 6px 16px rgba(var(--as-brand-600-rgb),.16);
}

/* Media */
.as-service__media {
    position: relative;
    background: var(--as-ink-100);
    overflow: hidden;
}
.as-service__media img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.as-service:hover .as-service__media img { transform: scale(1.05); }
.as-service__media-grad {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(8,22,46,.02) 0%, rgba(8,22,46,.32) 100%);
}

/* Body */
.as-service__body {
    padding: var(--as-space-5);
    display: flex; flex-direction: column;
    flex: 1;
}
.as-service__title {
    font-size: var(--as-fs-md);
    font-weight: var(--as-fw-bold);
    color: var(--as-ink-900);
    margin: 0 0 .5rem;
    line-height: 1.3;
}
.as-service__title a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}
.as-service__title a:hover { color: var(--as-brand-700); }
.as-service__desc {
    color: var(--as-ink-600);
    font-size: var(--as-fs-sm);
    line-height: 1.65;
    flex: 1;
    margin-bottom: var(--as-space-4);
}

/* CTA: text link (for compact cards) */
.as-service__cta {
    align-self: flex-start;
    color: var(--as-brand-700);
    font-weight: var(--as-fw-semibold);
    font-size: var(--as-fs-sm);
    display: inline-flex; align-items: center;
    gap: .3rem;
    text-decoration: none;
    transition: gap .25s ease, color .2s ease;
}
.as-service__cta:hover {
    color: var(--as-brand-900);
    gap: .6rem;
}

/* ── Featured flagship card ── */
.as-service--featured {
    border-color: rgba(var(--as-brand-600-rgb),.12);
    box-shadow:
        0 1px 0 rgba(255,255,255,1) inset,
        0 4px 18px -6px rgba(11,42,74,.07);
}
.as-service--featured.is-visible:hover {
    border-color: rgba(var(--as-brand-600-rgb),.30);
    box-shadow:
        0 1px 0 rgba(255,255,255,1) inset,
        0 0 0 1px rgba(var(--as-brand-600-rgb),.14),
        0 14px 38px -10px rgba(11,42,74,.18);
    transform: translateY(-3px);
}
.as-service--featured .as-service__media { aspect-ratio: 16 / 11; }
.as-service--featured .as-service__body { padding: var(--as-space-7); }
.as-service--featured .as-service__title { font-size: var(--as-fs-lg); margin-bottom: .65rem; }
.as-service--featured .as-service__desc { font-size: var(--as-fs-base); line-height: 1.78; margin-bottom: var(--as-space-5); }

/* Corner accent — whisper-level brand touch */
.as-service__corner-accent {
    position: absolute; top: 0; inset-inline-end: 0;
    width: 44px; height: 44px;
    z-index: 1; pointer-events: none;
    background: linear-gradient(135deg, transparent 0%, transparent 50%, var(--as-brand-500) 50%, var(--as-brand-600) 100%);
    opacity: .11;
    transition: opacity .3s ease;
}
.as-service--featured.is-visible:hover .as-service__corner-accent { opacity: .22; }

/* ── Compact essential cards ── */
.as-service--compact .as-service__media { aspect-ratio: 4 / 3; }
.as-service--compact .as-service__body { padding: var(--as-space-4); }
.as-service--compact .as-service__title { font-size: var(--as-fs-base); }
.as-service--compact .as-service__desc { font-size: var(--as-fs-sm); margin-bottom: var(--as-space-3); }

/* ── Bottom view-all section ── */
.as-services__view-all {
    position: relative; z-index: 1;
    margin-top: var(--as-space-10);
    padding-top: var(--as-space-8);
    text-align: center;
}
.as-services__view-all::before {
    content: "";
    position: absolute; inset-inline: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--as-brand-600-rgb),.08) 28%,
        rgba(var(--as-brand-600-rgb),.12) 50%,
        rgba(var(--as-brand-600-rgb),.08) 72%,
        transparent 100%
    );
}

/* ── Responsive ── */
/* Wide desktop — pull columns slightly closer */
@media (min-width: 1400px) {
    .as-services__tier-layout { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: var(--as-space-10); }
    .as-service--featured .as-service__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 1199.98px) {
    .as-services__tier-layout { grid-template-columns: 1.25fr 1fr; gap: var(--as-space-6); }
}
@media (max-width: 991.98px) {
    .as-services { padding-block: var(--as-space-12) var(--as-space-14); }
    .as-services__tier-layout {
        grid-template-columns: 1fr;
        gap: var(--as-space-6);
    }
    .as-services__flagship { order: -1; }
    .as-services__essentials { gap: var(--as-space-4); }
    .as-service--featured .as-service__media { aspect-ratio: 16 / 10; }
    .as-service--compact .as-service__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 767.98px) {
    .as-services { padding-block: var(--as-space-10) var(--as-space-12); }
    .as-services__tier-layout { gap: var(--as-space-4); }
    .as-services__essentials { gap: var(--as-space-4); }
    .as-service--featured .as-service__media,
    .as-service--compact .as-service__media { aspect-ratio: 16 / 10; }
    .as-service--featured .as-service__body,
    .as-service--compact .as-service__body { padding: var(--as-space-4); }
    .as-service--featured .as-service__title { font-size: var(--as-fs-md); }
    .as-service--featured .as-service__desc { font-size: var(--as-fs-sm); }
    .as-service__badge { width: 32px; height: 32px; font-size: .85rem; }
    .as-services__view-all { margin-top: var(--as-space-8); padding-top: var(--as-space-6); }
}
@media (prefers-reduced-motion: reduce) {
    .as-service {
        opacity: 1 !important; transform: none !important;
        transition: border-color .2s ease, box-shadow .2s ease !important;
    }
    .as-service__badge,
    .as-service__corner-accent { transition: none !important; }
    .as-service.is-visible:hover .as-service__media img { transform: none !important; }
    .as-service.is-visible:hover .as-service__badge { transform: none !important; }
    .as-service--featured.is-visible:hover { transform: none !important; }
}

/* ---------- How it works (legacy — kept for safety) ---------- */
.as-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--as-space-5);
    counter-reset: as-step;
}
@media (max-width: 991.98px) { .as-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .as-steps { grid-template-columns: 1fr; } }

.as-step {
    position: relative;
    background: #fff;
    border: 1px solid var(--as-border);
    border-radius: var(--as-radius-lg);
    padding: var(--as-space-6) var(--as-space-5);
    text-align: center;
}
.as-step__num {
    counter-increment: as-step;
    width: 44px; height: 44px;
    margin: 0 auto var(--as-space-4);
    border-radius: 50%;
    background: var(--as-brand-600);
    color: #fff;
    font-weight: var(--as-fw-bold);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--as-fs-md);
}
.as-step__num::before { content: counter(as-step); }
.as-step__title { font-size: var(--as-fs-md); font-weight: var(--as-fw-bold); color: var(--as-ink-900); margin-bottom: .5rem; }
.as-step__desc { color: var(--as-ink-600); font-size: var(--as-fs-sm); }
.as-step__icon { color: var(--as-brand-700); font-size: 1.25rem; margin-bottom: .25rem; }

/* ============================================================
   Process / How It Works — Premium Dark Section (v2)
   Background: faq.jpg with deep brand-navy overlay + gradient
   Steps reveal via IO stagger. Reduced-motion safe.
   ============================================================ */
.as-process {
    position: relative;
    overflow: hidden;
    padding-block: var(--as-space-18) var(--as-space-20);
    isolation: isolate;
    /* Background tones for browsers that block the image */
    background: var(--as-brand-900);
}

/* Background image layer */
.as-process__bg {
    position: absolute; inset: 0; z-index: -2;
    background-image: url('/imgs/faq.jpg');
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
    /* Subtle parallax hint — only shifts slightly on scroll via transform, applied by JS if needed */
    will-change: transform;
}

/* Multi-layer overlay — deep navy tint + subtle gradient bleed */
.as-process__overlay {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(160deg,
            rgba(11,42,74,.93) 0%,
            rgba(11,42,74,.88) 38%,
            rgba(15,58,102,.85) 62%,
            rgba(11,42,74,.95) 100%
        );
}
/* Atmosphere: radial warm halo at top-center */
.as-process::before {
    content: "";
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 68% 48% at 50% -8%,
            rgba(212,160,23,.10) 0%, transparent 62%
        ),
        radial-gradient(ellipse 42% 36% at 92% 95%,
            rgba(var(--as-brand-600-rgb),.14) 0%, transparent 58%
        );
}
/* Section separator line at top */
.as-process::after {
    content: "";
    position: absolute; inset-inline: 0; top: 0; z-index: 1; pointer-events: none;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,.06) 20%,
        rgba(var(--as-brand-500-rgb),.18) 50%,
        rgba(255,255,255,.06) 80%,
        transparent 100%
    );
}

/* ── Section header ── */
.as-process__head {
    text-align: center;
    max-width: 660px;
    margin: 0 auto var(--as-space-14);
    position: relative; z-index: 1;
}
.as-process__eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: var(--as-fs-xs);
    font-weight: var(--as-fw-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--as-accent-500);
    background: rgba(212,160,23,.08);
    border: 1px solid rgba(212,160,23,.22);
    padding: .38rem 1rem;
    border-radius: var(--as-radius-pill);
    box-shadow: 0 0 0 1px rgba(212,160,23,.06) inset;
    margin-bottom: var(--as-space-5);
}
.as-process__eyebrow-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--as-accent-500); flex: 0 0 auto;
    box-shadow: 0 0 6px rgba(212,160,23,.45);
}
.as-process__title {
    font-size: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
    font-weight: var(--as-fw-bold);
    color: #fff;
    line-height: 1.22;
    letter-spacing: -.02em;
    margin: 0 0 var(--as-space-4);
    text-wrap: balance;
}
.as-process__title-accent {
    display: inline;
    background: linear-gradient(105deg, var(--as-brand-500) 0%, var(--as-brand-600) 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.as-process__lead {
    color: rgba(255,255,255,.72);
    font-size: clamp(.9375rem, .875rem + .2083vw, 1.0625rem);
    line-height: 1.8;
    margin: 0;
    max-width: 52ch;
    margin-inline: auto;
}

/* ── Steps grid ── */
.as-process__steps {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--as-space-6);
}

/* Connector line between cards — desktop only */
.as-process__steps::before {
    content: "";
    position: absolute;
    top: calc(var(--as-space-7) + 26px); /* vertically centered through step-num */
    inset-inline-start: calc(25% - 4px);
    inset-inline-end: calc(25% - 4px);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,.10) 12%,
        rgba(var(--as-brand-500-rgb),.22) 50%,
        rgba(255,255,255,.10) 88%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* ── Step card ── */
.as-process__step {
    position: relative; z-index: 1;
    /* Hidden until IO reveal */
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity .72s cubic-bezier(.22,1,.36,1),
        transform .72s cubic-bezier(.22,1,.36,1);
    transition-delay: calc(var(--pi, 0) * 80ms);
}
.as-process__step.is-visible {
    opacity: 1; transform: none; transition-delay: 0ms;
}

.as-process__step-inner {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: var(--as-space-7) var(--as-space-5) var(--as-space-6);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--as-radius-xl);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    height: 100%;
    transition:
        background .32s ease,
        border-color .32s ease,
        box-shadow .32s ease;
}
.as-process__step.is-visible .as-process__step-inner:hover {
    background: rgba(255,255,255,.09);
    border-color: rgba(212,160,23,.22);
    box-shadow: 0 8px 32px rgba(0,0,0,.22);
}

/* Step number — large tabular editorial label */
.as-process__step-num {
    font-size: clamp(2.25rem, 1.5rem + 1.25vw, 3.25rem);
    font-weight: var(--as-fw-black);
    color: rgba(255,255,255,.08);
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    align-self: flex-end;
    margin-bottom: calc(-1 * var(--as-space-4)); /* overlap with icon */
    position: relative;
    inset-inline-end: 0;
    width: 100%;
    text-align: end;
    pointer-events: none;
    user-select: none;
}

/* Icon — centered, accent ring */
.as-process__step-icon {
    width: 60px; height: 60px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--as-brand-700) 0%, var(--as-brand-600) 100%);
    color: #fff;
    font-size: 1.45rem;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.12) inset,
        0 0 0 6px rgba(var(--as-brand-600-rgb),.18),
        0 8px 24px rgba(0,0,0,.28);
    flex: 0 0 auto;
    margin-bottom: var(--as-space-5);
    position: relative; z-index: 1;
    transition: box-shadow .28s ease, transform .28s ease;
}
.as-process__step.is-visible .as-process__step-inner:hover .as-process__step-icon {
    box-shadow:
        0 0 0 1px rgba(255,255,255,.16) inset,
        0 0 0 8px rgba(212,160,23,.14),
        0 10px 28px rgba(0,0,0,.32);
    transform: translateY(-2px);
}

/* Title */
.as-process__step-title {
    font-size: var(--as-fs-md);
    font-weight: var(--as-fw-bold);
    color: #fff;
    margin: 0 0 var(--as-space-3);
    line-height: 1.35;
}

/* Description */
.as-process__step-desc {
    font-size: var(--as-fs-sm);
    color: rgba(255,255,255,.64);
    line-height: 1.72;
    margin: 0;
}

/* ── Bottom CTA ── */
.as-process__cta {
    position: relative; z-index: 1;
    display: flex; flex-wrap: wrap; gap: var(--as-space-4);
    justify-content: center;
    margin-top: var(--as-space-14);
}

/* Ghost-light button variant for dark sections */
.as-btn--ghost-light {
    --_bg: transparent;
    --_bg-hover: rgba(255,255,255,.08);
    --_fg: rgba(255,255,255,.88);
    --_border: rgba(255,255,255,.22);
    border: 1px solid var(--_border);
    color: var(--_fg);
    background: var(--_bg);
}
.as-btn--ghost-light:hover {
    background: var(--_bg-hover);
    border-color: rgba(255,255,255,.38);
    color: #fff;
}

/* ── Responsive ── */
@media (max-width: 1199.98px) {
    .as-process__steps { gap: var(--as-space-5); }
}
@media (max-width: 991.98px) {
    .as-process { padding-block: var(--as-space-14) var(--as-space-16); }
    .as-process__steps {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--as-space-5);
    }
    /* Hide connector line on tablet — doesn't align correctly in 2-column */
    .as-process__steps::before { display: none; }
    .as-process__head { margin-bottom: var(--as-space-10); }
    .as-process__cta { margin-top: var(--as-space-10); }
}
@media (max-width: 575.98px) {
    .as-process { padding-block: var(--as-space-12) var(--as-space-14); }
    .as-process__steps { grid-template-columns: 1fr; gap: var(--as-space-4); }
    .as-process__step-inner { padding: var(--as-space-6) var(--as-space-4); }
    .as-process__step-icon { width: 52px; height: 52px; font-size: 1.2rem; }
    .as-process__cta { flex-direction: column; align-items: stretch; }
    .as-process__cta .as-btn { width: 100%; }
    .as-process__head { margin-bottom: var(--as-space-8); max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .as-process__step {
        opacity: 1 !important; transform: none !important;
        transition: none !important;
    }
    .as-process__step-inner,
    .as-process__step-icon { transition: none !important; }
    .as-process__step.is-visible .as-process__step-inner:hover .as-process__step-icon {
        transform: none !important;
    }
}

/* ---------- Testimonials ---------- */
.as-tcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--as-space-5); }
@media (max-width: 991.98px) { .as-tcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .as-tcards { grid-template-columns: 1fr; } }

.as-tcard {
    background: #fff;
    border: 1px solid var(--as-border);
    border-radius: var(--as-radius-lg);
    padding: var(--as-space-6);
    display: flex; flex-direction: column; gap: var(--as-space-4);
    height: 100%;
    position: relative;
}
.as-tcard::before {
    content: "“";
    position: absolute; top: .25rem; inset-inline-end: 1rem;
    font-family: serif; font-size: 4rem; line-height: 1;
    color: var(--as-brand-100);
}
.as-tcard__stars { color: var(--as-accent-600); display: inline-flex; gap: .15rem; }
.as-tcard__quote { color: var(--as-ink-700); line-height: var(--as-lh-base); }
.as-tcard__person { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.as-tcard__avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--as-brand-600); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: var(--as-fw-bold);
}
.as-tcard__name { font-weight: var(--as-fw-semibold); color: var(--as-ink-900); line-height: 1.2; }
.as-tcard__loc  { color: var(--as-ink-500); font-size: var(--as-fs-sm); }

/* ---------- Coverage areas ---------- */
.as-areas { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--as-space-3); }
@media (max-width: 1199.98px) { .as-areas { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767.98px)  { .as-areas { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 479.98px)  { .as-areas { grid-template-columns: repeat(2, 1fr); } }

.as-area {
    display: flex; align-items: center; gap: .5rem;
    padding: .85rem 1rem;
    background: #fff;
    border: 1px solid var(--as-border);
    border-radius: var(--as-radius-md);
    color: var(--as-ink-800);
    font-weight: var(--as-fw-semibold);
    font-size: var(--as-fs-sm);
    text-decoration: none;
    transition: border-color var(--as-dur-base) var(--as-ease), background var(--as-dur-base) var(--as-ease), color var(--as-dur-base) var(--as-ease);
}
.as-area .bi { color: var(--as-brand-600); }
.as-area:hover { border-color: var(--as-brand-500); background: var(--as-brand-50); color: var(--as-brand-900); }

/* ---------- Final CTA band ---------- */
.as-cta-band {
    position: relative;
    overflow: hidden;
    background: var(--as-brand-gradient-rich);
    color: #fff;
    border-radius: var(--as-radius-xl);
    padding: var(--as-space-12) var(--as-space-10);
    margin-block: var(--as-space-16);
}
@media (max-width: 767.98px) { .as-cta-band { padding: var(--as-space-8) var(--as-space-5); margin-block: var(--as-space-10); } }
.as-cta-band::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(40% 60% at 90% 10%, rgba(255,255,255,.18), transparent 70%),
                radial-gradient(35% 50% at 5% 90%, rgba(var(--as-brand-500-rgb),.20), transparent 70%);
}
.as-cta-band__inner { position: relative; display: grid; grid-template-columns: 1.4fr .9fr; gap: var(--as-space-6); align-items: center; }
@media (max-width: 991.98px) { .as-cta-band__inner { grid-template-columns: 1fr; text-align: center; } }
.as-cta-band h2 { color: #fff; font-size: clamp(1.5rem, 2vw + 1rem, var(--as-fs-2xl)); margin-bottom: .5rem; }
.as-cta-band p  { color: rgba(255,255,255,.85); margin-bottom: 0; }
.as-cta-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; }
@media (max-width: 991.98px) { .as-cta-band__actions { justify-content: center; } }

.as-btn--white { --_bg: #fff; --_bg-hover: var(--as-accent-100); --_fg: var(--as-brand-800); --_border: transparent; }
.as-btn--whatsapp { --_bg: #25d366; --_bg-hover: #1fb358; --_fg: #fff; --_border: transparent; }

/* ============================================================
   About — Premium Brand Story Block (v2)
   Image-dominant layout (55/45) with depth composition
   Visual continuity: layered accent panels + stat chip
   ============================================================ */
.as-about {
    position: relative;
    /* Warm off-white — visually distinct from Trust cool-blue tint above */
    background: linear-gradient(180deg, #fffefb 0%, #fefcf8 100%);
    padding-block: var(--as-space-18) var(--as-space-20);
    overflow: hidden;
}
/* Section bridge line from Trust Strip */
.as-about::before {
    content: "";
    position: absolute; inset-inline: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--as-brand-600-rgb),.06) 16%,
        rgba(var(--as-brand-600-rgb),.15) 38%,
        rgba(var(--as-brand-500-rgb),.16) 50%,
        rgba(var(--as-brand-600-rgb),.15) 62%,
        rgba(var(--as-brand-600-rgb),.06) 84%,
        transparent 100%
    );
}
/* Light atmospheric texture */
.as-about::after {
    content: "";
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(rgba(14,22,35,.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14,22,35,.012) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 55% 60% at 48% 42%, #000 8%, transparent 68%);
    -webkit-mask-image: radial-gradient(ellipse 55% 60% at 48% 42%, #000 8%, transparent 68%);
    opacity: .32;
}

.as-about__layout {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--as-space-16);
    align-items: center;
}

/* ── Visual Column: depth-layered image composition ── */
.as-about__visual {
    position: relative;
    perspective: 900px;
    transform-style: preserve-3d;
}

/* Accent panels — matching Hero stage language */
.as-about__accent {
    position: absolute; border-radius: var(--as-radius-xl);
    pointer-events: none; z-index: 0;
}
.as-about__accent--brand {
    inset: 4% 0% 18% 10%;
    background: var(--as-brand-gradient-rich);
    box-shadow:
        0 32px 64px -16px rgba(var(--as-brand-600-rgb),.24),
        0 8px 20px rgba(var(--as-brand-600-rgb),.12);
    transform: rotate(-1.8deg);
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.as-about__accent--gold {
    inset: 32% 26% 0% 0%; height: 28%;
    background: linear-gradient(142deg, var(--as-brand-600), var(--as-brand-500));
    opacity: .65;
    border-radius: var(--as-radius-lg);
    transform: rotate(2.2deg);
    box-shadow: 0 18px 38px rgba(var(--as-brand-500-rgb),.18);
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.as-about__visual:hover .as-about__accent--brand { transform: rotate(-1deg) scale(1.004); }
.as-about__visual:hover .as-about__accent--gold  { transform: rotate(1.4deg) scale(1.008); }

/* Image card */
.as-about__img-card {
    position: relative; z-index: 2;
    border-radius: var(--as-radius-xl);
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--as-ink-100);
    box-shadow:
        0 1px 0 rgba(255,255,255,.5) inset,
        0 48px 96px -24px rgba(11,42,74,.38),
        0 20px 44px -16px rgba(11,42,74,.24),
        0 6px 14px -4px rgba(11,42,74,.10);
    transition: box-shadow .5s cubic-bezier(.2,.7,.2,1);
}
.as-about__visual:hover .as-about__img-card {
    box-shadow:
        0 1px 0 rgba(255,255,255,.4) inset,
        0 42px 80px -20px rgba(11,42,74,.38),
        0 18px 38px -14px rgba(11,42,74,.28);
}
.as-about__img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.as-about__img-grad {
    position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background:
        linear-gradient(180deg, rgba(8,22,46,.04) 0%, rgba(8,22,46,.48) 100%),
        linear-gradient(250deg, rgba(8,22,46,.10) 0%, transparent 44%);
}
.as-about__img-frame {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    border-radius: var(--as-radius-xl);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.14) inset,
        0 0 0 1px rgba(11,42,74,.03);
}

/* Floating stat chip */
.as-about__stat-chip {
    position: absolute; z-index: 3;
    bottom: 6%; inset-inline-start: 5%;
    padding: .95rem 1.2rem;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(var(--as-brand-600-rgb),.09);
    border-radius: var(--as-radius-lg);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.9) inset,
        0 18px 40px -12px rgba(11,42,74,.24),
        0 6px 14px rgba(11,42,74,.10);
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.as-about__stat-chip:hover {
    transform: translateY(-3px);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.85) inset,
        0 20px 40px -12px rgba(11,42,74,.26),
        0 7px 14px rgba(11,42,74,.11);
}
.as-about__stat-row { display: flex; align-items: center; gap: .7rem; }
.as-about__stat-icon {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--as-brand-50); color: var(--as-brand-600);
    font-size: 1rem; flex: 0 0 auto;
    box-shadow: 0 2px 7px rgba(var(--as-brand-600-rgb),.12);
}
.as-about__stat-body { display: flex; flex-direction: column; line-height: 1.2; }
.as-about__stat-body strong {
    font-size: var(--as-fs-sm); color: var(--as-ink-900);
    font-weight: var(--as-fw-bold); font-variant-numeric: tabular-nums;
}
.as-about__stat-body > span {
    font-size: var(--as-fs-xs); color: var(--as-ink-500);
    margin-top: .15rem; font-variant-numeric: tabular-nums;
}

/* ── Copy Column ── */
.as-about__copy { display: flex; flex-direction: column; gap: var(--as-space-5); }

.as-about__eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    align-self: flex-start;
    font-size: var(--as-fs-xs);
    font-weight: var(--as-fw-semibold);
    letter-spacing: .055em;
    text-transform: uppercase;
    color: var(--as-brand-700);
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(var(--as-brand-600-rgb),.12);
    padding: .4rem .95rem;
    border-radius: var(--as-radius-pill);
    box-shadow:
        0 1px 0 rgba(255,255,255,.75) inset,
        0 2px 8px rgba(var(--as-brand-600-rgb),.07);
}
.as-about__eyebrow-icon { color: var(--as-brand-600); font-size: .9em; }

.as-about__title {
    font-size: clamp(1.85rem, .8rem + 2.9167vw, 3rem);
    font-weight: var(--as-fw-bold);
    line-height: 1.18;
    letter-spacing: -.022em;
    color: var(--as-ink-900);
    margin: 0;
    text-wrap: balance;
}
.as-about__title-accent {
    display: inline;
    background: var(--as-brand-gradient-text);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}

.as-about__lead {
    font-size: clamp(1rem, 0.875rem + 0.4167vw, 1.2rem);
    color: var(--as-ink-600);
    line-height: 1.82;
    margin: 0;
    max-width: 52ch;
    text-wrap: pretty;
}
.as-about__lead strong { color: var(--as-ink-800); font-weight: var(--as-fw-semibold); }

/* ── Pillars: 2×2 grid, subtle glass cards ── */
.as-about__pillars {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--as-space-4);
    margin-top: var(--as-space-1);
}
.as-about__pillar {
    display: flex; flex-direction: column; gap: var(--as-space-2);
    padding: var(--as-space-4);
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(var(--as-brand-600-rgb),.08);
    border-radius: var(--as-radius-lg);
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 4px 14px -6px rgba(11,42,74,.08);
    transition: box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
.as-about__pillar:hover {
    background: #fff;
    border-color: rgba(var(--as-brand-600-rgb),.18);
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 8px 22px -8px rgba(11,42,74,.12);
}
.as-about__pillar-icon {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--as-radius-md);
    background: linear-gradient(135deg, var(--as-brand-50) 0%, var(--as-brand-100) 100%);
    color: var(--as-brand-600);
    font-size: 1.1rem; flex: 0 0 auto;
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 3px 8px rgba(var(--as-brand-600-rgb),.12);
    transition: background .25s ease, box-shadow .25s ease, color .25s ease;
}
.as-about__pillar:hover .as-about__pillar-icon {
    background: linear-gradient(135deg, var(--as-brand-100) 0%, var(--as-brand-200) 100%);
    color: var(--as-brand-700);
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 4px 12px rgba(var(--as-brand-600-rgb),.18);
}
.as-about__pillar-title {
    font-size: var(--as-fs-base);
    font-weight: var(--as-fw-bold);
    color: var(--as-ink-900);
    margin: 0;
    line-height: 1.3;
}
.as-about__pillar-desc {
    font-size: var(--as-fs-sm);
    color: var(--as-ink-500);
    line-height: 1.6;
    margin: 0;
}

/* ── CTAs ── */
.as-about__ctas {
    display: flex; flex-wrap: wrap; gap: .9rem;
    margin-top: var(--as-space-3);
}

/* ── Responsive ── */
@media (max-width: 1199.98px) {
    .as-about__layout { gap: var(--as-space-12); }
}
@media (max-width: 991.98px) {
    .as-about { padding-block: var(--as-space-14) var(--as-space-16); }
    .as-about__layout { grid-template-columns: 1fr; gap: var(--as-space-10); }
    .as-about__visual { order: -1; max-width: 520px; margin-inline: auto; }
    .as-about__img-card { aspect-ratio: 4 / 3; }
    .as-about__stat-chip { bottom: 5%; inset-inline-start: 4%; }
    .as-about__copy { align-items: flex-start; text-align: start; }
    .as-about__pillars { grid-template-columns: repeat(2, 1fr); gap: var(--as-space-3); }
}
@media (max-width: 767.98px) {
    .as-about { padding-block: var(--as-space-10) var(--as-space-12); }
    .as-about__layout { gap: var(--as-space-7); }
    .as-about__visual { max-width: 100%; }
    .as-about__img-card { aspect-ratio: 16 / 10; }
    .as-about__accent--brand { inset: 5% 0% 16% 12%; }
    .as-about__accent--gold { display: none; }
    .as-about__stat-chip {
        position: static;
        margin-top: var(--as-space-4);
        align-self: flex-start;
    }
    .as-about__pillars { grid-template-columns: 1fr 1fr; gap: var(--as-space-3); }
    .as-about__pillar { padding: var(--as-space-3); }
    .as-about__title { font-size: clamp(1.55rem, 5.2vw + .3rem, 2rem); }
    .as-about__lead { font-size: var(--as-fs-base); line-height: 1.75; }
    .as-about__ctas { flex-direction: column; align-items: stretch; }
    .as-about__ctas .as-btn { width: 100%; }
}
@media (max-width: 480px) {
    .as-about__pillars { grid-template-columns: 1fr; }
    .as-about__pillar { padding: var(--as-space-3); }
}
@media (prefers-reduced-motion: reduce) {
    .as-about__accent--brand,
    .as-about__accent--gold,
    .as-about__stat-chip { transition: none !important; }
    .as-about__visual:hover .as-about__accent--brand,
    .as-about__visual:hover .as-about__accent--gold { transform: none !important; }
    .as-about__stat-chip:hover { transform: none !important; }
    .as-about__pillar { transition: none !important; }
}

/* ============================================================
   Testimonials — Premium Trust Proof Section (v2)
   Static 3-col grid → 2-col → 1-col.
   IO stagger reveal. No carousel dependency.
   ============================================================ */

/* ── Section wrapper ── */
.as-testimonials {
    padding-block: var(--as-space-18) var(--as-space-20);
    background:
        radial-gradient(ellipse 70% 45% at 50% 0%, rgba(var(--as-brand-600-rgb),.045) 0%, transparent 62%),
        var(--as-brand-50);
    position: relative;
    overflow: hidden;
}
/* Top separator — mirrors the Process section's bottom edge */
.as-testimonials::before {
    content: "";
    position: absolute; inset-inline: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%, rgba(var(--as-brand-600-rgb),.08) 20%,
        rgba(var(--as-brand-600-rgb),.14) 50%,
        rgba(var(--as-brand-600-rgb),.08) 80%, transparent 100%
    );
    pointer-events: none;
}

/* ── Section header ── */
.as-testimonials__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--as-space-12);
}
.as-testimonials__eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: var(--as-fs-xs);
    font-weight: var(--as-fw-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--as-brand-700);
    background: rgba(var(--as-brand-600-rgb),.07);
    border: 1px solid rgba(var(--as-brand-600-rgb),.14);
    padding: .38rem 1rem;
    border-radius: var(--as-radius-pill);
    margin-bottom: var(--as-space-5);
}
.as-testimonials__eyebrow-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--as-brand-600); flex: 0 0 auto;
    box-shadow: 0 0 6px rgba(var(--as-brand-600-rgb),.4);
}
.as-testimonials__title {
    font-size: clamp(1.625rem, 1rem + 2vw, 2.5rem);
    font-weight: var(--as-fw-bold);
    color: var(--as-ink-900);
    line-height: 1.25;
    letter-spacing: -.02em;
    margin: 0 0 var(--as-space-4);
    text-wrap: balance;
}
.as-testimonials__lead {
    color: var(--as-ink-600);
    font-size: clamp(.9375rem, .875rem + .2083vw, 1.0625rem);
    line-height: 1.78;
    margin: 0;
}

/* ── Cards grid ── */
.as-tcards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--as-space-6);
    align-items: start;
}

/* ── Individual card ── */
.as-tcard {
    /* Hidden until IO reveal */
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity .68s cubic-bezier(.22,1,.36,1),
        transform .68s cubic-bezier(.22,1,.36,1);
    transition-delay: calc(var(--ti, 0) * 90ms);
}
.as-tcard.is-visible {
    opacity: 1; transform: none; transition-delay: 0ms;
}

.as-tcard__inner {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--as-border);
    border-radius: var(--as-radius-xl);
    padding: var(--as-space-7) var(--as-space-6) var(--as-space-6);
    height: 100%;
    position: relative;
    overflow: hidden;
    transition:
        box-shadow .28s ease,
        border-color .28s ease,
        transform .28s ease;
}
/* Subtle top accent line — brand color */
.as-tcard__inner::before {
    content: "";
    position: absolute; inset-inline: 0; top: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--as-brand-600) 0%, var(--as-accent-500) 100%
    );
    opacity: 0;
    transition: opacity .28s ease;
    border-radius: var(--as-radius-xl) var(--as-radius-xl) 0 0;
}
/* Decorative large open-quote mark */
.as-tcard__inner::after {
    content: "\201C";
    position: absolute;
    inset-inline-end: var(--as-space-5);
    top: var(--as-space-4);
    font-size: 5.5rem;
    line-height: 1;
    font-weight: var(--as-fw-black);
    color: var(--as-brand-100);
    pointer-events: none;
    user-select: none;
    font-family: Georgia, serif;
    transition: color .28s ease;
}
.as-tcard.is-visible .as-tcard__inner:hover {
    box-shadow: var(--as-shadow-md);
    border-color: rgba(var(--as-brand-600-rgb),.18);
    transform: translateY(-3px);
}
.as-tcard.is-visible .as-tcard__inner:hover::before { opacity: 1; }
.as-tcard.is-visible .as-tcard__inner:hover::after { color: var(--as-brand-200); }

/* ── Stars + verified badge ── */
.as-tcard__top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--as-space-5);
    position: relative; z-index: 1;
}
.as-tcard__stars {
    display: flex; gap: .2rem;
    color: #f4b400;
    font-size: 1rem;
}
.as-tcard__stars .bi-star { color: var(--as-ink-200); }
.as-tcard__verified {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: var(--as-fs-xs);
    font-weight: var(--as-fw-semibold);
    color: var(--as-brand-700);
    background: rgba(var(--as-brand-600-rgb),.07);
    border: 1px solid rgba(var(--as-brand-600-rgb),.12);
    padding: .2rem .55rem;
    border-radius: var(--as-radius-pill);
    white-space: nowrap;
}
.as-tcard__verified .bi { font-size: .75rem; }

/* ── Quote body ── */
.as-tcard__quote {
    flex: 1;
    margin: 0 0 var(--as-space-6);
    position: relative; z-index: 1;
}
.as-tcard__quote p {
    font-size: clamp(.9375rem, .875rem + .2083vw, 1.0625rem);
    line-height: 1.82;
    color: var(--as-ink-700);
    margin: 0;
    font-style: italic;
}

/* ── Person footer ── */
.as-tcard__person {
    display: flex; align-items: center; gap: var(--as-space-4);
    border-top: 1px solid var(--as-border);
    padding-top: var(--as-space-5);
    position: relative; z-index: 1;
}
.as-tcard__avatar {
    width: 44px; height: 44px; flex: 0 0 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--as-brand-600) 0%, var(--as-brand-800) 100%);
    color: #fff;
    font-weight: var(--as-fw-bold);
    font-size: 1.1rem;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(var(--as-brand-600-rgb),.22);
    user-select: none;
}
.as-tcard__meta { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.as-tcard__name {
    font-size: var(--as-fs-sm);
    font-weight: var(--as-fw-bold);
    color: var(--as-ink-900);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.as-tcard__loc {
    font-size: var(--as-fs-xs);
    color: var(--as-ink-500);
    display: flex; align-items: center; gap: .25rem;
}
.as-tcard__loc .bi { font-size: .7rem; }

/* ── Aggregate proof bar ── */
.as-testimonials__proof {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: center; gap: .75rem var(--as-space-5);
    margin-top: var(--as-space-12);
    padding: var(--as-space-5) var(--as-space-6);
    background: #fff;
    border: 1px solid var(--as-border);
    border-radius: var(--as-radius-xl);
    max-width: 560px;
    margin-inline: auto;
    margin-top: var(--as-space-12);
}
.as-testimonials__proof-item {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: var(--as-fs-sm);
    font-weight: var(--as-fw-semibold);
    color: var(--as-ink-700);
}
.as-testimonials__proof-item .bi-star-fill { color: #f4b400; }
.as-testimonials__proof-item .bi-google { color: #4285F4; }
.as-testimonials__proof-item .bi-people { color: var(--as-brand-600); }
.as-testimonials__proof-sep {
    color: var(--as-ink-300);
    font-size: .75rem;
    user-select: none;
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
    .as-testimonials { padding-block: var(--as-space-14) var(--as-space-16); }
    .as-tcards { grid-template-columns: repeat(2, 1fr); gap: var(--as-space-5); }
    .as-testimonials__head { margin-bottom: var(--as-space-10); }
    .as-testimonials__proof { margin-top: var(--as-space-10); }
}
@media (max-width: 575.98px) {
    .as-testimonials { padding-block: var(--as-space-12) var(--as-space-14); }
    .as-tcards { grid-template-columns: 1fr; gap: var(--as-space-4); }
    .as-tcard__inner { padding: var(--as-space-6) var(--as-space-5) var(--as-space-5); }
    .as-tcard__inner::after { font-size: 4rem; }
    .as-testimonials__proof { flex-direction: column; gap: var(--as-space-3); }
    .as-testimonials__proof-sep { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .as-tcard {
        opacity: 1 !important; transform: none !important;
        transition: none !important;
    }
    .as-tcard__inner,
    .as-tcard__inner::before { transition: none !important; }
    .as-tcard.is-visible .as-tcard__inner:hover { transform: none !important; }
}

/* ============================================================
   Coverage Areas — Premium Service Footprint Section (v2)
   Two-tier layout: primary zone cards + secondary chips.
   IO stagger reveal. Reduced-motion safe.
   ============================================================ */

.as-coverage {
    padding-block: var(--as-space-18) var(--as-space-20);
    background: #fff;
    position: relative;
    overflow: hidden;
}
/* Subtle top separator */
.as-coverage::before {
    content: "";
    position: absolute; inset-inline: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%, var(--as-border) 20%,
        var(--as-border) 80%, transparent 100%
    );
    pointer-events: none;
}
/* Atmospheric soft radial — brand-tinted background bloom */
.as-coverage::after {
    content: "";
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 72% 48% at 50% 100%,
            rgba(var(--as-brand-600-rgb),.04) 0%, transparent 60%
        ),
        radial-gradient(ellipse 48% 38% at 0% 40%,
            rgba(212,160,23,.04) 0%, transparent 55%
        );
}
.as-coverage .container { position: relative; z-index: 1; }

/* ── Section header ── */
.as-coverage__head {
    text-align: center;
    max-width: 600px;
    margin: 0 auto var(--as-space-12);
}
.as-coverage__eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: var(--as-fs-xs);
    font-weight: var(--as-fw-semibold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--as-brand-700);
    background: rgba(var(--as-brand-600-rgb),.07);
    border: 1px solid rgba(var(--as-brand-600-rgb),.14);
    padding: .38rem 1rem;
    border-radius: var(--as-radius-pill);
    margin-bottom: var(--as-space-5);
}
.as-coverage__eyebrow-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--as-brand-600); flex: 0 0 auto;
    box-shadow: 0 0 6px rgba(var(--as-brand-600-rgb),.4);
}
.as-coverage__title {
    font-size: clamp(1.625rem, 1rem + 2vw, 2.5rem);
    font-weight: var(--as-fw-bold);
    color: var(--as-ink-900);
    line-height: 1.25;
    letter-spacing: -.02em;
    margin: 0 0 var(--as-space-4);
    text-wrap: balance;
}
.as-coverage__lead {
    color: var(--as-ink-600);
    font-size: clamp(.9375rem, .875rem + .2083vw, 1.0625rem);
    line-height: 1.78;
    margin: 0;
}

/* ── Primary zone cards grid ── */
.as-coverage__zones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--as-space-5);
    margin-bottom: var(--as-space-10);
}

/* ── Individual zone card ── */
.as-zone {
    display: flex;
    align-items: center;
    gap: var(--as-space-4);
    padding: var(--as-space-6) var(--as-space-5);
    background: #fff;
    border: 1px solid var(--as-border);
    border-radius: var(--as-radius-xl);
    text-decoration: none;
    color: var(--as-ink-900);
    position: relative;
    overflow: hidden;

    /* Hidden until IO reveal */
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity .62s cubic-bezier(.22,1,.36,1),
        transform .62s cubic-bezier(.22,1,.36,1),
        box-shadow .28s ease,
        border-color .28s ease;
    transition-delay: calc(var(--zi, 0) * 75ms);
}
.as-zone.is-visible {
    opacity: 1; transform: none; transition-delay: 0ms;
}
/* Hover accent line at top */
.as-zone::before {
    content: "";
    position: absolute; inset-inline: 0; top: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--as-brand-600), var(--as-accent-500));
    transform: scaleX(0);
    transform-origin: start;
    transition: transform .3s cubic-bezier(.22,1,.36,1);
    border-radius: var(--as-radius-xl) var(--as-radius-xl) 0 0;
}
.as-zone.is-visible:hover {
    box-shadow: var(--as-shadow-md);
    border-color: rgba(var(--as-brand-600-rgb),.2);
    text-decoration: none;
    color: var(--as-ink-900);
}
.as-zone.is-visible:hover::before { transform: scaleX(1); }

/* Icon */
.as-zone__icon {
    width: 48px; height: 48px; flex: 0 0 48px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--as-brand-50);
    color: var(--as-brand-700);
    font-size: 1.25rem;
    transition: background .28s ease, color .28s ease, transform .28s ease;
}
.as-zone.is-visible:hover .as-zone__icon {
    background: var(--as-brand-600);
    color: #fff;
    transform: scale(1.08);
}

/* Text block */
.as-zone__name {
    font-size: var(--as-fs-md);
    font-weight: var(--as-fw-bold);
    line-height: 1.3;
    flex: 1;
}
.as-zone__sub {
    display: block;
    font-size: var(--as-fs-xs);
    color: var(--as-ink-500);
    font-weight: var(--as-fw-normal);
    margin-top: .15rem;
}

/* Arrow — fades in on hover */
.as-zone__arrow {
    color: var(--as-brand-500);
    font-size: 1rem;
    opacity: 0;
    transform: translateX(4px);
    transition: opacity .22s ease, transform .22s ease;
    flex: 0 0 auto;
}
.as-zone.is-visible:hover .as-zone__arrow {
    opacity: 1; transform: none;
}

/* ── Secondary chips row ── */
.as-coverage__secondary {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--as-space-3);
    margin-bottom: var(--as-space-10);
    padding: var(--as-space-5) var(--as-space-6);
    background: var(--as-brand-50);
    border: 1px solid rgba(var(--as-brand-600-rgb),.1);
    border-radius: var(--as-radius-xl);
}
.as-coverage__secondary-label {
    font-size: var(--as-fs-sm);
    font-weight: var(--as-fw-semibold);
    color: var(--as-ink-600);
    white-space: nowrap;
    flex: 0 0 auto;
}
.as-coverage__chips {
    display: flex; flex-wrap: wrap; gap: var(--as-space-2);
}

/* Secondary chip */
.as-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: var(--as-fs-xs);
    font-weight: var(--as-fw-semibold);
    color: var(--as-brand-800);
    background: rgba(255,255,255,.8);
    border: 1px solid rgba(var(--as-brand-600-rgb),.14);
    border-radius: var(--as-radius-pill);
    padding: .3rem .8rem;
    text-decoration: none;
    white-space: nowrap;

    /* Hidden until IO reveal */
    opacity: 0;
    transform: scale(.94);
    transition:
        opacity .48s cubic-bezier(.22,1,.36,1),
        transform .48s cubic-bezier(.22,1,.36,1),
        background .22s ease,
        border-color .22s ease,
        color .22s ease;
    transition-delay: calc(var(--ci, 0) * 40ms);
}
.as-chip.is-visible {
    opacity: 1; transform: none; transition-delay: 0ms;
}
.as-chip:hover {
    background: var(--as-brand-600);
    color: #fff;
    border-color: var(--as-brand-600);
    text-decoration: none;
}
.as-chip .bi { font-size: .7rem; }

/* ── CTA row ── */
.as-coverage__cta {
    text-align: center;
    margin-top: var(--as-space-4);
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
    .as-coverage { padding-block: var(--as-space-14) var(--as-space-16); }
    .as-coverage__zones { grid-template-columns: repeat(2, 1fr); }
    .as-coverage__head { margin-bottom: var(--as-space-10); }
}
@media (max-width: 575.98px) {
    .as-coverage { padding-block: var(--as-space-12) var(--as-space-14); }
    .as-coverage__zones { grid-template-columns: 1fr; gap: var(--as-space-3); }
    .as-zone { padding: var(--as-space-5) var(--as-space-4); }
    .as-zone__icon { width: 40px; height: 40px; flex: 0 0 40px; font-size: 1.05rem; }
    .as-coverage__secondary { gap: var(--as-space-2); }
    .as-coverage__cta .as-btn { width: 100%; }
    .as-coverage__head { margin-bottom: var(--as-space-8); }
}
@media (prefers-reduced-motion: reduce) {
    .as-zone, .as-chip {
        opacity: 1 !important; transform: none !important;
        transition: box-shadow .2s ease, border-color .2s ease,
                    background .2s ease, color .2s ease !important;
    }
    .as-zone::before { transition: none !important; }
    .as-zone__icon, .as-zone__arrow { transition: none !important; }
}

/* ============================================================
   FAQ Section — Premium accordion (v2)
   IO section-level reveal. Reduced-motion safe.
   ============================================================ */

.as-faq-section {
    padding-block: var(--as-space-18) var(--as-space-20);
    background: var(--as-surface-alt, #f8f9fb);
    position: relative;
    overflow: hidden;
}
/* Subtle top separator */
.as-faq-section::before {
    content: "";
    position: absolute; inset-inline: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%, var(--as-border) 20%,
        var(--as-border) 80%, transparent 100%
    );
    pointer-events: none;
}
/* Soft brand bloom bottom-right */
.as-faq-section::after {
    content: "";
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 60% 44% at 90% 100%,
        rgba(var(--as-brand-600-rgb),.05) 0%, transparent 60%);
}
.as-faq-section .container { position: relative; z-index: 1; }

/* ── Section header ── */
.as-faq-section__head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--as-space-12);
}
.as-faq-section__eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: var(--as-fs-xs);
    font-weight: var(--as-fw-semibold);
    color: var(--as-brand-700);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: var(--as-space-3);
}
.as-faq-section__eyebrow-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--as-gold-500, #d4a017);
    display: inline-block;
    flex: 0 0 7px;
}
.as-faq-section__title {
    font-size: clamp(1.55rem, 2.2vw + .6rem, 2.1rem);
    font-weight: var(--as-fw-bold);
    color: var(--as-ink-900);
    line-height: 1.25;
    margin: 0 0 var(--as-space-4);
}
.as-faq-section__lead {
    color: var(--as-ink-500);
    font-size: var(--as-fs-md);
    margin: 0;
}

/* ── Layout wrap ── */
.as-faq-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--as-space-8) var(--as-space-10);
    align-items: start;
    max-width: 960px;
    margin: 0 auto;
}

/* ── Accordion ── */
.as-faq {
    /* IO reveal */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.as-faq-section.is-visible .as-faq { opacity: 1; transform: none; }

.as-faq__item {
    border: 1px solid var(--as-border);
    border-radius: var(--as-radius-md) !important;
    background: #fff;
    margin-bottom: var(--as-space-2);
    overflow: hidden;
    transition: box-shadow .22s ease, border-color .22s ease;
}
.as-faq__item:focus-within,
.as-faq__item:has(.accordion-button:not(.collapsed)) {
    border-color: rgba(var(--as-brand-600-rgb),.22);
    box-shadow: 0 4px 18px rgba(var(--as-brand-600-rgb),.07);
}
.as-faq__header { margin: 0; }
.as-faq__btn {
    display: flex;
    align-items: center;
    gap: var(--as-space-3);
    background: #fff;
    color: var(--as-ink-900);
    font-weight: var(--as-fw-semibold);
    font-size: var(--as-fs-md);
    box-shadow: none !important;
    padding: var(--as-space-5) var(--as-space-6);
    border-radius: 0 !important;
    transition: background .2s ease, color .2s ease;
}
.as-faq__btn:not(.collapsed) {
    background: var(--as-brand-50);
    color: var(--as-brand-900);
}
.as-faq__btn:focus-visible { outline: 2px solid var(--as-brand-500); outline-offset: -2px; }
/* RTL-safe chevron */
.as-faq__btn::after {
    margin-inline-start: auto;
    flex-shrink: 0;
}

/* Icon pill */
.as-faq__q-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex: 0 0 32px;
    background: var(--as-brand-50);
    color: var(--as-brand-700);
    border-radius: var(--as-radius-sm);
    font-size: .9rem;
    transition: background .2s ease, color .2s ease;
}
.as-faq__btn:not(.collapsed) .as-faq__q-icon {
    background: var(--as-brand-100);
    color: var(--as-brand-800);
}

.as-faq__answer {
    padding: 0 var(--as-space-6) var(--as-space-5) calc(var(--as-space-6) + 32px + var(--as-space-3));
    color: var(--as-ink-600);
    font-size: var(--as-fs-md);
    line-height: 1.75;
}

/* ── Inline CTA aside ── */
.as-faq-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--as-space-4);
    padding: var(--as-space-7) var(--as-space-6);
    background: #fff;
    border: 1px solid var(--as-border);
    border-radius: var(--as-radius-lg);
    text-align: center;
    min-width: 220px;
    max-width: 260px;

    /* IO reveal — slight delay after accordion */
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s .14s cubic-bezier(.22,1,.36,1), transform .55s .14s cubic-bezier(.22,1,.36,1);
}
.as-faq-section.is-visible .as-faq-cta { opacity: 1; transform: none; }

.as-faq-cta__text {
    font-size: var(--as-fs-sm);
    color: var(--as-ink-500);
    margin: 0;
    line-height: 1.6;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
    .as-faq-section { padding-block: var(--as-space-14) var(--as-space-16); }
    .as-faq-wrap { grid-template-columns: 1fr; }
    .as-faq-cta { max-width: 100%; }
    .as-faq__answer { padding-inline-start: var(--as-space-6); }
}
@media (max-width: 575.98px) {
    .as-faq-section { padding-block: var(--as-space-12) var(--as-space-14); }
    .as-faq__btn { padding: var(--as-space-4) var(--as-space-4); font-size: var(--as-fs-sm); }
    .as-faq__q-icon { width: 28px; height: 28px; flex: 0 0 28px; font-size: .8rem; }
    .as-faq__answer { padding: 0 var(--as-space-4) var(--as-space-4); }
}
@media (prefers-reduced-motion: reduce) {
    .as-faq, .as-faq-cta {
        opacity: 1 !important; transform: none !important;
        transition: none !important;
    }
    .as-faq__btn, .as-faq__item { transition: none !important; }
}

/* ============================================================
   Blog Section — 3-up grid with IO stagger reveal (v2)
   ============================================================ */

.as-blog-section {
    padding-block: var(--as-space-18) var(--as-space-20);
    background: #fff;
    position: relative;
}
/* Top separator */
.as-blog-section::before {
    content: "";
    position: absolute; inset-inline: 0; top: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%, var(--as-border) 20%,
        var(--as-border) 80%, transparent 100%
    );
    pointer-events: none;
}

.as-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--as-space-5);
}
@media (max-width: 991.98px) { .as-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .as-blog-grid { grid-template-columns: 1fr; } }

.as-blog {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--as-border);
    border-radius: var(--as-radius-lg);
    overflow: hidden;

    /* IO reveal */
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity .52s cubic-bezier(.22,1,.36,1),
        transform .52s cubic-bezier(.22,1,.36,1),
        box-shadow .22s ease;
    transition-delay: calc(var(--bi, 0) * 80ms);
    height: 100%;
}
.as-blog.is-visible {
    opacity: 1; transform: none; transition-delay: calc(var(--bi, 0) * 80ms);
}
.as-blog:hover { box-shadow: var(--as-shadow-md); }

.as-blog__media {
    aspect-ratio: 16/9; overflow: hidden;
    background: var(--as-ink-100);
    position: relative; display: block;
    text-decoration: none;
}
.as-blog__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .48s cubic-bezier(.22,1,.36,1);
}
.as-blog:hover .as-blog__media img { transform: scale(1.04); }

.as-blog__placeholder {
    width: 100%; height: 100%; min-height: 220px;
    background: linear-gradient(135deg, var(--as-brand-50), var(--as-brand-100));
    display: flex; align-items: center; justify-content: center;
}
.as-blog__placeholder .bi { font-size: 2.8rem; color: var(--as-brand-400); opacity: .7; }

.as-blog__cat {
    position: absolute; top: .75rem; inset-inline-start: .75rem;
    background: rgba(11,42,74,.82); color: #fff;
    font-size: var(--as-fs-xs); font-weight: var(--as-fw-semibold);
    padding: .25rem .65rem; border-radius: var(--as-radius-pill);
    backdrop-filter: blur(4px);
}

.as-blog__body {
    padding: var(--as-space-5);
    display: flex; flex-direction: column; flex: 1;
}
.as-blog__title {
    font-size: var(--as-fs-md); font-weight: var(--as-fw-bold);
    color: var(--as-ink-900); margin: 0 0 var(--as-space-2);
    line-height: 1.4;
}
.as-blog__title a { color: inherit; text-decoration: none; }
.as-blog__title a:hover { color: var(--as-brand-700); }
.as-blog__excerpt {
    color: var(--as-ink-500); font-size: var(--as-fs-sm);
    flex: 1; margin-bottom: var(--as-space-4);
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.as-blog__read {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: var(--as-fs-sm); font-weight: var(--as-fw-semibold);
    color: var(--as-brand-700); text-decoration: none;
    transition: gap .2s ease, color .2s ease;
}
.as-blog__read:hover { color: var(--as-brand-900); gap: .6rem; }

@media (max-width: 575.98px) {
    .as-blog-section { padding-block: var(--as-space-12) var(--as-space-14); }
}
@media (prefers-reduced-motion: reduce) {
    .as-blog {
        opacity: 1 !important; transform: none !important;
        transition: box-shadow .2s ease !important;
    }
    .as-blog__media img { transition: none !important; }
}

/* ============================================================
   CTA Band — strong homepage close (v2)
   Full-bleed branded container with proof list and IO reveal.
   ============================================================ */

.as-cta-section {
    padding-block: var(--as-space-10) var(--as-space-14);
    background: #fff;
}

.as-cta-band {
    position: relative;
    background: linear-gradient(
        135deg,
        var(--as-brand-900) 0%,
        var(--as-brand-800) 55%,
        #1a4f8a 100%
    );
    border-radius: var(--as-radius-2xl, 1.5rem);
    overflow: hidden;
    padding: var(--as-space-12) var(--as-space-10);

    /* IO reveal */
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.as-cta-section.is-visible .as-cta-band { opacity: 1; transform: none; }

/* Decorative rings */
.as-cta-band__deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.as-cta-band__deco-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.08);
}
.as-cta-band__deco-ring--1 {
    width: 560px; height: 560px;
    inset-inline-start: -180px; bottom: -240px;
}
.as-cta-band__deco-ring--2 {
    width: 300px; height: 300px;
    inset-inline-end: -80px; top: -120px;
    border-color: rgba(212,160,23,.12);
}

/* Content layout */
.as-cta-band__content {
    position: relative; z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--as-space-10);
    flex-wrap: wrap;
}
.as-cta-band__text { flex: 1; min-width: 260px; }
.as-cta-band__eyebrow {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: var(--as-fs-xs);
    font-weight: var(--as-fw-semibold);
    color: rgba(255,255,255,.65);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: var(--as-space-3);
}
.as-cta-band__title {
    font-size: clamp(1.55rem, 2.2vw + .5rem, 2.1rem);
    font-weight: var(--as-fw-bold);
    color: #fff;
    line-height: 1.25;
    margin: 0 0 var(--as-space-4);
}
.as-cta-band__lead {
    color: rgba(255,255,255,.72);
    font-size: var(--as-fs-md);
    margin: 0 0 var(--as-space-5);
    line-height: 1.65;
}

/* Proof bullets */
.as-cta-band__proof {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: var(--as-space-2) var(--as-space-5);
}
.as-cta-band__proof li {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: var(--as-fs-sm); font-weight: var(--as-fw-semibold);
    color: rgba(255,255,255,.88);
}
.as-cta-band__proof .bi {
    color: var(--as-gold-500, #d4a017); font-size: .9rem;
}

/* Actions */
.as-cta-band__actions {
    display: flex;
    flex-direction: column;
    gap: var(--as-space-3);
    flex: 0 0 auto;
}

/* Ghost-light button variant (for phone link) */
.as-btn--ghost-light {
    --_bg: transparent;
    --_bg-hover: rgba(255,255,255,.12);
    --_fg: rgba(255,255,255,.88);
    --_border: rgba(255,255,255,.4);
    --_border-hover: rgba(255,255,255,.7);
}

/* ── Responsive ── */
@media (max-width: 991.98px) {
    .as-cta-band { padding: var(--as-space-10) var(--as-space-7); }
    .as-cta-band__content { gap: var(--as-space-8); }
    .as-cta-band__actions { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 575.98px) {
    .as-cta-section { padding-block: var(--as-space-8) var(--as-space-10); }
    .as-cta-band { padding: var(--as-space-8) var(--as-space-5); border-radius: var(--as-radius-xl, 1rem); }
    .as-cta-band__content { flex-direction: column; gap: var(--as-space-6); }
    .as-cta-band__actions { width: 100%; }
    .as-cta-band__actions .as-btn { width: 100%; justify-content: center; }
    .as-cta-band__proof { gap: var(--as-space-2) var(--as-space-3); }
}
@media (prefers-reduced-motion: reduce) {
    .as-cta-band {
        opacity: 1 !important; transform: none !important;
        transition: none !important;
    }
}