/* =========================================================
   PAPERLY — GLOBAL BASE + NAVBAR
   Stationery & Office Supplies Store
   ========================================================= */


/* =========================================================
   1. ROOT DESIGN TOKENS
   ========================================================= */

:root {

    /* ---------- Brand Palette ---------- */

    --ppr-warm-porcelain: #F7F2EC;
    --ppr-autumn-ivory: #EFE5DA;
    --ppr-ink-charcoal: #2E292A;

    --ppr-dusty-rose: #A96768;
    --ppr-dusty-rose-dark: #8F5558;

    --ppr-sage-leaf: #747B68;
    --ppr-champagne-gold: #B79A67;

    --ppr-warm-taupe: #B9AAA0;

    /* Navbar active marker */
    --ppr-active-marker: rgba(169, 103, 104, 0.28);


    /* ---------- Typography ---------- */

    --ppr-font-family:
        "Manrope",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;


    /* ---------- Layout ---------- */

    --ppr-content-width: 1280px;

    --ppr-navbar-height: 82px;


    /* ---------- Radius ---------- */

    --ppr-radius-small: 8px;
    --ppr-radius-medium: 12px;
    --ppr-radius-large: 16px;


    /* ---------- Motion ---------- */

    --ppr-transition-fast: 200ms ease;
    --ppr-transition-normal: 280ms ease;
    --ppr-transition-slow: 400ms ease;


    /* ---------- Shadows ---------- */

    --ppr-navbar-shadow:
        0 8px 24px rgba(46, 41, 42, 0.07);

    --ppr-menu-shadow:
        -12px 0 40px rgba(46, 41, 42, 0.14);
}


/* =========================================================
   2. RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    margin: 0;

    background:
        var(--ppr-warm-porcelain);

    color:
        var(--ppr-ink-charcoal);

    font-family:
        var(--ppr-font-family);

    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;

    overflow-x: hidden;

    transition:
        background-color var(--ppr-transition-normal),
        color var(--ppr-transition-normal);
}


body.ppr-menu-open {
    overflow: hidden;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    border: 0;
    background: none;
    cursor: pointer;
}


a {
    color: inherit;
    text-decoration: none;
}


img,
svg {
    display: block;
    max-width: 100%;
}


ul,
ol {
    list-style: none;
}


/* =========================================================
   3. PAPERLY NAVBAR
   ========================================================= */

.ppr-navbar {
    position: sticky;
    top: 0;
    z-index: 5000;

    width: 100%;

    height: var(--ppr-navbar-height);

    background:
        rgba(239, 229, 218, 0.97);

    border-bottom:
        1px solid rgba(185, 170, 160, 0.38);

    box-shadow:
        var(--ppr-navbar-shadow);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transition:
        background-color var(--ppr-transition-normal),
        border-color var(--ppr-transition-normal),
        box-shadow var(--ppr-transition-normal);
}


.ppr-navbar__container {
    width: min(
        calc(100% - 48px),
        var(--ppr-content-width)
    );

    height: 100%;

    margin-inline: auto;

    display: flex;
    align-items: center;
}

.ppr-navbar--scrolled {
    box-shadow:
        0 10px 28px rgba(46, 41, 42, 0.11);
}
/* =========================================================
   4. BRAND
   ========================================================= */

.ppr-navbar__brand {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    gap: 11px;

    color:
        var(--ppr-ink-charcoal);

    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.8px;

    transition:
        color var(--ppr-transition-fast);
}


.ppr-navbar__brand:hover {
    color:
        var(--ppr-dusty-rose);
}


.ppr-navbar__logo {
    position: relative;

    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color:
        var(--ppr-sage-leaf);

    transition:
        transform var(--ppr-transition-normal),
        color var(--ppr-transition-fast);
}
.ppr-navbar__brand:hover .ppr-navbar__logo {
    transform: translateY(-1px);
}


.ppr-navbar__logo-svg {
    width: 100%;
    height: 100%;
}


.ppr-navbar__brand-name {
    white-space: nowrap;

    line-height: 1;

    font-weight: 700;
    letter-spacing: 1.4px;
}


/* =========================================================
   5. DESKTOP NAVIGATION
   ========================================================= */

.ppr-navbar__desktop-nav {
    margin-inline: auto;

    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 4px;
}


.ppr-navbar__nav-item {
    position: relative;

    height: 100%;

    display: flex;
    align-items: center;
}


.ppr-navbar__nav-link {
    position: relative;

    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    padding:
        0 12px;

    color:
        var(--ppr-ink-charcoal);

    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;

    transition:
        color var(--ppr-transition-fast);
}


.ppr-navbar__nav-link::before {
    content: "";

    position: absolute;
    z-index: 0;

    left: 3px;
    right: 3px;
    top: 50%;

    height: 36px;

    border-radius: 14px;

    background:
        var(--ppr-active-marker);

    opacity: 0;

    transform:
        translateY(-50%)
        scale(0.94);

    transform-origin: center;

    transition:
        opacity var(--ppr-transition-normal),
        transform var(--ppr-transition-normal);

    pointer-events: none;
}


.ppr-navbar__nav-link > * {
    position: relative;
    z-index: 1;
}


.ppr-navbar__nav-link:hover {
    color:
        var(--ppr-dusty-rose);
}


.ppr-navbar__nav-link--active {
    color:
        var(--ppr-ink-charcoal);
    isolation: isolate;
}


.ppr-navbar__nav-link--active::before {
    opacity: 1;

    transform:
        translateY(-50%)
        scale(1);
}


.ppr-navbar__dropdown-toggle {
    cursor: pointer;
}


.ppr-navbar__chevron {
    width: 15px;
    height: 15px;

    flex-shrink: 0;

    transition:
        transform var(--ppr-transition-normal);
}


.ppr-navbar__nav-item--dropdown.is-open
.ppr-navbar__chevron {
    transform:
        rotate(180deg);
}


/* =========================================================
   6. DESKTOP DROPDOWNS
   ========================================================= */

.ppr-navbar__dropdown {
    position: absolute;

    top: calc(100% - 2px);

    left: 50%;

    min-width: 210px;

    padding: 10px;

    background:
        var(--ppr-autumn-ivory);

    border:
        1px solid rgba(185, 170, 160, 0.48);

    box-shadow:
        0 18px 42px rgba(46, 41, 42, 0.13);

    border-radius:
        var(--ppr-radius-small);

    opacity: 0;
    visibility: hidden;

    transform:
        translate(-50%, 8px);

    transition:
        opacity var(--ppr-transition-fast),
        visibility var(--ppr-transition-fast),
        transform var(--ppr-transition-normal);
}


.ppr-navbar__nav-item--dropdown.is-open
.ppr-navbar__dropdown {
    opacity: 1;
    visibility: visible;

    transform:
        translate(-50%, 0);
}


.ppr-navbar__dropdown--products {
    min-width: 245px;
}


.ppr-navbar__dropdown-link {
    position: relative;

    width: 100%;

    display: flex;
    align-items: center;

    min-height: 42px;

    padding:
        9px 13px;

    border-radius:
        6px;

    color:
        var(--ppr-ink-charcoal);

    font-size: 13px;
    font-weight: 600;

    transition:
        color var(--ppr-transition-fast),
        background-color var(--ppr-transition-fast),
        padding var(--ppr-transition-fast);
}


.ppr-navbar__dropdown-link:hover {
    color:
        var(--ppr-dusty-rose);

    background:
        rgba(169, 103, 104, 0.10);

    padding-inline-start: 17px;
}


.ppr-navbar__dropdown-link--main {
    color:
        var(--ppr-dusty-rose);

    font-weight: 700;
}


.ppr-navbar__dropdown-link--details {
    color:
        var(--ppr-sage-leaf);

    font-weight: 700;
}


/* ---- ACTIVE PAGE — DROPDOWN LINK ---- */

.ppr-navbar__dropdown-link--active {
    color:
        var(--ppr-ink-charcoal);

    font-weight: 700;

    background:
        var(--ppr-active-marker);
}


.ppr-navbar__dropdown-divider {
    display: block;

    width: 100%;

    height: 1px;

    margin:
        7px 0;

    background:
        rgba(185, 170, 160, 0.45);
}


/* =========================================================
   7. DESKTOP ACTIONS
   ========================================================= */

.ppr-navbar__actions {
    flex-shrink: 0;

    display: flex;
    align-items: center;

    gap: 8px;
}


.ppr-navbar__icon-button {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(46, 41, 42, 0.22);

    border-radius:
        50%;

    color:
        var(--ppr-ink-charcoal);

    background:
        transparent;

    transition:
        color var(--ppr-transition-fast),
        background-color var(--ppr-transition-fast),
        border-color var(--ppr-transition-fast),
        transform var(--ppr-transition-fast);
}


.ppr-navbar__icon-button:hover {
    color:
        var(--ppr-dusty-rose);

    border-color:
        var(--ppr-dusty-rose);

    background:
        rgba(169, 103, 104, 0.08);

    transform:
        translateY(-1px);
}


.ppr-navbar__theme-icon {
    width: 18px;
    height: 18px;
}


.ppr-navbar__theme-icon--sun {
    display: none;
}


.ppr-navbar__rtl-button {
    min-width: 42px;
    height: 40px;

    padding:
        0 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(46, 41, 42, 0.22);

    border-radius:
        var(--ppr-radius-small);

    color:
        var(--ppr-ink-charcoal);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;

    transition:
        color var(--ppr-transition-fast),
        background-color var(--ppr-transition-fast),
        border-color var(--ppr-transition-fast);
}


.ppr-navbar__rtl-button:hover {
    color:
        var(--ppr-dusty-rose);

    border-color:
        var(--ppr-dusty-rose);

    background:
        rgba(169, 103, 104, 0.08);
}


.ppr-navbar__enquiry-button {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0 18px;

    border-radius:
        var(--ppr-radius-small);

    background:
        var(--ppr-dusty-rose);

    color:
        var(--ppr-warm-porcelain);

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;

    box-shadow:
        0 7px 18px rgba(169, 103, 104, 0.18);

    transition:
        background-color var(--ppr-transition-fast),
        transform var(--ppr-transition-fast),
        box-shadow var(--ppr-transition-fast);
}


.ppr-navbar__enquiry-button:hover {
    background:
        var(--ppr-dusty-rose-dark);

    transform:
        translateY(-1px);

    box-shadow:
        0 10px 22px rgba(169, 103, 104, 0.25);
}


/* =========================================================
   8. MOBILE ACTIONS
   ========================================================= */

.ppr-navbar__mobile-actions {
    display: none;

    margin-inline-start: auto;

    align-items: center;

    gap: 7px;
}


.ppr-navbar__menu-button {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;
    align-content: center;

    gap: 5px;

    border:
        1px solid rgba(46, 41, 42, 0.22);

    border-radius:
        var(--ppr-radius-small);

    color:
        var(--ppr-ink-charcoal);

    transition:
        color var(--ppr-transition-fast),
        border-color var(--ppr-transition-fast),
        background-color var(--ppr-transition-fast);
}


.ppr-navbar__menu-button:hover {
    color:
        var(--ppr-dusty-rose);

    border-color:
        var(--ppr-dusty-rose);

    background:
        rgba(169, 103, 104, 0.08);
}


.ppr-navbar__menu-button span {
    width: 19px;
    height: 2px;

    border-radius: 4px;

    background:
        currentColor;

    transition:
        transform var(--ppr-transition-normal),
        opacity var(--ppr-transition-fast);
}


/* =========================================================
   9. MOBILE OVERLAY
   ========================================================= */

.ppr-mobile-overlay {
    position: fixed;

    inset: 0;

    z-index: 5998;

    background:
        rgba(46, 41, 42, 0.40);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity var(--ppr-transition-normal),
        visibility var(--ppr-transition-normal);
}


.ppr-mobile-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   10. MOBILE MENU
   ========================================================= */

.ppr-mobile-menu {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;

    z-index: 5999;

    width: min(90vw, 430px);

    background:
        var(--ppr-autumn-ivory);

    border-left:
        1px solid rgba(185, 170, 160, 0.40);

    box-shadow:
        var(--ppr-menu-shadow);

    transform:
        translateX(105%);

    visibility: hidden;

    transition:
        transform var(--ppr-transition-slow),
        visibility var(--ppr-transition-slow);

    overflow: hidden;
}


.ppr-mobile-menu.is-open {
    transform:
        translateX(0);

    visibility: visible;
}


.ppr-mobile-menu__inner {
    width: 100%;
    height: 100%;

    padding:
        24px 24px 22px;

    display: flex;
    flex-direction: column;

    overflow-y: auto;
    overscroll-behavior: contain;

    scrollbar-width: thin;

    scrollbar-color:
        var(--ppr-dusty-rose)
        transparent;
}


.ppr-mobile-menu__inner::-webkit-scrollbar {
    width: 5px;
}


.ppr-mobile-menu__inner::-webkit-scrollbar-thumb {
    background:
        var(--ppr-dusty-rose);

    border-radius: 10px;
}


/* =========================================================
   11. MOBILE MENU HEADER
   ========================================================= */

.ppr-mobile-menu__header {
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 28px;

    padding-bottom: 18px;

    border-bottom:
        1px solid rgba(185, 170, 160, 0.48);
}


.ppr-mobile-menu__label {
    color:
        var(--ppr-ink-charcoal);

    font-size: 18px;
    font-weight: 700;

    letter-spacing: 0.4px;
}


.ppr-mobile-menu__close {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color:
        var(--ppr-ink-charcoal);

    font-size: 13px;
    font-weight: 700;

    transition:
        color var(--ppr-transition-fast);
}


.ppr-mobile-menu__close:hover {
    color:
        var(--ppr-dusty-rose);
}


.ppr-mobile-menu__close svg {
    width: 22px;
    height: 22px;
}


/* =========================================================
   12. MOBILE NAVIGATION
   ========================================================= */

.ppr-mobile-menu__nav {
    display: flex;
    flex-direction: column;
}


.ppr-mobile-menu__item {
    border-bottom:
        1px solid rgba(185, 170, 160, 0.30);
}


.ppr-mobile-menu__link {
    position: relative;

    width: 100%;

    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        0 4px;

    color:
        var(--ppr-ink-charcoal);

    font-size: 16px;
    font-weight: 700;

    text-align: left;

    transition:
        color var(--ppr-transition-fast),
        padding var(--ppr-transition-fast);
}


.ppr-mobile-menu__link:hover {
    color:
        var(--ppr-dusty-rose);

    padding-inline-start: 8px;
}


.ppr-mobile-menu__link--active {
    color: var(--ppr-ink-charcoal);
    isolation: isolate;
}


.ppr-mobile-menu__link--active::before {
    content: "";

    position: absolute;
    z-index: -1;

    left: -8px;
    right: -8px;
    top: 50%;

    height: 42px;

    border-radius: 14px;

    background:
        var(--ppr-active-marker);

    transform:
        translateY(-50%);

    pointer-events: none;
}


/* ---- ACTIVE PAGE — MOBILE SUBLINK ---- */

.ppr-mobile-menu__sublink--active {
    color:
        var(--ppr-ink-charcoal);

    font-weight: 700;

    border-left-color:
        var(--ppr-dusty-rose);

    background:
        var(--ppr-active-marker);
}


.ppr-mobile-menu__dropdown-toggle {
    cursor: pointer;

    border: 0;
    background: transparent;
    font: inherit;
}


.ppr-mobile-menu__plus {
    color:
        var(--ppr-dusty-rose);

    font-size: 21px;
    font-weight: 500;

    line-height: 1;

    transition:
        transform var(--ppr-transition-normal);
}


.ppr-mobile-menu__item.is-open
.ppr-mobile-menu__plus {
    transform:
        rotate(45deg);
}


/* =========================================================
   13. MOBILE SUBMENU
   ========================================================= */

.ppr-mobile-menu__submenu {
    display: block;

    max-height: 0;

    overflow: hidden;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transition:
        max-height var(--ppr-transition-normal),
        opacity var(--ppr-transition-fast),
        visibility 0s linear var(--ppr-transition-normal);
}


.ppr-mobile-menu__item.is-open
.ppr-mobile-menu__submenu {
    max-height: 700px;

    visibility: visible;
    opacity: 1;

    pointer-events: auto;

    transition:
        max-height var(--ppr-transition-normal),
        opacity var(--ppr-transition-fast),
        visibility 0s linear 0s;
}


.ppr-mobile-menu__sublink {
    min-height: 42px;

    display: flex;
    align-items: center;

    padding:
        0 15px;

    color:
        var(--ppr-ink-charcoal);

    font-size: 14px;
    font-weight: 600;

    border-left:
        2px solid transparent;

    transition:
        color var(--ppr-transition-fast),
        border-color var(--ppr-transition-fast),
        background-color var(--ppr-transition-fast),
        padding var(--ppr-transition-fast);
}


.ppr-mobile-menu__sublink:hover {
    color:
        var(--ppr-dusty-rose);

    border-left-color:
        var(--ppr-dusty-rose);

    background:
        rgba(169, 103, 104, 0.08);

    padding-inline-start: 19px;
}


.ppr-mobile-menu__sublink--main {
    color:
        var(--ppr-dusty-rose);

    font-weight: 700;
}


.ppr-mobile-menu__sublink--details {
    color:
        var(--ppr-sage-leaf);

    font-weight: 700;
}


/* ---- ACTIVE PAGE — WINS OVER --main / --details ---- */

.ppr-navbar__dropdown-link--main.ppr-navbar__dropdown-link--active,
.ppr-navbar__dropdown-link--details.ppr-navbar__dropdown-link--active,
.ppr-mobile-menu__sublink--main.ppr-mobile-menu__sublink--active,
.ppr-mobile-menu__sublink--details.ppr-mobile-menu__sublink--active {
    color:
        var(--ppr-ink-charcoal);

    font-weight: 700;

    background:
        var(--ppr-active-marker);
}

.ppr-mobile-menu__sublink--main.ppr-mobile-menu__sublink--active,
.ppr-mobile-menu__sublink--details.ppr-mobile-menu__sublink--active {
    border-left-color:
        var(--ppr-dusty-rose);
}


/* =========================================================
   14. MOBILE MENU FOOTER / ENQUIRY
   ========================================================= */

.ppr-mobile-menu__footer {
    margin-top: auto;

    padding-top: 28px;

    position: sticky;

    bottom: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            var(--ppr-autumn-ivory) 24%
        );
}


.ppr-mobile-menu__enquiry {
    width: 100%;

    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius:
        var(--ppr-radius-small);

    background:
        var(--ppr-dusty-rose);

    color:
        var(--ppr-warm-porcelain);

    font-size: 14px;
    font-weight: 700;

    box-shadow:
        0 8px 20px rgba(169, 103, 104, 0.18);

    transition:
        background-color var(--ppr-transition-fast),
        transform var(--ppr-transition-fast);
}


.ppr-mobile-menu__enquiry:hover {
    background:
        var(--ppr-dusty-rose-dark);

    transform:
        translateY(-1px);
}


/* =========================================================
   15. PRODUCTS TEST CONTENT
   ========================================================= */

.ppr-products-test {
    min-height: 180vh;
}


.ppr-products-test__hero {
    width: min(
        calc(100% - 48px),
        900px
    );

    min-height: 70vh;

    margin-inline: auto;

    padding:
        120px 0 100px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.ppr-products-test__eyebrow {
    margin-bottom: 16px;

    color:
        var(--ppr-dusty-rose);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 1.5px;
}


.ppr-products-test__title {
    max-width: 800px;

    margin-bottom: 24px;

    color:
        var(--ppr-ink-charcoal);

    font-size: 56px;
    font-weight: 700;

    line-height: 1.1;

    letter-spacing: -1.3px;
}


.ppr-products-test__text {
    max-width: 620px;

    color:
        rgba(46, 41, 42, 0.72);

    font-size: 16px;
    font-weight: 400;

    line-height: 1.6;
}


/* =========================================================
   16. FOCUS ACCESSIBILITY
   ========================================================= */

.ppr-navbar a:focus-visible,
.ppr-navbar button:focus-visible,
.ppr-mobile-menu a:focus-visible,
.ppr-mobile-menu button:focus-visible {
    outline:
        2px solid var(--ppr-dusty-rose);

    outline-offset:
        3px;
}


/* =========================================================
   17. LAPTOP
   ========================================================= */

@media (max-width: 1439px) {

    .ppr-navbar__container {
        width: min(
            calc(100% - 40px),
            1280px
        );
    }

    .ppr-navbar__brand-name {
        font-size: 17px;
    }

    .ppr-navbar__nav-link {
        padding-inline: 9px;
    }

    .ppr-navbar__enquiry-button {
        padding-inline: 15px;
    }
}


/* =========================================================
   18. TABLET
   ========================================================= */

@media (max-width: 1023px) {

    :root {
        --ppr-navbar-height: 76px;
    }

    .ppr-navbar__container {
        width: calc(100% - 32px);
    }

    .ppr-navbar__desktop-nav,
    .ppr-navbar__actions {
        display: none;
    }

    .ppr-navbar__mobile-actions {
        display: flex;
    }

    .ppr-navbar__brand-name {
        font-size: 17px;
    }

    .ppr-navbar__logo {
    width: 38px;
    height: 38px;
}
}


/* =========================================================
   19. MOBILE-L
   ========================================================= */

@media (max-width: 767px) {

    :root {
        --ppr-navbar-height: 70px;
    }

    .ppr-navbar__container {
        width: calc(100% - 28px);
    }

    .ppr-navbar__brand {
        gap: 8px;
    }

    .ppr-navbar__brand-name {
        font-size: 16px;
        letter-spacing: 1px;
    }

    .ppr-navbar__logo {
    width: 36px;
    height: 36px;
}

    .ppr-navbar__mobile-actions {
        gap: 5px;
    }

    .ppr-navbar__icon-button {
        width: 38px;
        height: 38px;
    }

    .ppr-navbar__rtl-button {
        min-width: 39px;
        height: 38px;

        padding-inline: 8px;
    }

    .ppr-navbar__menu-button {
        width: 39px;
        height: 38px;
    }

    .ppr-mobile-menu {
        width: min(91vw, 430px);
    }

    .ppr-mobile-menu__inner {
        padding:
            20px 20px 18px;
    }

    .ppr-products-test__hero {
        width: calc(100% - 36px);

        padding-top: 90px;
    }

    .ppr-products-test__title {
        font-size: 34px;
    }

    .ppr-products-test__text {
        font-size: 15px;
    }
}


/* =========================================================
   20. MOBILE-M
   ========================================================= */

@media (max-width: 575px) {

    .ppr-navbar__brand-name {
        font-size: 15px;
    }

   .ppr-navbar__logo {
    width: 34px;
    height: 34px;
}

    .ppr-navbar__icon-button {
        width: 36px;
        height: 36px;
    }

    .ppr-navbar__rtl-button {
        min-width: 37px;
        height: 36px;

        font-size: 11px;
    }

    .ppr-navbar__menu-button {
        width: 37px;
        height: 36px;
    }

    .ppr-navbar__theme-icon {
        width: 17px;
        height: 17px;
    }
}


/* =========================================================
   21. MOBILE-S
   ========================================================= */

@media (max-width: 374px) {

    :root {
        --ppr-navbar-height: 66px;
    }

    .ppr-navbar__container {
        width: calc(100% - 20px);
    }

    .ppr-navbar__brand {
        gap: 6px;
    }

    .ppr-navbar__brand-name {
        font-size: 13px;
        letter-spacing: 0.8px;
    }

    .ppr-navbar__logo {
    width: 32px;
    height: 32px;
}

    .ppr-navbar__mobile-actions {
        gap: 3px;
    }

    .ppr-navbar__icon-button {
        width: 34px;
        height: 34px;
    }

    .ppr-navbar__rtl-button {
        min-width: 34px;
        height: 34px;

        padding-inline: 6px;

        font-size: 10px;
    }

    .ppr-navbar__menu-button {
        width: 34px;
        height: 34px;
    }

    .ppr-mobile-menu__inner {
        padding:
            18px 16px 16px;
    }

    .ppr-mobile-menu__label {
        font-size: 16px;
    }

    .ppr-mobile-menu__link {
        min-height: 50px;

        font-size: 15px;
    }

    .ppr-mobile-menu__sublink {
        font-size: 13px;
    }

    .ppr-mobile-menu__enquiry {
        min-height: 49px;

        font-size: 13px;
    }

    .ppr-products-test__hero {
        width: calc(100% - 28px);
    }

    .ppr-products-test__title {
        font-size: 30px;
        letter-spacing: -0.8px;
    }

    .ppr-products-test__text {
        font-size: 15px;
    }
}


/* =========================================================
   22. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* =========================================================
   PAPERY - MOBILE MENU DROPDOWN TYPOGRAPHY FIX
   Keep Home and Products identical to other menu items
   ========================================================= */

.ppr-mobile-menu__dropdown-toggle {
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    font-style: normal;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-transform: none;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}

.ppr-mobile-menu__dropdown-toggle span:first-child {
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    font-style: normal;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}

/* =========================================================
   PAPERLY - GLOBAL FOOTER
   LIGHT MODE
   ========================================================= */

.ppr-footer {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;

    background: var(--ppr-footer-bg, #202124);
    color: var(--ppr-footer-text, #FFF8EC);
}


/* =========================================================
   BOTANICAL BACKGROUND
   ========================================================= */

.ppr-footer__botanical {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}


.ppr-footer__stem {
    position: absolute;
    width: 2px;
    height: 430px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(155, 163, 130, 0.28),
            transparent
        );

    transform-origin: bottom center;
}


.ppr-footer__stem--one {
    right: 7%;
    bottom: -70px;
    transform: rotate(28deg);
}


.ppr-footer__stem--two {
    left: 4%;
    bottom: -100px;
    height: 360px;
    transform: rotate(-25deg);
}


.ppr-footer__leaf {
    position: absolute;
    width: 74px;
    height: 34px;

    border: 1px solid rgba(155, 163, 130, 0.20);
    border-radius: 100% 0 100% 0;

    transform: rotate(-35deg);
}


.ppr-footer__leaf::after {
    content: "";
    position: absolute;

    width: 1px;
    height: 72px;

    left: 50%;
    top: -19px;

    background: rgba(155, 163, 130, 0.16);

    transform: rotate(42deg);
}


.ppr-footer__leaf--one {
    right: 10%;
    bottom: 95px;
    transform: rotate(24deg);
}


.ppr-footer__leaf--two {
    right: 3%;
    bottom: 210px;
    transform: rotate(-12deg) scale(0.72);
}


.ppr-footer__leaf--three {
    left: 4%;
    bottom: 80px;
    transform: rotate(-35deg) scale(0.8);
}


.ppr-footer__leaf--four {
    left: 10%;
    bottom: 220px;
    transform: rotate(15deg) scale(0.6);
}


/* =========================================================
   FOOTER INNER
   ========================================================= */

.ppr-footer__inner {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1280px;

    margin: 0 auto;

    padding:
        82px
        40px
        68px;

    display: grid;

    grid-template-columns:
    minmax(220px, 1.45fr)
    minmax(120px, 0.78fr)
    minmax(135px, 0.88fr)
    minmax(145px, 0.92fr)
    minmax(210px, 1.15fr);
    column-gap: 44px;
    row-gap: 55px;

    box-sizing: border-box;
}


/* =========================================================
   BRAND
   ========================================================= */

.ppr-footer__brand {
    min-width: 0;
}


.ppr-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    color: #FFF8EC;
    text-decoration: none;
}


.ppr-footer__logo-mark {
    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--ppr-sage-leaf);

    border: 1px solid rgba(116, 123, 104, 0.55);
}


.ppr-footer__logo-svg {
    width: 25px;
    height: 25px;
    display: block;
}


.ppr-footer__logo-name {
    font-family: "Manrope", sans-serif;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 1.8px;
}


.ppr-footer__description {
    max-width: 320px;

    margin: 23px 0 22px;

    color: rgba(255, 248, 236, 0.74);

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
}


.ppr-footer__location {
    max-width: 320px;

    display: flex;
    align-items: flex-start;
    gap: 10px;

    color: rgba(255, 248, 236, 0.72);

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
}


.ppr-footer__location-icon {
    flex: 0 0 auto;
    color: #D59A9C;
    margin-top: 2px;
}


/* =========================================================
   SOCIAL
   ========================================================= */

.ppr-footer__social {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-top: 27px;
}


.ppr-footer__social-link {
    width: 36px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 248, 236, 0.18);

    color: rgba(255, 248, 236, 0.76);

    text-decoration: none;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


.ppr-footer__social-link:hover {
    color: #FFF8EC;
    background: #B56F72;
    border-color: #B56F72;

    transform: translateY(-2px);
}


/* =========================================================
   FOOTER HEADINGS
   ========================================================= */

.ppr-footer__heading {
    margin: 3px 0 22px;

    color: #FFF8EC;

    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}


.ppr-footer__links {
    list-style: none;

    margin: 0;
    padding: 0;
}


.ppr-footer__links li {
    margin: 0 0 13px;
}


.ppr-footer__links a {
    color: rgba(255, 248, 236, 0.68);

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;

    text-decoration: none;

    transition:
        color 0.25s ease,
        padding-left 0.25s ease;
}


.ppr-footer__links a:hover {
    color: #D59A9C;
    padding-left: 4px;
}


/* =========================================================
   SUPPORT
   ========================================================= */

.ppr-footer__support-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 25px;
    padding-top: 20px;

    border-top: 1px solid rgba(255, 248, 236, 0.12);
}


.ppr-footer__support-icon {
    color: #D59A9C;
    font-size: 15px;
    margin-top: 2px;
}


.ppr-footer__support-note strong,
.ppr-footer__support-note span {
    display: block;
}


.ppr-footer__support-note strong {
    margin-bottom: 4px;

    color: #FFF8EC;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 700;
}


.ppr-footer__support-note div span {
    color: rgba(255, 248, 236, 0.58);

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 400;
}


/* =========================================================
   NEWSLETTER
   ========================================================= */

.ppr-footer__eyebrow {
    display: block;

    margin-bottom: 12px;

    color: #D59A9C;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.7px;
}


.ppr-footer__newsletter-title {
    margin: 0 0 14px;

    color: #FFF8EC;

    font-family: "Manrope", sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.5px;
}


.ppr-footer__newsletter-text {
    max-width: 320px;

    margin: 0 0 21px;

    color: rgba(255, 248, 236, 0.66);

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.65;
}


.ppr-footer__newsletter-form {
    width: 100%;

    display: flex;
    align-items: stretch;

    border-bottom: 1px solid rgba(255, 248, 236, 0.28);
}


.ppr-footer__newsletter-input {
    width: 100%;
    min-width: 0;

    padding: 13px 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #FFF8EC;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 400;
}


.ppr-footer__newsletter-input::placeholder {
    color: rgba(255, 248, 236, 0.48);
}


.ppr-footer__newsletter-input:focus {
    border-color: #D59A9C;
}


.ppr-footer__newsletter-button {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 12px 0 12px 14px;

    border: 0;
    background: transparent;

    color: #D59A9C;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.ppr-footer__newsletter-button:hover {
    color: #FFF8EC;
}


.ppr-footer__newsletter-button:hover i {
    transform: translateX(3px);
}


.ppr-footer__newsletter-button i {
    transition: transform 0.25s ease;
}


.ppr-footer__newsletter-message {
    min-height: 18px;

    margin: 9px 0 0;

    color: #B8C0A1;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 500;
}
/* =========================================================
   FOOTER CONTACT INFORMATION
   ========================================================= */

.ppr-footer__contact {
    min-width: 0;
    align-self: start;
}

.ppr-footer__contact .ppr-footer__heading {
    margin-bottom: 22px;
}


.ppr-footer__contact-list {
    display: flex;
    flex-direction: column;
    gap: 17px;

    margin: 0;
    padding: 0;
}


.ppr-footer__contact-item {
    margin: 0;
    padding: 0;
}


.ppr-footer__contact-label {
    display: block;

    margin-bottom: 4px;

    color: #D59A9C;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 700;

    line-height: 1.4;
}


.ppr-footer__contact-value {
    display: block;

    text-decoration: none;

    color: rgba(255, 248, 236, 0.68);

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 400;

    line-height: 1.55;

    overflow-wrap: anywhere;
}

.ppr-footer__contact-value:hover {
    color: #D59A9C;
}


/* =========================================================
   FOOTER BOTTOM
   ========================================================= */

.ppr-footer__bottom {
    position: relative;
    z-index: 2;

    width: 100%;

    border-top:
        1px solid
        rgba(255, 248, 236, 0.12);
}


.ppr-footer__bottom-inner {
    width: 100%;
    max-width: 1280px;

    margin: 0 auto;

    padding:
        22px 40px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    column-gap: 25px;

    box-sizing: border-box;
}


.ppr-footer__copyright,
.ppr-footer__usa {
    margin: 0;

    color: rgba(255, 248, 236, 0.50);

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 400;
}


.ppr-footer__usa {
    text-align: right;
}


.ppr-footer__usa-mark {
    margin-right: 6px;

    color: #D59A9C;
    font-weight: 700;
    letter-spacing: 0.8px;
}


.ppr-footer__legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}


.ppr-footer__legal a {
    color: rgba(255, 248, 236, 0.54);

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 400;

    text-decoration: none;

    transition: color 0.25s ease;
}


.ppr-footer__legal a:hover {
    color: #D59A9C;
}


.ppr-footer__legal-divider {
    color: rgba(255, 248, 236, 0.22);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.ppr-footer__sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* =========================================================
    LAPTOP AND TABLET
    768px - 1199px
   ========================================================= */

@media (max-width: 1199px) {

    .ppr-footer__inner {
        grid-template-columns:
            1.4fr
            1fr
            1fr;

        column-gap: 35px;

        padding:
            68px 6%
            58px;
    }


    .ppr-footer__brand {
        grid-column: 1 / -1;
    }


    .ppr-footer__newsletter {
        grid-column: 1 / 3;

        max-width: none;
    }


    .ppr-footer__bottom-inner {
        padding-left: 6%;
        padding-right: 6%;
    }

    .ppr-footer__contact {
        grid-column: 3 / -1;
        max-width: none;
    }
}


/* =========================================================
   MOBILE
   375px - 767px
   ========================================================= */

@media (max-width: 767px) {

    .ppr-footer__inner {
        grid-template-columns: 1fr;

        gap: 38px;

        padding:
            56px 7%
            48px;
    }


    .ppr-footer__brand,
    .ppr-footer__newsletter {
        grid-column: auto;
    }


    .ppr-footer__contact {
        grid-column: auto;
        max-width: 100%;
    }


    .ppr-footer__description {
        max-width: 100%;
    }


    .ppr-footer__heading {
        margin-bottom: 16px;
    }


    .ppr-footer__links li {
        margin-bottom: 11px;
    }


    .ppr-footer__newsletter-title {
        font-size: 23px;
    }


    .ppr-footer__bottom-inner {
        grid-template-columns: 1fr;

        gap: 12px;

        padding:
            20px 7%;
        text-align: center;
    }


    .ppr-footer__copyright,
    .ppr-footer__usa {
        text-align: center;
    }


    .ppr-footer__legal {
        order: 2;
    }


    .ppr-footer__usa {
        order: 3;
    }

    .ppr-footer__contact-list {
        gap: 15px;
    }


.ppr-footer__contact-value {
    font-size: 13px;
}
}


/* =========================================================
   SMALL MOBILE
   320px - 374px
   ========================================================= */

@media (max-width: 374px) {

    .ppr-footer__inner {
        padding:
            48px 6%
            42px;
    }


    .ppr-footer__logo-name {
        font-size: 17px;
    }


    .ppr-footer__description {
        font-size: 13px;
    }


    .ppr-footer__newsletter-title {
        font-size: 21px;
    }


    .ppr-footer__newsletter-form {
        display: block;

        border-bottom: 0;
    }


    .ppr-footer__newsletter-input {
        display: block;

        width: 100%;

        border-bottom:
            1px solid
            rgba(255, 248, 236, 0.28);
    }


    .ppr-footer__newsletter-button {
        padding-left: 0;
        padding-right: 0;
    }


    .ppr-footer__social-link {
        width: 34px;
        height: 34px;
    }

    .ppr-footer__contact-list {
    gap: 13px;
}


.ppr-footer__contact-label {
    font-size: 10px;
}


.ppr-footer__contact-value {
    font-size: 12px;
    line-height: 1.5;
}
}

/* =========================================================
   PAPERLY FOOTER LOGO
   STACKED PAPER MONOGRAM
   ========================================================= */

.ppr-footer__logo-mark {
    width: 48px;
    height: 48px;

    display: inline-grid;
    place-items: center;

    flex-shrink: 0;

    line-height: 0;
}

.ppr-footer__logo-svg {
    width: 100%;
    height: 100%;

    display: block;
}


/* =========================================================
   PAPERLY PRODUCTS PAGE
   Appended to the shared styles.css.
   Every selector is scoped to .ppr-products-page so this page
   does not change the styling of other Paperly pages.
   ========================================================= */

.ppr-products-page {
    --ppr-products-border: rgba(46, 41, 42, 0.14);
    --ppr-products-soft-border: rgba(46, 41, 42, 0.08);
    --ppr-products-card-bg: #EFE5DA;
    --ppr-products-panel-bg: rgba(239, 229, 218, 0.78);
    --ppr-products-muted: #665C5D;
    --ppr-products-shadow: 0 16px 45px rgba(46, 41, 42, 0.09);
    --ppr-products-radius: 16px;

    width: 100%;
    color: var(--ppr-ink-charcoal);
    background: var(--ppr-warm-porcelain);
}

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

.ppr-products-page img {
    display: block;
    max-width: 100%;
}

.ppr-products-page a {
    color: inherit;
}

/* =========================================================
   HERO — 70VH
   ========================================================= */

.ppr-products-page .ppr-products-hero {
    position: relative;
    min-height: 70vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--ppr-autumn-ivory);
}

.ppr-products-page .ppr-products-hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -2;
}

.ppr-products-page .ppr-products-hero__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            90deg,
            rgba(239, 229, 218, 0.94) 0%,
            rgba(239, 229, 218, 0.78) 45%,
            rgba(239, 229, 218, 0.56) 100%
        );
}

.ppr-products-page .ppr-products-hero__content {
    width: min(820px, calc(100% - 48px));
    padding: 70px 24px;
    text-align: center;
}

.ppr-products-page .ppr-products-hero__eyebrow,
.ppr-products-page .ppr-products-section-eyebrow,
.ppr-products-page .ppr-products-category__eyebrow,
.ppr-products-page .ppr-products-filter__eyebrow {
    display: block;
    color: var(--ppr-dusty-rose);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ppr-products-page .ppr-products-hero__title {
    max-width: 780px;
    margin: 14px auto 18px;
    color: var(--ppr-ink-charcoal);
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.ppr-products-page .ppr-products-hero__description {
    max-width: 650px;
    margin: 0 auto 28px;
    color: var(--ppr-ink-charcoal);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
}

.ppr-products-page .ppr-products-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid var(--ppr-dusty-rose);
    border-radius: var(--ppr-radius-medium);
    background: var(--ppr-dusty-rose);
    color: #fff8f5;
    font-size: 14px;
    font-weight: 700;
    transition:
        background-color var(--ppr-transition-fast),
        border-color var(--ppr-transition-fast),
        transform var(--ppr-transition-fast);
}

.ppr-products-page .ppr-products-hero__cta:hover {
    background: var(--ppr-dusty-rose-dark);
    border-color: var(--ppr-dusty-rose-dark);
    transform: translateY(-2px);
}

.ppr-products-page .ppr-products-hero__cta:focus-visible,
.ppr-products-page .ppr-products-view-all:focus-visible,
.ppr-products-page .ppr-products-card__link:focus-visible,
.ppr-products-page .ppr-products-trending__arrow:focus-visible,
.ppr-products-page .ppr-products-filter__clear:focus-visible,
.ppr-products-page .ppr-products-filter__mobile-toggle:focus-visible {
    outline: 3px solid rgba(169, 103, 104, 0.32);
    outline-offset: 4px;
}
/* =========================================================
   PRODUCTS — TRENDING SECTION CONTAINER
   ========================================================= */

.ppr-products-page .ppr-products-trending {
    width: min(1380px, calc(100% - 48px));
    margin: 0 auto;
    padding: 88px 0 96px;
}


/* =========================================================
   TRENDING SECTION HEADING
   ========================================================= */

.ppr-products-page .ppr-products-section-heading {
    width: 100%;
    margin: 0 0 32px;
}

.ppr-products-page .ppr-products-section-title {
    margin: 8px 0 10px;
    color: var(--ppr-ink-charcoal);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.ppr-products-page .ppr-products-section-description {
    max-width: 760px;
    margin: 0;
    color: var(--ppr-products-muted);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
}
/* =========================================================
   PAPERLY PRODUCTS — TRENDING SLIDER FIX
   EXACTLY 6 PRODUCTS
   3 PRODUCTS PER SLIDE
   ========================================================= */

.ppr-products-page .ppr-products-trending__viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.ppr-products-page .ppr-products-trending__track {
    display: flex;
    width: 200%;
    transform: translateX(0);
    transition: transform 500ms ease;
    will-change: transform;
}

.ppr-products-page .ppr-products-trending__slide {
    flex: 0 0 50%;
    width: 50%;
    min-width: 50%;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 24px;

    box-sizing: border-box;
}


/* =========================================================
   TRENDING PRODUCT CARD
   ========================================================= */

.ppr-products-page
.ppr-products-trending__slide
.ppr-products-card {
    min-width: 0;
    width: 100%;
}


/* =========================================================
   TRENDING PRODUCT IMAGE
   ========================================================= */

.ppr-products-page
.ppr-products-trending__slide
.ppr-products-card__image-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;

    overflow: hidden;
}

.ppr-products-page
.ppr-products-trending__slide
.ppr-products-card__image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 300ms ease;
}


/* =========================================================
   IMAGE HOVER
   ========================================================= */

.ppr-products-page
.ppr-products-trending__slide
.ppr-products-card:hover
.ppr-products-card__image {
    transform: scale(1.03);
}


/* =========================================================
   TRENDING CONTROLS
   ========================================================= */

.ppr-products-page
.ppr-products-trending__controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    gap: 10px;

    margin-top: 28px;
}

.ppr-products-page
.ppr-products-trending__arrow {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    border: 1px solid var(--ppr-warm-taupe);
    border-radius: 8px;

    background: transparent;
    color: var(--ppr-ink-charcoal);

    cursor: pointer;

    font-family: inherit;
    font-size: 18px;

    transition:
        background-color 200ms ease,
        color 200ms ease,
        border-color 200ms ease,
        opacity 200ms ease;
}

.ppr-products-page
.ppr-products-trending__arrow:hover:not(:disabled) {
    background: var(--ppr-dusty-rose);
    border-color: var(--ppr-dusty-rose);
    color: var(--ppr-warm-porcelain);
}

.ppr-products-page
.ppr-products-trending__arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1023px) {

    .ppr-products-page
    .ppr-products-trending__slide {
        gap: 18px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .ppr-products-page
    .ppr-products-trending__slide {

        /* AFTER */
grid-template-columns: 1fr;
gap: 12px;
    }

    .ppr-products-page
    .ppr-products-trending__controls {
        margin-top: 20px;
    }

    .ppr-products-page
    .ppr-products-trending__arrow {
        width: 40px;
        height: 40px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 374px) {

    .ppr-products-page
    .ppr-products-trending__slide {
        gap: 8px;
    }

}
/* =========================================================
   PRODUCT CARD
   ========================================================= */

.ppr-products-page .ppr-products-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ppr-products-soft-border);
    border-radius: var(--ppr-products-radius);
    background: var(--ppr-products-card-bg);
    box-shadow: 0 8px 24px rgba(46, 41, 42, 0.045);
    transition:
        transform var(--ppr-transition-normal),
        box-shadow var(--ppr-transition-normal),
        border-color var(--ppr-transition-normal);
}

.ppr-products-page .ppr-products-card:hover {
    transform: translateY(-5px);
    border-color: rgba(169, 103, 104, 0.32);
    box-shadow: var(--ppr-products-shadow);
}

.ppr-products-page .ppr-products-card__link {
    display: flex;
    height: 100%;
    flex-direction: column;
}

.ppr-products-page .ppr-products-card__image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.82;
    overflow: hidden;
    background: var(--ppr-warm-porcelain);
}

.ppr-products-page .ppr-products-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 500ms cubic-bezier(.2,.7,.2,1);
}

.ppr-products-page .ppr-products-card:hover .ppr-products-card__image {
    transform: scale(1.035);
}

.ppr-products-page .ppr-products-card__content {
    display: flex;
    min-height: 190px;
    flex: 1;
    flex-direction: column;
    padding: 20px;
}

.ppr-products-page .ppr-products-card__category {
    color: var(--ppr-dusty-rose);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.ppr-products-page .ppr-products-card__name {
    margin-top: 7px;
    color: var(--ppr-ink-charcoal);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}

.ppr-products-page .ppr-products-card__description {
    margin-top: 8px;
    color: var(--ppr-products-muted);
    font-size: 14px;
    line-height: 1.65;
}

.ppr-products-page .ppr-products-card__action {
    margin-top: 0;
    padding-top: 0;
    color: var(--ppr-dusty-rose-dark);
    font-size: 13px;
    font-weight: 700;
}

/* ---- CARD META ROW — PRICE (LEFT) + VIEW PRODUCT (RIGHT) ---- */

.ppr-products-page .ppr-products-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 14px;
    margin-top: auto;
    padding-top: 16px;
}

.ppr-products-page .ppr-products-card__price {
    color: var(--ppr-ink-charcoal);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* =========================================================
   COLLECTION + STICKY FILTER
   ========================================================= */

.ppr-products-page .ppr-products-collection {
    width: min(1380px, calc(100% - 48px));
    margin: 0 auto;
    padding: 20px 0 100px;
}

.ppr-products-page .ppr-products-collection__layout {
    display: grid;
    grid-template-columns: minmax(230px, 250px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(34px, 5vw, 78px);
}

.ppr-products-page .ppr-products-filter {
    position: sticky;
    top: var(--ppr-navbar-height);
    height: calc(100vh - var(--ppr-navbar-height));
    min-height: 480px;
    align-self: start;
}

.ppr-products-page .ppr-products-filter__top {
    padding: 4px 0 18px;
}

.ppr-products-page .ppr-products-filter__title {
    margin-top: 7px;
    color: var(--ppr-ink-charcoal);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.ppr-products-page .ppr-products-filter__scroll {
    height: calc(100% - 82px);
    padding-right: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ppr-warm-taupe) transparent;
}

.ppr-products-page .ppr-products-filter__scroll::-webkit-scrollbar {
    width: 5px;
}

.ppr-products-page .ppr-products-filter__scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--ppr-warm-taupe);
}

.ppr-products-page .ppr-products-filter__panel {
    padding: 0 0 22px;
    border-top: 1px solid var(--ppr-products-border);
}

.ppr-products-page .ppr-products-filter__group {
    min-width: 0;
    padding: 18px 0;
    border: 0;
    border-bottom: 1px solid var(--ppr-products-soft-border);
}

.ppr-products-page .ppr-products-filter__label {
    display: block;
    margin-bottom: 10px;
    padding: 0;
    color: var(--ppr-ink-charcoal);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.ppr-products-page .ppr-products-filter__input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--ppr-products-border);
    border-radius: var(--ppr-radius-small);
    outline: 0;
    background: transparent;
    color: var(--ppr-ink-charcoal);
    font-size: 13px;
    transition: border-color var(--ppr-transition-fast), box-shadow var(--ppr-transition-fast);
}

.ppr-products-page .ppr-products-filter__input::placeholder {
    color: var(--ppr-products-muted);
    opacity: 0.82;
}

.ppr-products-page .ppr-products-filter__input:focus {
    border-color: var(--ppr-dusty-rose);
    box-shadow: 0 0 0 3px rgba(169, 103, 104, 0.13);
}

.ppr-products-page .ppr-products-filter__option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 31px;
    color: var(--ppr-products-muted);
    font-size: 13px;
    line-height: 1.45;
    cursor: pointer;
}

.ppr-products-page .ppr-products-filter__option + .ppr-products-filter__option {
    margin-top: 4px;
}

.ppr-products-page .ppr-products-filter__option input {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    accent-color: var(--ppr-dusty-rose);
}

.ppr-products-page .ppr-products-filter__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--ppr-products-muted);
    font-size: 12px;
}

.ppr-products-page .ppr-products-filter__price-row output {
    color: var(--ppr-ink-charcoal);
    font-weight: 700;
}

.ppr-products-page .ppr-products-filter__range {
    width: 100%;
    margin: 0;
    accent-color: var(--ppr-dusty-rose);
    cursor: pointer;
}

.ppr-products-page .ppr-products-filter__clear {
    width: 100%;
    min-height: 42px;
    margin-top: 18px;
    border: 1px solid var(--ppr-dusty-rose);
    border-radius: var(--ppr-radius-small);
    color: var(--ppr-dusty-rose-dark);
    font-size: 13px;
    font-weight: 700;
    transition:
        background-color var(--ppr-transition-fast),
        color var(--ppr-transition-fast);
}

.ppr-products-page .ppr-products-filter__clear:hover {
    background: var(--ppr-dusty-rose);
    color: #fff8f5;
}

.ppr-products-page .ppr-products-filter__mobile-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
    padding: 0 14px;
    border: 1px solid var(--ppr-products-border);
    border-radius: var(--ppr-radius-small);
    color: var(--ppr-ink-charcoal);
    font-size: 14px;
    font-weight: 700;
}

/* =========================================================
   CATEGORY SECTIONS
   ========================================================= */

.ppr-products-page .ppr-products-content {
    min-width: 0;
}

.ppr-products-page .ppr-products-category {
    padding: 8px 0 74px;
}

.ppr-products-page .ppr-products-category + .ppr-products-category {
    padding-top: 70px;
    border-top: 1px solid var(--ppr-products-soft-border);
}

.ppr-products-page .ppr-products-category.is-filter-hidden {
    display: none;
}

.ppr-products-page .ppr-products-category__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
}

.ppr-products-page .ppr-products-category__title {
    margin-top: 7px;
    color: var(--ppr-ink-charcoal);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.ppr-products-page .ppr-products-category__description {
    max-width: 600px;
    margin-top: 8px;
    color: var(--ppr-products-muted);
    font-size: 14px;
    line-height: 1.65;
}

.ppr-products-page .ppr-products-view-all {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    color: var(--ppr-dusty-rose-dark);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: gap var(--ppr-transition-fast), color var(--ppr-transition-fast);
}

.ppr-products-page .ppr-products-view-all:hover {
    gap: 12px;
    color: var(--ppr-dusty-rose);
}

.ppr-products-page .ppr-products-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.ppr-products-page .ppr-products-grid .ppr-products-card.is-filter-hidden {
    display: none;
}

.ppr-products-page .ppr-products-empty {
    display: none;
    padding: 36px 18px;
    border: 1px dashed var(--ppr-products-border);
    border-radius: var(--ppr-products-radius);
    color: var(--ppr-products-muted);
    text-align: center;
    font-size: 14px;
}

.ppr-products-page .ppr-products-category.has-no-results .ppr-products-empty {
    display: block;
}

/* =========================================================
   RESPONSIVE — LAPTOP
   ========================================================= */

@media (max-width: 1439px) {
    .ppr-products-page .ppr-products-trending,
    .ppr-products-page .ppr-products-collection {
        width: min(1240px, calc(100% - 40px));
    }

    .ppr-products-page .ppr-products-collection__layout {
        gap: 42px;
    }
}

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1023px) {
    .ppr-products-page .ppr-products-hero {
        min-height: 62vh;
    }

    .ppr-products-page .ppr-products-hero__content {
        width: min(720px, calc(100% - 40px));
    }

    .ppr-products-page .ppr-products-trending {
        padding: 72px 0 80px;
    }

    .ppr-products-page .ppr-products-trending__slide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ppr-products-page .ppr-products-collection__layout {
        display: block;
    }

    .ppr-products-page .ppr-products-filter {
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
        margin-bottom: 40px;
    }

    .ppr-products-page .ppr-products-filter__mobile-toggle {
        display: flex;
    }

    .ppr-products-page .ppr-products-filter__mobile-toggle {
    position: relative;
    z-index: 5;
    cursor: pointer;
    pointer-events: auto;
    background: transparent;
}

    .ppr-products-page .ppr-products-filter__scroll {
        display: none;
        height: auto;
        max-height: 62vh;
        margin-top: 12px;
        padding: 0 12px 0 0;
        border-top: 1px solid var(--ppr-products-border);
    }

    .ppr-products-page .ppr-products-filter.is-open .ppr-products-filter__scroll {
        display: block;
    }

    .ppr-products-page .ppr-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* =========================================================
   RESPONSIVE — MOBILE-L / M
   ========================================================= */

@media (max-width: 767px) {
    .ppr-products-page .ppr-products-hero {
        min-height: 68vh;
    }

    .ppr-products-page .ppr-products-hero__veil {
        background:
            linear-gradient(
                180deg,
                rgba(239,229,218,.72),
                rgba(239,229,218,.92)
            );
    }

    .ppr-products-page .ppr-products-hero__content {
        width: calc(100% - 32px);
        padding: 48px 10px;
    }

    .ppr-products-page .ppr-products-hero__title {
        font-size: clamp(34px, 9vw, 46px);
    }

    .ppr-products-page .ppr-products-hero__description {
        font-size: 14px;
    }

    .ppr-products-page .ppr-products-trending,
    .ppr-products-page .ppr-products-collection {
        width: calc(100% - 28px);
    }

    .ppr-products-page .ppr-products-section-title {
        font-size: 32px;
    }

    /* AFTER */
.ppr-products-page .ppr-products-trending__slide {
    grid-template-columns: 1fr;
    gap: 14px;
}

    .ppr-products-page .ppr-products-card__content {
        min-height: 178px;
        padding: 16px;
    }

    .ppr-products-page .ppr-products-card__name {
        font-size: 17px;
    }

    .ppr-products-page .ppr-products-card__description {
        font-size: 13px;
    }

    .ppr-products-page .ppr-products-category__heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .ppr-products-page .ppr-products-category__title {
        font-size: 28px;
    }

    .ppr-products-page .ppr-products-grid {
    grid-template-columns: 1fr;
    gap: 14px;
}

.ppr-products-page .ppr-products-card__image-wrap {
    aspect-ratio: 1 / 0.72;
}

.ppr-products-page .ppr-products-card__content {
    min-height: 165px;
}
}

/* =========================================================
   RESPONSIVE — MOBILE-S
   ========================================================= */

@media (max-width: 374px) {
    .ppr-products-page .ppr-products-hero__title {
        font-size: 32px;
    }

    .ppr-products-page .ppr-products-trending__slide,
    .ppr-products-page .ppr-products-grid {
        grid-template-columns: 1fr;
    }

    .ppr-products-page .ppr-products-card__image-wrap {
        aspect-ratio: 1 / 0.72;
    }

    .ppr-products-page .ppr-products-card__content {
        min-height: 165px;
    }
}
/* =========================================================
   PAPERLY — WRITING PAGE ONLY
   Append this block to assets/css/styles.css.
   Every selector is scoped to .ppr-writing-page.
   ========================================================= */

.ppr-writing-page {
    --ppr-writing-border: rgba(46, 41, 42, 0.14);
    --ppr-writing-soft-border: rgba(46, 41, 42, 0.08);
    --ppr-writing-card-bg: #EFE5DA;
    --ppr-writing-muted: #665C5D;
    --ppr-writing-shadow: 0 16px 45px rgba(46, 41, 42, 0.09);
    --ppr-writing-radius: 16px;

    width: 100%;
    color: var(--ppr-ink-charcoal);
    background: var(--ppr-warm-porcelain);
}

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

.ppr-writing-page img {
    display: block;
    max-width: 100%;
}

/* =========================================================
   HERO — EXACTLY 70VH
   ========================================================= */

.ppr-writing-page .ppr-writing-hero {
    position: relative;
    min-height: 70vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--ppr-autumn-ivory);
}

.ppr-writing-page .ppr-writing-hero__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ppr-writing-page .ppr-writing-hero__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            90deg,
            rgba(239, 229, 218, 0.94) 0%,
            rgba(239, 229, 218, 0.78) 46%,
            rgba(239, 229, 218, 0.54) 100%
        );
}

.ppr-writing-page .ppr-writing-hero__content {
    width: min(820px, calc(100% - 48px));
    padding: 70px 24px;
    text-align: center;
}

.ppr-writing-page .ppr-writing-hero__eyebrow,
.ppr-writing-page .ppr-writing-filter__eyebrow,
.ppr-writing-page .ppr-writing-content__eyebrow,
.ppr-writing-page .ppr-writing-card__category {
    display: block;
    color: var(--ppr-dusty-rose);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ppr-writing-page .ppr-writing-hero__title {
    max-width: 780px;
    margin: 14px auto 18px;
    color: var(--ppr-ink-charcoal);
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.ppr-writing-page .ppr-writing-hero__description {
    max-width: 650px;
    margin: 0 auto 28px;
    color: var(--ppr-ink-charcoal);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
}

.ppr-writing-page .ppr-writing-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid var(--ppr-dusty-rose);
    border-radius: var(--ppr-radius-medium);
    background: var(--ppr-dusty-rose);
    color: #fff8f5;
    font-size: 14px;
    font-weight: 700;
    transition:
        background-color var(--ppr-transition-fast),
        border-color var(--ppr-transition-fast),
        transform var(--ppr-transition-fast);
}

.ppr-writing-page .ppr-writing-hero__cta:hover {
    background: var(--ppr-dusty-rose-dark);
    border-color: var(--ppr-dusty-rose-dark);
    transform: translateY(-2px);
}

/* =========================================================
   COLLECTION + STICKY FILTER
   ========================================================= */

.ppr-writing-page .ppr-writing-collection {
    width: min(1380px, calc(100% - 48px));
    margin: 0 auto;
    padding: 88px 0 100px;
}

.ppr-writing-page .ppr-writing-collection__layout {
    display: grid;
    grid-template-columns: minmax(230px, 250px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(34px, 5vw, 78px);
}

.ppr-writing-page .ppr-writing-filter {
    position: sticky;
    top: var(--ppr-navbar-height);
    height: calc(100vh - var(--ppr-navbar-height));
    min-height: 480px;
    align-self: start;
}

.ppr-writing-page .ppr-writing-filter__top {
    padding: 4px 0 18px;
}

.ppr-writing-page .ppr-writing-filter__title {
    margin-top: 7px;
    color: var(--ppr-ink-charcoal);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.ppr-writing-page .ppr-writing-filter__scroll {
    height: calc(100% - 82px);
    padding-right: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ppr-warm-taupe) transparent;
}

.ppr-writing-page .ppr-writing-filter__scroll::-webkit-scrollbar {
    width: 5px;
}

.ppr-writing-page .ppr-writing-filter__scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--ppr-warm-taupe);
}

.ppr-writing-page .ppr-writing-filter__panel {
    padding: 0 0 22px;
    border-top: 1px solid var(--ppr-writing-border);
}

.ppr-writing-page .ppr-writing-filter__group {
    min-width: 0;
    padding: 18px 0;
    border: 0;
    border-bottom: 1px solid var(--ppr-writing-soft-border);
}

.ppr-writing-page .ppr-writing-filter__label {
    display: block;
    margin-bottom: 10px;
    padding: 0;
    color: var(--ppr-ink-charcoal);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.ppr-writing-page .ppr-writing-filter__input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--ppr-writing-border);
    border-radius: var(--ppr-radius-small);
    outline: 0;
    background: transparent;
    color: var(--ppr-ink-charcoal);
    font-size: 13px;
    transition: border-color var(--ppr-transition-fast), box-shadow var(--ppr-transition-fast);
}

.ppr-writing-page .ppr-writing-filter__input::placeholder {
    color: var(--ppr-writing-muted);
    opacity: 0.82;
}

.ppr-writing-page .ppr-writing-filter__input:focus {
    border-color: var(--ppr-dusty-rose);
    box-shadow: 0 0 0 3px rgba(169, 103, 104, 0.13);
}

.ppr-writing-page .ppr-writing-filter__option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 31px;
    color: var(--ppr-writing-muted);
    font-size: 13px;
    line-height: 1.45;
    cursor: pointer;
}

.ppr-writing-page .ppr-writing-filter__option + .ppr-writing-filter__option {
    margin-top: 4px;
}

.ppr-writing-page .ppr-writing-filter__option input {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    accent-color: var(--ppr-dusty-rose);
}

.ppr-writing-page .ppr-writing-filter__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--ppr-writing-muted);
    font-size: 12px;
}

.ppr-writing-page .ppr-writing-filter__price-row output {
    color: var(--ppr-ink-charcoal);
    font-weight: 700;
}

.ppr-writing-page .ppr-writing-filter__range {
    width: 100%;
    margin: 0;
    accent-color: var(--ppr-dusty-rose);
    cursor: pointer;
}

.ppr-writing-page .ppr-writing-filter__clear {
    width: 100%;
    min-height: 42px;
    margin-top: 18px;
    border: 1px solid var(--ppr-dusty-rose);
    border-radius: var(--ppr-radius-small);
    color: var(--ppr-dusty-rose-dark);
    font-size: 13px;
    font-weight: 700;
    transition:
        background-color var(--ppr-transition-fast),
        color var(--ppr-transition-fast);
}

.ppr-writing-page .ppr-writing-filter__clear:hover {
    background: var(--ppr-dusty-rose);
    color: #fff8f5;
}

.ppr-writing-page .ppr-writing-filter__mobile-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
    padding: 0 14px;
    border: 1px solid var(--ppr-writing-border);
    border-radius: var(--ppr-radius-small);
    color: var(--ppr-ink-charcoal);
    font-size: 14px;
    font-weight: 700;
    position: relative;
    z-index: 5;
    cursor: pointer;
    pointer-events: auto;
}

.ppr-writing-page .ppr-writing-filter__mobile-icon {
    font-size: 17px;
    line-height: 1;
}

/* =========================================================
   PRODUCT CONTENT + 9 CARDS
   ========================================================= */

.ppr-writing-page .ppr-writing-content {
    min-width: 0;
}

.ppr-writing-page .ppr-writing-content__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
}

.ppr-writing-page .ppr-writing-content__title {
    margin-top: 7px;
    color: var(--ppr-ink-charcoal);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.ppr-writing-page .ppr-writing-content__description {
    max-width: 600px;
    margin-top: 8px;
    color: var(--ppr-writing-muted);
    font-size: 14px;
    line-height: 1.65;
}

.ppr-writing-page .ppr-writing-results {
    flex: 0 0 auto;
    color: var(--ppr-writing-muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.ppr-writing-page .ppr-writing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.ppr-writing-page .ppr-writing-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ppr-writing-soft-border);
    border-radius: var(--ppr-writing-radius);
    background: var(--ppr-writing-card-bg);
    box-shadow: 0 8px 24px rgba(46, 41, 42, 0.045);
    transition:
        transform var(--ppr-transition-normal),
        box-shadow var(--ppr-transition-normal),
        border-color var(--ppr-transition-normal);
}

.ppr-writing-page .ppr-writing-card:hover {
    transform: translateY(-5px);
    border-color: rgba(169, 103, 104, 0.32);
    box-shadow: var(--ppr-writing-shadow);
}

.ppr-writing-page .ppr-writing-card__link {
    display: flex;
    height: 100%;
    flex-direction: column;
}

.ppr-writing-page .ppr-writing-card__image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.82;
    overflow: hidden;
    background: var(--ppr-warm-porcelain);
}

.ppr-writing-page .ppr-writing-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 500ms cubic-bezier(.2,.7,.2,1);
}

.ppr-writing-page .ppr-writing-card:hover .ppr-writing-card__image {
    transform: scale(1.035);
}

.ppr-writing-page .ppr-writing-card__content {
    display: flex;
    min-height: 190px;
    flex: 1;
    flex-direction: column;
    padding: 20px;
}

.ppr-writing-page .ppr-writing-card__name {
    margin-top: 7px;
    color: var(--ppr-ink-charcoal);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}

.ppr-writing-page .ppr-writing-card__description {
    margin-top: 8px;
    color: var(--ppr-writing-muted);
    font-size: 14px;
    line-height: 1.65;
}

.ppr-writing-page .ppr-writing-card__action {
    margin-top: 0;
    padding-top: 0;
    color: var(--ppr-dusty-rose-dark);
    font-size: 13px;
    font-weight: 700;
}

/* ---- CARD META ROW — PRICE (LEFT) + VIEW PRODUCT (RIGHT) ---- */

.ppr-writing-page .ppr-writing-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 14px;
    width: 100%;
    margin-top: auto;
    padding-top: 16px;
}

.ppr-writing-page .ppr-writing-card__price {
    color: var(--ppr-ink-charcoal);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.ppr-writing-page .ppr-writing-card[hidden] {
    display: none !important;
}

.ppr-writing-page .ppr-writing-empty {
    display: none;
    margin-top: 20px;
    padding: 36px 18px;
    border: 1px dashed var(--ppr-writing-border);
    border-radius: var(--ppr-writing-radius);
    color: var(--ppr-writing-muted);
    text-align: center;
    font-size: 14px;
}

.ppr-writing-page .ppr-writing-empty.is-visible {
    display: block;
}

/* =========================================================
   RESPONSIVE — LAPTOP
   ========================================================= */

@media (max-width: 1439px) {
    .ppr-writing-page .ppr-writing-collection {
        width: min(1240px, calc(100% - 40px));
    }

    .ppr-writing-page .ppr-writing-collection__layout {
        gap: 42px;
    }
}

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1023px) {
    .ppr-writing-page .ppr-writing-collection__layout {
        display: block;
    }

    .ppr-writing-page .ppr-writing-filter {
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
        margin-bottom: 40px;
    }

    .ppr-writing-page .ppr-writing-filter__mobile-toggle {
        display: flex;
    }

    .ppr-writing-page .ppr-writing-filter__scroll {
        display: none;
        height: auto;
        max-height: 62vh;
        margin-top: 12px;
        padding-right: 12px;
        border-top: 1px solid var(--ppr-writing-border);
    }

    .ppr-writing-page .ppr-writing-filter.is-open .ppr-writing-filter__scroll {
        display: block;
    }

    .ppr-writing-page .ppr-writing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   RESPONSIVE — MOBILE-L / M
   ========================================================= */

@media (max-width: 767px) {
    .ppr-writing-page .ppr-writing-hero__content {
        width: calc(100% - 32px);
        padding: 48px 10px;
    }

    .ppr-writing-page .ppr-writing-hero__title {
        font-size: clamp(34px, 9vw, 46px);
    }

    .ppr-writing-page .ppr-writing-hero__description {
        font-size: 14px;
    }

    .ppr-writing-page .ppr-writing-collection {
        width: calc(100% - 28px);
        padding: 72px 0 80px;
    }

    .ppr-writing-page .ppr-writing-content__heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .ppr-writing-page .ppr-writing-content__title {
        font-size: 28px;
    }

    .ppr-writing-page .ppr-writing-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ppr-writing-page .ppr-writing-card__content {
        min-height: 178px;
        padding: 16px;
    }

    .ppr-writing-page .ppr-writing-card__name {
        font-size: 17px;
    }

    .ppr-writing-page .ppr-writing-card__description {
        font-size: 13px;
    }
}

/* =========================================================
   RESPONSIVE — MOBILE-S
   ========================================================= */

@media (max-width: 374px) {
    .ppr-writing-page .ppr-writing-hero__title {
        font-size: 32px;
    }

    .ppr-writing-page .ppr-writing-hero__description {
        font-size: 13px;
    }

    .ppr-writing-page .ppr-writing-collection {
        width: calc(100% - 24px);
    }

    .ppr-writing-page .ppr-writing-card__image-wrap {
        aspect-ratio: 1 / 0.72;
    }

    .ppr-writing-page .ppr-writing-card__content {
        min-height: 165px;
    }
}


/* =========================================================
   PAPERLY — NOTEBOOKS PAGE ONLY
   All selectors are scoped to .ppr-notebooks-page
   No global selectors are introduced.
   ========================================================= */


/* =========================================================
   NOTEBOOKS PAGE VARIABLES
   ========================================================= */

.ppr-notebooks-page {
    --ppr-notebooks-ivory: var(--ppr-autumn-ivory, #F4EBDD);
    --ppr-notebooks-paper: var(--ppr-soft-ivory, #FBF7F0);
    --ppr-notebooks-rose: var(--ppr-dusty-rose, #C48182);
    --ppr-notebooks-rose-dark: var(--ppr-dusty-rose-dark, #A86668);
    --ppr-notebooks-sage: var(--ppr-sage-leaf, #8A9A82);
    --ppr-notebooks-charcoal: var(--ppr-ink-charcoal, #2F3033);
    --ppr-notebooks-muted: #756F69;
    --ppr-notebooks-border: rgba(47, 48, 51, 0.13);
    --ppr-notebooks-shadow: rgba(47, 48, 51, 0.10);
    --ppr-notebooks-transition: 0.3s ease;
}


/* =========================================================
   HERO
   ========================================================= */

.ppr-notebooks-page .ppr-notebooks-hero {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 520px;
    max-height: 780px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background-image:
        url("../images/products/product-04.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    isolation: isolate;
}


.ppr-notebooks-page .ppr-notebooks-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(
            180deg,
            rgba(35, 31, 29, 0.30) 0%,
            rgba(35, 31, 29, 0.48) 100%
        );
}


.ppr-notebooks-page .ppr-notebooks-hero__content {
    width: min(850px, calc(100% - 40px));

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    color: #FFFFFF;

    padding: 40px 20px;
}


.ppr-notebooks-page .ppr-notebooks-hero__eyebrow {
    display: inline-block;

    margin-bottom: 18px;

    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: #FFFFFF;
}


.ppr-notebooks-page .ppr-notebooks-hero__title {
    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.05;

    font-weight: 700;
    letter-spacing: -0.045em;

    color: #FFFFFF;
}


.ppr-notebooks-page .ppr-notebooks-hero__description {
    max-width: 650px;

    margin: 22px auto 0;

    font-family: "Manrope", sans-serif;

    font-size: 16px;
    line-height: 1.75;
    font-weight: 400;

    color: #FFFFFF;
}


.ppr-notebooks-page .ppr-notebooks-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-top: 32px;

    min-height: 48px;
    padding: 0 24px;

    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 12px;

    text-decoration: none;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 600;

    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.10);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        background var(--ppr-notebooks-transition),
        border-color var(--ppr-notebooks-transition),
        transform var(--ppr-notebooks-transition);
}


.ppr-notebooks-page .ppr-notebooks-hero__cta:hover {
    background: var(--ppr-notebooks-rose);
    border-color: var(--ppr-notebooks-rose);

    transform: translateY(-2px);
}


/* =========================================================
   COLLECTION SECTION
   ========================================================= */

.ppr-notebooks-page .ppr-notebooks-collection {
    width: 100%;

    padding:
        clamp(70px, 7vw, 110px)
        clamp(20px, 5vw, 80px)
        100px;

    background: var(--ppr-notebooks-ivory);

    color: var(--ppr-notebooks-charcoal);
}


.ppr-notebooks-page .ppr-notebooks-collection__heading {
    width: min(780px, 100%);

    margin: 0 auto 60px;

    text-align: center;
}


.ppr-notebooks-page .ppr-notebooks-section__eyebrow {
    display: block;

    margin-bottom: 12px;

    font-family: "Manrope", sans-serif;

    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    color: var(--ppr-notebooks-rose-dark);
}


.ppr-notebooks-page .ppr-notebooks-section__title {
    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: clamp(30px, 3vw, 40px);
    line-height: 1.2;

    font-weight: 700;
    letter-spacing: -0.035em;

    color: var(--ppr-notebooks-charcoal);
}


.ppr-notebooks-page .ppr-notebooks-section__description {
    max-width: 680px;

    margin: 18px auto 0;

    font-family: "Manrope", sans-serif;

    font-size: 16px;
    line-height: 1.75;
    font-weight: 400;

    color: var(--ppr-notebooks-muted);
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.ppr-notebooks-page .ppr-notebooks-layout {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(250px, 290px)
        minmax(0, 1fr);

    align-items: start;

    gap: clamp(28px, 4vw, 60px);
}


/* =========================================================
   FILTER SIDEBAR
   ========================================================= */

.ppr-notebooks-page .ppr-notebooks-filter {
    position: sticky;

    top: 0;

    height: 100vh;
    max-height: 100vh;

    min-height: 0;

    display: flex;
    flex-direction: column;

    align-self: start;

    background: var(--ppr-notebooks-paper);

    border-right: 1px solid var(--ppr-notebooks-border);

    overflow: hidden;

    z-index: 5;
}


.ppr-notebooks-page .ppr-notebooks-filter__header {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 22px 20px 18px;

    border-bottom: 1px solid var(--ppr-notebooks-border);
}


.ppr-notebooks-page .ppr-notebooks-filter__eyebrow {
    display: block;

    margin-bottom: 5px;

    font-size: 11px;
    line-height: 1.3;
    font-weight: 700;

    letter-spacing: 0.15em;
    text-transform: uppercase;

    color: var(--ppr-notebooks-rose-dark);
}


.ppr-notebooks-page .ppr-notebooks-filter__title {
    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;

    color: var(--ppr-notebooks-charcoal);
}


.ppr-notebooks-page .ppr-notebooks-filter__scroll {
    flex: 1 1 auto;

    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 22px 20px 30px;

    scrollbar-width: thin;
    scrollbar-color:
        var(--ppr-notebooks-rose)
        transparent;
}


.ppr-notebooks-page .ppr-notebooks-filter__scroll::-webkit-scrollbar {
    width: 5px;
}


.ppr-notebooks-page .ppr-notebooks-filter__scroll::-webkit-scrollbar-track {
    background: transparent;
}


.ppr-notebooks-page .ppr-notebooks-filter__scroll::-webkit-scrollbar-thumb {
    background: var(--ppr-notebooks-rose);
    border-radius: 20px;
}


.ppr-notebooks-page .ppr-notebooks-filter__group {
    padding-bottom: 25px;
    margin-bottom: 25px;

    border-bottom: 1px solid var(--ppr-notebooks-border);
}


.ppr-notebooks-page .ppr-notebooks-filter__group:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}


.ppr-notebooks-page .ppr-notebooks-filter__label,
.ppr-notebooks-page .ppr-notebooks-filter__group-title {
    display: block;

    margin: 0 0 13px;

    font-family: "Manrope", sans-serif;

    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;

    color: var(--ppr-notebooks-charcoal);
}


.ppr-notebooks-page .ppr-notebooks-search {
    position: relative;
}


.ppr-notebooks-page .ppr-notebooks-search i {
    position: absolute;

    left: 14px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 13px;

    color: var(--ppr-notebooks-muted);

    pointer-events: none;
}


.ppr-notebooks-page .ppr-notebooks-search input {
    width: 100%;
    height: 44px;

    padding: 0 13px 0 39px;

    border: 1px solid var(--ppr-notebooks-border);
    border-radius: 10px;

    outline: none;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 400;

    color: var(--ppr-notebooks-charcoal);
    background: var(--ppr-notebooks-ivory);

    transition:
        border-color var(--ppr-notebooks-transition),
        box-shadow var(--ppr-notebooks-transition);
}


.ppr-notebooks-page .ppr-notebooks-search input::placeholder {
    color: var(--ppr-notebooks-muted);
}


.ppr-notebooks-page .ppr-notebooks-search input:focus {
    border-color: var(--ppr-notebooks-rose);

    box-shadow:
        0 0 0 3px
        rgba(196, 129, 130, 0.12);
}


/* =========================================================
   CHECKBOX / RADIO FILTERS
   ========================================================= */

.ppr-notebooks-page .ppr-notebooks-check {
    position: relative;

    display: flex;
    align-items: center;

    gap: 10px;

    min-height: 32px;

    cursor: pointer;

    font-family: "Manrope", sans-serif;

    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;

    color: var(--ppr-notebooks-charcoal);
}


.ppr-notebooks-page .ppr-notebooks-check + .ppr-notebooks-check {
    margin-top: 4px;
}


.ppr-notebooks-page .ppr-notebooks-check input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}


.ppr-notebooks-page .ppr-notebooks-check__box,
.ppr-notebooks-page .ppr-notebooks-check__radio {
    flex: 0 0 17px;

    width: 17px;
    height: 17px;

    border: 1px solid rgba(47, 48, 51, 0.28);

    background: transparent;

    transition:
        background var(--ppr-notebooks-transition),
        border-color var(--ppr-notebooks-transition),
        box-shadow var(--ppr-notebooks-transition);
}


.ppr-notebooks-page .ppr-notebooks-check__box {
    border-radius: 4px;
}


.ppr-notebooks-page .ppr-notebooks-check__radio {
    border-radius: 50%;
}


.ppr-notebooks-page .ppr-notebooks-check input:checked
~ .ppr-notebooks-check__box {
    border-color: var(--ppr-notebooks-rose);
    background: var(--ppr-notebooks-rose);

    box-shadow:
        inset 0 0 0 4px
        var(--ppr-notebooks-paper);
}


.ppr-notebooks-page .ppr-notebooks-check input:checked
~ .ppr-notebooks-check__radio {
    border-color: var(--ppr-notebooks-rose);

    box-shadow:
        inset 0 0 0 4px
        var(--ppr-notebooks-paper),
        inset 0 0 0 8px
        var(--ppr-notebooks-rose);
}


.ppr-notebooks-page .ppr-notebooks-check:hover
.ppr-notebooks-check__box,
.ppr-notebooks-page .ppr-notebooks-check:hover
.ppr-notebooks-check__radio {
    border-color: var(--ppr-notebooks-rose);
}


/* =========================================================
   PRICE
   ========================================================= */

.ppr-notebooks-page .ppr-notebooks-filter__price-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 12px;
}


.ppr-notebooks-page .ppr-notebooks-filter__price-heading
.ppr-notebooks-filter__group-title {
    margin-bottom: 0;
}


.ppr-notebooks-page .ppr-notebooks-filter__price-output {
    flex: 0 0 auto;

    font-family: "Manrope", sans-serif;

    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;

    color: var(--ppr-notebooks-rose-dark);
}


.ppr-notebooks-page .ppr-notebooks-price {
    display: block;

    width: 100%;
    height: 5px;

    margin: 15px 0 10px;

    appearance: none;
    -webkit-appearance: none;

    border: 0;
    border-radius: 10px;

    outline: none;

    background:
        linear-gradient(
            to right,
            var(--ppr-notebooks-rose) 0%,
            var(--ppr-notebooks-rose) 100%
        );

    cursor: pointer;
}


.ppr-notebooks-page .ppr-notebooks-price::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;

    width: 17px;
    height: 17px;

    border: 2px solid var(--ppr-notebooks-paper);
    border-radius: 50%;

    background: var(--ppr-notebooks-rose);

    box-shadow:
        0 1px 5px var(--ppr-notebooks-shadow);

    cursor: pointer;
}


.ppr-notebooks-page .ppr-notebooks-price::-moz-range-thumb {
    width: 17px;
    height: 17px;

    border: 2px solid var(--ppr-notebooks-paper);
    border-radius: 50%;

    background: var(--ppr-notebooks-rose);

    box-shadow:
        0 1px 5px var(--ppr-notebooks-shadow);

    cursor: pointer;
}


.ppr-notebooks-page .ppr-notebooks-filter__price-scale {
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-family: "Manrope", sans-serif;

    font-size: 11px;
    line-height: 1.3;
    font-weight: 500;

    color: var(--ppr-notebooks-muted);
}


/* =========================================================
   CLEAR FILTERS
   ========================================================= */

.ppr-notebooks-page .ppr-notebooks-filter__clear {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 42px;

    padding: 0 15px;

    border: 1px solid var(--ppr-notebooks-rose);
    border-radius: 9px;

    background: transparent;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 600;

    color: var(--ppr-notebooks-rose-dark);

    cursor: pointer;

    transition:
        background var(--ppr-notebooks-transition),
        color var(--ppr-notebooks-transition);
}


.ppr-notebooks-page .ppr-notebooks-filter__clear:hover {
    color: #FFFFFF;
    background: var(--ppr-notebooks-rose);
}


/* =========================================================
   MOBILE FILTER TOGGLE
   ========================================================= */

.ppr-notebooks-page .ppr-notebooks-filter__mobile-toggle {
    display: none;

    align-items: center;
    justify-content: space-between;

    width: 100%;

    border: 0;

    background: transparent;

    padding: 0;

    font-family: "Manrope", sans-serif;

    font-size: 14px;
    font-weight: 700;

    color: var(--ppr-notebooks-charcoal);

    cursor: pointer;
}


.ppr-notebooks-page .ppr-notebooks-filter__mobile-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    border: 1px solid var(--ppr-notebooks-border);
    border-radius: 50%;

    font-size: 17px;
    line-height: 1;

    color: var(--ppr-notebooks-charcoal);
}


/* =========================================================
   PRODUCT AREA
   ========================================================= */

.ppr-notebooks-page .ppr-notebooks-products {
    min-width: 0;
}


.ppr-notebooks-page .ppr-notebooks-products__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 28px;

    padding-bottom: 20px;

    border-bottom: 1px solid var(--ppr-notebooks-border);
}


.ppr-notebooks-page .ppr-notebooks-products__eyebrow {
    display: block;

    margin-bottom: 6px;

    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: 0.15em;
    text-transform: uppercase;

    color: var(--ppr-notebooks-rose-dark);
}


.ppr-notebooks-page .ppr-notebooks-products__title {
    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;

    letter-spacing: -0.025em;

    color: var(--ppr-notebooks-charcoal);
}


.ppr-notebooks-page .ppr-notebooks-products__results {
    flex: 0 0 auto;

    font-family: "Manrope", sans-serif;

    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;

    color: var(--ppr-notebooks-muted);
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

.ppr-notebooks-page .ppr-notebooks-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 30px 24px;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.ppr-notebooks-page .ppr-notebooks-card {
    min-width: 0;

    background: transparent;

    transition:
        transform var(--ppr-notebooks-transition);
}


.ppr-notebooks-page .ppr-notebooks-card:hover {
    transform: translateY(-4px);
}


.ppr-notebooks-page .ppr-notebooks-card[hidden] {
    display: none !important;
}


.ppr-notebooks-page .ppr-notebooks-card__link {
    display: block;

    height: 100%;

    text-decoration: none;

    color: inherit;
}


.ppr-notebooks-page .ppr-notebooks-card__image-wrap {
    position: relative;

    width: 100%;

    aspect-ratio: 1 / 1.08;

    overflow: hidden;

    background: #E9E1D6;
}


.ppr-notebooks-page .ppr-notebooks-card__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}


.ppr-notebooks-page .ppr-notebooks-card:hover
.ppr-notebooks-card__image {
    transform: scale(1.035);
}


.ppr-notebooks-page .ppr-notebooks-card__content {
    padding: 18px 2px 0;
}


.ppr-notebooks-page .ppr-notebooks-card__category {
    display: block;

    margin-bottom: 7px;

    font-family: "Manrope", sans-serif;

    font-size: 10px;
    line-height: 1.3;
    font-weight: 700;

    letter-spacing: 0.15em;
    text-transform: uppercase;

    color: var(--ppr-notebooks-rose-dark);
}


.ppr-notebooks-page .ppr-notebooks-card__name {
    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: 18px;
    line-height: 1.35;
    font-weight: 600;

    letter-spacing: -0.015em;

    color: var(--ppr-notebooks-charcoal);
}


.ppr-notebooks-page .ppr-notebooks-card__description {
    margin: 8px 0 0;

    font-family: "Manrope", sans-serif;

    font-size: 13px;
    line-height: 1.65;
    font-weight: 400;

    color: var(--ppr-notebooks-muted);
}


.ppr-notebooks-page .ppr-notebooks-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 15px;
}


.ppr-notebooks-page .ppr-notebooks-card__price {
    font-family: "Manrope", sans-serif;

    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;

    color: var(--ppr-notebooks-charcoal);
}


.ppr-notebooks-page .ppr-notebooks-card__view {
    font-family: "Manrope", sans-serif;

    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;

    color: var(--ppr-notebooks-rose-dark);

    white-space: nowrap;

    transition:
        color var(--ppr-notebooks-transition);
}


.ppr-notebooks-page .ppr-notebooks-card:hover
.ppr-notebooks-card__view {
    color: var(--ppr-notebooks-rose);
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.ppr-notebooks-page .ppr-notebooks-empty {
    display: none;

    width: 100%;

    padding: 70px 20px;

    text-align: center;
}


.ppr-notebooks-page .ppr-notebooks-empty.is-visible {
    display: block;
}


.ppr-notebooks-page .ppr-notebooks-empty h3 {
    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: 22px;
    line-height: 1.35;
    font-weight: 700;

    color: var(--ppr-notebooks-charcoal);
}


.ppr-notebooks-page .ppr-notebooks-empty p {
    margin: 10px 0 0;

    font-family: "Manrope", sans-serif;

    font-size: 14px;
    line-height: 1.6;

    color: var(--ppr-notebooks-muted);
}


/* =========================================================
   LAPTOP-L — 1440PX+
   ========================================================= */

@media (min-width: 1440px) {

    .ppr-notebooks-page .ppr-notebooks-layout {
        grid-template-columns:
            285px
            minmax(0, 1fr);

        gap: 55px;
    }


    .ppr-notebooks-page .ppr-notebooks-grid {
        gap: 38px 28px;
    }

}


/* =========================================================
   LAPTOP — 1024PX TO 1439PX
   ========================================================= */

@media (min-width: 1024px) and (max-width: 1439px) {

    .ppr-notebooks-page .ppr-notebooks-collection {
        padding-left: 40px;
        padding-right: 40px;
    }


    .ppr-notebooks-page .ppr-notebooks-layout {
        grid-template-columns:
            255px
            minmax(0, 1fr);

        gap: 30px;
    }


    .ppr-notebooks-page .ppr-notebooks-grid {
        gap: 28px 20px;
    }


    .ppr-notebooks-page .ppr-notebooks-card__name {
        font-size: 17px;
    }


    .ppr-notebooks-page .ppr-notebooks-card__description {
        font-size: 12.5px;
    }

}


/* =========================================================
   TABLET — 768PX TO 1023PX
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .ppr-notebooks-page .ppr-notebooks-hero {
        height: 70vh;
        min-height: 480px;
    }


    .ppr-notebooks-page .ppr-notebooks-collection {
        padding:
            65px 28px 80px;
    }


    .ppr-notebooks-page .ppr-notebooks-collection__heading {
        margin-bottom: 40px;
    }


    .ppr-notebooks-page .ppr-notebooks-layout {
        display: block;
    }


    /* FILTER BECOMES ACCORDION */

    .ppr-notebooks-page .ppr-notebooks-filter {
        position: relative;

        top: auto;

        width: 100%;
        height: auto;
        max-height: none;

        margin-bottom: 35px;

        border: 1px solid var(--ppr-notebooks-border);
    }


    .ppr-notebooks-page .ppr-notebooks-filter__header {
        display: block;

        padding: 18px 20px;
    }


    .ppr-notebooks-page .ppr-notebooks-filter__header > div {
        display: flex;
        align-items: center;
        justify-content: space-between;

        margin-bottom: 0;
    }


    .ppr-notebooks-page .ppr-notebooks-filter__header
    .ppr-notebooks-filter__eyebrow,
    .ppr-notebooks-page .ppr-notebooks-filter__header
    .ppr-notebooks-filter__title {
        display: none;
    }


    .ppr-notebooks-page .ppr-notebooks-filter__mobile-toggle {
        display: flex;
    }


    .ppr-notebooks-page .ppr-notebooks-filter__scroll {
        display: none;

        max-height: 65vh;

        overflow-y: auto;
    }


    .ppr-notebooks-page .ppr-notebooks-filter.is-open
    .ppr-notebooks-filter__scroll {
        display: block;
    }


    .ppr-notebooks-page .ppr-notebooks-products__top {
        margin-bottom: 25px;
    }


    .ppr-notebooks-page .ppr-notebooks-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 30px 22px;
    }


    .ppr-notebooks-page .ppr-notebooks-card__image-wrap {
        aspect-ratio: 1 / 1.05;
    }

}


/* =========================================================
   MOBILE L / MOBILE — 375PX TO 767PX
   ========================================================= */

@media (min-width: 375px) and (max-width: 767px) {

    .ppr-notebooks-page .ppr-notebooks-hero {
        height: 70vh;
        min-height: 440px;
    }


    .ppr-notebooks-page .ppr-notebooks-hero__content {
        width: calc(100% - 28px);
        padding: 30px 14px;
    }


    .ppr-notebooks-page .ppr-notebooks-hero__eyebrow {
        font-size: 10px;
        letter-spacing: 0.14em;
    }


    .ppr-notebooks-page .ppr-notebooks-hero__title {
        font-size: 42px;
    }


    .ppr-notebooks-page .ppr-notebooks-hero__description {
        max-width: 340px;

        margin-top: 17px;

        font-size: 14px;
        line-height: 1.7;
    }


    .ppr-notebooks-page .ppr-notebooks-hero__cta {
        margin-top: 25px;

        min-height: 45px;
        padding: 0 20px;

        font-size: 13px;
    }


    .ppr-notebooks-page .ppr-notebooks-collection {
        padding:
            55px 17px 70px;
    }


    .ppr-notebooks-page .ppr-notebooks-collection__heading {
        margin-bottom: 32px;
    }


    .ppr-notebooks-page .ppr-notebooks-section__title {
        font-size: 29px;
    }


    .ppr-notebooks-page .ppr-notebooks-section__description {
        margin-top: 13px;

        font-size: 14px;
        line-height: 1.7;
    }


    .ppr-notebooks-page .ppr-notebooks-layout {
        display: block;
    }


    /* FILTER */

    .ppr-notebooks-page .ppr-notebooks-filter {
        position: relative;

        top: auto;

        width: 100%;
        height: auto;
        max-height: none;

        margin-bottom: 30px;

        border: 1px solid var(--ppr-notebooks-border);
    }


    .ppr-notebooks-page .ppr-notebooks-filter__header {
        display: block;

        padding: 16px;
    }


    .ppr-notebooks-page .ppr-notebooks-filter__header > div {
        display: block;
    }


    .ppr-notebooks-page .ppr-notebooks-filter__header
    .ppr-notebooks-filter__eyebrow,
    .ppr-notebooks-page .ppr-notebooks-filter__header
    .ppr-notebooks-filter__title {
        display: none;
    }


    .ppr-notebooks-page .ppr-notebooks-filter__mobile-toggle {
        display: flex;
    }


    .ppr-notebooks-page .ppr-notebooks-filter__scroll {
        display: none;

        max-height: 62vh;

        padding: 20px 16px 25px;

        overflow-y: auto;
    }


    .ppr-notebooks-page .ppr-notebooks-filter.is-open
    .ppr-notebooks-filter__scroll {
        display: block;
    }


    /* PRODUCTS */

    .ppr-notebooks-page .ppr-notebooks-products__top {
        display: block;

        margin-bottom: 24px;
        padding-bottom: 17px;
    }


    .ppr-notebooks-page .ppr-notebooks-products__title {
        font-size: 26px;
    }


    .ppr-notebooks-page .ppr-notebooks-products__results {
        display: block;

        margin-top: 8px;

        font-size: 12px;
    }


    .ppr-notebooks-page .ppr-notebooks-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 28px 13px;
    }


    .ppr-notebooks-page .ppr-notebooks-card__image-wrap {
        aspect-ratio: 1 / 1.05;
    }


    .ppr-notebooks-page .ppr-notebooks-card__content {
        padding-top: 13px;
    }


    .ppr-notebooks-page .ppr-notebooks-card__category {
        margin-bottom: 5px;

        font-size: 9px;
    }


    .ppr-notebooks-page .ppr-notebooks-card__name {
        font-size: 15px;
        line-height: 1.35;
    }


    .ppr-notebooks-page .ppr-notebooks-card__description {
        margin-top: 6px;

        font-size: 11px;
        line-height: 1.55;
    }


    .ppr-notebooks-page .ppr-notebooks-card__bottom {
        align-items: flex-start;
        flex-direction: column;

        gap: 5px;

        margin-top: 11px;
    }


    .ppr-notebooks-page .ppr-notebooks-card__price {
        font-size: 14px;
    }


    .ppr-notebooks-page .ppr-notebooks-card__view {
        font-size: 11px;
    }

}


/* =========================================================
   MOBILE-S — 320PX TO 374PX
   ========================================================= */

@media (max-width: 374px) {

    .ppr-notebooks-page .ppr-notebooks-hero {
        height: 70vh;
        min-height: 400px;
    }


    .ppr-notebooks-page .ppr-notebooks-hero__content {
        width: calc(100% - 24px);

        padding:
            25px 10px;
    }


    .ppr-notebooks-page .ppr-notebooks-hero__eyebrow {
        font-size: 9px;

        letter-spacing: 0.12em;
    }


    .ppr-notebooks-page .ppr-notebooks-hero__title {
        font-size: 35px;
    }


    .ppr-notebooks-page .ppr-notebooks-hero__description {
        max-width: 280px;

        margin-top: 14px;

        font-size: 12px;
        line-height: 1.65;
    }


    .ppr-notebooks-page .ppr-notebooks-hero__cta {
        margin-top: 21px;

        min-height: 42px;

        padding:
            0 17px;

        font-size: 12px;
    }


    .ppr-notebooks-page .ppr-notebooks-collection {
        padding:
            48px 12px 60px;
    }


    .ppr-notebooks-page .ppr-notebooks-collection__heading {
        margin-bottom: 27px;
    }


    .ppr-notebooks-page .ppr-notebooks-section__eyebrow {
        font-size: 10px;
    }


    .ppr-notebooks-page .ppr-notebooks-section__title {
        font-size: 25px;
    }


    .ppr-notebooks-page .ppr-notebooks-section__description {
        font-size: 12.5px;
        line-height: 1.65;
    }


    .ppr-notebooks-page .ppr-notebooks-filter {
        margin-bottom: 25px;
    }


    .ppr-notebooks-page .ppr-notebooks-filter__header {
        padding: 14px;
    }


    .ppr-notebooks-page .ppr-notebooks-filter__scroll {
        max-height: 60vh;

        padding:
            18px 14px 22px;
    }


    .ppr-notebooks-page .ppr-notebooks-grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap: 30px;
    }


    .ppr-notebooks-page .ppr-notebooks-card__image-wrap {
        aspect-ratio: 1 / 0.95;
    }


    .ppr-notebooks-page .ppr-notebooks-card__name {
        font-size: 17px;
    }


    .ppr-notebooks-page .ppr-notebooks-card__description {
        font-size: 12px;
    }


    .ppr-notebooks-page .ppr-notebooks-card__bottom {
        flex-direction: row;
        align-items: center;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ppr-notebooks-page *,
    .ppr-notebooks-page *::before,
    .ppr-notebooks-page *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}
/* =========================================================
   CARD PRICE META — RESPONSIVE
   Price (bottom-left) + View Product (bottom-right)
   ========================================================= */

/* MOBILE-S (<=374px) */
@media (max-width: 374px) {

    .ppr-products-page .ppr-products-card__meta,
    .ppr-writing-page .ppr-writing-card__meta,
    .ppr-notebooks-page .ppr-notebooks-card__meta,
    .ppr-filing-page .ppr-filing-card__meta {
        gap: 6px 10px;
        padding-top: 14px;
    }

    .ppr-products-page .ppr-products-card__price,
    .ppr-writing-page .ppr-writing-card__price,
    .ppr-notebooks-page .ppr-notebooks-card__price,
    .ppr-filing-page .ppr-filing-card__price {
        font-size: 16px;
    }

    .ppr-products-page .ppr-products-card__action,
    .ppr-writing-page .ppr-writing-card__action,
    .ppr-notebooks-page .ppr-notebooks-card__action,
    .ppr-filing-page .ppr-filing-card__action {
        font-size: 12px;
    }
}

/* MOBILE-M / MOBILE-L / TABLET (375px - 1023px) */
@media (max-width: 1023px) {

    .ppr-products-page .ppr-products-card__price,
    .ppr-writing-page .ppr-writing-card__price,
    .ppr-notebooks-page .ppr-notebooks-card__price,
    .ppr-filing-page .ppr-filing-card__price {
        font-size: 18px;
    }
}

/* MOBILE-L (>=480px) */
@media (min-width: 480px) {

    .ppr-products-page .ppr-products-card__price,
    .ppr-writing-page .ppr-writing-card__price,
    .ppr-notebooks-page .ppr-notebooks-card__price,
    .ppr-filing-page .ppr-filing-card__price {
        font-size: 19px;
    }
}

/* LAPTOP-L / DESKTOP — generous spacing */
@media (min-width: 1440px) {

    .ppr-products-page .ppr-products-card__meta,
    .ppr-writing-page .ppr-writing-card__meta,
    .ppr-notebooks-page .ppr-notebooks-card__meta,
    .ppr-filing-page .ppr-filing-card__meta {
        gap: 12px 20px;
        padding-top: 18px;
    }
}
/* =========================================================
   PAPERLY — NOTEBOOKS PAGE ONLY
   Exact Writing-page layout
   ========================================================= */

.ppr-notebooks-page {
    --ppr-notebooks-border: rgba(46, 41, 42, 0.14);
    --ppr-notebooks-soft-border: rgba(46, 41, 42, 0.08);
    --ppr-notebooks-card-bg: #EFE5DA;
    --ppr-notebooks-muted: #665C5D;
    --ppr-notebooks-shadow: 0 16px 45px rgba(46, 41, 42, 0.09);
    --ppr-notebooks-radius: 16px;

    width: 100%;
    color: var(--ppr-ink-charcoal);
    background: var(--ppr-warm-porcelain);
}

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

.ppr-notebooks-page img {
    display: block;
    max-width: 100%;
}


/* =========================================================
   HERO
   ========================================================= */

.ppr-notebooks-page .ppr-notebooks-hero {
    position: relative;
    min-height: 70vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--ppr-autumn-ivory);
}

.ppr-notebooks-page .ppr-notebooks-hero__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ppr-notebooks-page .ppr-notebooks-hero__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            90deg,
            rgba(239, 229, 218, 0.94) 0%,
            rgba(239, 229, 218, 0.78) 46%,
            rgba(239, 229, 218, 0.54) 100%
        );
}

.ppr-notebooks-page .ppr-notebooks-hero__content {
    width: min(820px, calc(100% - 48px));
    padding: 70px 24px;
    text-align: center;
}

.ppr-notebooks-page .ppr-notebooks-hero__eyebrow,
.ppr-notebooks-page .ppr-notebooks-filter__eyebrow,
.ppr-notebooks-page .ppr-notebooks-content__eyebrow,
.ppr-notebooks-page .ppr-notebooks-card__category {
    display: block;
    color: var(--ppr-dusty-rose);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ppr-notebooks-page .ppr-notebooks-hero__title {
    max-width: 780px;
    margin: 14px auto 18px;
    color: var(--ppr-ink-charcoal);
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.ppr-notebooks-page .ppr-notebooks-hero__description {
    max-width: 650px;
    margin: 0 auto 28px;
    color: var(--ppr-ink-charcoal);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
}

.ppr-notebooks-page .ppr-notebooks-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid var(--ppr-dusty-rose);
    border-radius: var(--ppr-radius-medium);
    background: var(--ppr-dusty-rose);
    color: #fff8f5;
    font-size: 14px;
    font-weight: 700;
    transition:
        background-color var(--ppr-transition-fast),
        border-color var(--ppr-transition-fast),
        transform var(--ppr-transition-fast);
}

.ppr-notebooks-page .ppr-notebooks-hero__cta:hover {
    background: var(--ppr-dusty-rose-dark);
    border-color: var(--ppr-dusty-rose-dark);
    transform: translateY(-2px);
}


/* =========================================================
   COLLECTION + STICKY FILTER
   ========================================================= */

.ppr-notebooks-page .ppr-notebooks-collection {
    width: min(var(--ppr-content-width), calc(100% - 48px));
    margin: 0 auto;
    padding: 88px 0 100px;
    background: transparent;
}

.ppr-notebooks-page .ppr-notebooks-collection__layout {
    display: grid;
    grid-template-columns: minmax(230px, 250px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(34px, 5vw, 78px);
}

.ppr-notebooks-page .ppr-notebooks-filter {
    position: sticky;
    top: var(--ppr-navbar-height);
    height: calc(100vh - var(--ppr-navbar-height));
    max-height: none;
    min-height: 480px;
    align-self: start;
    background: transparent;
    border: 0;
}

.ppr-notebooks-page .ppr-notebooks-filter__top {
    padding: 4px 0 18px;
}

.ppr-notebooks-page .ppr-notebooks-filter__title {
    margin-top: 7px;
    color: var(--ppr-ink-charcoal);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.ppr-notebooks-page .ppr-notebooks-filter__scroll {
    height: calc(100% - 82px);
    padding-left: 0;
    padding-right: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ppr-warm-taupe) transparent;
}

.ppr-notebooks-page .ppr-notebooks-filter__scroll::-webkit-scrollbar {
    width: 5px;
}

.ppr-notebooks-page .ppr-notebooks-filter__scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--ppr-warm-taupe);
}

.ppr-notebooks-page .ppr-notebooks-filter__panel {
    padding: 0 0 22px;
    border-top: 1px solid var(--ppr-notebooks-border);
}

.ppr-notebooks-page .ppr-notebooks-filter__group {
    min-width: 0;
    padding: 18px 0;
    border: 0;
    border-bottom: 1px solid var(--ppr-notebooks-soft-border);
}

.ppr-notebooks-page .ppr-notebooks-filter__label {
    display: block;
    margin-bottom: 10px;
    padding: 0;
    color: var(--ppr-ink-charcoal);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.ppr-notebooks-page .ppr-notebooks-filter__input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--ppr-notebooks-border);
    border-radius: var(--ppr-radius-small);
    outline: 0;
    background: transparent;
    color: var(--ppr-ink-charcoal);
    font-size: 13px;
    transition:
        border-color var(--ppr-transition-fast),
        box-shadow var(--ppr-transition-fast);
}

.ppr-notebooks-page .ppr-notebooks-filter__input::placeholder {
    color: var(--ppr-notebooks-muted);
    opacity: 0.82;
}

.ppr-notebooks-page .ppr-notebooks-filter__input:focus {
    border-color: var(--ppr-dusty-rose);
    box-shadow: 0 0 0 3px rgba(169, 103, 104, 0.13);
}

.ppr-notebooks-page .ppr-notebooks-filter__option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 31px;
    color: var(--ppr-notebooks-muted);
    font-size: 13px;
    line-height: 1.45;
    cursor: pointer;
}

.ppr-notebooks-page
.ppr-notebooks-filter__option
+ .ppr-notebooks-filter__option {
    margin-top: 4px;
}

.ppr-notebooks-page .ppr-notebooks-filter__option input {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    accent-color: var(--ppr-dusty-rose);
}

.ppr-notebooks-page .ppr-notebooks-filter__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--ppr-notebooks-muted);
    font-size: 12px;
}

.ppr-notebooks-page .ppr-notebooks-filter__price-row output {
    color: var(--ppr-ink-charcoal);
    font-weight: 700;
}

.ppr-notebooks-page .ppr-notebooks-filter__range {
    width: 100%;
    margin: 0;
    accent-color: var(--ppr-dusty-rose);
    cursor: pointer;
}

.ppr-notebooks-page .ppr-notebooks-filter__clear {
    width: 100%;
    min-height: 42px;
    margin-top: 18px;
    border: 1px solid var(--ppr-dusty-rose);
    border-radius: var(--ppr-radius-small);
    color: var(--ppr-dusty-rose-dark);
    font-size: 13px;
    font-weight: 700;
    transition:
        background-color var(--ppr-transition-fast),
        color var(--ppr-transition-fast);
}

.ppr-notebooks-page .ppr-notebooks-filter__clear:hover {
    background: var(--ppr-dusty-rose);
    color: #fff8f5;
}

.ppr-notebooks-page .ppr-notebooks-filter__mobile-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
    padding: 0 14px;
    border: 1px solid var(--ppr-notebooks-border);
    border-radius: var(--ppr-radius-small);
    color: var(--ppr-ink-charcoal);
    font-size: 14px;
    font-weight: 700;
    position: relative;
    z-index: 5;
    cursor: pointer;
    pointer-events: auto;
}

.ppr-notebooks-page .ppr-notebooks-filter__mobile-icon {
    font-size: 17px;
    line-height: 1;
}


/* =========================================================
   PRODUCT CONTENT + 9 CARDS
   ========================================================= */

.ppr-notebooks-page .ppr-notebooks-content {
    min-width: 0;
}

.ppr-notebooks-page .ppr-notebooks-content__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
}

.ppr-notebooks-page .ppr-notebooks-content__title {
    margin-top: 7px;
    color: var(--ppr-ink-charcoal);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.ppr-notebooks-page .ppr-notebooks-content__description {
    max-width: 600px;
    margin-top: 8px;
    color: var(--ppr-notebooks-muted);
    font-size: 14px;
    line-height: 1.65;
}

.ppr-notebooks-page .ppr-notebooks-results {
    flex: 0 0 auto;
    color: var(--ppr-notebooks-muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.ppr-notebooks-page .ppr-notebooks-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.ppr-notebooks-page .ppr-notebooks-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ppr-notebooks-soft-border);
    border-radius: var(--ppr-notebooks-radius);
    background: var(--ppr-notebooks-card-bg);
    box-shadow: 0 8px 24px rgba(46, 41, 42, 0.045);
    transition:
        transform var(--ppr-transition-normal),
        box-shadow var(--ppr-transition-normal),
        border-color var(--ppr-transition-normal);
}

.ppr-notebooks-page .ppr-notebooks-card:hover {
    transform: translateY(-5px);
    border-color: rgba(169, 103, 104, 0.32);
    box-shadow: var(--ppr-notebooks-shadow);
}

.ppr-notebooks-page .ppr-notebooks-card__link {
    display: flex;
    height: 100%;
    flex-direction: column;
}

.ppr-notebooks-page .ppr-notebooks-card__image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.82;
    overflow: hidden;
    background: var(--ppr-warm-porcelain);
}

.ppr-notebooks-page .ppr-notebooks-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 500ms cubic-bezier(.2,.7,.2,1);
}

.ppr-notebooks-page
.ppr-notebooks-card:hover
.ppr-notebooks-card__image {
    transform: scale(1.035);
}

.ppr-notebooks-page .ppr-notebooks-card__content {
    display: flex;
    min-height: 190px;
    flex: 1;
    flex-direction: column;
    padding: 20px;
}

.ppr-notebooks-page .ppr-notebooks-card__name {
    margin-top: 7px;
    color: var(--ppr-ink-charcoal);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}

.ppr-notebooks-page .ppr-notebooks-card__description {
    margin-top: 8px;
    color: var(--ppr-notebooks-muted);
    font-size: 14px;
    line-height: 1.65;
}

.ppr-notebooks-page .ppr-notebooks-card__action {
    margin-top: 0;
    padding-top: 0;
    color: var(--ppr-dusty-rose-dark);
    font-size: 13px;
    font-weight: 700;
}

/* ---- CARD META ROW — PRICE (LEFT) + VIEW PRODUCT (RIGHT) ---- */

.ppr-notebooks-page .ppr-notebooks-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 14px;
    width: 100%;
    margin-top: auto;
    padding-top: 16px;
}

.ppr-notebooks-page .ppr-notebooks-card__price {
    color: var(--ppr-ink-charcoal);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.ppr-notebooks-page .ppr-notebooks-card[hidden] {
    display: none !important;
}

.ppr-notebooks-page .ppr-notebooks-empty {
    display: none;
    margin-top: 20px;
    padding: 36px 18px;
    border: 1px dashed var(--ppr-notebooks-border);
    border-radius: var(--ppr-notebooks-radius);
    color: var(--ppr-notebooks-muted);
    text-align: center;
    font-size: 14px;
}

.ppr-notebooks-page .ppr-notebooks-empty.is-visible {
    display: block;
}


/* =========================================================
   RESPONSIVE — LAPTOP
   ========================================================= */

@media (max-width: 1439px) {

    .ppr-notebooks-page .ppr-notebooks-collection__layout {
        gap: 42px;
    }

}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1023px) {

    .ppr-notebooks-page .ppr-notebooks-collection__layout {
        display: block;
    }

    .ppr-notebooks-page .ppr-notebooks-filter {
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
        margin-bottom: 40px;
    }

    .ppr-notebooks-page .ppr-notebooks-filter__mobile-toggle {
        display: flex;
    }

    .ppr-notebooks-page .ppr-notebooks-filter__scroll {
        display: none;
        height: auto;
        max-height: 62vh;
        margin-top: 12px;
        padding-right: 12px;
        border-top: 1px solid var(--ppr-notebooks-border);
    }

    .ppr-notebooks-page
    .ppr-notebooks-filter.is-open
    .ppr-notebooks-filter__scroll {
        display: block;
    }

    .ppr-notebooks-page .ppr-notebooks-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   RESPONSIVE — MOBILE-L / M
   ========================================================= */

@media (max-width: 767px) {

    .ppr-notebooks-page .ppr-notebooks-hero__content {
        width: calc(100% - 32px);
        padding: 48px 10px;
    }

    .ppr-notebooks-page .ppr-notebooks-hero__title {
        font-size: clamp(34px, 9vw, 46px);
    }

    .ppr-notebooks-page .ppr-notebooks-hero__description {
        font-size: 14px;
    }

    .ppr-notebooks-page .ppr-notebooks-collection {
        width: calc(100% - 28px);
        padding: 72px 0 80px;
    }

    .ppr-notebooks-page .ppr-notebooks-content__heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .ppr-notebooks-page .ppr-notebooks-content__title {
        font-size: 28px;
    }

    .ppr-notebooks-page .ppr-notebooks-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ppr-notebooks-page .ppr-notebooks-card__content {
        min-height: 178px;
        padding: 16px;
    }

    .ppr-notebooks-page .ppr-notebooks-card__name {
        font-size: 17px;
    }

    .ppr-notebooks-page .ppr-notebooks-card__description {
        font-size: 13px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE-S
   ========================================================= */

@media (max-width: 374px) {

    .ppr-notebooks-page .ppr-notebooks-hero__title {
        font-size: 32px;
    }

    .ppr-notebooks-page .ppr-notebooks-hero__description {
        font-size: 13px;
    }

    .ppr-notebooks-page .ppr-notebooks-collection {
        width: calc(100% - 24px);
    }

    .ppr-notebooks-page .ppr-notebooks-card__image-wrap {
        aspect-ratio: 1 / 0.72;
    }

    .ppr-notebooks-page .ppr-notebooks-card__content {
        min-height: 165px;
    }

}

/* =========================================================
   PAPERLY — FILING PAGE ONLY
   Append this block to assets/css/styles.css.
   Every selector is scoped to .ppr-filing-page.
   ========================================================= */

.ppr-filing-page {
    --ppr-filing-border: rgba(46, 41, 42, 0.14);
    --ppr-filing-soft-border: rgba(46, 41, 42, 0.08);
    --ppr-filing-card-bg: #EFE5DA;
    --ppr-filing-muted: #665C5D;
    --ppr-filing-shadow: 0 16px 45px rgba(46, 41, 42, 0.09);
    --ppr-filing-radius: 16px;

    width: 100%;
    color: var(--ppr-ink-charcoal);
    background: var(--ppr-warm-porcelain);
}

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

.ppr-filing-page img {
    display: block;
    max-width: 100%;
}

/* =========================================================
   HERO — EXACTLY 70VH
   ========================================================= */

.ppr-filing-page .ppr-filing-hero {
    position: relative;
    min-height: 70vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--ppr-autumn-ivory);
}

.ppr-filing-page .ppr-filing-hero__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ppr-filing-page .ppr-filing-hero__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            90deg,
            rgba(239, 229, 218, 0.94) 0%,
            rgba(239, 229, 218, 0.78) 46%,
            rgba(239, 229, 218, 0.54) 100%
        );
}

.ppr-filing-page .ppr-filing-hero__content {
    width: min(820px, calc(100% - 48px));
    padding: 70px 24px;
    text-align: center;
}

.ppr-filing-page .ppr-filing-hero__eyebrow,
.ppr-filing-page .ppr-filing-filter__eyebrow,
.ppr-filing-page .ppr-filing-content__eyebrow,
.ppr-filing-page .ppr-filing-card__category {
    display: block;
    color: var(--ppr-dusty-rose);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ppr-filing-page .ppr-filing-hero__title {
    max-width: 780px;
    margin: 14px auto 18px;
    color: var(--ppr-ink-charcoal);
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.ppr-filing-page .ppr-filing-hero__description {
    max-width: 650px;
    margin: 0 auto 28px;
    color: var(--ppr-ink-charcoal);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
}

.ppr-filing-page .ppr-filing-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid var(--ppr-dusty-rose);
    border-radius: var(--ppr-radius-medium);
    background: var(--ppr-dusty-rose);
    color: #fff8f5;
    font-size: 14px;
    font-weight: 700;
    transition:
        background-color var(--ppr-transition-fast),
        border-color var(--ppr-transition-fast),
        transform var(--ppr-transition-fast);
}

.ppr-filing-page .ppr-filing-hero__cta:hover {
    background: var(--ppr-dusty-rose-dark);
    border-color: var(--ppr-dusty-rose-dark);
    transform: translateY(-2px);
}

/* =========================================================
   COLLECTION + STICKY FILTER
   ========================================================= */

.ppr-filing-page .ppr-filing-collection {
    width: min(1380px, calc(100% - 48px));
    margin: 0 auto;
    padding: 88px 0 100px;
}

.ppr-filing-page .ppr-filing-collection__layout {
    display: grid;
    grid-template-columns: minmax(230px, 250px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(34px, 5vw, 78px);
}

.ppr-filing-page .ppr-filing-filter {
    position: sticky;
    top: var(--ppr-navbar-height);
    height: calc(100vh - var(--ppr-navbar-height));
    min-height: 480px;
    align-self: start;
}

.ppr-filing-page .ppr-filing-filter__top {
    padding: 4px 0 18px;
}

.ppr-filing-page .ppr-filing-filter__title {
    margin-top: 7px;
    color: var(--ppr-ink-charcoal);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.ppr-filing-page .ppr-filing-filter__scroll {
    height: calc(100% - 82px);
    padding-right: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ppr-warm-taupe) transparent;
}

.ppr-filing-page .ppr-filing-filter__scroll::-webkit-scrollbar {
    width: 5px;
}

.ppr-filing-page .ppr-filing-filter__scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--ppr-warm-taupe);
}

.ppr-filing-page .ppr-filing-filter__panel {
    padding: 0 0 22px;
    border-top: 1px solid var(--ppr-filing-border);
}

.ppr-filing-page .ppr-filing-filter__group {
    min-width: 0;
    padding: 18px 0;
    border: 0;
    border-bottom: 1px solid var(--ppr-filing-soft-border);
}

.ppr-filing-page .ppr-filing-filter__label {
    display: block;
    margin-bottom: 10px;
    padding: 0;
    color: var(--ppr-ink-charcoal);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.ppr-filing-page .ppr-filing-filter__input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--ppr-filing-border);
    border-radius: var(--ppr-radius-small);
    outline: 0;
    background: transparent;
    color: var(--ppr-ink-charcoal);
    font-size: 13px;
    transition: border-color var(--ppr-transition-fast), box-shadow var(--ppr-transition-fast);
}

.ppr-filing-page .ppr-filing-filter__input::placeholder {
    color: var(--ppr-filing-muted);
    opacity: 0.82;
}

.ppr-filing-page .ppr-filing-filter__input:focus {
    border-color: var(--ppr-dusty-rose);
    box-shadow: 0 0 0 3px rgba(169, 103, 104, 0.13);
}

.ppr-filing-page .ppr-filing-filter__option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 31px;
    color: var(--ppr-filing-muted);
    font-size: 13px;
    line-height: 1.45;
    cursor: pointer;
}

.ppr-filing-page .ppr-filing-filter__option + .ppr-filing-filter__option {
    margin-top: 4px;
}

.ppr-filing-page .ppr-filing-filter__option input {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    accent-color: var(--ppr-dusty-rose);
}

.ppr-filing-page .ppr-filing-filter__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--ppr-filing-muted);
    font-size: 12px;
}

.ppr-filing-page .ppr-filing-filter__price-row output {
    color: var(--ppr-ink-charcoal);
    font-weight: 700;
}

.ppr-filing-page .ppr-filing-filter__range {
    width: 100%;
    margin: 0;
    accent-color: var(--ppr-dusty-rose);
    cursor: pointer;
}

.ppr-filing-page .ppr-filing-filter__clear {
    width: 100%;
    min-height: 42px;
    margin-top: 18px;
    border: 1px solid var(--ppr-dusty-rose);
    border-radius: var(--ppr-radius-small);
    color: var(--ppr-dusty-rose-dark);
    font-size: 13px;
    font-weight: 700;
    transition:
        background-color var(--ppr-transition-fast),
        color var(--ppr-transition-fast);
}

.ppr-filing-page .ppr-filing-filter__clear:hover {
    background: var(--ppr-dusty-rose);
    color: #fff8f5;
}

.ppr-filing-page .ppr-filing-filter__mobile-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
    padding: 0 14px;
    border: 1px solid var(--ppr-filing-border);
    border-radius: var(--ppr-radius-small);
    color: var(--ppr-ink-charcoal);
    font-size: 14px;
    font-weight: 700;
    position: relative;
    z-index: 5;
    cursor: pointer;
    pointer-events: auto;
}

.ppr-filing-page .ppr-filing-filter__mobile-icon {
    font-size: 17px;
    line-height: 1;
}

/* =========================================================
   PRODUCT CONTENT + 9 CARDS
   ========================================================= */

.ppr-filing-page .ppr-filing-content {
    min-width: 0;
}

.ppr-filing-page .ppr-filing-content__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
}

.ppr-filing-page .ppr-filing-content__title {
    margin-top: 7px;
    color: var(--ppr-ink-charcoal);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.ppr-filing-page .ppr-filing-content__description {
    max-width: 600px;
    margin-top: 8px;
    color: var(--ppr-filing-muted);
    font-size: 14px;
    line-height: 1.65;
}

.ppr-filing-page .ppr-filing-results {
    flex: 0 0 auto;
    color: var(--ppr-filing-muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.ppr-filing-page .ppr-filing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.ppr-filing-page .ppr-filing-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ppr-filing-soft-border);
    border-radius: var(--ppr-filing-radius);
    background: var(--ppr-filing-card-bg);
    box-shadow: 0 8px 24px rgba(46, 41, 42, 0.045);
    transition:
        transform var(--ppr-transition-normal),
        box-shadow var(--ppr-transition-normal),
        border-color var(--ppr-transition-normal);
}

.ppr-filing-page .ppr-filing-card:hover {
    transform: translateY(-5px);
    border-color: rgba(169, 103, 104, 0.32);
    box-shadow: var(--ppr-filing-shadow);
}

.ppr-filing-page .ppr-filing-card__link {
    display: flex;
    height: 100%;
    flex-direction: column;
}

.ppr-filing-page .ppr-filing-card__image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.82;
    overflow: hidden;
    background: var(--ppr-warm-porcelain);
}

.ppr-filing-page .ppr-filing-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 500ms cubic-bezier(.2,.7,.2,1);
}

.ppr-filing-page .ppr-filing-card:hover .ppr-filing-card__image {
    transform: scale(1.035);
}

.ppr-filing-page .ppr-filing-card__content {
    display: flex;
    min-height: 190px;
    flex: 1;
    flex-direction: column;
    padding: 20px;
}

.ppr-filing-page .ppr-filing-card__name {
    margin-top: 7px;
    color: var(--ppr-ink-charcoal);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}

.ppr-filing-page .ppr-filing-card__description {
    margin-top: 8px;
    color: var(--ppr-filing-muted);
    font-size: 14px;
    line-height: 1.65;
}

.ppr-filing-page .ppr-filing-card__action {
    margin-top: 0;
    padding-top: 0;
    color: var(--ppr-dusty-rose-dark);
    font-size: 13px;
    font-weight: 700;
}

/* ---- CARD META ROW — PRICE (LEFT) + VIEW PRODUCT (RIGHT) ---- */

.ppr-filing-page .ppr-filing-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 14px;
    width: 100%;
    margin-top: auto;
    padding-top: 16px;
}

.ppr-filing-page .ppr-filing-card__price {
    color: var(--ppr-ink-charcoal);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.ppr-filing-page .ppr-filing-card[hidden] {
    display: none !important;
}

.ppr-filing-page .ppr-filing-empty {
    display: none;
    margin-top: 20px;
    padding: 36px 18px;
    border: 1px dashed var(--ppr-filing-border);
    border-radius: var(--ppr-filing-radius);
    color: var(--ppr-filing-muted);
    text-align: center;
    font-size: 14px;
}

.ppr-filing-page .ppr-filing-empty.is-visible {
    display: block;
}

/* =========================================================
   RESPONSIVE — LAPTOP
   ========================================================= */

@media (max-width: 1439px) {
    .ppr-filing-page .ppr-filing-collection {
        width: min(1240px, calc(100% - 40px));
    }

    .ppr-filing-page .ppr-filing-collection__layout {
        gap: 42px;
    }
}

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1023px) {
    .ppr-filing-page .ppr-filing-collection__layout {
        display: block;
    }

    .ppr-filing-page .ppr-filing-filter {
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
        margin-bottom: 40px;
    }

    .ppr-filing-page .ppr-filing-filter__mobile-toggle {
        display: flex;
    }

    .ppr-filing-page .ppr-filing-filter__scroll {
        display: none;
        height: auto;
        max-height: 62vh;
        margin-top: 12px;
        padding-right: 12px;
        border-top: 1px solid var(--ppr-filing-border);
    }

    .ppr-filing-page .ppr-filing-filter.is-open .ppr-filing-filter__scroll {
        display: block;
    }

    .ppr-filing-page .ppr-filing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   RESPONSIVE — MOBILE-L / M
   ========================================================= */

@media (max-width: 767px) {
    .ppr-filing-page .ppr-filing-hero__content {
        width: calc(100% - 32px);
        padding: 48px 10px;
    }

    .ppr-filing-page .ppr-filing-hero__title {
        font-size: clamp(34px, 9vw, 46px);
    }

    .ppr-filing-page .ppr-filing-hero__description {
        font-size: 14px;
    }

    .ppr-filing-page .ppr-filing-collection {
        width: calc(100% - 28px);
        padding: 72px 0 80px;
    }

    .ppr-filing-page .ppr-filing-content__heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .ppr-filing-page .ppr-filing-content__title {
        font-size: 28px;
    }

    .ppr-filing-page .ppr-filing-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ppr-filing-page .ppr-filing-card__content {
        min-height: 178px;
        padding: 16px;
    }

    .ppr-filing-page .ppr-filing-card__name {
        font-size: 17px;
    }

    .ppr-filing-page .ppr-filing-card__description {
        font-size: 13px;
    }
}

/* =========================================================
   RESPONSIVE — MOBILE-S
   ========================================================= */

@media (max-width: 374px) {
    .ppr-filing-page .ppr-filing-hero__title {
        font-size: 32px;
    }

    .ppr-filing-page .ppr-filing-hero__description {
        font-size: 13px;
    }

    .ppr-filing-page .ppr-filing-collection {
        width: calc(100% - 24px);
    }

    .ppr-filing-page .ppr-filing-card__image-wrap {
        aspect-ratio: 1 / 0.72;
    }

    .ppr-filing-page .ppr-filing-card__content {
        min-height: 165px;
    }
}

/* =========================================================
   PAPERLY — PRODUCT DETAILS PAGE ONLY
   Load AFTER the existing global styles.css.
   All selectors are scoped to .ppr-product-details-page.
   ========================================================= */

.ppr-product-details-page,
.ppr-product-details-page * ,
.ppr-product-details-page *::before,
.ppr-product-details-page *::after{box-sizing:border-box}

.ppr-product-details-page{width:100%;background:var(--ppr-warm-porcelain);color:var(--ppr-ink-charcoal);overflow:hidden}
.ppr-product-details-page img{display:block;max-width:100%}
.ppr-product-details-page a{text-decoration:none}
.ppr-product-details-page .ppr-product-details{width:100%;padding:18px 0 0}
.ppr-product-details-page .ppr-product-details__shell{width:min(1280px,calc(100% - 48px));margin:0 auto}
.ppr-product-details-page .ppr-product-details__breadcrumbs{display:flex;align-items:center;gap:10px;min-height:36px;margin-bottom:18px;color:var(--ppr-warm-taupe);font:500 13px/1.4 Manrope,sans-serif;white-space:nowrap;overflow:auto}
.ppr-product-details-page .ppr-product-details__breadcrumbs a{color:var(--ppr-ink-charcoal);transition:color .25s ease}
.ppr-product-details-page .ppr-product-details__breadcrumbs a:hover{color:var(--ppr-dusty-rose)}
.ppr-product-details-page .ppr-product-details__main{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:42px;align-items:start}
.ppr-product-details-page .ppr-product-details__visual{min-width:0}
.ppr-product-details-page .ppr-product-details__image-frame{position:relative;min-height:590px;display:grid;place-items:center;overflow:hidden;background:var(--ppr-autumn-ivory);border:1px solid var(--ppr-warm-taupe);border-radius:12px}
.ppr-product-details-page .ppr-product-details__image-frame::after{content:"";position:absolute;inset:auto 8% 6%;height:18%;background:radial-gradient(ellipse,rgba(46,41,42,.13),transparent 68%);filter:blur(14px);pointer-events:none}
.ppr-product-details-page .ppr-product-details__image-frame img{position:relative;z-index:1;width:100%;height:590px;object-fit:cover;transition:transform .6s ease,opacity .35s ease}
.ppr-product-details-page .ppr-product-details__image-frame:hover img{transform:scale(1.025)}
.ppr-product-details-page .ppr-product-details__image-label{position:absolute;z-index:2;top:18px;left:18px;padding:6px 10px;border-left:2px solid var(--ppr-dusty-rose);color:var(--ppr-dusty-rose);font:700 11px/1 Manrope,sans-serif;letter-spacing:1.5px}
.ppr-product-details-page .ppr-product-details__visual-meta{display:flex;justify-content:space-between;gap:16px;padding:12px 2px 0;color:var(--ppr-warm-taupe);font:500 13px/1.5 Manrope,sans-serif}
.ppr-product-details-page .ppr-product-details__stock{color:var(--ppr-sage-leaf);font-weight:700}
.ppr-product-details-page .ppr-product-details__info{min-width:0;padding:8px 0 0}
.ppr-product-details-page .ppr-product-details__eyebrow{display:block;margin-bottom:10px;color:var(--ppr-dusty-rose);font:700 12px/1.3 Manrope,sans-serif;letter-spacing:1.5px;text-transform:uppercase}
.ppr-product-details-page h1{margin:0;color:var(--ppr-ink-charcoal);font:700 56px/1.1 Manrope,sans-serif;letter-spacing:-1.4px}
.ppr-product-details-page .ppr-product-details__lead{max-width:650px;margin:18px 0 20px;color:var(--ppr-warm-taupe);font:400 16px/1.65 Manrope,sans-serif}
.ppr-product-details-page .ppr-product-details__rating-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:14px 0;border-top:1px solid var(--ppr-warm-taupe);border-bottom:1px solid var(--ppr-warm-taupe);color:var(--ppr-warm-taupe);font:500 13px/1.4 Manrope,sans-serif}
.ppr-product-details-page .ppr-product-details__stars{color:var(--ppr-dusty-rose);letter-spacing:2px}
.ppr-product-details-page .ppr-product-details__sku{margin-left:auto;color:var(--ppr-ink-charcoal);font-weight:600}
.ppr-product-details-page .ppr-product-details__price-block{margin-top:18px;border-top:1px solid var(--ppr-warm-taupe);border-bottom:1px solid var(--ppr-warm-taupe)}
.ppr-product-details-page .ppr-product-details__price-line{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0;color:var(--ppr-ink-charcoal);font:500 15px/1.4 Manrope,sans-serif}
.ppr-product-details-page .ppr-product-details__price-line strong{font:700 20px/1.2 Manrope,sans-serif}
.ppr-product-details-page .ppr-product-details__price-line--muted{color:var(--ppr-warm-taupe)}
.ppr-product-details-page .ppr-product-details__price-note{padding:12px 0 14px;color:var(--ppr-warm-taupe);font:400 13px/1.55 Manrope,sans-serif}
.ppr-product-details-page .ppr-product-details__quantity{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;color:var(--ppr-ink-charcoal);font:600 14px/1.4 Manrope,sans-serif}
.ppr-product-details-page .ppr-product-details__quantity-control{display:flex;align-items:center;border:1px solid var(--ppr-warm-taupe);border-radius:8px;overflow:hidden;background:var(--ppr-autumn-ivory)}
.ppr-product-details-page .ppr-product-details__quantity-control button,.ppr-product-details-page .ppr-product-details__quantity-control output{width:46px;height:42px;display:grid;place-items:center;border:0;background:transparent;color:var(--ppr-ink-charcoal);font:600 15px/1 Manrope,sans-serif}
.ppr-product-details-page .ppr-product-details__quantity-control button{cursor:pointer;transition:background .25s ease,color .25s ease}
.ppr-product-details-page .ppr-product-details__quantity-control button:hover{background:var(--ppr-dusty-rose);color:var(--ppr-warm-ivory)}
.ppr-product-details-page .ppr-product-details__primary-button{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:54px;padding:0 20px;background:var(--ppr-dusty-rose);color:var(--ppr-warm-ivory);border:1px solid var(--ppr-dusty-rose);border-radius:8px;font:600 14px/1 Manrope,sans-serif;transition:transform .25s ease,background .25s ease,box-shadow .25s ease}
.ppr-product-details-page .ppr-product-details__primary-button:hover{background:var(--ppr-dusty-rose-dark);transform:translateY(-2px);box-shadow:0 10px 26px rgba(196,129,130,.22)}
.ppr-product-details-page .ppr-product-details__assurance{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.ppr-product-details-page .ppr-product-details__assurance span{display:flex;align-items:flex-start;gap:7px;color:var(--ppr-warm-taupe);font:500 12px/1.5 Manrope,sans-serif}
.ppr-product-details-page .ppr-product-details__assurance i{color:var(--ppr-sage-leaf);margin-top:2px}
.ppr-product-details-page .ppr-product-details__overview,.ppr-product-details-page .ppr-product-details__specs,.ppr-product-details-page .ppr-product-details__buying,.ppr-product-details-page .ppr-product-details__suggested{margin-top:64px}
.ppr-product-details-page .ppr-product-details__section-heading{max-width:760px}
.ppr-product-details-page .ppr-product-details__section-heading h2,.ppr-product-details-page .ppr-product-details__suggested h2,.ppr-product-details-page .ppr-product-details__buying h2{margin:0;color:var(--ppr-ink-charcoal);font:700 40px/1.15 Manrope,sans-serif;letter-spacing:-.8px}
.ppr-product-details-page .ppr-product-details__section-heading p{margin:14px 0 0;color:var(--ppr-warm-taupe);font:400 16px/1.65 Manrope,sans-serif}
.ppr-product-details-page .ppr-product-details__overview{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:48px;padding-top:42px;border-top:1px solid var(--ppr-warm-taupe)}
.ppr-product-details-page .ppr-product-details__overview-points{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ppr-warm-taupe)}
.ppr-product-details-page .ppr-product-details__overview-points>div{padding:18px 20px 20px 0;border-bottom:1px solid var(--ppr-warm-taupe)}
.ppr-product-details-page .ppr-product-details__overview-points span{display:block;margin-bottom:12px;color:var(--ppr-dusty-rose);font:700 12px/1 Manrope,sans-serif;letter-spacing:1px}
.ppr-product-details-page .ppr-product-details__overview-points strong{display:block;color:var(--ppr-ink-charcoal);font:600 18px/1.3 Manrope,sans-serif}
.ppr-product-details-page .ppr-product-details__overview-points p{margin:8px 0 0;color:var(--ppr-warm-taupe);font:400 14px/1.55 Manrope,sans-serif}
.ppr-product-details-page .ppr-product-details__spec-table{display:grid;grid-template-columns:repeat(2,1fr);margin-top:28px;border-top:1px solid var(--ppr-warm-taupe);border-left:1px solid var(--ppr-warm-taupe)}
.ppr-product-details-page .ppr-product-details__spec-table>div{display:flex;justify-content:space-between;gap:24px;padding:17px 18px;border-right:1px solid var(--ppr-warm-taupe);border-bottom:1px solid var(--ppr-warm-taupe);color:var(--ppr-warm-taupe);font:400 14px/1.4 Manrope,sans-serif}
.ppr-product-details-page .ppr-product-details__spec-table strong{color:var(--ppr-ink-charcoal);font-weight:600;text-align:right}
.ppr-product-details-page .ppr-product-details__buying{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:34px 0;border-top:1px solid var(--ppr-warm-taupe);border-bottom:1px solid var(--ppr-warm-taupe)}
.ppr-product-details-page .ppr-product-details__buying p{max-width:720px;margin:12px 0 0;color:var(--ppr-warm-taupe);font:400 15px/1.65 Manrope,sans-serif}
.ppr-product-details-page .ppr-product-details__secondary-button{flex:0 0 auto;display:inline-flex;align-items:center;gap:18px;padding:14px 18px;border:1px solid var(--ppr-ink-charcoal);border-radius:8px;color:var(--ppr-ink-charcoal);font:600 14px/1.2 Manrope,sans-serif;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
.ppr-product-details-page .ppr-product-details__secondary-button:hover{background:var(--ppr-dusty-rose);border-color:var(--ppr-dusty-rose);color:var(--ppr-warm-ivory);transform:translateY(-2px)}
.ppr-product-details-page .ppr-product-details__suggested-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:24px}
.ppr-product-details-page .ppr-product-details__text-link{color:var(--ppr-dusty-rose);font:600 14px/1.3 Manrope,sans-serif;white-space:nowrap}
.ppr-product-details-page .ppr-product-details__suggested-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.ppr-product-details-page .ppr-suggested-card{display:block;min-width:0;color:inherit;border-top:1px solid var(--ppr-warm-taupe);padding-top:12px;transition:transform .3s ease}
.ppr-product-details-page .ppr-suggested-card:hover{transform:translateY(-4px)}
.ppr-product-details-page .ppr-suggested-card__image{width:100%;height:230px;object-fit:cover;background:var(--ppr-autumn-ivory);border-radius:8px;transition:transform .4s ease}
.ppr-product-details-page .ppr-suggested-card:hover .ppr-suggested-card__image{transform:scale(1.018)}
.ppr-product-details-page .ppr-suggested-card__category{display:block;margin-top:14px;color:var(--ppr-dusty-rose);font:700 11px/1.3 Manrope,sans-serif;letter-spacing:1.4px}
.ppr-product-details-page .ppr-suggested-card__name{margin:6px 0 5px;color:var(--ppr-ink-charcoal);font:600 18px/1.3 Manrope,sans-serif}
.ppr-product-details-page .ppr-suggested-card__bottom{display:flex;justify-content:space-between;gap:10px;color:var(--ppr-warm-taupe);font:500 13px/1.4 Manrope,sans-serif}
.ppr-product-details-page .ppr-suggested-card__price{color:var(--ppr-ink-charcoal);font-weight:700}
.ppr-product-details-page .ppr-product-details__bottom-nav{display:flex;justify-content:space-between;gap:20px;margin:54px 0 64px;padding-top:18px;border-top:1px solid var(--ppr-warm-taupe)}
.ppr-product-details-page .ppr-product-details__bottom-nav a{color:var(--ppr-ink-charcoal);font:600 14px/1.3 Manrope,sans-serif;transition:color .25s ease}
.ppr-product-details-page .ppr-product-details__bottom-nav a:hover{color:var(--ppr-dusty-rose)}
.ppr-product-details-page [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
.ppr-product-details-page [data-reveal].is-visible{opacity:1;transform:none}

.ppr-product-details-page .ppr-product-details__lead,
.ppr-product-details-page .ppr-product-details__section-heading p,
.ppr-product-details-page .ppr-product-details__overview-points p,
.ppr-product-details-page .ppr-product-details__buying p{font-size:17px;color:var(--ppr-ink-charcoal)}
.ppr-product-details-page .ppr-product-details__visual-meta,
.ppr-product-details-page .ppr-product-details__rating-row,
.ppr-product-details-page .ppr-product-details__price-note{font-size:14px;color:var(--ppr-ink-charcoal)}
.ppr-product-details-page .ppr-product-details__assurance span{font-size:13px;color:var(--ppr-ink-charcoal)}

@media (max-width:1439px){.ppr-product-details-page .ppr-product-details__shell{width:min(1180px,calc(100% - 44px))}.ppr-product-details-page h1{font-size:48px}.ppr-product-details-page .ppr-product-details__image-frame,.ppr-product-details-page .ppr-product-details__image-frame img{height:520px;min-height:520px}.ppr-product-details-page .ppr-product-details__main{gap:34px}}
@media (max-width:1023px){.ppr-product-details-page .ppr-product-details{padding-top:14px}.ppr-product-details-page .ppr-product-details__shell{width:min(92%,820px)}.ppr-product-details-page .ppr-product-details__main{grid-template-columns:1fr;gap:30px}.ppr-product-details-page .ppr-product-details__image-frame,.ppr-product-details-page .ppr-product-details__image-frame img{height:520px;min-height:520px}.ppr-product-details-page h1{font-size:40px}.ppr-product-details-page .ppr-product-details__overview{grid-template-columns:1fr;gap:30px}.ppr-product-details-page .ppr-product-details__suggested-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ppr-product-details-page .ppr-product-details__buying{align-items:flex-start}.ppr-product-details-page .ppr-product-details__overview-points{grid-template-columns:repeat(3,1fr)}}
@media (max-width:767px){.ppr-product-details-page .ppr-product-details__shell{width:calc(100% - 28px)}.ppr-product-details-page .ppr-product-details{padding-top:10px}.ppr-product-details-page .ppr-product-details__breadcrumbs{margin-bottom:12px;font-size:12px;gap:7px}.ppr-product-details-page .ppr-product-details__image-frame,.ppr-product-details-page .ppr-product-details__image-frame img{height:390px;min-height:390px}.ppr-product-details-page .ppr-product-details__image-label{top:12px;left:12px}.ppr-product-details-page .ppr-product-details__visual-meta{font-size:12px}.ppr-product-details-page h1{font-size:34px;letter-spacing:-.8px}.ppr-product-details-page .ppr-product-details__lead{font-size:15px;margin-top:12px}.ppr-product-details-page .ppr-product-details__assurance{grid-template-columns:1fr;gap:7px}.ppr-product-details-page .ppr-product-details__overview,.ppr-product-details-page .ppr-product-details__specs,.ppr-product-details-page .ppr-product-details__buying,.ppr-product-details-page .ppr-product-details__suggested{margin-top:44px}.ppr-product-details-page .ppr-product-details__section-heading h2,.ppr-product-details-page .ppr-product-details__suggested h2,.ppr-product-details-page .ppr-product-details__buying h2{font-size:28px}.ppr-product-details-page .ppr-product-details__overview-points{grid-template-columns:1fr}.ppr-product-details-page .ppr-product-details__overview-points>div{padding-right:0}.ppr-product-details-page .ppr-product-details__spec-table{grid-template-columns:1fr}.ppr-product-details-page .ppr-product-details__buying{display:block;padding:28px 0}.ppr-product-details-page .ppr-product-details__secondary-button{margin-top:20px}.ppr-product-details-page .ppr-product-details__suggested-heading{display:block}.ppr-product-details-page .ppr-product-details__text-link{display:inline-block;margin-top:12px}.ppr-product-details-page .ppr-product-details__suggested-grid{grid-template-columns:1fr;gap:28px}.ppr-product-details-page .ppr-suggested-card__image{height:300px}.ppr-product-details-page .ppr-product-details__bottom-nav{margin:42px 0 48px}.ppr-product-details-page .ppr-product-details__bottom-nav a{font-size:13px}}
@media (max-width:374px){.ppr-product-details-page .ppr-product-details__shell{width:calc(100% - 20px)}.ppr-product-details-page .ppr-product-details__image-frame,.ppr-product-details-page .ppr-product-details__image-frame img{height:330px;min-height:330px}.ppr-product-details-page h1{font-size:30px}.ppr-product-details-page .ppr-product-details__price-line{font-size:14px}.ppr-product-details-page .ppr-product-details__quantity-control button,.ppr-product-details-page .ppr-product-details__quantity-control output{width:40px;height:40px}.ppr-product-details-page .ppr-product-details__bottom-nav{gap:12px}.ppr-product-details-page .ppr-product-details__bottom-nav a{font-size:12px}}

@media (max-width:767px){
    .ppr-product-details-page .ppr-product-details__lead{font-size:16px}
    .ppr-product-details-page .ppr-product-details__visual-meta{font-size:13px;flex-wrap:wrap}
    .ppr-product-details-page .ppr-product-details__rating-row,
    .ppr-product-details-page .ppr-product-details__price-note{font-size:13px}
}


/* =========================================================
   PAPERLY — ORGANIZERS PAGE ONLY
   Every selector is scoped to .ppr-organizers-page.
   ========================================================= */

.ppr-organizers-page {
    --ppr-organizers-border: rgba(46, 41, 42, 0.14);
    --ppr-organizers-soft-border: rgba(46, 41, 42, 0.08);
    --ppr-organizers-card-bg: #EFE5DA;
    --ppr-organizers-muted: #665C5D;
    --ppr-organizers-shadow: 0 16px 45px rgba(46, 41, 42, 0.09);
    --ppr-organizers-radius: 16px;

    width: 100%;
    color: var(--ppr-ink-charcoal);
    background: var(--ppr-warm-porcelain);
}

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

.ppr-organizers-page img {
    display: block;
    max-width: 100%;
}

/* =========================================================
   HERO — EXACTLY 70VH
   ========================================================= */

.ppr-organizers-page .ppr-organizers-hero {
    position: relative;
    min-height: 70vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--ppr-autumn-ivory);
}

.ppr-organizers-page .ppr-organizers-hero__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ppr-organizers-page .ppr-organizers-hero__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            90deg,
            rgba(239, 229, 218, 0.94) 0%,
            rgba(239, 229, 218, 0.78) 46%,
            rgba(239, 229, 218, 0.54) 100%
        );
}

.ppr-organizers-page .ppr-organizers-hero__content {
    width: min(820px, calc(100% - 48px));
    padding: 70px 24px;
    text-align: center;
}

.ppr-organizers-page .ppr-organizers-hero__eyebrow,
.ppr-organizers-page .ppr-organizers-filter__eyebrow,
.ppr-organizers-page .ppr-organizers-content__eyebrow,
.ppr-organizers-page .ppr-organizers-card__category {
    display: block;
    color: var(--ppr-dusty-rose);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ppr-organizers-page .ppr-organizers-hero__title {
    max-width: 780px;
    margin: 14px auto 18px;
    color: var(--ppr-ink-charcoal);
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.ppr-organizers-page .ppr-organizers-hero__description {
    max-width: 650px;
    margin: 0 auto 28px;
    color: var(--ppr-ink-charcoal);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
}

.ppr-organizers-page .ppr-organizers-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid var(--ppr-dusty-rose);
    border-radius: var(--ppr-radius-medium);
    background: var(--ppr-dusty-rose);
    color: #fff8f5;
    font-size: 14px;
    font-weight: 700;
    transition:
        background-color var(--ppr-transition-fast),
        border-color var(--ppr-transition-fast),
        transform var(--ppr-transition-fast);
}

.ppr-organizers-page .ppr-organizers-hero__cta:hover {
    background: var(--ppr-dusty-rose-dark);
    border-color: var(--ppr-dusty-rose-dark);
    transform: translateY(-2px);
}

/* =========================================================
   COLLECTION + STICKY FILTER
   ========================================================= */

.ppr-organizers-page .ppr-organizers-collection {
    width: min(1380px, calc(100% - 48px));
    margin: 0 auto;
    padding: 88px 0 100px;
}

.ppr-organizers-page .ppr-organizers-collection__layout {
    display: grid;
    grid-template-columns: minmax(230px, 250px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(34px, 5vw, 78px);
}

.ppr-organizers-page .ppr-organizers-filter {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 480px;
    align-self: start;
    padding-top: 28px;
}

.ppr-organizers-page .ppr-organizers-filter__top {
    padding: 4px 0 18px;
}

.ppr-organizers-page .ppr-organizers-filter__title {
    margin-top: 7px;
    color: var(--ppr-ink-charcoal);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.ppr-organizers-page .ppr-organizers-filter__scroll {
    height: calc(100% - 82px);
    padding-right: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ppr-warm-taupe) transparent;
}

.ppr-organizers-page .ppr-organizers-filter__scroll::-webkit-scrollbar {
    width: 5px;
}

.ppr-organizers-page .ppr-organizers-filter__scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--ppr-warm-taupe);
}

.ppr-organizers-page .ppr-organizers-filter__panel {
    padding: 0 0 22px;
    border-top: 1px solid var(--ppr-organizers-border);
}

.ppr-organizers-page .ppr-organizers-filter__group {
    min-width: 0;
    padding: 18px 0;
    border: 0;
    border-bottom: 1px solid var(--ppr-organizers-soft-border);
}

.ppr-organizers-page .ppr-organizers-filter__label {
    display: block;
    margin-bottom: 10px;
    padding: 0;
    color: var(--ppr-ink-charcoal);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.ppr-organizers-page .ppr-organizers-filter__input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--ppr-organizers-border);
    border-radius: var(--ppr-radius-small);
    outline: 0;
    background: transparent;
    color: var(--ppr-ink-charcoal);
    font-size: 13px;
    transition: border-color var(--ppr-transition-fast), box-shadow var(--ppr-transition-fast);
}

.ppr-organizers-page .ppr-organizers-filter__input::placeholder {
    color: var(--ppr-organizers-muted);
    opacity: 0.82;
}

.ppr-organizers-page .ppr-organizers-filter__input:focus {
    border-color: var(--ppr-dusty-rose);
    box-shadow: 0 0 0 3px rgba(169, 103, 104, 0.13);
}

.ppr-organizers-page .ppr-organizers-filter__option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 31px;
    color: var(--ppr-organizers-muted);
    font-size: 13px;
    line-height: 1.45;
    cursor: pointer;
}

.ppr-organizers-page .ppr-organizers-filter__option + .ppr-organizers-filter__option {
    margin-top: 4px;
}

.ppr-organizers-page .ppr-organizers-filter__option input {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    accent-color: var(--ppr-dusty-rose);
}

.ppr-organizers-page .ppr-organizers-filter__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--ppr-organizers-muted);
    font-size: 12px;
}

.ppr-organizers-page .ppr-organizers-filter__price-row output {
    color: var(--ppr-ink-charcoal);
    font-weight: 700;
}

.ppr-organizers-page .ppr-organizers-filter__range {
    width: 100%;
    margin: 0;
    accent-color: var(--ppr-dusty-rose);
    cursor: pointer;
}

.ppr-organizers-page .ppr-organizers-filter__clear {
    width: 100%;
    min-height: 42px;
    margin-top: 18px;
    border: 1px solid var(--ppr-dusty-rose);
    border-radius: var(--ppr-radius-small);
    color: var(--ppr-dusty-rose-dark);
    font-size: 13px;
    font-weight: 700;
    transition:
        background-color var(--ppr-transition-fast),
        color var(--ppr-transition-fast);
}

.ppr-organizers-page .ppr-organizers-filter__clear:hover {
    background: var(--ppr-dusty-rose);
    color: #fff8f5;
}

.ppr-organizers-page .ppr-organizers-filter__mobile-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
    padding: 0 14px;
    border: 1px solid var(--ppr-organizers-border);
    border-radius: var(--ppr-radius-small);
    color: var(--ppr-ink-charcoal);
    font-size: 14px;
    font-weight: 700;
    position: relative;
    z-index: 5;
    cursor: pointer;
    pointer-events: auto;
}

.ppr-organizers-page .ppr-organizers-filter__mobile-icon {
    font-size: 17px;
    line-height: 1;
}

/* =========================================================
   PRODUCT CONTENT + 9 CARDS
   ========================================================= */

.ppr-organizers-page .ppr-organizers-content {
    min-width: 0;
}

.ppr-organizers-page .ppr-organizers-content__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
}

.ppr-organizers-page .ppr-organizers-content__title {
    margin-top: 7px;
    color: var(--ppr-ink-charcoal);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.ppr-organizers-page .ppr-organizers-content__description {
    max-width: 600px;
    margin-top: 8px;
    color: var(--ppr-organizers-muted);
    font-size: 14px;
    line-height: 1.65;
}

.ppr-organizers-page .ppr-organizers-results {
    flex: 0 0 auto;
    color: var(--ppr-organizers-muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.ppr-organizers-page .ppr-organizers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.ppr-organizers-page .ppr-organizers-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ppr-organizers-soft-border);
    border-radius: var(--ppr-organizers-radius);
    background: var(--ppr-organizers-card-bg);
    box-shadow: 0 8px 24px rgba(46, 41, 42, 0.045);
    transition:
        transform var(--ppr-transition-normal),
        box-shadow var(--ppr-transition-normal),
        border-color var(--ppr-transition-normal);
}

.ppr-organizers-page .ppr-organizers-card:hover {
    transform: translateY(-5px);
    border-color: rgba(169, 103, 104, 0.32);
    box-shadow: var(--ppr-organizers-shadow);
}

.ppr-organizers-page .ppr-organizers-card__link {
    display: flex;
    height: 100%;
    flex-direction: column;
}

.ppr-organizers-page .ppr-organizers-card__image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.82;
    overflow: hidden;
    background: var(--ppr-warm-porcelain);
}

.ppr-organizers-page .ppr-organizers-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 500ms cubic-bezier(.2,.7,.2,1);
}

.ppr-organizers-page .ppr-organizers-card:hover .ppr-organizers-card__image {
    transform: scale(1.035);
}

.ppr-organizers-page .ppr-organizers-card__content {
    display: flex;
    min-height: 190px;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 20px;
}

.ppr-organizers-page .ppr-organizers-card__name {
    margin-top: 7px;
    color: var(--ppr-ink-charcoal);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}

.ppr-organizers-page .ppr-organizers-card__description {
    margin-top: 8px;
    color: var(--ppr-organizers-muted);
    font-size: 14px;
    line-height: 1.65;
}

.ppr-organizers-page .ppr-organizers-card__action {
    margin-top: 0;
    padding-top: 0;
    color: var(--ppr-dusty-rose-dark);
    font-size: 13px;
    font-weight: 700;
}

/* ---- CARD META ROW — PRICE (LEFT) + VIEW PRODUCT (RIGHT) ---- */

.ppr-organizers-page .ppr-organizers-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 14px;
    margin-top: auto;
    padding-top: 16px;
}

.ppr-organizers-page .ppr-organizers-card__price {
    color: var(--ppr-ink-charcoal);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.ppr-organizers-page .ppr-organizers-card[hidden] {
    display: none !important;
}

.ppr-organizers-page .ppr-organizers-empty {
    display: none;
    margin-top: 20px;
    padding: 36px 18px;
    border: 1px dashed var(--ppr-organizers-border);
    border-radius: var(--ppr-organizers-radius);
    color: var(--ppr-organizers-muted);
    text-align: center;
    font-size: 14px;
}

.ppr-organizers-page .ppr-organizers-empty.is-visible {
    display: block;
}

/* =========================================================
   RESPONSIVE — LAPTOP
   ========================================================= */

@media (max-width: 1439px) {
    .ppr-organizers-page .ppr-organizers-collection {
        width: min(1240px, calc(100% - 40px));
    }

    .ppr-organizers-page .ppr-organizers-collection__layout {
        gap: 42px;
    }
}

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1023px) {
    .ppr-organizers-page .ppr-organizers-collection__layout {
        display: block;
    }

    .ppr-organizers-page .ppr-organizers-filter {
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
        margin-bottom: 40px;
    }

    .ppr-organizers-page .ppr-organizers-filter__mobile-toggle {
        display: flex;
    }

    .ppr-organizers-page .ppr-organizers-filter__scroll {
        display: none;
        height: auto;
        max-height: 62vh;
        margin-top: 12px;
        padding-right: 12px;
        border-top: 1px solid var(--ppr-organizers-border);
    }

    .ppr-organizers-page .ppr-organizers-filter.is-open .ppr-organizers-filter__scroll {
        display: block;
    }

    .ppr-organizers-page .ppr-organizers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   RESPONSIVE — MOBILE-L / M
   ========================================================= */

@media (max-width: 767px) {
    .ppr-organizers-page .ppr-organizers-hero__content {
        width: calc(100% - 32px);
        padding: 48px 10px;
    }

    .ppr-organizers-page .ppr-organizers-hero__title {
        font-size: clamp(34px, 9vw, 46px);
    }

    .ppr-organizers-page .ppr-organizers-hero__description {
        font-size: 14px;
    }

    .ppr-organizers-page .ppr-organizers-collection {
        width: calc(100% - 28px);
        padding: 72px 0 80px;
    }

    .ppr-organizers-page .ppr-organizers-content__heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .ppr-organizers-page .ppr-organizers-content__title {
        font-size: 28px;
    }

    .ppr-organizers-page .ppr-organizers-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ppr-organizers-page .ppr-organizers-card__content {
        min-height: 178px;
        padding: 16px;
    }

    .ppr-organizers-page .ppr-organizers-card__name {
        font-size: 17px;
    }

    .ppr-organizers-page .ppr-organizers-card__description {
        font-size: 13px;
    }
}

/* =========================================================
   RESPONSIVE — MOBILE-S
   ========================================================= */

@media (max-width: 374px) {
    .ppr-organizers-page .ppr-organizers-hero__title {
        font-size: 32px;
    }

    .ppr-organizers-page .ppr-organizers-hero__description {
        font-size: 13px;
    }

    .ppr-organizers-page .ppr-organizers-collection {
        width: calc(100% - 24px);
    }

    .ppr-organizers-page .ppr-organizers-card__image-wrap {
        aspect-ratio: 1 / 0.72;
    }

    .ppr-organizers-page .ppr-organizers-card__content {
        min-height: 165px;
    }
}

/* =========================================================
   ORGANIZERS CARD PRICE META — RESPONSIVE
   ========================================================= */

@media (max-width: 374px) {
    .ppr-organizers-page .ppr-organizers-card__meta { gap: 6px 10px; padding-top: 14px; }
    .ppr-organizers-page .ppr-organizers-card__price { font-size: 16px; }
    .ppr-organizers-page .ppr-organizers-card__action { font-size: 12px; }
}
@media (max-width: 1023px) {
    .ppr-organizers-page .ppr-organizers-card__price { font-size: 18px; }
}
@media (min-width: 480px) {
    .ppr-organizers-page .ppr-organizers-card__price { font-size: 19px; }
}
@media (min-width: 1440px) {
    .ppr-organizers-page .ppr-organizers-card__meta { gap: 12px 20px; padding-top: 18px; }
}
@media (min-width: 1920px) {
    .ppr-organizers-page .ppr-organizers-collection { width: min(1480px, calc(100% - 96px)); }
}
@media (min-width: 1024px) and (max-height: 620px) {
    .ppr-organizers-page .ppr-organizers-filter { min-height: 0; }
}

/* Light-mode legibility: small accent labels use the darker rose (WCAG AA) */
.ppr-organizers-page .ppr-organizers-hero__eyebrow,
.ppr-organizers-page .ppr-organizers-filter__eyebrow,
.ppr-organizers-page .ppr-organizers-content__eyebrow,
.ppr-organizers-page .ppr-organizers-card__category {
    color: var(--ppr-dusty-rose-dark);
}




/* =========================================================
   PAPERLY — WRITING PAGE ONLY
   Append this block to assets/css/styles.css.
   Every selector is scoped to .ppr-printing-paper-page.
   ========================================================= */

.ppr-printing-paper-page {
    --ppr-writing-border: rgba(46, 41, 42, 0.14);
    --ppr-writing-soft-border: rgba(46, 41, 42, 0.08);
    --ppr-writing-card-bg: #EFE5DA;
    --ppr-writing-muted: #665C5D;
    --ppr-writing-shadow: 0 16px 45px rgba(46, 41, 42, 0.09);
    --ppr-writing-radius: 16px;

    width: 100%;
    color: var(--ppr-ink-charcoal);
    background: var(--ppr-warm-porcelain);
}

.ppr-printing-paper-page,
.ppr-printing-paper-page *,
.ppr-printing-paper-page *::before,
.ppr-printing-paper-page *::after {
    box-sizing: border-box;
}

.ppr-printing-paper-page img {
    display: block;
    max-width: 100%;
}

/* =========================================================
   HERO — EXACTLY 70VH
   ========================================================= */

.ppr-printing-paper-page .ppr-writing-hero {
    position: relative;
    min-height: 70vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--ppr-autumn-ivory);
}

.ppr-printing-paper-page .ppr-writing-hero__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ppr-printing-paper-page .ppr-writing-hero__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            90deg,
            rgba(239, 229, 218, 0.94) 0%,
            rgba(239, 229, 218, 0.78) 46%,
            rgba(239, 229, 218, 0.54) 100%
        );
}

.ppr-printing-paper-page .ppr-writing-hero__content {
    width: min(820px, calc(100% - 48px));
    padding: 70px 24px;
    text-align: center;
}

.ppr-printing-paper-page .ppr-writing-hero__eyebrow,
.ppr-printing-paper-page .ppr-writing-filter__eyebrow,
.ppr-printing-paper-page .ppr-writing-content__eyebrow,
.ppr-printing-paper-page .ppr-writing-card__category {
    display: block;
    color: var(--ppr-dusty-rose);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ppr-printing-paper-page .ppr-writing-hero__title {
    max-width: 780px;
    margin: 14px auto 18px;
    color: var(--ppr-ink-charcoal);
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.ppr-printing-paper-page .ppr-writing-hero__description {
    max-width: 650px;
    margin: 0 auto 28px;
    color: var(--ppr-ink-charcoal);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
}

.ppr-printing-paper-page .ppr-writing-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid var(--ppr-dusty-rose);
    border-radius: var(--ppr-radius-medium);
    background: var(--ppr-dusty-rose);
    color: #fff8f5;
    font-size: 14px;
    font-weight: 700;
    transition:
        background-color var(--ppr-transition-fast),
        border-color var(--ppr-transition-fast),
        transform var(--ppr-transition-fast);
}

.ppr-printing-paper-page .ppr-writing-hero__cta:hover {
    background: var(--ppr-dusty-rose-dark);
    border-color: var(--ppr-dusty-rose-dark);
    transform: translateY(-2px);
}

/* =========================================================
   COLLECTION + STICKY FILTER
   ========================================================= */

.ppr-printing-paper-page .ppr-writing-collection {
    width: min(1380px, calc(100% - 48px));
    margin: 0 auto;
    padding: 88px 0 100px;
}

.ppr-printing-paper-page .ppr-writing-collection__layout {
    display: grid;
    grid-template-columns: minmax(230px, 250px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(34px, 5vw, 78px);
}

.ppr-printing-paper-page .ppr-writing-filter {
    position: sticky;
    top: var(--ppr-navbar-height);
    height: calc(100vh - var(--ppr-navbar-height));
    min-height: 480px;
    align-self: start;
}

.ppr-printing-paper-page .ppr-writing-filter__top {
    padding: 4px 0 18px;
}

.ppr-printing-paper-page .ppr-writing-filter__title {
    margin-top: 7px;
    color: var(--ppr-ink-charcoal);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.ppr-printing-paper-page .ppr-writing-filter__scroll {
    height: calc(100% - 82px);
    padding-right: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ppr-warm-taupe) transparent;
}

.ppr-printing-paper-page .ppr-writing-filter__scroll::-webkit-scrollbar {
    width: 5px;
}

.ppr-printing-paper-page .ppr-writing-filter__scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--ppr-warm-taupe);
}

.ppr-printing-paper-page .ppr-writing-filter__panel {
    padding: 0 0 22px;
    border-top: 1px solid var(--ppr-writing-border);
}

.ppr-printing-paper-page .ppr-writing-filter__group {
    min-width: 0;
    padding: 18px 0;
    border: 0;
    border-bottom: 1px solid var(--ppr-writing-soft-border);
}

.ppr-printing-paper-page .ppr-writing-filter__label {
    display: block;
    margin-bottom: 10px;
    padding: 0;
    color: var(--ppr-ink-charcoal);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.ppr-printing-paper-page .ppr-writing-filter__input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--ppr-writing-border);
    border-radius: var(--ppr-radius-small);
    outline: 0;
    background: transparent;
    color: var(--ppr-ink-charcoal);
    font-size: 13px;
    transition: border-color var(--ppr-transition-fast), box-shadow var(--ppr-transition-fast);
}

.ppr-printing-paper-page .ppr-writing-filter__input::placeholder {
    color: var(--ppr-writing-muted);
    opacity: 0.82;
}

.ppr-printing-paper-page .ppr-writing-filter__input:focus {
    border-color: var(--ppr-dusty-rose);
    box-shadow: 0 0 0 3px rgba(169, 103, 104, 0.13);
}

.ppr-printing-paper-page .ppr-writing-filter__option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 31px;
    color: var(--ppr-writing-muted);
    font-size: 13px;
    line-height: 1.45;
    cursor: pointer;
}

.ppr-printing-paper-page .ppr-writing-filter__option + .ppr-writing-filter__option {
    margin-top: 4px;
}

.ppr-printing-paper-page .ppr-writing-filter__option input {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    accent-color: var(--ppr-dusty-rose);
}

.ppr-printing-paper-page .ppr-writing-filter__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--ppr-writing-muted);
    font-size: 12px;
}

.ppr-printing-paper-page .ppr-writing-filter__price-row output {
    color: var(--ppr-ink-charcoal);
    font-weight: 700;
}

.ppr-printing-paper-page .ppr-writing-filter__range {
    width: 100%;
    margin: 0;
    accent-color: var(--ppr-dusty-rose);
    cursor: pointer;
}

.ppr-printing-paper-page .ppr-writing-filter__clear {
    width: 100%;
    min-height: 42px;
    margin-top: 18px;
    border: 1px solid var(--ppr-dusty-rose);
    border-radius: var(--ppr-radius-small);
    color: var(--ppr-dusty-rose-dark);
    font-size: 13px;
    font-weight: 700;
    transition:
        background-color var(--ppr-transition-fast),
        color var(--ppr-transition-fast);
}

.ppr-printing-paper-page .ppr-writing-filter__clear:hover {
    background: var(--ppr-dusty-rose);
    color: #fff8f5;
}

.ppr-printing-paper-page .ppr-writing-filter__mobile-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
    padding: 0 14px;
    border: 1px solid var(--ppr-writing-border);
    border-radius: var(--ppr-radius-small);
    color: var(--ppr-ink-charcoal);
    font-size: 14px;
    font-weight: 700;
    position: relative;
    z-index: 5;
    cursor: pointer;
    pointer-events: auto;
}

.ppr-printing-paper-page .ppr-writing-filter__mobile-icon {
    font-size: 17px;
    line-height: 1;
}

/* =========================================================
   PRODUCT CONTENT + 9 CARDS
   ========================================================= */

.ppr-printing-paper-page .ppr-writing-content {
    min-width: 0;
}

.ppr-printing-paper-page .ppr-writing-content__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
}

.ppr-printing-paper-page .ppr-writing-content__title {
    margin-top: 7px;
    color: var(--ppr-ink-charcoal);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.ppr-printing-paper-page .ppr-writing-content__description {
    max-width: 600px;
    margin-top: 8px;
    color: var(--ppr-writing-muted);
    font-size: 14px;
    line-height: 1.65;
}

.ppr-printing-paper-page .ppr-writing-results {
    flex: 0 0 auto;
    color: var(--ppr-writing-muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.ppr-printing-paper-page .ppr-writing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.ppr-printing-paper-page .ppr-writing-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ppr-writing-soft-border);
    border-radius: var(--ppr-writing-radius);
    background: var(--ppr-writing-card-bg);
    box-shadow: 0 8px 24px rgba(46, 41, 42, 0.045);
    transition:
        transform var(--ppr-transition-normal),
        box-shadow var(--ppr-transition-normal),
        border-color var(--ppr-transition-normal);
}

.ppr-printing-paper-page .ppr-writing-card:hover {
    transform: translateY(-5px);
    border-color: rgba(169, 103, 104, 0.32);
    box-shadow: var(--ppr-writing-shadow);
}

.ppr-printing-paper-page .ppr-writing-card__link {
    display: flex;
    height: 100%;
    flex-direction: column;
}

.ppr-printing-paper-page .ppr-writing-card__image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.82;
    overflow: hidden;
    background: var(--ppr-warm-porcelain);
}

.ppr-printing-paper-page .ppr-writing-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 500ms cubic-bezier(.2,.7,.2,1);
}

.ppr-printing-paper-page .ppr-writing-card:hover .ppr-writing-card__image {
    transform: scale(1.035);
}

.ppr-printing-paper-page .ppr-writing-card__content {
    display: flex;
    min-height: 190px;
    flex: 1;
    flex-direction: column;
    padding: 20px;
}

.ppr-printing-paper-page .ppr-writing-card__name {
    margin-top: 7px;
    color: var(--ppr-ink-charcoal);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}

.ppr-printing-paper-page .ppr-writing-card__description {
    margin-top: 8px;
    color: var(--ppr-writing-muted);
    font-size: 14px;
    line-height: 1.65;
}

.ppr-printing-paper-page .ppr-writing-card__action {
    margin-top: 0;
    padding-top: 0;
    color: var(--ppr-dusty-rose-dark);
    font-size: 13px;
    font-weight: 700;
}

/* ---- CARD META ROW — PRICE (LEFT) + VIEW PRODUCT (RIGHT) ---- */

.ppr-printing-paper-page .ppr-writing-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 14px;
    width: 100%;
    margin-top: auto;
    padding-top: 16px;
}

.ppr-printing-paper-page .ppr-writing-card__price {
    color: var(--ppr-ink-charcoal);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.ppr-printing-paper-page .ppr-writing-card[hidden] {
    display: none !important;
}

.ppr-printing-paper-page .ppr-writing-empty {
    display: none;
    margin-top: 20px;
    padding: 36px 18px;
    border: 1px dashed var(--ppr-writing-border);
    border-radius: var(--ppr-writing-radius);
    color: var(--ppr-writing-muted);
    text-align: center;
    font-size: 14px;
}

.ppr-printing-paper-page .ppr-writing-empty.is-visible {
    display: block;
}

/* =========================================================
   RESPONSIVE — LAPTOP
   ========================================================= */

@media (max-width: 1439px) {
    .ppr-printing-paper-page .ppr-writing-collection {
        width: min(1240px, calc(100% - 40px));
    }

    .ppr-printing-paper-page .ppr-writing-collection__layout {
        gap: 42px;
    }
}

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 1023px) {
    .ppr-printing-paper-page .ppr-writing-collection__layout {
        display: block;
    }

    .ppr-printing-paper-page .ppr-writing-filter {
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
        margin-bottom: 40px;
    }

    .ppr-printing-paper-page .ppr-writing-filter__mobile-toggle {
        display: flex;
    }

    .ppr-printing-paper-page .ppr-writing-filter__scroll {
        display: none;
        height: auto;
        max-height: 62vh;
        margin-top: 12px;
        padding-right: 12px;
        border-top: 1px solid var(--ppr-writing-border);
    }

    .ppr-printing-paper-page .ppr-writing-filter.is-open .ppr-writing-filter__scroll {
        display: block;
    }

    .ppr-printing-paper-page .ppr-writing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================================
   RESPONSIVE — MOBILE-L / M
   ========================================================= */

@media (max-width: 767px) {
    .ppr-printing-paper-page .ppr-writing-hero__content {
        width: calc(100% - 32px);
        padding: 48px 10px;
    }

    .ppr-printing-paper-page .ppr-writing-hero__title {
        font-size: clamp(34px, 9vw, 46px);
    }

    .ppr-printing-paper-page .ppr-writing-hero__description {
        font-size: 14px;
    }

    .ppr-printing-paper-page .ppr-writing-collection {
        width: calc(100% - 28px);
        padding: 72px 0 80px;
    }

    .ppr-printing-paper-page .ppr-writing-content__heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .ppr-printing-paper-page .ppr-writing-content__title {
        font-size: 28px;
    }

    .ppr-printing-paper-page .ppr-writing-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ppr-printing-paper-page .ppr-writing-card__content {
        min-height: 178px;
        padding: 16px;
    }

    .ppr-printing-paper-page .ppr-writing-card__name {
        font-size: 17px;
    }

    .ppr-printing-paper-page .ppr-writing-card__description {
        font-size: 13px;
    }
}

/* =========================================================
   RESPONSIVE — MOBILE-S
   ========================================================= */

@media (max-width: 374px) {
    .ppr-printing-paper-page .ppr-writing-hero__title {
        font-size: 32px;
    }

    .ppr-printing-paper-page .ppr-writing-hero__description {
        font-size: 13px;
    }

    .ppr-printing-paper-page .ppr-writing-collection {
        width: calc(100% - 24px);
    }

    .ppr-printing-paper-page .ppr-writing-card__image-wrap {
        aspect-ratio: 1 / 0.72;
    }

    .ppr-printing-paper-page .ppr-writing-card__content {
        min-height: 165px;
    }
}


@media (max-width: 1023px) {
    .ppr-printing-paper-page .ppr-writing-filter { position: relative; top: auto; height: auto; min-height: 0; margin-bottom: 40px; }
    .ppr-printing-paper-page .ppr-writing-filter__mobile-toggle { display: flex !important; pointer-events: auto; }
    .ppr-printing-paper-page .ppr-writing-filter__scroll { display: none; height: auto; max-height: 62vh; margin-top: 12px; padding-right: 12px; border-top: 1px solid var(--ppr-writing-border); overflow-y: auto; }
    .ppr-printing-paper-page .ppr-writing-filter.is-open .ppr-writing-filter__scroll { display: block; }
}

/* =========================================================
   CARD PRICE META — RESPONSIVE (FINAL OVERRIDE)
   Price (bottom-left) + View Product (bottom-right)
   Notebooks / Filing / Printing Paper pages
   Placed last so these win over the earlier page blocks.
   ========================================================= */

/* MOBILE-S (<=374px) */
@media (max-width: 374px) {

    .ppr-notebooks-page .ppr-notebooks-card__meta,
    .ppr-filing-page .ppr-filing-card__meta,
    .ppr-printing-paper-page .ppr-writing-card__meta {
        gap: 6px 10px;
        padding-top: 14px;
    }

    .ppr-notebooks-page .ppr-notebooks-card__price,
    .ppr-filing-page .ppr-filing-card__price,
    .ppr-printing-paper-page .ppr-writing-card__price {
        font-size: 16px;
    }

    .ppr-notebooks-page .ppr-notebooks-card__action,
    .ppr-filing-page .ppr-filing-card__action,
    .ppr-printing-paper-page .ppr-writing-card__action {
        font-size: 12px;
    }
}

/* MOBILE-M / MOBILE-L / TABLET (375px - 1023px) */
@media (max-width: 1023px) {

    .ppr-notebooks-page .ppr-notebooks-card__price,
    .ppr-filing-page .ppr-filing-card__price,
    .ppr-printing-paper-page .ppr-writing-card__price {
        font-size: 18px;
    }
}

/* MOBILE-L (>=480px) */
@media (min-width: 480px) {

    .ppr-notebooks-page .ppr-notebooks-card__price,
    .ppr-filing-page .ppr-filing-card__price,
    .ppr-printing-paper-page .ppr-writing-card__price {
        font-size: 19px;
    }
}

/* LAPTOP-L / DESKTOP — generous spacing */
@media (min-width: 1440px) {

    .ppr-notebooks-page .ppr-notebooks-card__meta,
    .ppr-filing-page .ppr-filing-card__meta,
    .ppr-printing-paper-page .ppr-writing-card__meta {
        gap: 12px 20px;
        padding-top: 18px;
    }
}

/* =========================================================
   PRICE + VIEW PRODUCT — KEEP ON ONE SHARED LINE
   Prevents the action text wrapping onto a second line
   and keeps both items on one baseline at every width.
   ========================================================= */

.ppr-products-page .ppr-products-card__meta,
.ppr-writing-page .ppr-writing-card__meta,
.ppr-notebooks-page .ppr-notebooks-card__meta,
.ppr-filing-page .ppr-filing-card__meta,
.ppr-organizers-page .ppr-organizers-card__meta,
.ppr-printing-paper-page .ppr-writing-card__meta {
    flex-wrap: nowrap;
    align-items: baseline;
}

.ppr-products-page .ppr-products-card__price,
.ppr-writing-page .ppr-writing-card__price,
.ppr-notebooks-page .ppr-notebooks-card__price,
.ppr-filing-page .ppr-filing-card__price,
.ppr-organizers-page .ppr-organizers-card__price,
.ppr-printing-paper-page .ppr-writing-card__price {
    flex: 0 0 auto;
    white-space: nowrap;
}

.ppr-products-page .ppr-products-card__action,
.ppr-writing-page .ppr-writing-card__action,
.ppr-notebooks-page .ppr-notebooks-card__action,
.ppr-filing-page .ppr-filing-card__action,
.ppr-organizers-page .ppr-organizers-card__action,
.ppr-printing-paper-page .ppr-writing-card__action {
    flex: 0 0 auto;
    white-space: nowrap;
}


/* =========================================================
   PAPERLY — CONTACT / CORPORATE PAGE STYLES (MERGED)
   Original source: contact-corporate.css
   ========================================================= */

/* =========================================================
   PAPERLY — CONTACT PAGE
   Hero / Contact Desk / Enquiry / Next Steps / Map / CTA
   ========================================================= */


/* ---------- Local tokens (dark values live in dark.css) ---------- */

.ppr-contact {
    --ppr-c-muted: #625B59;
    --ppr-c-soft: #756D69;
    --ppr-c-placeholder: #958984;
    --ppr-c-eyebrow: var(--ppr-dusty-rose-dark);

    color: var(--ppr-ink-charcoal);
}

.ppr-contact-container {
    width: min(90%, var(--ppr-content-width));
    margin-inline: auto;
}

.ppr-contact section[id] {
    scroll-margin-top: calc(var(--ppr-navbar-height) + 8px);
}


/* ---------- Shared: eyebrow, buttons, headings ---------- */

.ppr-contact-eyebrow {
    display: inline-block;
    margin-bottom: 18px;

    color: var(--ppr-c-eyebrow);

    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.ppr-contact-btn {
    min-height: 46px;
    padding: 0 21px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border: 1px solid var(--ppr-dusty-rose);
    border-radius: var(--ppr-radius-small);

    background: var(--ppr-dusty-rose);
    color: #FFFFFF;

    font-size: 14px;
    font-weight: 700;

    transition:
        background-color var(--ppr-transition-normal),
        border-color var(--ppr-transition-normal),
        transform var(--ppr-transition-normal);
}

.ppr-contact-btn:hover {
    background: var(--ppr-dusty-rose-dark);
    border-color: var(--ppr-dusty-rose-dark);
    transform: translateY(-2px);
}

.ppr-contact-title-lg {
    font-size: clamp(30px, 3.5vw, 42px);
    line-height: 1.1;
    letter-spacing: -1px;
}


/* ---------- Scroll reveal ---------- */

.ppr-contact-reveal {
    opacity: 0;
    transform: translateY(24px);

    transition:
        opacity 650ms ease,
        transform 650ms ease;
}

.ppr-contact-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   01 HERO
   ========================================================= */

.ppr-contact-hero {
    padding: 72px 0 62px;
    border-bottom: 1px solid var(--ppr-warm-taupe);
}

.ppr-contact-hero__grid {
    display: grid;
    grid-template-columns: 1fr 0.86fr;
    gap: 65px;
    align-items: center;
}

.ppr-contact-hero__title {
    max-width: 690px;
    margin-bottom: 22px;

    font-size: clamp(42px, 5vw, 64px);
    line-height: 1.04;
    letter-spacing: -2.2px;
}

.ppr-contact-hero__title span {
    color: var(--ppr-dusty-rose);
}

.ppr-contact-hero__text {
    max-width: 580px;
    margin-bottom: 29px;

    color: var(--ppr-c-muted);
    font-size: 16px;
}

.ppr-contact-hero__info {
    margin-top: 32px;
    padding-top: 23px;

    display: flex;
    flex-wrap: wrap;
    gap: 30px;

    border-top: 1px solid var(--ppr-warm-taupe);
}

.ppr-contact-hero__info-item {
    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 13px;
    font-weight: 600;
}

.ppr-contact-hero__info-item i {
    color: var(--ppr-dusty-rose);
}

.ppr-contact-hero__image {
    height: 420px;
    overflow: hidden;
    border-radius: var(--ppr-radius-medium);
}

.ppr-contact-hero__image img,
.ppr-contact-desk__image img,
.ppr-contact-enquiry__visual img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 700ms ease;
}

.ppr-contact-hero__image:hover img,
.ppr-contact-desk__image:hover img,
.ppr-contact-enquiry__visual:hover img {
    transform: scale(1.035);
}


/* =========================================================
   02 CONTACT DESK
   ========================================================= */

.ppr-contact-desk {
    padding: 78px 0;
}

.ppr-contact-head {
    max-width: 720px;
    margin-bottom: 36px;
}

.ppr-contact-head h2 {
    margin-bottom: 11px;
    font-size: clamp(30px, 3.5vw, 42px);
    line-height: 1.12;
    letter-spacing: -1px;
}

.ppr-contact-head p {
    max-width: 620px;
    color: var(--ppr-c-muted);
}

.ppr-contact-desk__grid {
    display: grid;
    grid-template-columns: 0.74fr 1.26fr;
    gap: 48px;
    align-items: stretch;
}

.ppr-contact-desk__image {
    height: 410px;
    overflow: hidden;
    border-radius: var(--ppr-radius-medium);
}

.ppr-contact-links {
    border-top: 1px solid var(--ppr-warm-taupe);
}

.ppr-contact-link {
    min-height: 102px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    border-bottom: 1px solid var(--ppr-warm-taupe);

    transition:
        padding var(--ppr-transition-normal),
        color var(--ppr-transition-normal);
}

.ppr-contact-link:hover {
    padding-inline: 14px;
    color: var(--ppr-dusty-rose-dark);
}

.ppr-contact-link__left {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.ppr-contact-link__number {
    padding-top: 4px;

    color: var(--ppr-dusty-rose);
    font-size: 12px;
    font-weight: 700;
}

.ppr-contact-link__title {
    font-size: 18px;
    font-weight: 700;
}

.ppr-contact-link__text {
    margin-top: 2px;
    color: var(--ppr-c-soft);
    font-size: 13px;
}

.ppr-contact-link__arrow {
    font-size: 16px;
    transition: transform var(--ppr-transition-normal);
}

.ppr-contact-link:hover .ppr-contact-link__arrow {
    transform: translateX(5px);
}


/* =========================================================
   03 ENQUIRY
   ========================================================= */

.ppr-contact-enquiry {
    padding: 76px 0;

    background: var(--ppr-autumn-ivory);
    border-block: 1px solid var(--ppr-warm-taupe);
}

.ppr-contact-enquiry__title {
    margin-bottom: 32px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
}

.ppr-contact-enquiry__title p {
    max-width: 430px;
    color: var(--ppr-c-muted);
    font-size: 15px;
}

.ppr-contact-enquiry__layout {
    display: grid;
    grid-template-columns: 225px minmax(0, 1fr);
    gap: 32px;
    align-items: stretch;
}

.ppr-contact-enquiry__visual {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    border-radius: 10px;
}

.ppr-contact-enquiry__visual img {
    min-height: 500px;
}

.ppr-contact-enquiry__label {
    position: absolute;
    inset-inline: 15px;
    bottom: 15px;
    padding: 13px 14px;

    background: rgba(46, 41, 42, 0.91);
    border-inline-start: 3px solid var(--ppr-dusty-rose);
    color: #FFFFFF;
}

.ppr-contact-enquiry__label strong {
    display: block;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ppr-contact-enquiry__label span {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    opacity: 0.82;
}


/* ---------- Form ---------- */

.ppr-contact-form-wrap {
    min-width: 0;
    padding: 25px 28px 24px;

    background: var(--ppr-warm-porcelain);
    border: 1px solid var(--ppr-warm-taupe);
    border-radius: 10px;
}

.ppr-contact-form__topline {
    margin-bottom: 20px;
    padding-bottom: 18px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

    border-bottom: 1px solid var(--ppr-warm-taupe);
}

.ppr-contact-form__topline strong {
    font-size: 17px;
}

.ppr-contact-form__topline span {
    color: var(--ppr-c-eyebrow);
    font-size: 12px;
    font-weight: 700;
}

.ppr-contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.ppr-contact-form__group {
    margin-bottom: 18px;
}

.ppr-contact-form__group label {
    margin-bottom: 7px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    color: var(--ppr-ink-charcoal);
    font-size: 12px;
    font-weight: 700;
}

.ppr-contact-form__required {
    color: var(--ppr-dusty-rose);
}

.ppr-contact-form__control {
    width: 100%;
    height: 43px;
    padding: 0 13px;

    border: 1px solid var(--ppr-warm-taupe);
    border-radius: 7px;
    outline: none;

    background: transparent;
    color: var(--ppr-ink-charcoal);
    font-size: 13px;

    transition:
        border-color var(--ppr-transition-normal),
        box-shadow var(--ppr-transition-normal),
        background-color var(--ppr-transition-normal);
}

textarea.ppr-contact-form__control {
    min-height: 72px;
    padding-block: 11px;
    resize: vertical;
}

.ppr-contact-form__control::placeholder {
    color: var(--ppr-c-placeholder);
}

.ppr-contact-form__control:focus {
    border-color: var(--ppr-dusty-rose);
    box-shadow: 0 0 0 2px rgba(169, 103, 104, 0.11);
}

.ppr-contact-form__control.is-invalid {
    border-color: var(--ppr-dusty-rose-dark);
    background: rgba(169, 103, 104, 0.06);
}

.ppr-contact-form__control.is-invalid:focus {
    box-shadow: 0 0 0 2px rgba(169, 103, 104, 0.15);
}

.ppr-contact-form__select,
.ppr-contact-form__date {
    position: relative;
}

.ppr-contact-form__select::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    position: absolute;
    inset-inline-end: 14px;
    top: 50%;
    transform: translateY(-50%);

    color: var(--ppr-dusty-rose);
    font-size: 10px;
    pointer-events: none;
}

.ppr-contact-form__select select {
    appearance: none;
    padding-inline-end: 35px;
}

.ppr-contact-form__select select option {
    background: var(--ppr-warm-porcelain);
    color: var(--ppr-ink-charcoal);
}

.ppr-contact-form__date i {
    position: absolute;
    inset-inline-end: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;

    color: var(--ppr-dusty-rose);
    pointer-events: none;
}

.ppr-contact-form__date input {
    color-scheme: light;
}

.ppr-contact-form__message {
    display: none;
    margin-bottom: 18px;
    padding: 11px 13px;

    background: rgba(169, 103, 104, 0.08);
    border-inline-start: 3px solid var(--ppr-dusty-rose);
    color: var(--ppr-ink-charcoal);
    font-size: 13px;
}

.ppr-contact-form__message.is-visible {
    display: block;
}

.ppr-contact-form__message.is-success {
    border-inline-start-color: var(--ppr-sage-leaf);
    background: rgba(116, 123, 104, 0.10);
}

.ppr-contact-form__bottom {
    padding-top: 3px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.ppr-contact-form__note {
    color: var(--ppr-c-soft);
    font-size: 12px;
}

.ppr-contact-form__submit {
    flex-shrink: 0;
}


/* =========================================================
   04 WHAT HAPPENS NEXT
   ========================================================= */

.ppr-contact-next {
    padding: 78px 0;
    border-bottom: 1px solid var(--ppr-warm-taupe);
}

.ppr-contact-next__heading {
    margin-bottom: 40px;

    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 50px;
    align-items: end;
}

.ppr-contact-next__heading p {
    max-width: 570px;
    color: var(--ppr-c-muted);
    font-size: 15px;
}

.ppr-contact-next__steps {
    border-top: 1px solid var(--ppr-warm-taupe);
}

.ppr-contact-step {
    min-height: 118px;

    display: grid;
    grid-template-columns: 90px 1fr 90px;
    gap: 28px;
    align-items: center;

    border-bottom: 1px solid var(--ppr-warm-taupe);

    transition:
        background-color var(--ppr-transition-normal),
        padding var(--ppr-transition-normal),
        opacity 650ms ease,
        transform 650ms ease;
}

.ppr-contact-step:hover {
    padding-inline: 18px;
    background: rgba(169, 103, 104, 0.045);
}

.ppr-contact-step__number {
    color: var(--ppr-dusty-rose);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
}

.ppr-contact-step__content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ppr-contact-step__icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;

    display: grid;
    place-items: center;

    border: 1px solid var(--ppr-dusty-rose);
    border-radius: var(--ppr-radius-small);

    color: var(--ppr-dusty-rose);
    font-size: 17px;
}

.ppr-contact-step__content h3 {
    margin-bottom: 3px;
    font-size: 19px;
}

.ppr-contact-step__content p {
    color: var(--ppr-c-soft);
    font-size: 13px;
}

.ppr-contact-step__arrow {
    text-align: end;
    color: var(--ppr-dusty-rose);
    font-size: 17px;
}


/* =========================================================
   05 LOCATION + MAP
   ========================================================= */

.ppr-contact-map {
    padding: 78px 0;
}

.ppr-contact-map__layout {
    display: grid;
    grid-template-columns: 0.68fr 1.32fr;
    gap: 42px;
    align-items: stretch;
}

.ppr-contact-map__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ppr-contact-map__copy h2 {
    margin-bottom: 18px;
}

.ppr-contact-map__copy > p {
    max-width: 450px;
    margin-bottom: 26px;
    color: var(--ppr-c-muted);
}

.ppr-contact-location {
    border-top: 1px solid var(--ppr-warm-taupe);
}

.ppr-contact-location__item {
    padding: 17px 0;

    display: flex;
    gap: 14px;

    border-bottom: 1px solid var(--ppr-warm-taupe);
}

.ppr-contact-location__item i {
    width: 22px;
    padding-top: 3px;
    color: var(--ppr-dusty-rose);
}

.ppr-contact-location__item strong {
    display: block;
    font-size: 13px;
}

.ppr-contact-location__item span {
    margin-top: 2px;
    display: block;

    color: var(--ppr-c-soft);
    font-size: 13px;
}

.ppr-contact-map__frame {
    min-height: 430px;
    overflow: hidden;

    border: 1px solid var(--ppr-warm-taupe);
    border-radius: var(--ppr-radius-medium);
}

.ppr-contact-map__frame iframe {
    width: 100%;
    height: 100%;
    min-height: 430px;
    display: block;
    border: 0;
}


/* =========================================================
   06 FINAL CTA
   ========================================================= */

.ppr-contact-cta {
    padding: 0 0 78px;
}

.ppr-contact-cta__inner {
    position: relative;
    min-height: 360px;
    padding: 55px;

    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;

    border-radius: var(--ppr-radius-medium);
}

.ppr-contact-cta__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(
            90deg,
            rgba(46, 41, 42, 0.94) 0%,
            rgba(46, 41, 42, 0.82) 52%,
            rgba(46, 41, 42, 0.42) 100%
        );
}

.ppr-contact-cta__bg {
    position: absolute;
    inset: 0;
    z-index: -2;

    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ppr-contact-cta__copy {
    max-width: 650px;
    color: #FFFFFF;
}

.ppr-contact-cta__copy .ppr-contact-eyebrow {
    color: #E0B5B5;
}

.ppr-contact-cta__copy h2 {
    margin-bottom: 15px;

    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.06;
    letter-spacing: -1.5px;
}

.ppr-contact-cta__copy p {
    max-width: 570px;
    margin-bottom: 25px;
    color: #F0E6E1;
}


/* =========================================================
   CONTACT — FOCUS
   ========================================================= */

.ppr-contact a:focus-visible,
.ppr-contact button:focus-visible,
.ppr-contact input:focus-visible,
.ppr-contact select:focus-visible,
.ppr-contact textarea:focus-visible {
    outline: 2px solid var(--ppr-dusty-rose);
    outline-offset: 3px;
}


/* =========================================================
   CONTACT — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ppr-contact-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* =========================================================
   CONTACT — RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .ppr-contact-hero__grid { gap: 42px; }

    .ppr-contact-desk__grid { gap: 34px; }

    .ppr-contact-enquiry__layout { grid-template-columns: 190px minmax(0, 1fr); }

    .ppr-contact-next__heading { gap: 35px; }
}


@media (max-width: 900px) {

    .ppr-contact-hero__grid { grid-template-columns: 1fr; }

    .ppr-contact-hero__copy { max-width: 760px; }

    .ppr-contact-hero__image { height: 360px; }

    .ppr-contact-desk__grid { grid-template-columns: 1fr; }

    .ppr-contact-desk__image {
        height: 300px;
        min-height: 300px;
    }

    .ppr-contact-enquiry__title {
        align-items: flex-start;
        flex-direction: column;
    }

    .ppr-contact-enquiry__layout {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 24px;
    }

    .ppr-contact-enquiry__visual img { min-height: 100%; }

    .ppr-contact-next__heading {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ppr-contact-step { grid-template-columns: 70px 1fr 60px; }

    .ppr-contact-map__layout { grid-template-columns: 1fr; }

    .ppr-contact-map__copy { display: block; }

    .ppr-contact-map__frame,
    .ppr-contact-map__frame iframe { min-height: 380px; }
}


@media (max-width: 700px) {

    .ppr-contact-container { width: 90%; }

    .ppr-contact-hero { padding: 54px 0 48px; }

    .ppr-contact-hero__title {
        font-size: 38px;
        letter-spacing: -1.3px;
    }

    .ppr-contact-hero__text { font-size: 15px; }

    .ppr-contact-hero__image { height: 280px; }

    .ppr-contact-hero__info {
        flex-direction: column;
        gap: 16px;
    }

    .ppr-contact-desk,
    .ppr-contact-enquiry,
    .ppr-contact-next,
    .ppr-contact-map { padding: 58px 0; }

    .ppr-contact-head { margin-bottom: 27px; }

    .ppr-contact-head h2,
    .ppr-contact-enquiry__title h2,
    .ppr-contact-map__copy h2,
    .ppr-contact-next__heading h2 { font-size: 30px; }

    .ppr-contact-desk__image {
        height: 250px;
        min-height: 250px;
    }

    .ppr-contact-enquiry__layout {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .ppr-contact-enquiry__visual {
        height: 150px;
        min-height: 150px;
    }

    .ppr-contact-enquiry__visual img {
        height: 150px;
        min-height: 150px;
    }

    .ppr-contact-enquiry__label {
        inset-inline: 10px auto;
        bottom: 10px;
        padding: 9px 11px;
    }

    .ppr-contact-enquiry__label span { display: none; }

    .ppr-contact-form-wrap { padding: 20px 17px; }

    .ppr-contact-form__row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ppr-contact-form__group { margin-bottom: 16px; }

    .ppr-contact-form__bottom {
        align-items: stretch;
        flex-direction: column;
    }

    .ppr-contact-form__submit { width: 100%; }

    .ppr-contact-step {
        grid-template-columns: 45px 1fr;
        gap: 14px;
        padding: 20px 0;
    }

    .ppr-contact-step__arrow { display: none; }

    .ppr-contact-step__content { gap: 14px; }

    .ppr-contact-step__icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        font-size: 15px;
    }

    .ppr-contact-step__content h3 { font-size: 17px; }

    .ppr-contact-step__content p { font-size: 12px; }

    .ppr-contact-map__frame,
    .ppr-contact-map__frame iframe { min-height: 330px; }

    .ppr-contact-cta__inner {
        min-height: 390px;
        padding: 35px 25px;
    }

    .ppr-contact-cta__inner::before {
        background:
            linear-gradient(
                90deg,
                rgba(46, 41, 42, 0.94),
                rgba(46, 41, 42, 0.75)
            );
    }
}


@media (max-width: 420px) {

    .ppr-contact-container { width: 88%; }

    .ppr-contact-hero__title { font-size: 32px; }

    .ppr-contact-hero__image { height: 230px; }

    .ppr-contact-link { min-height: 91px; }

    .ppr-contact-link__title { font-size: 16px; }

    .ppr-contact-form-wrap { padding: 18px 14px; }

    .ppr-contact-cta__inner {
        min-height: 360px;
        padding: 30px 20px;
    }
}


/* =========================================================
   PAPERLY CONTACT — PREMIUM VISUAL UPGRADE
   Content/structure unchanged. Visual + motion only.
   ========================================================= */

.ppr-contact-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 84% 18%, rgba(169,103,104,.10), transparent 28%),
        radial-gradient(circle at 8% 88%, rgba(116,123,104,.08), transparent 24%),
        var(--ppr-warm-porcelain);
}

.ppr-contact-hero::before,
.ppr-contact-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
    filter: blur(1px);
}

.ppr-contact-hero::before {
    width: 260px;
    height: 260px;
    top: -135px;
    right: 7%;
    border: 1px solid rgba(169,103,104,.18);
    box-shadow:
        0 0 0 28px rgba(169,103,104,.035),
        0 0 0 58px rgba(169,103,104,.022);
    animation: pprContactOrbit 12s ease-in-out infinite;
}

.ppr-contact-hero::after {
    width: 12px;
    height: 12px;
    left: 7%;
    bottom: 18%;
    background: var(--ppr-dusty-rose);
    box-shadow:
        28px -18px 0 -3px var(--ppr-sage-leaf),
        58px 6px 0 -4px var(--ppr-warm-taupe);
    opacity: .72;
    animation: pprContactFloat 5s ease-in-out infinite;
}

.ppr-contact-hero__grid {
    position: relative;
    z-index: 1;
}

.ppr-contact-hero__copy {
    position: relative;
}

.ppr-contact-hero__copy::before {
    content: "";
    position: absolute;
    width: 82px;
    height: 3px;
    top: -27px;
    left: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--ppr-dusty-rose), var(--ppr-sage-leaf));
    transform-origin: left;
    animation: pprContactLineIn 900ms cubic-bezier(.2,.8,.2,1) both;
}

.ppr-contact-eyebrow {
    position: relative;
    transition: letter-spacing 350ms ease, transform 350ms ease;
}

.ppr-contact-eyebrow::before {
    content: "✦";
    margin-inline-end: 8px;
    display: inline-block;
    color: var(--ppr-sage-leaf);
    animation: pprContactSpark 2.4s ease-in-out infinite;
}

.ppr-contact-hero__title {
    text-wrap: balance;
}

.ppr-contact-hero__title span {
    display: inline-block;
    position: relative;
    animation: pprContactWordReveal 850ms 180ms cubic-bezier(.2,.8,.2,1) both;
}

.ppr-contact-hero__title span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 4%;
    bottom: -5px;
    height: 2px;
    border-radius: 99px;
    background: var(--ppr-dusty-rose);
    transform: scaleX(.15);
    transform-origin: left;
    animation: pprContactUnderline 900ms 650ms cubic-bezier(.2,.8,.2,1) forwards;
}

.ppr-contact-btn {
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(169,103,104,.18);
}

.ppr-contact-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.24) 48%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 650ms ease;
}

.ppr-contact-btn:hover::before {
    transform: translateX(120%);
}

.ppr-contact-btn i {
    transition: transform 350ms ease;
}

.ppr-contact-btn:hover i {
    transform: translateX(4px);
}

.ppr-contact-hero__info {
    position: relative;
}

.ppr-contact-hero__info-item {
    transition: transform 300ms ease, color 300ms ease;
}

.ppr-contact-hero__info-item:hover {
    transform: translateY(-3px);
    color: var(--ppr-dusty-rose-dark);
}

.ppr-contact-hero__info-item i {
    transition: transform 350ms ease;
}

.ppr-contact-hero__info-item:hover i {
    transform: scale(1.18) rotate(-6deg);
}

.ppr-contact-hero__image {
    position: relative;
    isolation: isolate;
    border-radius: 22px;
    box-shadow:
        0 22px 50px rgba(46,41,42,.13),
        0 0 0 1px rgba(169,103,104,.13);
    transform: rotate(1.2deg);
    transition: transform 650ms cubic-bezier(.2,.8,.2,1), box-shadow 650ms ease;
}

.ppr-contact-hero__image::before {
    content: "";
    position: absolute;
    inset: 12px;
    z-index: 2;
    border: 1px solid rgba(255,255,255,.46);
    border-radius: 14px;
    pointer-events: none;
    opacity: .9;
}

.ppr-contact-hero__image::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -35px;
    bottom: -45px;
    z-index: 3;
    border-radius: 50%;
    background: var(--ppr-dusty-rose);
    opacity: .16;
    filter: blur(2px);
    animation: pprContactFloat 6s ease-in-out infinite reverse;
}

.ppr-contact-hero__image img {
    transform: scale(1.035);
    animation: pprContactHeroImage 12s ease-in-out infinite alternate;
}

.ppr-contact-hero__image:hover {
    transform: rotate(0deg) translateY(-7px);
    box-shadow:
        0 30px 65px rgba(46,41,42,.19),
        0 0 0 1px rgba(169,103,104,.22);
}

.ppr-contact-hero__image:hover img {
    transform: scale(1.08);
    animation-play-state: paused;
}


/* More expressive scroll entrance without changing content. */
.ppr-contact-reveal {
    transition:
        opacity 750ms cubic-bezier(.2,.75,.2,1),
        transform 750ms cubic-bezier(.2,.75,.2,1);
}

.ppr-contact-hero__copy.ppr-contact-reveal {
    transition-delay: 80ms;
}

.ppr-contact-hero__image.ppr-contact-reveal {
    transition-delay: 190ms;
}

.ppr-contact-desk__image.ppr-contact-reveal {
    transition-delay: 80ms;
}

.ppr-contact-links.ppr-contact-reveal {
    transition-delay: 170ms;
}


/* Contact desk: subtle editorial movement. */
.ppr-contact-desk__image {
    position: relative;
    box-shadow: 0 18px 40px rgba(46,41,42,.09);
    transition: transform 600ms cubic-bezier(.2,.8,.2,1), box-shadow 600ms ease;
}

.ppr-contact-desk__image:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 52px rgba(46,41,42,.14);
}

.ppr-contact-link {
    position: relative;
    overflow: hidden;
}

.ppr-contact-link::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--ppr-dusty-rose), var(--ppr-sage-leaf));
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 350ms ease;
}

.ppr-contact-link:hover::before {
    transform: scaleY(1);
}

.ppr-contact-link__number {
    transition: transform 350ms ease;
}

.ppr-contact-link:hover .ppr-contact-link__number {
    transform: translateX(3px);
}

.ppr-contact-link__arrow {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ppr-warm-taupe);
    border-radius: 50%;
    transition:
        transform 350ms ease,
        background-color 350ms ease,
        border-color 350ms ease;
}

.ppr-contact-link:hover .ppr-contact-link__arrow {
    transform: translateX(5px) rotate(-5deg);
    background: var(--ppr-dusty-rose);
    border-color: var(--ppr-dusty-rose);
    color: #fff;
}


/* Section headings gain a small animated editorial accent. */
.ppr-contact-head,
.ppr-contact-enquiry__title,
.ppr-contact-next__heading,
.ppr-contact-map__copy {
    position: relative;
}

.ppr-contact-head::after,
.ppr-contact-enquiry__title::after,
.ppr-contact-next__heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -16px;
    width: 42px;
    height: 2px;
    border-radius: 99px;
    background: var(--ppr-dusty-rose);
    transform-origin: left;
    animation: pprContactLinePulse 3.2s ease-in-out infinite;
}


/* CTA receives a slow cinematic background motion. */
.ppr-contact-cta__inner {
    box-shadow: 0 24px 55px rgba(46,41,42,.13);
    transition: transform 600ms ease, box-shadow 600ms ease;
}

.ppr-contact-cta__inner:hover {
    transform: translateY(-5px);
    box-shadow: 0 32px 70px rgba(46,41,42,.18);
}

.ppr-contact-cta__bg {
    transform: scale(1.05);
    animation: pprContactCtaImage 15s ease-in-out infinite alternate;
}

.ppr-contact-cta__inner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.07) 48%, transparent 75%);
    transform: translateX(-110%);
    animation: pprContactSheen 8s 1.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pprContactOrbit {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-18px, 18px) rotate(14deg); }
}

@keyframes pprContactFloat {
    0%, 100% { transform: translate3d(0,0,0); }
    50% { transform: translate3d(0,-13px,0); }
}

@keyframes pprContactLineIn {
    from { opacity: 0; transform: scaleX(0); }
    to { opacity: 1; transform: scaleX(1); }
}

@keyframes pprContactWordReveal {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pprContactUnderline {
    to { transform: scaleX(1); }
}

@keyframes pprContactSpark {
    0%, 100% { transform: rotate(0) scale(1); opacity: .7; }
    50% { transform: rotate(18deg) scale(1.16); opacity: 1; }
}

@keyframes pprContactHeroImage {
    from { transform: scale(1.035) translate3d(0,0,0); }
    to { transform: scale(1.095) translate3d(-7px,-4px,0); }
}

@keyframes pprContactCtaImage {
    from { transform: scale(1.05) translate3d(0,0,0); }
    to { transform: scale(1.11) translate3d(-12px,-5px,0); }
}

@keyframes pprContactSheen {
    0%, 62%, 100% { transform: translateX(-110%); }
    76% { transform: translateX(110%); }
}

@keyframes pprContactLinePulse {
    0%, 100% { transform: scaleX(.7); opacity: .55; }
    50% { transform: scaleX(1); opacity: 1; }
}


/* Mobile: preserve the compact layout while retaining the visual treatment. */
@media (max-width: 900px) {
    .ppr-contact-hero__image {
        transform: rotate(.6deg);
    }

    .ppr-contact-hero__copy::before {
        top: -20px;
    }
}

@media (max-width: 700px) {
    .ppr-contact-hero {
        background:
            radial-gradient(circle at 90% 8%, rgba(169,103,104,.09), transparent 30%),
            var(--ppr-warm-porcelain);
    }

    .ppr-contact-hero__image {
        border-radius: 18px;
        transform: none;
    }

    .ppr-contact-hero__image::before {
        inset: 9px;
        border-radius: 11px;
    }

    .ppr-contact-head::after,
    .ppr-contact-enquiry__title::after,
    .ppr-contact-next__heading::after {
        bottom: -11px;
    }

    .ppr-contact-link__arrow {
        width: 32px;
        height: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ppr-contact-hero::before,
    .ppr-contact-hero::after,
    .ppr-contact-hero__copy::before,
    .ppr-contact-eyebrow::before,
    .ppr-contact-hero__title span,
    .ppr-contact-hero__title span::after,
    .ppr-contact-hero__image img,
    .ppr-contact-cta__bg,
    .ppr-contact-cta__inner::after,
    .ppr-contact-head::after,
    .ppr-contact-enquiry__title::after,
    .ppr-contact-next__heading::after {
        animation: none !important;
    }

    .ppr-contact-hero__image,
    .ppr-contact-hero__image:hover,
    .ppr-contact-desk__image:hover,
    .ppr-contact-cta__inner:hover {
        transform: none;
    }
}

/* =========================================================
   CONTACT PAGE — FLOATING ATMOSPHERE / DEPTH MOTION
   Visual-only enhancement. Content and layout remain unchanged.
   ========================================================= */

.ppr-contact-hero {
    --contact-float-a: var(--ppr-dusty-rose);
    --contact-float-b: var(--ppr-sage-leaf);
    --contact-float-c: var(--ppr-warm-taupe);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 76% 18%, rgba(169,103,104,.16), transparent 25%),
        radial-gradient(circle at 12% 72%, rgba(116,123,104,.13), transparent 24%),
        radial-gradient(circle at 50% 115%, rgba(211,194,171,.20), transparent 34%),
        var(--ppr-warm-porcelain);
}

.ppr-contact-hero::before {
    content: "";
    position: absolute;
    width: min(42vw, 620px);
    height: min(42vw, 620px);
    right: -15vw;
    top: -24vw;
    border: 1px solid rgba(169,103,104,.16);
    border-radius: 50%;
    box-shadow:
        0 0 0 34px rgba(169,103,104,.035),
        0 0 0 76px rgba(169,103,104,.022),
        0 0 0 124px rgba(116,123,104,.018);
    animation: contactMegaOrbit 18s linear infinite;
    pointer-events: none;
    z-index: -2;
}

.ppr-contact-hero::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    left: -210px;
    bottom: -245px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(116,123,104,.14), transparent 67%);
    animation: contactGlowDrift 10s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: -2;
}

.ppr-contact-floating-field {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.ppr-contact-float {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    opacity: var(--opacity);
    background: var(--float-color);
    box-shadow:
        0 0 18px var(--float-glow),
        0 0 42px rgba(255,255,255,.10);
    transform: translate3d(0,0,0) scale(.8);
    animation:
        contactFloat var(--duration) ease-in-out var(--delay) infinite alternate,
        contactPulse var(--pulse) ease-in-out var(--delay) infinite;
}

.ppr-contact-float::after {
    content: "";
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    background: rgba(255,255,255,.48);
    filter: blur(2px);
}

.ppr-contact-float.is-ring {
    background: transparent;
    border: 1px solid var(--float-color);
    box-shadow: 0 0 22px var(--float-glow);
}

.ppr-contact-float.is-ring::after {
    display: none;
}

.ppr-contact-float.is-square {
    border-radius: 5px;
    transform: rotate(45deg);
}

.ppr-contact-hero__grid {
    position: relative;
    z-index: 2;
}

.ppr-contact-hero__copy,
.ppr-contact-hero__image {
    will-change: transform;
}

.ppr-contact-hero__copy {
    animation: contactHeroLift 900ms cubic-bezier(.18,.8,.2,1) both;
}

.ppr-contact-hero__image {
    position: relative;
    overflow: visible;
    animation: contactHeroImageIn 1100ms cubic-bezier(.18,.8,.2,1) 120ms both;
}

.ppr-contact-hero__image::before {
    content: "";
    position: absolute;
    inset: -13px;
    border-radius: calc(var(--ppr-radius-medium, 18px) + 10px);
    border: 1px solid rgba(169,103,104,.22);
    transform: rotate(2.2deg);
    animation: contactFrameFloat 7s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

.ppr-contact-hero__image::after {
    content: "";
    position: absolute;
    width: 86px;
    height: 86px;
    right: -24px;
    bottom: -24px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.75), rgba(169,103,104,.30) 34%, transparent 70%);
    filter: blur(.2px);
    animation: contactOrb 5.5s ease-in-out infinite;
    pointer-events: none;
}

.ppr-contact-hero__image img {
    position: relative;
    border-radius: var(--ppr-radius-medium);
    box-shadow:
        0 24px 55px rgba(48,42,38,.14),
        0 0 0 1px rgba(255,255,255,.42);
    animation: contactImageBreath 9s ease-in-out infinite alternate;
}

.ppr-contact-hero__info-item {
    transition: transform 300ms ease, color 300ms ease;
}

.ppr-contact-hero__info-item:hover {
    transform: translateY(-3px);
}

.ppr-contact-hero__info-item i {
    animation: contactIconFloat 3.2s ease-in-out infinite;
}

.ppr-contact-desk,
.ppr-contact-enquiry,
.ppr-contact-location {
    position: relative;
}

.ppr-contact-link {
    position: relative;
    overflow: hidden;
}

.ppr-contact-link::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    right: -55px;
    top: -55px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(169,103,104,.16), transparent 70%);
    transform: scale(.4);
    transition: transform 500ms ease;
}

.ppr-contact-link:hover::after {
    transform: scale(1.5);
}

@keyframes contactMegaOrbit {
    from { transform: rotate(0deg) translateX(0); }
    to { transform: rotate(360deg) translateX(12px); }
}

@keyframes contactGlowDrift {
    from { transform: translate3d(0,0,0) scale(.92); }
    to { transform: translate3d(70px,-35px,0) scale(1.14); }
}

@keyframes contactFloat {
    0% { transform: translate3d(-8px, 14px, 0) rotate(0deg) scale(.82); }
    50% { transform: translate3d(12px, -24px, 0) rotate(90deg) scale(1); }
    100% { transform: translate3d(-18px, -48px, 0) rotate(180deg) scale(.9); }
}

@keyframes contactPulse {
    0%, 100% { filter: brightness(.92); }
    50% { filter: brightness(1.25); }
}

@keyframes contactHeroLift {
    from { opacity: 0; transform: translate3d(-18px, 24px, 0); }
    to { opacity: 1; transform: translate3d(0,0,0); }
}

@keyframes contactHeroImageIn {
    from { opacity: 0; transform: translate3d(24px, 20px, 0) rotate(1.5deg) scale(.96); }
    to { opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); }
}

@keyframes contactFrameFloat {
    0%,100% { transform: rotate(2.2deg) translate3d(0,0,0); }
    50% { transform: rotate(-1.2deg) translate3d(-7px,8px,0); }
}

@keyframes contactOrb {
    0%,100% { transform: translate3d(0,0,0) scale(.88); }
    50% { transform: translate3d(-12px,-17px,0) scale(1.08); }
}

@keyframes contactImageBreath {
    from { transform: scale(1); }
    to { transform: scale(1.025); }
}

@keyframes contactIconFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
    .ppr-contact-hero::before,
    .ppr-contact-hero::after,
    .ppr-contact-float,
    .ppr-contact-hero__copy,
    .ppr-contact-hero__image,
    .ppr-contact-hero__image::before,
    .ppr-contact-hero__image::after,
    .ppr-contact-hero__image img,
    .ppr-contact-hero__info-item i {
        animation: none !important;
    }
}


/* =========================================================
   PAPERLY — CORPORATE ACCOUNTS PAGE
   Hero / Volume / Approval / Restock / Showcase /
   Branches / Customisation / Quote
   ========================================================= */

.corp-page{
  --c-bg:#F7F2EC;--c-surface:#EFE5DA;--c-ink:#2E292A;--c-rose:#A96768;
  --c-rose-dark:#8F5558;--c-sage:#747B68;--c-gold:#B79A67;--c-taupe:#8D7D73;
  --c-line:rgba(46,41,42,.14);
  background:var(--c-bg);color:var(--c-ink);
  font-family:Manrope,system-ui,sans-serif;overflow:hidden;
}
.corp-page *{box-sizing:border-box}
.corp-page a{color:inherit}
.corp-wrap{width:min(1240px,90%);margin-inline:auto}
.corp-page section{padding:58px 0}
.corp-eyebrow{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--c-eyebrow,var(--c-rose-dark));margin-bottom:9px}
.corp-page h1,.corp-page h2,.corp-page h3,.corp-page p{margin-top:0}
.corp-page h1{font-size:clamp(34px,5vw,60px);line-height:1.02;letter-spacing:-2px;color:var(--c-ink)}
.corp-page h2{font-size:clamp(27px,3.4vw,42px);line-height:1.08;letter-spacing:-1.2px;margin-bottom:10px;color:var(--c-ink)}
.corp-page h3{font-size:20px;line-height:1.2;color:var(--c-ink)}
.corp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--c-rose);background:var(--c-rose);color:#fff!important;text-decoration:none;padding:12px 18px;border-radius:8px;font-size:14px;font-weight:700;transition:.25s}
.corp-btn:hover{background:var(--c-rose-dark);transform:translateY(-2px)}
.corp-btn.alt{background:transparent;color:var(--c-ink)!important;border-color:var(--c-ink)}
.corp-btn.alt:hover{background:var(--c-ink);color:#fff!important}
.corp-reveal{opacity:1;transform:none}
@keyframes corpUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
 .corp-page .corp-reveal[data-animate]{opacity:0;transform:translateY(22px)}
 .corp-page .corp-reveal[data-animate].in{animation:corpUp .7s cubic-bezier(.2,.75,.2,1) both}
}

/* ---------- 01 HERO ---------- */
.corp-hero{padding:34px 0 54px!important}
.corp-hero-shell{position:relative;min-height:470px;border-radius:18px;overflow:hidden;color:#fff}
.corp-hero-shell:before{content:"";position:absolute;inset:14px;border:1px solid rgba(247,242,236,.25);border-radius:13px;pointer-events:none}
.corp-hero-grid{display:grid;grid-template-columns:1fr .9fr;gap:32px;align-items:center;min-height:470px;padding:46px}
.corp-hero-copy{position:relative;z-index:3}
.corp-hero-copy .corp-eyebrow{color:#F4D8D8}
.corp-hero-copy h1{color:#fff;max-width:700px}
.corp-hero-copy>p{max-width:650px;color:#F7E9E7;margin:18px 0 22px;font-size:16px}
.corp-actions{display:flex;gap:10px;flex-wrap:wrap}
.corp-hero .corp-btn.alt{color:#fff!important;border-color:#fff}
.corp-hero .corp-btn.alt:hover{background:#fff;color:#302628!important}
.corp-proof{display:flex;gap:24px;flex-wrap:wrap;margin-top:25px;padding-top:16px;border-top:1px solid rgba(255,255,255,.24)}
.corp-proof b{display:block;font-size:19px}
.corp-proof span{font-size:12px;color:#F2DEDC}

.corp-hero-new{
  min-height:520px!important;
  background:
    radial-gradient(circle at 72% 18%,rgba(247,242,236,.18),transparent 20%),
    radial-gradient(circle at 92% 88%,rgba(183,154,103,.22),transparent 24%),
    linear-gradient(135deg,#211E1F 0%,#493236 42%,#8F5558 78%,#A96768 100%)!important;
}
.corp-hero-new:after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 48%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 48%,#000 100%);
  pointer-events:none;
}
.corp-hero-new .corp-hero-grid{min-height:500px;position:relative;z-index:2}
.corp-hero-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;font-size:10px;font-weight:700;letter-spacing:1.8px;color:#F4D8D8;border-inline-start:2px solid #B79A67;padding-inline-start:10px}
.corp-live-dot{width:7px;height:7px;border-radius:50%;background:#D8B57A;box-shadow:0 0 0 0 rgba(216,181,122,.65);animation:corpHeroPulse 1.8s infinite}
.corp-hero-new h1{font-size:clamp(36px,5vw,64px)!important;letter-spacing:-2px!important}
.corp-hero-new h1 em{font-style:normal;color:#F2C7C9}
.corp-hero-new .corp-actions .corp-btn i{margin-inline-start:7px;transition:transform .25s}
.corp-hero-new .corp-actions .corp-btn:hover i{transform:translateX(5px)}

.corp-hero-stage{position:relative;height:430px;min-width:0;isolation:isolate}
.hero-grid-lines{position:absolute;inset:18px;border:1px solid rgba(247,242,236,.16);border-radius:22px;overflow:hidden}
.hero-grid-lines:before,.hero-grid-lines:after{content:"";position:absolute;background:rgba(247,242,236,.12)}
.hero-grid-lines:before{width:1px;height:100%;left:50%}
.hero-grid-lines:after{height:1px;width:100%;top:50%}
.hero-orbit{position:absolute;border:1px dashed rgba(247,242,236,.25);border-radius:50%;transform:translate(-50%,-50%) rotate(-18deg);left:54%;top:52%}
.orbit-one{width:355px;height:205px;animation:corpHeroOrbit 12s linear infinite}
.orbit-two{width:285px;height:165px;animation:corpHeroOrbit 9s linear infinite reverse}
.hero-paper-stack{position:absolute;left:22%;top:17%;width:170px;height:210px;animation:corpHeroFloat 4.8s ease-in-out infinite;z-index:5}
.hero-sheet{position:absolute;inset:0;border-radius:5px;box-shadow:0 20px 30px rgba(0,0,0,.25)}
.sheet-back{background:#B79A67;transform:rotate(-11deg) translate(-8px,8px)}
.sheet-mid{background:#EFE5DA;transform:rotate(6deg) translate(6px,4px)}
.sheet-front{background:#F7F2EC;padding:22px 18px;transform:rotate(-2deg);color:#2E292A}
.sheet-title{font-size:13px;font-weight:800;letter-spacing:2px;display:block;color:#A96768}
.sheet-line{height:4px;background:#B9AAA0;width:88%;display:block;margin-top:18px}
.sheet-line.short{width:58%;margin-top:8px}
.sheet-total{display:flex;justify-content:space-between;align-items:end;font-size:8px;letter-spacing:1px;margin-top:42px;color:#747B68}
.sheet-total b{font-size:17px;color:#2E292A}
.hero-check{position:absolute;right:-14px;top:15px;width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#747B68;color:#fff;font-weight:800;border:3px solid #F7F2EC;box-shadow:0 8px 18px rgba(0,0,0,.25);animation:corpHeroCheck .9s 1.2s both}
.hero-notebook{position:absolute;right:16%;top:15%;width:112px;height:148px;border-radius:8px;background:#2E292A;transform:rotate(9deg);box-shadow:0 20px 30px rgba(0,0,0,.28);z-index:4;animation:corpHeroNotebook 5.2s ease-in-out infinite 1s}
.notebook-band{position:absolute;left:0;top:0;width:12px;height:100%;background:#747B68;border-radius:8px 0 0 8px}
.notebook-logo{position:absolute;top:38px;left:33px;width:43px;height:43px;border:1px solid #B79A67;border-radius:50%;display:grid;place-items:center;color:#B79A67;font-size:20px;font-weight:700}
.notebook-name{position:absolute;left:25px;bottom:20px;color:#F7F2EC;font-size:7px;line-height:1.5;letter-spacing:1.4px}
.hero-box{position:absolute;right:9%;bottom:20%;width:150px;height:112px;background:#B79A67;clip-path:polygon(8% 18%,50% 0,92% 18%,92% 82%,50% 100%,8% 82%);filter:drop-shadow(0 20px 22px rgba(0,0,0,.28));z-index:6;animation:corpHeroBox 5.5s ease-in-out infinite .4s}
.box-tape{position:absolute;left:48%;top:5%;height:90%;width:8px;background:#8F5558}
.box-label{position:absolute;left:38px;top:40px;font-size:8px;line-height:1.5;letter-spacing:1.2px;color:#2E292A}
.box-label b{font-size:11px}
.box-flap{position:absolute;left:50%;top:14%;width:1px;height:70%;background:#2E292A}
.hero-pen{position:absolute;left:9%;bottom:15%;width:150px;height:18px;background:#F7F2EC;border-radius:20px;transform:rotate(-31deg);box-shadow:0 12px 18px rgba(0,0,0,.25);z-index:7;animation:corpHeroWrite 4.6s ease-in-out infinite}
.hero-pen:before{content:"";position:absolute;left:-19px;top:3px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:22px solid #B79A67}
.hero-pen:after{content:"";position:absolute;right:0;top:0;width:28px;height:18px;border-radius:0 20px 20px 0;background:#2E292A}
.hero-route{position:absolute;left:7%;bottom:32%;width:310px;height:70px;z-index:3}
.route-line{position:absolute;left:8px;right:15px;top:34px;border-top:2px dashed rgba(247,242,236,.5)}
.route-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:#D6B77C;top:29px;z-index:2}
.route-dot.d1{left:0}.route-dot.d2{left:47%}.route-dot.d3{right:4%}
.route-arrow{position:absolute;right:-1px;top:20px;color:#F7F2EC;font-size:22px;animation:corpHeroArrow 1.2s ease-in-out infinite}
.hero-delivery-tag{position:absolute;right:4%;bottom:6%;display:flex;gap:9px;align-items:center;padding:10px 13px;background:rgba(33,30,31,.74);border:1px solid rgba(247,242,236,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:10px;color:#F7F2EC;z-index:8;animation:corpHeroTag 3.5s ease-in-out infinite}
.hero-delivery-tag i{color:#D6B77C}
.hero-delivery-tag b{display:block;font-size:9px;letter-spacing:1.2px}
.hero-delivery-tag small{display:block;font-size:8px;color:#D9CDC0;margin-top:2px}
.hero-note{position:absolute;padding:8px 10px;background:#F7F2EC;color:#2E292A;font-size:8px;line-height:1.4;letter-spacing:1px;box-shadow:0 8px 18px rgba(0,0,0,.18);z-index:9;animation:corpHeroNote 4s ease-in-out infinite}
.note-one{right:5%;top:49%;transform:rotate(4deg)}
.note-two{left:3%;top:7%;transform:rotate(-5deg);animation-delay:1.2s}
.hero-stamp{position:absolute;right:31%;bottom:11%;width:100px;height:100px;border:3px solid #D8B57A;color:#D8B57A;border-radius:50%;display:grid;place-items:center;text-align:center;font-weight:800;font-size:11px;line-height:1.25;letter-spacing:1.2px;transform:rotate(-14deg);z-index:10;opacity:.9;animation:corpHeroStamp 4.5s ease-in-out infinite 1.2s}
.hero-stamp small{font-size:6px;letter-spacing:.8px}
.hero-floating-items{position:absolute;inset:0;pointer-events:none}
.hero-mini{position:absolute;display:block}
.mini-pen{right:34%;top:4%;width:52px;height:7px;background:#F7F2EC;border-radius:8px;transform:rotate(35deg);animation:corpHeroMini 3.8s ease-in-out infinite}
.mini-paper{left:10%;top:42%;width:35px;height:44px;background:#F7F2EC;border:1px solid #D9CDC0;transform:rotate(-17deg);animation:corpHeroMini 4.5s ease-in-out infinite .8s}
.mini-clip{right:18%;top:61%;font-size:26px;color:#B79A67;animation:corpHeroMini 3.2s ease-in-out infinite 1.5s}
.hero-bottom-strip{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;gap:18px;min-height:58px;padding:10px 20px;border-top:1px solid rgba(247,242,236,.18);background:rgba(33,30,31,.3);color:#F7F2EC;font-size:10px;letter-spacing:1.3px;font-weight:700}
.hero-bottom-strip span{display:inline-flex;align-items:center;gap:7px}
.hero-bottom-strip i{color:#D6B77C}
.hero-bottom-strip b{color:#D6B77C;font-size:15px}

@keyframes corpHeroPulse{70%{box-shadow:0 0 0 7px rgba(216,181,122,0)}100%{box-shadow:0 0 0 0 rgba(216,181,122,0)}}
@keyframes corpHeroOrbit{to{transform:translate(-50%,-50%) rotate(342deg)}}
@keyframes corpHeroFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@keyframes corpHeroNotebook{0%,100%{transform:translateY(0) rotate(9deg)}50%{transform:translateY(-14px) rotate(5deg)}}
@keyframes corpHeroBox{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(-2deg)}}
@keyframes corpHeroWrite{0%,100%{transform:translate(-4px,0) rotate(-31deg)}50%{transform:translate(20px,-8px) rotate(-27deg)}}
@keyframes corpHeroArrow{50%{transform:translateX(7px)}}
@keyframes corpHeroTag{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes corpHeroNote{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(2deg) translateY(-7px)}}
@keyframes corpHeroStamp{0%,100%{transform:rotate(-14deg) scale(1)}50%{transform:rotate(-9deg) scale(1.05)}}
@keyframes corpHeroCheck{from{opacity:0;transform:scale(.4) rotate(-25deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes corpHeroMini{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(8deg)}}

/* ---------- 02 VOLUME / RECEIPT ---------- */
.corp-receipt-section{background:linear-gradient(180deg,var(--c-bg),#EFE5DA 55%,var(--c-bg));overflow:hidden}
.corp-receipt-head{display:grid;grid-template-columns:1fr .8fr;gap:30px;align-items:end;margin-bottom:22px}
.corp-receipt-head p{color:var(--c-taupe);max-width:650px}
.corp-receipt-lab{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center}
.corp-buy-table{position:relative;background:#FBF6EE;color:#2E292A;border:1px solid #D8C9BD;padding:22px 22px 18px;box-shadow:0 14px 35px rgba(46,41,42,.09);transform:rotate(-1deg);overflow:hidden}
.corp-buy-table:before{content:"PURCHASING DESK · BUSINESS ACCOUNT";display:block;font-size:10px;letter-spacing:1.7px;font-weight:800;color:#8F5558;border-bottom:1px dashed #B9AAA0;padding-bottom:10px;margin-bottom:10px}
.corp-buy-row{display:grid;grid-template-columns:1fr 80px 90px;gap:10px;padding:10px 0;border-bottom:1px dashed #D8C9BD;font-size:12px;align-items:center}
.corp-buy-row strong{text-align:end}
.corp-buy-row small{color:#7A6A60}
.corp-buy-total{display:flex;justify-content:space-between;padding-top:13px;font-weight:800;font-size:14px}
.corp-receipt-pencil{position:absolute;width:130px;height:8px;background:#302628;border-radius:5px;right:8%;top:4%;transform:rotate(18deg);animation:corpReceiptWrite 2.6s ease-in-out infinite}
.corp-receipt-pencil:after{content:"";position:absolute;right:-9px;top:-2px;border-left:12px solid #B79A67;border-top:6px solid transparent;border-bottom:6px solid transparent}
@keyframes corpReceiptWrite{0%,100%{transform:translate(0,0) rotate(18deg)}50%{transform:translate(-45px,95px) rotate(14deg)}}

.corp-discount-stage{position:relative;min-height:350px;padding:28px 24px 20px;background:#302628;color:#FBF6EE;overflow:hidden;border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.corp-discount-stage:before{content:"SAVE AS YOU SCALE";position:absolute;right:-28px;top:20px;transform:rotate(90deg);font-size:10px;letter-spacing:2px;color:#C9A96E}
.corp-discount-stage:after{content:"SAVE";position:absolute;right:12%;top:55px;font-size:42px;font-weight:800;color:rgba(169,103,104,.12);transform:rotate(9deg);pointer-events:none}
.corp-discount-stage .corp-eyebrow{color:#D99A9C}
.corp-spend-value{font-size:52px;line-height:1;font-weight:800;color:#F7F2EC;margin:8px 0 5px}
.corp-spend-label{font-size:12px;color:#D8C9BD}
.corp-spend-slider{appearance:none;-webkit-appearance:none;width:100%;height:2px;margin:26px 0 20px;background:#5B4E50;outline:0;accent-color:#A96768}
.corp-spend-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#A96768;border:4px solid #FBF6EE;box-shadow:0 0 0 1px #A96768;cursor:grab}
.corp-spend-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#A96768;border:4px solid #FBF6EE;box-shadow:0 0 0 1px #A96768;cursor:grab}
.corp-discount-reveal{display:flex;align-items:end;justify-content:space-between;border-top:1px solid rgba(255,255,255,.18);padding-top:15px}
.corp-discount-percent{font-size:38px;font-weight:800;color:#D99A9C}
.corp-discount-reveal small{display:block;color:#D8C9BD;font-size:11px}
.corp-receipt-note{margin-top:16px;font-size:11px;color:#D8C9BD;line-height:1.7}
.corp-receipt-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}
.corp-receipt-tags span{font-size:10px;border-bottom:1px solid #B79A67;padding-bottom:3px;color:#F7F2EC}
.corp-scribble{position:absolute;border:1px solid rgba(201,169,110,.5);width:120px;height:48px;right:20px;bottom:18px;transform:rotate(-5deg);border-radius:50%;animation:corpScribble 2s infinite}
@keyframes corpScribble{50%{transform:rotate(-8deg) scale(1.05)}}

/* ---------- 03 APPROVAL DESK ---------- */
.corp-approval-section{background:#EFE5DA;overflow:hidden}
.corp-approval-head{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:24px}
.corp-approval-head p{max-width:600px;color:var(--c-taupe)}
.corp-approval-desk{position:relative;min-height:330px;background:#D7C5B8;border:1px solid #C4B0A2;overflow:hidden;padding:28px}
.corp-approval-desk:after{content:"PURCHASING APPROVAL DESK";position:absolute;right:18px;top:15px;font-size:10px;letter-spacing:1.5px;color:#6E5E56;font-weight:800}
.corp-folder{position:absolute;width:190px;height:235px;background:#FBF6EE;border:1px solid #CFC0B5;box-shadow:0 13px 22px rgba(46,41,42,.12);padding:18px;transform:rotate(-7deg);left:7%;top:55px;animation:corpFolderFloat 4s ease-in-out infinite}
.corp-folder:before{content:"SUPPLY REQUEST";font-size:10px;font-weight:800;letter-spacing:1.3px;color:#8F5558}
.corp-folder-lines{margin-top:24px;display:grid;gap:13px}
.corp-folder-lines i{display:block;border-top:1px solid #B9AAA0}
.corp-folder-sign{position:absolute;bottom:18px;left:18px;font-size:10px;color:#7A6A60}
@keyframes corpFolderFloat{50%{transform:translateY(-9px) rotate(-4deg)}}
.corp-approval-stamp{position:absolute;left:24%;top:145px;width:130px;height:62px;border:3px solid #8F5558;color:#8F5558;display:grid;place-items:center;font-size:15px;font-weight:800;letter-spacing:2px;transform:rotate(-13deg) scale(.5);opacity:0;animation:corpStampDrop 3.6s infinite;z-index:3}
@keyframes corpStampDrop{0%,35%{opacity:0;transform:rotate(-13deg) scale(.5)}45%,75%{opacity:1;transform:rotate(-13deg) scale(1)}90%,100%{opacity:0;transform:rotate(-13deg) scale(1.08)}}
.corp-approval-steps{position:absolute;right:6%;left:43%;top:58px;bottom:35px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:center}
.corp-approval-step{position:relative;text-align:center;min-height:165px;padding:17px 10px;background:rgba(251,246,238,.82);border-bottom:4px solid #B79A67;display:flex;flex-direction:column;justify-content:center;transition:.3s}
.corp-approval-step:nth-child(2){transform:translateY(18px)}
.corp-approval-step:nth-child(3){transform:translateY(-7px)}
.corp-approval-step:nth-child(4){transform:translateY(13px)}
.corp-approval-step:hover{transform:translateY(-5px) rotate(-1deg)}
.corp-approval-step b{font-size:27px;color:#A96768}
.corp-approval-step strong{font-size:12px;margin:8px 0 4px}
.corp-approval-step span{font-size:10px;color:#7A6A60;line-height:1.5}
.corp-approval-arrow{position:absolute;top:50%;right:-13px;font-size:18px;font-style:normal;color:#A96768;z-index:3}
.corp-approval-note{position:absolute;left:6%;bottom:22px;font-size:11px;font-weight:700;color:#5E514B;transform:rotate(-2deg)}
.corp-approval-note:before{content:"↗";font-size:19px;color:#A96768;margin-right:5px}

/* ---------- 04 RESTOCK BOARD ---------- */
.corp-restock-section{background:linear-gradient(180deg,#F7F2EC 0%,#EFE5DA 100%);overflow:hidden}
.corp-restock-head{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:end;margin-bottom:24px}
.corp-restock-head p{max-width:620px;color:var(--c-taupe)}
.corp-restock-board{display:grid;grid-template-columns:.72fr 1.28fr;gap:18px;min-height:410px}
.corp-stock-side{background:#302628;color:#F7F2EC;padding:24px;display:grid;gap:10px;align-content:start;border-inline-start:6px solid #A96768}
.corp-stock-label{display:flex;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:1.4px;font-weight:800;margin-bottom:5px;color:#F7F2EC}
.corp-stock-label span{color:#D99A9C}
.corp-stock-label i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#8FB18A;box-shadow:0 0 0 5px rgba(143,177,138,.12);margin-inline-end:5px;animation:corpStockBlink 1.4s infinite}
@keyframes corpStockBlink{50%{opacity:.35;transform:scale(.75)}}
.corp-stock-item{width:100%;text-align:start;color:#F7F2EC;background:rgba(247,242,236,.055);border:1px solid rgba(247,242,236,.13);padding:13px 13px 12px;transition:.25s;position:relative}
.corp-stock-item:hover,.corp-stock-item.active{background:rgba(169,103,104,.18);border-color:#A96768;transform:translateX(4px)}
.corp-stock-item b{display:block;font-size:11px;letter-spacing:.8px}
.corp-stock-item small{display:block;margin-top:6px;color:#CDBFBA;font-size:10px}
.corp-stock-meter{display:block;height:5px;background:rgba(247,242,236,.13);margin-top:9px;overflow:hidden}
.corp-stock-meter i{display:block;height:100%;background:#B79A67;transition:width .45s ease}
.corp-restock-preview{position:relative;background:#D7C5B8;min-height:410px;padding:28px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.corp-restock-preview:before{content:"OFFICE SUPPLY CONTROL";position:absolute;right:22px;top:16px;font-size:9px;letter-spacing:1.7px;color:#6E5E56;font-weight:800}
.corp-restock-paper{position:relative;z-index:2;background:#FBF6EE;color:#2E292A;border:1px solid #CBB8AA;box-shadow:12px 16px 0 rgba(46,41,42,.09);padding:23px;max-width:620px;width:100%;margin:auto;transform:rotate(-1deg)}
.corp-restock-paper-top{display:flex;justify-content:space-between;border-bottom:1px dashed #B9AAA0;padding-bottom:10px;color:#8F5558;font-size:10px;font-weight:800;letter-spacing:1px}
.corp-restock-product{display:flex;align-items:center;gap:15px;padding:25px 0 19px}
.corp-restock-icon{width:64px;height:64px;flex:none;display:grid;place-items:center;background:#A96768;color:#F7F2EC;font-size:27px;font-weight:800;box-shadow:6px 6px 0 #B79A67;transition:.3s}
.corp-restock-product strong{display:block;font-size:25px;line-height:1.1}
.corp-restock-product small{display:block;font-size:9px;letter-spacing:1.3px;color:#8F5558;font-weight:800;margin-bottom:5px}
.corp-restock-product span{display:block;color:#75665E;font-size:11px;margin-top:5px}
.corp-restock-price{display:flex;justify-content:space-between;align-items:end;border-top:1px solid #D8C9BD;padding-top:15px}
.corp-restock-price span{font-size:9px;letter-spacing:1px;color:#75665E}
.corp-restock-price strong{font-size:25px}
.corp-restock-progress{height:7px;background:#E1D5CB;margin:15px 0;overflow:hidden}
.corp-restock-progress span{display:block;height:100%;background:#747B68;transition:width .5s ease}
.corp-restock-action{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px dashed #CDBDB1;padding-top:13px}
.corp-restock-action span{font-size:10px;color:#6E5E56}
.corp-restock-action button{background:#A96768;color:#fff;padding:11px 13px;font-size:10px;font-weight:800;letter-spacing:.4px;transition:.25s}
.corp-restock-action button:hover{background:#8F5558;transform:translateY(-2px)}
.corp-restock-orbit{position:absolute;bottom:18px;right:22px;display:flex;gap:7px;align-items:center;font-size:9px;letter-spacing:1.2px;font-weight:800;color:#6E5E56}
.corp-restock-orbit b{color:#A96768;font-size:14px}

/* ---------- 05 BUSINESS DESK SHOWCASE ---------- */
.corp-business-showcase-section{background:var(--ppr-warm-porcelain);overflow:hidden}
.corp-showcase-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.7fr);gap:60px;align-items:end;margin-bottom:38px}
.corp-showcase-head h2{max-width:720px;margin-top:8px;font-size:40px;line-height:1.12;letter-spacing:-1px}
.corp-showcase-head p{max-width:460px;color:rgba(46,41,42,.68);font-size:15px;line-height:1.75}
.corp-showcase-scene{position:relative;min-height:510px;border:1px solid rgba(185,170,160,.42);background:#e7ddd3;overflow:hidden}
.corp-showcase-photo{position:absolute;overflow:hidden;box-shadow:0 20px 45px rgba(46,41,42,.14);border:7px solid rgba(247,242,236,.92);background:#ddd}
.corp-showcase-photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s ease}
.corp-showcase-photo:hover img{transform:scale(1.06);filter:saturate(1.08)}
.photo-main{left:7%;top:54px;width:52%;height:370px;transform:rotate(-2deg)}
.photo-small{width:28%;height:205px}
.photo-one{right:7%;top:38px;transform:rotate(3deg)}
.photo-two{right:12%;bottom:36px;transform:rotate(-3deg)}
.corp-showcase-photo span{position:absolute;left:12px;bottom:10px;padding:6px 9px;background:rgba(46,41,42,.82);color:#fff8ec;font-size:10px;font-weight:700;letter-spacing:1px}
.corp-showcase-note{position:absolute;z-index:5;display:flex;flex-direction:column;gap:2px;padding:12px 15px;background:#f7f2ec;border-left:3px solid #a96768;box-shadow:0 14px 30px rgba(46,41,42,.13);animation:corpShowcaseFloat 4.2s ease-in-out infinite}
.corp-showcase-note b{font-size:10px;letter-spacing:1.3px;color:#a96768}
.corp-showcase-note span{font-size:11px;color:#514849}
.note-a{left:46%;top:25px}
.note-b{right:3%;bottom:22px;animation-delay:-1.8s}
.corp-showcase-scan{position:absolute;left:58%;bottom:31px;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;text-align:center;background:#747b68;color:#f7f2ec;box-shadow:0 14px 35px rgba(46,41,42,.2);animation:corpShowcaseScan 2.8s ease-in-out infinite;z-index:6}
.corp-showcase-scan span{position:absolute;width:72px;height:72px;border:1px solid rgba(255,255,255,.45);border-radius:50%}
.corp-showcase-scan b{font-size:10px;line-height:1.25;letter-spacing:1px}
.corp-showcase-path{position:absolute;left:25%;bottom:50px;width:37%;height:70px;z-index:4;pointer-events:none}
.corp-showcase-path:before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed rgba(169,103,104,.55)}
.corp-showcase-path i{position:absolute;width:8px;height:8px;border-radius:50%;background:#a96768;top:calc(50% - 4px);animation:corpShowcaseDot 2.8s linear infinite}
.corp-showcase-path i:nth-child(1){left:0}
.corp-showcase-path i:nth-child(2){left:50%;animation-delay:.9s}
.corp-showcase-path i:nth-child(3){right:0;animation-delay:1.8s}
.corp-showcase-path b{position:absolute;right:-4px;top:31%;font-size:25px;color:#a96768}
.corp-showcase-bottom{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(185,170,160,.45);border-top:0;background:#efe5da}
.corp-showcase-bottom>div{padding:19px 20px;border-inline-end:1px solid rgba(185,170,160,.42)}
.corp-showcase-bottom>div:last-child{border-inline-end:0}
.corp-showcase-bottom strong{display:block;font-size:11px;letter-spacing:1.1px;color:#a96768;margin-bottom:4px}
.corp-showcase-bottom span{font-size:12px;color:rgba(46,41,42,.67)}
@keyframes corpShowcaseFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(1deg)}}
@keyframes corpShowcaseScan{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.06) rotate(4deg)}}
@keyframes corpShowcaseDot{0%{transform:translateX(0);opacity:.3}45%{opacity:1}100%{transform:translateX(100%);opacity:.3}}

/* ---------- 06 BRANCH SORTING WALL ---------- */
.corp-branch-section{background:var(--c-bg);overflow:hidden}
.corp-branch-head{display:grid;grid-template-columns:.75fr 1.25fr;gap:30px;align-items:end;margin-bottom:20px}
.corp-branch-head p{color:var(--c-taupe);max-width:650px}
.corp-branch-wall{position:relative;min-height:350px;background:#211E1F;color:#fff;padding:25px 28px;overflow:hidden;border-left:7px solid #A96768}
.corp-branch-wall:before{content:"SORTING FLOOR";position:absolute;top:15px;right:20px;color:#B79A67;font-size:10px;letter-spacing:2px;font-weight:800}
.corp-branch-shelf{position:absolute;left:4%;right:4%;height:1px;background:rgba(247,242,236,.2)}
.shelf-1{top:105px}.shelf-2{top:205px}.shelf-3{top:305px}
.corp-branch-package{position:absolute;width:112px;height:70px;background:#C9A98A;border:2px solid #2E292A;box-shadow:0 7px 0 #8E7768;padding:10px;color:#2E292A;font-size:9px;font-weight:800;transition:.3s}
.corp-branch-package:after{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:2px solid rgba(46,41,42,.35)}
.pkg-1{left:9%;top:39px;animation:corpPkg1 6s ease-in-out infinite}
.pkg-2{left:38%;top:139px;animation:corpPkg2 6s ease-in-out infinite 1s}
.pkg-3{left:68%;top:239px;animation:corpPkg3 6s ease-in-out infinite 2s}
@keyframes corpPkg1{0%,100%{transform:translateX(0) rotate(-2deg)}50%{transform:translateX(95px) rotate(2deg)}}
@keyframes corpPkg2{0%,100%{transform:translateX(0) rotate(2deg)}50%{transform:translateX(-75px) rotate(-2deg)}}
@keyframes corpPkg3{0%,100%{transform:translateX(0) rotate(-2deg)}50%{transform:translateX(70px) rotate(2deg)}}
.corp-branch-destinations{position:absolute;right:5%;top:45px;width:180px;display:grid;gap:12px}
.corp-destination{border:1px dashed rgba(247,242,236,.35);padding:10px 12px;background:rgba(247,242,236,.05)}
.corp-destination strong{display:block;color:#F7F2EC;font-size:11px}
.corp-destination span{font-size:10px;color:#C8BBB2}
.corp-branch-message{position:absolute;left:28px;bottom:17px;color:#DCCBC7;font-size:11px;letter-spacing:.5px}
.corp-branch-message b{color:#F7F2EC}
.corp-branch-line{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:15px;font-size:11px;color:var(--c-taupe);font-weight:700}
.corp-branch-line i{font-style:normal;color:#A96768;font-size:16px}

/* ---------- 07 CUSTOMISATION STUDIO ---------- */
.corp-custom-section{background:linear-gradient(135deg,#F7F2EC,#EFE5DA)}
.corp-custom-lively{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:center}
.corp-custom-live h2{max-width:620px}
.corp-custom-live>p{color:var(--c-taupe);max-width:560px}
.corp-name-row{margin-top:22px;border-bottom:2px solid var(--c-ink);display:flex;gap:14px;align-items:center}
.corp-name-row label{font-size:10px;text-transform:uppercase;letter-spacing:1.3px;color:var(--c-taupe);white-space:nowrap}
.corp-name-row input{border:0;background:transparent;outline:0;font:700 20px Manrope,sans-serif;color:var(--c-ink);width:100%;padding:10px 0}
.corp-color-row{display:flex;align-items:center;gap:10px;margin-top:18px}
.corp-color-row>span{font-size:10px;text-transform:uppercase;letter-spacing:1.3px;color:var(--c-taupe);margin-inline-end:5px}
.corp-color-dot{width:25px;height:25px;border-radius:50%;border:2px solid #FBF6EE;box-shadow:0 0 0 1px #B9AAA0;cursor:pointer}
.corp-color-dot.rose{background:#A96768}
.corp-color-dot.sage{background:#747B68}
.corp-color-dot.gold{background:#B79A67}
.corp-color-dot.charcoal{background:#302628}
.corp-color-dot.active{box-shadow:0 0 0 2px var(--c-ink)}
.corp-custom-products{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px}
.corp-product-switch{border:0;border-bottom:1px solid #B9AAA0;background:transparent;padding:6px 0;color:var(--c-ink);font-size:10px;font-weight:800;letter-spacing:1px;cursor:pointer}
.corp-product-switch.active{color:var(--c-rose);border-bottom:2px solid currentColor}
.corp-custom-animation{height:360px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 48%,#FBF6EE 0 18%,transparent 19%),linear-gradient(135deg,#E5D6CC,#F4ECE4);border-bottom:1px solid #CDBEB2}
.corp-custom-animation:before{content:"CUSTOM ORDER / LIVE PREVIEW";position:absolute;left:4%;top:5%;font-size:9px;letter-spacing:1.5px;color:#8F7D70}
.corp-custom-item{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:all .5s cubic-bezier(.2,1.3,.3,1)}
.corp-custom-item.notebook{z-index:3}
.corp-custom-cover{width:220px;height:270px;background:#A96768;color:#fff;padding:65px 22px 20px;box-shadow:16px 18px 0 rgba(46,41,42,.12);transform:rotate(-5deg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:background .3s}
.corp-custom-logo-mark{width:40px;height:40px;border:1px solid rgba(255,255,255,.6);display:grid;place-items:center;border-radius:50%;font-weight:700}
.corp-custom-cover strong{font-size:19px;text-align:center;letter-spacing:1px}
.corp-custom-cover small{font-size:8px;letter-spacing:2px;opacity:.75}
.corp-custom-pages{position:absolute;right:-12px;top:7px;width:12px;height:252px;background:repeating-linear-gradient(#FBF6EE 0 4px,#D9CDC0 4px 5px);z-index:-1}
.pen-item{opacity:0;transform:translate(70%,-50%) rotate(25deg)}
.corp-pen-body{width:18px;height:190px;background:#302628;border-radius:10px}
.pen-item span,.gift-item span{position:absolute;white-space:nowrap;font-weight:800;font-size:10px;letter-spacing:1px}
.pen-item span{top:80px;left:-12px;color:#B79A67;transform:rotate(90deg)}
.diary-item{opacity:0;transform:translate(-50%,-50%) scale(.6)}
.corp-diary-cover{width:240px;height:220px;background:#747B68;color:#fff;display:grid;place-items:center;align-content:center;gap:8px;transform:rotate(3deg);box-shadow:15px 18px 0 rgba(46,41,42,.1)}
.corp-diary-cover span{font-size:18px;font-weight:800;letter-spacing:1px}
.corp-diary-cover small{font-size:9px;letter-spacing:2px}
.gift-item{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-8deg)}
.corp-gift-box{width:230px;height:150px;background:#B79A67;display:grid;place-items:center;box-shadow:14px 16px 0 rgba(46,41,42,.12)}
.corp-gift-box span{position:static;color:#302628;font-size:18px}
.corp-custom-cursor{position:absolute;left:19%;top:65%;font-size:35px;z-index:8;animation:corpWriteAcross 3.5s ease-in-out infinite}
.corp-custom-ink{position:absolute;left:30%;right:28%;top:64%;height:2px;background:var(--custom-ink,#A96768);transform-origin:left;animation:corpInkGrow 3.5s ease-in-out infinite}
.corp-custom-stamp{position:absolute;right:8%;bottom:12%;border:3px solid var(--custom-ink,#A96768);color:var(--custom-ink,#A96768);padding:7px 10px;font-size:11px;font-weight:800;letter-spacing:1.5px;transform:rotate(-10deg);animation:corpStampCustom 4s ease-in-out infinite}
@keyframes corpWriteAcross{0%,15%{left:19%;opacity:0}20%{opacity:1}75%{left:73%;opacity:1}85%,100%{left:73%;opacity:0}}
@keyframes corpInkGrow{0%,20%{transform:scaleX(0);opacity:0}25%{opacity:1}75%{transform:scaleX(1);opacity:1}90%{opacity:0}}
@keyframes corpStampCustom{0%,55%{opacity:0;transform:rotate(-10deg) scale(1.5)}65%,90%{opacity:1;transform:rotate(-10deg) scale(1)}100%{opacity:0}}

/* ---------- 08 QUOTE / ENQUIRY ---------- */
.corp-quote{background:var(--c-rose);border-radius:17px;padding:28px;color:#fff;position:relative;overflow:hidden}
.corp-quote:before{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-100px;top:-100px;background:rgba(255,255,255,.09)}
.corp-quote-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px;position:relative;z-index:1}
.corp-quote h2{color:#fff}
.corp-quote .corp-eyebrow{color:#F5DCDD}
.corp-quote-copy>p{color:#F7E9E7;font-size:14px}
.corp-faq{margin-top:20px;display:grid;gap:7px}
.corp-faq details{background:#8F5558;border:1px solid rgba(255,255,255,.18);border-radius:8px;overflow:hidden}
.corp-faq summary{padding:10px 12px;cursor:pointer;font-size:13px;font-weight:700}
.corp-faq details p{padding:0 12px 11px;margin:0;color:#F7E9E7;font-size:12px}
.corp-form-card{background:#FBF6EE;color:#2E292A;border-radius:12px;padding:19px}
.corp-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.corp-form label{display:grid;gap:4px;font-size:11px;font-weight:700}
.corp-form .full{grid-column:1/-1}
.corp-form input,.corp-form select,.corp-form textarea{width:100%;padding:10px;border:1px solid #D8C9BD;border-radius:7px;background:#fff;color:#2E292A;font:400 13px Manrope,sans-serif}
.corp-form button{width:100%;cursor:pointer}
.corp-tier-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.corp-tier{background:#EFE5DA;border-radius:7px;padding:8px}
.corp-tier b{display:block;font-size:14px;color:#8F5558}
.corp-tier span{font-size:9px;color:#7A6A60}
#quote{scroll-margin-top:calc(var(--ppr-navbar-height) + 16px)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1050px){
 .corp-hero-grid{grid-template-columns:1fr .8fr;padding:34px}
 .corp-quote-grid{grid-template-columns:1fr}
}
@media(max-width:1023px){
 .corp-showcase-head{grid-template-columns:1fr;gap:14px}
 .corp-showcase-head h2{font-size:32px}
 .corp-showcase-scene{min-height:580px}
 .photo-main{left:5%;width:61%;height:350px}
 .photo-one{right:4%;width:32%;height:190px}
 .photo-two{right:7%;width:35%;height:190px}
 .note-a{left:48%;top:17px}
 .corp-showcase-scan{left:52%;bottom:28px}
 .corp-showcase-bottom{grid-template-columns:repeat(2,1fr)}
 .corp-showcase-bottom>div:nth-child(2){border-inline-end:0}
 .corp-showcase-bottom>div:nth-child(-n+2){border-bottom:1px solid rgba(185,170,160,.42)}
}
@media(max-width:900px){
 .corp-hero-new .corp-hero-grid{grid-template-columns:1fr;min-height:auto;padding:34px 28px 22px}
 .corp-hero-copy{padding-top:8px}
 .corp-hero-stage{height:390px;margin-top:0}
 .hero-bottom-strip{flex-wrap:wrap;gap:9px 14px}
 .hero-bottom-strip b{display:none}
 .corp-receipt-head,.corp-receipt-lab,.corp-branch-head,.corp-restock-head,.corp-restock-board{grid-template-columns:1fr}
 .corp-restock-board{min-height:auto}
 .corp-restock-preview{min-height:390px}
 .corp-approval-head{display:block}
 .corp-approval-steps{left:35%;right:3%;grid-template-columns:repeat(2,1fr);top:45px}
 .corp-approval-step{min-height:120px}
 .corp-folder{left:3%;transform:scale(.85) rotate(-7deg)}
 .corp-approval-stamp{left:16%}
 .corp-branch-destinations{right:3%;width:155px}
 .corp-branch-package{width:95px}
 .corp-custom-lively{grid-template-columns:1fr}
}
@media(max-width:767px){
 .corp-business-showcase-section{padding:58px 0}
 .corp-showcase-head h2{font-size:28px}
 .corp-showcase-head p{font-size:14px}
 .corp-showcase-scene{min-height:650px}
 .photo-main{left:5%;top:55px;width:90%;height:300px;transform:rotate(-1deg)}
 .photo-one{left:7%;right:auto;top:375px;width:42%;height:180px}
 .photo-two{right:7%;bottom:38px;width:42%;height:180px}
 .note-a{left:8%;top:17px}
 .note-b{right:4%;bottom:6px}
 .corp-showcase-path{left:39%;bottom:100px;width:31%}
 .corp-showcase-scan{left:43%;bottom:19px;width:78px;height:78px}
 .corp-showcase-scan span{width:55px;height:55px}
 .corp-showcase-bottom{grid-template-columns:1fr}
 .corp-showcase-bottom>div{border-inline-end:0!important;border-bottom:1px solid rgba(185,170,160,.42)}
 .corp-showcase-bottom>div:last-child{border-bottom:0}
}
@media(max-width:720px){
 .corp-page section{padding:42px 0}
 .corp-hero{padding-top:20px!important}
 .corp-hero-grid{grid-template-columns:1fr;padding:28px 22px;min-height:0}
 .corp-hero-shell{min-height:0}
 .corp-proof{gap:14px}
 .corp-proof b{font-size:16px}
 .corp-quote{padding:20px}
 .corp-form{grid-template-columns:1fr}
 .corp-form .full{grid-column:1}
 .corp-tier-row{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
 .corp-hero-new{min-height:auto!important}
 .corp-hero-new .corp-hero-grid{padding:28px 20px 8px}
 .corp-hero-new h1{font-size:36px!important;letter-spacing:-1.2px!important}
 .corp-hero-stage{height:320px;transform:scale(.92);transform-origin:center top;margin-bottom:-22px}
 .hero-paper-stack{left:17%;top:19%;width:130px;height:164px}
 .hero-notebook{right:10%;width:84px;height:116px}
 .hero-box{right:3%;bottom:19%;width:112px;height:84px}
 .hero-pen{width:115px;left:5%;bottom:12%}
 .hero-route{width:230px;left:2%;bottom:31%}
 .hero-stamp{width:76px;height:76px;right:28%;bottom:10%;font-size:8px}
 .hero-note{font-size:7px}
 .note-one{right:0}
 .note-two{left:0}
 .hero-bottom-strip{font-size:8px;padding:9px 12px}
 .hero-bottom-strip span{width:46%;justify-content:center}
 .corp-buy-row{grid-template-columns:1fr 65px 75px}
 .corp-spend-value{font-size:42px}
 .corp-approval-desk{min-height:520px;padding:18px}
 .corp-folder{left:5%;top:40px;transform:scale(.72) rotate(-7deg);transform-origin:top left}
 .corp-approval-stamp{left:22%;top:210px}
 .corp-approval-steps{left:8%;right:8%;top:270px;grid-template-columns:repeat(2,1fr);gap:8px}
 .corp-approval-step{min-height:95px;padding:10px}
 .corp-approval-step b{font-size:20px}
 .corp-approval-note{display:none}
 .corp-restock-head{gap:10px}
 .corp-stock-side{padding:18px}
 .corp-restock-preview{padding:18px;min-height:430px}
 .corp-restock-paper{padding:17px}
 .corp-restock-product strong{font-size:21px}
 .corp-restock-action{align-items:stretch;flex-direction:column}
 .corp-restock-action button{width:100%}
 .corp-restock-orbit{display:none}
 .corp-branch-wall{min-height:480px}
 .corp-branch-package{width:90px}
 .corp-branch-destinations{left:8%;right:8%;top:325px;width:auto;grid-template-columns:repeat(2,1fr)}
 .pkg-1{left:6%}.pkg-2{left:38%}.pkg-3{left:67%}
 .corp-custom-animation{height:320px}
}
@media(max-width:480px){
 .corp-page h1{letter-spacing:-1px}
 .corp-hero-grid{padding:24px 17px}
}
@media(prefers-reduced-motion:reduce){
 .corp-page *,.corp-page *::before,.corp-page *::after{animation:none!important}
 .corp-approval-stamp{opacity:1;transform:rotate(-13deg) scale(1)}
 .corp-custom-stamp{opacity:1}
}

/* ---------- CORPORATE ACCOUNTS · BRANCH SORTING RESPONSIVE FIX ---------- */
/* Keep the animated packages in their own lane so they never sit on top of destinations. */
.corp-branch-wall{min-height:350px}
.corp-branch-package{z-index:3}
.corp-branch-destinations{z-index:4}
.corp-branch-message{z-index:5}

@media (min-width:901px){
  .corp-branch-destinations{right:4%;top:42px;width:210px}
  .pkg-1{left:7%}
  .pkg-2{left:27%}
  .pkg-3{left:47%}
  @keyframes corpPkg1{0%,100%{transform:translateX(0) rotate(-2deg)}50%{transform:translateX(55px) rotate(2deg)}}
  @keyframes corpPkg2{0%,100%{transform:translateX(0) rotate(2deg)}50%{transform:translateX(-45px) rotate(-2deg)}}
  @keyframes corpPkg3{0%,100%{transform:translateX(0) rotate(-2deg)}50%{transform:translateX(45px) rotate(2deg)}}
}

@media (min-width:621px) and (max-width:900px){
  .corp-branch-wall{min-height:390px}
  .corp-branch-destinations{right:3%;top:42px;width:155px}
  .corp-branch-package{width:95px}
  .pkg-1{left:5%;top:45px}
  .pkg-2{left:24%;top:145px}
  .pkg-3{left:43%;top:245px}
  @keyframes corpPkg1{0%,100%{transform:translateX(0) rotate(-2deg)}50%{transform:translateX(35px) rotate(2deg)}}
  @keyframes corpPkg2{0%,100%{transform:translateX(0) rotate(2deg)}50%{transform:translateX(-30px) rotate(-2deg)}}
  @keyframes corpPkg3{0%,100%{transform:translateX(0) rotate(-2deg)}50%{transform:translateX(30px) rotate(2deg)}}
}

@media (max-width:620px){
  .corp-branch-wall{
    min-height:570px;
    padding:22px 18px 24px;
  }
  .corp-branch-wall:before{top:12px;right:14px;font-size:8px}
  .corp-branch-package{
    width:90px;
    height:68px;
    padding:9px;
    font-size:8px;
  }
  .pkg-1{left:6%;top:42px}
  .pkg-2{left:38%;top:138px}
  .pkg-3{left:6%;top:234px}
  .corp-branch-destinations{
    left:6%;
    right:6%;
    top:330px;
    width:auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }
  .corp-destination{
    min-height:62px;
    padding:9px 10px;
  }
  .corp-destination strong{font-size:10px}
  .corp-destination span{font-size:9px;line-height:1.45;display:block}
  .corp-branch-message{
    left:18px;
    right:18px;
    bottom:15px;
    text-align:center;
    font-size:9px;
    line-height:1.4;
  }
  .corp-branch-line{
    gap:7px;
    row-gap:4px;
    font-size:9px;
  }
  @keyframes corpPkg1{0%,100%{transform:translateX(0) rotate(-2deg)}50%{transform:translateX(22px) rotate(2deg)}}
  @keyframes corpPkg2{0%,100%{transform:translateX(0) rotate(2deg)}50%{transform:translateX(-18px) rotate(-2deg)}}
  @keyframes corpPkg3{0%,100%{transform:translateX(0) rotate(-2deg)}50%{transform:translateX(25px) rotate(2deg)}}
}

@media (max-width:380px){
  .corp-branch-wall{min-height:585px}
  .corp-branch-destinations{top:326px}
  .corp-branch-package{width:84px;height:64px}
  .corp-destination{min-height:65px;padding:8px}
  .corp-destination span{font-size:8.5px}
}

/* =========================================================
   CORPORATE ACCOUNTS — RESTOCK BOARD TEXT CLARITY
   Keep the existing layout/content, but make every label
   and value crisp, darker, and easier to read at all sizes.
   ========================================================= */
.corp-restock-paper{
  color:#17202b;
  background:#FBF7F0;
}
.corp-restock-paper-top{
  color:#8F5558;
  font-size:11px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:1.35px;
}
.corp-restock-paper-top b{
  color:#4B403C;
  font-weight:900;
}
.corp-restock-product{
  gap:18px;
  padding:27px 0 21px;
}
.corp-restock-icon{
  width:72px;
  height:72px;
  font-size:30px;
  color:#FFFDF9;
}
.corp-restock-product small{
  color:#9A6841;
  font-size:10px;
  line-height:1.3;
  letter-spacing:1.45px;
  font-weight:900;
}
.corp-restock-product strong{
  color:#122036;
  font-size:30px;
  line-height:1.05;
  letter-spacing:-.4px;
  font-weight:900;
}
.corp-restock-product span{
  color:#4D5661;
  font-size:14px;
  line-height:1.35;
  margin-top:7px;
  font-weight:600;
}
.corp-restock-price{
  border-top:1px solid #D4C4B7;
  padding-top:17px;
}
.corp-restock-price span{
  color:#66715E;
  font-size:11px;
  line-height:1.3;
  letter-spacing:1.25px;
  font-weight:900;
}
.corp-restock-price strong{
  color:#17202B;
  font-size:27px;
  line-height:1;
  font-weight:900;
}
.corp-restock-progress{
  height:7px;
  background:#DED5CC;
  margin:17px 0;
}
.corp-restock-progress span{
  background:#707A68;
}
.corp-restock-action{
  border-top:1px dashed #C8B7AA;
  padding-top:15px;
}
.corp-restock-action span{
  color:#4F595F;
  font-size:12px;
  line-height:1.4;
  font-weight:600;
}
.corp-restock-action button{
  color:#FFFDF9;
  font-size:10px;
  font-weight:900;
}

@media(max-width:620px){
  .corp-restock-paper{
    padding:18px;
    transform:rotate(0);
  }
  .corp-restock-paper-top{
    font-size:10px;
    letter-spacing:1.1px;
  }
  .corp-restock-product{
    gap:14px;
    padding:25px 0 20px;
  }
  .corp-restock-icon{
    width:62px;
    height:62px;
    font-size:27px;
    box-shadow:5px 5px 0 #B79A67;
  }
  .corp-restock-product small{
    font-size:9px;
    letter-spacing:1.1px;
  }
  .corp-restock-product strong{
    font-size:27px;
    letter-spacing:-.5px;
  }
  .corp-restock-product span{
    font-size:13px;
    margin-top:6px;
  }
  .corp-restock-price{
    padding-top:16px;
  }
  .corp-restock-price span{
    font-size:10px;
  }
  .corp-restock-price strong{
    font-size:24px;
  }
  .corp-restock-action span{
    font-size:12px;
  }
}

@media(max-width:390px){
  .corp-restock-preview{padding:14px;}
  .corp-restock-paper{padding:17px;}
  .corp-restock-product{gap:12px;}
  .corp-restock-icon{width:58px;height:58px;font-size:25px;}
  .corp-restock-product strong{font-size:25px;}
  .corp-restock-product span{font-size:12px;}
  .corp-restock-price strong{font-size:22px;}
}

/* =========================================================
   CORPORATE ACCOUNTS — GLOBAL TEXT CLARITY PASS
   Improve readability across the ENTIRE page without changing
   the existing content, layout concept, imagery or animations.
   ========================================================= */
.corp-page{
  --c-taupe:#62564F;
}

.corp-page,
.corp-page p,
.corp-page span,
.corp-page small,
.corp-page label,
.corp-page li,
.corp-page button,
.corp-page input,
.corp-page textarea,
.corp-page select{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.corp-page p{
  font-size:16px;
  line-height:1.7;
  font-weight:500;
  color:var(--c-taupe);
}

.corp-page .corp-eyebrow{
  font-size:12px;
  line-height:1.4;
  font-weight:900;
  letter-spacing:1.5px;
  color:var(--c-rose-dark);
}

.corp-page h1,
.corp-page h2,
.corp-page h3{
  text-rendering:geometricPrecision;
  font-weight:800;
}

.corp-page h2{
  line-height:1.12;
}

/* HERO */
.corp-hero-copy>p{
  color:#FFF4F1;
  font-size:17px;
  line-height:1.65;
  font-weight:500;
  text-shadow:0 1px 1px rgba(0,0,0,.12);
}
.corp-hero-kicker{
  font-size:11px;
  font-weight:900;
  letter-spacing:1.6px;
}
.corp-hero-new h1{
  text-shadow:0 1px 2px rgba(0,0,0,.16);
}
.corp-proof b{
  font-size:12px;
  font-weight:900;
}
.corp-proof span{
  font-size:11px;
  line-height:1.35;
  color:#F0DAD7;
  font-weight:600;
}
.hero-note{
  font-size:9px;
  font-weight:800;
  color:#2E292A;
}
.hero-note b{font-weight:900}
.hero-delivery-tag b{font-size:10px}
.hero-delivery-tag small{font-size:9px;font-weight:600;color:#E4D8D3}
.hero-bottom-strip{
  font-size:11px;
  font-weight:900;
}

/* SECTION 02 */
.corp-receipt-head p,
.corp-approval-head p,
.corp-restock-head p,
.corp-branch-head p,
.corp-custom-live>p,
.corp-showcase-head>p{
  color:#62564F;
  font-size:16px;
  line-height:1.7;
  font-weight:500;
}
.corp-buy-row{
  font-size:13px;
  font-weight:600;
}
.corp-buy-row small{
  color:#62564F;
  font-size:11px;
  font-weight:600;
}
.corp-buy-total{
  font-size:15px;
}
.corp-discount-stage .corp-eyebrow{
  font-size:12px;
  font-weight:900;
}
.corp-spend-label{
  font-size:13px;
  line-height:1.55;
  font-weight:500;
  color:#E2D5D0;
}
.corp-discount-reveal small{
  font-size:11px;
  font-weight:800;
  letter-spacing:.6px;
  color:#E2D5D0;
}
.corp-discount-reveal b{
  font-size:12px;
  font-weight:900;
}
.corp-receipt-tags span{
  font-size:11px;
  font-weight:800;
}
.corp-receipt-note{
  font-size:12px;
  line-height:1.65;
  font-weight:500;
}

/* SECTION 03 */
.corp-approval-step strong{
  font-size:13px;
  font-weight:900;
}
.corp-approval-step span{
  font-size:11px;
  line-height:1.55;
  font-weight:600;
  color:#62564F;
}
.corp-approval-note{
  font-size:12px;
  font-weight:800;
}

/* SECTION 04 — stock list + complete board */
.corp-stock-label{
  font-size:11px;
  font-weight:900;
  letter-spacing:1.2px;
}
.corp-stock-label span{font-weight:900}
.corp-stock-item b{
  font-size:12px;
  font-weight:900;
}
.corp-stock-item small{
  font-size:11px;
  line-height:1.4;
  font-weight:600;
  color:#E1D6D1;
}
.corp-restock-preview:before{
  font-size:10px;
  font-weight:900;
}
.corp-restock-paper-top{
  font-size:11px;
  font-weight:900;
}
.corp-restock-product small{
  font-size:11px;
  font-weight:900;
}
.corp-restock-product strong{
  font-size:30px;
  font-weight:900;
}
.corp-restock-product span{
  font-size:14px;
  font-weight:600;
  color:#3F4852;
}
.corp-restock-price span{
  font-size:11px;
  font-weight:900;
}
.corp-restock-price strong{
  font-size:28px;
  font-weight:900;
}
.corp-restock-action span{
  font-size:12px;
  font-weight:600;
  color:#3F4852;
}
.corp-restock-action button{
  font-size:11px;
  font-weight:900;
}

/* SECTION 05 */
.corp-showcase-head h2{
  font-weight:800;
}
.corp-showcase-head p{
  color:#62564F;
}
.corp-showcase-photo span{
  font-size:11px;
  font-weight:900;
}
.corp-showcase-note b{
  font-size:11px;
  font-weight:900;
}
.corp-showcase-note span{
  font-size:12px;
  line-height:1.45;
  font-weight:600;
  color:#403638;
}
.corp-showcase-scan b{
  font-size:11px;
  font-weight:900;
}
.corp-showcase-bottom strong{
  font-size:12px;
  font-weight:900;
}
.corp-showcase-bottom span{
  font-size:13px;
  line-height:1.45;
  font-weight:600;
  color:#514849;
}

/* SECTION 06 */
.corp-branch-wall{
  color:#fff;
}
.corp-branch-package{
  font-size:10px;
  line-height:1.35;
  font-weight:900;
}
.corp-branch-package small{
  font-size:9px;
  line-height:1.35;
  font-weight:700;
}
.corp-destination strong{
  font-size:12px;
  font-weight:900;
}
.corp-destination span{
  font-size:11px;
  line-height:1.45;
  font-weight:600;
  color:#E2D8D4;
}
.corp-branch-message{
  font-size:12px;
  font-weight:800;
}
.corp-branch-line{
  font-size:12px;
  font-weight:900;
}

/* SECTION 07 */
.corp-name-row label,
.corp-color-row>span{
  font-size:11px;
  font-weight:900;
}
.corp-name-row input{
  font-size:21px;
  font-weight:800;
}
.corp-product-switch{
  font-size:11px;
  font-weight:900;
}
.corp-custom-cover strong{
  font-size:20px;
  font-weight:900;
}
.corp-custom-cover small,
.corp-diary-cover small{
  font-size:9px;
  font-weight:800;
}

/* SECTION 08 */
.corp-quote-copy>p{
  font-size:15px;
  line-height:1.7;
  font-weight:500;
}
.corp-faq summary{
  font-size:14px;
  font-weight:800;
  line-height:1.45;
}
.corp-faq details p{
  font-size:13px;
  line-height:1.6;
  font-weight:500;
  color:#F8ECEA;
}
.corp-form label{
  font-size:12px;
  font-weight:800;
}
.corp-form input,
.corp-form select,
.corp-form textarea{
  font-size:14px;
  font-weight:500;
}
.corp-tier b{
  font-size:15px;
  font-weight:900;
}
.corp-tier span{
  font-size:10px;
  line-height:1.35;
  font-weight:600;
}

/* Keep clarity strong on narrow screens without creating oversized blocks. */
@media(max-width:620px){
  .corp-page p{font-size:15px;line-height:1.65}
  .corp-page .corp-eyebrow{font-size:11px}
  .corp-hero-copy>p{font-size:15px}
  .corp-hero-kicker{font-size:10px}
  .corp-proof b{font-size:11px}
  .corp-proof span{font-size:10px}
  .corp-buy-row{font-size:12px}
  .corp-buy-row small{font-size:10px}
  .corp-discount-stage .corp-eyebrow{font-size:11px}
  .corp-spend-label{font-size:12px}
  .corp-approval-step strong{font-size:12px}
  .corp-approval-step span{font-size:10px}
  .corp-stock-item b{font-size:11px}
  .corp-stock-item small{font-size:10px}
  .corp-restock-product strong{font-size:27px}
  .corp-restock-product span{font-size:13px}
  .corp-restock-price strong{font-size:25px}
  .corp-showcase-head p{font-size:14px}
  .corp-showcase-note span{font-size:11px}
  .corp-showcase-bottom span{font-size:12px}
  .corp-destination strong{font-size:11px}
  .corp-destination span{font-size:10px}
  .corp-branch-message{font-size:10px}
  .corp-branch-line{font-size:10px}
  .corp-quote-copy>p{font-size:14px}
  .corp-faq summary{font-size:13px}
  .corp-faq details p{font-size:12px}
}

/* =========================================================
   PAPERLY CORPORATE ACCOUNTS — FINAL TEXT VISIBILITY PASS
   Keeps the existing layout/design; strengthens typography and
   contrast across every Corporate Accounts section.
   ========================================================= */
.corp-page,
.corp-page *{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}

/* Main section copy */
.corp-page .corp-eyebrow{color:#70484B;font-weight:800}
.corp-page .corp-receipt-head p,
.corp-page .corp-approval-head p,
.corp-page .corp-restock-head p,
.corp-page .corp-branch-head p,
.corp-page .corp-custom-live>p,
.corp-page .corp-showcase-head p{color:#4D4542!important}

.corp-page .corp-showcase-head p{font-size:15px;line-height:1.7}
.corp-page .corp-showcase-note span,
.corp-page .corp-showcase-bottom span{color:#4D4542}
.corp-page .corp-branch-line{color:#514743}
.corp-page .corp-approval-note{color:#4A403C}
.corp-page .corp-approval-step span{color:#514743}
.corp-page .corp-destination span{color:#DED4CE}

/* Hero — all small labels remain readable against the dark artwork */
.corp-page .corp-hero-copy .corp-eyebrow,
.corp-page .corp-hero-kicker{color:#FFE4E3!important}
.corp-page .corp-hero-copy>p{color:#FFF4F1!important;font-weight:500}
.corp-page .corp-proof span{color:#FFE9E6!important}
.corp-page .hero-note{color:#211D1E;font-weight:800;font-size:9px}
.corp-page .hero-delivery-tag{color:#FFF8F4}
.corp-page .hero-delivery-tag small{color:#F1E5DE}
.corp-page .hero-stamp{color:#E8C98D;border-color:#E8C98D}
.corp-page .hero-bottom-strip{color:#FFF8F4}

/* Corporate pricing / dark panels */
.corp-page .corp-buy-table,
.corp-page .corp-discount-stage,
.corp-page .corp-stock-side{font-weight:500}
.corp-page .corp-buy-row small,
.corp-page .corp-restock-product span,
.corp-page .corp-restock-price span,
.corp-page .corp-restock-action span{color:#554A45!important}
.corp-page .corp-discount-stage .corp-spend-label,
.corp-page .corp-discount-stage .corp-receipt-note,
.corp-page .corp-discount-stage .corp-discount-reveal small{color:#EEE2DC!important}
.corp-page .corp-restock-preview:before{color:#5A4B45}

/* Restock paper */
.corp-page .corp-restock-paper{color:#292425}
.corp-page .corp-restock-product small{color:#7C4044}
.corp-page .corp-restock-product span,
.corp-page .corp-restock-price span,
.corp-page .corp-restock-action span{font-size:11px}

/* Customisation preview — label and controls are intentionally darker */
.corp-page .corp-custom-animation:before{color:#675950!important;font-size:10px;font-weight:800}
.corp-page .corp-name-row label,
.corp-page .corp-color-row>span{color:#5B4D47!important;font-weight:800}
.corp-page .corp-product-switch{color:#332D2D!important;font-weight:800}
.corp-page .corp-product-switch.active{color:#8F4D50!important}
.corp-page .corp-custom-cover strong{font-weight:800}
.corp-page .corp-custom-cover small{opacity:1;color:#FFF8F4}

/* Quote / business supply plan — this is the key contrast fix */
.corp-page .corp-quote{color:#fff}
.corp-page .corp-quote .corp-eyebrow{color:#FFE7E5!important;font-weight:800}
.corp-page .corp-quote h2{color:#FFFFFF!important;font-weight:800}
.corp-page .corp-quote-copy>p{color:#FFF4F1!important;font-size:15px;line-height:1.7;font-weight:500}
.corp-page .corp-faq summary{color:#FFFFFF!important;font-weight:800}
.corp-page .corp-faq details p{color:#FFEDE9!important;font-size:13px;line-height:1.6}
.corp-page .corp-form-card{color:#292425}
.corp-page .corp-form label{color:#403735;font-size:12px}
.corp-page .corp-form input,
.corp-page .corp-form select,
.corp-page .corp-form textarea{color:#292425!important}

/* Small labels across cards */
.corp-page .corp-tier span{color:#5A4D47}
.corp-page .corp-tier b{font-weight:800}
.corp-page .corp-folder-sign{color:#554A45}
.corp-page .corp-approval-desk:after{color:#5A4D45}
.corp-page .corp-folder:before{color:#7D4448}

/* Slightly larger type where the original 8–10px text was too faint */
.corp-page .corp-buy-table:before,
.corp-page .corp-approval-desk:after,
.corp-page .corp-folder:before,
.corp-page .corp-restock-preview:before{font-size:10px}

/* =========================================================
   DARK MODE — preserve the same clarity without flattening colors
   ========================================================= */
html.ppr-dark-mode .corp-page .corp-eyebrow{color:#F2C9CA!important}
html.ppr-dark-mode .corp-page .corp-receipt-head p,
html.ppr-dark-mode .corp-page .corp-approval-head p,
html.ppr-dark-mode .corp-page .corp-restock-head p,
html.ppr-dark-mode .corp-page .corp-branch-head p,
html.ppr-dark-mode .corp-page .corp-custom-live>p,
html.ppr-dark-mode .corp-page .corp-showcase-head p,
html.ppr-dark-mode .corp-page .corp-showcase-note span,
html.ppr-dark-mode .corp-page .corp-showcase-bottom span,
html.ppr-dark-mode .corp-page .corp-approval-step span,
html.ppr-dark-mode .corp-page .corp-branch-line{color:#E8DED8!important}
html.ppr-dark-mode .corp-page .corp-custom-animation:before{color:#D8CCC5!important}
html.ppr-dark-mode .corp-page .corp-name-row label,
html.ppr-dark-mode .corp-page .corp-color-row>span{color:#DDD1CB!important}
html.ppr-dark-mode .corp-page .corp-product-switch{color:#F1E8E2!important}
html.ppr-dark-mode .corp-page .corp-product-switch.active{color:#F0AEB1!important}
html.ppr-dark-mode .corp-page .corp-quote .corp-eyebrow{color:#FFE8E7!important}
html.ppr-dark-mode .corp-page .corp-quote-copy>p{color:#FFF5F2!important}
html.ppr-dark-mode .corp-page .corp-faq details p{color:#FFEDEA!important}
html.ppr-dark-mode .corp-page .corp-buy-row small,
html.ppr-dark-mode .corp-page .corp-restock-product span,
html.ppr-dark-mode .corp-page .corp-restock-price span,
html.ppr-dark-mode .corp-page .corp-restock-action span{color:#D9CEC8!important}

/* Mobile: keep text readable without changing the section structure */
@media(max-width:600px){
  .corp-page .corp-quote-copy>p{font-size:14px;line-height:1.65}
  .corp-page .corp-eyebrow{font-size:11px;letter-spacing:1.3px}
  .corp-page .corp-custom-animation:before{font-size:9px}
  .corp-page .hero-note{font-size:8px}
  .corp-page .hero-delivery-tag b{font-size:9px}
  .corp-page .hero-delivery-tag small{font-size:8px}
}

/* =========================================================
   CORPORATE ACCOUNTS — HERO ARTWORK TEXT VISIBILITY FINAL FIX
   Make every piece of text inside the animated hero artwork
   crisp, larger, darker/brighter and easy to read.
   ========================================================= */
.corp-page .corp-hero-stage .sheet-front{color:#1F1B1C!important;padding:25px 20px!important}
.corp-page .corp-hero-stage .sheet-title{
  color:#9B4E52!important;
  font-size:15px!important;
  font-weight:900!important;
  letter-spacing:2.2px!important;
  line-height:1.2!important;
  text-shadow:none!important;
}
.corp-page .corp-hero-stage .sheet-line{
  height:5px!important;
  background:#9D8E86!important;
  width:90%!important;
  margin-top:18px!important;
  opacity:1!important;
}
.corp-page .corp-hero-stage .sheet-line.short{width:62%!important;margin-top:8px!important}
.corp-page .corp-hero-stage .sheet-total{
  color:#66705E!important;
  font-size:9px!important;
  font-weight:800!important;
  letter-spacing:1px!important;
  margin-top:38px!important;
  line-height:1.3!important;
}
.corp-page .corp-hero-stage .sheet-total b{
  color:#252021!important;
  font-size:18px!important;
  font-weight:900!important;
}
.corp-page .corp-hero-stage .notebook-logo{
  color:#D8B57A!important;
  font-size:22px!important;
  font-weight:900!important;
}
.corp-page .corp-hero-stage .notebook-name{
  color:#FFF8F4!important;
  font-size:9px!important;
  font-weight:900!important;
  line-height:1.45!important;
  letter-spacing:1.35px!important;
  text-shadow:0 1px 2px rgba(0,0,0,.45)!important;
}
.corp-page .corp-hero-stage .box-label{
  color:#282223!important;
  font-size:9px!important;
  font-weight:800!important;
  line-height:1.45!important;
  letter-spacing:1.1px!important;
  text-shadow:0 1px rgba(255,255,255,.12)!important;
}
.corp-page .corp-hero-stage .box-label b{
  color:#282223!important;
  font-size:12px!important;
  font-weight:900!important;
}
.corp-page .corp-hero-stage .hero-note{
  color:#171415!important;
  background:#FFF9F3!important;
  font-size:9px!important;
  font-weight:900!important;
  line-height:1.45!important;
  letter-spacing:1px!important;
  padding:9px 11px!important;
  box-shadow:0 5px 12px rgba(0,0,0,.22)!important;
}
.corp-page .corp-hero-stage .hero-note b{font-weight:900!important;color:#171415!important}
.corp-page .corp-hero-stage .hero-delivery-tag{
  color:#FFFFFF!important;
  background:rgba(27,23,24,.9)!important;
  border-color:rgba(255,255,255,.38)!important;
  padding:11px 14px!important;
}
.corp-page .corp-hero-stage .hero-delivery-tag b{
  color:#FFFFFF!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:1.25px!important;
}
.corp-page .corp-hero-stage .hero-delivery-tag small{
  color:#F5EAE4!important;
  font-size:9px!important;
  font-weight:700!important;
}
.corp-page .corp-hero-stage .hero-stamp{
  color:#F0CD8C!important;
  border-color:#F0CD8C!important;
  font-size:12px!important;
  font-weight:900!important;
  text-shadow:0 1px 2px rgba(0,0,0,.25)!important;
}
.corp-page .corp-hero-stage .hero-stamp small{
  color:#F0CD8C!important;
  font-size:7px!important;
  font-weight:800!important;
}
.corp-page .corp-hero-stage .hero-check{
  font-size:19px!important;
  font-weight:900!important;
}
.corp-page .corp-hero-stage .hero-grid-lines{border-color:rgba(255,255,255,.24)!important}

@media (max-width:760px){
  .corp-page .corp-hero-stage .sheet-title{font-size:13px!important}
  .corp-page .corp-hero-stage .sheet-total{font-size:8px!important}
  .corp-page .corp-hero-stage .sheet-total b{font-size:15px!important}
  .corp-page .corp-hero-stage .notebook-name{font-size:8px!important}
  .corp-page .corp-hero-stage .box-label{font-size:8px!important}
  .corp-page .corp-hero-stage .box-label b{font-size:10px!important}
  .corp-page .corp-hero-stage .hero-note{font-size:8px!important;padding:8px 9px!important}
}

/* =========================================================
   CORPORATE ACCOUNTS — FINAL CONTRAST LOCK
   Explicitly lock readable colors for the remaining low-contrast
   restock and business-desk labels. This overrides earlier rules.
   ========================================================= */
.corp-page .corp-restock-paper,
.corp-page .corp-restock-paper *{
  text-shadow:none!important;
}
.corp-page .corp-restock-paper-top span,
.corp-page .corp-restock-paper-top b{
  color:#5B383B!important;
  opacity:1!important;
}
.corp-page .corp-restock-product small{
  color:#8B4D3E!important;
  opacity:1!important;
}
.corp-page .corp-restock-product strong{
  color:#10233B!important;
  opacity:1!important;
}
.corp-page .corp-restock-product span{
  color:#3F4A55!important;
  opacity:1!important;
  font-weight:700!important;
}
.corp-page .corp-restock-price span{
  color:#53604D!important;
  opacity:1!important;
}
.corp-page .corp-restock-price strong{
  color:#17202B!important;
  opacity:1!important;
}
.corp-page .corp-restock-action span{
  color:#414B52!important;
  opacity:1!important;
  font-weight:700!important;
}

/* Business-desk floating notes: never allow the pale text to wash out. */
.corp-page .corp-showcase-note{
  background:#FBF6EE!important;
  opacity:1!important;
}
.corp-page .corp-showcase-note b{
  color:#914F53!important;
  opacity:1!important;
  font-weight:900!important;
}
.corp-page .corp-showcase-note span{
  color:#343033!important;
  opacity:1!important;
  font-weight:700!important;
}

/* Photo labels stay bright on the dark image strips. */
.corp-page .corp-showcase-photo span{
  color:#FFF9F2!important;
  opacity:1!important;
  font-weight:900!important;
  text-shadow:0 1px 2px rgba(0,0,0,.55)!important;
}

/* Supply scan badge */
.corp-page .corp-showcase-scan,
.corp-page .corp-showcase-scan b{
  color:#FFF9F2!important;
  opacity:1!important;
}

@media(max-width:620px){
  .corp-page .corp-restock-product span{font-size:13px!important}
  .corp-page .corp-restock-action span{font-size:12px!important}
  .corp-page .corp-showcase-note span{font-size:11px!important}
}

/* =========================================================
   CONTACT PAGE — HIGH VISIBILITY TEXT PASS
   Stronger contrast without changing content/layout.
   ========================================================= */
.ppr-contact,
.ppr-contact * {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.ppr-contact .ppr-contact-eyebrow,
.ppr-contact .ppr-contact-form__topline span,
.ppr-contact .ppr-contact-link__number,
.ppr-contact .ppr-contact-step__number {
    color: #8E4E52 !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}

.ppr-contact .ppr-contact-hero__title,
.ppr-contact .ppr-contact-head h2,
.ppr-contact .ppr-contact-title-lg,
.ppr-contact .ppr-contact-next__heading h2,
.ppr-contact .ppr-contact-map__copy h2,
.ppr-contact .ppr-contact-link__title,
.ppr-contact .ppr-contact-step__content h3,
.ppr-contact .ppr-contact-hero__info-item,
.ppr-contact .ppr-contact-form__topline strong,
.ppr-contact .ppr-contact-form__group label,
.ppr-contact .ppr-contact-location__item strong {
    color: #292426 !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}

.ppr-contact .ppr-contact-hero__text,
.ppr-contact .ppr-contact-head p,
.ppr-contact .ppr-contact-link__text,
.ppr-contact .ppr-contact-enquiry__title p,
.ppr-contact .ppr-contact-next__heading p,
.ppr-contact .ppr-contact-step__content p,
.ppr-contact .ppr-contact-map__copy > p,
.ppr-contact .ppr-contact-location__item span,
.ppr-contact .ppr-contact-form__note {
    color: #5A5150 !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

.ppr-contact .ppr-contact-form__control,
.ppr-contact .ppr-contact-form__select select,
.ppr-contact .ppr-contact-form__date input {
    color: #292426 !important;
    -webkit-text-fill-color: #292426 !important;
    font-weight: 600 !important;
}

.ppr-contact .ppr-contact-form__control::placeholder {
    color: #716866 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #716866 !important;
}

.ppr-contact .ppr-contact-enquiry__label,
.ppr-contact .ppr-contact-enquiry__label strong,
.ppr-contact .ppr-contact-enquiry__label span {
    color: #FFFDFC !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.ppr-contact .ppr-contact-cta__copy,
.ppr-contact .ppr-contact-cta__copy h2,
.ppr-contact .ppr-contact-cta__copy p,
.ppr-contact .ppr-contact-cta__copy .ppr-contact-eyebrow {
    color: #FFFFFF !important;
    opacity: 1 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.28);
}

.ppr-contact .ppr-contact-btn,
.ppr-contact .ppr-contact-form__submit {
    font-weight: 800 !important;
}

/* =========================================================
   CONTACT PAGE — DARK MODE HIGH VISIBILITY PASS
   ========================================================= */
html.ppr-dark-mode .ppr-contact,
html.ppr-dark-mode .ppr-contact * {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html.ppr-dark-mode .ppr-contact .ppr-contact-eyebrow,
html.ppr-dark-mode .ppr-contact .ppr-contact-form__topline span,
html.ppr-dark-mode .ppr-contact .ppr-contact-link__number,
html.ppr-dark-mode .ppr-contact .ppr-contact-step__number {
    color: #F0B7B8 !important;
    -webkit-text-fill-color: #F0B7B8 !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}

html.ppr-dark-mode .ppr-contact .ppr-contact-hero__title,
html.ppr-dark-mode .ppr-contact .ppr-contact-head h2,
html.ppr-dark-mode .ppr-contact .ppr-contact-title-lg,
html.ppr-dark-mode .ppr-contact .ppr-contact-next__heading h2,
html.ppr-dark-mode .ppr-contact .ppr-contact-map__copy h2,
html.ppr-dark-mode .ppr-contact .ppr-contact-link__title,
html.ppr-dark-mode .ppr-contact .ppr-contact-step__content h3,
html.ppr-dark-mode .ppr-contact .ppr-contact-hero__info-item,
html.ppr-dark-mode .ppr-contact .ppr-contact-form__topline strong,
html.ppr-dark-mode .ppr-contact .ppr-contact-form__group label,
html.ppr-dark-mode .ppr-contact .ppr-contact-location__item strong {
    color: #FFF9F5 !important;
    -webkit-text-fill-color: #FFF9F5 !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}

html.ppr-dark-mode .ppr-contact .ppr-contact-hero__text,
html.ppr-dark-mode .ppr-contact .ppr-contact-head p,
html.ppr-dark-mode .ppr-contact .ppr-contact-link__text,
html.ppr-dark-mode .ppr-contact .ppr-contact-enquiry__title p,
html.ppr-dark-mode .ppr-contact .ppr-contact-next__heading p,
html.ppr-dark-mode .ppr-contact .ppr-contact-step__content p,
html.ppr-dark-mode .ppr-contact .ppr-contact-map__copy > p,
html.ppr-dark-mode .ppr-contact .ppr-contact-location__item span,
html.ppr-dark-mode .ppr-contact .ppr-contact-form__note {
    color: #E8DEDA !important;
    -webkit-text-fill-color: #E8DEDA !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}

html.ppr-dark-mode .ppr-contact .ppr-contact-form__control,
html.ppr-dark-mode .ppr-contact .ppr-contact-form__select select,
html.ppr-dark-mode .ppr-contact .ppr-contact-form__date input {
    color: #FFF9F5 !important;
    -webkit-text-fill-color: #FFF9F5 !important;
    font-weight: 600 !important;
}

html.ppr-dark-mode .ppr-contact .ppr-contact-form__control::placeholder {
    color: #CFC2BC !important;
    -webkit-text-fill-color: #CFC2BC !important;
    opacity: 1 !important;
}

html.ppr-dark-mode .ppr-contact .ppr-contact-enquiry__label,
html.ppr-dark-mode .ppr-contact .ppr-contact-enquiry__label strong,
html.ppr-dark-mode .ppr-contact .ppr-contact-enquiry__label span,
html.ppr-dark-mode .ppr-contact .ppr-contact-cta__copy,
html.ppr-dark-mode .ppr-contact .ppr-contact-cta__copy h2,
html.ppr-dark-mode .ppr-contact .ppr-contact-cta__copy p {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    opacity: 1 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
}

html.ppr-dark-mode .ppr-contact .ppr-contact-link:hover .ppr-contact-link__title,
html.ppr-dark-mode .ppr-contact .ppr-contact-step:hover h3 {
    color: #FFFFFF !important;
}


/* =========================================================
   PAPERLY — MERGED FROM ZIP 1: style.css
   Appended unchanged below ZIP 2 stylesheet.
   ========================================================= */

/* =========================================================
   PAPERLY — GLOBAL BASE + NAVBAR
   Stationery & Office Supplies Store
   ========================================================= */


/* =========================================================
   1. ROOT DESIGN TOKENS
   ========================================================= */

:root {

    /* ---------- Brand Palette ---------- */

    --ppr-warm-porcelain: #F7F2EC;
    --ppr-autumn-ivory: #EFE5DA;
    --ppr-ink-charcoal: #2E292A;

    --ppr-dusty-rose: #A96768;
    --ppr-dusty-rose-dark: #8F5558;

    --ppr-sage-leaf: #747B68;
    --ppr-champagne-gold: #B79A67;

    --ppr-warm-taupe: #B9AAA0;

    /* Navbar active marker */
    --ppr-active-marker: rgba(169, 103, 104, 0.28);


    /* ---------- Typography ---------- */

    --ppr-font-family:
        "Manrope",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;


    /* ---------- Layout ---------- */

    --ppr-content-width: 1280px;

    --ppr-navbar-height: 82px;


    /* ---------- Radius ---------- */

    --ppr-radius-small: 8px;
    --ppr-radius-medium: 12px;
    --ppr-radius-large: 16px;


    /* ---------- Motion ---------- */

    --ppr-transition-fast: 200ms ease;
    --ppr-transition-normal: 280ms ease;
    --ppr-transition-slow: 400ms ease;


    /* ---------- Shadows ---------- */

    --ppr-navbar-shadow:
        0 8px 24px rgba(46, 41, 42, 0.07);

    --ppr-menu-shadow:
        -12px 0 40px rgba(46, 41, 42, 0.14);
}


/* =========================================================
   2. RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    margin: 0;

    background:
        var(--ppr-warm-porcelain);

    color:
        var(--ppr-ink-charcoal);

    font-family:
        var(--ppr-font-family);

    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;

    overflow-x: hidden;

    transition:
        background-color var(--ppr-transition-normal),
        color var(--ppr-transition-normal);
}


body.ppr-menu-open {
    overflow: hidden;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    border: 0;
    background: none;
    cursor: pointer;
}


a {
    color: inherit;
    text-decoration: none;
}


img,
svg {
    display: block;
    max-width: 100%;
}


ul,
ol {
    list-style: none;
}


/* =========================================================
   3. PAPERLY NAVBAR
   ========================================================= */

.ppr-navbar {
    position: sticky;
    top: 0;
    z-index: 5000;

    width: 100%;

    height: var(--ppr-navbar-height);

    background:
        rgba(239, 229, 218, 0.97);

    border-bottom:
        1px solid rgba(185, 170, 160, 0.38);

    box-shadow:
        var(--ppr-navbar-shadow);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transition:
        background-color var(--ppr-transition-normal),
        border-color var(--ppr-transition-normal),
        box-shadow var(--ppr-transition-normal);
}


.ppr-navbar__container {
    width: min(
        calc(100% - 48px),
        var(--ppr-content-width)
    );

    height: 100%;

    margin-inline: auto;

    display: flex;
    align-items: center;
}

.ppr-navbar--scrolled {
    box-shadow:
        0 10px 28px rgba(46, 41, 42, 0.11);
}
/* =========================================================
   4. BRAND
   ========================================================= */

.ppr-navbar__brand {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    gap: 11px;

    color:
        var(--ppr-ink-charcoal);

    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.8px;

    transition:
        color var(--ppr-transition-fast);
}


.ppr-navbar__brand:hover {
    color:
        var(--ppr-dusty-rose);
}


.ppr-navbar__logo {
    position: relative;

    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color:
        var(--ppr-sage-leaf);

    transition:
        transform var(--ppr-transition-normal),
        color var(--ppr-transition-fast);
}
.ppr-navbar__brand:hover .ppr-navbar__logo {
    transform: translateY(-1px);
}


.ppr-navbar__logo-svg {
    width: 100%;
    height: 100%;
}


.ppr-navbar__brand-name {
    white-space: nowrap;

    line-height: 1;

    font-weight: 700;
    letter-spacing: 1.4px;
}


/* =========================================================
   5. DESKTOP NAVIGATION
   ========================================================= */

.ppr-navbar__desktop-nav {
    margin-inline: auto;

    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 4px;
}


.ppr-navbar__nav-item {
    position: relative;

    height: 100%;

    display: flex;
    align-items: center;
}


.ppr-navbar__nav-link {
    position: relative;

    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    padding:
        0 12px;

    color:
        var(--ppr-ink-charcoal);

    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;

    transition:
        color var(--ppr-transition-fast);
}


.ppr-navbar__nav-link::before {
    content: "";

    position: absolute;
    z-index: 0;

    left: 3px;
    right: 3px;
    top: 50%;

    height: 36px;

    border-radius: 14px;

    background:
        var(--ppr-active-marker);

    opacity: 0;

    transform:
        translateY(-50%)
        scale(0.94);

    transform-origin: center;

    transition:
        opacity var(--ppr-transition-normal),
        transform var(--ppr-transition-normal);

    pointer-events: none;
}


.ppr-navbar__nav-link > * {
    position: relative;
    z-index: 1;
}


.ppr-navbar__nav-link:hover {
    color:
        var(--ppr-dusty-rose);
}


.ppr-navbar__nav-link--active {
    color:
        var(--ppr-ink-charcoal);
    isolation: isolate;
}


.ppr-navbar__nav-link--active::before {
    opacity: 1;

    transform:
        translateY(-50%)
        scale(1);
}


.ppr-navbar__dropdown-toggle {
    cursor: pointer;
}


.ppr-navbar__chevron {
    width: 15px;
    height: 15px;

    flex-shrink: 0;

    transition:
        transform var(--ppr-transition-normal);
}


.ppr-navbar__nav-item--dropdown.is-open
.ppr-navbar__chevron {
    transform:
        rotate(180deg);
}


/* =========================================================
   6. DESKTOP DROPDOWNS
   ========================================================= */

.ppr-navbar__dropdown {
    position: absolute;

    top: calc(100% - 2px);

    left: 50%;

    min-width: 210px;

    padding: 10px;

    background:
        var(--ppr-autumn-ivory);

    border:
        1px solid rgba(185, 170, 160, 0.48);

    box-shadow:
        0 18px 42px rgba(46, 41, 42, 0.13);

    border-radius:
        var(--ppr-radius-small);

    opacity: 0;
    visibility: hidden;

    transform:
        translate(-50%, 8px);

    transition:
        opacity var(--ppr-transition-fast),
        visibility var(--ppr-transition-fast),
        transform var(--ppr-transition-normal);
}


.ppr-navbar__nav-item--dropdown.is-open
.ppr-navbar__dropdown {
    opacity: 1;
    visibility: visible;

    transform:
        translate(-50%, 0);
}


.ppr-navbar__dropdown--products {
    min-width: 245px;
}


.ppr-navbar__dropdown-link {
    position: relative;

    width: 100%;

    display: flex;
    align-items: center;

    min-height: 42px;

    padding:
        9px 13px;

    border-radius:
        6px;

    color:
        var(--ppr-ink-charcoal);

    font-size: 13px;
    font-weight: 600;

    transition:
        color var(--ppr-transition-fast),
        background-color var(--ppr-transition-fast),
        padding var(--ppr-transition-fast);
}


.ppr-navbar__dropdown-link:hover {
    color:
        var(--ppr-dusty-rose);

    background:
        rgba(169, 103, 104, 0.10);

    padding-inline-start: 17px;
}


.ppr-navbar__dropdown-link--main {
    color:
        var(--ppr-dusty-rose);

    font-weight: 700;
}


.ppr-navbar__dropdown-link--details {
    color:
        var(--ppr-sage-leaf);

    font-weight: 700;
}


.ppr-navbar__dropdown-divider {
    display: block;

    width: 100%;

    height: 1px;

    margin:
        7px 0;

    background:
        rgba(185, 170, 160, 0.45);
}


/* =========================================================
   7. DESKTOP ACTIONS
   ========================================================= */

.ppr-navbar__actions {
    flex-shrink: 0;

    display: flex;
    align-items: center;

    gap: 8px;
}


.ppr-navbar__icon-button {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(46, 41, 42, 0.22);

    border-radius:
        50%;

    color:
        var(--ppr-ink-charcoal);

    background:
        transparent;

    transition:
        color var(--ppr-transition-fast),
        background-color var(--ppr-transition-fast),
        border-color var(--ppr-transition-fast),
        transform var(--ppr-transition-fast);
}


.ppr-navbar__icon-button:hover {
    color:
        var(--ppr-dusty-rose);

    border-color:
        var(--ppr-dusty-rose);

    background:
        rgba(169, 103, 104, 0.08);

    transform:
        translateY(-1px);
}


.ppr-navbar__theme-icon {
    width: 18px;
    height: 18px;
}


.ppr-navbar__theme-icon--sun {
    display: none;
}


.ppr-navbar__rtl-button {
    min-width: 42px;
    height: 40px;

    padding:
        0 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(46, 41, 42, 0.22);

    border-radius:
        var(--ppr-radius-small);

    color:
        var(--ppr-ink-charcoal);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;

    transition:
        color var(--ppr-transition-fast),
        background-color var(--ppr-transition-fast),
        border-color var(--ppr-transition-fast);
}


.ppr-navbar__rtl-button:hover {
    color:
        var(--ppr-dusty-rose);

    border-color:
        var(--ppr-dusty-rose);

    background:
        rgba(169, 103, 104, 0.08);
}


.ppr-navbar__enquiry-button {
    min-height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        0 18px;

    border-radius:
        var(--ppr-radius-small);

    background:
        var(--ppr-dusty-rose);

    color:
        var(--ppr-warm-porcelain);

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;

    box-shadow:
        0 7px 18px rgba(169, 103, 104, 0.18);

    transition:
        background-color var(--ppr-transition-fast),
        transform var(--ppr-transition-fast),
        box-shadow var(--ppr-transition-fast);
}


.ppr-navbar__enquiry-button:hover {
    background:
        var(--ppr-dusty-rose-dark);

    transform:
        translateY(-1px);

    box-shadow:
        0 10px 22px rgba(169, 103, 104, 0.25);
}


/* =========================================================
   8. MOBILE ACTIONS
   ========================================================= */

.ppr-navbar__mobile-actions {
    display: none;

    margin-inline-start: auto;

    align-items: center;

    gap: 7px;
}


.ppr-navbar__menu-button {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;
    align-content: center;

    gap: 5px;

    border:
        1px solid rgba(46, 41, 42, 0.22);

    border-radius:
        var(--ppr-radius-small);

    color:
        var(--ppr-ink-charcoal);

    transition:
        color var(--ppr-transition-fast),
        border-color var(--ppr-transition-fast),
        background-color var(--ppr-transition-fast);
}


.ppr-navbar__menu-button:hover {
    color:
        var(--ppr-dusty-rose);

    border-color:
        var(--ppr-dusty-rose);

    background:
        rgba(169, 103, 104, 0.08);
}


.ppr-navbar__menu-button span {
    width: 19px;
    height: 2px;

    border-radius: 4px;

    background:
        currentColor;

    transition:
        transform var(--ppr-transition-normal),
        opacity var(--ppr-transition-fast);
}


/* =========================================================
   9. MOBILE OVERLAY
   ========================================================= */

.ppr-mobile-overlay {
    position: fixed;

    inset: 0;

    z-index: 5998;

    background:
        rgba(46, 41, 42, 0.40);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity var(--ppr-transition-normal),
        visibility var(--ppr-transition-normal);
}


.ppr-mobile-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   10. MOBILE MENU
   ========================================================= */

.ppr-mobile-menu {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;

    z-index: 5999;

    width: min(90vw, 430px);

    background:
        var(--ppr-autumn-ivory);

    border-left:
        1px solid rgba(185, 170, 160, 0.40);

    box-shadow:
        var(--ppr-menu-shadow);

    transform:
        translateX(105%);

    visibility: hidden;

    transition:
        transform var(--ppr-transition-slow),
        visibility var(--ppr-transition-slow);

    overflow: hidden;
}


.ppr-mobile-menu.is-open {
    transform:
        translateX(0);

    visibility: visible;
}


.ppr-mobile-menu__inner {
    width: 100%;
    height: 100%;

    padding:
        24px 24px 22px;

    display: flex;
    flex-direction: column;

    overflow-y: auto;
    overscroll-behavior: contain;

    scrollbar-width: thin;

    scrollbar-color:
        var(--ppr-dusty-rose)
        transparent;
}


.ppr-mobile-menu__inner::-webkit-scrollbar {
    width: 5px;
}


.ppr-mobile-menu__inner::-webkit-scrollbar-thumb {
    background:
        var(--ppr-dusty-rose);

    border-radius: 10px;
}


/* =========================================================
   11. MOBILE MENU HEADER
   ========================================================= */

.ppr-mobile-menu__header {
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 28px;

    padding-bottom: 18px;

    border-bottom:
        1px solid rgba(185, 170, 160, 0.48);
}


.ppr-mobile-menu__label {
    color:
        var(--ppr-ink-charcoal);

    font-size: 18px;
    font-weight: 700;

    letter-spacing: 0.4px;
}


.ppr-mobile-menu__close {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color:
        var(--ppr-ink-charcoal);

    font-size: 13px;
    font-weight: 700;

    transition:
        color var(--ppr-transition-fast);
}


.ppr-mobile-menu__close:hover {
    color:
        var(--ppr-dusty-rose);
}


.ppr-mobile-menu__close svg {
    width: 22px;
    height: 22px;
}


/* =========================================================
   12. MOBILE NAVIGATION
   ========================================================= */

.ppr-mobile-menu__nav {
    display: flex;
    flex-direction: column;
}


.ppr-mobile-menu__item {
    border-bottom:
        1px solid rgba(185, 170, 160, 0.30);
}


.ppr-mobile-menu__link {
    position: relative;

    width: 100%;

    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        0 4px;

    color:
        var(--ppr-ink-charcoal);

    font-size: 16px;
    font-weight: 700;

    text-align: left;

    transition:
        color var(--ppr-transition-fast),
        padding var(--ppr-transition-fast);
}


.ppr-mobile-menu__link:hover {
    color:
        var(--ppr-dusty-rose);

    padding-inline-start: 8px;
}


.ppr-mobile-menu__link--active {
    color: var(--ppr-ink-charcoal);
    isolation: isolate;
}


.ppr-mobile-menu__link--active::before {
    content: "";

    position: absolute;
    z-index: -1;

    left: -8px;
    right: -8px;
    top: 50%;

    height: 42px;

    border-radius: 14px;

    background:
        var(--ppr-active-marker);

    transform:
        translateY(-50%);

    pointer-events: none;
}


.ppr-mobile-menu__dropdown-toggle {
    cursor: pointer;

    border: 0;
    background: transparent;
    font: inherit;
}


.ppr-mobile-menu__plus {
    color:
        var(--ppr-dusty-rose);

    font-size: 21px;
    font-weight: 500;

    line-height: 1;

    transition:
        transform var(--ppr-transition-normal);
}


.ppr-mobile-menu__item.is-open
.ppr-mobile-menu__plus {
    transform:
        rotate(45deg);
}


/* =========================================================
   13. MOBILE SUBMENU
   ========================================================= */

.ppr-mobile-menu__submenu {
    display: block;

    max-height: 0;

    overflow: hidden;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transition:
        max-height var(--ppr-transition-normal),
        opacity var(--ppr-transition-fast),
        visibility 0s linear var(--ppr-transition-normal);
}


.ppr-mobile-menu__item.is-open
.ppr-mobile-menu__submenu {
    max-height: 700px;

    visibility: visible;
    opacity: 1;

    pointer-events: auto;

    transition:
        max-height var(--ppr-transition-normal),
        opacity var(--ppr-transition-fast),
        visibility 0s linear 0s;
}


.ppr-mobile-menu__sublink {
    min-height: 42px;

    display: flex;
    align-items: center;

    padding:
        0 15px;

    color:
        var(--ppr-ink-charcoal);

    font-size: 14px;
    font-weight: 600;

    border-left:
        2px solid transparent;

    transition:
        color var(--ppr-transition-fast),
        border-color var(--ppr-transition-fast),
        background-color var(--ppr-transition-fast),
        padding var(--ppr-transition-fast);
}


.ppr-mobile-menu__sublink:hover {
    color:
        var(--ppr-dusty-rose);

    border-left-color:
        var(--ppr-dusty-rose);

    background:
        rgba(169, 103, 104, 0.08);

    padding-inline-start: 19px;
}


.ppr-mobile-menu__sublink--main {
    color:
        var(--ppr-dusty-rose);

    font-weight: 700;
}


.ppr-mobile-menu__sublink--details {
    color:
        var(--ppr-sage-leaf);

    font-weight: 700;
}


/* =========================================================
   14. MOBILE MENU FOOTER / ENQUIRY
   ========================================================= */

.ppr-mobile-menu__footer {
    margin-top: auto;

    padding-top: 28px;

    position: sticky;

    bottom: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            var(--ppr-autumn-ivory) 24%
        );
}


.ppr-mobile-menu__enquiry {
    width: 100%;

    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius:
        var(--ppr-radius-small);

    background:
        var(--ppr-dusty-rose);

    color:
        var(--ppr-warm-porcelain);

    font-size: 14px;
    font-weight: 700;

    box-shadow:
        0 8px 20px rgba(169, 103, 104, 0.18);

    transition:
        background-color var(--ppr-transition-fast),
        transform var(--ppr-transition-fast);
}


.ppr-mobile-menu__enquiry:hover {
    background:
        var(--ppr-dusty-rose-dark);

    transform:
        translateY(-1px);
}


/* =========================================================
   15. PRODUCTS TEST CONTENT
   ========================================================= */

.ppr-products-test {
    min-height: 180vh;
}


.ppr-products-test__hero {
    width: min(
        calc(100% - 48px),
        900px
    );

    min-height: 70vh;

    margin-inline: auto;

    padding:
        120px 0 100px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.ppr-products-test__eyebrow {
    margin-bottom: 16px;

    color:
        var(--ppr-dusty-rose);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 1.5px;
}


.ppr-products-test__title {
    max-width: 800px;

    margin-bottom: 24px;

    color:
        var(--ppr-ink-charcoal);

    font-size: 56px;
    font-weight: 700;

    line-height: 1.1;

    letter-spacing: -1.3px;
}


.ppr-products-test__text {
    max-width: 620px;

    color:
        rgba(46, 41, 42, 0.72);

    font-size: 16px;
    font-weight: 400;

    line-height: 1.6;
}


/* =========================================================
   16. FOCUS ACCESSIBILITY
   ========================================================= */

.ppr-navbar a:focus-visible,
.ppr-navbar button:focus-visible,
.ppr-mobile-menu a:focus-visible,
.ppr-mobile-menu button:focus-visible {
    outline:
        2px solid var(--ppr-dusty-rose);

    outline-offset:
        3px;
}


/* =========================================================
   17. LAPTOP
   ========================================================= */

@media (max-width: 1439px) {

    .ppr-navbar__container {
        width: min(
            calc(100% - 40px),
            1280px
        );
    }

    .ppr-navbar__brand-name {
        font-size: 17px;
    }

    .ppr-navbar__nav-link {
        padding-inline: 9px;
    }

    .ppr-navbar__enquiry-button {
        padding-inline: 15px;
    }
}


/* =========================================================
   18. TABLET
   ========================================================= */

@media (max-width: 1023px) {

    :root {
        --ppr-navbar-height: 76px;
    }

    .ppr-navbar__container {
        width: calc(100% - 32px);
    }

    .ppr-navbar__desktop-nav,
    .ppr-navbar__actions {
        display: none;
    }

    .ppr-navbar__mobile-actions {
        display: flex;
    }

    .ppr-navbar__brand-name {
        font-size: 17px;
    }

    .ppr-navbar__logo {
    width: 38px;
    height: 38px;
}
}


/* =========================================================
   19. MOBILE-L
   ========================================================= */

@media (max-width: 767px) {

    :root {
        --ppr-navbar-height: 70px;
    }

    .ppr-navbar__container {
        width: calc(100% - 28px);
    }

    .ppr-navbar__brand {
        gap: 8px;
    }

    .ppr-navbar__brand-name {
        font-size: 16px;
        letter-spacing: 1px;
    }

    .ppr-navbar__logo {
    width: 36px;
    height: 36px;
}

    .ppr-navbar__mobile-actions {
        gap: 5px;
    }

    .ppr-navbar__icon-button {
        width: 38px;
        height: 38px;
    }

    .ppr-navbar__rtl-button {
        min-width: 39px;
        height: 38px;

        padding-inline: 8px;
    }

    .ppr-navbar__menu-button {
        width: 39px;
        height: 38px;
    }

    .ppr-mobile-menu {
        width: min(91vw, 430px);
    }

    .ppr-mobile-menu__inner {
        padding:
            20px 20px 18px;
    }

    .ppr-products-test__hero {
        width: calc(100% - 36px);

        padding-top: 90px;
    }

    .ppr-products-test__title {
        font-size: 34px;
    }

    .ppr-products-test__text {
        font-size: 15px;
    }
}


/* =========================================================
   20. MOBILE-M
   ========================================================= */

@media (max-width: 575px) {

    .ppr-navbar__brand-name {
        font-size: 15px;
    }

   .ppr-navbar__logo {
    width: 34px;
    height: 34px;
}

    .ppr-navbar__icon-button {
        width: 36px;
        height: 36px;
    }

    .ppr-navbar__rtl-button {
        min-width: 37px;
        height: 36px;

        font-size: 11px;
    }

    .ppr-navbar__menu-button {
        width: 37px;
        height: 36px;
    }

    .ppr-navbar__theme-icon {
        width: 17px;
        height: 17px;
    }
}


/* =========================================================
   21. MOBILE-S
   ========================================================= */

@media (max-width: 374px) {

    :root {
        --ppr-navbar-height: 66px;
    }

    .ppr-navbar__container {
        width: calc(100% - 20px);
    }

    .ppr-navbar__brand {
        gap: 6px;
    }

    .ppr-navbar__brand-name {
        font-size: 13px;
        letter-spacing: 0.8px;
    }

    .ppr-navbar__logo {
    width: 32px;
    height: 32px;
}

    .ppr-navbar__mobile-actions {
        gap: 3px;
    }

    .ppr-navbar__icon-button {
        width: 34px;
        height: 34px;
    }

    .ppr-navbar__rtl-button {
        min-width: 34px;
        height: 34px;

        padding-inline: 6px;

        font-size: 10px;
    }

    .ppr-navbar__menu-button {
        width: 34px;
        height: 34px;
    }

    .ppr-mobile-menu__inner {
        padding:
            18px 16px 16px;
    }

    .ppr-mobile-menu__label {
        font-size: 16px;
    }

    .ppr-mobile-menu__link {
        min-height: 50px;

        font-size: 15px;
    }

    .ppr-mobile-menu__sublink {
        font-size: 13px;
    }

    .ppr-mobile-menu__enquiry {
        min-height: 49px;

        font-size: 13px;
    }

    .ppr-products-test__hero {
        width: calc(100% - 28px);
    }

    .ppr-products-test__title {
        font-size: 30px;
        letter-spacing: -0.8px;
    }

    .ppr-products-test__text {
        font-size: 15px;
    }
}


/* =========================================================
   22. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* =========================================================
   PAPERY - MOBILE MENU DROPDOWN TYPOGRAPHY FIX
   Keep Home and Products identical to other menu items
   ========================================================= */

.ppr-mobile-menu__dropdown-toggle {
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    font-style: normal;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    text-transform: none;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}

.ppr-mobile-menu__dropdown-toggle span:first-child {
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    font-style: normal;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}

/* =========================================================
   PAPERLY - GLOBAL FOOTER
   LIGHT MODE
   ========================================================= */

.ppr-footer {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;

    background: var(--ppr-footer-bg, #202124);
    color: var(--ppr-footer-text, #FFF8EC);
}


/* =========================================================
   BOTANICAL BACKGROUND
   ========================================================= */

.ppr-footer__botanical {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}


.ppr-footer__stem {
    position: absolute;
    width: 2px;
    height: 430px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(155, 163, 130, 0.28),
            transparent
        );

    transform-origin: bottom center;
}


.ppr-footer__stem--one {
    right: 7%;
    bottom: -70px;
    transform: rotate(28deg);
}


.ppr-footer__stem--two {
    left: 4%;
    bottom: -100px;
    height: 360px;
    transform: rotate(-25deg);
}


.ppr-footer__leaf {
    position: absolute;
    width: 74px;
    height: 34px;

    border: 1px solid rgba(155, 163, 130, 0.20);
    border-radius: 100% 0 100% 0;

    transform: rotate(-35deg);
}


.ppr-footer__leaf::after {
    content: "";
    position: absolute;

    width: 1px;
    height: 72px;

    left: 50%;
    top: -19px;

    background: rgba(155, 163, 130, 0.16);

    transform: rotate(42deg);
}


.ppr-footer__leaf--one {
    right: 10%;
    bottom: 95px;
    transform: rotate(24deg);
}


.ppr-footer__leaf--two {
    right: 3%;
    bottom: 210px;
    transform: rotate(-12deg) scale(0.72);
}


.ppr-footer__leaf--three {
    left: 4%;
    bottom: 80px;
    transform: rotate(-35deg) scale(0.8);
}


.ppr-footer__leaf--four {
    left: 10%;
    bottom: 220px;
    transform: rotate(15deg) scale(0.6);
}


/* =========================================================
   FOOTER INNER
   ========================================================= */

.ppr-footer__inner {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 1280px;

    margin: 0 auto;

    padding:
        82px
        40px
        68px;

    display: grid;

    grid-template-columns:
        minmax(240px, 1.45fr)
        minmax(130px, 0.75fr)
        minmax(150px, 0.85fr)
        minmax(150px, 0.85fr)
        minmax(260px, 1.35fr);

    column-gap: 44px;
    row-gap: 55px;

    box-sizing: border-box;
}


/* =========================================================
   BRAND
   ========================================================= */

.ppr-footer__brand {
    min-width: 0;
}


.ppr-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    color: #FFF8EC;
    text-decoration: none;
}


.ppr-footer__logo-mark {
    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--ppr-sage-leaf);

    border: 1px solid rgba(116, 123, 104, 0.55);
}


.ppr-footer__logo-svg {
    width: 25px;
    height: 25px;
    display: block;
}


.ppr-footer__logo-name {
    font-family: "Manrope", sans-serif;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 1.8px;
}


.ppr-footer__description {
    max-width: 320px;

    margin: 23px 0 22px;

    color: rgba(255, 248, 236, 0.74);

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
}


.ppr-footer__location {
    max-width: 320px;

    display: flex;
    align-items: flex-start;
    gap: 10px;

    color: rgba(255, 248, 236, 0.72);

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
}


.ppr-footer__location-icon {
    flex: 0 0 auto;
    color: #D59A9C;
    margin-top: 2px;
}


/* =========================================================
   SOCIAL
   ========================================================= */

.ppr-footer__social {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-top: 27px;
}


.ppr-footer__social-link {
    width: 36px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 248, 236, 0.18);

    color: rgba(255, 248, 236, 0.76);

    text-decoration: none;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


.ppr-footer__social-link:hover {
    color: #FFF8EC;
    background: #B56F72;
    border-color: #B56F72;

    transform: translateY(-2px);
}


/* =========================================================
   FOOTER HEADINGS
   ========================================================= */

.ppr-footer__heading {
    margin: 3px 0 22px;

    color: #FFF8EC;

    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}


.ppr-footer__links {
    list-style: none;

    margin: 0;
    padding: 0;
}


.ppr-footer__links li {
    margin: 0 0 13px;
}


.ppr-footer__links a {
    color: rgba(255, 248, 236, 0.68);

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;

    text-decoration: none;

    transition:
        color 0.25s ease,
        padding-left 0.25s ease;
}


.ppr-footer__links a:hover {
    color: #D59A9C;
    padding-left: 4px;
}


/* =========================================================
   SUPPORT
   ========================================================= */

.ppr-footer__support-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 25px;
    padding-top: 20px;

    border-top: 1px solid rgba(255, 248, 236, 0.12);
}


.ppr-footer__support-icon {
    color: #D59A9C;
    font-size: 15px;
    margin-top: 2px;
}


.ppr-footer__support-note strong,
.ppr-footer__support-note span {
    display: block;
}


.ppr-footer__support-note strong {
    margin-bottom: 4px;

    color: #FFF8EC;

    font-family: "Manrope", sans-serif;
    font-size: 12px;
    font-weight: 700;
}


.ppr-footer__support-note div span {
    color: rgba(255, 248, 236, 0.58);

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 400;
}


/* =========================================================
   NEWSLETTER
   ========================================================= */

.ppr-footer__eyebrow {
    display: block;

    margin-bottom: 12px;

    color: #D59A9C;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.7px;
}


.ppr-footer__newsletter-title {
    margin: 0 0 14px;

    color: #FFF8EC;

    font-family: "Manrope", sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.5px;
}


.ppr-footer__newsletter-text {
    max-width: 320px;

    margin: 0 0 21px;

    color: rgba(255, 248, 236, 0.66);

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.65;
}


.ppr-footer__newsletter-form {
    width: 100%;

    display: flex;
    align-items: stretch;

    border-bottom: 1px solid rgba(255, 248, 236, 0.28);
}


.ppr-footer__newsletter-input {
    width: 100%;
    min-width: 0;

    padding: 13px 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #FFF8EC;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 400;
}


.ppr-footer__newsletter-input::placeholder {
    color: rgba(255, 248, 236, 0.48);
}


.ppr-footer__newsletter-input:focus {
    border-color: #D59A9C;
}


.ppr-footer__newsletter-button {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 12px 0 12px 14px;

    border: 0;
    background: transparent;

    color: #D59A9C;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.ppr-footer__newsletter-button:hover {
    color: #FFF8EC;
}


.ppr-footer__newsletter-button:hover i {
    transform: translateX(3px);
}


.ppr-footer__newsletter-button i {
    transition: transform 0.25s ease;
}


.ppr-footer__newsletter-message {
    min-height: 18px;

    margin: 9px 0 0;

    color: #B8C0A1;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 500;
}


/* =========================================================
   FOOTER BOTTOM
   ========================================================= */

.ppr-footer__bottom {
    position: relative;
    z-index: 2;

    width: 100%;

    border-top:
        1px solid
        rgba(255, 248, 236, 0.12);
}


.ppr-footer__bottom-inner {
    width: 100%;
    max-width: 1280px;

    margin: 0 auto;

    padding:
        22px 40px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    column-gap: 25px;

    box-sizing: border-box;
}


.ppr-footer__copyright,
.ppr-footer__usa {
    margin: 0;

    color: rgba(255, 248, 236, 0.50);

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 400;
}


.ppr-footer__usa {
    text-align: right;
}


.ppr-footer__usa-mark {
    margin-right: 6px;

    color: #D59A9C;
    font-weight: 700;
    letter-spacing: 0.8px;
}


.ppr-footer__legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}


.ppr-footer__legal a {
    color: rgba(255, 248, 236, 0.54);

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 400;

    text-decoration: none;

    transition: color 0.25s ease;
}


.ppr-footer__legal a:hover {
    color: #D59A9C;
}


.ppr-footer__legal-divider {
    color: rgba(255, 248, 236, 0.22);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.ppr-footer__sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* =========================================================
    LAPTOP AND TABLET
    768px - 1199px
   ========================================================= */

@media (max-width: 1199px) {

    .ppr-footer__inner {
        grid-template-columns:
            1.4fr
            1fr
            1fr;

        column-gap: 35px;

        padding:
            68px 6%
            58px;
    }


    .ppr-footer__brand {
        grid-column: 1 / -1;
    }


    .ppr-footer__newsletter {
        grid-column: 1 / -1;

        max-width: 560px;
    }


    .ppr-footer__bottom-inner {
        padding-left: 6%;
        padding-right: 6%;
    }
}


/* =========================================================
   MOBILE
   375px - 767px
   ========================================================= */

@media (max-width: 767px) {

    .ppr-footer__inner {
        grid-template-columns: 1fr;

        gap: 38px;

        padding:
            56px 7%
            48px;
    }


    .ppr-footer__brand,
    .ppr-footer__newsletter {
        grid-column: auto;
    }


    .ppr-footer__description {
        max-width: 100%;
    }


    .ppr-footer__heading {
        margin-bottom: 16px;
    }


    .ppr-footer__links li {
        margin-bottom: 11px;
    }


    .ppr-footer__newsletter-title {
        font-size: 23px;
    }


    .ppr-footer__bottom-inner {
        grid-template-columns: 1fr;

        gap: 12px;

        padding:
            20px 7%;
        text-align: center;
    }


    .ppr-footer__copyright,
    .ppr-footer__usa {
        text-align: center;
    }


    .ppr-footer__legal {
        order: 2;
    }


    .ppr-footer__usa {
        order: 3;
    }
}


/* =========================================================
   SMALL MOBILE
   320px - 374px
   ========================================================= */

@media (max-width: 374px) {

    .ppr-footer__inner {
        padding:
            48px 6%
            42px;
    }


    .ppr-footer__logo-name {
        font-size: 17px;
    }


    .ppr-footer__description {
        font-size: 13px;
    }


    .ppr-footer__newsletter-title {
        font-size: 21px;
    }


    .ppr-footer__newsletter-form {
        display: block;

        border-bottom: 0;
    }


    .ppr-footer__newsletter-input {
        display: block;

        width: 100%;

        border-bottom:
            1px solid
            rgba(255, 248, 236, 0.28);
    }


    .ppr-footer__newsletter-button {
        padding-left: 0;
        padding-right: 0;
    }


    .ppr-footer__social-link {
        width: 34px;
        height: 34px;
    }
}

/* =========================================================
   PAPERLY FOOTER LOGO
   STACKED PAPER MONOGRAM
   ========================================================= */

.ppr-footer__logo-mark {
    width: 48px;
    height: 48px;

    display: inline-grid;
    place-items: center;

    flex-shrink: 0;

    line-height: 0;
}

.ppr-footer__logo-svg {
    width: 100%;
    height: 100%;

    display: block;
}

:root{--bg:#f7efe6;--bg2:#efe3d5;--ink:#2b2426;--rose:#b9737a;--rose-d:#8f4f58;--blush:#ecc9c6;--sage:#9aa78b;--taupe:#8a7a70;--gold:#c2a36b;--ivory:#fbf6ef;--line:rgba(43,36,38,.16);--e:cubic-bezier(.2,.7,.2,1)}
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{font-family:'Manrope',sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;overflow-x:hidden;transition:background .5s,color .5s}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:99;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}em{font-style:normal;color:var(--rose)}
h1,h2,h3{line-height:1.1;letter-spacing:-.03em;font-weight:700}
h2{font-size:clamp(28px,4vw,56px)}h3{font-size:clamp(19px,1.8vw,24px);font-weight:600}
.eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:#000000;margin-bottom:18px}
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--rose);z-index:200}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;font:600 14px 'Manrope';border:1px solid transparent;cursor:pointer;transition:.4s var(--e);border-radius:2px}
.btn.sm{padding:10px 20px}.btn-p{background:var(--rose);color:#fff8f0}.btn-p:hover{background:var(--rose-d);transform:translateY(-3px);box-shadow:0 14px 30px -12px var(--rose)}
.btn-o{border-color:var(--ink)}.btn-o:hover{background:var(--rose);border-color:var(--rose);color:#fff}
.btn-l{background:var(--ivory);color:var(--rose-d)}.btn-l:hover{transform:translateY(-3px);background:#fff}
.btn b{transition:.3s}.btn:hover b{transform:translateX(5px)}
.ulink{font-weight:600;border-bottom:1px solid var(--rose);padding-bottom:3px;display:inline-block;transition:.3s}.ulink:hover{color:var(--rose);letter-spacing:.03em}
.reveal{opacity:0;transform:translateY(40px);transition:1s var(--e)}.reveal.in{opacity:1;transform:none}
/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:18px 5vw;transition:.4s;color:var(--ink)}
.nav.solid{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);padding:12px 5vw;border-bottom:1px solid var(--line)}
.logo{display:flex;gap:10px;align-items:center;color:var(--rose)}.logo span{font-weight:700;letter-spacing:.28em;font-size:16px;color:var(--ink);display:flex;flex-direction:column;line-height:1.1}.logo small{font-size:7px;letter-spacing:.2em;font-weight:500;color:var(--taupe);text-transform:uppercase}
.links{display:flex;gap:34px}.links a{font-size:14px;font-weight:500;position:relative}.links a::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--rose);transition:.4s var(--e)}.links a:hover::after{width:100%}
.nav-r{display:flex;align-items:center;gap:16px}.theme{background:none;border:0;color:inherit;cursor:pointer;transition:.5s}.theme:hover{transform:rotate(90deg);color:var(--rose)}
.burger{display:none;background:none;border:0;width:28px;height:18px;position:relative;cursor:pointer}.burger i{position:absolute;left:0;height:2px;width:100%;background:var(--ink);transition:.3s}.burger i:first-child{top:4px}.burger i:last-child{bottom:4px}
/* art placeholders (swap for photos) */
.art{position:relative;overflow:hidden;background:linear-gradient(145deg,var(--blush),var(--rose))}
/* hero */
.hero{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;position:relative}
.hero-l{padding:16vh 4vw 10vh 5vw;display:flex;flex-direction:column;justify-content:center;position:relative}
.hero h1{font-size:clamp(52px,8.6vw,132px);font-weight:800;letter-spacing:-.05em;margin-bottom:28px}
.line{display:block;overflow:hidden;animation:up 1.2s var(--e) both}.line:nth-child(2){animation-delay:.12s}.line:nth-child(3){animation-delay:.24s}.line.rose{color:var(--rose);font-style:italic}
@keyframes up{from{transform:translateY(105%)}to{transform:none}}
.lead{max-width:440px;color:var(--taupe);margin-bottom:34px;font-size:17px}.row{display:flex;gap:14px;flex-wrap:wrap}
.scrollcue{position:absolute;left:5vw;bottom:5vh;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--taupe);padding-left:50px}.scrollcue::before{content:"";position:absolute;left:0;top:50%;width:36px;height:1px;background:var(--rose);animation:cue 2s infinite}
@keyframes cue{50%{transform:scaleX(.3);transform-origin:left}}
.hero-r{position:relative;padding:0}
.art-hero{position:absolute;inset:0;border-radius:0 0 0 45% / 0 0 0 30%;background:linear-gradient(160deg,#e9c3bf 0%,#c98a90 55%,#8f4f58 100%);animation:fade 1.6s both}
@keyframes fade{from{opacity:0;transform:scale(1.06)}}
.art-hero>*{position:absolute}
.sun{width:38vw;height:38vw;max-width:520px;max-height:520px;border-radius:50%;top:-8%;right:-8%;background:radial-gradient(circle,rgba(255,240,220,.7),transparent 65%);animation:pulse 8s infinite alternate}
@keyframes pulse{to{transform:scale(1.15)}}
.notebook{width:58%;height:34%;bottom:14%;left:10%;background:linear-gradient(120deg,#a85d68,#7d3f4b);transform:rotate(-8deg);box-shadow:0 40px 60px -20px rgba(0,0,0,.4);border-radius:3px 14px 14px 3px}
.notebook::after{content:"";position:absolute;left:12%;top:0;bottom:0;width:2px;background:var(--gold);opacity:.7}
.pen{width:6px;height:52%;bottom:26%;right:26%;background:linear-gradient(#2b2426,#2b2426 85%,var(--gold) 86%);transform:rotate(18deg);border-radius:4px;box-shadow:0 20px 30px -10px rgba(0,0,0,.4)}
.cup{width:22%;height:26%;top:20%;left:14%;background:repeating-linear-gradient(90deg,#f0b8b4 0 8px,#e4a09f 8px 16px);border-radius:6px 6px 22px 22px;animation:float 6s ease-in-out infinite}
.sprig{width:26%;right:8%;top:14%;color:#fbe9df;opacity:.85;transform-origin:bottom;animation:sway 6s ease-in-out infinite}
@keyframes sway{50%{transform:rotate(5deg)}}@keyframes float{50%{transform:translateY(-12px)}}
.script{position:absolute;right:6%;bottom:8%;font-style:italic;font-weight:500;color:#fff6ec;font-size:clamp(16px,2vw,26px);text-align:right}
/* hero scattered images (no frames) */
.hero-collage{inset:0;z-index:2}
.hc{
  position:absolute;
  height:auto;
  object-fit:contain;
  border:0;background:none;border-radius:0;overflow:visible;
  filter:drop-shadow(0 26px 22px rgba(43,36,38,.35));
  pointer-events:none;
}

/* pen: large, left-centre */
.hc-1{left:50%;top:6%;width:46%;max-height:31%;rotate:-4deg;
      animation:float 7s ease-in-out infinite}
/* notebook: top right */
.hc-2{right:47%;top:9%;width:56%;max-height:86%;rotate:7deg;
      animation:float 6s ease-in-out infinite -2s}
/* desk calendar: lower right, above the tagline */
.hc-3{right:36%;top:48%;width:31%;max-height:44%;rotate:-6deg;
      animation:float 8s ease-in-out infinite -4s}

.script{z-index:3}

@media(max-width:980px){
  .hc-1{left:4%;top:6%;width:46%;max-height:74%}
  .hc-2{right:2%;top:8%;width:38%;max-height:40%}
  .hc-3{right:8%;top:50%;width:36%;max-height:34%}
}
@media(prefers-reduced-motion:reduce){.hc{animation:none}}
/* marquee */
.marquee{overflow:hidden;background:var(--ink);color:var(--bg);padding:18px 0;white-space:nowrap}
.track{display:inline-flex;gap:34px;animation:mq 28s linear infinite;font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:13px}.track i{color:var(--gold)}.marquee:hover .track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
/* story */
.story{position:relative;min-height:110vh;padding:16vh 5vw;display:grid;grid-template-columns:repeat(12,1fr);align-items:center}
.story-num{position:absolute;top:6vh;right:4vw;font-size:clamp(120px,22vw,340px);font-weight:800;color:transparent;-webkit-text-stroke:1px var(--line);line-height:1}
.story-img{position:relative;grid-row:1}.story-img.a{grid-column:1/6;height:68vh;z-index:1}.story-img.b{grid-column:4/8;height:34vh;align-self:end;margin-bottom:-6vh;z-index:3}
.story-img .art{height:100%;box-shadow:0 30px 60px -30px rgba(0,0,0,.4)}
.art-a{background:radial-gradient(circle at 70% 25%,#fdf0e2 0 12%,transparent 13%),linear-gradient(170deg,#d9b9a3,#b9737a 70%);border-radius:200px 200px 0 0}
.art-b{background:linear-gradient(135deg,var(--sage),#6f7d63);border-radius:0 80px 0 80px;border:10px solid var(--bg)}
.story-txt{grid-column:8/13;grid-row:1;position:relative;z-index:2;margin-left:0vw}.story-txt h2{font-size:clamp(34px,5vw,74px);margin-bottom:26px}.story-txt p:not(.eyebrow){color:var(--taupe);margin-bottom:18px;max-width:440px}
.story-txt .ulink{margin-top:14px}
/* collection */
.p1{background:linear-gradient(120deg,transparent 46%,#2b2426 46% 48%,transparent 48%),linear-gradient(120deg,#f3dfd3,#e2b5ae)}
.p2{background:linear-gradient(160deg,#c98a90,#8f4f58)}.p3{background:repeating-linear-gradient(90deg,#8f4f58 0 40px,#6b6058 40px 80px,#a85d68 80px 120px)}
.p4{background:linear-gradient(200deg,#c9a68a,#8a5e46)}.p5{background:linear-gradient(140deg,#fbf6ef,#e6d5c3)}
/* experience */
.experience{position:relative;padding:14vh 5vw 16vh;min-height:100vh;overflow:hidden}
.curve{position:absolute;inset:0;width:100%;height:100%;color:var(--rose);opacity:.55}
.exp-head{position:relative;max-width:600px;z-index:2}.exp-head h2{margin-top:6px}
.steps{position:relative;height:60vh;min-height:480px}
.step{position:absolute;max-width:230px}.step b{font-size:60px;color:transparent;-webkit-text-stroke:1px var(--rose);display:block;line-height:1}
.step svg{width:34px;height:34px;fill:none;stroke:var(--rose);stroke-width:1.5;margin:10px 0}.step p{color:var(--taupe);font-size:15px;margin-top:6px}
.s1{left:0;top:18%}.s2{left:27%;top:52%}.s3{left:55%;top:8%}.s4{right:2%;top:46%}
.step:hover svg{animation:float 1.2s infinite}
/* showcase */
.showcase{position:relative;height:120vh;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#fff8f0;text-align:center}
.show-bg{position:absolute;inset:-15% 0;background:radial-gradient(circle at 30% 30%,rgba(255,225,200,.5),transparent 40%),linear-gradient(160deg,#6f7d63 0%,#8f4f58 50%,#2b2426 100%)}
.show-layer{position:absolute;border-radius:50%;filter:blur(2px)}.l1{width:40vw;height:40vw;left:-8vw;bottom:-10vw;background:rgba(236,201,198,.25)}.l2{width:22vw;height:22vw;right:8vw;top:12vh;background:rgba(194,163,107,.3)}
.show-txt{position:relative;z-index:2;max-width:760px;padding:0 6vw}.huge{font-size:clamp(50px,10vw,150px);font-weight:800;letter-spacing:-.05em;margin-bottom:16px}.showcase em{color:var(--blush);font-style:italic}
.outline{position:absolute;bottom:-2vw;left:50%;transform:translateX(-50%);font-size:24vw;font-weight:800;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.25);letter-spacing:-.04em;line-height:1;pointer-events:none}
/* corporate */
.corp{display:grid;grid-template-columns:1.2fr 1fr;background:var(--rose);color:#fff8f0;position:relative;clip-path:polygon(0 6vw,100% 0,100% calc(100% - 6vw),0 100%);margin:-3vw 0;padding:16vh 6vw;gap:6vw;align-items:center;z-index:2}
.corp .eyebrow{color:var(--gold)}.corp em{color:var(--blush);font-style:italic}.corp h2{margin-bottom:20px}.corp p{max-width:440px;margin-bottom:28px;opacity:.9}
.corp-r{list-style:none}.corp-r li{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.3);display:flex;align-items:baseline;gap:20px}.corp-r strong{font-size:clamp(44px,6vw,84px);letter-spacing:-.04em;min-width:2.4ch}.corp-r span{font-size:14px;opacity:.85}
/* voices */
.voices{position:relative;min-height:120vh;padding:22vh 6vw 14vh;overflow:hidden}
.bigq{position:absolute;top:2vh;left:3vw;font-size:40vw;line-height:.8;color:var(--blush);opacity:.4;font-weight:800}
.voices blockquote{position:relative;z-index:2;font-weight:700;letter-spacing:-.03em;line-height:1.12}.voices cite{display:block;font-size:13px;font-weight:500;font-style:normal;letter-spacing:.15em;text-transform:uppercase;color:var(--taupe);margin-top:18px}
.q1{font-size:clamp(30px,5.4vw,80px);max-width:70%}.q2{font-size:clamp(20px,2.4vw,32px);margin:8vh 0 0 auto;max-width:360px;border-left:3px solid var(--sage);padding-left:24px}.q3{font-size:clamp(26px,3.6vw,52px);margin:-2vh 0 0 18%;max-width:520px;transform:rotate(-2deg)}.q3.in{transform:rotate(-2deg)}
.float{position:absolute;border-radius:50%}.f1{width:16vw;height:16vw;right:6vw;top:14vh;background:var(--sage);opacity:.5}.f2{width:9vw;height:9vw;left:8vw;bottom:10vh;background:var(--rose);opacity:.6}.f3{width:120px;height:240px;right:22vw;bottom:8vh;background:var(--blush);border-radius:100px 100px 0 0;opacity:.7}
/* cta + footer */
.cta{min-height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14vh 6vw;background:radial-gradient(ellipse at 50% 120%,var(--blush),transparent 60%)}
.cta h2{font-size:clamp(44px,9vw,140px);font-weight:800;letter-spacing:-.05em;max-width:1100px;margin-bottom:44px}
.mini{display:flex;border-bottom:1px solid var(--ink);max-width:520px;width:100%;gap:10px}.mini input{flex:1;background:none;border:0;padding:16px 0;font:500 16px 'Manrope';color:var(--ink);outline:0}.mini input::placeholder{color:var(--taupe)}.mini .btn{margin-bottom:8px}.mini:focus-within{border-color:var(--rose)}
.ok{margin-top:16px;color:var(--sage);font-weight:600;min-height:24px}
.foot{background:#1f1b1c;color:#f6ede2;padding:10vh 5vw 5vh;display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:40px}
.wm{font-size:clamp(60px,14vw,220px);font-weight:800;letter-spacing:-.05em;line-height:.8;color:var(--rose)}
.fr{text-align:right;font-size:14px;opacity:.85}.fr nav{display:flex;gap:26px;justify-content:flex-end;margin-bottom:18px}.fr nav a:hover{color:var(--rose)}.fr .c{opacity:.55;margin-top:8px;font-size:12px}
/* responsive */
@media(max-width:980px){
 .links{position:fixed;inset:0 0 auto 0;top:0;flex-direction:column;background:var(--bg);padding:100px 8vw 40px;gap:22px;transform:translateY(-110%);transition:.5s var(--e);font-size:22px}.links.open{transform:none}.links a{font-size:22px}
 .burger{display:block;z-index:120}.nav .btn{display:none}
 .hero{grid-template-columns:1fr}.hero-r{height:60vh;order:-1}.hero-l{padding-top:6vh}.art-hero{border-radius:0 0 50% 0/0 0 20% 0}
 .story{display:block;padding:12vh 6vw}.story-img.a{height:50vh;width:75%}.story-img.b{height:26vh;width:50%;margin:-10vh 0 0 auto}.story-txt{margin:6vh 0 0}
 .experience{padding-bottom:8vh}.steps{height:auto;display:grid;gap:40px;margin-top:6vh}.step{position:static;max-width:none}
 .corp{grid-template-columns:1fr;clip-path:polygon(0 3vw,100% 0,100% calc(100% - 3vw),0 100%);padding:14vh 6vw}
 .q1{max-width:100%}.q3{margin-left:0}.f3{display:none}.fr{text-align:left}.fr nav{justify-content:flex-start}.drag{margin-left:0}
}
@media(max-width:520px){.mini{flex-direction:column;border:0;gap:12px}.mini input{border-bottom:1px solid var(--ink)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* gradient carousel */
@property --c1{syntax:'<color>';inherits:true;initial-value:#e9c3bf}
@property --c2{syntax:'<color>';inherits:true;initial-value:#b9737a}
@property --c3{syntax:'<color>';inherits:true;initial-value:#8f4f58}
.gcar{position:relative;padding:14vh 0 10vh;overflow:hidden;transition:--c1 1.3s ease,--c2 1.3s ease,--c3 1.3s ease}
.gcar-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,color-mix(in srgb,var(--c2) 55%,var(--bg)),transparent 62%),radial-gradient(circle at 12% 8%,color-mix(in srgb,var(--c1) 65%,var(--bg)),transparent 46%),radial-gradient(circle at 92% 96%,color-mix(in srgb,var(--c3) 45%,var(--bg)),transparent 52%),var(--bg2)}
.gcar>*:not(.gcar-bg){position:relative}
.gcar-head{padding:0 5vw 4vh;display:flex;justify-content:space-between;align-items:end;gap:4vw;flex-wrap:wrap}.gcar-head h2{font-size:clamp(46px,8vw,120px)}
.gcar-hint{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
.gcar-stage{height:clamp(420px,62vh,600px);perspective:1500px;display:flex;justify-content:center;align-items:center;touch-action:pan-y;cursor:grab;outline:0;user-select:none}
.gcar-stage:active{cursor:grabbing}
.gcard{position:absolute;width:clamp(210px,24vw,330px);aspect-ratio:3/4;transform-style:preserve-3d;z-index:var(--z,1);opacity:var(--op,1);
 transform:translateX(calc(var(--o,0)*var(--dir,1)*60%)) translateZ(calc(var(--a,0)*-200px)) rotateY(calc(var(--o,0)*var(--dir,1)*-36deg)) scale(calc(1 - var(--a,0)*.06));
 transition:transform 1s var(--e),opacity .9s,filter .9s;filter:saturate(.75) brightness(.94)}
.gcard.on{filter:none}
.gcard .tilt{position:absolute;inset:0;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--e);transform-style:preserve-3d}
.gcard .art{position:absolute;inset:0;box-shadow:0 44px 70px -30px rgba(43,36,38,.5)}
.gcard .art::after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,248,240,.4)}
.gcard .art img{width:100%;height:100%;object-fit:cover;display:block}
.gcard .tag{position:absolute;left:26px;bottom:24px;color:#fff8f0;font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:12px;transform:translateZ(30px)}
.gcard:not(.on){cursor:pointer}
.gcar-info{text-align:center;padding:2vh 6vw 0;min-height:200px}
.gnum{font-size:12px;letter-spacing:.3em;color:#000000;font-weight:600;margin-bottom:10px}
.gcar-info h3{font-size:clamp(34px,5vw,72px);font-weight:700;letter-spacing:-.04em;line-height:1}
.gcar-info p:not(.gnum){color:var(--taupe);margin:14px auto 18px;max-width:420px}
.gcar-info.swap>*{animation:gswap .8s var(--e) both}.gcar-info.swap>*:nth-child(2){animation-delay:.06s}.gcar-info.swap>*:nth-child(3){animation-delay:.12s}.gcar-info.swap>*:nth-child(4){animation-delay:.18s}
@keyframes gswap{from{opacity:0;transform:translateY(18px)}}
.gcar-ctl{display:flex;justify-content:center;align-items:center;gap:26px;padding-top:4vh}
.gcar-ctl button{width:48px;height:48px;background:none;border:1px solid var(--ink);color:var(--ink);font-size:18px;cursor:pointer;transition:.4s var(--e)}
.gcar-ctl button:hover{background:var(--rose);border-color:var(--rose);color:#fff;transform:translateY(-3px)}
.gdots{display:flex;gap:10px}.gdots i{width:22px;height:2px;background:var(--line);cursor:pointer;transition:.5s var(--e)}.gdots i.on{width:56px;background:var(--rose)}
@media(max-width:980px){.gcar-hint{display:none}.gcard{transform:translateX(calc(var(--o,0)*var(--dir,1)*62%)) translateZ(calc(var(--a,0)*-160px)) rotateY(calc(var(--o,0)*var(--dir,1)*-28deg)) scale(calc(1 - var(--a,0)*.06))}}

/* comparison slider */
.cmp{position:relative;padding:16vh 6vw 16vh;overflow:hidden}
.cmp::before{content:"";position:absolute;right:-12vw;top:6vh;width:38vw;height:38vw;border-radius:50%;background:color-mix(in srgb,var(--sage) 32%,transparent);filter:blur(2px)}
.cmp>*{position:relative}.cmp>svg{position:absolute}
.cmp-head{display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:5vw;margin-bottom:8vh}
.cmp-head h2{font-size:clamp(42px,7.4vw,112px);font-weight:800;letter-spacing:-.05em}
.cmp-head p:not(.eyebrow){color:var(--taupe);max-width:400px;justify-self:end}
.cmp-stage{position:relative;width:88%;margin-inline:auto 0;aspect-ratio:16/9;max-height:78vh;direction:ltr;user-select:none;touch-action:pan-y;cursor:ew-resize;--p:50;box-shadow:0 50px 80px -44px rgba(43,36,38,.5)}
.cmp-stage::before{content:"";position:absolute;inset:0;border:1px solid var(--rose);transform:translate(-24px,24px);z-index:-1}
.cmp-layer{position:absolute;inset:0;overflow:hidden}
.cmp-layer svg{position:absolute;inset:4% 5%;width:90%;height:92%}
.cmp-layer.after{background:radial-gradient(circle at 68% 28%,#fdeee2,#f1d5c8 58%,#e6bfb5)}
.cmp-layer.before{background:linear-gradient(rgba(43,36,38,.07) 1px,transparent 1px) 0 0/34px 34px,linear-gradient(90deg,rgba(43,36,38,.07) 1px,transparent 1px) 0 0/34px 34px,#fbf6ef;clip-path:inset(0 calc(100% - var(--p)*1%) 0 0)}
.cmp-layer.before svg{filter:url(#wobble)}
.sk{fill:none;stroke:#5b4d49;--hatch:.6}.col{stroke:#5d4143;--hatch:.14;--sun:#f8dcc8;--shadow:#dcb2a8;--nb:#b9737a;--nb2:#8f4f58;--lab:#fbf6ef;--cup:#ecc9c6;--p1:#9aa78b;--p2:#c2a36b;--p3:#8f4f58;--tip:#ead5bb;--lead:#2b2426;--leaf:#9aa78b;--flw:#f3b9b6}
.f-sun{fill:var(--sun,none)}.f-shadow{fill:var(--shadow,none);stroke:none}.f-nb{fill:var(--nb,none)}.f-nb2{fill:var(--nb2,none)}.f-lab{fill:var(--lab,none)}.f-cup{fill:var(--cup,none)}.f-p1{fill:var(--p1,none)}.f-p2{fill:var(--p2,none)}.f-p3{fill:var(--p3,none)}.f-tip{fill:var(--tip,none)}.f-lead{fill:var(--lead,none)}.f-leaf{fill:var(--leaf,none)}.f-flw{fill:var(--flw,none)}
.hatch{stroke-opacity:var(--hatch,.5);stroke-width:1.6}
.cmp-tag{position:absolute;top:22px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:700}.cmp-tag.l{left:24px;color:#5b4d49}.cmp-tag.r{right:24px;color:var(--rose-d)}
.cmp-line{position:absolute;top:0;bottom:0;left:calc(var(--p)*1%);width:2px;margin-left:-1px;background:#fff8f0;z-index:3;box-shadow:0 0 18px rgba(0,0,0,.25)}
.cmp-knob{position:absolute;top:50%;left:calc(var(--p)*1%);z-index:4;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;border:0;background:var(--rose);color:#fff8f0;font-size:24px;display:flex;align-items:center;justify-content:center;gap:4px;cursor:ew-resize;box-shadow:0 12px 30px -8px rgba(143,79,88,.7);transition:transform .35s var(--e),background .3s;outline:0}
.cmp-knob:hover,.cmp-knob:focus-visible{transform:translate(-50%,-50%) scale(1.12);background:var(--rose-d)}
.cmp-cap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;width:88%;margin:5vh 0 0 auto;font-size:14px;color:var(--taupe)}
.cmp-modes{display:flex;align-items:center;gap:18px}.cmp-modes span{font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.cmp-modes button{background:none;border:0;border-bottom:1px solid transparent;font:600 14px 'Manrope';color:var(--ink);padding:4px 0;cursor:pointer;transition:.3s}.cmp-modes button.on,.cmp-modes button:hover{border-color:var(--rose);color:var(--rose)}
@media(max-width:720px){.cmp-head{grid-template-columns:1fr}.cmp-head p:not(.eyebrow){justify-self:start}.cmp-stage,.cmp-cap{width:100%}.cmp-stage{aspect-ratio:4/3}.cmp-stage::before{transform:translate(-10px,10px)}.cmp-knob{width:48px;height:48px;font-size:20px}}

/* ==========================================================
   404 PAGE  (scoped to body.nf-body)
   ========================================================== */
/* Paperly — 404 page (same palette + Manrope, self-contained) */
.nf-body{min-height:100vh;display:flex;flex-direction:column}
.nf-body .chip{display:inline-block;font-size:13px;font-weight:600;color:var(--rose-d);background:color-mix(in srgb,var(--blush) 60%,transparent);padding:8px 16px;border-radius:99px;margin-bottom:22px}

.nf-body .nf-wrap{position:relative;flex:1;min-height:88vh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:16vh 5vw 8vh}
.nf-body .blob{position:absolute;filter:blur(50px);opacity:.7;border-radius:50%;animation:morphN 15s ease-in-out infinite alternate;z-index:0}
.nf-body .nb1{width:40vw;height:40vw;left:-10vw;top:-6vw;background:var(--blush)}
.nf-body .nb2{width:34vw;height:34vw;right:-8vw;bottom:-10vw;background:var(--sage);opacity:.4;animation-delay:-6s}
@keyframes morphN{0%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;transform:translate(0,0) rotate(0)}100%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%;transform:translate(3vw,3vh) rotate(30deg)}}

.nf-body .nf-c{position:relative;z-index:2;max-width:720px}
.nf-body .nf-num{display:flex;justify-content:center;align-items:center;gap:.05em;font-size:clamp(90px,16vw,220px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--rose);margin-bottom:6px}
.nf-body .nf-num span{display:inline-block;animation:popN .8s var(--e) both}
.nf-body .nf-num span:nth-child(2){animation-delay:.1s}.nf-body .nf-num span:nth-child(3){animation-delay:.2s}
@keyframes popN{from{opacity:0;transform:translateY(40px) scale(.7)}to{opacity:1;transform:none}}
.nf-body .pen-o{position:relative;color:var(--ink)}
.nf-body .pen-o::after{content:"";position:absolute;left:50%;top:8%;width:6px;height:70%;background:linear-gradient(#2b2426 85%,var(--gold) 86%);border-radius:4px;transform:translateX(-50%) rotate(28deg);box-shadow:0 14px 18px -8px rgba(0,0,0,.4);animation:penFloat 4s ease-in-out infinite}
@keyframes penFloat{50%{transform:translateX(-50%) rotate(28deg) translateY(-8px)}}
.nf-body .scribble{display:block;width:min(280px,50%);margin:6px auto 22px;color:var(--rose);stroke-dasharray:460;stroke-dashoffset:460;animation:drawN 1.4s .5s var(--e) forwards}
@keyframes drawN{to{stroke-dashoffset:0}}
.nf-body .nf-c h2{font-size:clamp(24px,3.2vw,38px);font-weight:800;letter-spacing:-.03em;margin-bottom:14px;opacity:0;animation:fadeN .8s .7s var(--e) forwards}
.nf-body .nf-c .lead{max-width:460px;margin:0 auto 30px;color:var(--taupe);opacity:0;animation:fadeN .8s .85s var(--e) forwards}
.nf-body .nf-c .row{justify-content:center;opacity:0;animation:fadeN .8s 1s var(--e) forwards}
@keyframes fadeN{to{opacity:1}}

.nf-body .nf-search{position:relative;max-width:420px;margin:34px auto 0;display:flex;opacity:0;animation:fadeN .8s 1.15s var(--e) forwards}
.nf-body .nf-search input{flex:1;font:500 15px 'Manrope';padding:15px 20px;border:1px solid var(--line);border-radius:99px 0 0 99px;background:var(--ivory);color:var(--ink);outline:none;transition:.3s var(--e)}
.nf-body .nf-search input:focus{border-color:var(--rose);box-shadow:0 0 0 4px color-mix(in srgb,var(--rose) 16%,transparent)}
.nf-body .nf-search button{border:1px solid var(--rose);background:var(--rose);color:#fff8f0;padding:0 22px;border-radius:0 99px 99px 0;cursor:pointer;display:flex;align-items:center;transition:.3s var(--e)}
.nf-body .nf-search button:hover{background:var(--rose-d);border-color:var(--rose-d)}

/* floating props (self-contained, independent of home2.css) */
.nf-body .fl{position:absolute;z-index:1;opacity:0;animation:popFl 1s var(--e) forwards;animation-delay:.4s}
.nf-body .fl .in{animation:bobN 6s ease-in-out infinite}
@keyframes popFl{from{opacity:0;scale:.5}to{opacity:1;scale:1}}
@keyframes bobN{50%{transform:translateY(-14px) rotate(4deg)}}
.nf-body .f-nb{width:clamp(70px,9vw,120px);aspect-ratio:3/4;background:linear-gradient(120deg,#a85d68,#7d3f4b);border-radius:3px 14px 14px 3px;transform:rotate(-12deg);box-shadow:0 24px 34px -16px rgba(0,0,0,.35);position:relative}
.nf-body .f-nb::after{content:"";position:absolute;left:14%;top:0;bottom:0;width:2px;background:var(--gold)}
.nf-body .f-pen{width:7px;height:clamp(90px,12vw,150px);background:linear-gradient(#2b2426 85%,var(--gold) 86%);border-radius:4px;transform:rotate(22deg);box-shadow:0 16px 24px -8px rgba(0,0,0,.35)}
.nf-body .f-cup{width:clamp(50px,6vw,84px);height:clamp(58px,7vw,96px);background:repeating-linear-gradient(90deg,#f0b8b4 0 8px,#e4a09f 8px 16px);border-radius:6px 6px 22px 22px;box-shadow:0 20px 26px -12px rgba(0,0,0,.3)}
.nf-body .f-dot{width:22px;height:22px;border-radius:50%;background:var(--sage)}

@media(max-width:640px){.nf-body .fl{display:none}.nf-body .row{flex-direction:column;align-items:stretch}}
@media(prefers-reduced-motion:reduce){.nf-body .blob,.nf-body .nf-num span,.nf-body .scribble,.nf-body .nf-c h2,.nf-body .nf-c .lead,.nf-body .nf-c .row,.nf-body .nf-search,.nf-body .fl,.nf-body .fl .in,.nf-body .pen-o::after{animation:none;opacity:1;stroke-dashoffset:0;transform:none}}

/* ==========================================================
   AUTH PAGE  (scoped to body.auth-body)
   ========================================================== */
/* Paperly — Auth (Sign In / Create Account), same palette + Manrope */
.auth-body{min-height:100vh}
.auth-body .auth-wrap{position:relative;min-height:100vh;display:grid;place-items:center;padding:14vh 5vw 8vh;overflow:hidden}
.auth-body .blob{position:absolute;filter:blur(60px);opacity:.6;border-radius:50%;animation:morphA 16s ease-in-out infinite alternate;z-index:0}
.auth-body .ab1{width:38vw;height:38vw;left:-10vw;top:-10vw;background:var(--blush)}
.auth-body .ab2{width:32vw;height:32vw;right:-10vw;bottom:-10vw;background:var(--sage);opacity:.4;animation-delay:-6s}
@keyframes morphA{0%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;transform:translate(0,0) rotate(0)}100%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%;transform:translate(3vw,3vh) rotate(30deg)}}

.auth-body .auth-card{position:relative;z-index:1;width:min(980px,94vw);display:grid;grid-template-columns:.9fr 1.1fr;background:var(--ivory);border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.25);opacity:0;transform:translateY(30px) scale(.98);animation:cardIn .8s .1s var(--e) forwards}
@keyframes cardIn{to{opacity:1;transform:none}}

/* left decorative panel */
.auth-body .auth-art{position:relative;padding:6vh 3vw;background:linear-gradient(165deg,#e9c3bf 0%,#c98a90 55%,#8f4f58 100%);color:#fff8f0;display:flex;flex-direction:column;justify-content:end;overflow:hidden}
.auth-body .auth-art h2{font-size:clamp(24px,2.6vw,38px);font-weight:800;letter-spacing:-.03em;margin:10px 0 14px}
.auth-body .auth-art em{font-style:italic;color:var(--blush)}
.auth-body .auth-art .eyebrow{color:#fff8f0;opacity:.85}
.auth-body .auth-art .lead{color:rgba(255,248,240,.85);max-width:320px}
.auth-body .auth-art .fl{position:absolute;opacity:0;animation:flPop .8s var(--e) forwards}
.auth-body .f-nb{width:96px;aspect-ratio:3/4;background:linear-gradient(120deg,#a85d68,#6b3540);border-radius:3px 12px 12px 3px;right:-14px;top:8%;transform:rotate(14deg);box-shadow:0 24px 30px -14px rgba(0,0,0,.4);animation-delay:.4s}
.auth-body .f-nb::after{content:"";position:absolute;left:14%;top:0;bottom:0;width:2px;background:var(--gold)}
.auth-body .f-pen{width:7px;height:120px;background:linear-gradient(#2b2426 85%,var(--gold) 86%);border-radius:4px;left:10%;top:6%;transform:rotate(-20deg);box-shadow:0 16px 24px -10px rgba(0,0,0,.4);animation-delay:.55s}
.auth-body .f-cup{width:64px;height:74px;background:repeating-linear-gradient(90deg,#f0b8b4 0 8px,#e4a09f 8px 16px);border-radius:6px 6px 20px 20px;right:14%;bottom:22%;animation:flPop .8s var(--e) forwards,bobA 6s ease-in-out .8s infinite;}
@keyframes flPop{from{opacity:0;transform:translateY(20px) rotate(var(--r,0))}to{opacity:1}}
@keyframes bobA{50%{transform:translateY(-10px)}}

/* right form panel */
.auth-body .auth-form{padding:6vh 4vw;display:flex;flex-direction:column}
.auth-body .seg{position:relative;display:grid;grid-template-columns:1fr 1fr;background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:99px;padding:5px;margin-bottom:5vh;font-weight:600;font-size:14px}
.auth-body .seg-b{position:relative;z-index:1;background:none;border:0;padding:13px 10px;cursor:pointer;color:var(--taupe);transition:color .4s;border-radius:99px}
.auth-body .seg-b.on{color:#fff8f0}
.auth-body .seg-i{position:absolute;top:5px;left:5px;width:calc(50% - 5px);height:calc(100% - 10px);background:var(--rose);border-radius:99px;transition:transform .45s var(--e);z-index:0}
.auth-body .seg.right .seg-i{transform:translateX(100%)}

.auth-body .panel{display:none;flex-direction:column;gap:18px;animation:panelIn .5s var(--e)}
.auth-body .panel.on{display:flex}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1}}
.auth-body .demo-note{font-size:12px;color:var(--rose-d);background:var(--blush);padding:9px 14px;border-radius:10px;display:inline-block;width:fit-content}
.auth-body .field{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:600;color:var(--taupe)}
.auth-body .field input{font:500 15px 'Manrope';padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);transition:.3s var(--e);outline:none}
.auth-body .field input:focus{border-color:var(--rose);box-shadow:0 0 0 4px color-mix(in srgb,var(--rose) 18%,transparent)}
.auth-body .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.auth-body .pw{position:relative;display:flex}.auth-body .pw input{flex:1;padding-right:44px}
.auth-body .eye{position:absolute;right:8px;top:50%;translate:0 -50%;background:none;border:0;color:var(--taupe);cursor:pointer;padding:6px;display:grid;place-items:center;transition:color .3s}.auth-body .eye:hover{color:var(--rose)}
.auth-body .meter{display:block;height:4px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:2px}
.auth-body .meter i{display:block;height:100%;width:0;background:var(--sage);transition:width .35s var(--e),background .35s}
.auth-body .row-between{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.auth-body .chk{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--taupe);cursor:pointer}
.auth-body .chk.block{align-items:flex-start}
.auth-body .chk input{width:16px;height:16px;accent-color:var(--rose);margin-top:1px}
.auth-body .ulink.sm{font-size:13px}
.auth-body .btn.full{width:100%;justify-content:center;position:relative}
.auth-body .btn.full .spin{display:none;width:16px;height:16px;border:2px solid rgba(255,248,240,.4);border-top-color:#fff8f0;border-radius:50%}
.auth-body .btn.full.loading .btxt{opacity:0}.auth-body .btn.full.loading .spin{display:block;position:absolute;animation:spinA .7s linear infinite}
@keyframes spinA{to{transform:rotate(360deg)}}
.auth-body .or{position:relative;text-align:center;font-size:12px;color:var(--taupe);text-transform:uppercase;letter-spacing:.14em}
.auth-body .or::before,.auth-body .or::after{content:"";position:absolute;top:50%;width:32%;height:1px;background:var(--line)}.auth-body .or::before{left:0}.auth-body .or::after{right:0}
.auth-body .soc{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.auth-body .soc-b{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);font:600 13px 'Manrope';cursor:pointer;transition:.35s var(--e)}
.auth-body .soc-b:hover{transform:translateY(-3px);box-shadow:0 14px 24px -14px rgba(0,0,0,.25);border-color:var(--rose)}
.auth-body .soc-b.fb{background:#1877F2;color:#fff8f0;border-color:#1877F2}.auth-body .soc-b.fb:hover{background:#125fc0}
.auth-body .swap{text-align:center;font-size:13px;color:var(--taupe)}
.auth-body .toast{position:fixed;left:50%;bottom:32px;translate:-50% 140%;background:var(--ink);color:var(--bg);padding:14px 24px;border-radius:99px;font-size:13px;font-weight:600;box-shadow:0 20px 40px -16px rgba(0,0,0,.4);transition:translate .5s var(--e);z-index:400;display:flex;align-items:center;gap:10px}
.auth-body .toast.show{translate:-50% 0}
.auth-body .toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sage)}

@media(max-width:820px){.auth-body .auth-card{grid-template-columns:1fr}.auth-body .auth-art{display:none}.auth-body .auth-form{padding:5vh 6vw}}
@media(prefers-reduced-motion:reduce){.auth-body .auth-card{opacity:1;transform:none;animation:none}.auth-body .blob{animation:none}.auth-body .fl{opacity:1;animation:none}}

/* ==========================================================
   BRANDS / CONTACT / CORPORATE PAGES  (pages.css, no scope needed)
   ========================================================== */
/* Paperly — shared styles for Corporate / Brands / Contact pages */
.pg-hero{position:relative;min-height:56vh;display:flex;flex-direction:column;justify-content:center;padding:18vh 6vw 8vh;overflow:hidden;text-align:center}
.pg-hero .blob{position:absolute;filter:blur(60px);opacity:.6;border-radius:50%;animation:pgMorph 16s ease-in-out infinite alternate;z-index:0}
.pg-hero .pb1{width:38vw;height:38vw;left:-10vw;top:-14vw;background:var(--blush)}
.pg-hero .pb2{width:30vw;height:30vw;right:-8vw;bottom:-16vw;background:var(--sage);opacity:.4;animation-delay:-6s}
@keyframes pgMorph{0%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%;transform:translate(0,0) rotate(0)}100%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%;transform:translate(3vw,3vh) rotate(30deg)}}
.pg-hero>*{position:relative;z-index:1}
.crumb{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe);margin-bottom:18px}
.crumb a{color:var(--rose);border-bottom:1px solid transparent;transition:.3s}.crumb a:hover{border-color:var(--rose)}
.pg-hero h1{font-size:clamp(40px,7vw,96px);font-weight:800;letter-spacing:-.05em;max-width:900px;margin:0 auto 20px}
.pg-hero h1 em{color:var(--rose);font-style:italic}
.pg-hero .lead{max-width:560px;margin:0 auto;color:var(--taupe);font-size:17px}
.pg-hero .row{justify-content:center;margin-top:32px}

.sec{padding:12vh 6vw}
.sec-head{max-width:640px;margin:0 auto 8vh;text-align:center}
.sec-head h2{font-size:clamp(30px,4.4vw,58px);font-weight:800;letter-spacing:-.04em}
.sec-head p{color:var(--taupe);margin-top:12px}
.sec-head em{color:var(--rose);font-style:italic}

/* ===== feature grid (corporate) ===== */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feat{background:var(--ivory);border:1px solid var(--line);border-radius:20px;padding:30px 26px;transition:.5s var(--e)}
.feat:hover{transform:translateY(-8px);box-shadow:0 26px 40px -22px rgba(0,0,0,.2);border-color:var(--rose)}
.feat svg{width:30px;height:30px;stroke:var(--rose);fill:none;stroke-width:1.5;margin-bottom:16px}
.feat h3{margin-bottom:8px}.feat p{color:var(--taupe);font-size:14px}

/* ===== pricing tiers (corporate) ===== */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.tier{background:var(--ivory);border:1px solid var(--line);border-radius:24px;padding:40px 32px;display:flex;flex-direction:column;transition:.5s var(--e);position:relative;overflow:hidden}
.tier:hover{transform:translateY(-10px);box-shadow:0 30px 50px -24px rgba(0,0,0,.22)}
.tier.on{background:var(--rose);color:#fff8f0;border-color:var(--rose);transform:scale(1.04)}
.tier.on:hover{transform:scale(1.04) translateY(-10px)}
.tier .badge2{position:absolute;top:18px;right:-34px;background:var(--gold);color:#2b2426;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 40px;transform:rotate(40deg)}
.tier .tname{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--rose)}
.tier.on .tname{color:var(--blush)}
.tier .tprice{font-size:clamp(30px,3.4vw,44px);font-weight:800;letter-spacing:-.03em;margin:10px 0 4px}
.tier .tprice span{font-size:14px;font-weight:500;opacity:.7}
.tier .tdesc{color:var(--taupe);font-size:14px;margin-bottom:24px}
.tier.on .tdesc{color:rgba(255,248,240,.85)}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:30px;flex:1}
.tier li{font-size:14px;display:flex;gap:10px;align-items:flex-start}
.tier li svg{width:16px;height:16px;flex:none;margin-top:3px;stroke:var(--sage);fill:none;stroke-width:2}
.tier.on li svg{stroke:var(--blush)}
.tier .btn{justify-content:center}

/* ===== process timeline (corporate) ===== */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.proc::before{content:"";position:absolute;top:26px;left:6%;right:6%;height:1px;background:var(--line)}
.proc-s{position:relative;text-align:center;padding:0 10px}
.proc-s b{display:inline-flex;width:52px;height:52px;border-radius:50%;background:var(--ivory);border:1px solid var(--line);align-items:center;justify-content:center;font-weight:800;color:var(--rose);position:relative;z-index:1;margin-bottom:16px}
.proc-s h3{font-size:16px;margin-bottom:6px}.proc-s p{color:var(--taupe);font-size:13px}

/* ===== brand grid ===== */
.filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:6vh}
.filt{padding:10px 20px;border:1px solid var(--line);border-radius:99px;font:600 13px 'Manrope';background:var(--ivory);color:var(--taupe);cursor:pointer;transition:.35s var(--e)}
.filt.on,.filt:hover{background:var(--rose);border-color:var(--rose);color:#fff8f0}
.brand-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bcard{position:relative;background:var(--ivory);border:1px solid var(--line);border-radius:20px;padding:28px 22px;overflow:hidden;transition:.5s var(--e);opacity:1;transform:scale(1)}
.bcard.hide{opacity:0;transform:scale(.85);pointer-events:none;position:absolute;visibility:hidden}
.bcard:hover{transform:translateY(-6px);border-color:var(--rose);box-shadow:0 24px 40px -22px rgba(0,0,0,.2)}
.bmark{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#fff8f0;margin-bottom:18px;letter-spacing:-.02em}
.bcard h3{font-size:18px;margin-bottom:6px}.bcard p{color:var(--taupe);font-size:13px;margin-bottom:14px}
.btags{display:flex;gap:6px;flex-wrap:wrap}.btags span{font-size:11px;padding:4px 10px;border-radius:99px;background:color-mix(in srgb,var(--blush) 55%,transparent);color:var(--rose-d);font-weight:600}

/* ===== contact page ===== */
.contact-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:6vw;align-items:start}
.cinfo{display:flex;flex-direction:column;gap:22px}
.cinfo-card{display:flex;gap:16px;align-items:flex-start}
.cinfo-card svg{width:22px;height:22px;stroke:var(--rose);fill:none;stroke-width:1.6;flex:none;margin-top:4px}
.cinfo-card h4{font-size:15px;margin-bottom:4px}.cinfo-card p{color:var(--taupe);font-size:14px}
.cmap{margin-top:8px;height:220px;border-radius:20px;overflow:hidden;position:relative;background:linear-gradient(160deg,var(--blush),var(--rose))}
.cmap svg{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.cmap .pin{position:absolute;left:50%;top:46%;width:26px;height:26px;background:#fff8f0;border-radius:50% 50% 50% 0;transform:translate(-50%,-100%) rotate(-45deg);box-shadow:0 8px 18px -6px rgba(0,0,0,.4);animation:pinDrop .7s var(--e) both}
@keyframes pinDrop{from{transform:translate(-50%,-260%) rotate(-45deg);opacity:0}to{opacity:1}}
.cmap .pin::after{content:"";position:absolute;inset:6px;background:var(--rose);border-radius:50%}

.form-card{background:var(--ivory);border:1px solid var(--line);border-radius:24px;padding:5vh 4vw}
.form-card h3{margin-bottom:6px}.form-card>p{color:var(--taupe);margin-bottom:30px;font-size:14px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fgrid .full{grid-column:1/-1}
.field2{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:600;color:var(--taupe)}
.field2 input,.field2 select,.field2 textarea{font:500 15px 'Manrope';padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);outline:none;transition:.3s var(--e);resize:vertical}
.field2 input:focus,.field2 select:focus,.field2 textarea:focus{border-color:var(--rose);box-shadow:0 0 0 4px color-mix(in srgb,var(--rose) 18%,transparent)}
.form-card .btn{margin-top:8px;width:100%;justify-content:center;position:relative}
.form-card .btn .spin{display:none;width:16px;height:16px;border:2px solid rgba(255,248,240,.4);border-top-color:#fff8f0;border-radius:50%}
.form-card .btn.loading .btxt{opacity:0}.form-card .btn.loading .spin{display:block;position:absolute;animation:pgSpin .7s linear infinite}
@keyframes pgSpin{to{transform:rotate(360deg)}}
.form-ok{margin-top:16px;color:var(--sage);font-weight:600;min-height:22px;font-size:14px}

/* shared reveal timing helper already provided by .reveal in style.css */
@media(max-width:980px){.feat-grid{grid-template-columns:1fr 1fr}.tiers{grid-template-columns:1fr}.tier.on{transform:none}.proc{grid-template-columns:1fr 1fr;row-gap:34px}.proc::before{display:none}.brand-grid{grid-template-columns:1fr 1fr}.contact-wrap{grid-template-columns:1fr}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr}.brand-grid{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.pg-hero .blob{animation:none}.cmap .pin{animation:none}}

/* ==========================================================
   HOME 2 PAGE  (scoped to body.h2)
   ========================================================== */
/* Paperly — Home 2 (extends style.css; same palette + Manrope) */
.h2 .chip {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--rose-d);
    background: color-mix(in srgb, var(--blush) 60%, transparent);
    padding: 8px 16px;
    border-radius: 99px;
    margin-bottom: 22px
}

.h2 .chip.lt {
    background: rgba(255, 255, 255, .18);
    color: #fff8f0
}

.h2 .sec-h {
    padding: 0 5vw;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 4vw;
    flex-wrap: wrap;
    margin-bottom: 6vh
}

.h2 .sec-h h2 {
    font-size: clamp(40px, 7vw, 104px);
    letter-spacing: -.05em;
    font-weight: 800
}

.h2 .sec-h p {
    color: var(--taupe);
    max-width: 300px
}

.h2 .wipe {
    clip-path: inset(0 0 100% 0);
    transform: translateY(30px) skewY(3deg);
    transition: clip-path 1.1s var(--e), transform 1.1s var(--e)
}

.h2 .wipe.in {
    clip-path: inset(-10% 0 -10% 0);
    transform: none
}

.h2 .curtain {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--rose);
    display: grid;
    place-items: center;
    color: #fff8f0;
    font-weight: 800;
    letter-spacing: .4em;
    font-size: clamp(20px, 4vw, 44px);
    animation: curtain 1.2s .9s var(--e) forwards;
    border-radius: 0 0 50% 50%/0 0 12vw 12vw
}

.h2 .curtain span {
    animation: cw 1s var(--e) both
}

@keyframes cw {
    from {
        opacity: 0;
        letter-spacing: 1em
    }
}

@keyframes curtain {
    to {
        transform: translateY(-105%);
        visibility: hidden
    }
}

.h2 .sw {
    display: flex;
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    border-radius: 99px;
    padding: 3px;
    font-size: 12px;
    font-weight: 600
}

.h2 .sw a {
    padding: 6px 12px;
    border-radius: 99px;
    transition: .3s
}

.h2 .sw a.on {
    background: var(--rose);
    color: #fff8f0
}

/* hero */
.h2 .hero2 {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    text-align: center;
    overflow: hidden;
    padding: 14vh 5vw 10vh
}

.h2 .blob {
    position: absolute;
    filter: blur(50px);
    opacity: .75;
    animation: morph 14s ease-in-out infinite alternate
}

.h2 .b1 {
    width: 46vw;
    height: 46vw;
    left: -10vw;
    top: -8vw;
    background: var(--blush)
}

.h2 .b2 {
    width: 36vw;
    height: 36vw;
    right: -8vw;
    top: 10vh;
    background: color-mix(in srgb, var(--sage) 60%, transparent);
    animation-delay: -5s
}

.h2 .b3 {
    width: 40vw;
    height: 40vw;
    left: 30vw;
    bottom: -20vw;
    background: var(--rose);
    opacity: .4;
    animation-delay: -9s
}

@keyframes morph {
    0% {
        border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
        transform: translate(0, 0) rotate(0)
    }

    100% {
        border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
        transform: translate(4vw, 3vh) rotate(40deg)
    }
}

.h2 .hero2-c {
    position: relative;
    z-index: 2;
    max-width: 980px
}

.h2 .h2-hero {
    font-size: clamp(54px, 11vw, 170px);
    font-weight: 800;
    letter-spacing: -.06em;
    line-height: .95
}

.h2 .ln {
    display: block;
    overflow: hidden;
    padding: .04em .1em .12em
}

.h2 .ln.rose {
    color: var(--rose);
    font-style: italic
}

.h2 .ch {
    display: inline-block;
    white-space: pre;
    transform: translateY(115%) rotate(10deg);
    animation: chUp 1s var(--e) forwards;
    animation-delay: calc(1.7s + var(--i)*50ms)
}

@keyframes chUp {
    to {
        transform: none
    }
}

.h2 .scribble {
    display: block;
    width: min(360px, 60%);
    margin: -4px auto 22px;
    color: var(--rose);
    stroke-dasharray: 460;
    stroke-dashoffset: 460;
    animation: draw 1.6s 2.8s var(--e) forwards
}

@keyframes draw {
    to {
        stroke-dashoffset: 0
    }
}

.h2 .hero2 .lead {
    margin: 0 auto 34px;
    opacity: 0;
    animation: fadeIn 1s 3s forwards
}

.h2 .hero2 .row {
    justify-content: center;
    opacity: 0;
    animation: fadeIn 1s 3.2s forwards
}

.h2 .hero2 .chip {
    opacity: 0;
    animation: fadeIn 1s 1.6s forwards
}

@keyframes fadeIn {
    to {
        opacity: 1
    }
}

.h2 .fl {
    position: absolute;
    z-index: 1;
    transition: transform .5s var(--e);
    opacity: 0;
    animation: pop 1s var(--e) forwards;
    animation-delay: 2.2s
}

@keyframes pop {
    from {
        opacity: 0;
        scale: .4
    }

    to {
        opacity: 1;
        scale: 1
    }
}

.h2 .fl .in {
    animation: bob 6s ease-in-out infinite
}

.h2 .fl:nth-of-type(5) .in {
    animation-delay: -1s
}

.h2 .fl:nth-of-type(6) .in {
    animation-delay: -2.5s
}

.h2 .fl:nth-of-type(7) .in {
    animation-delay: -4s
}

@keyframes bob {
    50% {
        transform: translateY(-16px) rotate(4deg)
    }
}

.h2 .f-nb {
    width: clamp(80px, 11vw, 160px);
    aspect-ratio: 3/4;
    background: linear-gradient(120deg, #a85d68, #7d3f4b);
    border-radius: 3px 14px 14px 3px;
    transform: rotate(-12deg);
    box-shadow: 0 30px 40px -18px rgba(0, 0, 0, .4);
    position: relative
}

.h2 .f-nb::after {
    content: "";
    position: absolute;
    left: 14%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gold)
}

.h2 .f-pen {
    width: 8px;
    height: clamp(110px, 16vw, 220px);
    background: linear-gradient(#2b2426 85%, var(--gold) 86%);
    border-radius: 4px;
    transform: rotate(24deg);
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, .4)
}

.h2 .f-cup {
    width: clamp(60px, 8vw, 110px);
    height: clamp(70px, 9vw, 124px);
    background: repeating-linear-gradient(90deg, #f0b8b4 0 8px, #e4a09f 8px 16px);
    border-radius: 6px 6px 24px 24px;
    box-shadow: 0 24px 30px -14px rgba(0, 0, 0, .35)
}

.h2 .f-note {
    width: clamp(90px, 10vw, 140px);
    aspect-ratio: 1;
    background: var(--ivory);
    padding: 14px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--rose-d);
    transform: rotate(7deg);
    box-shadow: 0 20px 30px -14px rgba(0, 0, 0, .3);
    border-bottom-right-radius: 22px
}

.h2 .f-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--sage)
}

.h2 .badge {
    position: absolute;
    z-index: 2;
    left: 70%;
    bottom: 10vh;
    width: 110px;
    margin-left: -55px;
    color: var(--rose-d);
    animation: spin 14s linear infinite
}

.h2 .badge text {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    fill: currentColor;
    text-transform: uppercase
}

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

/* double marquee */
.h2 .mq2 {
    background: var(--ink);
    color: var(--bg);
    overflow: hidden;
    margin: -2vw -3vw 0;
    position: relative;
    z-index: 3
}

.h2 .row2 {
    white-space: nowrap;
    overflow: hidden;
    font-weight: 700;
    font-size: clamp(20px, 3vw, 3px);
    letter-spacing: -.02em;
    padding: 4px 0
}

.h2 .row2 div {
    display: inline-block;
    animation: mq 30s linear infinite
}

.h2 .row2.b {
    color: var(--blush);
    font-style: italic
}

.h2 .row2.b div {
    animation-direction: reverse
}

.h2 .mq2:hover div {
    animation-play-state: paused
}

/* bento */
.h2 .shop {
    padding: 0vh 0 0vh
}

.h2 .bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(220px, 26vw, 300px);
    gap: 16px;
    padding: 0 5vw
}

.h2 .tile {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    color: #fff8f0;
    isolation: isolate;
    transition: transform .6s var(--e), border-radius .6s var(--e)
}

.h2 .tile:hover {
    transform: translateY(-8px);
    border-radius: 60px 26px 60px 26px
}

.h2 .tile::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .4), transparent 60%);
    opacity: 0;
    transition: opacity .4s
}

.h2 .tile:hover::before {
    opacity: 1
}

.h2 .tile h3 {
    font-size: clamp(22px, 2.4vw, 34px)
}

.h2 .tile p {
    font-size: 14px;
    opacity: .9;
    max-width: 220px;
    margin-top: 6px
}

.h2 .go {
    position: absolute;
    right: 22px;
    top: 22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 248, 240, .6);
    display: grid;
    place-items: center;
    transition: .5s var(--e)
}

.h2 .tile:hover .go {
    background: #fff8f0;
    color: var(--rose-d);
    transform: rotate(-45deg) scale(1.1)
}

.h2 .t1 {
    grid-column: span 2;
    grid-row: span 2;
    background: linear-gradient(160deg, #d9a7a5, var(--rose) 70%, var(--rose-d))
}

.h2 .t2 {
    background: linear-gradient(160deg, #c98a90, #8f4f58)
}

.h2 .t3 {
    background: linear-gradient(200deg, #a3b096, #6f7d63)
}

.h2 .t4 {
    grid-column: span 2;
    background: linear-gradient(200deg, #c9a68a, #8a5e46)
}

.h2 .t5 {
    grid-column: span 4;
    grid-auto-rows: auto;
    height: 170px;
    background: linear-gradient(120deg, #e6d5c3, #d9b9a3);
    color: var(--ink);
    flex-direction: row;
    align-items: end;
    gap: 24px
}

.h2 .t5 {
    grid-row: auto
}

.h2 .t5 .go {
    border-color: var(--ink)
}

.h2 .tart {
    position: absolute;
    inset: 0;
    z-index: -1
}

.h2 .tart i {
    position: absolute;
    display: block;
    transition: transform .8s var(--e)
}

.h2 .pen1,
.h2 .pen2,
.h2 .pen3 {
    width: 12px;
    height: 60%;
    top: 12%;
    border-radius: 6px;
    background: linear-gradient(#2b2426 85%, var(--gold) 86%)
}

.h2 .pen1 {
    left: 30%;
    transform: rotate(12deg)
}

.h2 .pen2 {
    left: 48%;
    background: linear-gradient(#f3dfd3 85%, var(--gold) 86%);
    transform: rotate(-4deg)
}

.h2 .pen3 {
    left: 64%;
    background: linear-gradient(#9aa78b 85%, var(--gold) 86%);
    transform: rotate(-16deg)
}

.h2 .t1:hover .pen1 {
    transform: rotate(-6deg) translateY(-14px)
}

.h2 .t1:hover .pen2 {
    transform: rotate(4deg) translateY(-30px)
}

.h2 .t1:hover .pen3 {
    transform: rotate(18deg) translateY(-14px)
}

.h2 .cover {
    width: 46%;
    height: 52%;
    right: 14%;
    top: 14%;
    background: #ecc9c6;
    border-radius: 3px 12px 12px 3px;
    transform-origin: left;
    box-shadow: 0 20px 30px -12px rgba(0, 0, 0, .4);
    z-index: 2
}

.h2 .pages {
    width: 46%;
    height: 52%;
    right: 14%;
    top: 14%;
    background: repeating-linear-gradient(#fbf6ef 0 12px, #e6d5c3 12px 13px)
}

.h2 .t2:hover .cover {
    transform: perspective(600px) rotateY(-70deg)
}

.h2 .t3 i {
    width: 22%;
    height: 46%;
    top: 14%;
    background: rgba(255, 248, 240, .75);
    border-radius: 8px 8px 0 0
}

.h2 .t3 i:nth-child(1) {
    left: 8%
}

.h2 .t3 i:nth-child(2) {
    left: 30%;
    top: 20%
}

.h2 .t3 i:nth-child(3) {
    left: 52%;
    top: 10%
}

.h2 .t3 i:nth-child(4) {
    left: 74%;
    top: 24%
}

.h2 .t3:hover i:nth-child(odd) {
    transform: translateY(-14px)
}

.h2 .t3:hover i:nth-child(even) {
    transform: translateY(10px)
}

.h2 .t4 i {
    width: 16%;
    height: 36%;
    right: 10%;
    background: rgba(255, 248, 240, .8);
    border-radius: 6px
}

.h2 .t4 i:nth-child(1) {
    top: 12%;
    right: 34%
}

.h2 .t4 i:nth-child(2) {
    top: 12%;
    right: 14%;
    height: 44%;
    background: #ecc9c6
}

.h2 .t4 i:nth-child(3) {
    top: 44%;
    right: 24%;
    width: 22%;
    background: #9aa78b
}

.h2 .t4:hover i:nth-child(1) {
    transform: translateY(-14px) rotate(-6deg)
}

.h2 .t4:hover i:nth-child(2) {
    transform: rotate(6deg)
}

.h2 .t4:hover i:nth-child(3) {
    transform: translateY(12px)
}

.h2 .t5 i {
    width: 120px;
    height: 70%;
    top: 14%;
    background: #fbf6ef;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .3);
    border-radius: 3px
}

.h2 .t5 i:nth-child(1) {
    right: 30%;
    transform: rotate(-8deg)
}

.h2 .t5 i:nth-child(2) {
    right: 20%;
    transform: rotate(-2deg)
}

.h2 .t5 i:nth-child(3) {
    right: 10%;
    transform: rotate(5deg)
}

.h2 .t5:hover i:nth-child(1) {
    transform: translateX(-50px) rotate(-16deg)
}

.h2 .t5:hover i:nth-child(3) {
    transform: translateX(30px) rotate(14deg)
}

/* horizontal scroll */
.h2 .day {
    height: 420vh;
    position: relative;
    background: var(--bg2)
}

.h2 .day-in {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5vh
}

.h2 .day-h {
    padding: 8vh 5vw 0;
    display: flex;
    justify-content: space-between;
    align-items: end
}

.h2 .day-h h2 {
    font-size: clamp(36px, 5.6vw, 84px);
    letter-spacing: -.05em;
    font-weight: 800
}

.h2 .day-h p {
    color: var(--taupe);
    font-size: 13px;
    letter-spacing: .2em;
    text-transform: uppercase
}

.h2 .day-track {
    display: flex;
    gap: 3vw;
    padding: 0 5vw;
    will-change: transform
}

.h2 .pn {
    flex: 0 0 clamp(290px, 44vw, 620px);
    height: 54vh;
    border-radius: 34px;
    padding: 34px;
    position: relative;
    overflow: hidden;
    color: #fff8f0;
    display: flex;
    flex-direction: column;
    justify-content: end;
    transition: transform .3s
}

.h2 .pn b {
    position: absolute;
    left: 28px;
    top: 14px;
    font-size: clamp(70px, 11vw, 160px);
    letter-spacing: -.06em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 248, 240, .7);
    line-height: 1
}

.h2 .pn h3 {
    font-size: clamp(24px, 3vw, 42px)
}

.h2 .pn p {
    max-width: 340px;
    opacity: .9;
    margin-top: 8px
}

.h2 .p-a {
    background: linear-gradient(150deg, #e9c3bf, #b9737a)
}

.h2 .p-b {
    background: linear-gradient(150deg, #b9737a, #8f4f58)
}

.h2 .p-c {
    background: linear-gradient(150deg, #9aa78b, #6f7d63)
}

.h2 .p-d {
    background: linear-gradient(150deg, #5a3440, #2b2426)
}

.h2 .orb {
    position: absolute;
    right: -6%;
    top: -8%;
    width: 46%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 240, 220, .6), transparent 65%);
    animation: pulse 6s infinite alternate
}

.h2 .day-bar {
    margin: 0 5vw;
    height: 3px;
    background: var(--line)
}

.h2 .day-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--rose)
}

/* belief */
.h2 .belief {
    padding: 22vh 8vw;
    max-width: 1300px;
    margin: auto
}

.h2 .fill {
    font-size: clamp(28px, 4.4vw, 64px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.14
}

.h2 .w {
    color: color-mix(in srgb, var(--ink) 16%, transparent);
    transition: color .35s
}

.h2 .w.on {
    color: var(--ink)
}

.h2 .w.on.k {
    color: var(--rose)
}

/* rings */
.h2 .nums {
    background: var(--rose);
    color: #fff8f0;
    border-radius: 8vw;
    margin: 0 2vw;
    padding: 16vh 6vw;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 6vw;
    align-items: center;
    position: relative;
    margin-top: 60px;
}

.h2 .nums h2 {
    font-size: clamp(34px, 5vw, 70px);
    letter-spacing: -.05em;
    margin-bottom: 30px;
    font-weight: 800
}

.h2 .rings {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px
}

.h2 .ring {
    position: relative;
    text-align: center
}

.h2 .ring svg {
    width: 100%;
    transform: rotate(-90deg)
}

.h2 .ring circle {
    fill: none;
    stroke-width: 5
}

.h2 .ring .bg {
    stroke: rgba(255, 255, 255, .22)
}

.h2 .ring .fg {
    stroke: #fff8f0;
    stroke-linecap: round;
    stroke-dasharray: 327;
    stroke-dashoffset: 327;
    transition: stroke-dashoffset 2.2s var(--e)
}

.h2 .ring.in .fg {
    stroke-dashoffset: calc(327 * (1 - var(--pct)))
}

.h2 .ring strong {
    position: absolute;
    left: 0;
    right: 0;
    top: 28%;
    font-size: clamp(24px, 3.4vw, 50px);
    letter-spacing: -.04em
}

.h2 .ring span {
    display: block;
    font-size: 13px;
    opacity: .9;
    margin-top: 10px
}

/* love */
.h2 .love {
    padding: 20vh 0 14vh;
    overflow: hidden
}

.h2 .cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 0 5vw;
    height: 90vh;
    overflow: hidden;
    -webkit-mask: linear-gradient(transparent, #000 14%, #000 86%, transparent);
    mask: linear-gradient(transparent, #000 14%, #000 86%, transparent)
}

.h2 .col>div {
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation: vup 32s linear infinite
}

.h2 .col.down>div {
    animation-direction: reverse;
    animation-duration: 38s
}

.h2 .col.s>div {
    animation-duration: 44s
}

.h2 .cols:hover .col>div {
    animation-play-state: paused
}

@keyframes vup {
    to {
        transform: translateY(-50%)
    }
}

.h2 .love blockquote {
    background: var(--ivory);
    border: 1px solid var(--line);
    border-radius: 24px 24px 24px 4px;
    padding: 30px;
    font-weight: 700;
    font-size: clamp(18px, 1.9vw, 26px);
    letter-spacing: -.02em;
    line-height: 1.25;
    transition: .5s var(--e)
}

.h2 .love blockquote:nth-child(2n) {
    border-radius: 24px 24px 4px 24px;
    background: color-mix(in srgb, var(--blush) 45%, var(--ivory))
}

.h2 .love blockquote:hover {
    transform: scale(1.04) rotate(-1deg)
}

.h2 .love cite {
    display: block;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    color: var(--taupe);
    margin-top: 16px
}

/* cta */
.h2 .cta2 {
    position: relative;
    overflow: hidden
}

.h2 .cta2>*:not(.shape) {
    position: relative;
    z-index: 1
}

.h2 .shape {
    position: absolute;
    border-radius: 50%;
    animation: bob 7s ease-in-out infinite
}

.h2 .s1 {
    width: 14vw;
    height: 14vw;
    left: 6vw;
    top: 14vh;
    background: var(--sage);
    opacity: .5
}

.h2 .s2 {
    width: 8vw;
    height: 8vw;
    right: 10vw;
    top: 22vh;
    background: var(--rose);
    opacity: .5;
    animation-delay: -2s
}

.h2 .s3 {
    width: 100px;
    height: 200px;
    right: 20vw;
    bottom: 8vh;
    background: var(--blush);
    border-radius: 100px 100px 0 0;
    animation-delay: -4s
}

.h2 .mag {
    transition: transform .3s var(--e), background .4s, box-shadow .4s
}

@media(max-width:980px) {
    .h2 .sw {
        display: none
    }

    .h2 .bento {
        grid-template-columns: 1fr 1fr
    }

    .h2 .t1 {
        grid-column: span 2
    }

    .h2 .t4 {
        grid-column: span 2
    }

    .h2 .t5 {
        grid-column: span 2;
        height: auto;
        min-height: 170px
    }

    .h2 .nums {
        grid-template-columns: 1fr;
        border-radius: 10vw
    }

    .h2 .cols {
        grid-template-columns: 1fr 1fr
    }

    .h2 .col.s {
        display: none
    }

    .h2 .fl:nth-of-type(n+4) {
        display: none
    }

    .h2 .badge {
        display: none
    }
}

@media(max-width:560px) {
    .h2 .rings {
        grid-template-columns: 1fr 1fr
    }

    .h2 .cols {
        grid-template-columns: 1fr
    }

    .h2 .col.down {
        display: none
    }

    .h2 .bento {
        grid-template-columns: 1fr
    }

    .h2 .t1,
    .h2 .t4,
    .h2 .t5 {
        grid-column: auto
    }

    .h2 .t1 {
        grid-row: span 1
    }
}

@media(prefers-reduced-motion:reduce) {
    .h2 .ch {
        transform: none
    }

    .h2 .wipe {
        clip-path: none;
        transform: none
    }

    .h2 .scribble {
        stroke-dashoffset: 0
    }

    .h2 .hero2 .lead,
    .h2 .hero2 .row,
    .h2 .hero2 .chip,
    .h2 .fl {
        opacity: 1
    }

    .h2 .curtain {
        display: none
    }

    .h2 .ring .fg {
        stroke-dashoffset: calc(327 * (1 - var(--pct)))
    }

    .h2 .w {
        color: var(--ink)
    }

    .h2 .day {
        height: auto
    }

    .h2 .day-in {
        position: static;
        height: auto
    }

    .h2 .day-track {
        overflow-x: auto
    }

    .h2 .cols {
        height: auto
    }
}


/* ==========================================================
   HOME — MISSION + CATEGORY CARDS  /  FEATURED PRODUCT BANNER
   ========================================================== */
.ms{display:grid;grid-template-columns:minmax(240px,1fr) 3.2fr;gap:4vw;align-items:start;padding:10vh 5vw 3vh}
.ms-l h3{font-size:clamp(20px,1.8vw,26px);font-weight:600;letter-spacing:-.02em;margin-bottom:18px}
.ms-l p{font-size:14px;color:var(--taupe);max-width:300px;margin-bottom:30px}
.ms-btn{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border:1px solid var(--ink);border-radius:99px;font-size:13.5px;font-weight:600;transition:.4s var(--e)}
.ms-btn:hover{background:var(--ink);color:var(--bg)}.ms-btn svg{transition:.3s}.ms-btn:hover svg{transform:translateX(4px)}
.ms-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ms-card{position:relative;display:block;aspect-ratio:5/7.4;border-radius:24px;padding:18px 18px 0;overflow:hidden;background:linear-gradient(175deg,color-mix(in srgb,var(--ivory) 80%,#fff),color-mix(in srgb,var(--blush) 45%,var(--bg2)));box-shadow:0 1px 0 rgba(255,255,255,.6) inset;transition:transform .6s var(--e),box-shadow .6s var(--e)}
.ms-card:hover{transform:translateY(-6px);box-shadow:0 26px 44px -26px rgba(43,36,38,.4)}
.ms-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ms-top b{font-size:14.5px;font-weight:600;line-height:1.25}
.ms-arrow{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;transition:.4s var(--e)}
.ms-card:hover .ms-arrow{background:var(--rose);color:#fff8f0;transform:rotate(45deg)}
.ms-card img{filter:drop-shadow(0 16px 16px rgba(43,36,38,.24));position:absolute;left:50%;bottom:8%;height:68%;width:auto;max-width:82%;object-fit:contain;transform:translateX(-50%);transition:transform .7s var(--e)}
.ms-card:hover img{transform:translateX(-50%) translateY(-8px) scale(1.04)}
.ms-card:focus-visible,.ms-btn:focus-visible,.pf-buy:focus-visible,.pf-fav:focus-visible{outline:2px solid var(--rose);outline-offset:3px}

.pf-wrap{padding:3vh 5vw 10vh}
.pf{position:relative;container-type:inline-size;display:flex;flex-direction:column;justify-content:space-between;gap:30px;min-height:clamp(560px,56vw,760px);padding:28px clamp(22px,3vw,44px) clamp(24px,3vw,44px);border-radius:32px;overflow:hidden;background:radial-gradient(120% 90% at 70% 10%,color-mix(in srgb,var(--ivory) 85%,#fff),var(--ivory) 45%,color-mix(in srgb,var(--blush) 30%,var(--bg2)))}
.pf-chips{position:relative;z-index:3;display:flex;gap:10px;flex-wrap:wrap}
.pf-chips span{font-size:12.5px;font-weight:500;padding:6px 14px;border-radius:99px;border:1px solid var(--line);background:color-mix(in srgb,var(--ivory) 70%,transparent)}
.pf-word{position:absolute;z-index:1;inset-inline:3.5cqw;top:3.5cqw;direction:ltr;text-align:start;white-space:nowrap;font-family:'Georgia',serif;font-weight:700;font-size:clamp(90px,22vw,300px);font-size:24.5cqw;line-height:.9;letter-spacing:-.045em;color:var(--ink);user-select:none;pointer-events:none}
.pf-img{position:absolute;z-index:2;inset-inline-end:var(--pf-x,1%);top:var(--pf-top,41%);width:var(--pf-w,59%);pointer-events:none}
.pf-img img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 34px rgba(43,36,38,.25))}
.pf-info{position:relative;z-index:3;max-width:340px}
.pf-badge{display:inline-block;font-size:12px;font-weight:500;padding:5px 12px;border-radius:99px;background:color-mix(in srgb,var(--taupe) 20%,transparent);margin-bottom:16px}
.pf-info h3{font-size:clamp(20px,1.8vw,26px);font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.pf-info p{color:var(--taupe);font-size:15px;max-width:280px}
.pf-price{font-size:26px;font-weight:600;letter-spacing:-.02em;margin:22px 0 18px}
.pf-actions{display:flex;align-items:center;gap:12px}
.pf-buy{display:inline-flex;align-items:center;gap:14px;padding:16px 26px;border-radius:99px;background:var(--ink);color:var(--bg);font-weight:600;font-size:14px;transition:.4s var(--e)}
.pf-buy:hover{background:var(--rose-d);color:#fff8f0;transform:translateY(-3px);box-shadow:0 16px 28px -14px var(--rose-d)}.pf-buy svg{transition:.3s}.pf-buy:hover svg{transform:translateX(5px)}
.pf-fav{width:52px;height:52px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--ivory) 70%,transparent);color:var(--ink);cursor:pointer;transition:.4s var(--e)}
.pf-fav:hover{border-color:var(--rose);color:var(--rose)}.pf-fav.on{background:var(--rose);border-color:var(--rose);color:#fff8f0}.pf-fav.on svg{fill:currentColor}

@media(max-width:980px){
  .ms{grid-template-columns:1fr;gap:5vh;padding:9vh 6vw 2vh}.ms-l p{max-width:520px}
  .ms-cards{grid-template-columns:repeat(2,1fr)}
  .pf-wrap{padding:3vh 6vw 8vh}
  .pf-img{--pf-w:44%;--pf-x:4%}
}
@media(max-width:640px){
  .ms-cards{gap:10px}.ms-card{border-radius:20px;padding:14px 14px 0}
  .pf{min-height:0;border-radius:26px;padding:20px 20px 26px}
  .pf-word{top:62px;font-size:31cqw;inset-inline:5cqw}
  .pf-img{position:relative;inset:auto;width:74%;margin:78px auto -6px}
  .pf-info{max-width:none}
}
@media(prefers-reduced-motion:reduce){.ms-card,.ms-card img,.pf-buy{transition:none}}

/* ==========================================================
   PAPERLY — HOME 2 : four extra sections
   1 Anatomy (pinned scroll)   2 Flat-lay wall (parallax)
   3 Build-a-kit (interactive) 4 Final call-to-action
   Uses the existing palette vars: --bg --ink --rose --rose-d
   --blush --sage --gold --taupe --ivory --e
   ========================================================== */
.h2 [class^="nx-"] em, .h2 [class*=" nx-"] em{color:var(--rose);font-style:italic}
.h2 .nx-title{font-size:clamp(40px,7vw,104px);letter-spacing:-.05em;font-weight:800;line-height:.98}
.h2 .nx-title .ln{display:block;overflow:hidden;padding-bottom:.08em}
.h2 .nx-title .ln>span{display:inline-block;transform:translateY(110%) rotate(4deg);transition:transform 1.1s var(--e)}
.h2 .nx-title.nx-on .ln>span{transform:none}
.h2 .nx-title .ln:nth-child(2)>span{transition-delay:.12s}

/* ---------- 1 · ANATOMY ---------- */
.h2 .nx-anat{position:relative;height:420vh;margin-top:14vh}
.h2 .nx-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center}
.h2 .nx-anat-head{position:absolute;left:5vw;top:13vh;z-index:3;max-width:520px;transition:opacity .5s,transform .8s var(--e)}
.h2 .nx-anat-head .nx-title{font-size:clamp(36px,5.4vw,84px)}
.h2 .nx-big{position:absolute;left:50%;top:50%;font-size:clamp(140px,26vw,420px);font-weight:800;letter-spacing:-.06em;line-height:1;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--rose) 45%,transparent);white-space:nowrap;
  transform:translate(calc(-50% + (.5 - var(--p,0)) * 36vw),-50%);pointer-events:none;user-select:none}
.h2 .nx-orbit{position:absolute;left:50%;top:50%;width:min(64vh,520px);aspect-ratio:1;border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--rose) 55%,transparent);
  transform:translate(-50%,-50%) rotate(calc(var(--p,0) * 260deg)) scale(calc(.7 + var(--p2,0) * .3));opacity:calc(var(--p2,0))}
.h2 .nx-orbit::before,.h2 .nx-orbit::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:var(--gold);top:8%;left:14%;box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 25%,transparent)}
.h2 .nx-orbit::after{background:var(--rose);top:auto;left:auto;right:10%;bottom:14%;box-shadow:0 0 0 6px color-mix(in srgb,var(--rose) 22%,transparent)}
.h2 .nx-glow{position:absolute;left:50%;top:50%;width:min(80vh,680px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,color-mix(in srgb,var(--blush) 80%,transparent),transparent 65%);opacity:calc(.3 + var(--p2,0) * .7)}
.h2 .nx-penwrap{position:relative;height:min(74vh,640px);aspect-ratio:2/3;z-index:2;
  transform:translateY(calc((1 - var(--p2,0)) * 90px)) rotate(calc((1 - var(--p2,0)) * -24deg)) scale(calc(.8 + var(--p2,0) * .2));will-change:transform}
.h2 .nx-penwrap>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 40px 34px rgba(43,36,38,.32))}
.h2 .nx-hot{position:absolute;z-index:3}
.h2 .nx-dot{position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;background:var(--ivory);border:2px solid var(--rose);transform:scale(0);transition:transform .6s var(--e)}
.h2 .nx-dot::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:1.5px solid var(--rose);animation:nxPulse 2.2s ease-out infinite}
@keyframes nxPulse{from{transform:scale(.5);opacity:.9}to{transform:scale(1.5);opacity:0}}
.h2 .nx-lab{position:absolute;top:-30px;left:64px;width:230px;opacity:0;transform:translateX(-16px);transition:opacity .6s .15s,transform .8s .15s var(--e)}
.h2 .nx-lab::before{content:"";position:absolute;left:-52px;top:30px;width:52px;height:1.5px;background:var(--rose);transform:scaleX(0);transform-origin:left;transition:transform .6s .05s var(--e)}
.h2 .nx-hot.r .nx-lab{left:auto;right:64px;text-align:right;transform:translateX(16px)}
.h2 .nx-hot.r .nx-lab::before{left:auto;right:-52px;transform-origin:right}
.h2 .nx-hot.far .nx-lab{left:96px}.h2 .nx-hot.far .nx-lab::before{left:-84px;width:84px}
.h2 .nx-hot.on .nx-dot{transform:scale(1)}
.h2 .nx-hot.on .nx-lab{opacity:1;transform:none}
.h2 .nx-hot.on .nx-lab::before{transform:scaleX(1)}
.h2 .nx-lab b{display:block;font-size:12px;letter-spacing:.2em;color:var(--gold);font-weight:700}
.h2 .nx-lab h4{font-size:22px;letter-spacing:-.03em;font-weight:800;line-height:1.15;margin:2px 0 4px}
.h2 .nx-lab p{font-size:13.5px;color:var(--taupe);line-height:1.5}
.h2 .nx-steps{position:absolute;right:5vw;bottom:8vh;z-index:3;display:flex;align-items:center;gap:16px;font-weight:700;letter-spacing:.18em;font-size:12px;color:var(--taupe)}
.h2 .nx-steps .bar{width:min(180px,26vw);height:2px;background:var(--line);position:relative;overflow:hidden;border-radius:2px}
.h2 .nx-steps .bar i{position:absolute;inset:0;background:var(--rose);transform:scaleX(var(--p,0));transform-origin:left}
.h2 .nx-hint{position:absolute;left:5vw;bottom:8vh;z-index:3;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe);opacity:calc(1 - var(--p2,0) * 3)}

/* ---------- 2 · FLAT-LAY WALL ---------- */
.h2 .nx-wall{position:relative;padding:16vh 0 18vh;overflow:hidden;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--blush) 35%,transparent) 30%,color-mix(in srgb,var(--blush) 35%,transparent) 80%,transparent)}
.h2 .nx-wall-h{padding:0 5vw;position:relative;z-index:3;display:flex;justify-content:space-between;align-items:end;gap:4vw;flex-wrap:wrap;margin-bottom:8vh}
.h2 .nx-wall-h p{max-width:300px;color:var(--taupe)}
.h2 .nx-kin{position:absolute;left:0;top:34%;z-index:0;white-space:nowrap;font-size:clamp(120px,22vw,340px);font-weight:800;letter-spacing:-.05em;line-height:1;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--rose) 40%,transparent);transform:translateX(calc(var(--sp,0) * -38vw));pointer-events:none;user-select:none}
.h2 .nx-kin i{font-style:normal;color:var(--gold);-webkit-text-stroke:0;padding:0 .2em}
.h2 .nx-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,28px);padding:0 5vw;align-items:start}
.h2 .nx-fl{position:relative;aspect-ratio:3/4.3;border-radius:200px 200px 22px 22px;overflow:hidden;cursor:none;box-shadow:0 40px 60px -34px rgba(43,36,38,.55);
  clip-path:inset(100% 0 0 0 round 200px 200px 22px 22px);transition:clip-path 1.4s var(--e)}
.h2 .nx-fl:nth-child(2){margin-top:10vh;border-radius:22px 22px 200px 200px;clip-path:inset(0 0 100% 0 round 22px 22px 200px 200px);transition-delay:.12s}
.h2 .nx-fl:nth-child(3){margin-top:2vh;border-radius:22px 90px 22px 90px;clip-path:inset(0 100% 0 0 round 22px 90px 22px 90px);transition-delay:.24s}
.h2 .nx-fl:nth-child(4){margin-top:14vh;border-radius:999px;clip-path:circle(0% at 50% 50%);transition-delay:.36s;aspect-ratio:3/4.3}
.h2 .nx-fl.nx-on:nth-child(1){clip-path:inset(0 0 0 0 round 200px 200px 22px 22px)}
.h2 .nx-fl.nx-on:nth-child(2){clip-path:inset(0 0 0 0 round 22px 22px 200px 200px)}
.h2 .nx-fl.nx-on:nth-child(3){clip-path:inset(0 0 0 0 round 22px 90px 22px 90px)}
.h2 .nx-fl.nx-on:nth-child(4){clip-path:circle(80% at 50% 50%)}
.h2 .nx-fl img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;transform:translateY(calc(var(--py,0) * 9%)) scale(1.06);transition:filter .6s;will-change:transform}
.h2 .nx-fl:hover img{filter:saturate(1.15) contrast(1.05)}
.h2 .nx-fl::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(43,36,38,.6));opacity:0;transition:opacity .5s}
.h2 .nx-fl:hover::after{opacity:1}
.h2 .nx-fl figcaption{position:absolute;left:0;right:0;bottom:12%;z-index:2;text-align:center;color:#fff8f0;transform:translateY(16px);opacity:0;transition:.6s var(--e)}
.h2 .nx-fl:hover figcaption{transform:none;opacity:1}
.h2 .nx-fl figcaption b{display:block;font-size:12px;letter-spacing:.24em;color:var(--gold)}
.h2 .nx-fl figcaption span{font-size:20px;font-weight:800;letter-spacing:-.02em}
.h2 .nx-cur{position:fixed;left:0;top:0;z-index:250;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;display:grid;place-items:center;background:var(--rose);color:#fff8f0;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;pointer-events:none;
  transform:translate(var(--cx,-200px),var(--cy,-200px)) scale(0);transition:transform .35s var(--e);mix-blend-mode:normal}
.h2 .nx-cur.on{transform:translate(var(--cx),var(--cy)) scale(1)}
@media(pointer:coarse){.h2 .nx-fl{cursor:auto}.h2 .nx-cur{display:none}}

/* ---------- 3 · BUILD A KIT ---------- */
.h2 .nx-kit{position:relative;margin:6vh 2vw 0;border-radius:8vw;padding:16vh 5vw 14vh;overflow:hidden;color:#fff8f0;
  background:radial-gradient(circle at 15% 10%,color-mix(in srgb,var(--rose) 60%,transparent),transparent 45%),radial-gradient(circle at 90% 90%,color-mix(in srgb,var(--gold) 30%,transparent),transparent 40%),#2b2426;isolation:isolate}
.h2 .nx-kit .chip{background:rgba(255,255,255,.14);color:#fff8f0}
.h2 .nx-kit em{color:var(--blush)}
.h2 .nx-kit-h{display:flex;justify-content:space-between;align-items:end;gap:4vw;flex-wrap:wrap;margin-bottom:8vh}
.h2 .nx-kit-h p{max-width:320px;opacity:.75}
.h2 .nx-kit-grid{display:grid;grid-template-columns:1.9fr 1fr;gap:3vw;align-items:start}
.h2 .nx-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.h2 .nx-card{position:relative;border-radius:34px;padding:22px 18px 22px;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);text-align:center;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(40px);opacity:0;transition:transform .5s var(--e),opacity .9s var(--e),border-color .4s,background .4s}
.h2 .nx-card.nx-on{opacity:1;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.h2 .nx-card:nth-child(2).nx-on{transition-delay:.1s}.h2 .nx-card:nth-child(3).nx-on{transition-delay:.2s}
.h2 .nx-card.added{border-color:var(--gold);background:linear-gradient(160deg,color-mix(in srgb,var(--gold) 22%,transparent),rgba(255,255,255,.04))}
.h2 .nx-photo{position:relative;height:clamp(200px,24vw,320px);display:grid;place-items:center}
.h2 .nx-photo::before{content:"";position:absolute;width:75%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rose) 70%,transparent),transparent 68%);transition:transform .7s var(--e)}
.h2 .nx-card:hover .nx-photo::before{transform:scale(1.25)}
.h2 .nx-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 26px 20px rgba(0,0,0,.45));transform:translateZ(40px) translate(calc(var(--ry,0deg) * -.6),0);transition:transform .5s var(--e),opacity .3s}
.h2 .nx-card:hover .nx-photo img{transform:translateY(-8px) scale(1.06) rotate(-3deg)}
.h2 .nx-card.added .nx-photo img{opacity:.25}
.h2 .nx-card h3{font-size:20px;letter-spacing:-.03em;font-weight:800;margin-top:6px}
.h2 .nx-card p{font-size:13px;opacity:.7;margin:2px 0 14px}
.h2 .nx-add{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:8px 8px 8px 20px;border-radius:99px;border:0;cursor:pointer;background:var(--ivory);color:var(--rose-d);font:700 15px 'Manrope',sans-serif;transition:.4s var(--e)}
.h2 .nx-add i{width:36px;height:36px;border-radius:50%;background:var(--rose);color:#fff8f0;display:grid;place-items:center;font-style:normal;font-size:20px;line-height:1;transition:transform .5s var(--e),background .4s}
.h2 .nx-add:hover i{transform:rotate(90deg)}
.h2 .nx-card.added .nx-add{background:var(--gold);color:#2b2426}.h2 .nx-card.added .nx-add i{transform:rotate(45deg);background:#2b2426}
.h2 .nx-tray{position:sticky;top:110px;border-radius:34px;padding:26px;background:var(--ivory);color:var(--ink);box-shadow:0 40px 70px -30px rgba(0,0,0,.7)}
.h2 .nx-tray h3{font-size:26px;letter-spacing:-.04em;font-weight:800;line-height:1.1}
.h2 .nx-tray>small{color:var(--taupe);font-size:13px}
.h2 .nx-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}
.h2 .nx-slot{aspect-ratio:2/3;border-radius:18px;border:1.5px dashed color-mix(in srgb,var(--rose) 60%,transparent);display:grid;place-items:center;position:relative;background:color-mix(in srgb,var(--blush) 30%,transparent);transition:.5s var(--e)}
.h2 .nx-slot::before{content:"+";color:var(--rose);font-size:26px;font-weight:300}
.h2 .nx-slot img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;opacity:0;transform:scale(.4) rotate(-20deg);transition:.6s var(--e);filter:drop-shadow(0 10px 8px rgba(43,36,38,.3))}
.h2 .nx-slot.full{border-style:solid;background:#fff}.h2 .nx-slot.full::before{content:none}
.h2 .nx-slot.full img{opacity:1;transform:none}
.h2 .nx-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:14px}
.h2 .nx-total span{font-size:13px;color:var(--taupe)}.h2 .nx-total strong{font-size:34px;letter-spacing:-.05em;font-weight:800}
.h2 .nx-meter{height:6px;border-radius:6px;background:var(--line);margin:14px 0 8px;overflow:hidden}
.h2 .nx-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--rose),var(--gold));border-radius:6px;transition:width .8s var(--e)}
.h2 .nx-msg{font-size:13.5px;color:var(--taupe);min-height:22px;transition:color .4s}
.h2 .nx-tray.done .nx-msg{color:var(--rose-d);font-weight:700}
.h2 .nx-go{display:flex;justify-content:center;gap:8px;margin-top:14px;padding:15px 22px;border-radius:99px;background:var(--rose);color:#fff8f0;font-weight:700;pointer-events:none;opacity:.35;transition:.5s var(--e)}
.h2 .nx-tray.done .nx-go{opacity:1;pointer-events:auto;animation:nxPop .8s var(--e)}
.h2 .nx-tray.done .nx-go:hover{background:var(--rose-d);transform:translateY(-3px)}
@keyframes nxPop{40%{transform:scale(1.08)}}
.nx-fly{position:fixed;z-index:400;pointer-events:none;object-fit:contain;filter:drop-shadow(0 20px 16px rgba(0,0,0,.4));will-change:transform}
.nx-spark{position:fixed;z-index:401;pointer-events:none;color:var(--gold);font-size:18px;line-height:1}

/* ---------- 4 · FINAL CTA ---------- */
.h2 .nx-cta{position:relative;min-height:112vh;margin-top:8vh;padding:18vh 6vw 16vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;isolation:isolate;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,40%),color-mix(in srgb,var(--blush) 85%,transparent),transparent 70%)}
.h2 .nx-scrawl{position:absolute;inset:0;width:100%;height:100%;z-index:-1;color:var(--rose);pointer-events:none}
.h2 .nx-scrawl path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--draw,0))}
.h2 .nx-scrawl path.g{color:var(--gold);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--draw,0) * 1.1)}
.h2 .nx-cta .chip{margin-bottom:28px}
.h2 .nx-cta-t{font-size:clamp(46px,10.5vw,170px);font-weight:800;letter-spacing:-.06em;line-height:.92;max-width:1200px}
.h2 .nx-cta-t .wd{display:inline-block;white-space:nowrap}
.h2 .nx-cta-t .c{display:inline-block;transform:translateY(120%) rotate(12deg);opacity:0;transition:transform 1s var(--e),opacity .6s;transition-delay:calc(var(--i) * 35ms)}
.h2 .nx-cta-t .ov{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .1em}
.h2 .nx-cta-t.nx-on .c{transform:none;opacity:1}
.h2 .nx-cta-t .rose{color:var(--rose);font-style:italic}
.h2 .nx-cta p.sub{max-width:480px;color:var(--taupe);margin:30px auto 40px;font-size:17px}
.h2 .nx-form{display:flex;gap:8px;width:min(560px,100%);padding:8px;border-radius:99px;background:var(--ivory);box-shadow:0 30px 60px -30px rgba(43,36,38,.5);border:1px solid var(--line);transition:box-shadow .4s,transform .4s var(--e)}
.h2 .nx-form:focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--rose) 30%,transparent),0 30px 60px -30px rgba(43,36,38,.5)}
.h2 .nx-form input{flex:1;min-width:0;border:0;background:none;padding:0 20px;font:600 16px 'Manrope',sans-serif;color:var(--ink);outline:0}
.h2 .nx-form input::placeholder{color:var(--taupe)}
.h2 .nx-form button{position:relative;overflow:hidden;border:0;cursor:pointer;padding:17px 30px;border-radius:99px;background:var(--rose);color:#fff8f0;font:700 15px 'Manrope',sans-serif;white-space:nowrap;transition:background .4s,transform .3s}
.h2 .nx-form button::before{content:"";position:absolute;inset:0;background:var(--rose-d);transform:translateY(101%);transition:transform .5s var(--e);z-index:0}
.h2 .nx-form button:hover::before{transform:none}.h2 .nx-form button span{position:relative;z-index:1}
.h2 .nx-ok{margin-top:18px;min-height:24px;color:var(--sage);font-weight:700}
.h2 .nx-seal{position:absolute;right:7vw;top:16vh;width:clamp(96px,11vw,150px);color:var(--rose-d);animation:nxSpin 18s linear infinite}
.h2 .nx-seal text{font-size:9.6px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;fill:currentColor}
@keyframes nxSpin{to{transform:rotate(360deg)}}
.h2 .nx-fp{position:absolute;z-index:-1;pointer-events:none;filter:drop-shadow(0 30px 24px rgba(43,36,38,.28));transition:transform .2s linear}
.h2 .nx-fp img{display:block;width:100%;height:auto}
.h2 .nx-fp.a{left:3vw;bottom:8vh;width:clamp(120px,17vw,250px);rotate:-16deg}
.h2 .nx-fp.b{right:4vw;bottom:5vh;width:clamp(120px,16vw,240px);rotate:12deg}
.h2 .nx-fp.c{left:14vw;top:12vh;width:clamp(90px,10vw,150px);rotate:24deg}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .h2 .nx-anat{height:360vh}
  .h2 .nx-anat-head{top:11vh}
  .h2 .nx-penwrap{height:min(58vh,480px);margin-top:14vh}
  .h2 .nx-lab{width:150px;left:44px}.h2 .nx-hot.r .nx-lab{right:44px}
  .h2 .nx-lab::before{width:32px;left:-32px}.h2 .nx-hot.r .nx-lab::before{right:-32px}
  .h2 .nx-lab p{display:none}.h2 .nx-lab h4{font-size:17px}
  .h2 .nx-grid{grid-template-columns:repeat(2,1fr)}
  .h2 .nx-fl:nth-child(n){margin-top:0}.h2 .nx-fl:nth-child(even){margin-top:8vh}
  .h2 .nx-kit-grid{grid-template-columns:1fr}.h2 .nx-tray{position:relative;top:0}
  .h2 .nx-kit{border-radius:44px}
  .h2 .nx-seal{top:9vh;right:5vw}
}
@media(max-width:620px){
  .h2 .nx-cards{grid-template-columns:1fr}
  .h2 .nx-photo{height:240px}
  .h2 .nx-fp.c{display:none}
  .h2 .nx-form{flex-direction:column;border-radius:30px}.h2 .nx-form input{padding:14px 18px}
}
@media(max-width:620px){
  .h2 .nx-penwrap{height:min(42vh,380px);margin-top:16vh}
  .h2 .nx-lab,.h2 .nx-hot.far .nx-lab{width:118px;left:34px;top:-24px}
  .h2 .nx-hot.r .nx-lab{left:auto;right:34px}
  .h2 .nx-lab::before,.h2 .nx-hot.far .nx-lab::before{width:22px;left:-22px;top:24px}
  .h2 .nx-hot.r .nx-lab::before{left:auto;right:-22px}
  .h2 .nx-lab h4{font-size:14px}.h2 .nx-lab b{font-size:10px}
  .h2 .nx-big{font-size:38vw}
}
@media(prefers-reduced-motion:reduce){
  .h2 .nx-title .ln>span,.h2 .nx-cta-t .c{transform:none!important;opacity:1!important;transition:none}
  .h2 .nx-fl{clip-path:none!important}.h2 .nx-card{opacity:1;transform:none}
  .h2 .nx-seal,.h2 .nx-dot::after{animation:none}
}
/* dark theme touches */
html[data-theme=dark] .h2 .nx-tray,html.ppr-dark-mode .h2 .nx-tray{background:#2a2426;color:#f4ede6}
html[data-theme=dark] .h2 .nx-slot.full,html.ppr-dark-mode .h2 .nx-slot.full{background:#3a3134}
html[data-theme=dark] .h2 .nx-form,html.ppr-dark-mode .h2 .nx-form{background:#2a2426}

.gcard .art img + ::after, .gcard .art:has(img)::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(43,36,38,.55),transparent 45%);z-index:1;pointer-events:none}

/* day cards: photo backgrounds */
.h2 .pn-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.h2 .pn::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(43,36,38,.75),rgba(43,36,38,.15) 60%,rgba(43,36,38,.25))}
.h2 .pn h3,.h2 .pn p{position:relative;z-index:2}
.h2 .pn b{z-index:2}
.h2 .pn .orb{z-index:1;mix-blend-mode:soft-light}
/* shop bento: photo tiles */
/* shop bento: photo tiles */
.h2 .tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;transition:transform .8s var(--e)}
.h2 .tile:hover .tile-img{transform:scale(1.08)}
.h2 .tile:not(.t5)::after{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(to top,rgba(43,36,38,.7),rgba(43,36,38,.1) 60%)}
.h2 .t3 .tile-img{object-position:center top}

/* =========================================================
   RESPONSIVE + SIDEBAR FIXES
   (drawer polish, overflow / clipping fixes for all viewports)
   ========================================================= */

/* ---- sidebar (tablet + mobile) ---- */
html.ppr-menu-open,
body.ppr-menu-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.ppr-mobile-menu {
    height: 100vh;
    height: 100dvh;
    max-width: 100%;
}

.ppr-mobile-menu__inner {
    padding-bottom: max(22px, env(safe-area-inset-bottom));
}

.ppr-mobile-menu__link {
    font-family: inherit;
}

/* sidebar is only for < 1024px; never show it on desktop */
@media (min-width: 1024px) {
    .ppr-mobile-menu,
    .ppr-mobile-overlay {
        display: none;
    }
}

/* tablet: keep the drawer a comfortable width */
@media (min-width: 768px) and (max-width: 1023px) {
    .ppr-mobile-menu {
        width: min(420px, 60vw);
    }
}

/* hamburger -> X while the drawer is open */
.ppr-navbar__menu-button[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.ppr-navbar__menu-button[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.ppr-navbar__menu-button[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* very narrow phones: keep navbar controls inside the bar */
@media (max-width: 359px) {
    .ppr-navbar__brand-name { font-size: 12px; letter-spacing: .5px; }
    .ppr-navbar__mobile-actions { gap: 2px; }
}

/* ---- home 2 : horizontal overflow ---- */
.h2 .mq2 {
    margin: -2vw 0 0;
    width: 100%;
    max-width: 100%;
}
.h2 .row2 {
    font-size: clamp(20px, 3vw, 40px);
}

/* ---- home 2 : final CTA words clipped by their mask ---- */
.h2 .nx-cta-t .ov {
    padding: 0 .14em .12em .04em;
    margin-inline: -.1em;
}
.h2 .nx-title .ln {
    padding-bottom: .12em;
}

/* ---- home 2 : stats rings, keep the last odd ring centred ---- */
@media (max-width: 560px) {
    .h2 .ring:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 10px);
    }
}

/* ---- home 2 : anatomy labels + oversize outline word on phones ---- */
@media (max-width: 620px) {
    .h2 .nx-hot.r[data-at=".84"] .nx-lab {
        left: 34px;
        right: auto;
        text-align: left;
    }
    .h2 .nx-hot.r[data-at=".84"] .nx-lab::before {
        left: -22px;
        right: auto;
        transform-origin: left;
    }
    .h2 .nx-big {
        font-size: 30vw;
    }
}

/* ---- home 2 : "A day, at your desk" header on small screens ---- */
@media (max-width: 560px) {
    .h2 .day-h {
        gap: 10px;
    }
    .h2 .day-h p {
        white-space: nowrap;
        font-size: 11px;
        letter-spacing: .12em;
    }
}

/* ---- safety nets ---- */
img, video, canvas { max-width: 100%; }
h1, h2, h3, h4, p, li, a { overflow-wrap: break-word; }

/* ---- sidebar row alignment (Home / Products match About / Brands) ---- */
.ppr-mobile-menu__link.ppr-mobile-menu__dropdown-toggle {
    padding: 0 4px;
    font-weight: 700;
}
.ppr-mobile-menu__link.ppr-mobile-menu__dropdown-toggle:hover {
    padding-inline-start: 8px;
}

/* solid sticky footer so it never overlaps links on short screens */
.ppr-mobile-menu__footer,
html.ppr-dark-mode .ppr-mobile-menu__footer {
    background: var(--ppr-autumn-ivory);
    padding-top: 16px;
    margin-top: auto;
    box-shadow: 0 -10px 14px -8px var(--ppr-autumn-ivory);
}


/* =========================================================
   PAPERLY — ABOUT + BRANDS PAGE-SPECIFIC STYLES
   Imported from Meena project; shared navbar/footer styles omitted.
   ========================================================= */

/* =========================================================
   PAPERLY — ABOUT HERO
   FULL STATIONERY HERO
   ========================================================= */


/* =========================================================
   01. HERO
   ========================================================= */

.ppr-about-intro {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: min(760px, 90vh);

    overflow: hidden;

    padding-block: clamp(5rem, 8vw, 7rem);

    background: var(--ppr-warm-porcelain);

    color: var(--ppr-ink-charcoal);
}


.ppr-about-intro {
    padding-top: 2.5rem;
    padding-bottom: 5rem;
}
/* =========================================================
   02. MAIN CONTAINER
   ========================================================= */

.ppr-about-intro__container {
    position: relative;
    z-index: 10;

    width: min(
        calc(100% - 48px),
        var(--ppr-content-width)
    );

    min-height: 560px;

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(430px, 0.88fr);

    align-items: center;

    gap: clamp(3rem, 5vw, 6rem);
}


/* =========================================================
   03. CONTENT
   ========================================================= */

.ppr-about-intro__content {
    position: relative;
    z-index: 20;

    max-width: 650px;
}


/* =========================================================
   04. EYEBROW
   ========================================================= */

.ppr-about-intro__eyebrow {
    display: inline-flex;

    align-items: center;
    gap: 9px;

    margin: 0 0 1.25rem;

    color: var(--ppr-dusty-rose);

    font-size: 0.74rem;
    font-weight: 800;

    letter-spacing: 0.13em;
    text-transform: uppercase;

    opacity: 0;

    animation:
        pprAboutTextIn
        800ms
        cubic-bezier(.16, 1, .3, 1)
        150ms
        forwards;
}


.ppr-about-intro__eyebrow::before {
    content: "";

    width: 28px;
    height: 2px;

    border-radius: 999px;

    background: var(--ppr-champagne-gold);

    transform-origin: left center;

    animation:
        pprAboutLineGrow
        800ms
        ease
        350ms
        both;
}


/* =========================================================
   05. TITLE
   ========================================================= */

.ppr-about-intro__title {
    max-width: 700px;

    margin: 0;

    color: var(--ppr-ink-charcoal);

    font-size:
        clamp(
            3.3rem,
            5.4vw,
            5.8rem
        );

    font-weight: 700;

    line-height: 1.01;

    letter-spacing: -0.045em;

    opacity: 0;

    animation:
        pprAboutTitleIn
        1000ms
        cubic-bezier(.16, 1, .3, 1)
        300ms
        forwards;
}


.ppr-about-intro__title span {
    display: block;

    color: var(--ppr-dusty-rose);
}


/* =========================================================
   06. TEXT
   ========================================================= */

.ppr-about-intro__text {
    max-width: 580px;

    margin: 1.65rem 0 0;

    color:
        color-mix(
            in srgb,
            var(--ppr-ink-charcoal) 72%,
            transparent
        );

    font-size: 0.95rem;
    font-weight: 500;

    line-height: 1.8;

    opacity: 0;

    animation:
        pprAboutTextIn
        850ms
        cubic-bezier(.16, 1, .3, 1)
        550ms
        forwards;
}


/* =========================================================
   07. INFORMATION
   ========================================================= */

.ppr-about-intro__info {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 2rem;

    opacity: 0;

    animation:
        pprAboutTextIn
        850ms
        cubic-bezier(.16, 1, .3, 1)
        700ms
        forwards;
}


.ppr-about-intro__info-number {
    color: var(--ppr-champagne-gold);

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.08em;
}


.ppr-about-intro__info-line {
    width: 42px;
    height: 1px;

    background: var(--ppr-warm-taupe);

    transform-origin: left center;

    animation:
        pprAboutLineGrow
        900ms
        ease
        900ms
        both;
}


.ppr-about-intro__info-text {
    color: var(--ppr-warm-taupe);

    font-size: 0.68rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* =========================================================
   08. IMAGE AREA
   ========================================================= */

.ppr-about-intro__visual {
    position: relative;

    z-index: 15;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* =========================================================
   09. IMAGE CARD
   ========================================================= */

.ppr-about-intro__image-card {
    position: relative;

    z-index: 15;

    width: min(
        100%,
        480px
    );

    padding: 11px;

    border-radius: 28px;

    background: var(--ppr-autumn-ivory);

    box-shadow:
        0 28px 65px
        rgba(46, 41, 42, 0.15);

    opacity: 0;

    transform:
        translateY(45px)
        rotate(1.5deg)
        scale(0.97);

    animation:
        pprAboutImageIn
        1200ms
        cubic-bezier(.16, 1, .3, 1)
        250ms
        forwards;
}


/* =========================================================
   10. IMAGE WRAPPER
   ========================================================= */

.ppr-about-intro__image-wrap {
    position: relative;

    width: 100%;

    overflow: hidden;

    aspect-ratio: 0.88;

    border-radius: 20px;

    background: var(--ppr-warm-taupe);
}


/* =========================================================
   11. IMAGE
   ========================================================= */

.ppr-about-intro__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.08);

    animation:
        pprAboutImageZoom
        1500ms
        cubic-bezier(.16, 1, .3, 1)
        350ms
        forwards;
}


/* =========================================================
   12. IMAGE NOTE
   ========================================================= */

.ppr-about-intro__image-note {
    position: absolute;

    left: 28px;
    bottom: 28px;

    z-index: 20;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 10px 15px;

    border-radius: 999px;

    background: var(--ppr-warm-porcelain);

    color: var(--ppr-ink-charcoal);

    box-shadow:
        0 10px 25px
        rgba(46, 41, 42, 0.15);

    font-size: 0.67rem;

    font-weight: 700;

    opacity: 0;

    transform:
        translateY(10px);

    animation:
        pprAboutNoteIn
        700ms
        cubic-bezier(.16, 1, .3, 1)
        1000ms
        forwards;
}


.ppr-about-intro__image-note-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: var(--ppr-sage-leaf);

    box-shadow:
        0 0 0 4px
        color-mix(
            in srgb,
            var(--ppr-sage-leaf) 12%,
            transparent
        );

    animation:
        pprAboutStatusPulse
        2.4s
        ease-in-out
        1.2s
        infinite;
}


/* =========================================================
   13. SOFT BACKGROUND SHAPES
   ========================================================= */

.ppr-about-intro__soft-shape {
    position: absolute;

    z-index: 1;

    pointer-events: none;

    border-radius: 50%;
}


/* Large right shape */

.ppr-about-intro__soft-shape--one {
    width: 510px;
    height: 510px;

    right: 3%;
    top: 12%;

    background:
        color-mix(
            in srgb,
            var(--ppr-autumn-ivory) 70%,
            transparent
        );

    opacity: 0.8;

    animation:
        pprAboutShapeFloat
        9s
        ease-in-out
        infinite;
}


/* Small left / center shape */

.ppr-about-intro__soft-shape--two {
    width: 190px;
    height: 190px;

    left: 35%;
    bottom: -45px;

    background:
        color-mix(
            in srgb,
            var(--ppr-dusty-rose) 9%,
            transparent
        );

    animation:
        pprAboutShapeFloatTwo
        8s
        ease-in-out
        infinite;
}


/* =========================================================
   14. DECORATION CONTAINER
   ========================================================= */

.ppr-about-intro__decorations {
    position: absolute;

    inset: 0;

    z-index: 5;

    pointer-events: none;
}


/* =========================================================
   15. PAPER SHEETS
   ========================================================= */

.ppr-about-intro__paper-sheet {
    position: absolute;

    width: 76px;
    height: 98px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--ppr-champagne-gold) 50%,
            transparent
        );

    border-radius: 9px;

    background:
        color-mix(
            in srgb,
            var(--ppr-autumn-ivory) 72%,
            transparent
        );

    box-shadow:
        0 10px 24px
        rgba(46, 41, 42, 0.06);

    opacity: 0.72;
}


/* Paper lines */

.ppr-about-intro__paper-sheet::before {
    content: "";

    position: absolute;

    left: 13px;
    right: 13px;
    top: 23px;

    height: 1px;

    background:
        color-mix(
            in srgb,
            var(--ppr-warm-taupe) 50%,
            transparent
        );

    box-shadow:
        0 11px 0
        color-mix(
            in srgb,
            var(--ppr-warm-taupe) 38%,
            transparent
        ),
        0 22px 0
        color-mix(
            in srgb,
            var(--ppr-warm-taupe) 28%,
            transparent
        );
}


/* Left paper */

.ppr-about-intro__paper-sheet--left {
    left: 4%;

    top: 19%;

    transform: rotate(-13deg);

    animation:
        pprAboutPaperLeft
        7s
        ease-in-out
        infinite;
}


/* Right paper */

.ppr-about-intro__paper-sheet--right {
    right: 3%;

    bottom: 17%;

    width: 65px;
    height: 84px;

    transform: rotate(13deg);

    opacity: 0.5;

    animation:
        pprAboutPaperRight
        8s
        ease-in-out
        infinite;
}


/* =========================================================
   16. SMALL PAPER
   ========================================================= */

.ppr-about-intro__small-paper {
    position: absolute;

    width: 48px;
    height: 62px;

    border-radius: 7px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--ppr-dusty-rose) 38%,
            transparent
        );

    background:
        color-mix(
            in srgb,
            var(--ppr-warm-porcelain) 65%,
            transparent
        );

    opacity: 0.65;
}


.ppr-about-intro__small-paper--left {
    left: 26%;

    bottom: 12%;

    transform: rotate(16deg);

    animation:
        pprAboutSmallPaper
        6s
        ease-in-out
        infinite;
}


.ppr-about-intro__small-paper--right {
    right: 22%;

    top: 9%;

    transform: rotate(-15deg);

    animation:
        pprAboutSmallPaperTwo
        7s
        ease-in-out
        infinite;
}


/* =========================================================
   17. PAPER CLIPS
   ========================================================= */

.ppr-about-intro__paperclip {
    position: absolute;

    width: 25px;
    height: 58px;

    border:
        3px solid
        var(--ppr-dusty-rose);

    border-radius: 16px;

    opacity: 0.8;

    filter:
        drop-shadow(
            0 5px 8px
            rgba(46, 41, 42, 0.10)
        );
}


.ppr-about-intro__paperclip::after {
    content: "";

    position: absolute;

    left: 5px;
    top: 7px;

    width: 12px;
    height: 43px;

    border:
        2px solid
        var(--ppr-dusty-rose);

    border-bottom: 0;

    border-radius:
        12px
        12px
        0
        0;
}


/* Left */

.ppr-about-intro__paperclip--left {
    left: 30%;

    top: 14%;

    transform: rotate(24deg);

    animation:
        pprAboutClipLeft
        5.5s
        ease-in-out
        infinite;
}


/* Right */

.ppr-about-intro__paperclip--right {
    right: 8%;

    top: 14%;

    transform: rotate(-20deg);

    animation:
        pprAboutClipRight
        6s
        ease-in-out
        infinite;
}


/* =========================================================
   18. PINS
   ========================================================= */

.ppr-about-intro__pin {
    position: absolute;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background: var(--ppr-dusty-rose);

    box-shadow:
        0 6px 12px
        rgba(46, 41, 42, 0.14);
}


.ppr-about-intro__pin::before {
    content: "";

    position: absolute;

    left: 6px;
    top: 5px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.35);
}


.ppr-about-intro__pin::after {
    content: "";

    position: absolute;

    left: 8px;
    top: 17px;

    width: 3px;
    height: 25px;

    border-radius: 999px;

    background:
        var(--ppr-dusty-rose-dark);

    transform: rotate(-7deg);
}


.ppr-about-intro__pin--left {
    left: 43%;

    top: 10%;

    animation:
        pprAboutPinLeft
        4.5s
        ease-in-out
        infinite;
}


.ppr-about-intro__pin--right {
    right: 28%;

    top: 7%;

    transform: scale(0.8);

    animation:
        pprAboutPinRight
        5s
        ease-in-out
        infinite;
}


/* =========================================================
   19. STICKY NOTE
   ========================================================= */

.ppr-about-intro__sticky {
    position: absolute;

    right: 8%;

    bottom: 9%;

    width: 68px;
    height: 68px;

    border-radius: 8px;

    background:
        color-mix(
            in srgb,
            var(--ppr-champagne-gold) 82%,
            var(--ppr-warm-porcelain)
        );

    opacity: 0.72;

    box-shadow:
        0 12px 25px
        rgba(46, 41, 42, 0.10);

    transform: rotate(-9deg);

    animation:
        pprAboutSticky
        6.5s
        ease-in-out
        infinite;
}


.ppr-about-intro__sticky::before {
    content: "";

    position: absolute;

    left: 12px;
    right: 12px;
    top: 18px;

    height: 1px;

    background:
        color-mix(
            in srgb,
            var(--ppr-ink-charcoal) 20%,
            transparent
        );

    box-shadow:
        0 10px 0
        color-mix(
            in srgb,
            var(--ppr-ink-charcoal) 14%,
            transparent
        ),
        0 20px 0
        color-mix(
            in srgb,
            var(--ppr-ink-charcoal) 9%,
            transparent
        );
}


.ppr-about-intro__sticky::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 17px;
    height: 17px;

    border-radius:
        4px
        0
        8px
        0;

    background:
        color-mix(
            in srgb,
            var(--ppr-warm-porcelain) 60%,
            transparent
        );
}


/* =========================================================
   20. PENCILS
   ========================================================= */

.ppr-about-intro__pencil {
    position: absolute;

    width: 100px;
    height: 10px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--ppr-dusty-rose) 0 68%,
            var(--ppr-champagne-gold) 68% 84%,
            var(--ppr-warm-taupe) 84%
        );

    box-shadow:
        0 5px 10px
        rgba(46, 41, 42, 0.10);

    opacity: 0.7;
}


.ppr-about-intro__pencil::before {
    content: "";

    position: absolute;

    left: -14px;
    top: 0;

    border-top:
        5px solid transparent;

    border-bottom:
        5px solid transparent;

    border-right:
        15px solid
        var(--ppr-ink-charcoal);

    opacity: 0.55;
}


.ppr-about-intro__pencil--left {
    left: 7%;

    bottom: 14%;

    transform: rotate(-23deg);

    animation:
        pprAboutPencilLeft
        7s
        ease-in-out
        infinite;
}


.ppr-about-intro__pencil--right {
    right: 27%;

    bottom: 7%;

    width: 75px;

    transform: rotate(18deg);

    opacity: 0.55;

    animation:
        pprAboutPencilRight
        7.5s
        ease-in-out
        infinite;
}


/* =========================================================
   21. DOTS
   ========================================================= */

.ppr-about-intro__dot {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--ppr-sage-leaf);

    opacity: 0.6;

    animation:
        pprAboutDot
        4s
        ease-in-out
        infinite;
}


.ppr-about-intro__dot--one {
    left: 39%;

    top: 31%;
}


.ppr-about-intro__dot--two {
    right: 15%;

    bottom: 27%;

    width: 6px;
    height: 6px;

    background:
        var(--ppr-dusty-rose);

    animation-delay: 900ms;
}


/* =========================================================
   22. CIRCLE DETAIL
   ========================================================= */

.ppr-about-intro__circle {
    position: absolute;

    left: 45%;

    bottom: 19%;

    width: 12px;
    height: 12px;

    border:
        2px solid
        var(--ppr-champagne-gold);

    border-radius: 50%;

    opacity: 0.55;

    animation:
        pprAboutCircle
        5s
        ease-in-out
        infinite;
}


/* =========================================================
   23. TINY STAR / PLUS
   ========================================================= */

.ppr-about-intro__tiny-star {
    position: absolute;

    left: 17%;

    top: 25%;

    width: 13px;
    height: 13px;

    opacity: 0.45;

    animation:
        pprAboutStar
        5s
        ease-in-out
        infinite;
}


.ppr-about-intro__tiny-star::before,
.ppr-about-intro__tiny-star::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 2px;
    height: 13px;

    border-radius: 999px;

    background:
        var(--ppr-champagne-gold);

    transform:
        translate(-50%, -50%);
}


.ppr-about-intro__tiny-star::after {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}


/* =========================================================
   24. TEXT ANIMATION
   ========================================================= */

@keyframes pprAboutTextIn {

    from {
        opacity: 0;

        transform:
            translateY(28px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes pprAboutTitleIn {

    from {
        opacity: 0;

        transform:
            translateY(40px)
            scale(0.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


@keyframes pprAboutLineGrow {

    from {
        transform: scaleX(0);

        opacity: 0;
    }

    to {
        transform: scaleX(1);

        opacity: 1;
    }

}


/* =========================================================
   25. IMAGE ANIMATION
   ========================================================= */

@keyframes pprAboutImageIn {

    from {
        opacity: 0;

        transform:
            translateY(45px)
            rotate(1.5deg)
            scale(0.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            rotate(1.5deg)
            scale(1);
    }

}


@keyframes pprAboutImageZoom {

    from {
        transform: scale(1.08);
    }

    to {
        transform: scale(1);
    }

}


@keyframes pprAboutNoteIn {

    from {
        opacity: 0;

        transform:
            translateY(15px)
            scale(0.95);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


@keyframes pprAboutStatusPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.35);
    }

}


/* =========================================================
   26. BACKGROUND SHAPE ANIMATION
   ========================================================= */

@keyframes pprAboutShapeFloat {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-12px, -14px, 0)
            scale(1.035);
    }

}


@keyframes pprAboutShapeFloatTwo {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0);
    }

    50% {
        transform:
            translate3d(14px, -10px, 0);
    }

}


/* =========================================================
   27. PAPER ANIMATIONS
   ========================================================= */

@keyframes pprAboutPaperLeft {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(-13deg);
    }

    35% {
        transform:
            translate3d(8px, -13px, 0)
            rotate(-8deg);
    }

    70% {
        transform:
            translate3d(-5px, -6px, 0)
            rotate(-16deg);
    }

}


@keyframes pprAboutPaperRight {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(13deg);
    }

    50% {
        transform:
            translate3d(-9px, -12px, 0)
            rotate(8deg);
    }

}


@keyframes pprAboutSmallPaper {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(16deg);
    }

    50% {
        transform:
            translateY(-12px)
            rotate(21deg);
    }

}


@keyframes pprAboutSmallPaperTwo {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-15deg);
    }

    50% {
        transform:
            translateY(10px)
            rotate(-9deg);
    }

}


/* =========================================================
   28. PAPERCLIP ANIMATIONS
   ========================================================= */

@keyframes pprAboutClipLeft {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(24deg);
    }

    30% {
        transform:
            translateY(-12px)
            rotate(29deg);
    }

    65% {
        transform:
            translateY(-5px)
            rotate(19deg);
    }

}


@keyframes pprAboutClipRight {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-20deg);
    }

    50% {
        transform:
            translateY(-14px)
            rotate(-14deg);
    }

}


/* =========================================================
   29. PIN ANIMATIONS
   ========================================================= */

@keyframes pprAboutPinLeft {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0);
    }

    50% {
        transform:
            translateY(-9px)
            rotate(10deg);
    }

}


@keyframes pprAboutPinRight {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0);
    }

    50% {
        transform:
            translateY(-7px)
            rotate(-9deg);
    }

}


/* =========================================================
   30. STICKY ANIMATION
   ========================================================= */

@keyframes pprAboutSticky {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(-9deg);
    }

    35% {
        transform:
            translate3d(-9px, -10px, 0)
            rotate(-4deg);
    }

    70% {
        transform:
            translate3d(3px, -5px, 0)
            rotate(-12deg);
    }

}


/* =========================================================
   31. PENCIL ANIMATIONS
   ========================================================= */

@keyframes pprAboutPencilLeft {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(-23deg);
    }

    50% {
        transform:
            translate3d(15px, -10px, 0)
            rotate(-18deg);
    }

}


@keyframes pprAboutPencilRight {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(18deg);
    }

    50% {
        transform:
            translate3d(-12px, -9px, 0)
            rotate(23deg);
    }

}


/* =========================================================
   32. SMALL DETAILS
   ========================================================= */

@keyframes pprAboutDot {

    0%,
    100% {
        transform:
            translateY(0)
            scale(1);

        opacity: 0.4;
    }

    50% {
        transform:
            translateY(-9px)
            scale(1.35);

        opacity: 0.75;
    }

}


@keyframes pprAboutCircle {

    0%,
    100% {
        transform:
            translateY(0)
            scale(1);
    }

    50% {
        transform:
            translateY(-10px)
            scale(1.25);
    }

}


@keyframes pprAboutStar {

    0%,
    100% {
        transform:
            rotate(0deg)
            scale(1);
    }

    50% {
        transform:
            rotate(90deg)
            scale(1.2);
    }

}


/* =========================================================
   33. TABLET
   768px — 1024px
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    .ppr-about-intro {
        min-height: auto;

        padding-block:
            4.5rem
            5rem;
    }


    .ppr-about-intro__container {
        width:
            min(
                calc(100% - 48px),
                920px
            );

        min-height: 520px;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(310px, 0.82fr);

        gap: 3rem;
    }


    .ppr-about-intro__title {
        font-size:
            clamp(
                3rem,
                6vw,
                4.4rem
            );
    }


    .ppr-about-intro__text {
        font-size: 0.88rem;
    }


    .ppr-about-intro__image-card {
        width:
            min(
                100%,
                370px
            );

        padding: 9px;

        border-radius: 23px;
    }


    .ppr-about-intro__image-wrap {
        border-radius: 17px;
    }


    .ppr-about-intro__soft-shape--one {
        width: 350px;
        height: 350px;

        right: -30px;
    }


    .ppr-about-intro__paper-sheet--left {
        left: 1%;
    }


    .ppr-about-intro__paperclip--left {
        left: 32%;
    }


    .ppr-about-intro__paperclip--right {
        right: 3%;
    }


    .ppr-about-intro__pencil--left {
        left: 2%;
    }


    .ppr-about-intro__sticky {
        right: 3%;
    }

}


/* =========================================================
   34. LARGE DEVICES
   1025px — 1280px
   ========================================================= */

@media (min-width: 1025px) and (max-width: 1280px) {

    .ppr-about-intro__container {
        width:
            min(
                calc(100% - 56px),
                1160px
            );

        gap: 4rem;
    }


    .ppr-about-intro__title {
        font-size:
            clamp(
                3.3rem,
                5.3vw,
                5.2rem
            );
    }


    .ppr-about-intro__image-card {
        width:
            min(
                100%,
                445px
            );
    }


    .ppr-about-intro__paper-sheet--left {
        left: 3%;
    }


    .ppr-about-intro__paperclip--left {
        left: 30%;
    }


    .ppr-about-intro__paperclip--right {
        right: 7%;
    }

}


/* =========================================================
   35. MOBILE
   320px — 767px
   ========================================================= */

@media (max-width: 767px) {

    .ppr-about-intro {
        min-height: auto;

        padding-block:
            3.25rem
            4rem;
    }


    .ppr-about-intro__container {
        width:
            calc(100% - 32px);

        min-height: auto;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 2.8rem;
    }


    .ppr-about-intro__content {
        max-width: none;
    }


    .ppr-about-intro__title {
        font-size:
            clamp(
                2.65rem,
                12.5vw,
                4rem
            );
    }


    .ppr-about-intro__text {
        font-size: 0.86rem;

        line-height: 1.75;
    }


    .ppr-about-intro__visual {
        width: 100%;
    }


    .ppr-about-intro__image-card {
        width:
            calc(100% - 14px);

        margin-inline: auto;

        padding: 8px;

        border-radius: 22px;
    }


    .ppr-about-intro__image-wrap {
        aspect-ratio: 0.9;

        border-radius: 16px;
    }


    .ppr-about-intro__image-note {
        left: 17px;

        bottom: 17px;

        padding:
            8px
            11px;

        font-size: 0.61rem;
    }


    /* ---------------------------------------------
       MOBILE BACKGROUND
       --------------------------------------------- */

    .ppr-about-intro__soft-shape--one {
        width: 280px;
        height: 280px;

        right: -100px;

        top: 45%;
    }


    .ppr-about-intro__soft-shape--two {
        width: 120px;
        height: 120px;

        left: -45px;

        bottom: 10%;
    }


    /* ---------------------------------------------
       MOBILE DECORATIONS
       --------------------------------------------- */

    .ppr-about-intro__paper-sheet--left {
        left: -8px;

        top: 39%;

        width: 55px;
        height: 72px;
    }


    .ppr-about-intro__small-paper--left {
        left: 3%;

        bottom: 20%;

        width: 38px;
        height: 50px;
    }


    .ppr-about-intro__paper-sheet--right {
        right: -7px;

        bottom: 15%;

        width: 50px;
        height: 65px;
    }


    .ppr-about-intro__small-paper--right {
        right: 6%;

        top: 36%;

        width: 38px;
        height: 49px;
    }


    .ppr-about-intro__paperclip--left {
        left: 5%;

        top: 34%;

        transform:
            scale(0.72)
            rotate(24deg);
    }


    .ppr-about-intro__paperclip--right {
        right: 1%;

        top: 39%;

        transform:
            scale(0.72)
            rotate(-20deg);
    }


    .ppr-about-intro__pin--left {
        left: 82%;

        top: 34%;

        transform: scale(0.75);
    }


    .ppr-about-intro__pin--right {
        right: 10%;

        top: 48%;

        transform: scale(0.65);
    }


    .ppr-about-intro__sticky {
        right: -3px;

        bottom: 11%;

        width: 50px;
        height: 50px;
    }


    .ppr-about-intro__pencil--left {
        left: 0;

        bottom: 24%;

        width: 68px;

        transform: rotate(-23deg);
    }


    .ppr-about-intro__pencil--right {
        right: 7%;

        bottom: 7%;

        width: 60px;
    }


    .ppr-about-intro__dot--one {
        left: 9%;

        top: 43%;
    }


    .ppr-about-intro__dot--two {
        right: 8%;

        bottom: 25%;
    }


    .ppr-about-intro__circle {
        left: 92%;

        bottom: 32%;
    }


    .ppr-about-intro__tiny-star {
        left: 15%;

        top: 27%;
    }

}


/* =========================================================
   36. SMALL MOBILE
   320px — 430px
   ========================================================= */

@media (max-width: 430px) {

    .ppr-about-intro {
        padding-block:
            2.75rem
            3.5rem;
    }


    .ppr-about-intro__container {
        width:
            calc(100% - 28px);

        gap: 2.5rem;
    }


    .ppr-about-intro__title {
        font-size:
            clamp(
                2.4rem,
                12.2vw,
                3.5rem
            );

        letter-spacing: -0.04em;
    }


    .ppr-about-intro__text {
        font-size: 0.82rem;
    }


    .ppr-about-intro__image-card {
        width:
            calc(100% - 8px);

        padding: 7px;

        border-radius: 19px;
    }


    .ppr-about-intro__image-wrap {
        border-radius: 14px;
    }


    .ppr-about-intro__image-note {
        left: 13px;

        bottom: 13px;

        padding:
            7px
            10px;

        font-size: 0.57rem;
    }


    .ppr-about-intro__paper-sheet--left {
        left: -16px;
    }


    .ppr-about-intro__paperclip--left {
        left: -4px;
    }


    .ppr-about-intro__paperclip--right {
        right: -5px;
    }


    .ppr-about-intro__sticky {
        right: -8px;
    }


    .ppr-about-intro__pencil--left {
        left: -5px;
    }

}


/* =========================================================
   37. VERY SMALL
   320px — 359px
   ========================================================= */

@media (max-width: 359px) {

    .ppr-about-intro__container {
        width:
            calc(100% - 24px);
    }


    .ppr-about-intro__title {
        font-size: 2.3rem;
    }


    .ppr-about-intro__text {
        font-size: 0.8rem;
    }


    .ppr-about-intro__info-text {
        font-size: 0.55rem;
    }


    .ppr-about-intro__image-note {
        font-size: 0.54rem;
    }

}


/* =========================================================
   38. DARK MODE
   ========================================================= */

html.ppr-dark-mode .ppr-about-intro__image-card {
    box-shadow:
        0 28px 65px
        rgba(0, 0, 0, 0.28);
}


html.ppr-dark-mode .ppr-about-intro__image-note {
    background:
        var(--ppr-autumn-ivory);

    color:
        var(--ppr-ink-charcoal);
}


html.ppr-dark-mode .ppr-about-intro__paper-sheet,
html.ppr-dark-mode .ppr-about-intro__small-paper {
    box-shadow:
        0 10px 24px
        rgba(0, 0, 0, 0.18);
}


html.ppr-dark-mode .ppr-about-intro__sticky {
    box-shadow:
        0 12px 25px
        rgba(0, 0, 0, 0.22);
}


/* =========================================================
   39. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ppr-about-intro *,
    .ppr-about-intro *::before,
    .ppr-about-intro *::after {
        animation-duration: 1ms !important;

        animation-delay: 0ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 1ms !important;
    }


    .ppr-about-intro__image {
        transform: none;
    }

}

/* =========================================================
   PAPERLY — ABOUT HERO
   SCROLL-LINKED STATIONERY MOVEMENT
   ========================================================= */

/*
   IMPORTANT:
   This works together with the existing transform animations.

   The CSS `translate` property is intentionally used here
   instead of replacing `transform`, so your existing:
   - rotate()
   - scale()
   - floating animations
   continue working.
*/


/* =========================================================
   40. SCROLL PARALLAX BASE
   ========================================================= */

.ppr-about-intro__paper-sheet,
.ppr-about-intro__small-paper,
.ppr-about-intro__paperclip,
.ppr-about-intro__pin,
.ppr-about-intro__sticky,
.ppr-about-intro__pencil,
.ppr-about-intro__dot,
.ppr-about-intro__circle,
.ppr-about-intro__tiny-star,
.ppr-about-intro__soft-shape {

    translate:
        0
        var(--ppr-about-scroll-y, 0px);

    will-change:
        transform,
        translate;
}


/* =========================================================
   41. DIFFERENT SCROLL DEPTHS
   ========================================================= */

/*
   These transition values make the objects follow the
   scroll smoothly instead of jumping.
*/

.ppr-about-intro__paper-sheet {

    transition:
        translate 90ms linear;
}


.ppr-about-intro__small-paper {

    transition:
        translate 110ms linear;
}


.ppr-about-intro__paperclip {

    transition:
        translate 80ms linear;
}


.ppr-about-intro__pin {

    transition:
        translate 70ms linear;
}


.ppr-about-intro__sticky {

    transition:
        translate 120ms linear;
}


.ppr-about-intro__pencil {

    transition:
        translate 100ms linear;
}


.ppr-about-intro__dot {

    transition:
        translate 70ms linear;
}


.ppr-about-intro__circle {

    transition:
        translate 80ms linear;
}


.ppr-about-intro__tiny-star {

    transition:
        translate 90ms linear;
}


.ppr-about-intro__soft-shape {

    transition:
        translate 160ms linear;
}


/* =========================================================
   42. HERO SCROLL DEPTH
   ========================================================= */

/*
   The CSS variables below are only fallbacks.
   JavaScript changes them continuously while scrolling.
*/


.ppr-about-intro__paper-sheet--left {
    --ppr-about-scroll-depth: -0.16;
}


.ppr-about-intro__paper-sheet--right {
    --ppr-about-scroll-depth: 0.20;
}


.ppr-about-intro__small-paper--left {
    --ppr-about-scroll-depth: -0.24;
}


.ppr-about-intro__small-paper--right {
    --ppr-about-scroll-depth: 0.18;
}


.ppr-about-intro__paperclip--left {
    --ppr-about-scroll-depth: -0.30;
}


.ppr-about-intro__paperclip--right {
    --ppr-about-scroll-depth: 0.27;
}


.ppr-about-intro__pin--left {
    --ppr-about-scroll-depth: -0.34;
}


.ppr-about-intro__pin--right {
    --ppr-about-scroll-depth: 0.24;
}


.ppr-about-intro__sticky {
    --ppr-about-scroll-depth: -0.20;
}


.ppr-about-intro__pencil--left {
    --ppr-about-scroll-depth: 0.28;
}


.ppr-about-intro__pencil--right {
    --ppr-about-scroll-depth: -0.22;
}


.ppr-about-intro__dot--one {
    --ppr-about-scroll-depth: -0.38;
}


.ppr-about-intro__dot--two {
    --ppr-about-scroll-depth: 0.32;
}


.ppr-about-intro__circle {
    --ppr-about-scroll-depth: -0.27;
}


.ppr-about-intro__tiny-star {
    --ppr-about-scroll-depth: 0.20;
}


.ppr-about-intro__soft-shape--one {
    --ppr-about-scroll-depth: 0.10;
}


.ppr-about-intro__soft-shape--two {
    --ppr-about-scroll-depth: -0.12;
}


/* =========================================================
   43. MOBILE SCROLL DEPTH
   ========================================================= */

@media (max-width: 767px) {

    .ppr-about-intro__paper-sheet--left {
        --ppr-about-scroll-depth: -0.10;
    }


    .ppr-about-intro__paper-sheet--right {
        --ppr-about-scroll-depth: 0.13;
    }


    .ppr-about-intro__small-paper--left {
        --ppr-about-scroll-depth: -0.15;
    }


    .ppr-about-intro__small-paper--right {
        --ppr-about-scroll-depth: 0.12;
    }


    .ppr-about-intro__paperclip--left {
        --ppr-about-scroll-depth: -0.18;
    }


    .ppr-about-intro__paperclip--right {
        --ppr-about-scroll-depth: 0.17;
    }


    .ppr-about-intro__pin--left {
        --ppr-about-scroll-depth: -0.20;
    }


    .ppr-about-intro__pin--right {
        --ppr-about-scroll-depth: 0.16;
    }


    .ppr-about-intro__sticky {
        --ppr-about-scroll-depth: -0.13;
    }


    .ppr-about-intro__pencil--left {
        --ppr-about-scroll-depth: 0.17;
    }


    .ppr-about-intro__pencil--right {
        --ppr-about-scroll-depth: -0.14;
    }


    .ppr-about-intro__dot--one {
        --ppr-about-scroll-depth: -0.20;
    }


    .ppr-about-intro__dot--two {
        --ppr-about-scroll-depth: 0.18;
    }


    .ppr-about-intro__circle {
        --ppr-about-scroll-depth: -0.15;
    }


    .ppr-about-intro__tiny-star {
        --ppr-about-scroll-depth: 0.13;
    }


    .ppr-about-intro__soft-shape--one {
        --ppr-about-scroll-depth: 0.06;
    }


    .ppr-about-intro__soft-shape--two {
        --ppr-about-scroll-depth: -0.07;
    }

}


/* =========================================================
   44. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ppr-about-intro__paper-sheet,
    .ppr-about-intro__small-paper,
    .ppr-about-intro__paperclip,
    .ppr-about-intro__pin,
    .ppr-about-intro__sticky,
    .ppr-about-intro__pencil,
    .ppr-about-intro__dot,
    .ppr-about-intro__circle,
    .ppr-about-intro__tiny-star,
    .ppr-about-intro__soft-shape {

        translate: none !important;

        will-change: auto;

    }

}


/* =========================================================
   PAPERLY — ABOUT STORY
   SECTION 02 — WHY PAPERLY EXISTS
   ========================================================= */


/* =========================================================
   01. SECTION
   ========================================================= */

.ppr-about-story {
    position: relative;

    isolation: isolate;

    width: 100%;

    overflow: hidden;

    padding-block:
        clamp(5rem, 8vw, 7.5rem)
        clamp(4.5rem, 7vw, 6.5rem);

    background:
        var(--ppr-autumn-ivory);

    color:
        var(--ppr-ink-charcoal);
}


/* =========================================================
   02. CONTAINER
   ========================================================= */

.ppr-about-story__container {
    position: relative;

    z-index: 10;

    width:
        min(
            calc(100% - 48px),
            var(--ppr-content-width)
        );

    margin-inline: auto;
}


/* =========================================================
   03. BACKGROUND LAYER
   ========================================================= */

.ppr-about-story__background {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    overflow: hidden;
}


/* =========================================================
   04. LARGE BACKGROUND NUMBER
   ========================================================= */

.ppr-about-story__number {
    position: absolute;

    left: 50%;

    top: 50%;

    z-index: 1;

    color:
        color-mix(
            in srgb,
            var(--ppr-dusty-rose) 9%,
            transparent
        );

    font-size:
        clamp(
            18rem,
            34vw,
            34rem
        );

    font-weight: 800;

    line-height: 0.7;

    letter-spacing: -0.09em;

    transform:
        translate(-50%, -50%);

    user-select: none;

    animation:
        pprStoryNumberFloat
        10s
        ease-in-out
        infinite;
}


/* =========================================================
   05. BACKGROUND LINES
   ========================================================= */

.ppr-about-story__bg-line {
    position: absolute;

    display: block;

    height: 1px;

    background:
        color-mix(
            in srgb,
            var(--ppr-warm-taupe) 28%,
            transparent
        );

    transform-origin: left center;

    animation:
        pprStoryLineMove
        8s
        ease-in-out
        infinite;
}


.ppr-about-story__bg-line--one {
    width: 210px;

    left: 3%;

    top: 22%;

    transform: rotate(-8deg);
}


.ppr-about-story__bg-line--two {
    width: 170px;

    right: 5%;

    bottom: 23%;

    transform: rotate(7deg);

    animation-delay: 800ms;
}


/* =========================================================
   06. BACKGROUND DOTS
   ========================================================= */

.ppr-about-story__bg-dot {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--ppr-sage-leaf);

    opacity: 0.55;

    animation:
        pprStoryDotPulse
        4.5s
        ease-in-out
        infinite;
}


.ppr-about-story__bg-dot--one {
    left: 17%;

    top: 36%;
}


.ppr-about-story__bg-dot--two {
    right: 19%;

    top: 18%;

    width: 5px;
    height: 5px;

    background:
        var(--ppr-dusty-rose);

    animation-delay: 700ms;
}


/* =========================================================
   07. BACKGROUND CIRCLE
   ========================================================= */

.ppr-about-story__bg-circle {
    position: absolute;

    right: -100px;

    top: -100px;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--ppr-champagne-gold) 18%,
            transparent
        );

    animation:
        pprStoryCircleFloat
        11s
        ease-in-out
        infinite;
}


/* =========================================================
   08. DECORATION LAYER
   ========================================================= */

.ppr-about-story__decorations {
    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;
}


/* =========================================================
   09. PAPER
   ========================================================= */

.ppr-about-story__paper {
    position: absolute;

    left: 5%;

    top: 55%;

    width: 70px;
    height: 88px;

    border-radius: 9px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--ppr-champagne-gold) 45%,
            transparent
        );

    background:
        color-mix(
            in srgb,
            var(--ppr-warm-porcelain) 60%,
            transparent
        );

    transform:
        rotate(-12deg);

    opacity: 0.7;

    box-shadow:
        0 12px 25px
        rgba(46, 41, 42, 0.07);

    animation:
        pprStoryPaperFloat
        7s
        ease-in-out
        infinite;
}


.ppr-about-story__paper::before {
    content: "";

    position: absolute;

    left: 12px;
    right: 12px;

    top: 23px;

    height: 1px;

    background:
        color-mix(
            in srgb,
            var(--ppr-warm-taupe) 45%,
            transparent
        );

    box-shadow:
        0 11px 0
        color-mix(
            in srgb,
            var(--ppr-warm-taupe) 32%,
            transparent
        ),
        0 22px 0
        color-mix(
            in srgb,
            var(--ppr-warm-taupe) 22%,
            transparent
        );
}


/* =========================================================
   10. PAPERCLIP
   ========================================================= */

.ppr-about-story__paperclip {
    position: absolute;

    right: 8%;

    top: 32%;

    width: 25px;
    height: 58px;

    border:
        3px solid
        var(--ppr-dusty-rose);

    border-radius: 16px;

    opacity: 0.7;

    transform:
        rotate(22deg);

    animation:
        pprStoryClipFloat
        6s
        ease-in-out
        infinite;
}


.ppr-about-story__paperclip::after {
    content: "";

    position: absolute;

    left: 5px;
    top: 7px;

    width: 12px;
    height: 43px;

    border:
        2px solid
        var(--ppr-dusty-rose);

    border-bottom: 0;

    border-radius:
        12px
        12px
        0
        0;
}


/* =========================================================
   11. PUSH PIN
   ========================================================= */

.ppr-about-story__pin {
    position: absolute;

    left: 46%;

    top: 17%;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background:
        var(--ppr-dusty-rose);

    box-shadow:
        0 7px 15px
        rgba(46, 41, 42, 0.13);

    animation:
        pprStoryPinFloat
        4.5s
        ease-in-out
        infinite;
}


.ppr-about-story__pin::before {
    content: "";

    position: absolute;

    left: 6px;
    top: 5px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.35);
}


.ppr-about-story__pin::after {
    content: "";

    position: absolute;

    left: 8px;
    top: 17px;

    width: 3px;
    height: 23px;

    border-radius: 999px;

    background:
        var(--ppr-dusty-rose-dark);

    transform:
        rotate(-8deg);
}


/* =========================================================
   12. PENCIL
   ========================================================= */

.ppr-about-story__pencil {
    position: absolute;

    right: 17%;

    bottom: 9%;

    width: 100px;
    height: 10px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--ppr-dusty-rose) 0 67%,
            var(--ppr-champagne-gold) 67% 83%,
            var(--ppr-warm-taupe) 83%
        );

    opacity: 0.68;

    transform:
        rotate(-17deg);

    box-shadow:
        0 5px 12px
        rgba(46, 41, 42, 0.09);

    animation:
        pprStoryPencilFloat
        7s
        ease-in-out
        infinite;
}


.ppr-about-story__pencil::before {
    content: "";

    position: absolute;

    left: -14px;

    top: 0;

    border-top:
        5px solid transparent;

    border-bottom:
        5px solid transparent;

    border-right:
        15px solid
        var(--ppr-ink-charcoal);

    opacity: 0.5;
}


/* =========================================================
   13. SMALL NOTE
   ========================================================= */

.ppr-about-story__note {
    position: absolute;

    right: 4%;

    bottom: 37%;

    width: 58px;
    height: 58px;

    border-radius: 8px;

    background:
        color-mix(
            in srgb,
            var(--ppr-champagne-gold) 70%,
            var(--ppr-warm-porcelain)
        );

    opacity: 0.58;

    transform:
        rotate(9deg);

    box-shadow:
        0 10px 20px
        rgba(46, 41, 42, 0.08);

    animation:
        pprStoryNoteFloat
        6.5s
        ease-in-out
        infinite;
}


.ppr-about-story__note::before {
    content: "";

    position: absolute;

    left: 10px;
    right: 10px;

    top: 17px;

    height: 1px;

    background:
        color-mix(
            in srgb,
            var(--ppr-ink-charcoal) 18%,
            transparent
        );

    box-shadow:
        0 10px 0
        color-mix(
            in srgb,
            var(--ppr-ink-charcoal) 12%,
            transparent
        );
}


/* =========================================================
   14. SMALL DECORATIVE DOTS
   ========================================================= */

.ppr-about-story__dot {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--ppr-sage-leaf);

    opacity: 0.6;

    animation:
        pprStorySmallDot
        4s
        ease-in-out
        infinite;
}


.ppr-about-story__dot--one {
    left: 32%;

    bottom: 14%;
}


.ppr-about-story__dot--two {
    right: 29%;

    top: 27%;

    width: 6px;
    height: 6px;

    background:
        var(--ppr-dusty-rose);

    animation-delay: 900ms;
}


/* =========================================================
   15. HEADER
   ========================================================= */

.ppr-about-story__head {
    width: 100%;
    max-width: 900px;
    margin-bottom:
        clamp(
            2.5rem,
            6vw,
            4.5rem
        );  
    margin-inline: auto;

    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
}


/* =========================================================
   16. HEADING META
   ========================================================= */

.ppr-about-story__heading-meta {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    width: 100%;

    margin-bottom: 1.35rem;
}


.ppr-about-story__section-number {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    color: var(--ppr-champagne-gold);

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.12em;

    line-height: 1;
}


.ppr-about-story__heading-line {
    width: 38px;
    height: 1px;

    flex: 0 0 38px;

    background: var(--ppr-champagne-gold);

    transform-origin: center;
}


.ppr-about-story__eyebrow {
    margin: 0;

    color: var(--ppr-dusty-rose);

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


/* =========================================================
   17. TITLE
   ========================================================= */

.ppr-about-story__title {
    width: 100%;
    max-width: 820px;

    margin-inline: auto;

    text-align: center;

    font-size:
        clamp(
            2.8rem,
            5vw,
            5rem
        );

    line-height: 1.04;

    letter-spacing: -0.04em;

    margin-block: 0;
}


.ppr-about-story__title span {
    display: block;

    color: var(--ppr-dusty-rose);
}


/* =========================================================
   18. MAIN STORY
   ========================================================= */

.ppr-about-story__main {
    position: relative;

    z-index: 10;

    display: grid;

    grid-template-columns:
        minmax(350px, 0.82fr)
        minmax(0, 1fr);

    align-items: center;

    gap:
        clamp(
            3.5rem,
            7vw,
            8rem
        );
}


/* =========================================================
   19. VISUAL
   ========================================================= */

.ppr-about-story__visual {
    position: relative;

    margin: 0;

    width: 100%;

    display: flex;

    justify-content: center;

    opacity: 0;

    animation:
        pprStoryVisualIn
        1100ms
        cubic-bezier(.16,1,.3,1)
        300ms
        forwards;
}


/* =========================================================
   20. IMAGE CARD
   ========================================================= */

.ppr-about-story__image-card {
    position: relative;

    width:
        min(
            100%,
            430px
        );

    padding: 10px;

    border-radius: 26px;

    background:
        var(--ppr-warm-porcelain);

    box-shadow:
        0 25px 55px
        rgba(46, 41, 42, 0.12);

    transform:
        rotate(-2deg);

    animation:
        pprStoryImageFloat
        8s
        ease-in-out
        1.2s
        infinite;
}


/* =========================================================
   21. IMAGE
   ========================================================= */

.ppr-about-story__image-wrap {
    position: relative;

    width: 100%;

    aspect-ratio: 0.88;

    overflow: hidden;

    border-radius: 18px;

    background:
        var(--ppr-warm-taupe);
}


.ppr-about-story__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.05);

    transition:
        transform
        700ms
        ease;
}


.ppr-about-story__image-card:hover
.ppr-about-story__image {
    transform:
        scale(1.09);
}


/* =========================================================
   22. IMAGE LABEL
   ========================================================= */

.ppr-about-story__label {
    position: absolute;

    left: 25px;

    bottom: 24px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    max-width: calc(100% - 50px);

    padding:
        9px
        13px;

    border-radius: 999px;

    background:
        var(--ppr-warm-porcelain);

    color:
        var(--ppr-ink-charcoal);

    box-shadow:
        0 10px 25px
        rgba(46, 41, 42, 0.13);

    font-size: 0.62rem;

    font-weight: 700;

    line-height: 1.3;
}


.ppr-about-story__label-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background:
        var(--ppr-sage-leaf);

    animation:
        pprStoryLabelPulse
        2.5s
        ease-in-out
        infinite;
}


/* =========================================================
   23. STORY BODY
   ========================================================= */

.ppr-about-story__body {
    max-width: 650px;

    opacity: 0;

    animation:
        pprStoryBodyIn
        950ms
        cubic-bezier(.16,1,.3,1)
        500ms
        forwards;
}


/* =========================================================
   24. LEAD
   ========================================================= */

.ppr-about-story__lead {
    max-width: 570px;

    margin: 0;

    color:
        var(--ppr-ink-charcoal);

    font-size:
        clamp(
            1.45rem,
            2.4vw,
            2.15rem
        );

    font-weight: 650;

    line-height: 1.35;

    letter-spacing: -0.025em;
}


/* =========================================================
   25. BODY TEXT
   ========================================================= */

.ppr-about-story__text {
    max-width: 600px;

    margin:
        1.25rem
        0
        0;

    color:
        color-mix(
            in srgb,
            var(--ppr-ink-charcoal) 68%,
            transparent
        );

    font-size: 0.91rem;

    font-weight: 500;

    line-height: 1.8;
}


/* =========================================================
   26. STORY POINTS
   ========================================================= */

.ppr-about-story__points {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin-top: 2rem;
}


.ppr-about-story__point {
    display: grid;

    grid-template-columns: auto 1fr;

    gap: 12px;

    padding:
        17px
        17px;

    border-radius: 15px;

    background:
        color-mix(
            in srgb,
            var(--ppr-warm-porcelain) 72%,
            transparent
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--ppr-warm-taupe) 20%,
            transparent
        );

    transition:
        transform
        280ms ease,
        box-shadow
        280ms ease,
        background
        280ms ease;
}


.ppr-about-story__point:hover {
    transform:
        translateY(-5px);

    background:
        var(--ppr-warm-porcelain);

    box-shadow:
        0 12px 25px
        rgba(46, 41, 42, 0.07);
}


.ppr-about-story__point-number {
    color:
        var(--ppr-champagne-gold);

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 0.06em;
}


.ppr-about-story__point h3 {
    margin: 0;

    color:
        var(--ppr-ink-charcoal);

    font-size: 0.8rem;

    font-weight: 800;
}


.ppr-about-story__point p {
    margin:
        5px
        0
        0;

    color:
        var(--ppr-warm-taupe);

    font-size: 0.7rem;

    line-height: 1.5;
}


/* =========================================================
   27. BOTTOM STRIP
   ========================================================= */

.ppr-about-story__bottom {
    position: relative;

    z-index: 10;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 2rem;

    margin-top:
        clamp(
            3.5rem,
            6vw,
            5.5rem
        );

    padding-top: 1.4rem;

    border-top:
        1px solid
        color-mix(
            in srgb,
            var(--ppr-warm-taupe) 28%,
            transparent
        );

    opacity: 0;

    animation:
        pprStoryBottomIn
        900ms
        cubic-bezier(.16,1,.3,1)
        800ms
        forwards;
}


.ppr-about-story__bottom-mark {
    color:
        var(--ppr-dusty-rose);

    font-size: 0.7rem;

    font-weight: 800;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


.ppr-about-story__bottom p {
    max-width: 650px;

    margin: 0;

    color:
        var(--ppr-warm-taupe);

    font-size: 0.7rem;

    font-weight: 600;

    line-height: 1.6;
}


.ppr-about-story__bottom-arrow {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--ppr-warm-taupe) 35%,
            transparent
        );

    color:
        var(--ppr-dusty-rose);

    font-size: 0.65rem;

    animation:
        pprStoryArrow
        2.5s
        ease-in-out
        infinite;
}


/* =========================================================
   28. ANIMATIONS — NUMBER
   ========================================================= */

@keyframes pprStoryNumberFloat {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(1);

        opacity: 1;
    }

    50% {
        transform:
            translate(-50%, -52%)
            scale(1.025);
    }

}


/* =========================================================
   29. BACKGROUND LINES
   ========================================================= */

@keyframes pprStoryLineMove {

    0%,
    100% {
        opacity: 0.35;
    }

    50% {
        opacity: 0.75;

        transform:
            translateX(12px)
            rotate(-8deg);
    }

}


/* =========================================================
   30. BACKGROUND DOTS
   ========================================================= */

@keyframes pprStoryDotPulse {

    0%,
    100% {
        transform:
            scale(1)
            translateY(0);

        opacity: 0.35;
    }

    50% {
        transform:
            scale(1.4)
            translateY(-8px);

        opacity: 0.75;
    }

}


/* =========================================================
   31. BACKGROUND CIRCLE
   ========================================================= */

@keyframes pprStoryCircleFloat {

    0%,
    100% {
        transform:
            translate(0, 0)
            rotate(0deg);
    }

    50% {
        transform:
            translate(-15px, 15px)
            rotate(8deg);
    }

}


/* =========================================================
   32. PAPER ANIMATION
   ========================================================= */

@keyframes pprStoryPaperFloat {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(-12deg);
    }

    35% {
        transform:
            translate3d(10px, -13px, 0)
            rotate(-7deg);
    }

    70% {
        transform:
            translate3d(-5px, -7px, 0)
            rotate(-16deg);
    }

}


/* =========================================================
   33. PAPERCLIP ANIMATION
   ========================================================= */

@keyframes pprStoryClipFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(22deg);
    }

    50% {
        transform:
            translateY(-14px)
            rotate(29deg);
    }

}


/* =========================================================
   34. PIN ANIMATION
   ========================================================= */

@keyframes pprStoryPinFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0);
    }

    50% {
        transform:
            translateY(-10px)
            rotate(9deg);
    }

}


/* =========================================================
   35. PENCIL ANIMATION
   ========================================================= */

@keyframes pprStoryPencilFloat {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(-17deg);
    }

    50% {
        transform:
            translate3d(-12px, -10px, 0)
            rotate(-11deg);
    }

}


/* =========================================================
   36. NOTE ANIMATION
   ========================================================= */

@keyframes pprStoryNoteFloat {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(9deg);
    }

    50% {
        transform:
            translate3d(-9px, -12px, 0)
            rotate(15deg);
    }

}


/* =========================================================
   37. SMALL DOT ANIMATION
   ========================================================= */

@keyframes pprStorySmallDot {

    0%,
    100% {
        transform:
            translateY(0)
            scale(1);
    }

    50% {
        transform:
            translateY(-9px)
            scale(1.3);
    }

}


/* =========================================================
   38. LABEL PULSE
   ========================================================= */

@keyframes pprStoryLabelPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.35);
    }

}


/* =========================================================
   39. HEADER ENTRANCE
   ========================================================= */

@keyframes pprStoryHeaderIn {

    from {
        opacity: 0;

        transform:
            translateY(35px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   40. VISUAL ENTRANCE
   ========================================================= */

@keyframes pprStoryVisualIn {

    from {
        opacity: 0;

        transform:
            translateY(45px)
            scale(0.96);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* =========================================================
   41. IMAGE FLOAT
   ========================================================= */

@keyframes pprStoryImageFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-2deg);
    }

    50% {
        transform:
            translateY(-10px)
            rotate(-1deg);
    }

}


/* =========================================================
   42. BODY ENTRANCE
   ========================================================= */

@keyframes pprStoryBodyIn {

    from {
        opacity: 0;

        transform:
            translateY(35px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   43. BOTTOM ENTRANCE
   ========================================================= */

@keyframes pprStoryBottomIn {

    from {
        opacity: 0;

        transform:
            translateY(20px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   44. ARROW
   ========================================================= */

@keyframes pprStoryArrow {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(5px);
    }

}


/* =========================================================
   45. TABLET
   768px — 1024px
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    .ppr-about-story {
        padding-block:
            4.5rem
            5rem;
    }


    .ppr-about-story__container {
        width:
            calc(100% - 48px);
    }


    .ppr-about-story__head {
        max-width: 760px;
    }


    .ppr-about-story__title {
        font-size:
            clamp(
                2.7rem,
                6vw,
                4.2rem
            );
    }


    .ppr-about-story__main {
        grid-template-columns:
            minmax(280px, 0.8fr)
            minmax(0, 1fr);

        gap: 3rem;
    }


    .ppr-about-story__image-card {
        width:
            min(
                100%,
                350px
            );
    }


    .ppr-about-story__lead {
        font-size: 1.45rem;
    }


    .ppr-about-story__text {
        font-size: 0.84rem;
    }


    .ppr-about-story__points {
        grid-template-columns: 1fr;
    }


    .ppr-about-story__number {
        font-size: 22rem;
    }


    .ppr-about-story__paper {
        left: 1%;
    }


    .ppr-about-story__paperclip {
        right: 2%;
    }


    .ppr-about-story__note {
        right: 1%;
    }


    .ppr-about-story__pencil {
        right: 10%;
    }

}


/* =========================================================
   46. LARGE DEVICES
   1025px — 1280px
   ========================================================= */

@media (min-width: 1025px) and (max-width: 1280px) {

    .ppr-about-story__container {
        width:
            min(
                calc(100% - 56px),
                1160px
            );
    }


    .ppr-about-story__head {
        margin-inline-end: 4%;
    }


    .ppr-about-story__main {
        gap: 5rem;
    }


    .ppr-about-story__image-card {
        width:
            min(
                100%,
                400px
            );
    }


    .ppr-about-story__number {
        font-size: 28rem;
    }

}


/* =========================================================
   47. MOBILE
   320px — 767px
   ========================================================= */

@media (max-width: 767px) {

    .ppr-about-story {
        padding-block:
            4rem
            4.5rem;
    }


    .ppr-about-story__container {
        width:
            calc(100% - 32px);
    }


    /* ---------------------------------------------
       BACKGROUND NUMBER
       --------------------------------------------- */

    .ppr-about-story__number {
        left: 50%;

        top: 39%;

        font-size:
            clamp(
                13rem,
                54vw,
                20rem
            );
    }


    .ppr-about-story__bg-circle {
        width: 220px;
        height: 220px;

        right: -90px;

        top: 17%;
    }


    .ppr-about-story__bg-line--one {
        left: -20px;

        top: 29%;

        width: 110px;
    }


    .ppr-about-story__bg-line--two {
        right: -15px;

        bottom: 21%;

        width: 100px;
    }


    /* ---------------------------------------------
       HEADER
       --------------------------------------------- */

        .ppr-about-story__head {
        max-width: 100%;

        padding-inline: 4px;
    }


    .ppr-about-story__heading-meta {
        gap: 9px;

        margin-bottom: 1.1rem;
    }


    .ppr-about-story__heading-line {
        width: 25px;

        flex-basis: 25px;
    }


    .ppr-about-story__section-number {
        font-size: 0.61rem;
    }


    .ppr-about-story__eyebrow {
        font-size: 0.63rem;

        letter-spacing: 0.1em;
    }


    .ppr-about-story__title {
        max-width: 100%;

        font-size:
            clamp(
                2.25rem,
                10.5vw,
                3.4rem
            );

        line-height: 1.08;

        letter-spacing: -0.035em;
    }

    /* ---------------------------------------------
       MAIN
       --------------------------------------------- */

    .ppr-about-story__main {
        display: flex;

        flex-direction: column;

        gap: 2.7rem;

        align-items: stretch;
    }


    /* ---------------------------------------------
       IMAGE
       --------------------------------------------- */

    .ppr-about-story__visual {
        width: 100%;
    }


    .ppr-about-story__image-card {
        width:
            min(
                100%,
                420px
            );

        margin-inline: auto;

        padding: 8px;

        border-radius: 21px;
    }


    .ppr-about-story__image-wrap {
        border-radius: 15px;
    }


    .ppr-about-story__label {
        left: 17px;

        bottom: 17px;

        max-width:
            calc(100% - 34px);

        padding:
            8px
            11px;

        font-size: 0.57rem;
    }


    /* ---------------------------------------------
       BODY
       --------------------------------------------- */

    .ppr-about-story__body {
        max-width: none;
    }


    .ppr-about-story__lead {
        font-size:
            clamp(
                1.35rem,
                6vw,
                1.75rem
            );
    }


    .ppr-about-story__text {
        font-size: 0.84rem;

        line-height: 1.75;
    }


    /* ---------------------------------------------
       POINTS
       --------------------------------------------- */

    .ppr-about-story__points {
        grid-template-columns: 1fr;

        gap: 12px;

        margin-top: 1.6rem;
    }


    .ppr-about-story__point {
        padding: 14px;
    }


    /* ---------------------------------------------
       BOTTOM
       --------------------------------------------- */

    .ppr-about-story__bottom {
        grid-template-columns:
            auto
            1fr;

        gap: 12px;

        margin-top: 3rem;
    }


    .ppr-about-story__bottom p {
        grid-column: 1 / -1;

        grid-row: 2;

        max-width: none;

        font-size: 0.65rem;
    }


    .ppr-about-story__bottom-arrow {
        justify-self: end;
    }


    /* ---------------------------------------------
       DECORATIONS
       --------------------------------------------- */

    .ppr-about-story__paper {
        left: -18px;

        top: 48%;

        width: 52px;
        height: 68px;
    }


    .ppr-about-story__paperclip {
        right: -5px;

        top: 39%;

        transform:
            scale(0.7)
            rotate(22deg);
    }


    .ppr-about-story__pin {
        left: auto;

        right: 12%;

        top: 16%;

        transform:
            scale(0.75);
    }


    .ppr-about-story__pencil {
        right: 4%;

        bottom: 8%;

        width: 70px;
    }


    .ppr-about-story__note {
        right: -8px;

        bottom: 32%;

        width: 45px;
        height: 45px;
    }


    .ppr-about-story__dot--one {
        left: 5%;

        bottom: 17%;
    }


    .ppr-about-story__dot--two {
        right: 6%;

        top: 30%;
    }

}


/* =========================================================
   48. SMALL MOBILE
   320px — 430px
   ========================================================= */

@media (max-width: 430px) {

    .ppr-about-story__container {
        width:
            calc(100% - 28px);
    }


    .ppr-about-story {
        padding-block:
            3.5rem
            4rem;
    }


       .ppr-about-story__heading-meta {
        gap: 7px;
    }


    .ppr-about-story__heading-line {
        width: 20px;

        flex-basis: 20px;
    }


    .ppr-about-story__section-number {
        font-size: 0.57rem;
    }


    .ppr-about-story__eyebrow {
        font-size: 0.58rem;
    }


    .ppr-about-story__title {
        font-size:
            clamp(
                2.05rem,
                10.8vw,
                3rem
            );
    }


    .ppr-about-story__image-card {
        width:
            calc(100% - 6px);

        padding: 7px;

        border-radius: 19px;
    }


    .ppr-about-story__image-wrap {
        border-radius: 14px;
    }


    .ppr-about-story__paper {
        left: -19px;
    }


    .ppr-about-story__paperclip {
        right: -8px;
    }


    .ppr-about-story__number {
        top: 38%;

        font-size: 14rem;
    }

}


/* =========================================================
   49. VERY SMALL
   320px — 359px
   ========================================================= */

@media (max-width: 359px) {

    .ppr-about-story__container {
        width:
            calc(100% - 24px);
    }


    .ppr-about-story__title {
        font-size: 2.15rem;
    }


    .ppr-about-story__lead {
        font-size: 1.2rem;
    }


    .ppr-about-story__point h3 {
        font-size: 0.74rem;
    }


    .ppr-about-story__point p {
        font-size: 0.64rem;
    }

}


/* =========================================================
   50. DARK MODE
   ========================================================= */

html.ppr-dark-mode .ppr-about-story__image-card {
    box-shadow:
        0 25px 55px
        rgba(0, 0, 0, 0.25);
}


html.ppr-dark-mode .ppr-about-story__label {
    background:
        var(--ppr-warm-porcelain);

    color:
        var(--ppr-ink-charcoal);
}


html.ppr-dark-mode .ppr-about-story__point {
    background:
        color-mix(
            in srgb,
            var(--ppr-warm-porcelain) 60%,
            transparent
        );
}


html.ppr-dark-mode .ppr-about-story__point:hover {
    background:
        var(--ppr-warm-porcelain);
}


html.ppr-dark-mode .ppr-about-story__paper,
html.ppr-dark-mode .ppr-about-story__note {
    box-shadow:
        0 12px 25px
        rgba(0, 0, 0, 0.18);
}


/* =========================================================
   51. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ppr-about-story *,
    .ppr-about-story *::before,
    .ppr-about-story *::after {
        animation-duration: 1ms !important;

        animation-delay: 0ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 1ms !important;
    }

}

/* =========================================================
   SECTION 02 — SCROLL REVEAL MOTION
   No parallax movement. Content reveals cleanly as the
   section enters the viewport, with a subtle stationery feel.
   ========================================================= */

.ppr-about-story__head,
.ppr-about-story__visual,
.ppr-about-story__body,
.ppr-about-story__bottom {
    opacity: 0;
    will-change: opacity, transform;
}

.ppr-about-story__head {
    transform: translate3d(0, 46px, 0);
}

.ppr-about-story__visual {
    transform: translate3d(-55px, 22px, 0) rotate(-1.2deg) scale(.97);
}

.ppr-about-story__body {
    transform: translate3d(55px, 28px, 0);
}

.ppr-about-story__bottom {
    transform: translate3d(0, 30px, 0);
}

/* Decorative stationery elements enter softly; they no longer
   move continuously with the page scroll. */
.ppr-about-story__background,
.ppr-about-story__decorations {
    opacity: 0;
    transform: scale(.985);
    transition: opacity 900ms ease, transform 1100ms cubic-bezier(.16,1,.3,1);
}

.ppr-about-story.is-visible .ppr-about-story__background,
.ppr-about-story.is-visible .ppr-about-story__decorations {
    opacity: 1;
    transform: none;
}

.ppr-about-story.is-visible .ppr-about-story__head {
    animation: pprStoryScrollHeaderIn 900ms cubic-bezier(.16,1,.3,1) 60ms both;
}

.ppr-about-story.is-visible .ppr-about-story__visual {
    animation: pprStoryScrollVisualIn 1000ms cubic-bezier(.16,1,.3,1) 180ms both;
}

.ppr-about-story.is-visible .ppr-about-story__body {
    animation: pprStoryScrollBodyIn 900ms cubic-bezier(.16,1,.3,1) 330ms both;
}

.ppr-about-story.is-visible .ppr-about-story__bottom {
    animation: pprStoryScrollBottomIn 800ms cubic-bezier(.16,1,.3,1) 520ms both;
}

.ppr-about-story__point {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(.98);
    will-change: opacity, transform;
}

.ppr-about-story.is-visible .ppr-about-story__point {
    animation: pprStoryPointIn 700ms cubic-bezier(.16,1,.3,1) both;
}

.ppr-about-story.is-visible .ppr-about-story__point:nth-child(1) { animation-delay: 560ms; }
.ppr-about-story.is-visible .ppr-about-story__point:nth-child(2) { animation-delay: 680ms; }
.ppr-about-story.is-visible .ppr-about-story__point:nth-child(3) { animation-delay: 800ms; }
.ppr-about-story.is-visible .ppr-about-story__point:nth-child(4) { animation-delay: 920ms; }

@keyframes pprStoryScrollHeaderIn {
    0% { opacity: 0; transform: translate3d(0, 46px, 0); }
    70% { opacity: 1; transform: translate3d(0, -3px, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes pprStoryScrollVisualIn {
    0% { opacity: 0; transform: translate3d(-55px, 22px, 0) rotate(-1.2deg) scale(.97); }
    70% { opacity: 1; transform: translate3d(3px, -2px, 0) rotate(.15deg) scale(1.005); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes pprStoryScrollBodyIn {
    0% { opacity: 0; transform: translate3d(55px, 28px, 0); }
    70% { opacity: 1; transform: translate3d(-3px, -2px, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes pprStoryPointIn {
    0% { opacity: 0; transform: translate3d(0, 24px, 0) scale(.98); }
    70% { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.005); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes pprStoryScrollBottomIn {
    0% { opacity: 0; transform: translate3d(0, 30px, 0); }
    70% { opacity: 1; transform: translate3d(0, -2px, 0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 767px) {
    .ppr-about-story__head { transform: translate3d(0, 32px, 0); }
    .ppr-about-story__visual { transform: translate3d(0, 38px, 0) scale(.97); }
    .ppr-about-story__body { transform: translate3d(0, 30px, 0); }
    .ppr-about-story__bottom { transform: translate3d(0, 24px, 0); }

    .ppr-about-story.is-visible .ppr-about-story__head { animation-delay: 40ms; }
    .ppr-about-story.is-visible .ppr-about-story__visual { animation-delay: 150ms; }
    .ppr-about-story.is-visible .ppr-about-story__body { animation-delay: 280ms; }
    .ppr-about-story.is-visible .ppr-about-story__bottom { animation-delay: 440ms; }
}

@media (prefers-reduced-motion: reduce) {
    .ppr-about-story__head,
    .ppr-about-story__visual,
    .ppr-about-story__body,
    .ppr-about-story__point,
    .ppr-about-story__bottom,
    .ppr-about-story__background,
    .ppr-about-story__decorations {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   PAPERLY — ABOUT
   SECTION 03 — WHAT WE BELIEVE
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.ppr-about-values {

    --values-scroll: 0px;

    position: relative;

    isolation: isolate;

    width: 100%;

    overflow: hidden;

    padding:
        clamp(5rem, 8vw, 7rem)
        0
        clamp(4.5rem, 7vw, 6rem);

    background:
        var(--ppr-autumn-ivory);

    color:
        var(--ppr-ink-charcoal);
}


/* =========================================================
   CONTAINER
   ========================================================= */

.ppr-about-values__container {

    position: relative;

    z-index: 10;

    width:
        min(
            calc(100% - 48px),
            var(--ppr-content-width)
        );

    margin-inline: auto;
}


/* =========================================================
   PARALLAX BACKGROUND
   ========================================================= */

.ppr-about-values__background {

    position: absolute;

    inset: 0;

    z-index: 1;

    overflow: hidden;

    pointer-events: none;
}


/* =========================================================
   LARGE STRAIGHT 02
   ========================================================= */

.ppr-about-values__background-number {

    position: absolute;

    top: 9%;
    right: 4%;

    font-family:
        var(--ppr-font-family);

    font-size:
        clamp(
            15rem,
            28vw,
            31rem
        );

    font-weight: 800;

    line-height: .7;

    letter-spacing: -.12em;

    color:
        color-mix(
            in srgb,
            var(--ppr-dusty-rose) 10%,
            transparent
        );

    user-select: none;

    transform:
        translate3d(
            0,
            calc(var(--values-scroll) * -.10),
            0
        );

    will-change: transform;
}


/* =========================================================
   BACKGROUND PAPER ONE
   ========================================================= */

.ppr-about-values__paper {

    position: absolute;

    display: block;

    background:
        var(--ppr-warm-porcelain);

    border:
        1px solid
        color-mix(
            in srgb,
            var(--ppr-warm-taupe) 35%,
            transparent
        );

    box-shadow:
        0 20px 45px
        rgba(46, 41, 42, .06);

    opacity: .78;

    will-change: transform;
}


.ppr-about-values__paper--one {

    width: 145px;
    height: 185px;

    left: -35px;
    top: 12%;

    border-radius:
        9px 20px 14px 24px;

    transform:
        translate3d(
            0,
            calc(var(--values-scroll) * -.42),
            0
        )
        rotate(-9deg);
}


/* =========================================================
   BACKGROUND PAPER TWO
   ========================================================= */

.ppr-about-values__paper--two {

    width: 125px;
    height: 160px;

    right: -30px;
    bottom: 12%;

    border-radius:
        20px 9px 24px 14px;

    transform:
        translate3d(
            0,
            calc(var(--values-scroll) * .55),
            0
        )
        rotate(10deg);
}


/* =========================================================
   PAPER CLIP
   ========================================================= */

.ppr-about-values__paperclip {

    position: absolute;

    top: 14%;
    left: 8%;

    width: 27px;
    height: 68px;

    border:
        3px solid
        var(--ppr-champagne-gold);

    border-radius: 18px;

    opacity: .75;

    transform:
        translate3d(
            0,
            calc(var(--values-scroll) * .75),
            0
        )
        rotate(-15deg);

    will-change: transform;
}


.ppr-about-values__paperclip::after {

    content: "";

    position: absolute;

    top: 5px;
    left: 7px;

    width: 13px;
    height: 54px;

    border:
        2px solid
        var(--ppr-champagne-gold);

    border-radius: 12px;
}


/* =========================================================
   PUSH PIN
   ========================================================= */

.ppr-about-values__pushpin {

    position: absolute;

    top: 30%;
    right: 8%;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background:
        var(--ppr-dusty-rose);

    box-shadow:
        0 3px 0
        var(--ppr-dusty-rose-dark);

    transform:
        translate3d(
            0,
            calc(var(--values-scroll) * -.65),
            0
        );

    will-change: transform;
}


.ppr-about-values__pushpin::after {

    content: "";

    position: absolute;

    top: 14px;
    left: 8px;

    width: 2px;
    height: 32px;

    background:
        var(--ppr-warm-taupe);

    transform: rotate(15deg);
}


/* =========================================================
   PENCIL
   ========================================================= */

.ppr-about-values__pencil {

    position: absolute;

    right: 3%;
    bottom: 28%;

    width: 130px;
    height: 9px;

    border-radius: 10px;

    background:
        var(--ppr-champagne-gold);

    opacity: .55;

    transform:
        translate3d(
            0,
            calc(var(--values-scroll) * .48),
            0
        )
        rotate(-24deg);

    will-change: transform;
}


.ppr-about-values__pencil::before {

    content: "";

    position: absolute;

    left: -15px;
    top: 0;

    width: 0;
    height: 0;

    border-top: 4.5px solid transparent;
    border-bottom: 4.5px solid transparent;

    border-right:
        15px solid
        var(--ppr-warm-taupe);
}


.ppr-about-values__pencil::after {

    content: "";

    position: absolute;

    right: 0;
    top: 0;

    width: 18px;
    height: 9px;

    border-radius:
        0 8px 8px 0;

    background:
        var(--ppr-dusty-rose);
}


/* =========================================================
   STICKY NOTE
   ========================================================= */

.ppr-about-values__sticky {

    position: absolute;

    left: 4%;
    bottom: 16%;

    width: 96px;
    height: 96px;

    background:
        color-mix(
            in srgb,
            var(--ppr-champagne-gold) 18%,
            var(--ppr-warm-porcelain)
        );

    border-radius:
        7px 14px 9px 17px;

    opacity: .72;

    transform:
        translate3d(
            0,
            calc(var(--values-scroll) * -.58),
            0
        )
        rotate(-7deg);

    box-shadow:
        0 15px 30px
        rgba(46, 41, 42, .05);

    will-change: transform;
}


.ppr-about-values__sticky span {

    position: absolute;

    left: 16px;

    width: 52px;
    height: 1px;

    background:
        var(--ppr-warm-taupe);

    opacity: .45;
}


.ppr-about-values__sticky span:first-child {
    top: 32px;
}


.ppr-about-values__sticky span:last-child {
    top: 45px;
}


/* =========================================================
   DOTS
   ========================================================= */

.ppr-about-values__dot {

    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    will-change: transform;
}


.ppr-about-values__dot--one {

    left: 19%;
    top: 25%;

    background:
        var(--ppr-sage-leaf);

    transform:
        translate3d(
            0,
            calc(var(--values-scroll) * .90),
            0
        );
}


.ppr-about-values__dot--two {

    right: 18%;
    bottom: 23%;

    background:
        var(--ppr-dusty-rose);

    transform:
        translate3d(
            0,
            calc(var(--values-scroll) * -.82),
            0
        );
}


.ppr-about-values__dot--three {

    left: 11%;
    bottom: 31%;

    background:
        var(--ppr-champagne-gold);

    transform:
        translate3d(
            0,
            calc(var(--values-scroll) * .58),
            0
        );
}


/* =========================================================
   CURVE
   ========================================================= */

.ppr-about-values__curve {

    position: absolute;

    left: -6%;
    bottom: 7%;

    width: 440px;
    height: 170px;

    border-top:
        1px solid
        color-mix(
            in srgb,
            var(--ppr-champagne-gold) 55%,
            transparent
        );

    border-radius: 50%;

    transform:
        translate3d(
            0,
            calc(var(--values-scroll) * .42),
            0
        )
        rotate(-7deg);

    will-change: transform;
}


/* =========================================================
   INTRO
   ========================================================= */

.ppr-about-values__intro {

    max-width: 820px;

    margin-inline: auto;

    margin-bottom:
        clamp(
            3rem,
            5vw,
            4.5rem
        );

    text-align: center;

    opacity: 0;

    transform:
        translateY(45px);
}


/* =========================================================
   EYEBROW
   ========================================================= */

.ppr-about-values__eyebrow-wrap {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    margin-bottom: 1.2rem;
}


.ppr-about-values__eyebrow-wrap span {

    width: 34px;
    height: 1px;

    background:
        var(--ppr-dusty-rose);
}


.ppr-about-values__eyebrow {

    margin: 0;

    color:
        var(--ppr-dusty-rose-dark);

    font-size: .74rem;

    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;
}


/* =========================================================
   TITLE
   ========================================================= */

.ppr-about-values__title {

    max-width: 780px;

    margin-inline: auto;

    color:
        var(--ppr-ink-charcoal);

    font-family:
        var(--ppr-font-family);

    font-size:
        clamp(
            2.3rem,
            5vw,
            4.7rem
        );

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -.055em;
}


.ppr-about-values__title span {

    display: block;

    color:
        var(--ppr-dusty-rose);
}


/* =========================================================
   LEAD
   ========================================================= */

.ppr-about-values__lead {

    max-width: 650px;

    margin:
        1.35rem auto 0;

    color:
        var(--ppr-ink-charcoal);

    font-size:
        clamp(
            .92rem,
            1.3vw,
            1.05rem
        );

    font-weight: 500;

    line-height: 1.8;

    opacity: .72;
}


/* =========================================================
   CARD GRID
   ========================================================= */

.ppr-about-values__list {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        clamp(
            1rem,
            1.7vw,
            1.45rem
        );

    padding: 0;

    margin: 0;

    list-style: none;
}


/* =========================================================
   CARD
   ========================================================= */

.ppr-about-values__item {

    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    min-height: 400px;

    background:
        var(--ppr-warm-porcelain);

    border:
        1px solid
        color-mix(
            in srgb,
            var(--ppr-warm-taupe) 30%,
            transparent
        );

    border-radius:
        26px 32px 28px 36px;

    box-shadow:
        0 18px 42px
        rgba(46, 41, 42, .07);

    opacity: 0;

    transform:
        translateY(60px)
        scale(.97);

    will-change:
        transform,
        opacity;

    transition:
        transform var(--ppr-transition-normal),
        box-shadow var(--ppr-transition-normal),
        border-color var(--ppr-transition-normal);
}


.ppr-about-values__item:nth-child(2) {
    border-radius:
        32px 26px 36px 28px;
}


.ppr-about-values__item:nth-child(3) {
    border-radius:
        28px 36px 25px 32px;
}


.ppr-about-values__item:nth-child(4) {
    border-radius:
        36px 28px 32px 25px;
}


/* =========================================================
   BIGGER IMAGE AREA
   ========================================================= */

.ppr-about-values__image-wrap {

    position: relative;

    width: calc(100% - 16px);

    height: 250px;

    margin:
        8px auto 0;

    overflow: hidden;

    border-radius:
        21px 27px 15px 18px;

    background:
        var(--ppr-autumn-ivory);
}


.ppr-about-values__image {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 700ms
        cubic-bezier(.16, 1, .3, 1);
}


/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

.ppr-about-values__image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(46, 41, 42, .02) 30%,
            rgba(46, 41, 42, .22) 100%
        );

    pointer-events: none;
}


/* =========================================================
   IMAGE NUMBER
   ========================================================= */

.ppr-about-values__image-wrap
.ppr-about-values__number {

    position: absolute;

    top: 16px;
    right: 18px;

    z-index: 2;

    color: #ffffff;

    font-size: .76rem;

    font-weight: 800;

    letter-spacing: .12em;

    text-shadow:
        0 2px 8px
        rgba(0, 0, 0, .25);
}


/* =========================================================
   CONTENT
   ========================================================= */

.ppr-about-values__content {

    position: relative;

    z-index: 3;

    padding:
        1.25rem
        1.4rem
        0;
}


/* =========================================================
   SYMBOL
   ========================================================= */

.ppr-about-values__symbol {

    width: 43px;
    height: 43px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    margin-bottom: .85rem;

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--ppr-dusty-rose) 14%,
            transparent
        );

    color:
        var(--ppr-dusty-rose-dark);

    font-size: .85rem;

    transition:
        transform var(--ppr-transition-normal),
        background var(--ppr-transition-normal);
}


.ppr-about-values__item:hover
.ppr-about-values__symbol {

    transform:
        rotate(-7deg)
        scale(1.07);

    background:
        color-mix(
            in srgb,
            var(--ppr-dusty-rose) 23%,
            transparent
        );
}


/* =========================================================
   NAME
   ========================================================= */

.ppr-about-values__name {

    margin:
        0 0 .6rem;

    color:
        var(--ppr-ink-charcoal);

    font-family:
        var(--ppr-font-family);

    font-size:
        clamp(
            1.1rem,
            1.5vw,
            1.3rem
        );

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -.025em;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.ppr-about-values__desc {

    max-width: 285px;

    margin: 0;

    color:
        var(--ppr-ink-charcoal);

    font-size: .87rem;

    font-weight: 500;

    line-height: 1.7;

    opacity: .72;
}


/* =========================================================
   LINK
   ========================================================= */

.ppr-about-values__link {

    display: inline-flex;

    align-items: center;

    gap: 2px;

    width: fit-content;

    margin-top: auto;

    padding:
        1.2rem
        1.4rem
        1.4rem;

    color:
        var(--ppr-dusty-rose-dark);

    font-size: .72rem;

    font-weight: 800;

    letter-spacing: .04em;

    text-decoration: none;

    transition:
        color var(--ppr-transition-fast),
        gap var(--ppr-transition-fast);
}


.ppr-about-values__link i {

    font-size: .7rem;

    transition:
        transform var(--ppr-transition-fast);
}


.ppr-about-values__link:hover {

    color:
        var(--ppr-dusty-rose);

    gap: 12px;
}


.ppr-about-values__link:hover i {

    transform:
        translateX(3px);
}


/* =========================================================
   CARD HOVER
   ========================================================= */

.ppr-about-values__item:hover {

    transform:
        translateY(-8px);

    border-color:
        color-mix(
            in srgb,
            var(--ppr-dusty-rose) 35%,
            transparent
        );

    box-shadow:
        0 26px 58px
        rgba(46, 41, 42, .11);
}


.ppr-about-values__item:hover
.ppr-about-values__image {

    transform:
        scale(1.055);
}


/* =========================================================
   CLOSING
   ========================================================= */

.ppr-about-values__closing {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 15px;

    margin-top: 4rem;

    opacity: 0;

    transform:
        translateY(25px);
}


.ppr-about-values__closing span {

    width: 38px;
    height: 1px;

    background:
        color-mix(
            in srgb,
            var(--ppr-dusty-rose) 55%,
            transparent
        );
}


.ppr-about-values__closing p {

    margin: 0;

    color:
        var(--ppr-dusty-rose-dark);

    font-size: .68rem;

    font-weight: 800;

    letter-spacing: .17em;

    text-transform: uppercase;
}


/* =========================================================
   SCROLL ENTRANCE
   ========================================================= */

.ppr-about-values.is-visible
.ppr-about-values__intro {

    animation:
        pprValuesIntroIn
        850ms
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


.ppr-about-values.is-visible
.ppr-about-values__item {

    animation:
        pprValuesCardIn
        800ms
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


.ppr-about-values.is-visible
.ppr-about-values__item:nth-child(1) {
    animation-delay: 120ms;
}


.ppr-about-values.is-visible
.ppr-about-values__item:nth-child(2) {
    animation-delay: 240ms;
}


.ppr-about-values.is-visible
.ppr-about-values__item:nth-child(3) {
    animation-delay: 360ms;
}


.ppr-about-values.is-visible
.ppr-about-values__item:nth-child(4) {
    animation-delay: 480ms;
}


.ppr-about-values.is-visible
.ppr-about-values__closing {

    animation:
        pprValuesClosingIn
        700ms
        cubic-bezier(.16, 1, .3, 1)
        650ms
        forwards;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes pprValuesIntroIn {

    from {
        opacity: 0;

        transform:
            translateY(45px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes pprValuesCardIn {

    from {
        opacity: 0;

        transform:
            translateY(60px)
            scale(.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes pprValuesClosingIn {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    .ppr-about-values__list {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 1.25rem;
    }


    .ppr-about-values__item {

        min-height: 520px;
    }


    .ppr-about-values__image-wrap {

        height: 275px;
    }


    .ppr-about-values__background-number {

        font-size: 18rem;

        right: -3%;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .ppr-about-values {

        padding-block:
            4rem
            4rem;
    }


    .ppr-about-values__container {

        width:
            min(
                calc(100% - 30px),
                600px
            );
    }


    .ppr-about-values__intro {

        margin-bottom: 2.8rem;
    }


    .ppr-about-values__title {

        font-size:
            clamp(
                2rem,
                9vw,
                3rem
            );
    }


    .ppr-about-values__lead {

        font-size: .9rem;
    }


    .ppr-about-values__list {

        grid-template-columns: 1fr;

        gap: 1.15rem;
    }


    .ppr-about-values__item,
    .ppr-about-values__item:nth-child(2),
    .ppr-about-values__item:nth-child(3),
    .ppr-about-values__item:nth-child(4) {

        min-height: 0;

        border-radius:
            24px 30px 26px 32px;
    }


    .ppr-about-values__image-wrap {

        width:
            calc(100% - 14px);

        height: 245px;

        margin-top: 7px;
    }


    .ppr-about-values__content {

        padding:
            1.25rem
            1.3rem
            0;
    }


    .ppr-about-values__desc {

        max-width: none;
    }


    .ppr-about-values__link {

        padding:
            1.2rem
            1.3rem
            1.35rem;
    }


    .ppr-about-values__background-number {

        top: 8%;
        right: -8%;

        font-size: 12rem;
    }


    .ppr-about-values__paper--one {

        left: -70px;
    }


    .ppr-about-values__paper--two {

        right: -65px;
    }


    .ppr-about-values__sticky {

        left: -18px;
    }


    .ppr-about-values__pencil {

        right: -35px;
    }


    .ppr-about-values__curve {

        left: -28%;

        width: 360px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .ppr-about-values__container {

        width:
            calc(100% - 24px);
    }


    .ppr-about-values__eyebrow-wrap {

        gap: 9px;
    }


    .ppr-about-values__eyebrow-wrap span {

        width: 22px;
    }


    .ppr-about-values__title {

        font-size: 2rem;
    }


    .ppr-about-values__lead {

        font-size: .86rem;
    }


    .ppr-about-values__image-wrap {

        height: 225px;
    }


    .ppr-about-values__symbol {

        width: 42px;
        height: 42px;
    }


    .ppr-about-values__name {

        font-size: 1.1rem;
    }


    .ppr-about-values__desc {

        font-size: .84rem;
    }


    .ppr-about-values__closing {

        margin-top: 2.8rem;
    }


    .ppr-about-values__closing span {

        width: 22px;
    }


    .ppr-about-values__closing p {

        font-size: .57rem;

        letter-spacing: .11em;
    }
}


/* =========================================================
   DARK MODE
   ========================================================= */

html.ppr-dark-mode
.ppr-about-values {

    background:
        var(--ppr-warm-porcelain);

    color:
        var(--ppr-ink-charcoal);
}


html.ppr-dark-mode
.ppr-about-values__background-number {

    color:
        color-mix(
            in srgb,
            var(--ppr-dusty-rose) 14%,
            transparent
        );
}


html.ppr-dark-mode
.ppr-about-values__paper {

    background:
        var(--ppr-autumn-ivory);

    border-color:
        rgba(244, 237, 230, .11);

    opacity: .45;
}


html.ppr-dark-mode
.ppr-about-values__item {

    background:
        var(--ppr-autumn-ivory);

    border-color:
        rgba(244, 237, 230, .12);

    box-shadow:
        0 20px 48px
        rgba(0, 0, 0, .22);
}


html.ppr-dark-mode
.ppr-about-values__item:hover {

    border-color:
        rgba(196, 129, 130, .35);

    box-shadow:
        0 27px 60px
        rgba(0, 0, 0, .30);
}


html.ppr-dark-mode
.ppr-about-values__lead,
html.ppr-dark-mode
.ppr-about-values__desc {

    opacity: .84;
}


html.ppr-dark-mode
.ppr-about-values__image-overlay {

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .02) 30%,
            rgba(0, 0, 0, .34) 100%
        );
}


/* =========================================================
   RTL
   ========================================================= */

html.ppr-rtl
.ppr-about-values__link:hover i {

    transform:
        translateX(-3px);
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ppr-about-values__background-number,
    .ppr-about-values__paper,
    .ppr-about-values__paperclip,
    .ppr-about-values__pushpin,
    .ppr-about-values__pencil,
    .ppr-about-values__sticky,
    .ppr-about-values__dot,
    .ppr-about-values__curve {

        transform: none !important;
    }


    .ppr-about-values__intro,
    .ppr-about-values__item,
    .ppr-about-values__closing {

        opacity: 1 !important;

        transform: none !important;

        animation: none !important;
    }


    .ppr-about-values__image {

        transition: none !important;
    }
}

/* =========================================================
   SECTION 04 — COLLECTION APPROACH
   ========================================================= */

.ppr-about-collection {

    --collection-scroll: 0px;

    position: relative;
    isolation: isolate;

    width: 100%;
    overflow: hidden;

    /*
       NEW BACKGROUND
       Different from Section 03.
    */
    background:
        var(--ppr-autumn-ivory);

    color:
        var(--ppr-ink-charcoal);

    padding-block:
        clamp(5.5rem, 9vw, 8rem)
        clamp(5.5rem, 9vw, 8rem);
}


/* =========================================================
   CONTAINER
   ========================================================= */

.ppr-about-collection__container {

    position: relative;
    z-index: 10;

    width:
        min(
            calc(100% - 48px),
            var(--ppr-content-width)
        );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(400px, .78fr);

    align-items: center;

    gap:
        clamp(4rem, 8vw, 8rem);
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.ppr-about-collection__background {

    position: absolute;
    inset: 0;

    z-index: 1;

    overflow: hidden;

    pointer-events: none;
}


/* =========================================================
   LARGE NUMBER
   ========================================================= */

.ppr-about-collection__background-number {

    position: absolute;

    left: -2%;
    bottom: 4%;

    font-family:
        var(--ppr-font-family);

    font-size:
        clamp(
            16rem,
            30vw,
            32rem
        );

    font-weight: 800;

    line-height: .7;

    letter-spacing: -.14em;

    color:
        color-mix(
            in srgb,
            var(--ppr-sage-leaf) 8%,
            transparent
        );

    user-select: none;

    transform:
        translate3d(
            0,
            calc(var(--collection-scroll) * -.12),
            0
        );

    will-change: transform;
}


/* =========================================================
   PAPER
   ========================================================= */

.ppr-about-collection__paper {

    position: absolute;

    display: block;

    background:
        var(--ppr-warm-porcelain);

    border:
        1px solid
        color-mix(
            in srgb,
            var(--ppr-warm-taupe) 32%,
            transparent
        );

    box-shadow:
        0 22px 48px
        rgba(46, 41, 42, .06);

    opacity: .78;

    will-change: transform;
}


.ppr-about-collection__paper--one {

    width: 145px;
    height: 185px;

    right: -40px;
    top: 11%;

    border-radius:
        10px 21px 13px 25px;

    transform:
        translate3d(
            0,
            calc(var(--collection-scroll) * .48),
            0
        )
        rotate(10deg);
}


.ppr-about-collection__paper--two {

    width: 120px;
    height: 155px;

    left: -25px;
    top: 58%;

    border-radius:
        20px 9px 25px 13px;

    transform:
        translate3d(
            0,
            calc(var(--collection-scroll) * -.55),
            0
        )
        rotate(-8deg);
}


/* =========================================================
   PAPERCLIP
   ========================================================= */

.ppr-about-collection__paperclip {

    position: absolute;

    right: 11%;
    top: 16%;

    width: 28px;
    height: 69px;

    border:
        3px solid
        var(--ppr-champagne-gold);

    border-radius: 18px;

    opacity: .72;

    transform:
        translate3d(
            0,
            calc(var(--collection-scroll) * -.8),
            0
        )
        rotate(17deg);

    will-change: transform;
}


.ppr-about-collection__paperclip::after {

    content: "";

    position: absolute;

    top: 5px;
    left: 7px;

    width: 13px;
    height: 54px;

    border:
        2px solid
        var(--ppr-champagne-gold);

    border-radius: 12px;
}


/* =========================================================
   PUSH PIN
   ========================================================= */

.ppr-about-collection__pushpin {

    position: absolute;

    left: 18%;
    top: 17%;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background:
        var(--ppr-dusty-rose);

    box-shadow:
        0 3px 0
        var(--ppr-dusty-rose-dark);

    transform:
        translate3d(
            0,
            calc(var(--collection-scroll) * .7),
            0
        );
}


/* =========================================================
   PENCIL
   ========================================================= */

.ppr-about-collection__pencil {

    position: absolute;

    right: -1%;
    bottom: 17%;

    width: 155px;
    height: 9px;

    border-radius: 10px;

    background:
        var(--ppr-champagne-gold);

    opacity: .55;

    transform:
        translate3d(
            0,
            calc(var(--collection-scroll) * .55),
            0
        )
        rotate(-24deg);

    will-change: transform;
}


.ppr-about-collection__pencil::before {

    content: "";

    position: absolute;

    left: -15px;
    top: 0;

    width: 0;
    height: 0;

    border-top:
        4.5px solid transparent;

    border-bottom:
        4.5px solid transparent;

    border-right:
        15px solid
        var(--ppr-warm-taupe);
}


.ppr-about-collection__pencil::after {

    content: "";

    position: absolute;

    right: 0;
    top: 0;

    width: 18px;
    height: 9px;

    border-radius:
        0 8px 8px 0;

    background:
        var(--ppr-dusty-rose);
}


/* =========================================================
   STICKY
   ========================================================= */

.ppr-about-collection__sticky {

    position: absolute;

    right: 6%;
    bottom: 9%;

    width: 100px;
    height: 100px;

    background:
        color-mix(
            in srgb,
            var(--ppr-champagne-gold) 20%,
            var(--ppr-warm-porcelain)
        );

    border-radius:
        7px 15px 10px 18px;

    opacity: .72;

    box-shadow:
        0 18px 35px
        rgba(46, 41, 42, .05);

    transform:
        translate3d(
            0,
            calc(var(--collection-scroll) * -.5),
            0
        )
        rotate(7deg);
}


.ppr-about-collection__sticky span {

    position: absolute;

    left: 17px;

    width: 55px;
    height: 1px;

    background:
        var(--ppr-warm-taupe);

    opacity: .45;
}


.ppr-about-collection__sticky span:nth-child(1) {
    top: 32px;
}

.ppr-about-collection__sticky span:nth-child(2) {
    top: 45px;
}

.ppr-about-collection__sticky span:nth-child(3) {
    top: 58px;
}


/* =========================================================
   DOTS
   ========================================================= */

.ppr-about-collection__dot {

    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;
}


.ppr-about-collection__dot--one {

    left: 28%;
    top: 31%;

    background:
        var(--ppr-sage-leaf);

    transform:
        translate3d(
            0,
            calc(var(--collection-scroll) * .9),
            0
        );
}


.ppr-about-collection__dot--two {

    right: 24%;
    bottom: 28%;

    background:
        var(--ppr-dusty-rose);

    transform:
        translate3d(
            0,
            calc(var(--collection-scroll) * -.75),
            0
        );
}


.ppr-about-collection__dot--three {

    left: 47%;
    bottom: 12%;

    background:
        var(--ppr-champagne-gold);

    transform:
        translate3d(
            0,
            calc(var(--collection-scroll) * .55),
            0
        );
}


/* =========================================================
   ARC
   ========================================================= */

.ppr-about-collection__arc {

    position: absolute;

    right: -10%;
    top: 40%;

    width: 440px;
    height: 190px;

    border-bottom:
        1px solid
        color-mix(
            in srgb,
            var(--ppr-sage-leaf) 45%,
            transparent
        );

    border-radius: 50%;

    transform:
        translate3d(
            0,
            calc(var(--collection-scroll) * .35),
            0
        )
        rotate(-9deg);
}


/* =========================================================
   LEFT INTRO
   ========================================================= */

.ppr-about-collection__intro {

    max-width: 700px;

    opacity: 0;

    transform:
        translateY(48px);
}


/* =========================================================
   EYEBROW
   ========================================================= */

.ppr-about-collection__eyebrow-wrap {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 1.25rem;
}


.ppr-about-collection__eyebrow-wrap span {

    width: 34px;
    height: 1px;

    background:
        var(--ppr-sage-leaf);
}


.ppr-about-collection__eyebrow {

    margin: 0;

    color:
        var(--ppr-sage-leaf);

    font-size: .73rem;

    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;
}


/* =========================================================
   TITLE
   ========================================================= */

.ppr-about-collection__title {

    max-width: 680px;

    margin: 0;

    color:
        var(--ppr-ink-charcoal);

    font-family:
        var(--ppr-font-family);

    font-size:
        clamp(
            2.7rem,
            5.4vw,
            5.2rem
        );

    font-weight: 800;

    line-height: 1.01;

    letter-spacing: -.06em;
}


.ppr-about-collection__title span {

    display: block;

    color:
        var(--ppr-sage-leaf);
}


/* =========================================================
   TEXT
   ========================================================= */

.ppr-about-collection__text {

    max-width: 590px;

    margin:
        1.5rem 0 0;

    color:
        var(--ppr-ink-charcoal);

    font-size:
        clamp(
            .92rem,
            1.25vw,
            1.04rem
        );

    font-weight: 500;

    line-height: 1.85;

    opacity: .72;
}


/* =========================================================
   PROCESS
   ========================================================= */

.ppr-about-collection__process {

    position: relative;

    margin-top:
        clamp(
            3rem,
            5vw,
            4.2rem
        );
}


/* =========================================================
   PROCESS LINE
   ========================================================= */

.ppr-about-collection__process-line {

    position: absolute;

    left: 20px;
    top: 20px;
    bottom: 74px;

    width: 1px;

    background:
        color-mix(
            in srgb,
            var(--ppr-sage-leaf) 25%,
            transparent
        );
}


.ppr-about-collection__process-line span {

    position: absolute;

    top: 0;
    left: 50%;

    width: 3px;
    height: 34%;

    transform:
        translateX(-50%);

    background:
        var(--ppr-sage-leaf);

    border-radius: 10px;
}


/* =========================================================
   STEP
   ========================================================= */

.ppr-about-collection__step {

    position: relative;

    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr);

    gap: 1.2rem;

    margin-bottom:
        1.65rem;

    opacity: 0;

    transform:
        translateY(30px);
}


/* =========================================================
   STEP MARKER
   ========================================================= */

.ppr-about-collection__step-marker {

    position: relative;

    z-index: 2;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        var(--ppr-autumn-ivory);

    border:
        1px solid
        color-mix(
            in srgb,
            var(--ppr-sage-leaf) 35%,
            transparent
        );

    color:
        var(--ppr-sage-leaf);

    font-size: .65rem;

    font-weight: 800;

    transition:
        transform var(--ppr-transition-normal),
        background var(--ppr-transition-normal);
}


.ppr-about-collection__step:hover
.ppr-about-collection__step-marker {

    transform:
        scale(1.08);

    background:
        var(--ppr-sage-leaf);

    color:
        var(--ppr-warm-porcelain);
}


/* =========================================================
   STEP CONTENT
   ========================================================= */

.ppr-about-collection__step-content {

    padding-top: .15rem;
}


.ppr-about-collection__step-label {

    margin: 0 0 .35rem;

    color:
        var(--ppr-sage-leaf);

    font-size: .66rem;

    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.ppr-about-collection__step-title {

    margin: 0;

    color:
        var(--ppr-ink-charcoal);

    font-size:
        clamp(
            1rem,
            1.4vw,
            1.2rem
        );

    font-weight: 800;

    line-height: 1.25;
}


.ppr-about-collection__step-text {

    max-width: 500px;

    margin:
        .45rem 0 0;

    color:
        var(--ppr-ink-charcoal);

    font-size: .79rem;

    font-weight: 500;

    line-height: 1.65;

    opacity: .62;
}


/* =========================================================
   CLOSING STATEMENT
   ========================================================= */

.ppr-about-collection__statement {

    display: flex;

    align-items: center;

    gap: .8rem;

    margin-top: 2.4rem;

    padding-top: 1.4rem;

    border-top:
        1px solid
        color-mix(
            in srgb,
            var(--ppr-warm-taupe) 30%,
            transparent
        );

    opacity: 0;

    transform:
        translateY(25px);
}


.ppr-about-collection__statement-mark {

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--ppr-sage-leaf) 12%,
            transparent
        );

    color:
        var(--ppr-sage-leaf);

    font-size: .7rem;
}


.ppr-about-collection__statement p {

    max-width: 300px;

    margin: 0;

    color:
        var(--ppr-ink-charcoal);

    font-size: .73rem;

    font-weight: 800;

    line-height: 1.5;

    letter-spacing: .02em;
}


/* =========================================================
   RIGHT IMAGE
   ========================================================= */

.ppr-about-collection__visual {

    position: relative;

    width: 100%;

    margin: 0;

    padding:
        1.2rem 1.2rem 2.5rem;

    opacity: 0;

    transform:
        translateY(70px)
        scale(.96);
}


/* =========================================================
   PAPER BEHIND IMAGE
   ========================================================= */

.ppr-about-collection__image-paper {

    position: absolute;

    inset:
        0 2rem 1.3rem 0;

    background:
        var(--ppr-warm-porcelain);

    border:
        1px solid
        color-mix(
            in srgb,
            var(--ppr-warm-taupe) 30%,
            transparent
        );

    border-radius:
        24px 11px 29px 14px;

    transform:
        rotate(-4deg)
        translate3d(
            0,
            calc(var(--collection-scroll) * .2),
            0
        );

    box-shadow:
        0 25px 55px
        rgba(46, 41, 42, .08);

    will-change: transform;
}


/* =========================================================
   IMAGE PIN
   ========================================================= */

.ppr-about-collection__image-pin {

    position: absolute;

    z-index: 6;

    top: -.45rem;
    right: 15%;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background:
        var(--ppr-dusty-rose);

    box-shadow:
        0 3px 0
        var(--ppr-dusty-rose-dark);
}


/* =========================================================
   IMAGE WRAP
   ========================================================= */

.ppr-about-collection__image-wrap {

    position: relative;

    z-index: 3;

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    border-radius:
        23px 31px 18px 28px;

    background:
        var(--ppr-warm-porcelain);

    box-shadow:
        0 28px 65px
        rgba(46, 41, 42, .13);
}


/* =========================================================
   IMAGE
   ========================================================= */

.ppr-about-collection__image {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.025);

    transition:
        transform
        900ms
        cubic-bezier(.16, 1, .3, 1);

    will-change: transform;
}


.ppr-about-collection__visual:hover
.ppr-about-collection__image {

    transform:
        scale(1.075);
}


/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

.ppr-about-collection__image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(46, 41, 42, .02) 45%,
            rgba(46, 41, 42, .22) 100%
        );

    pointer-events: none;
}


/* =========================================================
   IMAGE LABEL
   ========================================================= */

.ppr-about-collection__image-label {

    position: absolute;

    left: 1rem;
    bottom: 1rem;

    z-index: 5;

    display: flex;

    flex-direction: column;

    gap: .15rem;

    padding:
        .7rem .85rem;

    background:
        rgba(247, 242, 236, .9);

    backdrop-filter:
        blur(9px);

    border-radius:
        7px 11px 8px 13px;

    color:
        var(--ppr-ink-charcoal);
}


.ppr-about-collection__image-label span:first-child {

    font-size: .65rem;

    font-weight: 800;

    letter-spacing: .1em;

    text-transform: uppercase;
}


.ppr-about-collection__image-label span:last-child {

    font-size: .62rem;

    font-weight: 600;

    opacity: .65;
}


/* =========================================================
   CAPTION
   ========================================================= */

.ppr-about-collection__caption {

    position: relative;

    z-index: 5;

    display: flex;

    align-items: flex-start;

    gap: .7rem;

    max-width: 300px;

    margin:
        1.25rem 0 0 auto;
}


.ppr-about-collection__caption-line {

    width: 28px;
    height: 1px;

    flex: 0 0 28px;

    margin-top: .55rem;

    background:
        var(--ppr-sage-leaf);
}


.ppr-about-collection__caption p {

    margin: 0;

    color:
        var(--ppr-ink-charcoal);

    font-size: .73rem;

    font-weight: 700;

    line-height: 1.6;

    opacity: .68;
}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.ppr-about-collection.is-visible
.ppr-about-collection__intro {

    animation:
        pprCollectionIntroIn
        900ms
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


.ppr-about-collection.is-visible
.ppr-about-collection__step {

    animation:
        pprCollectionStepIn
        750ms
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


.ppr-about-collection.is-visible
.ppr-about-collection__step:nth-child(2) {
    animation-delay: 170ms;
}


.ppr-about-collection.is-visible
.ppr-about-collection__step:nth-child(3) {
    animation-delay: 300ms;
}


.ppr-about-collection.is-visible
.ppr-about-collection__step:nth-child(4) {
    animation-delay: 430ms;
}


.ppr-about-collection.is-visible
.ppr-about-collection__statement {

    animation:
        pprCollectionStatementIn
        700ms
        cubic-bezier(.16, 1, .3, 1)
        600ms
        forwards;
}


.ppr-about-collection.is-visible
.ppr-about-collection__visual {

    animation:
        pprCollectionVisualIn
        1050ms
        cubic-bezier(.16, 1, .3, 1)
        250ms
        forwards;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes pprCollectionIntroIn {

    from {
        opacity: 0;
        transform:
            translateY(48px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}


@keyframes pprCollectionStepIn {

    from {
        opacity: 0;
        transform:
            translateY(30px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}


@keyframes pprCollectionStatementIn {

    from {
        opacity: 0;
        transform:
            translateY(25px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}


@keyframes pprCollectionVisualIn {

    from {
        opacity: 0;
        transform:
            translateY(70px)
            scale(.96);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    .ppr-about-collection__container {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, .72fr);

        gap: 3.2rem;
    }


    .ppr-about-collection__title {

        font-size:
            clamp(
                2.35rem,
                5vw,
                3.8rem
            );
    }


    .ppr-about-collection__image-wrap {

        aspect-ratio:
            4 / 5;
    }


    .ppr-about-collection__background-number {

        font-size: 18rem;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .ppr-about-collection {

        padding-block:
            4.2rem
            4.8rem;
    }


    .ppr-about-collection__container {

        width:
            min(
                calc(100% - 30px),
                600px
            );

        grid-template-columns: 1fr;

        gap: 3.5rem;
    }


    .ppr-about-collection__title {

        font-size:
            clamp(
                2rem,
                9vw,
                3rem
            );
    }


    .ppr-about-collection__text {

        font-size: .9rem;
    }


    .ppr-about-collection__process {

        margin-top: 2.8rem;
    }


    .ppr-about-collection__step {

        grid-template-columns:
            38px
            minmax(0, 1fr);

        gap: 1rem;

        margin-bottom: 1.5rem;
    }


    .ppr-about-collection__step-marker {

        width: 38px;
        height: 38px;
    }


    .ppr-about-collection__process-line {

        left: 18px;
    }


    .ppr-about-collection__step-title {

        font-size: 1rem;
    }


    .ppr-about-collection__step-text {

        font-size: .76rem;
    }


    .ppr-about-collection__statement {

        margin-top: 2rem;
    }


    .ppr-about-collection__visual {

        padding:
            .8rem
            .8rem
            1.5rem;
    }


    .ppr-about-collection__image-wrap {

        aspect-ratio:
            5 / 6;

        border-radius:
            19px 25px 16px 23px;
    }


    .ppr-about-collection__image-paper {

        inset:
            0
            1rem
            .8rem
            0;
    }


    .ppr-about-collection__caption {

        margin-top: .9rem;
    }


    .ppr-about-collection__background-number {

        left: -10%;
        bottom: 5%;

        font-size: 12rem;
    }


    .ppr-about-collection__paper--one {

        right: -75px;
    }


    .ppr-about-collection__paper--two {

        left: -70px;
    }


    .ppr-about-collection__pencil {

        right: -50px;
    }


    .ppr-about-collection__sticky {

        right: -38px;
    }


    .ppr-about-collection__arc {

        right: -48%;

        width: 340px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 430px) {

    .ppr-about-collection__container {

        width:
            calc(100% - 24px);
    }


    .ppr-about-collection__eyebrow-wrap {

        gap: 9px;
    }


    .ppr-about-collection__eyebrow-wrap span {

        width: 22px;
    }


    .ppr-about-collection__title {

        font-size: 2rem;
    }


    .ppr-about-collection__step {

        grid-template-columns:
            34px
            minmax(0, 1fr);

        gap: .8rem;
    }


    .ppr-about-collection__step-marker {

        width: 34px;
        height: 34px;

        font-size: .58rem;
    }


    .ppr-about-collection__process-line {

        left: 16px;
    }


    .ppr-about-collection__step-label {

        font-size: .6rem;
    }


    .ppr-about-collection__step-title {

        font-size: .96rem;
    }


    .ppr-about-collection__step-text {

        font-size: .73rem;
    }


    .ppr-about-collection__statement p {

        font-size: .68rem;
    }


    .ppr-about-collection__image-label {

        left: .7rem;
        bottom: .7rem;

        padding:
            .6rem
            .7rem;
    }
}


/* =========================================================
   DARK MODE
   ========================================================= */

html.ppr-dark-mode
.ppr-about-collection {

    background:
        var(--ppr-warm-porcelain);

    color:
        var(--ppr-ink-charcoal);
}


html.ppr-dark-mode
.ppr-about-collection__paper,
html.ppr-dark-mode
.ppr-about-collection__image-paper {

    background:
        var(--ppr-autumn-ivory);

    border-color:
        rgba(244, 237, 230, .12);

    opacity: .48;
}


html.ppr-dark-mode
.ppr-about-collection__step-marker {

    background:
        var(--ppr-warm-porcelain);
}


html.ppr-dark-mode
.ppr-about-collection__image-label {

    background:
        rgba(33, 29, 30, .88);

    color:
        var(--ppr-ink-charcoal);
}


html.ppr-dark-mode
.ppr-about-collection__image-overlay {

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, .02) 40%,
            rgba(0, 0, 0, .34) 100%
        );
}


/* =========================================================
   RTL
   ========================================================= */

html.ppr-rtl
.ppr-about-collection__process-line {

    left: auto;
    right: 20px;
}


html.ppr-rtl
.ppr-about-collection__step {

    grid-template-columns:
        minmax(0, 1fr)
        42px;
}


html.ppr-rtl
.ppr-about-collection__step-marker {

    grid-column: 2;
    grid-row: 1;
}


html.ppr-rtl
.ppr-about-collection__step-content {

    grid-column: 1;
    grid-row: 1;

    text-align: right;
}


html.ppr-rtl
.ppr-about-collection__caption {

    margin-inline:
        auto 0;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ppr-about-collection__background-number,
    .ppr-about-collection__paper,
    .ppr-about-collection__paperclip,
    .ppr-about-collection__pushpin,
    .ppr-about-collection__pencil,
    .ppr-about-collection__sticky,
    .ppr-about-collection__dot,
    .ppr-about-collection__arc,
    .ppr-about-collection__image-paper {

        transform: none !important;
    }


    .ppr-about-collection__intro,
    .ppr-about-collection__step,
    .ppr-about-collection__statement,
    .ppr-about-collection__visual {

        opacity: 1 !important;

        transform: none !important;

        animation: none !important;
    }


    .ppr-about-collection__image {

        transition: none !important;
    }
}

/* =========================================================
   SECTION 05 — DESIGNED FOR EVERYDAY WORKSPACES
   ========================================================= */

.ppr-about-workspace {
    --workspace-scroll: 0px;

    position: relative;
    isolation: isolate;

    width: 100%;
    overflow: hidden;

    padding:
        clamp(5rem, 8vw, 7rem)
        0
        clamp(5rem, 8vw, 7rem);

    background: var(--ppr-warm-porcelain);
    color: var(--ppr-ink-charcoal);
}


/* =========================================================
   BACKGROUND SECTION NUMBER
   ========================================================= */

.ppr-about-workspace__background-number {
    position: absolute;

    z-index: 0;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%)
        translateY(calc(var(--workspace-scroll) * -.08));

    font-size: clamp(15rem, 30vw, 30rem);
    line-height: .75;

    font-weight: 800;
    letter-spacing: -.08em;

    color:
        color-mix(
            in srgb,
            var(--ppr-dusty-rose) 11%,
            transparent
        );

    white-space: nowrap;

    pointer-events: none;
    user-select: none;

    transition: transform .1s linear;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.ppr-about-workspace__container {
    position: relative;

    z-index: 3;

    width: min(
        calc(100% - 40px),
        var(--ppr-content-width)
    );

    margin-inline: auto;
}


/* =========================================================
   BACKGROUND DECOR
   ========================================================= */

.ppr-about-workspace__decor {
    position: absolute;

    inset: 0;

    z-index: 1;

    overflow: hidden;

    pointer-events: none;
}


/* =========================================================
   PAPER SHEETS
   ========================================================= */

.ppr-about-workspace__paper {
    position: absolute;

    width: 150px;
    height: 190px;

    background: var(--ppr-autumn-ivory);

    border: 1px solid
        color-mix(
            in srgb,
            var(--ppr-warm-taupe) 35%,
            transparent
        );

    border-radius: 10px;

    opacity: .6;
}


.ppr-about-workspace__paper--one {
    left: -45px;
    top: 25%;

    transform:
        translateY(calc(var(--workspace-scroll) * -.12))
        rotate(-12deg);
}


.ppr-about-workspace__paper--two {
    right: -55px;
    bottom: 15%;

    transform:
        translateY(calc(var(--workspace-scroll) * .10))
        rotate(9deg);
}


/* =========================================================
   PAPERCLIP
   ========================================================= */

.ppr-about-workspace__paperclip {
    position: absolute;

    left: 7%;
    top: 16%;

    width: 28px;
    height: 72px;

    border: 3px solid var(--ppr-champagne-gold);

    border-bottom: 0;

    border-radius: 18px 18px 0 0;

    transform:
        translateY(calc(var(--workspace-scroll) * -.18))
        rotate(14deg);

    opacity: .8;
}


.ppr-about-workspace__paperclip::after {
    content: "";

    position: absolute;

    left: 6px;
    top: 8px;

    width: 15px;
    height: 55px;

    border: 2px solid var(--ppr-champagne-gold);

    border-bottom: 0;

    border-radius: 12px 12px 0 0;
}


/* =========================================================
   PUSH PIN
   ========================================================= */

.ppr-about-workspace__pushpin {
    position: absolute;

    right: 8%;
    top: 18%;

    width: 16px;
    height: 16px;

    border-radius: 50%;

    background: var(--ppr-dusty-rose);

    box-shadow:
        0 9px 0 -5px
        var(--ppr-dusty-rose-dark);

    transform:
        translateY(calc(var(--workspace-scroll) * -.2));
}


/* =========================================================
   STICKY NOTE
   ========================================================= */

.ppr-about-workspace__sticky {
    position: absolute;

    right: 3%;
    top: 47%;

    display: grid;

    place-items: center;

    width: 82px;
    height: 72px;

    background: var(--ppr-dusty-rose);

    color: var(--ppr-warm-porcelain);

    font-size: .62rem;
    font-weight: 800;

    letter-spacing: .14em;

    border-radius: 5px;

    transform:
        translateY(calc(var(--workspace-scroll) * .16))
        rotate(7deg);

    opacity: .8;
}


/* =========================================================
   DOTS
   ========================================================= */

.ppr-about-workspace__dot {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--ppr-sage-leaf);

    opacity: .55;
}


.ppr-about-workspace__dot--one {
    left: 17%;
    bottom: 18%;
}


.ppr-about-workspace__dot--two {
    right: 18%;
    bottom: 12%;

    width: 11px;
    height: 11px;

    background: var(--ppr-dusty-rose);
}


.ppr-about-workspace__dot--three {
    left: 45%;
    top: 13%;

    width: 5px;
    height: 5px;

    background: var(--ppr-champagne-gold);
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.ppr-about-workspace__head {
    position: relative;

    z-index: 4;

    max-width: 850px;

    margin-inline: auto;
    margin-bottom: clamp(3rem, 6vw, 5rem);

    text-align: center;
}


/* =========================================================
   META
   ========================================================= */

.ppr-about-workspace__meta {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    margin-bottom: 1.2rem;
}


.ppr-about-workspace__number {
    font-size: .72rem;
    font-weight: 800;

    letter-spacing: .16em;

    color: var(--ppr-dusty-rose);
}


.ppr-about-workspace__line {
    width: 42px;
    height: 1px;

    background: var(--ppr-warm-taupe);

    opacity: .65;
}


.ppr-about-workspace__eyebrow {
    margin: 0;

    font-size: .76rem;
    font-weight: 700;

    letter-spacing: .13em;
    text-transform: uppercase;

    color: var(--ppr-sage-leaf);
}


/* =========================================================
   TITLE
   ========================================================= */

.ppr-about-workspace__title {
    margin: 0;

    max-width: 780px;

    margin-inline: auto;

    font-size: clamp(2rem, 4vw, 3.6rem);

    line-height: 1.08;

    letter-spacing: -.035em;

    font-weight: 700;
}


.ppr-about-workspace__title span {
    display: block;

    color: var(--ppr-dusty-rose);
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.ppr-about-workspace__layout {
    position: relative;

    z-index: 4;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, .92fr);

    align-items: center;

    gap: clamp(3rem, 7vw, 7rem);
}


/* =========================================================
   VISUAL
   ========================================================= */

.ppr-about-workspace__visual {
    position: relative;

    z-index: 4;

    margin: 0;

    padding:
        20px
        22px
        34px
        18px;
}


.ppr-about-workspace__image-back {
    position: absolute;

    z-index: 0;

    inset:
        4%
        2%
        8%
        4%;

    background: var(--ppr-autumn-ivory);

    border-radius: 18px;

    transform:
        translateY(calc(var(--workspace-scroll) * -.10))
        rotate(-3deg);

    transition: transform .1s linear;
}


.ppr-about-workspace__image-wrap {
    position: relative;

    z-index: 2;

    overflow: hidden;

    border-radius: 20px;

    background: var(--ppr-autumn-ivory);

    box-shadow:
        0 20px 50px
        color-mix(
            in srgb,
            var(--ppr-ink-charcoal) 10%,
            transparent
        );

    transform:
        translateY(calc(var(--workspace-scroll) * .08));
}


.ppr-about-workspace__image {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 16 / 10;

    object-fit: cover;

    transition:
        transform 700ms ease;
}


.ppr-about-workspace__visual:hover
.ppr-about-workspace__image {
    transform: scale(1.025);
}


/* =========================================================
   IMAGE CAPTION
   ========================================================= */

.ppr-about-workspace__caption {
    position: absolute;

    z-index: 5;

    left: 0;
    bottom: 0;

    display: flex;

    align-items: center;

    gap: 12px;

    max-width: 260px;

    padding:
        14px
        18px;

    background: var(--ppr-warm-porcelain);

    color: var(--ppr-ink-charcoal);

    border-radius: 10px;

    box-shadow:
        0 12px 28px
        color-mix(
            in srgb,
            var(--ppr-ink-charcoal) 10%,
            transparent
        );
}


.ppr-about-workspace__caption-mark {
    flex: 0 0 auto;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--ppr-dusty-rose);
}


.ppr-about-workspace__caption span:last-child {
    font-size: .78rem;

    line-height: 1.5;
}


.ppr-about-workspace__caption strong {
    color: var(--ppr-dusty-rose);
}


/* =========================================================
   CONTENT
   ========================================================= */

.ppr-about-workspace__content {
    position: relative;

    z-index: 5;

    max-width: 520px;
}


.ppr-about-workspace__intro {
    margin:
        0
        0
        2rem;

    font-size:
        clamp(
            1rem,
            1.4vw,
            1.15rem
        );

    line-height: 1.8;

    color: var(--ppr-warm-taupe);
}


/* =========================================================
   POINTS
   ========================================================= */

.ppr-about-workspace__points {
    display: grid;

    gap: 0;

    border-top: 1px solid
        color-mix(
            in srgb,
            var(--ppr-warm-taupe) 38%,
            transparent
        );
}


.ppr-about-workspace__point {
    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr);

    gap: 16px;

    padding:
        18px
        0;

    border-bottom: 1px solid
        color-mix(
            in srgb,
            var(--ppr-warm-taupe) 38%,
            transparent
        );

    transition:
        padding .3s ease,
        background .3s ease;
}


.ppr-about-workspace__point:hover {
    padding-inline: 10px;

    background:
        color-mix(
            in srgb,
            var(--ppr-autumn-ivory) 70%,
            transparent
        );

    border-radius: 8px;
}


.ppr-about-workspace__point-number {
    padding-top: 3px;

    font-size: .7rem;
    font-weight: 800;

    letter-spacing: .12em;

    color: var(--ppr-dusty-rose);
}


.ppr-about-workspace__point-body h3 {
    margin:
        0
        0
        5px;

    font-size: 1rem;

    line-height: 1.35;

    font-weight: 700;
}


.ppr-about-workspace__point-body p {
    margin: 0;

    font-size: .86rem;

    line-height: 1.65;

    color: var(--ppr-warm-taupe);
}


/* =========================================================
   CLOSING NOTE
   ========================================================= */

.ppr-about-workspace__note {
    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 2rem;

    padding:
        15px
        18px;

    background: var(--ppr-autumn-ivory);

    border-radius: 10px;

    transform: rotate(-1deg);
}


.ppr-about-workspace__note-pin {
    flex: 0 0 auto;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--ppr-dusty-rose);
}


.ppr-about-workspace__note p {
    margin: 0;

    font-size: .84rem;

    line-height: 1.5;
}


.ppr-about-workspace__note strong {
    color: var(--ppr-dusty-rose);
}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.ppr-about-workspace__head,
.ppr-about-workspace__visual,
.ppr-about-workspace__content {
    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 700ms ease,
        transform 800ms ease;
}


.ppr-about-workspace__visual {
    transform:
        translateY(45px)
        rotate(-1deg);
}


.ppr-about-workspace__content {
    transform: translateY(35px);
}


.ppr-about-workspace.is-visible
.ppr-about-workspace__head,
.ppr-about-workspace.is-visible
.ppr-about-workspace__visual,
.ppr-about-workspace.is-visible
.ppr-about-workspace__content {
    opacity: 1;

    transform:
        translateY(0)
        rotate(0);
}


.ppr-about-workspace.is-visible
.ppr-about-workspace__visual {
    transition-delay: 120ms;
}


.ppr-about-workspace.is-visible
.ppr-about-workspace__content {
    transition-delay: 240ms;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html.ppr-dark-mode
.ppr-about-workspace__image-back,

html.ppr-dark-mode
.ppr-about-workspace__note {

    background: var(--ppr-autumn-ivory);
}


html.ppr-dark-mode
.ppr-about-workspace__caption {

    background: var(--ppr-warm-porcelain);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .ppr-about-workspace__layout {
        grid-template-columns: 1fr;

        gap: 3rem;
    }


    .ppr-about-workspace__visual {
        max-width: 760px;

        margin-inline: auto;

        width: 100%;
    }


    .ppr-about-workspace__content {
        max-width: 720px;

        margin-inline: auto;

        width: 100%;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .ppr-about-workspace {
        padding-block:
            4rem
            4rem;
    }


    .ppr-about-workspace__container {
        width:
            min(
                calc(100% - 28px),
                var(--ppr-content-width)
            );
    }


    .ppr-about-workspace__background-number {
        top: 52%;

        font-size: 14rem;
    }


    .ppr-about-workspace__head {
        margin-bottom: 2.8rem;
    }


    .ppr-about-workspace__title {
        font-size:
            clamp(
                1.85rem,
                8vw,
                2.5rem
            );
    }


    .ppr-about-workspace__visual {
        padding:
            12px
            12px
            30px;
    }


    .ppr-about-workspace__image-wrap {
        border-radius: 14px;
    }


    .ppr-about-workspace__caption {
        left: 2px;
        bottom: 0;

        max-width: 220px;

        padding:
            11px
            14px;
    }


    .ppr-about-workspace__caption span:last-child {
        font-size: .72rem;
    }


    .ppr-about-workspace__point {
        grid-template-columns:
            34px
            minmax(0, 1fr);

        gap: 10px;

        padding-block: 16px;
    }


    .ppr-about-workspace__point-body p {
        font-size: .82rem;
    }


    .ppr-about-workspace__sticky {
        right: -12px;

        width: 65px;
        height: 58px;

        font-size: .52rem;
    }


    .ppr-about-workspace__paperclip {
        left: 2%;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ppr-about-workspace__background-number,
    .ppr-about-workspace__paper,
    .ppr-about-workspace__paperclip,
    .ppr-about-workspace__pushpin,
    .ppr-about-workspace__sticky,
    .ppr-about-workspace__image-back,
    .ppr-about-workspace__image-wrap {

        transform: none !important;
    }


    .ppr-about-workspace__head,
    .ppr-about-workspace__visual,
    .ppr-about-workspace__content {

        opacity: 1;

        transform: none;

        transition: none;
    }

}

/* =========================================================
   SECTION 06 — PROFESSIONAL NEEDS
   ========================================================= */

.ppr-about-professional {
    --professional-scroll: 0px;

    position: relative;
    isolation: isolate;

    width: 100%;
    overflow: hidden;

    padding:
        clamp(5rem, 8vw, 7rem)
        0
        clamp(5rem, 8vw, 7rem);

    background: var(--ppr-autumn-ivory);
    color: var(--ppr-ink-charcoal);
}


/* =========================================================
   BACKGROUND SECTION NUMBER
   ========================================================= */

.ppr-about-professional__background-number {
    position: absolute;

    z-index: 0;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%)
        translateY(calc(var(--professional-scroll) * -.08));

    font-size: clamp(15rem, 30vw, 30rem);

    line-height: .75;

    font-weight: 800;

    letter-spacing: -.08em;

    color:
        color-mix(
            in srgb,
            var(--ppr-sage-leaf) 12%,
            transparent
        );

    white-space: nowrap;

    pointer-events: none;
    user-select: none;

    transition: transform .1s linear;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.ppr-about-professional__container {
    position: relative;

    z-index: 3;

    width: min(
        calc(100% - 40px),
        var(--ppr-content-width)
    );

    margin-inline: auto;
}


/* =========================================================
   DECORATION LAYER
   ========================================================= */

.ppr-about-professional__decor {
    position: absolute;

    inset: 0;

    z-index: 1;

    overflow: hidden;

    pointer-events: none;
}


/* =========================================================
   PAPER SHEETS
   ========================================================= */

.ppr-about-professional__paper {
    position: absolute;

    width: 170px;
    height: 215px;

    background: var(--ppr-warm-porcelain);

    border: 1px solid
        color-mix(
            in srgb,
            var(--ppr-warm-taupe) 35%,
            transparent
        );

    border-radius: 12px;

    opacity: .7;
}


.ppr-about-professional__paper--one {
    left: -65px;
    top: 17%;

    transform:
        translateY(calc(var(--professional-scroll) * -.12))
        rotate(-10deg);
}


.ppr-about-professional__paper--two {
    right: -70px;
    bottom: 12%;

    transform:
        translateY(calc(var(--professional-scroll) * .10))
        rotate(11deg);
}


/* =========================================================
   PAPERCLIP
   ========================================================= */

.ppr-about-professional__paperclip {
    position: absolute;

    left: 8%;
    top: 11%;

    width: 28px;
    height: 74px;

    border: 3px solid var(--ppr-champagne-gold);

    border-bottom: 0;

    border-radius: 18px 18px 0 0;

    transform:
        translateY(calc(var(--professional-scroll) * -.2))
        rotate(16deg);

    opacity: .8;
}


.ppr-about-professional__paperclip::after {
    content: "";

    position: absolute;

    left: 6px;
    top: 8px;

    width: 14px;
    height: 56px;

    border: 2px solid var(--ppr-champagne-gold);

    border-bottom: 0;

    border-radius: 12px 12px 0 0;
}


/* =========================================================
   PUSH PIN
   ========================================================= */

.ppr-about-professional__pin {
    position: absolute;

    right: 9%;
    top: 14%;

    width: 17px;
    height: 17px;

    border-radius: 50%;

    background: var(--ppr-dusty-rose);

    box-shadow:
        0 10px 0 -5px
        var(--ppr-dusty-rose-dark);

    transform:
        translateY(calc(var(--professional-scroll) * -.18));
}


/* =========================================================
   PENCIL
   ========================================================= */

.ppr-about-professional__pencil {
    position: absolute;

    right: 4%;
    top: 42%;

    width: 105px;
    height: 10px;

    border-radius: 8px;

    background:
        linear-gradient(
            90deg,
            var(--ppr-champagne-gold) 0 78%,
            var(--ppr-dusty-rose) 78% 88%,
            var(--ppr-ink-charcoal) 88%
        );

    transform:
        translateY(calc(var(--professional-scroll) * .16))
        rotate(-27deg);

    opacity: .7;
}


/* =========================================================
   DOTS
   ========================================================= */

.ppr-about-professional__dot {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--ppr-sage-leaf);

    opacity: .6;
}


.ppr-about-professional__dot--one {
    left: 18%;
    bottom: 16%;
}


.ppr-about-professional__dot--two {
    right: 17%;
    bottom: 22%;

    width: 11px;
    height: 11px;

    background: var(--ppr-dusty-rose);
}


.ppr-about-professional__dot--three {
    left: 48%;
    top: 12%;

    width: 5px;
    height: 5px;

    background: var(--ppr-champagne-gold);
}


/* =========================================================
   HEADER
   ========================================================= */

.ppr-about-professional__head {
    position: relative;

    z-index: 4;

    max-width: 850px;

    margin-inline: auto;

    margin-bottom:
        clamp(
            3.5rem,
            6vw,
            5rem
        );

    text-align: center;
}


/* =========================================================
   META
   ========================================================= */

.ppr-about-professional__meta {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    margin-bottom: 1.2rem;
}


.ppr-about-professional__number {
    font-size: .72rem;

    font-weight: 800;

    letter-spacing: .16em;

    color: var(--ppr-dusty-rose);
}


.ppr-about-professional__line {
    width: 42px;
    height: 1px;

    background: var(--ppr-warm-taupe);

    opacity: .7;
}


.ppr-about-professional__eyebrow {
    margin: 0;

    font-size: .75rem;

    font-weight: 700;

    letter-spacing: .13em;

    text-transform: uppercase;

    color: var(--ppr-sage-leaf);
}


/* =========================================================
   TITLE
   ========================================================= */

.ppr-about-professional__title {
    margin: 0;

    font-size:
        clamp(
            2rem,
            4vw,
            3.6rem
        );

    line-height: 1.08;

    letter-spacing: -.035em;

    font-weight: 700;
}


.ppr-about-professional__title span {
    display: block;

    color: var(--ppr-dusty-rose);
}


/* =========================================================
   INTRO
   ========================================================= */

.ppr-about-professional__intro {
    max-width: 650px;

    margin:
        1.4rem
        auto
        0;

    font-size: .98rem;

    line-height: 1.8;

    color: var(--ppr-warm-taupe);
}


/* =========================================================
   BOARD
   ========================================================= */

.ppr-about-professional__board {
    position: relative;

    z-index: 4;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 1.15fr)
        minmax(0, 1fr);

    grid-template-areas:
        "left center right"
        "bottom-left center bottom-right";

    align-items: center;

    gap: 30px;

    max-width: 1080px;

    margin-inline: auto;
}


/* =========================================================
   NOTES
   ========================================================= */

.ppr-about-professional__note {
    position: relative;

    z-index: 5;

    min-height: 190px;

    padding:
        28px
        26px
        25px;

    border-radius: 14px;

    box-shadow:
        0 15px 30px
        color-mix(
            in srgb,
            var(--ppr-ink-charcoal) 7%,
            transparent
        );

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.ppr-about-professional__note:hover {
    transform:
        translateY(-7px)
        rotate(0deg);

    box-shadow:
        0 22px 38px
        color-mix(
            in srgb,
            var(--ppr-ink-charcoal) 11%,
            transparent
        );
}


/* =========================================================
   NOTE POSITIONS
   ========================================================= */

.ppr-about-professional__note--rose {
    grid-area: left;

    background: var(--ppr-dusty-rose);

    color: var(--ppr-warm-porcelain);

    transform: rotate(-2deg);
}


.ppr-about-professional__note--sage {
    grid-area: right;

    background: var(--ppr-sage-leaf);

    color: var(--ppr-warm-porcelain);

    transform: rotate(2deg);
}


.ppr-about-professional__note--ivory {
    grid-area: bottom-left;

    background: var(--ppr-warm-porcelain);

    transform: rotate(1.5deg);
}


.ppr-about-professional__note--gold {
    grid-area: bottom-right;

    background:
        color-mix(
            in srgb,
            var(--ppr-champagne-gold) 55%,
            var(--ppr-warm-porcelain)
        );

    transform: rotate(-1.5deg);
}


/* =========================================================
   NOTE NUMBER
   ========================================================= */

.ppr-about-professional__note-number {
    display: block;

    margin-bottom: 1.4rem;

    font-size: .68rem;

    font-weight: 800;

    letter-spacing: .14em;

    opacity: .7;
}


/* =========================================================
   NOTE CONTENT
   ========================================================= */

.ppr-about-professional__note h3 {
    margin:
        0
        0
        .65rem;

    font-size: 1.05rem;

    line-height: 1.3;

    font-weight: 700;
}


.ppr-about-professional__note p {
    margin: 0;

    font-size: .82rem;

    line-height: 1.65;

    opacity: .86;
}


/* =========================================================
   TAPE
   ========================================================= */

.ppr-about-professional__note-tape {
    position: absolute;

    left: 50%;
    top: -8px;

    width: 52px;
    height: 17px;

    background:
        color-mix(
            in srgb,
            var(--ppr-warm-porcelain) 70%,
            transparent
        );

    transform:
        translateX(-50%)
        rotate(-2deg);

    opacity: .7;
}


/* =========================================================
   CENTER NOTE
   ========================================================= */

.ppr-about-professional__center {
    position: relative;

    z-index: 6;

    grid-area: center;

    min-height: 350px;

    padding:
        48px
        42px;

    background: var(--ppr-warm-porcelain);

    border-radius: 18px;

    box-shadow:
        0 25px 55px
        color-mix(
            in srgb,
            var(--ppr-ink-charcoal) 10%,
            transparent
        );

    transform:
        translateY(calc(var(--professional-scroll) * .06))
        rotate(.5deg);
}


.ppr-about-professional__center-pin {
    position: absolute;

    top: 18px;
    left: 50%;

    width: 15px;
    height: 15px;

    border-radius: 50%;

    background: var(--ppr-dusty-rose);

    transform: translateX(-50%);

    box-shadow:
        0 8px 0 -4px
        var(--ppr-dusty-rose-dark);
}


/* =========================================================
   CENTER CONTENT
   ========================================================= */

.ppr-about-professional__center-content {
    max-width: 420px;

    margin-inline: auto;

    text-align: center;
}


.ppr-about-professional__center-label {
    margin:
        0
        0
        1rem;

    font-size: .68rem;

    font-weight: 800;

    letter-spacing: .18em;

    color: var(--ppr-dusty-rose);
}


.ppr-about-professional__center h3 {
    margin: 0;

    font-size:
        clamp(
            1.45rem,
            2.5vw,
            2rem
        );

    line-height: 1.2;

    letter-spacing: -.025em;
}


.ppr-about-professional__center p {
    margin:
        1.25rem
        0
        0;

    font-size: .87rem;

    line-height: 1.75;

    color: var(--ppr-warm-taupe);
}


/* =========================================================
   CENTER MARK
   ========================================================= */

.ppr-about-professional__center-mark {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 7px;

    margin-top: 2rem;
}


.ppr-about-professional__center-mark span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--ppr-dusty-rose);
}


.ppr-about-professional__center-mark span:nth-child(2) {
    background: var(--ppr-sage-leaf);
}


.ppr-about-professional__center-mark span:nth-child(3) {
    background: var(--ppr-champagne-gold);
}


/* =========================================================
   CTA
   ========================================================= */

.ppr-about-professional__cta {
    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 22px;

    margin-top: 4rem;
}


.ppr-about-professional__cta-text {
    margin: 0;

    font-size: .88rem;

    color: var(--ppr-warm-taupe);
}


/* =========================================================
   CTA LINK
   ========================================================= */

.ppr-about-professional__link {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    padding:
        13px
        20px;

    border-radius: 9px;

    background: var(--ppr-dusty-rose);

    color: var(--ppr-warm-porcelain);

    font-size: .8rem;

    font-weight: 700;

    text-decoration: none;

    transition:
        transform .28s ease,
        background .28s ease;
}


.ppr-about-professional__link:hover {
    transform: translateY(-3px);

    background: var(--ppr-dusty-rose-dark);
}


.ppr-about-professional__arrow {
    transition:
        transform .28s ease;
}


.ppr-about-professional__link:hover
.ppr-about-professional__arrow {
    transform: translateX(4px);
}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.ppr-about-professional__head,
.ppr-about-professional__note,
.ppr-about-professional__center,
.ppr-about-professional__cta {

    opacity: 0;

    transform:
        translateY(35px);
}


.ppr-about-professional__center {
    transform:
        translateY(45px)
        rotate(.5deg);
}


.ppr-about-professional.is-visible
.ppr-about-professional__head {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity .7s ease,
        transform .7s ease;
}


.ppr-about-professional.is-visible
.ppr-about-professional__note {

    opacity: 1;

    transform:
        translateY(0)
        rotate(0);

    transition:
        opacity .65s ease,
        transform .65s ease;
}


.ppr-about-professional.is-visible
.ppr-about-professional__center {

    opacity: 1;

    transform:
        translateY(0)
        rotate(.5deg);

    transition:
        opacity .8s ease,
        transform .8s ease;

    transition-delay: 120ms;
}


.ppr-about-professional.is-visible
.ppr-about-professional__cta {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity .7s ease,
        transform .7s ease;

    transition-delay: 450ms;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html.ppr-dark-mode
.ppr-about-professional__note--ivory {

    background: var(--ppr-warm-porcelain);
}


html.ppr-dark-mode
.ppr-about-professional__note--gold {

    background:
        color-mix(
            in srgb,
            var(--ppr-champagne-gold) 38%,
            var(--ppr-warm-porcelain)
        );
}


html.ppr-dark-mode
.ppr-about-professional__center {

    background: var(--ppr-warm-porcelain);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

    .ppr-about-professional__board {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        grid-template-areas:
            "center center"
            "left right"
            "bottom-left bottom-right";

        max-width: 760px;
    }


    .ppr-about-professional__center {

        max-width: 600px;

        width: 100%;

        margin-inline: auto;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

    .ppr-about-professional {

        padding-block:
            4rem
            4rem;
    }


    .ppr-about-professional__container {

        width:
            min(
                calc(100% - 28px),
                var(--ppr-content-width)
            );
    }


    .ppr-about-professional__background-number {

        top: 50%;

        font-size: 14rem;
    }


    .ppr-about-professional__head {

        margin-bottom: 3rem;
    }


    .ppr-about-professional__title {

        font-size:
            clamp(
                1.85rem,
                8vw,
                2.5rem
            );
    }


    .ppr-about-professional__intro {

        font-size: .9rem;
    }


    .ppr-about-professional__board {

        display: flex;

        flex-direction: column;

        gap: 22px;
    }


    .ppr-about-professional__center {

        order: -1;

        min-height: auto;

        padding:
            42px
            25px
            32px;

        width: 100%;
    }


    .ppr-about-professional__note {

        width: 100%;

        min-height: 170px;
    }


    .ppr-about-professional__cta {

        flex-direction: column;

        gap: 13px;

        margin-top: 3rem;
    }


    .ppr-about-professional__cta-text {

        text-align: center;
    }


    .ppr-about-professional__pencil {

        right: -30px;
    }


    .ppr-about-professional__paperclip {

        left: -5px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ppr-about-professional__background-number,
    .ppr-about-professional__paper,
    .ppr-about-professional__paperclip,
    .ppr-about-professional__pin,
    .ppr-about-professional__pencil,
    .ppr-about-professional__center {

        transform: none !important;
    }


    .ppr-about-professional__head,
    .ppr-about-professional__note,
    .ppr-about-professional__center,
    .ppr-about-professional__cta {

        opacity: 1 !important;

        transform: none !important;

        transition: none !important;
    }

}




/* =========================================================
   SECTION 07 — CLOSING STATEMENT + CTA
   ========================================================= */

.ppr-about-closing {
    --closing-scroll: 0px;

    position: relative;
    isolation: isolate;

    width: 100%;
    overflow: hidden;

    padding:
        clamp(6rem, 10vw, 9rem)
        0
        clamp(5rem, 8vw, 7rem);

    background: var(--ppr-warm-porcelain);
    color: var(--ppr-ink-charcoal);
}


/* =========================================================
   BACKGROUND NUMBER
   ========================================================= */

.ppr-about-closing__background-number {
    position: absolute;

    z-index: 0;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%)
        translateY(calc(var(--closing-scroll) * -.08));

    font-size: clamp(16rem, 34vw, 34rem);

    line-height: .7;

    font-weight: 800;

    letter-spacing: -.09em;

    color:
        color-mix(
            in srgb,
            var(--ppr-dusty-rose) 10%,
            transparent
        );

    white-space: nowrap;

    pointer-events: none;
    user-select: none;
}


/* =========================================================
   DECORATION LAYER
   ========================================================= */

.ppr-about-closing__decor {
    position: absolute;

    inset: 0;

    z-index: 1;

    overflow: hidden;

    pointer-events: none;
}


/* =========================================================
   PAPER SHEETS
   ========================================================= */

.ppr-about-closing__paper {
    position: absolute;

    background: var(--ppr-autumn-ivory);

    border: 1px solid
        color-mix(
            in srgb,
            var(--ppr-warm-taupe) 35%,
            transparent
        );

    border-radius: 12px;

    opacity: .75;
}


.ppr-about-closing__paper--one {
    left: -60px;
    top: 22%;

    width: 170px;
    height: 220px;

    transform:
        translateY(calc(var(--closing-scroll) * -.12))
        rotate(-11deg);
}


.ppr-about-closing__paper--two {
    right: -70px;
    bottom: 18%;

    width: 160px;
    height: 205px;

    transform:
        translateY(calc(var(--closing-scroll) * .12))
        rotate(10deg);
}


/* =========================================================
   PAPERCLIP
   ========================================================= */

.ppr-about-closing__paperclip {
    position: absolute;

    left: 13%;
    top: 17%;

    width: 28px;
    height: 72px;

    border: 3px solid var(--ppr-champagne-gold);

    border-bottom: 0;

    border-radius: 18px 18px 0 0;

    transform:
        translateY(calc(var(--closing-scroll) * -.2))
        rotate(17deg);

    opacity: .8;
}


.ppr-about-closing__paperclip::after {
    content: "";

    position: absolute;

    left: 6px;
    top: 8px;

    width: 14px;
    height: 55px;

    border: 2px solid var(--ppr-champagne-gold);

    border-bottom: 0;

    border-radius: 12px 12px 0 0;
}


/* =========================================================
   PIN
   ========================================================= */

.ppr-about-closing__pin {
    position: absolute;

    right: 14%;
    top: 19%;

    width: 17px;
    height: 17px;

    border-radius: 50%;

    background: var(--ppr-dusty-rose);

    box-shadow:
        0 10px 0 -5px
        var(--ppr-dusty-rose-dark);

    transform:
        translateY(calc(var(--closing-scroll) * -.15));
}


/* =========================================================
   PENCIL
   ========================================================= */

.ppr-about-closing__pencil {
    position: absolute;

    right: 8%;
    bottom: 23%;

    width: 115px;
    height: 10px;

    border-radius: 8px;

    background:
        linear-gradient(
            90deg,
            var(--ppr-champagne-gold) 0 78%,
            var(--ppr-dusty-rose) 78% 88%,
            var(--ppr-ink-charcoal) 88%
        );

    transform:
        translateY(calc(var(--closing-scroll) * .14))
        rotate(-25deg);

    opacity: .7;
}


/* =========================================================
   DOTS
   ========================================================= */

.ppr-about-closing__dot {
    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--ppr-sage-leaf);

    opacity: .6;
}


.ppr-about-closing__dot--one {
    left: 20%;
    bottom: 20%;
}


.ppr-about-closing__dot--two {
    right: 21%;
    bottom: 14%;

    width: 10px;
    height: 10px;

    background: var(--ppr-dusty-rose);
}


.ppr-about-closing__dot--three {
    left: 48%;
    top: 14%;

    width: 5px;
    height: 5px;

    background: var(--ppr-champagne-gold);
}


/* =========================================================
   CONTAINER
   ========================================================= */

.ppr-about-closing__container {
    position: relative;

    z-index: 3;

    width: min(
        calc(100% - 40px),
        1100px
    );

    margin-inline: auto;

    text-align: center;
}


/* =========================================================
   META
   ========================================================= */

.ppr-about-closing__meta {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    margin-bottom: 2rem;
}


.ppr-about-closing__number {
    font-size: .72rem;

    font-weight: 800;

    letter-spacing: .16em;

    color: var(--ppr-dusty-rose);
}


.ppr-about-closing__line {
    width: 42px;
    height: 1px;

    background: var(--ppr-warm-taupe);

    opacity: .7;
}


.ppr-about-closing__eyebrow {
    margin: 0;

    font-size: .75rem;

    font-weight: 700;

    letter-spacing: .13em;

    text-transform: uppercase;

    color: var(--ppr-sage-leaf);
}


/* =========================================================
   MAIN STATEMENT
   ========================================================= */

.ppr-about-closing__statement {
    max-width: 850px;

    margin-inline: auto;
}


.ppr-about-closing__small-note {
    margin:
        0
        0
        1.25rem;

    font-size: .82rem;

    font-weight: 600;

    color: var(--ppr-warm-taupe);
}


.ppr-about-closing__title {
    margin: 0;

    font-size:
        clamp(
            2.5rem,
            6vw,
            5.5rem
        );

    line-height: .98;

    letter-spacing: -.055em;

    font-weight: 700;
}


.ppr-about-closing__title span {
    display: block;

    color: var(--ppr-dusty-rose);
}


.ppr-about-closing__text {
    max-width: 650px;

    margin:
        1.8rem
        auto
        0;

    font-size:
        clamp(
            .92rem,
            1.3vw,
            1.05rem
        );

    line-height: 1.8;

    color: var(--ppr-warm-taupe);
}


/* =========================================================
   PAPER NOTE
   ========================================================= */

.ppr-about-closing__paper-note {
    position: relative;

    display: flex;

    align-items: center;

    width: min(
        100%,
        570px
    );

    margin:
        3.5rem
        auto
        0;

    padding:
        20px
        24px;

    background: var(--ppr-autumn-ivory);

    border-radius: 12px;

    box-shadow:
        0 15px 35px
        color-mix(
            in srgb,
            var(--ppr-ink-charcoal) 7%,
            transparent
        );

    transform:
        rotate(-1deg);
}


/* =========================================================
   NOTE PIN
   ========================================================= */

.ppr-about-closing__note-pin {
    position: absolute;

    top: 10px;
    left: 50%;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: var(--ppr-dusty-rose);

    transform: translateX(-50%);

    box-shadow:
        0 7px 0 -4px
        var(--ppr-dusty-rose-dark);
}


/* =========================================================
   NOTE CONTENT
   ========================================================= */

.ppr-about-closing__note-content {
    flex: 1;

    text-align: left;

    padding-left: 12px;
}


.ppr-about-closing__note-label {
    display: block;

    margin-bottom: .3rem;

    font-size: .65rem;

    font-weight: 800;

    letter-spacing: .14em;

    text-transform: uppercase;

    color: var(--ppr-sage-leaf);
}


.ppr-about-closing__note-content p {
    margin: 0;

    font-size: .9rem;

    line-height: 1.5;
}


/* =========================================================
   NOTE CHECK
   ========================================================= */

.ppr-about-closing__note-mark {
    display: grid;

    place-items: center;

    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    background: var(--ppr-dusty-rose);

    color: var(--ppr-warm-porcelain);

    font-size: .72rem;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.ppr-about-closing__actions {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 16px;

    margin-top: 3rem;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.ppr-about-closing__button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 48px;

    padding:
        13px
        22px;

    border-radius: 9px;

    background: var(--ppr-dusty-rose);

    color: var(--ppr-warm-porcelain);

    font-size: .8rem;

    font-weight: 700;

    text-decoration: none;

    transition:
        transform .28s ease,
        background .28s ease;
}


.ppr-about-closing__button:hover {
    transform: translateY(-3px);

    background: var(--ppr-dusty-rose-dark);
}


.ppr-about-closing__button i {
    transition:
        transform .28s ease;
}


.ppr-about-closing__button:hover i {
    transform: translateX(4px);
}


/* =========================================================
   SECONDARY LINK
   ========================================================= */

.ppr-about-closing__secondary {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding:
        13px
        22px;

    border: 1px solid
        color-mix(
            in srgb,
            var(--ppr-dusty-rose) 45%,
            transparent
        );

    border-radius: 9px;

    color: var(--ppr-dusty-rose-dark);

    font-size: .8rem;

    font-weight: 700;

    text-decoration: none;

    transition:
        background .28s ease,
        color .28s ease,
        transform .28s ease;
}


.ppr-about-closing__secondary:hover {
    background: var(--ppr-dusty-rose);

    color: var(--ppr-warm-porcelain);

    transform: translateY(-3px);
}


/* =========================================================
   BOTTOM DETAIL
   ========================================================= */

.ppr-about-closing__bottom {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    margin-top: 4.5rem;
}


.ppr-about-closing__bottom span {
    width: 35px;
    height: 1px;

    background: var(--ppr-warm-taupe);

    opacity: .55;
}


.ppr-about-closing__bottom p {
    margin: 0;

    font-size: .68rem;

    font-weight: 700;

    letter-spacing: .1em;

    text-transform: uppercase;

    color: var(--ppr-warm-taupe);
}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.ppr-about-closing__meta,
.ppr-about-closing__statement,
.ppr-about-closing__paper-note,
.ppr-about-closing__actions,
.ppr-about-closing__bottom {
    opacity: 0;

    transform: translateY(35px);
}


.ppr-about-closing__paper-note {
    transform:
        translateY(35px)
        rotate(-1deg);
}


.ppr-about-closing.is-visible
.ppr-about-closing__meta {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity .6s ease,
        transform .6s ease;
}


.ppr-about-closing.is-visible
.ppr-about-closing__statement {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity .8s ease,
        transform .8s ease;

    transition-delay: 120ms;
}


.ppr-about-closing.is-visible
.ppr-about-closing__paper-note {

    opacity: 1;

    transform:
        translateY(0)
        rotate(-1deg);

    transition:
        opacity .7s ease,
        transform .7s ease;

    transition-delay: 280ms;
}


.ppr-about-closing.is-visible
.ppr-about-closing__actions {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity .7s ease,
        transform .7s ease;

    transition-delay: 400ms;
}


.ppr-about-closing.is-visible
.ppr-about-closing__bottom {

    opacity: 1;

    transform:
        translateY(0);

    transition:
        opacity .6s ease,
        transform .6s ease;

    transition-delay: 520ms;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html.ppr-dark-mode
.ppr-about-closing__paper-note {

    background: var(--ppr-autumn-ivory);
}


html.ppr-dark-mode
.ppr-about-closing__secondary {

    color: var(--ppr-dusty-rose);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) {

    .ppr-about-closing {
        padding-block:
            5rem
            5rem;
    }


    .ppr-about-closing__title {
        font-size:
            clamp(
                2.4rem,
                8vw,
                4rem
            );
    }


    .ppr-about-closing__paper-note {
        margin-top: 3rem;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .ppr-about-closing {
        padding-block:
            4.5rem
            4rem;
    }


    .ppr-about-closing__container {
        width:
            min(
                calc(100% - 28px),
                1100px
            );
    }


    .ppr-about-closing__background-number {
        top: 48%;

        font-size: 13rem;
    }


    .ppr-about-closing__title {
        font-size:
            clamp(
                2.15rem,
                11vw,
                3.2rem
            );
    }


    .ppr-about-closing__text {
        font-size: .88rem;

        line-height: 1.7;
    }


    .ppr-about-closing__paper-note {
        align-items: flex-start;

        padding:
            22px
            17px;

        margin-top: 2.7rem;
    }


    .ppr-about-closing__note-content {
        padding-left: 4px;
    }


    .ppr-about-closing__note-content p {
        font-size: .82rem;
    }


    .ppr-about-closing__actions {
        flex-direction: column;

        width: 100%;

        gap: 10px;

        margin-top: 2.5rem;
    }


    .ppr-about-closing__button,
    .ppr-about-closing__secondary {
        width: 100%;

        max-width: 260px;
    }


    .ppr-about-closing__bottom {
        margin-top: 3.5rem;
    }


    .ppr-about-closing__bottom span {
        width: 20px;
    }


    .ppr-about-closing__bottom p {
        font-size: .6rem;
    }


    .ppr-about-closing__paper--one {
        left: -100px;
    }


    .ppr-about-closing__paper--two {
        right: -100px;
    }


    .ppr-about-closing__paperclip {
        left: 2%;
    }


    .ppr-about-closing__pencil {
        right: -35px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ppr-about-closing__background-number,
    .ppr-about-closing__paper,
    .ppr-about-closing__paperclip,
    .ppr-about-closing__pin,
    .ppr-about-closing__pencil {

        transform: none !important;
    }


    .ppr-about-closing__meta,
    .ppr-about-closing__statement,
    .ppr-about-closing__paper-note,
    .ppr-about-closing__actions,
    .ppr-about-closing__bottom {

        opacity: 1 !important;

        transform: none !important;

        transition: none !important;
    }

}
/* =========================================================
   PAPERLY — THEME HR
   ========================================================= */

.ppr-theme-hr {
    width: 100%;
    height: 1px;

    margin: 0;

    border: 0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(
                in srgb,
                var(--ppr-warm-taupe) 25%,
                transparent
            ) 18%,
            color-mix(
                in srgb,
                var(--ppr-dusty-rose) 45%,
                transparent
            ) 50%,
            color-mix(
                in srgb,
                var(--ppr-warm-taupe) 25%,
                transparent
            ) 82%,
            transparent 100%
        );
}


/* =========================================================
   PAPERLY — BRANDS PAGE  (page-specific, scoped to .ppr-brands-*)
   Typography mirrors the About page: shared Manrope stack
   (--ppr-font-family), 700/800 weights, tight negative tracking,
   dusty-rose accent spans, 0.13em uppercase eyebrows.
   Dark mode = html.ppr-dark-mode, RTL = html.ppr-rtl (shared systems).
   ========================================================= */

.ppr-brands-page{
  --b-line:color-mix(in srgb,var(--ppr-warm-taupe,#B9AAA0) 50%,transparent);
  --b-surface:color-mix(in srgb,var(--ppr-autumn-ivory,#EFE5DA) 78%,var(--ppr-warm-porcelain,#F7F2EC));
  --b-shadow:0 14px 34px -18px rgba(46,41,42,.34),0 2px 6px rgba(46,41,42,.06);
  --b-shadow-up:0 30px 50px -22px rgba(46,41,42,.42),0 6px 14px rgba(46,41,42,.08);
  --b-ease:cubic-bezier(.16,1,.3,1);
  --b-t:420ms;
  --flip:1;
  position:relative;overflow-x:clip;isolation:isolate;
  background:var(--ppr-warm-porcelain,#F7F2EC);color:var(--ppr-ink-charcoal,#2E292A);
}
html.ppr-rtl .ppr-brands-page{--flip:-1}
html.ppr-dark-mode .ppr-brands-page{
  --b-shadow:0 16px 34px -18px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.25);
  --b-shadow-up:0 34px 54px -22px rgba(0,0,0,.65),0 6px 14px rgba(0,0,0,.3);
  --b-surface:color-mix(in srgb,var(--ppr-autumn-ivory,#EFE5DA) 92%,#F4EDE6);
}
.ppr-brands-page *,.ppr-brands-page *::before,.ppr-brands-page *::after{box-sizing:border-box}
.ppr-brands-page section{position:relative;isolation:isolate;overflow-x:clip}
.ppr-brands-page img{display:block;max-width:100%;height:auto}
.ppr-brands-page ul{list-style:none;margin:0;padding:0}
.ppr-brands-page button{font:inherit;color:inherit}
.ppr-brands-container{position:relative;z-index:2;width:min(calc(100% - 48px),var(--ppr-content-width,1280px));margin-inline:auto}

/* ---------- type (About-page system) ---------- */
.ppr-brands-eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 1.25rem;color:var(--ppr-dusty-rose,#A96768);font-size:.74rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.ppr-brands-eyebrow::before{content:"";width:28px;height:2px;border-radius:999px;background:var(--ppr-champagne-gold,#B79A67)}
.ppr-brands-title{margin:0;color:var(--ppr-ink-charcoal,#2E292A);font-size:clamp(3rem,5.2vw,5.4rem);font-weight:700;line-height:1.02;letter-spacing:-.045em;max-width:700px}
.ppr-brands-title span{display:block;color:var(--ppr-dusty-rose,#A96768)}
.ppr-brands-title--lg{font-size:clamp(2.5rem,4.8vw,4.8rem);max-width:820px}
.ppr-brands-title--md{font-size:clamp(2.3rem,4vw,3.9rem)}
.ppr-brands-text{max-width:580px;margin:1.5rem 0 0;color:color-mix(in srgb,var(--ppr-ink-charcoal,#2E292A) 72%,transparent);font-size:.95rem;font-weight:500;line-height:1.8}
.ppr-brands-num{position:absolute;z-index:1;pointer-events:none;user-select:none;color:color-mix(in srgb,var(--ppr-dusty-rose,#A96768) 9%,transparent);font-size:clamp(14rem,30vw,32rem);font-weight:800;line-height:.7;letter-spacing:-.09em}
.ppr-brands-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.1rem}
.ppr-brands-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;border:1.5px solid transparent;font-size:.9rem;font-weight:700;letter-spacing:-.005em;text-decoration:none;cursor:pointer;transition:transform .28s ease,background .28s ease,color .28s ease,box-shadow .28s ease}
.ppr-brands-btn--primary{background:var(--ppr-dusty-rose-dark,#8F5558);color:#fff}
.ppr-brands-btn--primary:hover{background:var(--ppr-dusty-rose,#A96768);transform:translateY(-2px);box-shadow:var(--b-shadow)}
html.ppr-dark-mode .ppr-brands-btn--primary{color:#211D1E}
.ppr-brands-btn--ghost{border-color:var(--ppr-ink-charcoal,#2E292A);color:var(--ppr-ink-charcoal,#2E292A);background:transparent}
.ppr-brands-btn--ghost:hover{background:var(--ppr-ink-charcoal,#2E292A);color:var(--ppr-warm-porcelain,#F7F2EC);transform:translateY(-2px)}
.ppr-brands-btn i{font-size:.8em;transition:transform .28s ease}
.ppr-brands-btn:hover i{transform:translateX(calc(3px * var(--flip)))}
html.ppr-rtl .ppr-brands-btn i.fa-arrow-right,html.ppr-rtl .ppr-brands-showcase__card-cue i,html.ppr-rtl .ppr-brands-showcase__close i,html.ppr-rtl .ppr-brands-showcase__step-btn i{transform:scaleX(-1)}
html.ppr-rtl .ppr-brands-btn:hover i.fa-arrow-right{transform:scaleX(-1) translateX(3px)}
.ppr-brands-page a:focus-visible,.ppr-brands-page button:focus-visible{outline:3px solid var(--ppr-champagne-gold,#B79A67);outline-offset:3px}

/* scroll reveal (script adds .ppr-brands-js; without it everything is visible) */
.ppr-brands-js [data-ppr-reveal]{opacity:0;translate:0 26px;transition:opacity .85s var(--b-ease),translate .85s var(--b-ease);transition-delay:var(--d,0s)}
.ppr-brands-js [data-ppr-reveal].is-in{opacity:1;translate:0 0}

/* =========================================================
   00. PAGE TOKENS
   ========================================================= */

.ppr-brands-page {
    --pb-width: min(calc(100% - 48px), var(--ppr-content-width));
    --pb-ease: cubic-bezier(.16, 1, .3, 1);
    --pb-line: color-mix(in srgb, var(--ppr-warm-taupe) 55%, transparent);
    --pb-muted: color-mix(in srgb, var(--ppr-ink-charcoal) 72%, transparent);
    --pb-soft: color-mix(in srgb, var(--ppr-ink-charcoal) 56%, transparent);
    --pb-flip: 1;

    display: block;
    background: var(--ppr-warm-porcelain);
    color: var(--ppr-ink-charcoal);
}

html.ppr-rtl .ppr-brands-page {
    --pb-flip: -1;
}

.ppr-brands-page img {
    display: block;
    max-width: 100%;
}

.ppr-brands-page ul,
.ppr-brands-page dl {
    list-style: none;
}

.ppr-brands-page :focus-visible {
    outline: 3px solid var(--ppr-dusty-rose);
    outline-offset: 3px;
}

.ppr-brands-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* =========================================================
   01 HERO
   ========================================================= */
.ppr-brands-hero{padding-block:clamp(3.5rem,6vw,5.5rem) clamp(4rem,6vw,6rem)}
.ppr-brands-hero .ppr-brands-num{inset-inline-start:clamp(0px,2vw,40px);inset-block-end:-2rem}
.ppr-brands-hero__grid{display:grid;grid-template-columns:1fr;gap:3.5rem;align-items:center}
.ppr-brands-hero__visual{position:relative;padding-block-end:3.5rem}
.ppr-brands-hero__photo{margin:0;overflow:hidden;border:7px solid var(--b-surface);border-radius:var(--ppr-radius-medium,12px);box-shadow:var(--b-shadow-up)}
.ppr-brands-hero__photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ppr-brands-hero__photo--main{width:88%;rotate:calc(-1.5deg * var(--flip))}
.ppr-brands-hero__photo--sub{position:absolute;z-index:2;inset-inline-end:0;inset-block-end:0;width:42%;rotate:calc(2.5deg * var(--flip))}
.ppr-brands-hero__photo--sub img{aspect-ratio:1;object-fit:cover}
.ppr-brands-hero__tape{position:absolute;z-index:3;inset-block-start:-9px;inset-inline-start:24%;width:82px;height:22px;rotate:-5deg;background:color-mix(in srgb,var(--ppr-champagne-gold,#B79A67) 40%,transparent)}
.ppr-brands-hero__clip{position:absolute;z-index:3;inset-block-start:-12px;inset-inline-end:14%;font-size:1.9rem;color:var(--ppr-champagne-gold,#B79A67);rotate:calc(18deg * var(--flip))}
.ppr-brands-hero__label{position:absolute;z-index:3;inset-inline-start:6%;inset-block-end:1.2rem;display:inline-flex;align-items:center;gap:8px;margin:0;padding:9px 14px;border-radius:999px;background:var(--ppr-warm-porcelain,#F7F2EC);color:var(--ppr-ink-charcoal,#2E292A);box-shadow:var(--b-shadow);font-size:.68rem;font-weight:700}
.ppr-brands-hero__label span{width:7px;height:7px;border-radius:50%;background:var(--ppr-sage-leaf,#747B68)}
@media(min-width:1025px){
  .ppr-brands-hero__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:5rem}
  .ppr-brands-hero__visual{padding-block-end:4rem}
}

/* =========================================================
   03. SECTION 02 — INTERACTIVE 12-BRAND SHOWCASE
   ========================================================= */

.ppr-brands-showcase {
    position: relative;
    padding-block: clamp(4.5rem, 8vw, 7.5rem);
    background: var(--ppr-warm-porcelain);
    border-block-start: 1px solid var(--pb-line);
    scroll-margin-top: var(--ppr-navbar-height);
}

.ppr-brands-showcase__inner {
    width: var(--pb-width);
    margin-inline: auto;
}

/* ---------- Introduction (kept controlled) ---------- */

.ppr-brands-showcase__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    align-items: end;
    gap: clamp(1.5rem, 4vw, 4rem);

    margin-block-end: clamp(2.25rem, 4.5vw, 3.5rem);
}

.ppr-brands-showcase__title {
    max-width: 820px;
    margin: 0;

    font-size: clamp(2.8rem, 5vw, 5rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.04em;
}

.ppr-brands-showcase__title span {
    display: block;
    color: var(--ppr-dusty-rose);
}

.ppr-brands-showcase__lead {
    max-width: 420px;
    margin: 0;

    color: var(--pb-muted);

    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.8;
}

/* ---------- Stage: wall and detail share one space ---------- */

.ppr-brands-showcase__stage {
    position: relative;

    /* room for shadows / scaled cards without clipping */
    margin: -12px;
    padding: 12px;

    overflow: clip;
    scroll-margin-top: calc(var(--ppr-navbar-height) + 12px);
}

/* ---------- The 12-card wall ---------- */

.ppr-brands-showcase__wall {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;

    transition:
        opacity 520ms ease 120ms,
        transform 760ms var(--pb-ease) 120ms,
        visibility 0s linear 0s;
}

.ppr-brands-showcase__item {
    min-width: 0;
}

.ppr-brands-showcase__card {
    position: relative;

    display: block;
    width: 100%;
    height: 100%;

    padding: 8px 8px 0;

    border: 1px solid var(--pb-line);
    border-radius: 8px;

    background: var(--ppr-autumn-ivory);
    color: var(--ppr-ink-charcoal);

    text-align: start;

    box-shadow:
        0 1px 0 color-mix(in srgb, var(--ppr-warm-taupe) 35%, transparent),
        0 16px 26px -22px rgba(46, 41, 42, 0.42);

    transition:
        transform 640ms var(--pb-ease),
        opacity 420ms ease,
        box-shadow 420ms ease,
        border-color 320ms ease;
}

.ppr-brands-showcase__card-media {
    display: block;
    aspect-ratio: 6 / 5;
    overflow: hidden;
    border-radius: 4px;
    background: color-mix(in srgb, var(--ppr-warm-taupe) 30%, transparent);
}

.ppr-brands-showcase__card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform 1000ms var(--pb-ease);
}

.ppr-brands-showcase__card-caption {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;

    padding: 12px 4px 14px;
}

.ppr-brands-showcase__card-name {
    grid-column: 1;

    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.25;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.ppr-brands-showcase__card-category {
    grid-column: 1;
    margin-block-start: 2px;

    color: var(--pb-muted);

    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.35;
}

.ppr-brands-showcase__card-mark {
    grid-column: 2;
    grid-row: 1 / span 2;

    display: grid;
    place-items: center;

    width: 28px;
    height: 28px;

    border: 1px solid var(--pb-line);
    border-radius: 999px;

    color: var(--ppr-dusty-rose);
    font-size: 0.68rem;

    transition:
        background 320ms ease,
        color 320ms ease,
        transform 640ms var(--pb-ease);
}

/* hover preview (classes set by JS for fine pointers) */

.ppr-brands-showcase__stage.is-hovering .ppr-brands-showcase__card:not(.is-hovered) {
    opacity: 0.4;
    transform: scale(0.985);
}

.ppr-brands-showcase__card.is-hovered {
    z-index: 3;
    transform: translateY(-6px) scale(1.035);
    border-color: color-mix(in srgb, var(--ppr-dusty-rose) 55%, var(--pb-line));
    box-shadow:
        0 2px 0 color-mix(in srgb, var(--ppr-warm-taupe) 35%, transparent),
        0 34px 46px -26px rgba(46, 41, 42, 0.55);
}

.ppr-brands-showcase__card.is-hovered .ppr-brands-showcase__card-media img {
    transform: scale(1.09);
}

.ppr-brands-showcase__card.is-hovered .ppr-brands-showcase__card-mark {
    background: var(--ppr-dusty-rose-dark);
    border-color: var(--ppr-dusty-rose-dark);
    color: var(--ppr-warm-porcelain);
    transform: rotate(90deg);
}

.ppr-brands-showcase__card:focus-visible {
    z-index: 3;
}

/* ---------- Detail state ---------- */

.ppr-brands-showcase__detail {
    position: absolute;
    inset-block-start: 12px;
    inset-inline: 12px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(18px);

    padding: clamp(12px, 1.8vw, 20px);

    border: 1px solid var(--pb-line);
    border-radius: 10px;

    background: var(--ppr-autumn-ivory);

    transition:
        opacity 420ms ease,
        transform 760ms var(--pb-ease),
        visibility 0s linear 760ms;
}

.ppr-brands-showcase__detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 2rem);
}

/* ---------- State switch: wall retreats, detail takes over ---------- */

.ppr-brands-showcase__stage:not([data-state="wall"]) .ppr-brands-showcase__wall {
    position: absolute;
    inset-block-start: 12px;
    inset-inline: 12px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.965) translateY(10px);

    transition:
        opacity 420ms ease,
        transform 760ms var(--pb-ease),
        visibility 0s linear 420ms;
}

.ppr-brands-showcase__stage:not([data-state="wall"]) .ppr-brands-showcase__detail {
    position: relative;
    inset: auto;

    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;

    transition:
        opacity 480ms ease 140ms,
        transform 760ms var(--pb-ease) 140ms,
        visibility 0s linear 0s;
}

/* ---------- Detail image ---------- */

.ppr-brands-showcase__detail-image {
    position: relative;
    overflow: hidden;

    aspect-ratio: 4 / 3;
    border-radius: 6px;

    background: color-mix(in srgb, var(--ppr-warm-taupe) 30%, transparent);
}

.ppr-brands-showcase__detail-img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;

    opacity: 0;
    transform: scale(1.07);

    transition:
        opacity 700ms ease,
        transform 1400ms var(--pb-ease);
}

.ppr-brands-showcase__detail-img.is-current {
    opacity: 1;
    transform: scale(1);
}

.ppr-brands-showcase__detail-count {
    position: absolute;
    inset-block-end: 14px;
    inset-inline-start: 14px;

    padding: 6px 11px;
    border-radius: 999px;

    background: color-mix(in srgb, var(--ppr-warm-porcelain) 90%, transparent);
    color: var(--ppr-ink-charcoal);

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

/* ---------- Detail content ---------- */

.ppr-brands-showcase__detail-content {
    container-type: inline-size;

    display: flex;
    flex-direction: column;
    gap: 1.25rem;

    min-width: 0;
    padding: 0.25rem 0.25rem 0.5rem;
}

.ppr-brands-showcase__detail-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

.ppr-brands-showcase__back {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-height: 40px;
    padding: 8px 14px;

    border: 1px solid var(--pb-line);
    border-radius: 999px;

    color: var(--ppr-ink-charcoal);

    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    transition:
        background 280ms ease,
        color 280ms ease,
        border-color 280ms ease;
}

.ppr-brands-showcase__back i {
    font-size: 0.7rem;
    transform: scaleX(var(--pb-flip));
}

.ppr-brands-showcase__back:hover {
    background: var(--ppr-ink-charcoal);
    border-color: var(--ppr-ink-charcoal);
    color: var(--ppr-warm-porcelain);
}

.ppr-brands-showcase__hint {
    margin: 0;

    color: var(--pb-soft);

    font-size: 0.78rem;
    font-weight: 600;

    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease;
}

.ppr-brands-showcase__stage[data-state="preview"] .ppr-brands-showcase__hint {
    opacity: 1;
    visibility: visible;
}

.ppr-brands-showcase__detail-category {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin: 0.5rem 0 0;

    color: var(--ppr-dusty-rose);

    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.ppr-brands-showcase__detail-category::before {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 999px;
    background: var(--ppr-champagne-gold);
}

.ppr-brands-showcase__detail-name {
    margin: -0.5rem 0 0;

    font-size: clamp(2.4rem, 13cqi, 4.6rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.04em;
    overflow-wrap: break-word;
}

.ppr-brands-showcase__detail-name:focus {
    outline: none;
}

.ppr-brands-showcase__detail-desc {
    max-width: 520px;
    margin: 0;

    color: var(--pb-muted);

    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.8;
}

.ppr-brands-showcase__specs-label {
    margin: 0 0 0.5rem;

    color: var(--ppr-sage-leaf);

    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.ppr-brands-showcase__specs-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;

    max-width: 520px;
}

.ppr-brands-showcase__specs-list li {
    padding-block: 0.65rem;
    border-block-start: 1px solid var(--pb-line);

    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.4;
}

.ppr-brands-showcase__detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-block-start: 0.35rem;
}

/* staggered content reveal (open / preview) */

.ppr-brands-showcase__reveal {
    opacity: 0;
    transform: translateY(14px);

    transition:
        opacity 420ms ease,
        transform 700ms var(--pb-ease);
}

.ppr-brands-showcase__stage:not([data-state="wall"]) .ppr-brands-showcase__reveal {
    opacity: 1;
    transform: none;

    transition-delay: calc(240ms + var(--i, 0) * 70ms);
}

/* brand switch: current copy exits quickly, new copy re-enters */

.ppr-brands-showcase__stage:not([data-state="wall"]) .ppr-brands-showcase__detail-content.is-swapping .ppr-brands-showcase__reveal {
    opacity: 0;
    transform: translateY(8px);

    transition-duration: 180ms;
    transition-delay: 0ms;
}

/* ---------- Brand rail (switch brands while open) ---------- */

.ppr-brands-showcase__rail {
    position: relative;
    display: flex;
    gap: 8px;

    margin-block-start: clamp(1rem, 2vw, 1.5rem);
    padding-block-start: clamp(1rem, 2vw, 1.25rem);
    border-block-start: 1px solid var(--pb-line);

    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

.ppr-brands-showcase__rail-item {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    gap: 10px;

    width: 168px;
    padding: 6px 10px 6px 6px;

    border: 1px solid transparent;
    border-radius: 8px;

    color: var(--pb-muted);
    text-align: start;

    transition:
        background 280ms ease,
        border-color 280ms ease,
        color 280ms ease,
        opacity 280ms ease;
}

.ppr-brands-showcase__rail-item img {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 5px;
}

.ppr-brands-showcase__rail-name {
    min-width: 0;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.25;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.ppr-brands-showcase__rail-item:hover {
    background: color-mix(in srgb, var(--ppr-warm-porcelain) 60%, transparent);
    color: var(--ppr-ink-charcoal);
}

.ppr-brands-showcase__rail-item[aria-current="true"] {
    border-color: var(--ppr-dusty-rose);
    background: var(--ppr-warm-porcelain);
    color: var(--ppr-ink-charcoal);
}


/* =========================================================
   03 QUALITY / WORKSPACE STORY
   ========================================================= */
.ppr-brands-quality{padding-block:clamp(4.5rem,8vw,7.5rem)}
.ppr-brands-quality .ppr-brands-num{inset-inline-start:clamp(0px,2vw,40px);inset-block-end:-1rem}
.ppr-brands-quality__grid{display:grid;grid-template-columns:1fr;gap:3.5rem;align-items:center}
.ppr-brands-quality__visual{position:relative;padding-inline-end:clamp(0px,9vw,72px);padding-block-end:3rem}
.ppr-brands-quality__main{margin:0;overflow:hidden;border-radius:var(--ppr-radius-large,16px);box-shadow:var(--b-shadow-up)}
.ppr-brands-quality__main img{width:100%;aspect-ratio:4/5;object-fit:cover}
.ppr-brands-quality__inset{position:absolute;margin:0;inset-inline-end:0;inset-block-end:0;width:48%;overflow:hidden;border:7px solid var(--ppr-warm-porcelain,#F7F2EC);border-radius:var(--ppr-radius-medium,12px);box-shadow:var(--b-shadow-up)}
.ppr-brands-quality__inset img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ppr-brands-quality__list{margin-block-start:2.2rem!important;border-block-start:1px solid var(--b-line)}
.ppr-brands-quality__list li{display:grid;grid-template-columns:44px 1fr;gap:1.1rem;align-items:start;padding-block:1.2rem;border-block-end:1px solid var(--b-line)}
.ppr-brands-quality__list i{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--ppr-sage-leaf,#747B68) 18%,transparent);color:var(--ppr-sage-leaf,#747B68);font-size:.95rem}
.ppr-brands-quality__list h3{margin:0 0 .25rem;font-size:1.12rem;font-weight:800;letter-spacing:-.03em}
.ppr-brands-quality__list p{margin:0;color:color-mix(in srgb,var(--ppr-ink-charcoal,#2E292A) 70%,transparent);font-size:.9rem;font-weight:500;line-height:1.65}
@media(min-width:1025px){.ppr-brands-quality__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6rem}}


/* =========================================================
   REDUCED MOTION — interactions stay, movement goes
   ========================================================= */
@media(prefers-reduced-motion:reduce){
  .ppr-brands-page{--b-t:1ms}
  .ppr-brands-js [data-ppr-reveal]{opacity:1;translate:0 0;transition:none}
  .ppr-brands-page *,.ppr-brands-page *::before,.ppr-brands-page *::after{transition-duration:1ms!important;transition-delay:0s!important}
  .ppr-brands-showcase__detail-image img{scale:1}
  .ppr-brands-showcase__card:hover,.ppr-brands-showcase__card:focus-visible{transform:none}
  .ppr-brands-showcase__card:hover .ppr-brands-showcase__card-media img{transform:none}
}

/* tablet: keep the quality story quieter than the showcase */
@media(min-width:560px) and (max-width:1024px){
  .ppr-brands-quality__main img{aspect-ratio:16/11}
  .ppr-brands-quality__visual{padding-inline-end:0}
  .ppr-brands-quality__inset{width:38%}
}

@media(max-width:1024px){
  .ppr-brands-showcase__detail-image{aspect-ratio:auto;max-height:none;height:clamp(240px,52vw,460px)}
}

/* =========================================================
   05. SECTION 04 — FINAL CTA
   ========================================================= */

.ppr-brands-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding-block: clamp(4.5rem, 8vw, 7.5rem);

    background:
        color-mix(
            in srgb,
            var(--ppr-sage-leaf) 20%,
            var(--ppr-warm-porcelain)
        );
}

.ppr-brands-cta__container {
    width: var(--pb-width);
    margin-inline: auto;

    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: end;
    gap: clamp(2rem, 5vw, 5rem);
}

.ppr-brands-cta__title {
    margin: 0;

    font-size: clamp(2.5rem, 6vw, 5.5rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.ppr-brands-cta__title span {
    display: block;
    color: var(--ppr-dusty-rose-dark);
}

html.ppr-dark-mode .ppr-brands-cta__title span {
    color: var(--ppr-dusty-rose);
}

.ppr-brands-cta__text {
    max-width: 440px;
    margin: 0;

    color: var(--pb-muted);

    font-size: clamp(0.92rem, 1.3vw, 1.05rem);
    font-weight: 500;
    line-height: 1.8;
}

.ppr-brands-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-block-start: 2rem;
}

.ppr-brands-cta .ppr-brands-btn--ghost {
    border-color: var(--ppr-ink-charcoal);
    color: var(--ppr-ink-charcoal);
}

.ppr-brands-cta .ppr-brands-btn--ghost:hover {
    background: var(--ppr-ink-charcoal);
    color: var(--ppr-warm-porcelain);
}

/* layered sheets, same motif as the logo mark */

.ppr-brands-cta__sheet {
    position: absolute;
    z-index: -1;
    inset-block-start: -40px;
    width: clamp(160px, 20vw, 300px);
    aspect-ratio: 0.86;
    border-radius: 12px;
    pointer-events: none;
}

.ppr-brands-cta__sheet--one {
    inset-inline-end: clamp(1.5rem, 6vw, 6rem);
    background: color-mix(in srgb, var(--ppr-sage-leaf) 40%, transparent);
    transform: rotate(calc(6deg * var(--pb-flip)));
}

.ppr-brands-cta__sheet--two {
    inset-inline-end: clamp(3.5rem, 9vw, 9rem);
    background: color-mix(in srgb, var(--ppr-dusty-rose) 30%, transparent);
    transform: rotate(calc(-3deg * var(--pb-flip)));
}


/* =========================================================
   06. RESPONSIVE
   ========================================================= */

/* ---- ≥ 768: 3-column wall, roomier detail ---- */

@media (min-width: 768px) {

    .ppr-brands-showcase__wall {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .ppr-brands-showcase__item:nth-child(3n + 2) {
        margin-block-start: 26px;
    }

    .ppr-brands-showcase__detail-image {
        aspect-ratio: 16 / 9;
    }

    .ppr-brands-showcase__detail-content {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        align-content: start;
        column-gap: 2.5rem;
        row-gap: 1.25rem;
    }

    .ppr-brands-showcase__detail-top {
        grid-column: 1 / -1;
    }

    .ppr-brands-showcase__detail-category,
    .ppr-brands-showcase__detail-name,
    .ppr-brands-showcase__detail-desc {
        grid-column: 1;
    }

    .ppr-brands-showcase__specs,
    .ppr-brands-showcase__detail-actions {
        grid-column: 2;
    }

    .ppr-brands-showcase__specs {
        grid-row: 2 / span 2;
        align-self: start;
        margin-block-start: 1.75rem;
    }

    .ppr-brands-showcase__detail-actions {
        grid-row: 4;
        align-self: start;
    }
}

/* ---- ≥ 1025: editorial wall, immersive two-part detail ---- */

@media (min-width: 1025px) {

    .ppr-brands-showcase__wall {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 22px;
    }

    .ppr-brands-showcase__item:nth-child(3n + 2) {
        margin-block-start: 0;
    }

    .ppr-brands-showcase__item:nth-child(4n + 2),
    .ppr-brands-showcase__item:nth-child(4n + 4) {
        margin-block-start: 34px;
    }

    .ppr-brands-showcase__detail-layout {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
        gap: clamp(1.75rem, 3.5vw, 3.5rem);
    }

    .ppr-brands-showcase__detail-image {
        aspect-ratio: auto;
        min-height: clamp(600px, 50vw, 740px);
        height: 100%;
    }

    .ppr-brands-showcase__detail-content {
        display: flex;
        padding: 0.75rem 0;
        padding-inline-end: 0.5rem;
    }

    .ppr-brands-showcase__specs,
    .ppr-brands-showcase__detail-actions {
        grid-column: auto;
        grid-row: auto;
        margin-block-start: 0;
    }

    .ppr-brands-showcase__detail-actions {
        margin-block-start: auto;
    }

    .ppr-brands-showcase__rail {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        overflow: visible;
    }

    .ppr-brands-showcase__rail-item {
        width: auto;
    }
}

/* ---- ≤ 1024: hero recomposes ---- */

@media (max-width: 1024px) {

    .ppr-brands-hero__container {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        gap: 3.5rem;
    }

    .ppr-brands-hero__content {
        max-width: 640px;
    }

    .ppr-brands-hero__title {
        font-size: clamp(3rem, 7.4vw, 4.6rem);
    }

    .ppr-brands-hero__visual {
        width: min(100%, 720px);
        margin-inline-start: 1.5rem;
        margin-inline-end: auto;
    }

    .ppr-brands-showcase__intro {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .ppr-brands-quality__container,
    .ppr-brands-cta__container {
        grid-template-columns: minmax(0, 1fr);
    }

    .ppr-brands-quality__media {
        max-width: 640px;
    }

    .ppr-brands-quality__media img {
        aspect-ratio: 4 / 3.4;
    }

    .ppr-brands-quality__note {
        inset-inline-end: 1rem;
    }

    .ppr-brands-cta__container {
        align-items: start;
    }
}

/* ---- ≤ 767: phones ---- */

@media (max-width: 767px) {

    .ppr-brands-hero {
        padding-block-start: 1.5rem;
    }

    .ppr-brands-hero__title {
        font-size: clamp(2.65rem, 12.5vw, 4rem);
    }

    .ppr-brands-hero__actions .ppr-brands-btn,
    .ppr-brands-cta__actions .ppr-brands-btn {
        flex: 1 1 100%;
    }

    .ppr-brands-hero__visual {
        margin-inline-start: 0.5rem;
        margin-inline-end: 0.75rem;
    }

    .ppr-brands-hero__figure--inset {
        inset-inline-start: -4%;
        width: 40%;
        border-width: 5px;
    }

    .ppr-brands-showcase__title {
        font-size: clamp(2.3rem, 11vw, 3.2rem);
    }

    .ppr-brands-showcase__card-name {
        font-size: 0.8rem;
        letter-spacing: 0.04em;
    }

    .ppr-brands-showcase__card-category {
        font-size: 0.72rem;
    }

    .ppr-brands-showcase__card-mark {
        display: none;
    }

    .ppr-brands-showcase__detail {
        padding: 10px;
    }

    .ppr-brands-showcase__detail-desc {
        font-size: 0.9rem;
    }

    .ppr-brands-showcase__detail-actions .ppr-brands-btn {
        flex: 1 1 100%;
    }

    .ppr-brands-quality__title {
        font-size: clamp(2.3rem, 10.5vw, 3.2rem);
    }

    .ppr-brands-quality__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.35rem;
    }

    .ppr-brands-quality__note {
        position: static;
        max-width: none;
        margin-block-start: 0.75rem;
    }

    .ppr-brands-cta__title {
        font-size: clamp(2.3rem, 11.5vw, 3.6rem);
    }

    .ppr-brands-cta__sheet {
        opacity: 0.6;
    }
}

@media (max-width: 360px) {

    .ppr-brands-hero__title {
        font-size: 2.3rem;
    }

    .ppr-brands-showcase__specs-list {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* =========================================================
   07. REDUCED MOTION — keep the interaction, drop the travel
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ppr-brands-page *,
    .ppr-brands-page *::before,
    .ppr-brands-page *::after {
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        animation-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .ppr-brands-showcase__card.is-hovered,
    .ppr-brands-showcase__stage.is-hovering .ppr-brands-showcase__card:not(.is-hovered) {
        transform: none;
    }

    .ppr-brands-showcase__card.is-hovered .ppr-brands-showcase__card-media img,
    .ppr-brands-showcase__detail-img {
        transform: none;
    }
}
/* =========================================================
   BRANDS PAGE — HERO + CTA BUTTONS MATCH NAVBAR "BULK ENQUIRY"
   ========================================================= */
.ppr-brands-page .ppr-brands-actions .ppr-brands-btn,
.ppr-brands-page .ppr-brands-cta__actions .ppr-brands-btn {
    min-height: 42px;
    padding: 0 18px;
    gap: 8px;
    border: 0;
    border-radius: var(--ppr-radius-small);
    background: var(--ppr-dusty-rose);
    color: var(--ppr-warm-porcelain);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: normal;
    white-space: nowrap;
    box-shadow: 0 7px 18px rgba(169, 103, 104, 0.18);
    transition:
        background-color var(--ppr-transition-fast),
        transform var(--ppr-transition-fast),
        box-shadow var(--ppr-transition-fast);
}

.ppr-brands-page .ppr-brands-actions .ppr-brands-btn:hover,
.ppr-brands-page .ppr-brands-cta__actions .ppr-brands-btn:hover {
    background: var(--ppr-dusty-rose-dark);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(169, 103, 104, 0.25);
}

/* dark mode — same as the navbar button */
html.ppr-dark-mode .ppr-brands-page .ppr-brands-actions .ppr-brands-btn,
html.ppr-dark-mode .ppr-brands-page .ppr-brands-cta__actions .ppr-brands-btn {
    color: #211D1E;
    box-shadow: 0 8px 20px rgba(196, 129, 130, 0.16);
}


/* =========================================================
   BRANDS PAGE — CTA SECTION CENTERED
   ========================================================= */
.ppr-brands-page .ppr-brands-cta__container {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    text-align: center;
}

.ppr-brands-page .ppr-brands-cta__title {
    text-align: center;
}

.ppr-brands-page .ppr-brands-cta__aside {
    width: 100%;
    text-align: center;
}

.ppr-brands-page .ppr-brands-cta__text {
    max-width: 520px;
    margin-inline: auto;
    text-align: center;
}

.ppr-brands-page .ppr-brands-cta__actions {
    justify-content: center;
}

/* phones: keep buttons their normal navbar size, centered,
   instead of stretching to full width */
@media (max-width: 767px) {
    .ppr-brands-page .ppr-brands-cta__actions .ppr-brands-btn {
        flex: 0 1 auto;
    }
}
/* =========================================================
   BRANDS SECTION 02 — transferred section polish
   ========================================================= */
.ppr-brands-showcase__section-num{
    position:absolute;
    z-index:0;
    inset-block-start:-.02em;
    inset-inline-end:clamp(0px,2vw,40px);
    pointer-events:none;
    user-select:none;
    color:color-mix(in srgb,var(--ppr-dusty-rose,#A96768) 9%,transparent);
    font-size:clamp(14rem,30vw,32rem);
    font-weight:800;
    line-height:.7;
    letter-spacing:-.09em;
}
.ppr-brands-showcase__intro,
.ppr-brands-showcase__stage{
    position:relative;
    z-index:2;
}
.ppr-brands-showcase__wall{
    align-items:stretch;
}
.ppr-brands-showcase__item{
    display:flex;
    min-height:0;
}
.ppr-brands-showcase__card{
    min-height:100%;
}

@media (min-width:1025px){
    .ppr-brands-showcase__detail-image{
        height:70vh;
        min-height:0;
        max-height:760px;
        aspect-ratio:auto;
    }
    .ppr-brands-showcase__detail-layout{
        min-height:70vh;
    }
    .ppr-brands-showcase__detail-content{
        min-height:70vh;
    }
}

@media (max-width:1024px){
    .ppr-brands-showcase__section-num{
        inset-inline-end:12px;
    }
}

@media (max-width:767px){
    .ppr-brands-showcase__section-num{
        font-size:clamp(9rem,38vw,15rem);
        inset-block-start:1.2rem;
        inset-inline-end:-.05em;
    }
    .ppr-brands-showcase__detail-image{
        height:60vh;
        min-height:320px;
        max-height:620px;
    }
}

/* =========================================================
   PAPERLY BRANDS — SECTION 02 FINAL POLISH
   Equal cards + centered intro + richer motion
   ========================================================= */

/* Keep every brand tile on one perfectly even grid. */
.ppr-brands-showcase__wall{
    grid-auto-rows: 1fr;
    align-items: stretch;
}

.ppr-brands-showcase__item,
.ppr-brands-showcase__card{
    height: 100%;
}

/* Remove the editorial stagger so all 12 boxes line up exactly. */
@media (min-width:768px){
    .ppr-brands-showcase__item:nth-child(3n + 2),
    .ppr-brands-showcase__item:nth-child(4n + 2),
    .ppr-brands-showcase__item:nth-child(4n + 4){
        margin-block-start:0;
    }
}

/* Section 02 content is centered as one composition. */
.ppr-brands-showcase__intro{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1.25rem;
    text-align:center;
    margin-inline:auto;
    max-width:1100px;
}

.ppr-brands-showcase__intro > div{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
}

.ppr-brands-showcase__intro .ppr-brands-eyebrow{
    justify-content:center;
    margin-inline:auto;
}

.ppr-brands-showcase__title{
    max-width:900px;
    margin-inline:auto;
    text-align:center;
}

.ppr-brands-showcase__lead{
    max-width:680px;
    margin-inline:auto;
    text-align:center;
}

/* The large 02 remains decorative, but now gently floats. */
.ppr-brands-showcase__section-num{
    position:absolute;
    z-index:-1;
    inset-block-start:-1.5rem;
    inset-inline-end:clamp(.5rem,3vw,3rem);
    pointer-events:none;
    user-select:none;
    color:color-mix(in srgb,var(--ppr-dusty-rose,#A96768) 9%,transparent);
    font-size:clamp(14rem,30vw,32rem);
    font-weight:800;
    line-height:.7;
    letter-spacing:-.09em;
    animation:pprBrandsNumberFloat 8s ease-in-out infinite;
}

/* Richer card motion without changing the clean layout. */
.ppr-brands-showcase__card{
    overflow:hidden;
    transform:translateZ(0);
}

.ppr-brands-showcase__card::after{
    content:"";
    position:absolute;
    z-index:4;
    inset-block:0;
    inset-inline-start:-55%;
    width:34%;
    pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
    transform:skewX(-18deg);
    opacity:0;
}

.ppr-brands-showcase__item.is-in .ppr-brands-showcase__card::after{
    animation:pprBrandsCardShine 1.35s cubic-bezier(.16,1,.3,1) both;
    animation-delay:calc(var(--d,0s) + .35s);
}

.ppr-brands-showcase__card-media{
    position:relative;
    aspect-ratio:4 / 3;
}

.ppr-brands-showcase__card-media::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 35%,transparent 65%,rgba(46,41,42,.08));
    opacity:.7;
    transition:opacity .5s ease;
}

.ppr-brands-showcase__card:hover .ppr-brands-showcase__card-media::after,
.ppr-brands-showcase__card:focus-visible .ppr-brands-showcase__card-media::after{
    opacity:1;
}

.ppr-brands-showcase__card-caption{
    min-height:74px;
}

/* A soft breathing lift makes the wall feel alive after entering. */
.ppr-brands-js .ppr-brands-showcase__item.is-in .ppr-brands-showcase__card{
    animation:pprBrandsCardFloat 6s ease-in-out infinite;
    animation-delay:calc(var(--d,0s) + 1.1s);
}

.ppr-brands-js .ppr-brands-showcase__item.is-in:nth-child(3n+2) .ppr-brands-showcase__card{
    animation-delay:calc(var(--d,0s) + 1.45s);
}

.ppr-brands-js .ppr-brands-showcase__item.is-in:nth-child(3n) .ppr-brands-showcase__card{
    animation-delay:calc(var(--d,0s) + 1.8s);
}

/* Make the open brand image genuinely immersive at desktop sizes. */
@media (min-width:1025px){
    .ppr-brands-showcase__detail-image{
        min-height:0;
        height:min(70vh,900px);
        aspect-ratio:auto;
    }
}

@keyframes pprBrandsNumberFloat{
    0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
    50%{transform:translate3d(0,12px,0) rotate(-1deg)}
}

@keyframes pprBrandsCardShine{
    0%{left:-55%;opacity:0}
    12%{opacity:1}
    48%{opacity:1}
    100%{left:125%;opacity:0}
}

@keyframes pprBrandsCardFloat{
    0%,100%{translate:0 0}
    50%{translate:0 -3px}
}

@media (max-width:767px){
    .ppr-brands-showcase__intro{
        margin-block-end:2rem;
    }
    .ppr-brands-showcase__section-num{
        inset-block-start:0;
        font-size:clamp(10rem,48vw,17rem);
    }
}

@media (prefers-reduced-motion:reduce){
    .ppr-brands-showcase__section-num,
    .ppr-brands-js .ppr-brands-showcase__item.is-in .ppr-brands-showcase__card,
    .ppr-brands-showcase__item.is-in .ppr-brands-showcase__card::after{
        animation:none!important;
    }
}

/* =========================================================
   PAPERLY — BACK TO TOP
   Appears after the page hero has been scrolled past.
   ========================================================= */
.ppr-back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(20, 20, 20, 0.14);
  border-radius: 50%;
  background: #fff;
  color: #111;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease, box-shadow .22s ease;
}

.ppr-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.ppr-back-to-top:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.ppr-back-to-top:focus-visible {
  outline: 3px solid rgba(17, 17, 17, 0.28);
  outline-offset: 3px;
}

.ppr-back-to-top__icon {
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}

@media (max-width: 575px) {
  .ppr-back-to-top {
    right: 16px;
    bottom: 16px;
    width: 42px;
    height: 42px;
  }
}


/* =========================================================
   PAPERLY — RESPONSIVE NAVBAR FIX
   Keep the global navbar pinned on tablet/mobile across every
   page. The body offset preserves the original document flow
   so hero/content sections are not hidden underneath the header.
   ========================================================= */

@media (max-width: 1023px) {
    body {
        padding-top: var(--ppr-navbar-height);
    }

    .ppr-navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 5000 !important;
    }
}


/* Account branch sorting: three-branch layout (no head office card) */
.corp-branch-destinations{
  top:45px;
  width:180px;
  display:grid;
  grid-template-rows:repeat(3, minmax(66px, auto));
  gap:12px;
}
@media (min-width:621px){
  .corp-branch-package.pkg-1{left:9%;top:55px}
  .corp-branch-package.pkg-2{left:38%;top:155px}
  .corp-branch-package.pkg-3{left:68%;top:255px}
}
@media (max-width:620px){
  .corp-branch-wall{min-height:500px}
  .corp-branch-package.pkg-1{left:6%;top:42px}
  .corp-branch-package.pkg-2{left:38%;top:138px}
  .corp-branch-package.pkg-3{left:6%;top:234px}
  .corp-branch-destinations{
    left:6%;right:6%;top:320px;width:auto;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:none;gap:8px;
  }
  .corp-destination{min-height:68px;padding:9px 8px}
}
@media (max-width:480px){
  .corp-branch-wall{min-height:585px}
  .corp-branch-destinations{
    top:320px;
    grid-template-columns:1fr;
    gap:8px;
  }
  .corp-destination{min-height:58px}
  .corp-branch-message{bottom:15px}
}

/* =========================================================
   PAPERLY — FINAL RESPONSIVE HEADER / SIDE MENU OVERRIDE
   Keep the account page and every other page on the exact same
   mobile/tablet navigation behavior.
   ========================================================= */
@media (max-width: 1023px) {
    html {
        scroll-padding-top: var(--ppr-navbar-height);
    }

    body {
        padding-top: var(--ppr-navbar-height) !important;
    }

    .ppr-navbar,
    body .ppr-navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        width: 100% !important;
        height: var(--ppr-navbar-height) !important;
        margin: 0 !important;
        z-index: 5000 !important;
    }

    .ppr-navbar__mobile-actions {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .ppr-navbar__menu-button {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: 0 0 auto;
    }

    .ppr-mobile-overlay {
        position: fixed !important;
        inset: 0 !important;
        z-index: 5998 !important;
    }

    .ppr-mobile-menu {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        z-index: 5999 !important;
        visibility: hidden;
    }

    .ppr-mobile-menu.is-open {
        visibility: visible !important;
        transform: translateX(0) !important;
    }
}

@media (max-width: 767px) {
    .ppr-navbar__mobile-actions {
        display: flex !important;
    }

    .ppr-navbar__menu-button {
        display: inline-flex !important;
        flex-direction: column;
        padding-top: 8px;
    }

    .ppr-mobile-menu {
        width: min(91vw, 430px) !important;
    }
}