/* ============================================================
   Projects page — editorial GSAP portfolio
   Scoped under .projects-page (+ a few body:has() page overrides).
   Reuses the global design tokens from site.css.
   ============================================================ */

.projects-page {
    --pp-gap: clamp(16px, 2vw, 32px);
    background: var(--space-black);
    color: var(--moon-ivory);
    font-family: var(--font-site);
    overflow-x: clip;
}

.projects-page *,
.projects-page *::before,
.projects-page *::after {
    box-sizing: border-box;
}

/* The shared header is position:sticky, which breaks inside ScrollSmoother's
   transformed #smooth-content. On this page it lives outside the wrapper and
   is pinned with position:fixed instead. */
body:has(.projects-page) .site-header {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
}

/* ScrollSmoother wrappers must not clip or constrain height. */
.projects-page #smooth-content {
    overflow: visible;
}

.pp-container {
    /* Match the site-wide container: full-bleed minus side gutters, no fixed cap. */
    width: calc(100% - calc(var(--side) * 2));
    max-width: none;
    margin-inline: auto;
}

/* ---------- shared type ---------- */
.pp-kicker {
    margin: 0;
    font-size: var(--type-label);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--quantum-teal);
}

.pp-section-title {
    margin: 0;
    font-size: var(--type-section);
    line-height: 1.02;
    letter-spacing: -0.02em;
    font-weight: 600;
}

/* ============================================================
   HERO
   ============================================================ */
.pp-hero {
    position: relative;
    min-height: 100svh;
    padding-top: calc(var(--header-height) + clamp(20px, 5vh, 60px));
    padding-bottom: clamp(40px, 8vh, 96px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: clip;
    /* Quiet, neutral radial depth — the near-black glow of the home hero. No mesh, no colour cast. */
    background:
        radial-gradient(120% 92% at 50% -10%, var(--deep-space), transparent 60%),
        var(--space-black);
}

/* Decorative concentric ripple — the one kept accent, dialled right back so it's a whisper, not colour. */
.pp-hero::after {
    content: "";
    position: absolute;
    top: -30%;
    right: -12vw;
    width: min(760px, 62vw);
    aspect-ratio: 1;
    z-index: 0;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0.4;
    background:
        radial-gradient(circle, rgba(104, 224, 196, 0.06) 0 15%, transparent 17%),
        repeating-radial-gradient(circle, transparent 0 78px, rgba(104, 224, 196, 0.05) 79px 80px, transparent 81px 156px);
}

.pp-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    align-items: center;
    gap: clamp(36px, 5vw, 80px);
}

.pp-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(22px, 2.6vw, 32px);
}

.pp-hero__title {
    margin: 0;
    font-size: clamp(2.6rem, 5.4vw, 5.25rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 600;
}

.pp-hero__foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    padding-top: clamp(20px, 2.6vw, 36px);
    border-top: 1px solid var(--line);
}

.pp-hero__lead {
    margin: 0;
    max-width: 46ch;
    font-size: var(--type-body-large);
    line-height: 1.55;
    color: var(--copy-secondary);
}

.pp-hero__count {
    font-size: clamp(1.2rem, 2vw, 2rem);
    color: var(--mist-silver);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pp-hero__cue {
    position: absolute;
    right: var(--side);
    bottom: clamp(20px, 4vh, 44px);
    z-index: 2;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--mist-silver);
    text-decoration: none;
    transition: color 0.3s ease, opacity 0.5s ease, transform 0.5s ease;
}

.pp-hero__cue:hover {
    color: var(--moon-ivory);
}

.pp-hero__cue-text {
    writing-mode: vertical-rl;
    font-size: var(--type-label);
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.pp-hero__cue-line {
    position: relative;
    width: 1px;
    height: clamp(40px, 7vh, 64px);
    overflow: hidden;
    background: linear-gradient(to bottom, transparent, color-mix(in oklch, var(--mist-silver) 55%, transparent));
}

.pp-hero__cue-line::after {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 42%;
    background: linear-gradient(to bottom, transparent, var(--quantum-teal));
    animation: pp-cue-slide 1.9s var(--ease-soft) infinite;
}

.pp-hero__cue.is-hidden {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}

@keyframes pp-cue-slide {
    0% { transform: translateY(-100%); opacity: 0; }
    35% { opacity: 1; }
    100% { transform: translateY(250%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-hero__cue-line::after {
        animation: none;
        transform: translateY(60%);
    }
}

.pp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.pp-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: clamp(4px, 1vw, 10px) 0 0;
    padding: 0;
    list-style: none;
}

.pp-hero__meta li {
    position: relative;
    padding-left: 18px;
    font-size: var(--type-small);
    color: var(--mist-silver);
}

.pp-hero__meta li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--quantum-teal);
}

