/* ==========================================================================
   ppc-page.css — PPC Landing Page: Page-level overrides
   Hides global site header/footer, adds slim PPC footer
   ========================================================================== */

/* ── PPC page: hide nav links + hamburger, keep logo + CTA ──────────────── */
body.ppc-page {
    overflow-x: clip;
}

body.ppc-page .site-header__nav,
body.ppc-page .site-header__nav-toggle {
    display: none !important;
}

/* Logo left, header CTA right — 2-col grid when nav is hidden */
@media (min-width: 1025px) {
    body.ppc-page .site-header__inner {
        grid-template-columns: 1fr auto;
    }

    body.ppc-page .site-header__actions {
        grid-column: 2;
        justify-self: end;
    }
}

/* ── Hide global footer on PPC pages ─────────────────────────────────────── */
body.ppc-page .site-footer,
body.ppc-page #site-footer,
body.ppc-page footer.site-footer {
    display: none !important;
}

/* ── Hero top padding: push content below the absolute-positioned header ─── */
/* Desktop only — mobile overrides to 80px in ppc-hero.css */
@media (min-width: 640px) {
    body.ppc-page .ppc-hero__body {
        padding-top: 140px;
    }

    body.ppc-page .ppc-hero-outer > .ppc-hero__form-panel {
        margin-top: 140px;
    }
}

/* ── PPC footer — Figma 7758:36471 ───────────────────────────────────────── */
.ppc-footer {
    background-color: #1c1c1c;
    padding-block: 30px;
    padding-inline: var(--gutter, 60px);
}

.ppc-footer__inner {
    max-width: var(--max-width);
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ppc-footer__copy {
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.3;
    letter-spacing: 0;
    color: #ffffff;
    white-space: nowrap;
    margin: 0;
}

/* ── PPC Home Designs: scoped overrides for #ppc-designs ────────────────── */
/* Section: 1440×727, bg #ffffff, padding 80px / 60px */
#ppc-designs {
    background-color: #ffffff;
}

/* Hide eyebrow label only (Figma has no label on this section) */
#ppc-designs .designs-section__label {
    display: none !important;
}

/* Header: text left, pagination arrows right — Figma 7942:36655 */
#ppc-designs .designs-section__header {
    justify-content: space-between;
    align-items: flex-end;
}

#ppc-designs .designs-section__header-text {
    max-width: 705px;
    gap: 28px;
}

/* Heading: Freight Neo Book 40px, lh 115%, #1c1c1c */
#ppc-designs .designs-section__heading {
    font-size: 40px;
    line-height: 1.15;
    color: #1c1c1c;
}

/* Description: Geist Light 16px, lh 139%, #1c1c1c */
#ppc-designs .designs-section__description {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.39;
    color: #1c1c1c;
    max-width: 705px;
}

/* Horizontal carousel — 3 cards visible, arrows scroll overflow — Figma 7942:36666 */
#ppc-designs .designs-section__grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#ppc-designs .designs-section__grid::-webkit-scrollbar {
    display: none;
}

#ppc-designs .design-card {
    flex: 0 0 calc((100% - 40px) / 3);
    min-width: 0;
    scroll-snap-align: start;
}

#ppc-designs .design-card__image-link {
    aspect-ratio: 4 / 3;
}

/* Card body text container: gap 12px */
#ppc-designs .design-card__body {
    gap: 12px;
}

/* Card title: Geist, fits 22px line height */
#ppc-designs .design-card__title {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.1;
}

/* Mobile — Figma 390×779.61, padding 80px/16px, gap 40px
   Header (358×271, gap 40px): text → nav stacked
   Images (358×308, gap 20px): horizontal scroll          */
