/* ============================================================================
   SECTIONS — hero, work, value, services, why, process, about, contact
   ============================================================================ */

/* ---------------------------------- Hero (inverted: blue bg, white text) ----- */
.hero {
    position: relative;
    color: var(--color-text-on-dark);
    padding-top: clamp(3rem, 2rem + 6vw, 5rem);
    overflow: hidden;

    /* Height of the slider strip, which is the hero's last child and sits flush
       with its bottom edge. Derived from the slide geometry:
       (stride - 10px gap) x 10/16 aspect. Kept in sync with --slide-stride. */
    --slider-h: calc((84vw - 10px) * 0.625);

    /* Blue holds until just inside the top of the slider, then fades out so the
       slides' lower half — and their bottom edge — sit on the page background.
       Fades to --color-bg (not #fff) so it meets the next section seamlessly.
       The gradient lives here rather than on .hero-slider because that element
       is masked horizontally, which would strip the fill at its left/right edges. */
    background: linear-gradient(
        to bottom,
        var(--color-primary) 0,
        var(--color-primary) calc(100% - var(--slider-h) * 0.85),
        var(--color-bg) calc(100% - var(--slider-h) * 0.25)
    );
}

@media (min-width: 768px) {
    .hero {
        --slider-h: calc((29vw - 10px) * 0.625);
    }
}

.hero__content {
    max-width: 890px;
    margin: 0 auto;
    text-align: center;
}

.hero .eyebrow {
    color: var(--blue-200);
}

.hero__title {
    position: relative;
    /* scales down on small screens; caps at the original 46px on desktop */
    font-size: clamp(1.75rem, 1rem + 3.4vw, 46px);
    color: #fff;
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-heading);
}

.hero__content h3 {
    color: #fff;
    margin-top: 5px;
    margin-bottom: 25px;
}

/* keyword + icon (idea / implementation) — no highlight, inherits hero text colour */
.kw {
    display: inline-flex;
    align-items: center;
    gap: .22em;
    white-space: nowrap;
}

.hl__icon {
    width: .82em;
    height: .82em;
    display: inline-block;
    flex: none;
}

.hl__icon--spin {
    animation: cogspin 5s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes cogspin {
    to {
        transform: rotate(360deg);
    }
}

/* Bulb rays: soft pulse outward from the bulb centre (12,9 in viewBox) and back */
.hl__rays {
    transform-box: view-box;
    transform-origin: 12px 9px;
    animation: bulbRays 2.4s ease-in-out infinite;
}

@keyframes bulbRays {
    0%, 100% {
        transform: scale(.7);
        opacity: .4;
    }

    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hl__icon--spin, .hl__rays {
        animation: none;
    }

    .hl__rays {
        transform: none;
        opacity: 1;
    }
}

/* Hand-drawn connector arrow (idea → implementation), path drawn by JS */
.hero-arrow {
    position: absolute;
    left: 0;
    top: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}

.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
}

    .trust-strip li {
        position: relative;
        font-size: var(--fs-body-sm);
        font-weight: var(--fw-medium);
        color: rgba(255,255,255,.85);
        padding-left: var(--space-5);
    }

        .trust-strip li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            width: 8px;
            height: 8px;
            margin-top: -4px;
            border-radius: 50%;
            background: #fff;
        }

/* Service cards moved into the hero (glass on blue) */
.hero__cards {
    display: grid;
    gap: var(--grid-gutter);
    /* two per row from the smallest screens up */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-12);
}