/* ---------- hero stage: ghost wordmark + desktop + phone + mint glow ---------- */
.pp-hero__showcase {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: clamp(340px, 38vw, 500px);
    margin: 0;
    isolation: isolate;
}

/* Central mint glow so the devices read as the focal point. */
.pp-hero__showcase::before {
    content: "";
    position: absolute;
    inset: -6% 0 -10% 4%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(104, 224, 196, 0.20), rgba(104, 224, 196, 0.05) 56%, transparent 76%);
    filter: blur(6px);
    pointer-events: none;
}

/* Giant ghosted wordmark behind the devices — the reference's "WEB / APPLICATIONS". */
/* Desktop browser — the main device. */
.pp-hero__desktop {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: min(100%, 600px);
    margin-left: auto;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid rgba(246, 241, 234, 0.16);
    border-radius: 14px;
    background: #0c1418;
    box-shadow:
        0 44px 120px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(104, 224, 196, 0.08);
    will-change: transform;
}

.pp-hero__browser-bar {
    position: relative;
    flex: none;
    height: 36px;
    background: #0c1418;
    border-bottom: 1px solid rgba(246, 241, 234, 0.08);
}

.pp-hero__browser-bar::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 16px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff5f57;
    box-shadow: 17px 0 0 #febc2e, 34px 0 0 #28c840;
}

.pp-hero__browser-screen {
    flex: 1;
    overflow: hidden;
}

.pp-hero__browser-screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Phone — overlaps the desktop, front layer. */
.pp-hero__device {
    position: absolute;
    z-index: 6;
    left: clamp(-6px, 0.5vw, 14px);
    bottom: clamp(-30px, -2.6vw, -14px);
    width: clamp(116px, 13vw, 176px);
    overflow: hidden;
    border: 5px solid rgba(2, 7, 11, 0.96);
    border-radius: 26px;
    background: #0c1418;
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(246, 241, 234, 0.14),
        0 0 50px rgba(104, 224, 196, 0.12);
    will-change: transform;
}

.pp-hero__device img {
    display: block;
    width: 100%;
    aspect-ratio: 375 / 812;
    object-fit: cover;
    object-position: top center;
}

/* Gentle continuous motion — different timing gives parallax depth. */
@media (prefers-reduced-motion: no-preference) {
    .pp-hero__desktop {
        animation: pp-float-desk 7.5s ease-in-out infinite;
    }

    .pp-hero__device {
        animation: pp-float-phone 6s ease-in-out infinite;
    }

    .pp-hero__showcase::before {
        animation: pp-glow-pulse 7s ease-in-out infinite;
    }
}

@keyframes pp-float-desk {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

@keyframes pp-float-phone {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(12px) rotate(-4deg); }
}

@keyframes pp-glow-pulse {
    0%, 100% { opacity: 0.78; }
    50% { opacity: 1; }
}

@media (max-width: 960px) {
    .pp-hero {
        min-height: auto;
        /* The header is position:fixed on this page, so the offset must clear it.
           The extra gap below it is matched to the Trangle hero (44px) so both
           pages start at the same point on mobile. */
        padding-top: calc(var(--header-height) + 44px);
        padding-bottom: 50px;
        justify-content: flex-start;
    }

    /* Match the Trangle hero title scale (≤900px) for cross-page consistency. */
    .pp-hero__title {
        font-size: clamp(2.95rem, 10.8vw, 4.05rem);
        line-height: 0.93;
    }

    .pp-hero__inner {
        grid-template-columns: 1fr;
        gap: clamp(36px, 9vw, 56px);
    }

    .pp-hero__showcase {
        max-width: 560px;
        margin-inline: auto;
    }
}

/* Phone — mirror the Trangle hero exactly: same start gap below the fixed
   header (32px) and the same title scale, so both pages read consistently. */