@media (max-width: 639px) {
    /* Section: override base 768px (padding:80px 0) → 16px sides */
    #ppc-designs.designs-section {
        padding: 80px 16px;
    }

    /* Inner: remove base 768px padding-inline:16px (section handles it) */
    #ppc-designs .designs-section__inner {
        padding-inline: 0;
        gap: 40px;
    }

    /* Label: keep hidden on mobile */
    #ppc-designs .designs-section__label {
        display: none !important;
    }

    /* Header: stack text → nav vertically, 40px gap */
    #ppc-designs .designs-section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    /* Heading: keep 40px (base 768px drops it to 32px) */
    #ppc-designs .designs-section__heading {
        font-size: 40px;
        line-height: 1.15;
    }

    /* Grid: one full card per view — no edge bleed or peek */
    #ppc-designs .designs-section__grid {
        display: flex !important;
        flex-direction: row;
        grid-template-columns: none;
        width: 100%;
        margin-inline: 0;
        padding-inline: 0;
        padding-bottom: 4px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 20px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    #ppc-designs .designs-section__grid::-webkit-scrollbar {
        display: none;
    }

    /* Card: full content width — one column per viewport */
    #ppc-designs .design-card {
        flex: 0 0 100%;
        min-width: 0;
        scroll-snap-align: start;
    }

    /* Image: 4:3 ratio (overrides base 3:2 on mobile) */
    #ppc-designs .design-card__image-link {
        aspect-ratio: 4 / 3;
    }
}

/* ── PPC Why Meadan: scoped overrides for #ppc-why ──────────────────────── */
/* Section: 540px, bg #e6dfd7, padding 80px 60px */
#ppc-why {
    min-height: 540px;
    background-color: var(--color-stone, #c8bbab);
}

/* Left column — proportional, not fixed 448px */
#ppc-why .cb-why__header {
    flex: 1 1 32%;
    min-width: 0;
    max-width: 448px;
    gap: 28px;
}

/* Heading: Freight Neo Book 40px, lh 115%, #1c1c1c */
#ppc-why .cb-why__heading {
    font-size: 40px;
    line-height: 1.15;
    color: #1c1c1c;
}

/* Body text: Geist Light 16px, lh 139%, #1c1c1c */
#ppc-why .cb-why__body {
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.39;
    color: #1c1c1c;
    margin: 0;
}

#ppc-why .cb-why__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 16px 25px;
    border-radius: 1000px;
    background-color: #1c1c1c;
    color: #ffffff;
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.16px;
    text-decoration: none;
}

/* Right items — flexible 2-col grid */
#ppc-why .cb-why__items {
    flex: 1 1 62%;
    min-width: 0;
    width: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 40px;
}

#ppc-why .cb-why__item {
    min-width: 0;
    gap: 10px;
}

/* Item number/title: Freight Neo 40px, lh 115%, #1c1c1c */
#ppc-why .cb-why__item-number {
    font-size: 40px;
    line-height: 1.15;
    color: #1c1c1c;
}

#ppc-why .cb-why__item-title {
    margin: 0;
    color: #1c1c1c;
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.1;
}

/* Item description: Geist Light 16px, lh 139%, #1c1c1c (not muted) */
#ppc-why .cb-why__item-description {
    font-size: 16px;
    line-height: 1.39;
    color: #1c1c1c;
}

/* Stack columns — align with cb-why.css at 900px */
@media (max-width: 900px) {
    #ppc-why .cb-why__header {
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    #ppc-why .cb-why__items {
        flex: none;
        width: 100%;
    }
}

/* Mobile — Figma 390×1276, padding 80px/16px, gap 40px */
@media (max-width: 639px) {
    /* Inner: column layout, 40px gap between header and items */
    #ppc-why .cb-why__inner {
        gap: 40px;
    }

    /* Heading: keep 40px on PPC (cb-why.css mobile drops to 32px) */
    #ppc-why .cb-why__heading {
        font-size: 40px;
        line-height: 1.15;
    }

    /* Items: single column */
    #ppc-why .cb-why__items {
        grid-template-columns: 1fr;
    }

    #ppc-why .cb-why__item {
        flex: none;
        width: 100%;
    }
}

/* ── Section divider — Figma: 1338px, 0.5px solid #1c1c1c, 50% opacity ─── */
.ppc-divider {
    border: none;
    border-top: 0.5px solid #1c1c1c;
    opacity: 0.5;
    max-width: var(--max-width);
    width: calc(100% - (var(--gutter, 60px) * 2));
    margin-inline: auto;
}

/* ── PPC Process Steps: override shared cb-process-steps header to centred ── */
/* Figma: 1440×599px, inner 1320×439px
   Container 1 (110px, gap 20px): title centred full-width + desc 538px centred
   Container 2 (289px, gap 40px): step carousel unchanged                       */

body.ppc-page #cb-process-steps .cb-process-steps__eyebrow {
    display: none;
}

/* Header: switch from space-between row → centred column, gap 20px */
body.ppc-page #cb-process-steps .cb-process-steps__header {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