@media (min-width: 960px) {
    .hero__cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

.hero .service-card {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: none;
    transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

    .hero .service-card:hover {
        background: rgba(255,255,255,.16);
        transform: translateY(-3px);
    }

    .hero .service-card p {
        color: #fff;
        text-align: center;
        font-weight: var(--fw-medium);
    }

    .hero .service-card p {
        color: rgba(255,255,255,.92);
        line-height: 1.4;
    }

.hero .service-card__icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    color: #55e99d;
}

        .hero .service-card__icon svg {
            width: 45px;
            height: 45px;
        }

/* Phone-sized hero: tighter top spacing, smaller headline, and cards stacked
   one per row with a small icon beside the text.
   NOTE: this block must stay AFTER the `.hero .service-card` rules above —
   it has the same specificity, so source order is what makes it win. */
@media (max-width: 559px) {
    .hero {
        padding-top: 25px;
    }

    .hero__title {
        font-size: 23px;
    }

    .hero__cards {
        grid-template-columns: 1fr;
        gap: var(--space-3);
        margin-top: var(--space-8);
    }

    /* icon left, text right */
    .hero .service-card {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: var(--space-3);
        padding: var(--space-4);
    }

        .hero .service-card > div {
            flex: 1;
            min-width: 0;
        }

        .hero .service-card p {
            text-align: left;
            font-size: var(--fs-body-sm);
            line-height: 1.35;
        }

    .hero .service-card__icon {
        flex: none;
        width: 1.5rem;
        height: 1.5rem;
    }

        .hero .service-card__icon svg {
            width: 24px;
            height: 24px;
        }
}

/* Hero full-width auto slideshow (seamless marquee, left → right) */
.hero-slider {
    margin-top: var(--space-12);
    width: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

/* Marquee geometry is driven by these two numbers, NOT by measuring the track.
   --slide-stride = one slide's full footprint (card + its gap)
   --unique-slides = how many distinct slides precede the duplicate set
   The animation then shifts by exactly stride x unique, which is precisely the
   distance to the duplicate — so the loop is seamless by construction. */
.hero-slider__track {
    display: flex;
    flex-wrap: nowrap;
    --slide-stride: 84vw;
    --unique-slides: 4; /* phones show 4 unique + 4 duplicates */
    animation: heroSlide 60s linear infinite;
    /* No `width: max-content`: engines disagree how to size a flex track whose
       items hold images with a large intrinsic width (these SVGs are 1640px),
       and a track measured wider than the slides actually occupy made
       translateX(-50%) overshoot, leaving long empty stretches on mobile.
       Also deliberately no will-change/backface-visibility — forcing a
       permanent layer on a multi-thousand-pixel track exceeds the GPU max
       texture size on phones and makes the slider stall then blank out. */
}

@media (min-width: 768px) {
    .hero-slider__track {
        --slide-stride: 29vw;
        --unique-slides: 8; /* all 16 slides are shown from tablet up */
    }
}

/* Pause on hover only where hovering is real. On touch, :hover latches after a
   tap and would leave the marquee permanently stopped. */
@media (hover: hover) and (pointer: fine) {
    .hero-slider:hover .hero-slider__track {
        animation-play-state: paused;
    }
}

/* The 10px gap lives INSIDE the slide as padding (border-box), not as a margin.
   That makes each slide's footprint exactly --slide-stride, so the animation
   distance is exact and does not depend on how the engine treats trailing
   margins in intrinsic sizing. */
.hero-slide {
    flex: 0 0 var(--slide-stride);
    padding-right: 10px;
}

/* Phones: slides are 84vw, so all 16 would make the track ~5200 CSS px
   (10000-15600 device px) — over the GPU max texture size, which is what makes
   the marquee stall, jump, then vanish. Drop to 8 slides by hiding 5-8 and
   13-16. What is left is 1,2,3,4 | 9,10,11,12 — still exact mirrored halves,
   so translateX(-50%) stays seamless. */
@media (max-width: 767px) {
    .hero-slide:nth-child(n+5):nth-child(-n+8),
    .hero-slide:nth-child(n+13) {
        display: none;
    }
}

.hero-slide__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: var(--space-3);
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
    /* tint shows only while the image loads; the img covers this box entirely.
       No backdrop-filter here — it was never visible but forced a blur layer
       per slide on an already-long animated track. */
    background: rgba(255,255,255,.12);
    overflow: hidden;
    color: #fff;
}

    .hero-slide__inner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }


.hero-slide__icon {
    width: 28px;
    height: 28px;
    color: rgba(255,255,255,.9);
}

.hero-slide__label {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-body);
}

/* Shift by exactly one full set of unique slides — the distance to the
   duplicate — so the restart is pixel-identical. Using a computed length
   instead of -50% removes any reliance on the track's measured width. */