@media (max-width: 640px) {
    .pp-hero {
        padding-top: calc(var(--header-height) + 32px);
        padding-bottom: 36px;
    }

    .pp-hero__title {
        font-size: clamp(2.62rem, 11.8vw, 3.18rem);
        line-height: 0.98;
    }
}

@media (max-width: 560px) {
    .pp-hero__showcase {
        min-height: clamp(280px, 66vw, 400px);
    }

    .pp-hero__device {
        width: clamp(96px, 30vw, 136px);
        bottom: -18px;
    }
}

/* ============================================================
   SELECTED — horizontal carousel
   ============================================================ */
.pp-selected {
    position: relative;
    /* The carousel viewport adds 18px of its own bottom room for card
       shadows, so trim this section's bottom padding by that amount to keep
       the gap to the next section consistent with every other section. */
    padding-top: var(--section-space);
    padding-bottom: calc(var(--section-space) - 18px);
}

.pp-selected__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem 2rem;
    flex-wrap: wrap;
    margin-bottom: clamp(28px, 4vw, 56px);
}

.pp-selected__controls {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 30px);
}

.pp-selected__counter {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-size: var(--type-small);
    font-variant-numeric: tabular-nums;
    color: var(--mist-silver);
}

.pp-selected__counter [data-pp-current] {
    color: var(--moon-ivory);
}

.pp-selected__counter-sep {
    opacity: 0.5;
}

.pp-selected__hint {
    margin: 0;
    font-size: var(--type-label);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mist-silver);
}

.pp-selected__buttons {
    display: flex;
    gap: 8px;
}

.pp-arrow {
    inline-size: 46px;
    block-size: 46px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--moon-ivory);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}

.pp-arrow svg {
    inline-size: 20px;
    block-size: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pp-arrow:hover {
    border-color: var(--quantum-teal);
    color: var(--quantum-teal);
}

.pp-arrow:disabled {
    opacity: 0.32;
    cursor: not-allowed;
    border-color: var(--line);
    color: var(--moon-ivory);
}

.pp-selected__viewport {
    overflow: hidden;
    /* Use margin (not padding) for the side gutter: overflow clips at the
       padding box, so a continuously-scrolling marquee would otherwise show
       through the padding. Margin insets the clip box itself, keeping the
       gutter and aligning slides with the section header (.pp-container). */
    margin-inline: var(--side);
    padding-block: 8px 18px;
    cursor: grab;
}

.pp-selected__viewport.is-dragging {
    cursor: grabbing;
}

.pp-selected__viewport:focus-visible {
    outline: 2px solid var(--quantum-teal);
    outline-offset: 4px;
}

.pp-selected__track {
    position: relative; /* makes slides' offsetLeft 0-based for the carousel math */
    display: flex;
    gap: var(--pp-gap);
    list-style: none;
    margin: 0;
    padding: 0;
    width: max-content;
    will-change: transform;
}

.pp-slide {
    flex: 0 0 auto;
    width: clamp(300px, 44vw, 560px);
    will-change: transform;
}

/* ---------- browser-frame window ---------- */
.pp-window {
    border-radius: 14px;
    overflow: hidden;
    background: var(--nebula-slate);
    border: 1px solid var(--line);
    box-shadow: 0 24px 48px -32px rgba(0, 0, 0, 0.8);
}

.pp-window__chrome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.22);
}

.pp-window__dots {
    display: inline-flex;
    gap: 6px;
    flex: 0 0 auto;
}

.pp-window__dots i {
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    background: var(--line);
}

.pp-window__url {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: var(--type-small);
    color: var(--mist-silver);
}

.pp-window__visit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--type-label);
    letter-spacing: 0.04em;
    color: var(--quantum-teal);
    text-decoration: none;
    white-space: nowrap;
}

.pp-window__visit:hover {
    text-decoration: underline;
}

/* the clipping screen — full-page shot scrolls inside on hover */
.pp-window__screen {
    --frame-h: clamp(300px, 52vh, 540px);
    position: relative;
    display: block;
    block-size: var(--frame-h);
    overflow: hidden;
    background: var(--nebula-slate);
    cursor: pointer;
}

.pp-window__shot {
    display: block;
    width: 100%;
    height: auto;
    transform: translateY(0);
    transition: transform 0.7s ease-out;
    will-change: transform;
}