/* Both header columns become full-width centred blocks */
body.ppc-page #cb-process-steps .cb-process-steps__header-left,
body.ppc-page #cb-process-steps .cb-process-steps__header-right {
    flex: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* Heading — Freight Neo Book 40px, lh 115%, centred, #1c1c1c */
body.ppc-page #cb-process-steps .cb-process-steps__heading {
    font-size: 40px;
    line-height: 1.15;
    text-align: center;
}

/* Description — Geist Light 16px, lh 139%, centred, 538px max */
body.ppc-page #cb-process-steps .cb-process-steps__description {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.39;
    text-align: center;
    color: #1c1c1c;
    max-width: 538px;
}

/* Step number — lh 100% (Figma: 100%, shared is 79.7%) */
body.ppc-page #cb-process-steps .cb-process-steps__step-number {
    line-height: 1.0;
}

/* Step title — lh 110% (Figma: 110%, shared is 84.6%) */
body.ppc-page #cb-process-steps .cb-process-steps__step-title {
    line-height: 1.1;
}

/* Arrow buttons — Figma: hug 58.38×27.36px, radius 1000px, 1px border, pad 10/16 */
body.ppc-page #cb-process-steps .cb-process-steps__arrow {
    width: auto;
    height: auto;
    padding: 10px 16px;
    border: 1px solid #1c1c1c;
    border-radius: 1000px;
    background: transparent;
    gap: 4px;
}

body.ppc-page #cb-process-steps .cb-process-steps__arrow:disabled {
    border-color: rgba(28, 28, 28, 0.3);
    opacity: 0.35;
}

body.ppc-page #cb-process-steps .cb-process-steps__arrow:not(:disabled):hover {
    background-color: #1c1c1c;
    color: #ffffff;
    opacity: 1;
}

/* Tablet: restore sensible widths */
@media (max-width: 959px) {
    body.ppc-page #cb-process-steps .cb-process-steps__description {
        max-width: 100%;
    }
}

/* ── PPC Process Steps — mobile overrides ───────────────────────────────── */
/* Figma 390×615.36, padding 80px/16px, gap 40px
   Header: title(32px/lh100%) → 28px gap → desc(16px/lh139%) = 126px
   Card container: step number(48px) → 40px → title(24px) → 40px → desc(88px) */
@media (max-width: 639px) {
    /* Heading: override desktop PPC 40px — Figma mobile is 32px/lh100% */
    body.ppc-page #cb-process-steps .cb-process-steps__heading {
        font-size: 32px;
        line-height: 1.0;
    }

    /* Header gap: 28px between title and description columns */
    body.ppc-page #cb-process-steps .cb-process-steps__header {
        gap: 28px;
    }

    /* Step card: 40px gap between number → title → description */
    body.ppc-page #cb-process-steps .cb-process-steps__step {
        gap: 40px;
    }

    /* Step description: lh 139% (Figma) overrides base 106.9% on mobile */
    body.ppc-page #cb-process-steps .cb-process-steps__step-description {
        line-height: 1.39;
    }
}

/* ── PPC Services — footer CTA + divider (projects-section handles grid) ─── */
#ppc-services .ppc-services__actions {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}

#ppc-services .ppc-services__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 25px;
    border-radius: 1000px;
    background-color: var(--color-dark, #1c1c1c);
    color: var(--color-white, #ffffff);
    font-family: var(--font-body, 'Geist', sans-serif);
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.16px;
    text-decoration: none;
}

#ppc-services .ppc-services__divider {
    width: 100%;
    margin: 0;
    border: 0;
    border-top: 0.5px solid rgba(28, 28, 28, 0.5);
}

/* PPC Services mobile — Figma 7778:38207 typography */
@media (max-width: 768px) {
    #ppc-services .projects-section__heading {
        font-size: 40px;
        line-height: 1.15;
    }

    #ppc-services .project-card__title {
        font-size: 24px;
    }
}

/* ── PPC Image Carousel — mobile height override ─────────────────────────── */
/* Figma 390×195px — base image-carousel.css sets 450px at max-width:768px   */
@media (max-width: 639px) {
    #ppc-carousel.image-carousel {
        height: 195px;
    }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    .ppc-footer {
        padding-inline: 16px;
    }

    .ppc-footer__copy {
        white-space: normal;
        text-align: center;
    }
}