/* ==========================================================================
   new-designs.css
   Stylesheet for the new "Responsibility" page (and future redesign pages).

   Conventions
   - All page-specific rules are scoped under `.new-designs` to avoid colliding
     with the existing main.css / Bootstrap styles. The shared mobile header
     menu (§1) is the one intentional exception — it is linked on every page.
   - BEM-style `rp-` class names; 4-space indentation.
   - Each UI section below has its own divider and keeps its responsive rules
     co-located, EXCEPT the three global mobile layers (§15–§17) which live at
     the end and intentionally rely on source order to win the cascade — do not
     move them above the per-section rules they override.

   Table of contents
     §1  Header & navigation (incl. mobile burger menu)
     §2  Global typography
     §3  Hero
     §4  Section base & shared body/label type
     §5  Document cards
     §6  Compliance — two-column intro + 6-block process grid
     §7  Responsibility Built Into the Process — checklist + image collage
     §8  The Right Questions, Asked Early — cup/pen collage
     §9  Supplier Governance — blocks + image
     §10 Recognised Standards & Accreditations — logo rows
     §11 Evidence Behind Every Claim — copy, bag image, 4 blocks
     §12 Confidence for Every Team Involved — icon rows
     §13 Creative Merchandise — intro + gallery slider
     §14 Planning a campaign — contact form
     §15 Responsive utilities (mobile/desktop line-breaks, hide helpers)
     §16 Mobile — uniform section rhythm (global overrides)
     §17 Mobile — typography tokens + text/area rhythm (global overrides)
   ========================================================================== */

/* --------------------------------------------------------------------------
   §1  Header & navigation
   - On the new-design pages there is no dark hero or scroll-spy, so keep the
     fixed nav permanently visible (rather than revealing it on scroll).
   -------------------------------------------------------------------------- */
.new-designs header {
    display: block;
    top: 0;
}

/* Nav links — these live in an inline <style> block on the other pages; kept
   here so the new-design pages render the menu correctly (spacing, colours,
   and hiding the decorative "Our Brands" pseudo-element lines). */
.new-designs .insights-link {
    color: #fff;
    text-decoration: none;
    font-size: inherit;
    font-weight: inherit;
    text-transform: uppercase;
    letter-spacing: inherit;
    margin-right: 15px;
    transition: opacity 0.2s;
}

.new-designs .insights-link:hover {
    opacity: 0.7;
    text-decoration: none;
    color: #fff;
}

.new-designs header.black .insights-link {
    color: #111;
}

.new-designs .open-menu::before,
.new-designs .open-menu::after {
    display: none !important;
}

/* Mobile controls (Get-in-touch CTA + burger) — GLOBAL (not .new-designs
   scoped): this stylesheet is linked on every page so all headers get the
   same mobile menu. Hidden on desktop. No Bootstrap d-flex on this element:
   its `display !important` would override these show/hide rules. */
header .rp-mobile-nav {
    display: none;
    align-items: center;
    gap: 16px;
}

header .rp-mobile-cta {
    display: inline-block;
    padding: 12px 18px;
    border: 1px solid #fff;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

header.black .rp-mobile-cta {
    border-color: #000;
    color: #000;
}

header .rp-mobile-cta:hover {
    background: #000;
    color: #fff;
    text-decoration: none;
}

header .rp-burger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

header .rp-burger span {
    display: block;
    width: 100%;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.2s;
}

header.black .rp-burger span {
    background: #000;
}

/* Burger → X when the menu is open */
header .rp-burger.is-active span:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}

header .rp-burger.is-active span:nth-child(2) {
    opacity: 0;
}

header .rp-burger.is-active span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}

@media (max-width: 768px) {
    /* Swap the inline links for the burger + CTA. The !importants are needed
       because .header-right carries Bootstrap's d-flex (display:flex !important). */
    header .rp-mobile-nav {
        display: flex;
    }

    header .header-right {
        display: none !important;
    }

    /* Burger reveals the links as a full-width dropdown below the header */
    header.rp-nav-open .header-right {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        padding: 8px 20px 20px;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    }

    header.rp-nav-open .header-right .insights-link,
    header.rp-nav-open .header-right .open-menu {
        width: 100%;
        margin: 0;
        padding: 12px 0;
        font-size: 16px !important;
        color: #111;
    }

    /* Show the full "Our Brands" wording in the dropdown */
    header.rp-nav-open .header-right .our-text {
        display: inline;
    }

    .new-designs header .logo img {
        width: 120px !important;
    }
}

/* --------------------------------------------------------------------------
   §2  Global typography (page-wide)
   Every heading on the page shares a 1.2 line height. (Kept to headings only;
   a global `p` rule would also restyle the shared header/footer copy, so body
   text is defined per-section below.)
   -------------------------------------------------------------------------- */
.new-designs h1,
.new-designs h2,
.new-designs h3,
.new-designs h4,
.new-designs h5,
.new-designs h6 {
    line-height: 1.2;
}

/* --------------------------------------------------------------------------
   §3  Hero
   Built exactly like the Rocket Bags gallery hero (css/gallery.css
   .gallery-hero): #F5F5F5 base with a repeating light-grey inline-SVG dot
   pattern — NOT a "cover" image and NO dark overlay (that overlay is what made
   ours look darker than Bags; removed to match exactly).
   -------------------------------------------------------------------------- */