.pp-window__index {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 14px;
    font-size: var(--type-small);
    font-variant-numeric: tabular-nums;
    color: var(--moon-ivory);
    mix-blend-mode: difference;
    pointer-events: none;
}

/* bottom fade hints there is more page below; clears on hover */
.pp-window__screen::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: 64px;
    background: linear-gradient(to top, rgba(2, 7, 11, 0.55), transparent);
    pointer-events: none;
    transition: opacity 0.4s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .pp-window__screen:hover .pp-window__shot,
    .pp-window__screen:focus-visible .pp-window__shot {
        transform: translateY(calc(-100% + var(--frame-h)));
        transition: transform calc(var(--shot-aspect, 4) * 1.5s) linear;
    }

    .pp-window__screen:hover::after {
        opacity: 0;
    }
}

/* ---------- slide caption ---------- */
.pp-slide__info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem 1.5rem;
    flex-wrap: wrap;
    margin-top: 18px;
}

.pp-slide__title {
    margin: 0;
    font-size: var(--type-card);
    font-weight: 600;
}

.pp-slide__type {
    margin: 4px 0 0;
    font-size: var(--type-small);
    color: var(--mist-silver);
}

.pp-slide__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-slide__tags li {
    font-size: var(--type-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mist-silver);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 12px;
}

/* ============================================================
   CTA
   ============================================================ */
.pp-cta {
    padding-block: var(--section-space);
    border-top: 1px solid var(--line);
    text-align: center;
}

.pp-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 2vw, 30px);
}

.pp-cta__title {
    margin: 0;
    max-width: 18ch;
    font-size: var(--type-section);
    line-height: 1;
    letter-spacing: -0.02em;
    font-weight: 600;
}

.pp-cta__lead {
    margin: 0;
    max-width: 48ch;
    font-size: var(--type-body-large);
    line-height: 1.6;
    color: var(--copy-secondary);
}

/* ============================================================
   Shared section heading
   ============================================================ */
.pp-head {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 72px);
    align-items: end;
    margin-bottom: clamp(36px, 5vw, 80px);
}

.pp-head__lead {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.4vw, 20px);
}

.pp-head__note {
    margin: 0;
    max-width: 42ch;
    font-size: var(--type-body-large);
    line-height: 1.55;
    color: var(--copy-secondary);
}

/* ============================================================
   WHAT WE BUILD — services (hairline spec grid)
   ============================================================ */
.pp-services {
    padding-block: var(--section-space);
}

.pp-services__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.pp-service {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(24px, 2.4vw, 42px);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transition: background-color 0.3s ease;
}

.pp-service:hover {
    background: rgba(246, 241, 234, 0.03);
}

.pp-service__icon {
    display: inline-flex;
    color: var(--quantum-teal);
}

.pp-service__icon .web-service-card__icon {
    width: 30px;
    height: 30px;
}

.pp-service__title {
    margin: 0;
    font-size: var(--type-card);
    font-weight: 600;
}

.pp-service__desc {
    margin: 0;
    font-size: var(--type-body);
    line-height: 1.55;
    color: var(--copy-secondary);
}

/* ============================================================
   PACKAGES — quote-based tiers
   ============================================================ */
.pp-packages {
    padding-block: var(--section-space);
}

.pp-packages__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(244px, 1fr));
    gap: clamp(14px, 1.5vw, 22px);
}

.pp-package {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(22px, 2vw, 34px);
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(246, 241, 234, 0.015);
}

.pp-package--featured {
    border-color: var(--line-strong);
    background: rgba(104, 224, 196, 0.06);
    padding-top: calc(clamp(22px, 2vw, 34px) + 14px);
}

.pp-package__badge {
    position: absolute;
    top: -11px;
    left: clamp(22px, 2vw, 34px);
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--quantum-teal);
    color: var(--space-black);
    font-size: var(--type-label);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pp-package__timeline {
    font-size: var(--type-label);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mist-silver);
}

.pp-package__name {
    margin: 0;
    font-size: var(--type-card);
    font-weight: 600;
}

.pp-package__best {
    margin: 0 0 4px;
    font-size: var(--type-small);
    line-height: 1.5;
    color: var(--copy-secondary);
}