@keyframes heroSlide {
    from {
        transform: translateX(calc(var(--slide-stride) * var(--unique-slides) * -1));
    }

    to {
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slider__track {
        animation: none;
        transform: none;
    }
}

/* Grow online — value intro section (heading + intro left, checklist right) */
.grow {
    display: grid;
    gap: clamp(var(--space-8), 4vw, var(--space-16));
    align-items: start;
}

@media (min-width: 860px) {
    .grow {
        grid-template-columns: 1fr 1fr;
    }
}

.grow__intro h2 {
    margin: var(--space-3) 0 var(--space-3);
}

.grow__list-title {
    font-size: var(--fs-h5);
    margin-bottom: var(--space-6);
}

.checklist {
    display: grid;
    gap: var(--space-4);
}

    .checklist li {
        display: flex;
        gap: var(--space-3);
        align-items: flex-start;
        font-size: var(--fs-body-lg);
        color: var(--color-text);
    }

    .checklist__icon {
        flex: none;
        display: grid;
        place-items: center;
        width: 1.6rem;
        height: 1.6rem;
        margin-top: .15rem;
        border-radius: 50%;
        background: var(--color-primary-subtle);
        color: var(--color-primary);
    }

        .checklist__icon svg {
            width: 14px;
            height: 14px;
        }

/* ---------------------------------- Grids ----------------------------------- */
.feature-grid {
    display: grid;
    gap: var(--grid-gutter);
    grid-template-columns: 1fr;
}

@media (min-width: 560px) {
    .feature-grid--4, .feature-grid--2, .feature-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .feature-grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }

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

/* Work cards */
.work-grid {
    display: grid;
    gap: var(--grid-gutter);
    grid-template-columns: 1fr;
}

@media (min-width: 600px) {
    .work-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.work-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base);
}

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

.work-card__title {
    margin-top: var(--space-1);
}

.work-card p {
    color: var(--color-text-secondary);
}

.work-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-3);
    font-weight: var(--fw-semibold);
    color: var(--color-primary);
}

    .work-card__link svg {
        transition: transform var(--dur-base) var(--ease-out);
    }

.work-card:hover .work-card__link svg {
    transform: translateX(4px);
}

/* Photo work cards — project image banner on top, title/description below */
.work-card--photo {
    flex-direction: column;
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.work-card__media {
    order: -1; /* image on top */
    width: 100%;
    aspect-ratio: 3 / 2; /* taller than 16/9 — gives the screenshot more room */
    height: auto;
    object-fit: cover;
    object-position: top center;
    background: var(--neutral-100); /* placeholder tint while loading / if missing */
    transition: transform var(--dur-slow) var(--ease-out);
}

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

.work-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-6) var(--space-8) var(--space-8);
}

/* Inverted section (blue bg, white text) — e.g. Value */
.section--invert {
    background: var(--color-primary);
    color: var(--color-text-on-dark);
}

    .section--invert h2, .section--invert h3, .section--invert h4, .section--invert h5 {
        color: #fff;
    }

    .section--invert .eyebrow {
        color: var(--blue-50);
    }

    .section--invert .section__head p {
        color: rgba(255,255,255,.82);
    }

    .section--invert .feature {
        background: rgba(255,255,255,.08);
        border-color: rgba(255,255,255,.16);
    }

        .section--invert .feature:hover {
            background: rgba(255,255,255,.13);
            box-shadow: none;
        }

        .section--invert .feature p {
            color: rgba(255,255,255,.82);
        }

    .section--invert .why-card p {
        color: rgba(255,255,255,.82);
    }

/* Feature / value cards */
.feature {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

    .feature:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }

    .feature h4 {
        margin-bottom: var(--space-2);
    }

    .feature p {
        color: var(--color-text-secondary);
    }

/* Phones (Value + "Why clients choose us"): put the icon on the same line as the
   card heading, with the paragraph spanning underneath. The markup is a flat
   icon / h4 / p, so a 2-column grid pairs the first two and lets p span. */
@media (max-width: 559px) {
    .feature {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        column-gap: var(--space-3);
        row-gap: var(--space-2);
        padding: var(--space-5);
    }

        .feature h4 {
            margin-bottom: 0;
            font-size: var(--fs-h5);
        }

        .feature p {
            grid-column: 1 / -1;
        }

    .feature__icon {
        width: 2rem;
        height: 2rem;
        margin-bottom: 0;
    }

        .feature__icon svg {
            width: 22px;
            height: 22px;
        }
}

/* Service cards */
.service-card {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
}

.service-card__num {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h4);
    color: var(--color-primary);
    line-height: 1;
}

.service-card h4 {
    margin-bottom: var(--space-2);
}

.service-card p {
    color: var(--color-text-secondary);
}

/* Bubbly background + glassmorphism (Services) */
.section--bubbly {
    position: relative;
    overflow: hidden;
    background: radial-gradient(42% 38% at 10% 16%, rgba(18,90,240,.18), transparent 70%), radial-gradient(38% 34% at 90% 10%, rgba(126,86,176,.18), transparent 70%), radial-gradient(46% 42% at 82% 88%, rgba(18,90,240,.14), transparent 70%), radial-gradient(34% 34% at 14% 92%, rgba(46,158,91,.12), transparent 70%), var(--color-bg);
}
    /* Glass cards (service + price) sit on the bubbly bg */
    .section--bubbly .service-card,
    .section--bubbly .price-card {
        background: rgba(255,255,255,.55);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
        border: 1px solid rgba(255,255,255,.6);
        box-shadow: 0 8px 28px rgba(20,24,31,.10);
        transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base);
    }

        .section--bubbly .service-card:hover,
        .section--bubbly .price-card:hover {
            transform: translateY(-3px);
            background: rgba(255,255,255,.72);
            box-shadow: 0 16px 40px rgba(20,24,31,.14);
        }

    .section--bubbly .price-card__meta {
        border-top-color: rgba(20,24,31,.10);
    }