.new-designs .rp-hero {
    padding: 180px 20px 100px;
    text-align: center;
    /* Exact Rocket Bags .gallery-hero background: #F5F5F5 base + a light-grey
       inline-SVG dot pattern (10px tile), no dark overlay — the lighter look. */
    background-color: #F5F5F5;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='1' fill='%23e2e2e2'/%3E%3C/svg%3E");
}

.new-designs .rp-hero__content {
    max-width: 960px;
    margin: 0 auto;
}

.new-designs .rp-hero__title {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 48px;
    letter-spacing: -0.03em;
    color: #071209;
}

.new-designs .rp-hero__subtitle {
    margin: 24px 0 0;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 32px;
    letter-spacing: -0.03em;
    color: #071209;
}

.new-designs .rp-hero__text {
    max-width: 620px;
    margin: 24px auto 0;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: rgba(7, 18, 9, 0.7); /* #071209 @ 70% (B2) */
}

/* --------------------------------------------------------------------------
   Hero — responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .new-designs .rp-hero {
        padding: 130px 20px 64px;
    }

    .new-designs .rp-hero__title {
        font-size: 34px;
    }

    .new-designs .rp-hero__subtitle {
        font-size: 24px;
    }
}

/* --------------------------------------------------------------------------
   §4  Section base & shared body/label type
   Standard vertical rhythm: 120px from the section's top edge to the first
   element, and 120px from the last element to the bottom edge.
   -------------------------------------------------------------------------- */
.new-designs .rp-section {
    padding: 120px 0;
}

/* Textured background variant — same dot texture as the hero, but on the
   Same exact Rocket Bags .gallery-hero background: #F5F5F5 base + light-grey
   inline-SVG dots, no dark overlay. */
.new-designs .rp-section--texture {
    background-color: #F5F5F5;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='1' fill='%23e2e2e2'/%3E%3C/svg%3E");
}

/* H2 — Inter 600, 44px, -3% tracking, Brand/950 (#071209). Line height (1.2)
   comes from the global heading rule above. */
.new-designs .rp-section h2 {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 44px;
    letter-spacing: -0.03em;
    color: #071209;
}

/* Body copy — Arial 400, 20px / 30px, #071209 @ 70% (B2) */
.new-designs .rp-section p {
    margin: 0;
    font-family: Arial, sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0;
    color: rgba(7, 18, 9, 0.7);
}

/* Stacked paragraphs within a prose column */
.new-designs .rp-prose p + p {
    margin-top: 24px;
}

/* Bold variant — needs to out-specify `.rp-section p` (which sets weight 400) */
.new-designs .rp-section p.rp-text--bold {
    font-weight: 700;
}

/* "Helpful documents:" label — Inter 600, 20px / 30px, uppercase, grey.
   Inherits the 20px/30px sizing from .rp-section p; overrides the rest. */
.new-designs .rp-section p.rp-docs-label {
    margin-top: 22px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(7, 18, 9, 0.7);
}

/* --------------------------------------------------------------------------
   §5  Document cards
   Per the design spec: horizontal flow, fill width, hug height (~120px),
   #FFFFFF fill, 1px #071209 @ 5% border, 12px/20px padding, 24px inner gap,
   and a soft drop shadow (x0 y0 blur65 spread0, #000000 @ 6%).
   -------------------------------------------------------------------------- */
.new-designs .rp-doc-cards {
    display: flex;
    gap: 16px;
    margin-top: 24px;
}

.new-designs .rp-doc-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 120px;
    padding: 20px 12px;
    background: #ffffff;
    border: 1px solid rgba(7, 18, 9, 0.05); /* #071209 @ 5% */
    box-shadow: 0 0 65px 0 rgba(0, 0, 0, 0.06);
}

.new-designs .rp-doc-card__thumb {
    flex-shrink: 0;
    width: 56px;
    height: auto;
    max-height: 80px;
    display: block;
    object-fit: contain;
}

.new-designs .rp-doc-card__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.new-designs .rp-doc-card__title {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: rgba(7, 18, 9, 0.5); /* #071209 @ 50% (Black alpha/50%) */
    white-space: nowrap; /* break only at the explicit <br>, never auto-wrap */
}

.new-designs .rp-doc-card__link {
    align-self: flex-start;
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    color: #071209;
    text-decoration: underline;
}

.new-designs .rp-doc-card__link:hover {
    color: #071209;
    opacity: 0.7;
}

@media (max-width: 768px) {
    .new-designs .rp-doc-cards {
        flex-wrap: wrap;
    }

    .new-designs .rp-doc-card {
        flex: 1 1 calc(50% - 8px);
    }
}

@media (max-width: 480px) {
    .new-designs .rp-doc-card {
        flex-basis: 100%;
    }
}

/* --------------------------------------------------------------------------
   §6  Compliance — H4 lead, two-column intro, 6-block process grid
   -------------------------------------------------------------------------- */

/* H4 — Inter 600, 26px, -3% tracking. Line height 1.2 comes from the global
   heading rule. 20px under the H2. */