.pp-package__list {
    list-style: none;
    margin: auto 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.pp-package__list li {
    position: relative;
    padding-left: 22px;
    font-size: var(--type-small);
    color: var(--moon-ivory);
}

.pp-package__list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--quantum-teal);
}

.pp-package .btn {
    margin-top: 14px;
}

/* ============================================================
   PROCESS — two-column: sticky intro + numbered rows
   ============================================================ */
.pp-process {
    padding-block: var(--section-space);
}

.pp-process__grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.6fr) minmax(420px, 1fr);
    gap: clamp(36px, 6vw, 86px);
    align-items: start;
}

.pp-process__intro {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2vw, 22px);
}

.pp-process__note {
    margin: 0;
    max-width: 40ch;
    font-size: var(--type-body-large);
    line-height: 1.6;
    color: var(--copy-secondary);
}

.pp-process__list {
    display: flex;
    flex-direction: column;
}

.pp-process__step {
    position: relative;
    display: grid;
    grid-template-columns: clamp(48px, 5vw, 78px) minmax(92px, 0.4fr) minmax(0, 1fr);
    gap: clamp(14px, 2.4vw, 34px);
    align-items: baseline;
    padding-block: clamp(22px, 3vw, 40px);
    padding-inline: clamp(10px, 1.6vw, 22px);
    border-top: 1px solid var(--line);
    border-radius: 16px;
    isolation: isolate;
    overflow: hidden;
}

.pp-process__step:last-child {
    border-bottom: 1px solid var(--line);
}

/* Soft mint glow on hover — mirrors the home-page process spotlight. */
.pp-process__step::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(130% 150% at 80% 50%, rgba(104, 224, 196, 0.12), transparent 62%);
    opacity: 0;
    transition: opacity 0.45s var(--ease-soft);
    pointer-events: none;
}

.pp-process__step:hover::before {
    opacity: 1;
}

.pp-process__num {
    font-size: clamp(1.4rem, 3vw, 2.5rem);
    font-variant-numeric: tabular-nums;
    color: var(--quantum-teal);
    line-height: 1;
    font-weight: 500;
}

.pp-process__label {
    margin: 0;
    font-size: var(--type-card);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.pp-process__desc {
    margin: 0;
    max-width: 52ch;
    font-size: var(--type-body-large);
    line-height: 1.55;
    color: var(--copy-secondary);
}

/* ============================================================
   FAQ — two-column rows (question / answer)
   ============================================================ */
.pp-faq {
    padding-block: var(--section-space);
}

.pp-faq__list {
    display: flex;
    flex-direction: column;
}

.pp-faq__item {
    display: grid;
    grid-template-columns: minmax(240px, 0.55fr) minmax(0, 1fr);
    gap: clamp(16px, 3vw, 56px);
    align-items: baseline;
    padding-block: clamp(22px, 2.6vw, 36px);
    border-top: 1px solid var(--line);
}

.pp-faq__item:last-child {
    border-bottom: 1px solid var(--line);
}

.pp-faq__q {
    margin: 0;
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.pp-faq__a {
    margin: 0;
    max-width: 60ch;
    font-size: var(--type-body-large);
    line-height: 1.6;
    color: var(--copy-secondary);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
    .pp-services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .pp-slide {
        width: min(82vw, 440px);
    }

    .pp-hero__foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .pp-hero__meta {
        align-items: flex-start;
        text-align: left;
    }

    .pp-hero__cue {
        display: none;
    }

    .pp-head {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .pp-services__grid {
        grid-template-columns: 1fr;
    }

    .pp-process__grid {
        grid-template-columns: 1fr;
        gap: clamp(28px, 6vw, 44px);
    }

    .pp-process__step {
        grid-template-columns: clamp(44px, 13vw, 64px) minmax(0, 1fr);
        column-gap: 16px;
        row-gap: 6px;
        align-items: baseline;
    }

    .pp-process__desc {
        grid-column: 2;
    }

    .pp-faq__item {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* ============================================================
   Pre-animation states — only when JS is active AND the user
   has NOT requested reduced motion. Keeps the page fully
   visible for no-JS / reduced-motion / failed-CDN cases.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    .pp-js [data-pp-hero],
    .pp-js [data-pp-hero-title],
    .pp-js [data-pp-split],
    .pp-js [data-pp-fade] {
        opacity: 0;
    }
}