/* Service cards: one row of 4 on desktop (1 → 2 → 4) */
@media (min-width: 960px) {
    .section--bubbly .feature-grid--2 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Pricing subsection */
.pricing {
    margin-top: var(--space-16);
}

.pricing__intro {
    max-width: var(--container-narrow);
    margin-inline: auto;
    text-align: center;
    margin-bottom: var(--space-12);
}

    .pricing__intro p {
        font-size: var(--fs-body-lg);
        color: var(--color-text-secondary);
        margin-top: var(--space-3);
    }

/* minmax(0, 1fr) — not plain 1fr — so a long CTA label can't force the
   track wider than the screen (it was overflowing and being clipped). */
.pricing-grid {
    display: grid;
    gap: var(--grid-gutter);
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.price-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

/* Big wireframe-sketch illustration of the service */
.price-card__art {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--blue-50);
    color: var(--color-primary);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-2);
}

    .price-card__art svg,
    .price-card__art img {
        display: block;
        width: 100%;
        max-width: 200px;
        height: auto;
    }

.price-card__desc {
    font-size: var(--fs-body-sm);
}

.price-card__price {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.price-card__amount {
    font-family: var(--font-heading);
    font-weight: var(--fw-extrabold);
    line-height: 1.05;
    letter-spacing: var(--ls-tight);
    color: var(--color-text-strong);
    font-variant-numeric: tabular-nums;
}

.price-card__term {
    font-size: var(--fs-body-sm);
    color: var(--color-text-muted);
}

.price-card__features {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

    .price-card__features li {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        font-size: var(--fs-body-sm);
        color: var(--color-text);
    }

        .price-card__features li::before {
            content: "";
            flex: none;
            width: 18px;
            height: 18px;
            margin-top: 1px;
            border-radius: 50%;
            background: var(--color-primary-subtle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23125AF0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
        }

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

    .price-card p {
        color: var(--color-text-secondary);
    }

.price-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    width: 100%;
    margin: 0;
    margin-top: auto;
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

    .price-card__meta div {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .price-card__meta dt {
        font-size: var(--fs-caption);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--ls-wider);
        text-transform: uppercase;
        color: var(--color-text-muted);
    }

    .price-card__meta dd {
        margin: 0;
        font-family: var(--font-heading);
        font-weight: var(--fw-bold);
        font-size: var(--fs-h5);
        font-variant-numeric: tabular-nums;
        color: var(--color-text-strong);
    }

/* Service icon + badge row at the top of each price card */
.price-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.price-card__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-lg);
    background: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-primary);
}

    .price-card__icon svg {
        width: 24px;
        height: 24px;
    }

/* Small badges */
.badge {
    display: inline-block;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: var(--color-primary-subtle);
    border: 1px solid var(--blue-100);
    padding: 0.3125rem 0.625rem;
    border-radius: var(--radius-pill);
}

.badge--primary {
    color: #fff;
    background: var(--color-primary);
    border-color: transparent;
}

/* Feature chips inside cards */
.tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

    .tag-chips li {
        font-size: var(--fs-caption);
        font-weight: var(--fw-medium);
        color: var(--color-text-secondary);
        background: var(--color-bg-alt);
        border: 1px solid var(--color-border);
        padding: 0.25rem 0.625rem;
        border-radius: var(--radius-pill);
    }

/* Featured tier accent */
.price-card--featured {
    border: 2px solid var(--color-primary);
    box-shadow: var(--shadow-md);
}

/* Trust bar under the pricing grid */
.trust-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3) var(--space-8);
    margin-top: var(--space-10);
    padding: var(--space-5) var(--space-6);
    background: rgba(255,255,255,.55);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: var(--radius-pill);
}

    .trust-bar li {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--fs-body-sm);
        font-weight: var(--fw-medium);
        color: var(--color-text);
    }

    .trust-bar svg {
        width: 16px;
        height: 16px;
        color: var(--color-primary);
        flex: none;
    }

/* Why cards */
.why-card {
    text-align: left;
}

    .why-card h4 {
        margin-bottom: var(--space-2);
    }

    .why-card p {
        color: var(--color-text-secondary);
    }