.new-designs .rp-section h4 {
    margin: 20px 0 0;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 26px;
    letter-spacing: -0.03em;
    color: #071209;
}

/* Centre the section's wrappers in the container — the text inside each wrapper
   stays left-aligned. Each wrapper is capped at the block-row width (846px). */
.new-designs .rp-compliance__head {
    max-width: 846px;
}

.new-designs .rp-section--center .rp-compliance__head,
.new-designs .rp-section--center .rp-compliance__text {
    margin-left: auto;
    margin-right: auto;
}

.new-designs .rp-section--center .rp-process {
    justify-content: center;
}

/* Two-column intro copy, 60px under the H4. Width is locked to the block row
   (3 x 242px cards + 2 x 60px gaps = 846px) so the text and the cards below it
   share the same left and right edges. */
.new-designs .rp-compliance__text {
    margin-top: 60px;
    max-width: 846px;
    display: flex;
    gap: 60px;
}

.new-designs .rp-compliance__text .rp-prose {
    flex: 1;
}

@media (max-width: 768px) {
    .new-designs .rp-compliance__text {
        max-width: none;
        flex-direction: column;
        gap: 32px;
    }
}

/* Process grid — 3 columns, staggered, 80px under the intro copy.
   60px horizontal gap between neighbouring columns. */
.new-designs .rp-process {
    margin-top: 80px;
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

.new-designs .rp-process__col {
    display: flex;
    flex-direction: column;
}

/* Column 1: 60px between block 1 and block 4 */
.new-designs .rp-process__col:nth-child(1) {
    gap: 60px;
}

/* Columns 2 & 3: 40px between their stacked blocks */
.new-designs .rp-process__col:nth-child(2),
.new-designs .rp-process__col:nth-child(3) {
    gap: 40px;
}

/* Diagonal stagger — column top offsets (estimated from the mock; not given
   as exact values, easy to adjust). */
.new-designs .rp-process__col--2 {
    margin-top: 100px;
}

.new-designs .rp-process__col--3 {
    margin-top: 200px;
}

/* Card — fixed 242px wide, hug height, 2px 5% border, soft shadow.
   Vertical flex with a 16px gap between every child (number, icon, title,
   separator, sub-label) — that 16px gap is what puts the SVG 16px below the
   number. Padding: 12px top / 12px right / 30px bottom / 8px left. */
.new-designs .rp-process-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 242px;
    padding: 12px 12px 30px 8px;
    text-align: center;
    background: #ffffff;
    border: 2px solid rgba(7, 18, 9, 0.05); /* #071209 @ 5% */
    box-shadow: 0 0 65px 0 rgba(0, 0, 0, 0.06);
}

/* Number bubble — #556D8F circle (~39.52 x 38.78), white numeral inside.
   Top-left: 12px from the top (padding) and 12px from the left (8px + 4px). */
.new-designs .rp-process-card__num {
    align-self: flex-start;
    margin-left: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 39.52px;
    height: 38.78px;
    border-radius: 50%;
    background: #556d8f;
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.01em;
}

.new-designs .rp-process-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 111px;
}

.new-designs .rp-process-card__icon svg {
    max-width: 100%;
    height: auto;
}

/* Title — H3/Semi: Inter 600, 32px, -3% tracking, line height 1.2 (global) */
.new-designs .rp-process-card h3 {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 32px;
    letter-spacing: -0.03em;
    color: #071209;
}

/* 2px separator at 10% (#0712091A) */
.new-designs .rp-process-card__sep {
    width: 100%;
    height: 2px;
    background: rgba(7, 18, 9, 0.1);
}

/* Sub-label — Large/Semi: Inter 600, 20px / 24px, -1% tracking, #556D8F */
.new-designs .rp-process-card__sub {
    display: block;
    white-space: nowrap; /* break only at the <br> so every card is the same height */
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #556d8f;
}

@media (max-width: 768px) {
    /* 60px between the copy and the blocks */
    .new-designs .rp-section .container > .rp-process {
        margin-top: 60px;
    }

    /* Lay the six cards in rows of 2 — 11.5px horizontal, 16px vertical.
       The three column wrappers are flattened (display:contents) so all six
       cards flow into one flex-wrap grid. */
    .new-designs .rp-process {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px 11.5px;
    }

    .new-designs .rp-process__col {
        display: contents;
    }

    .new-designs .rp-process__col--2,
    .new-designs .rp-process__col--3 {
        margin-top: 0;
    }

    .new-designs .rp-process-card {
        width: calc(50% - 5.75px); /* 2 per row with an 11.5px gap between */
    }

    /* Restore the 1 → 6 numeric sequence across the flattened columns */
    .new-designs .rp-process__col:nth-child(1) .rp-process-card:first-child { order: 1; }
    .new-designs .rp-process__col:nth-child(2) .rp-process-card:first-child { order: 2; }
    .new-designs .rp-process__col:nth-child(3) .rp-process-card:first-child { order: 3; }
    .new-designs .rp-process__col:nth-child(1) .rp-process-card:last-child { order: 4; }
    .new-designs .rp-process__col:nth-child(2) .rp-process-card:last-child { order: 5; }
    .new-designs .rp-process__col:nth-child(3) .rp-process-card:last-child { order: 6; }
}