/* Soft gradient section background (Process) */
.section--grad {
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--blue-50) 100%);
}

/* Process — vertical timeline */
.process {
    position: relative;
    max-width: 940px;
    margin-inline: auto;
}

    .process::before {
        content: "";
        position: absolute;
        left: 31px;
        top: 10px;
        bottom: 10px;
        width: 2px;
        background: var(--color-border-strong);
    }

.process__step {
    position: relative;
    padding-left: 64px;
    margin-bottom: var(--space-5);
}

    .process__step:last-child {
        margin-bottom: 0;
    }
    /* timeline marker dot */
    .process__step::before {
        content: "";
        position: absolute;
        left: 24px;
        top: 16px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--color-primary);
        box-shadow: 0 0 0 4px var(--color-surface);
        z-index: 1;
    }

.process__card {
    position: relative;
    background: rgba(255,255,255,.55);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    padding-right: 5rem;
    box-shadow: 0 8px 28px rgba(20,24,31,.10);
    transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-base);
}

.process__icon {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-lg);
    background: var(--color-primary-subtle);
    color: var(--color-primary);
}

    .process__icon svg {
        width: 22px;
        height: 22px;
    }

.process__card:hover {
    background: rgba(255,255,255,.72);
    box-shadow: 0 16px 40px rgba(20,24,31,.14);
    transform: translateY(-2px);
}
/* huge blue number, no badge box */
.process__num {
    display: block;
    font-family: var(--font-heading);
    font-weight: var(--fw-extrabold);
    font-size: clamp(2.75rem, 2rem + 2vw, 3.5rem);
    line-height: 1;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.process__card h4 {
    margin-bottom: var(--space-2);
}

.process__card p {
    color: var(--color-text-secondary);
}

/* Two-sided alternating timeline on larger screens */
@media (min-width: 768px) {
    .process::before {
        left: 50%;
        transform: translateX(-50%);
    }

    .process__step {
        width: 50%;
        padding-left: 0;
        margin-bottom: var(--space-6);
    }

        .process__step:nth-child(odd) {
            left: 0;
            padding-right: 44px;
        }

        .process__step:nth-child(even) {
            left: 50%;
            padding-left: 44px;
        }

        .process__step:nth-child(odd)::before {
            left: auto;
            right: -8px;
        }

        .process__step:nth-child(even)::before {
            left: -8px;
        }
}

/* About */
.about {
    display: grid;
    gap: clamp(2rem, 1rem + 5vw, 4rem);
    align-items: center;
}

.about__media {
    position: relative;
    justify-self: center;
}

.about__avatar {
    display: grid;
    place-items: center;
    width: clamp(12rem, 30vw, 18rem);
    aspect-ratio: 1;
    font-family: var(--font-heading);
    font-weight: var(--fw-extrabold);
    font-size: clamp(3rem, 8vw, 5rem);
    box-shadow: var(--shadow-xl);
}

    .about__avatar img {
        border-radius: var(--radius-2xl);
    }


.about__content h2 {
    margin: var(--space-2) 0 var(--space-3);
}

.about__content > p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.about__content .tag-list {
    margin-block: var(--space-6);
}

.about__socials {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

    .about__socials a {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: var(--radius-md);
        background: var(--color-primary-subtle);
        color: var(--color-primary);
        transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
    }

        .about__socials a:hover {
            background: var(--color-primary);
            color: #fff;
            transform: translateY(-2px);
        }

    .about__socials svg {
        width: 22px;
        height: 22px;
    }

.about__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

/* Center all About content on mobile */
@media (max-width: 859px) {
    .about__content {
        text-align: center;
    }

        .about__content .tag-list,
        .about__socials,
        .about__ctas {
            justify-content: center;
        }

    /* Photo spans the full container width instead of a fixed 12rem square */
    .about__media {
        justify-self: stretch;
        width: 100%;
    }

    .about__avatar {
        width: 100%;
    }

        .about__avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
}

@media (min-width: 860px) {
    .about {
        grid-template-columns: .8fr 1.2fr;
    }
}

/* Contact */
.contact {
    background: var(--color-bg-alt);
    padding-top: 60px !important;
}

.contact__inner {
    max-width: var(--container-narrow);
    margin-inline: auto;
    text-align: center;
}

    .contact__art {
        display: block;
        width: 100%;
        max-width: 230px;
        height: auto;
        margin: 0 auto;
    }

    .contact__inner .lead {
        margin: var(--space-4) auto var(--space-8);
    }

.contact__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
}