/* --------------------------------------------------------------------------
   §7  Responsibility Built Into the Process
   Copy on the left; three images collaged against the right edge of the
   screen. Image sizes/positions are interpreted from the mock (the attached
   panel didn't fully specify the 3-image arrangement) — easy to fine-tune.
   The min-height is temporary, to hold the tall image collage until the
   check-list copy is added to the left column.
   -------------------------------------------------------------------------- */
.new-designs .rp-built-section {
    position: relative;
    padding-bottom: 0;
}

.new-designs .rp-built {
    max-width: 660px;
}

/* Keep the heading on one line (it can extend past the copy column to the
   right, where the image collage now starts lower, level with the paragraph) */
.new-designs .rp-built h2 {
    white-space: nowrap;
}

/* Intro copy — 60px under the H2 (inherits the Arial 20px/30px 70% body style) */
.new-designs .rp-built .rp-built__intro {
    margin-top: 60px;
}

/* 1px grey separator — 40px under the intro copy */
.new-designs .rp-built .rp-built__sep {
    margin-top: 40px;
    height: 1px;
    background: rgba(7, 18, 9, 0.1);
}

/* Lead-in label — Large/Semi (Inter 600, 20px / 24px, -1%). 40px under sep. */
.new-designs .rp-built .rp-built__label {
    margin-top: 40px;
    white-space: nowrap; /* keep on one line */
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #071209;
}

/* Right-hand image collage — hugs the right edge of the screen */
.new-designs .rp-built__images {
    position: absolute;
    top: 120px;
    right: 0;
    width: 480px;
    height: 1500px;
}

.new-designs .rp-built__img {
    position: absolute;
    display: block;
    width: 361px; /* requested size */
    height: auto;
}

/* gazelle — top-right, level with the first paragraph; sits on top */
.new-designs .rp-built__img--1 {
    top: 123px;
    right: 0;
    z-index: 2;
}

/* chocolate — left, sits BEHIND the other two */
.new-designs .rp-built__img--2 {
    top: 540px;
    left: -100px;
    z-index: 1;
}

/* bag — lower-right, on top */
.new-designs .rp-built__img--3 {
    top: 1017px;
    right: 0;
    z-index: 2;
}

@media (max-width: 992px) {
    .new-designs .rp-built-section {
        min-height: 0;
    }

    .new-designs .rp-built {
        max-width: none;
    }

    /* Image collage removed on mobile */
    .new-designs .rp-built__images {
        display: none;
    }
}

/* Check-list — 9 items, each a circle-check tick + Large/Reg text. Items are
   separated by 2px grey lines, 40px above/below each line; 24px between tick
   and text. */
.new-designs .rp-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.new-designs .rp-checklist__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 40px 0;
}

/* 1px grey separator below each point (including the last one), indented to
   where the text starts (44px tick + 24px gap = 68px) */
.new-designs .rp-checklist__item::after {
    content: "";
    position: absolute;
    left: 68px;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(7, 18, 9, 0.1);
}

.new-designs .rp-checklist__tick {
    flex-shrink: 0;
    display: block;
    width: 44px;
    height: 44px;
}

/* Large/Reg — Inter 400, 20px / 30px, #071209 @ 70% */
.new-designs .rp-checklist__text {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0;
    color: rgba(7, 18, 9, 0.7);
}

/* Closing copy — 60px under the check-list's final separator */
.new-designs .rp-built__outro {
    margin-top: 60px;
}

/* Final separator — 70% of the container width, centered, 152px under the copy */
.new-designs .rp-built__sep--end {
    width: 70%;
    height: 1px;
    margin: 152px auto 0;
    background: rgba(7, 18, 9, 0.1);
}

/* --------------------------------------------------------------------------
   §8  The Right Questions, Asked Early
   Centered H2/H4, then a two-column body: cup/pen image collage on the left,
   copy on the right (cup top aligns with the bold paragraph). Pen overlap
   offsets are interpreted from the mock — easy to fine-tune.
   -------------------------------------------------------------------------- */
.new-designs .rp-questions__head {
    text-align: center;
}

.new-designs .rp-questions__body {
    margin-top: 80px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 80px;
}

.new-designs .rp-questions__images {
    position: relative;
    flex-shrink: 0;
    width: 463px; /* fits the pen's right edge (180 + 283) so the 80px gap is measured from it */
    height: 633px; /* fits the pen's bottom (280 + 353) */
}

.new-designs .rp-questions__cup {
    position: absolute;
    top: 0;
    left: -30px;
    width: 401px;
    height: 320px;
    object-fit: cover;
    z-index: 2; /* overlays the pen */
}

.new-designs .rp-questions__pen {
    position: absolute;
    top: 280px;
    left: 180px;
    width: 283px;
    height: 353px;
    object-fit: cover;
    z-index: 1;
}

.new-designs .rp-questions__text {
    max-width: 600px;
}

.new-designs .rp-questions__sep {
    margin-top: 40px;
    height: 1px;
    background: rgba(7, 18, 9, 0.1);
}

/* Closing copy — 40px under the separator */
.new-designs .rp-questions__outro {
    margin-top: 40px;
}

@media (max-width: 992px) {
    .new-designs .rp-questions__body {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .new-designs .rp-questions__text {
        max-width: none;
    }
}

@media (max-width: 768px) {
    /* Full-width collage so the cup pins to the left edge and the pen to the
       right edge — both aligning with the paragraphs below. */
    .new-designs .rp-questions__images {
        width: 100%;
        height: 405px;
        align-self: flex-start;
        margin: 0;
    }

    .new-designs .rp-questions__cup {
        top: 0;
        left: 0;
        width: 277.82px;
        height: 221.78px;
    }

    .new-designs .rp-questions__pen {
        top: 170px; /* 40px lower than the original */
        left: auto;
        right: 0; /* aligned to the right */
        width: 212.06px;
        height: 234.14px;
    }
}

/* --------------------------------------------------------------------------
   §9  Supplier Governance, Not Supplier Assumptions
   Top: H2 (left) + two copy groups split by a separator (right).
   Bottom: four process blocks (left) + supplier image (right).
   -------------------------------------------------------------------------- */
.new-designs .rp-supplier-section {
    padding-top: 0;
}

.new-designs .rp-supplier__top {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.new-designs .rp-supplier__head {
    flex-shrink: 0;
    width: 480px;
}

.new-designs .rp-supplier__head h2 {
    white-space: nowrap; /* keep the three <br> lines intact */
}

.new-designs .rp-supplier__text {
    flex: 1;
}

/* Grey separator between the two copy groups */
.new-designs .rp-supplier__sep {
    margin: 40px 0;
    height: 1px;
    background: rgba(7, 18, 9, 0.1);
}

/* Bottom row — 60px under the copy */
.new-designs .rp-supplier__bottom {
    margin-top: 60px;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.new-designs .rp-supplier__blocks {
    flex-shrink: 0;
    width: 415px;
    display: flex;
    flex-direction: column;
    gap: 26.8px; /* blocks 26.8px apart */
}

.new-designs .rp-supplier__block {
    height: 111px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12.7px 104px;
    text-align: center;
    background: #ffffff;
    border: 1px solid rgba(7, 18, 9, 0.05);
    box-shadow: 0 0 65px 0 rgba(0, 0, 0, 0.06);
}

/* Black label — Inter 600, 20px / 24px, -1% */
.new-designs .rp-supplier__block-title {
    white-space: nowrap;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #071209;
}

/* Blue label — same type, #556D8F, uppercase */
.new-designs .rp-supplier__block-sub {
    white-space: nowrap;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #556d8f;
}

.new-designs .rp-supplier__image {
    flex-shrink: 0;
    width: 715px;
}

.new-designs .rp-supplier__image img {
    display: block;
    width: 715px;
    height: 529px;
    object-fit: cover;
}

@media (max-width: 992px) {
    .new-designs .rp-supplier__top,
    .new-designs .rp-supplier__bottom {
        flex-direction: column;
        gap: 40px;
    }

    /* Image before the blocks on mobile */
    .new-designs .rp-supplier__image {
        order: -1;
    }

    .new-designs .rp-supplier__head {
        width: auto;
    }

    .new-designs .rp-supplier__head h2 {
        white-space: normal;
    }

    .new-designs .rp-supplier__image,
    .new-designs .rp-supplier__image img {
        width: 100%;
        height: auto;
    }
}

/* --------------------------------------------------------------------------
   §10 Recognised Standards and Accreditations
   Hero-style dotted background; centred H2 + intro, then four logo + copy rows.
   -------------------------------------------------------------------------- */
.new-designs .rp-standards-section {
    /* Same exact Rocket Bags .gallery-hero background (see §3). */
    background-color: #F5F5F5;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='1' fill='%23e2e2e2'/%3E%3C/svg%3E");
}

.new-designs .rp-standards__head {
    text-align: center;
}

.new-designs .rp-standards__head h2 {
    white-space: nowrap;
}

/* Intro — 40px under the H2, 3 lines, centred */
.new-designs .rp-standards__head .rp-standards__intro {
    max-width: 700px;
    margin: 40px auto 0;
}

/* Rows — 100px under the intro */
.new-designs .rp-standards__list {
    max-width: 620px;
    margin: 100px auto 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.new-designs .rp-standards__item {
    display: flex;
    align-items: center; /* logo vertically centred with its text */
    gap: 40px; /* 40px to the left of the text */
}

.new-designs .rp-standards__img {
    flex-shrink: 0;
    width: 200px;
    height: 125.89px;
    object-fit: contain;
}

.new-designs .rp-standards__text {
    flex: 1;
}

.new-designs .rp-standards__text h4 {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -0.01em;
    color: #071209;
}

/* Copy — 16px below the h4 */
.new-designs .rp-standards__text p {
    margin-top: 16px;
}

/* 1px grey separator between rows (first three gaps only), aligned with the
   text column (200px image + 40px gap = 240px indent) */
.new-designs .rp-standards__sep {
    margin-left: 240px;
    height: 1px;
    background: rgba(7, 18, 9, 0.1);
}

@media (max-width: 768px) {
    .new-designs .rp-standards__head h2 {
        white-space: normal;
    }

    /* Stack each row and centre its logo + text */
    .new-designs .rp-standards__item {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        text-align: center;
    }

    .new-designs .rp-standards__text {
        text-align: center;
    }

    /* Full-width, centred separators (drop the 240px text-column indent) */
    .new-designs .rp-standards__sep {
        margin-left: 0;
    }
}

/* --------------------------------------------------------------------------
   §11 Evidence Behind Every Claim
   Top: copy (left) + tall bag image (right). Below: four blocks, the last of
   which overlaps the bottom of the image. (Overlap amount interpreted from the
   mock — easy to fine-tune via the blocks' negative margin-top.)
   -------------------------------------------------------------------------- */
.new-designs .rp-evidence-section {
    position: relative;
}

/* Full-width container for this section so the copy can sit centred */
.new-designs .rp-evidence-section > .container {
    max-width: none;
}

.new-designs .rp-evidence__text {
    max-width: 600px;
    /* Centre the block in the space to the left of the bag image, so the gap on
       the left (to the container edge) equals the gap on the right (to the
       image). The image occupies 411px of the container's right edge (426px
       image − 15px container padding). 1011px = 411px image + 600px block;
       189px = 600px block − 411px image. Both floors engage together as the
       screen narrows, at which point the block pushes left / shrinks. */
    margin-left: max(0px, calc((100% - 1011px) / 2));
    margin-right: max(411px, calc((100% - 189px) / 2));
}

.new-designs .rp-evidence__text h2 {
    white-space: nowrap; /* keep the heading on one line */
}

.new-designs .rp-evidence__prose {
    margin-top: 40px;
}

/* This section's container is full-width, so cap the bottom separator to the
   same rendered width as the other sections: 70% of the 990px container. */
.new-designs .rp-evidence-section .rp-built__sep--end {
    width: 693px;
    max-width: 70%;
}

/* Bag image — hugs the right edge of the screen */
.new-designs .rp-evidence__image {
    position: absolute;
    top: 120px;
    right: 0;
    width: 426px;
}

.new-designs .rp-evidence__image img {
    display: block;
    width: 426px;
    height: 747px;
    object-fit: cover;
}

/* Blocks — 140px below the last paragraph */
.new-designs .rp-evidence__blocks {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 140px;
}

.new-designs .rp-evidence__block {
    box-sizing: border-box;
    width: 242px;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    background: #ffffff;
    border: 2px solid rgba(7, 18, 9, 0.05);
    box-shadow: 0 0 65px 0 rgba(0, 0, 0, 0.06);
}

.new-designs .rp-evidence__block-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.new-designs .rp-evidence__block-icon svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* H3/Semi — Inter 600, 32px, 100% line-height, -3% tracking, centred */
.new-designs .rp-evidence__block-title {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: -0.03em;
    text-align: center;
    color: #071209;
}

.new-designs .rp-evidence__block-sub {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: #556d8f;
}

@media (max-width: 992px) {
    .new-designs .rp-evidence__image {
        position: static;
        width: 100%;
        margin-top: 40px;
    }

    .new-designs .rp-evidence__image img,
    .new-designs .rp-evidence__text {
        width: 100%;
        max-width: none;
        height: auto;
    }

    /* Stacked layout — drop the reserved-right / centring margins */
    .new-designs .rp-evidence__text {
        margin-left: 0;
        margin-right: 0;
    }

    .new-designs .rp-evidence__blocks {
        margin-top: 40px;
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    /* Bag image — 362 x 369, centred so it keeps side margins like the cup/pen
       (it now sits before the blocks in the DOM, so it renders there). */
    .new-designs .rp-evidence__image {
        width: 362px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .new-designs .rp-evidence__image img {
        height: 369px;
        object-fit: cover;
    }

    /* Blocks — rows of 2, 12.7px gap both ways. Negative top margin lifts the
       first row so it overlaps the bottom of the image by 20px (the blocks sit
       above the image via their z-index). Higher-specificity selector beats the
       generic `.container > * + *` 40px area rule. */
    .new-designs .rp-evidence-section .container > .rp-evidence__blocks {
        margin-top: -10px;
        gap: 12.7px;
    }

    .new-designs .rp-evidence__block {
        width: calc(50% - 6.35px); /* 2 per row with a 12.7px gap between */
    }
}

/* --------------------------------------------------------------------------
   §12 Confidence for Every Team Involved
   Centred head (H2 one line + 2-line H4), then five icon+text rows each with
   a 1px separator beneath (indented to where the text starts), then a centred
   bold closing paragraph, then the shared bottom separator.
   -------------------------------------------------------------------------- */
/* The previous section already supplies the gap below it, so don't stack
   another 120px on top here. */
.new-designs .rp-teams-section {
    padding-top: 0;
}

.new-designs .rp-teams__head {
    text-align: center;
}

.new-designs .rp-teams__head h2 {
    white-space: nowrap; /* one line */
}

/* Rows — 60px under the head */
.new-designs .rp-teams__list {
    max-width: 600px;
    margin: 60px auto 0;
    display: flex;
    flex-direction: column;
}

.new-designs .rp-teams__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 32px; /* 32px between icon and text */
    padding: 40px 0;
}

/* First row sits exactly 60px below the head */
.new-designs .rp-teams__item:first-child {
    padding-top: 0;
}

/* 1px separator below every row (including the last), indented to where the
   text starts (48px icon + 32px gap = 80px) */
.new-designs .rp-teams__item::after {
    content: "";
    position: absolute;
    left: 80px;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(7, 18, 9, 0.1);
}

/* 48 x 48 icon box; keep each SVG within it without distortion */
.new-designs .rp-teams__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.new-designs .rp-teams__icon svg {
    display: block;
    max-width: 48px;
    max-height: 48px;
    width: auto;
    height: auto;
}

.new-designs .rp-teams__text {
    flex: 1;
}

/* Closing copy — 80px under the last separator, centred. Scoped with the
   section class so it out-specifies `.new-designs .rp-section p { margin: 0 }`
   (which otherwise wins and kills the top margin). */
.new-designs .rp-teams-section .rp-teams__outro {
    max-width: 700px;
    margin: 80px auto 0;
    text-align: center;
}

/* --------------------------------------------------------------------------
   §13 Creative Merchandise with Responsibility Built in
   Two-column intro (4-line H2 on the left, copy 60px to its right), then an
   80px gap and a full-bleed horizontal slider of every gallery image.
   -------------------------------------------------------------------------- */
/* The previous section ends with a separator, so don't stack another 120px. */
.new-designs .rp-creative-section {
    padding-top: 0;
}

.new-designs .rp-creative__top {
    display: flex;
    align-items: flex-start;
    gap: 60px; /* copy sits 60px to the right of the H2 */
}

.new-designs .rp-creative__head {
    flex-shrink: 0;
}

.new-designs .rp-creative__text {
    flex: 1;
}

/* Full-bleed horizontal slider, 80px below the intro. Sits outside .container
   so it spans the whole width and the slides can run off both edges.
   Auto-scrolls and is click-and-drag scrollable (see the inline script). */
.new-designs .rp-creative__slider {
    margin-top: 80px;
    overflow-x: auto;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox — hide the scrollbar */
}

.new-designs .rp-creative__slider::-webkit-scrollbar {
    display: none; /* WebKit — hide the scrollbar */
}

.new-designs .rp-creative__slider.is-dragging {
    cursor: grabbing;
}

.new-designs .rp-creative__track {
    display: flex;
    gap: 20px;
    padding: 0 40px;
    width: max-content;
    user-select: none;
}

.new-designs .rp-creative__slide {
    flex: 0 0 372px;
}

.new-designs .rp-creative__slide img {
    display: block;
    width: 372px;
    height: 436px;
    object-fit: cover;
    border-radius: 20px;
    user-select: none;
    -webkit-user-drag: none; /* stop the native image drag-ghost */
    pointer-events: none;
}

@media (max-width: 768px) {
    .new-designs .rp-creative__top {
        flex-direction: column;
        gap: 32px;
    }
}

/* --------------------------------------------------------------------------
   §14 Planning a campaign — contact form (final section)
   Centred head (H2 + 2 paragraphs), then a 600px form.
   -------------------------------------------------------------------------- */
/* The previous section already supplies the gap, so don't stack another 120px.
   scroll-margin keeps the heading clear of the fixed header when the mobile
   "Get in touch" button scrolls here. */
.new-designs .rp-contact-section {
    padding-top: 0;
    scroll-margin-top: 100px;
}

.new-designs .rp-contact__head {
    text-align: center;
}

/* First paragraph — 60px under the H2. Scoped with the section class so it
   out-specifies `.new-designs .rp-section p { margin: 0 }`. */
.new-designs .rp-contact-section .rp-contact__intro {
    max-width: 640px;
    margin: 60px auto 0;
}

/* Second paragraph sits closer to the first */
.new-designs .rp-contact-section .rp-contact__intro + .rp-contact__intro {
    margin-top: 24px;
}

/* Form — 40px under the copy */
/* Form aligns with the copy above it (same 640px width, centred) */
.new-designs .rp-contact__form {
    max-width: 640px;
    margin: 40px auto 0;
    text-align: left;
}

/* Black label text — Body/Semi: Inter 600, 16px, 100% line-height, 0 tracking */
.new-designs .rp-contact__label {
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0;
    color: #071209;
    margin-bottom: 16px;
}

.new-designs .rp-contact__label--message {
    margin-top: 32px;
}

.new-designs .rp-contact__row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

/* Field text — Small/Reg: Inter 400, 14px, 100% line-height, 0 tracking */
.new-designs .rp-contact__input,
.new-designs .rp-contact__textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 15px 16px;
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0;
    color: #071209;
    background: #ffffff;
    border: 1px solid rgba(7, 18, 9, 0.15);
    border-radius: 4px;
    outline: none;
    transition: border-color 0.2s;
}

/* One input per column */
.new-designs .rp-contact__row .rp-contact__input {
    flex: 1;
}

/* Also set the placeholder size — Bootstrap Material Design ships
   `input::placeholder { font-size: 1rem }`, which otherwise wins for inputs
   (but not textareas, hence only the inputs looked wrong). */
.new-designs .rp-contact__input::placeholder,
.new-designs .rp-contact__textarea::placeholder {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: rgba(7, 18, 9, 0.4);
}

.new-designs .rp-contact__input:focus,
.new-designs .rp-contact__textarea:focus {
    border-color: #071209;
}

.new-designs .rp-contact__textarea {
    min-height: 120px;
    resize: vertical;
}

.new-designs .rp-contact__submit {
    width: 100%;
    margin-top: 40px;
    padding: 20px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: #071209;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.new-designs .rp-contact__submit:hover {
    opacity: 0.9;
}

@media (max-width: 768px) {
    .new-designs .rp-contact__row {
        flex-direction: column;
        gap: 20px;
    }
}

/* --------------------------------------------------------------------------
   §15  Responsive utilities
   Toggle helpers for content that differs between breakpoints:
   - .rp-br-mobile / .rp-br-desktop — line breaks shown on only one breakpoint
   - .rp-hide-mobile               — hides any element on mobile
   -------------------------------------------------------------------------- */
/* Line breaks that only apply on mobile (hidden on desktop) */
.rp-br-mobile {
    display: none;
}

/* Line breaks that only apply on desktop (hidden on mobile) */
.rp-br-desktop {
    display: inline;
}

@media (max-width: 768px) {
    .rp-br-mobile {
        display: inline;
    }

    .rp-br-desktop {
        display: none;
    }

    /* Any element that should disappear on mobile */
    .rp-hide-mobile {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   §16 Mobile — uniform section rhythm
   Below the hero, every section sits 80px from the next (40px bottom + 40px
   top). This overrides the 120px desktop padding and every per-section
   padding-top:0 / padding-bottom:0 tweak. Kept last in the file so it wins on
   source order against those equal-specificity per-section rules above.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .new-designs .rp-section,
    .new-designs .rp-built-section,
    .new-designs .rp-supplier-section,
    .new-designs .rp-teams-section,
    .new-designs .rp-creative-section,
    .new-designs .rp-contact-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    /* Hero sits 80px above the first section (40px hero bottom + 40px top) */
    .new-designs .rp-hero {
        padding-bottom: 40px;
    }
}

/* --------------------------------------------------------------------------
   §17 Mobile — typography tokens + text / area rhythm
   Headings step down (H2 → H3/Semi 32px, H4 → H4/Semi 26px), body becomes
   Body/Reg (Inter 16 / 24). Text elements sit 24px apart; each new area (a
   section container's direct children) sits 40px apart. Everything is scoped
   through `.container` so it out-specifies the bespoke desktop margins, and it
   is kept last in the file so it also wins any equal-specificity ties.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* H3/Semi — Inter 600, 32px, -3% tracking. Line height 120% (100% + .2) */
    .new-designs .rp-section .container h2 {
        font-size: 32px;
        line-height: 1.2;
        letter-spacing: -0.03em;
        white-space: normal; /* allow long headings to wrap on mobile */
    }

    /* H4/Semi — Inter 600, 26px, -3% tracking. Line height 120% (100% + .2) */
    .new-designs .rp-section .container h4 {
        font-size: 26px;
        line-height: 1.2;
        letter-spacing: -0.03em;
        white-space: normal;
    }

    /* Block-title headings — same +0.2 line height on mobile */
    .new-designs .rp-section .container h3 {
        line-height: 1.2;
    }

    /* Body/Reg — Inter 400, 16px / 24px, 0 tracking */
    .new-designs .rp-section .container p {
        font-family: "Inter", sans-serif;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0;
    }

    /* 24px between adjacent text elements */
    .new-designs .rp-section .container :is(h2, h3, h4, p) + :is(h2, h3, h4, p) {
        margin-top: 24px;
    }

    /* 40px between each new area (a section container's direct children — this
       also tightens the tall in-section divider margins on mobile) */
    .new-designs .rp-section .container > * + * {
        margin-top: 40px;
    }

    /* "The Right Questions" subtitle — 20px on mobile (overrides H4/Semi 26px) */
    .new-designs .rp-questions-section .rp-questions__head h4 {
        font-size: 20px;
    }

    /* "Confidence for Every Team Involved" subtitle — 20px on mobile */
    .new-designs .rp-teams-section .rp-teams__head h4 {
        font-size: 20px;
    }

    /* Its closing paragraph — removed on mobile */
    .new-designs .rp-teams-section .rp-teams__outro {
        display: none;
    }

    /* Stacked two-column areas also sit 40px apart */
    .new-designs .rp-creative__top,
    .new-designs .rp-supplier__top,
    .new-designs .rp-supplier__bottom,
    .new-designs .rp-questions__body {
        gap: 40px;
    }

    /* "Responsibility From the Start" — explicit mobile rhythm:
       24px h2 → paragraph, 40px last paragraph → "Helpful documents",
       20px "Helpful documents" → first doc card. */
    .new-designs .rp-start-section .col-md-7 {
        margin-top: 24px;
    }

    .new-designs .rp-start-section .container p.rp-docs-label {
        margin-top: 40px;
    }

    .new-designs .rp-start-section .rp-doc-cards {
        margin-top: 20px;
    }
}