/* PRC Streamline: site styling
   Loaded AFTER core's frontend.css via the `stylesheets` layout override.

   Source: Figma nOmWVbPcHTFnf4kOogvUBq ("PRC - design"), ten desktop frames
   drawn at 1728 wide. Every colour, size and face here was read from the
   design's nodes with get_design_context, never sampled off a screenshot. The
   file has no Figma variables, so the token block below is the palette
   transcribed by hand. The section-by-section mapping is
   Documents/DESIGN-MAPPING.md.

   The design predates the kitchen sink template, so it draws only the blocks
   its ten pages use. Every other block is styled here in the same language
   (Poppins capitals, the red-to-pink gradient, 12px corners, pale blue
   panels) so a block the client reaches for later already looks like the
   site. /kitchen-sink (signed in) shows all of them.

   Two rules this file follows (CMS-Dev Documentation/DESIGN-TO-CMS.md):

   1. It REDEFINES core's own tokens and never invents private brand tokens, so
      Theme Studio has something to take hold of if it is ever switched on.
   2. Thematic values (colour, type, radius) go through a token; structural ones
      (a 179px timeline disc, a 220px quote mark, a 740 x 480 tile) are
      hard-coded here, and correctly so.

   The page grid: content runs 85 -> 1643 on the 1728 frame (1558 wide).
   `.page-body > .container` is unwrapped and every block restores the grid
   with its own padding, so a band can reach the screen edge without a
   viewport unit (cascade trap 1). */

:root {
    /* Brand. The pink carries eyebrows, links, prices and active states; the
       gradient runs red to pink, left to right, on every filled button and
       band. The pink reads 4.7:1 on white and the red 5.1:1, so white text on
       any part of the gradient and pink text at body size both pass 4.5:1. */
    --color-primary:         #e1007b;
    --color-primary-hover:   #b80065;
    --color-primary-text:    #e1007b;
    --color-primary-tint:    #edf8fe;
    --color-primary-rgb:     225, 0, 123;
    --color-link:            #e1007b;
    --color-dark:            #000000;
    --color-dark-border:     #1a1a1a;

    /* The red end of the gradient. Core's stock green would otherwise surface
       on secondary buttons and pricing ticks. */
    --color-secondary:       #de002f;
    --color-secondary-hover: #b8002a;
    --color-secondary-text:  #ffffff;

    /* Ink: black copy and headings throughout. */
    --color-text:            #000000;
    --color-h1:              #000000;
    --color-h2:              #000000;
    --color-h3:              #000000;
    --heading-accent-color:  #e1007b;
    --eyebrow-color:         #e1007b;

    /* Surfaces: one pale blue for bands, cards and form fields. */
    --color-page-bg:         #ffffff;
    --color-bg-alt:          #edf8fe;
    --color-bg-subtle:       #edf8fe;
    --color-bg-warm:         #edf8fe;
    --color-border:          #d6e6ef;
    --card-bg:               #edf8fe;
    --card-border:           transparent;
    --card-title:            #000000;
    --card-text:             #000000;
    --card-meta:             #e1007b;

    /* Blocks */
    --accordion-question:    #000000;
    --accordion-icon:        #e1007b;
    --accordion-answer:      #000000;
    --icon-desc:             #000000;
    --icon-color:            #e1007b;
    --quote-accent:          #e1007b;
    --stat-value:            #e1007b;
    --cta-banner-bg:         #e1007b;

    /* Chrome */
    --nav-bg:                #ffffff;
    --nav-link-color:        #000000;
    --nav-hover-bg:          transparent;
    --nav-hover-color:       #e1007b;
    --nav-active-bg:         transparent;
    --nav-active-color:      #e1007b;
    --nav-dropdown-bg:       #ffffff;
    --nav-dropdown-color:    #000000;
    --footer-bg:             #000000;
    --footer-color:          #ffffff;
    --footer-heading-color:  #ffffff;
    --footer-link-color:     #ffffff;
    --footer-link-hover:     #edf8fe;

    /* Type. Poppins throughout; Prata is named directly on the testimonials.
       The root font-size IS the body size (core sets html font-size from
       --font-size-base), so 1rem is 16px. Every size below is a px clamp for
       that reason. */
    --font-family:           'Poppins', 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-h1:               'Poppins', 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-h2:               'Poppins', 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-h3:               'Poppins', 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-nav:              'Poppins', 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-size-base:        16px;
    --font-size-h1:          clamp(40px, 4.98vw, 86px);
    --font-size-h2:          clamp(34px, 3.7vw, 64px);
    --font-size-h3:          clamp(24px, 2.08vw, 36px);
    --weight-body:           400;
    --weight-h1:             700;
    --weight-h2:             700;
    --weight-h3:             700;
    --lh-body:               1.625;
    --lh-h1:                 1.07;
    --lh-h2:                 1.0625;
    --lh-h3:                 1.1;

    /* Layout: the design's one corner radius is 12px, on buttons, fields and
       the quote card. Bands, tiles and cards are square. */
    --container-width:       1558px;
    --block-gap:             0px;
    --radius-base:           12px;
    --radius-sm:             12px;
    --radius-md:             12px;
    --radius-lg:             12px;

    /* Structural, not a theme value: the gradient is two brand colours, so it
       is built from the tokens and moves with them. */
    --prc-gradient:          linear-gradient(90deg, var(--color-secondary) 0%, var(--color-primary) 100%);
    --prc-gutter:            clamp(20px, 4.92vw, 85px);
}

/* ── Base ───────────────────────────────────────────────────────────────── */

body { color: var(--color-text); font-family: var(--font-family); }
h1, h2, h3 { text-transform: uppercase; }
a { color: var(--color-link); }

/* Buttons. The design has three: the gradient (Contact us, Find out more,
   Book a taxi), the black outline on white, and the glass outline on photos.
   49px tall, 12px corners, bold 14px capitals. */
.btn,
.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 49px;
    padding: 0 24px;
    border-radius: 12px;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none;
}
.btn-primary,
.cta-button {
    background: var(--prc-gradient);
    border: 0;
    color: #fff;
}
.btn-primary:hover,
.cta-button:hover { background: var(--color-primary-hover); color: #fff; }
.btn-secondary { background: #000; color: #fff; border: 0; }
.btn-secondary:hover { background: #333; color: #fff; }
.btn-outline {
    background: transparent;
    border: 1px solid #000;
    color: #000;
    padding: 0 23px;
}
.btn-outline:hover { background: #000; color: #fff; }
/* On a photo: white line, 30% black fill (Figma 2007:498). */
.btn-outline.prc-btn-glass { border-color: #fff; background: rgba(0, 0, 0, .3); color: #fff; }
.btn-outline.prc-btn-glass:hover { background: #fff; color: #000; }

/* A tel: button carries the handset (Figma 2007:504). Decorative: the words
   already say "Book by phone". The icon is a mask so it takes the button's
   own colour, black on white and white on a photo. */
.btn.prc-btn-phone::after,
.btn.prc-btn-apple::after,
.btn.prc-btn-android::after {
    content: "";
    flex: none;
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: var(--prc-icon) center / contain no-repeat;
    mask: var(--prc-icon) center / contain no-repeat;
}
.btn.prc-btn-phone { --prc-icon: url('/images/prc/icons/phone.svg'); }
.btn.prc-btn-apple { --prc-icon: url('/images/prc/icons/apple.svg'); }
.btn.prc-btn-android { --prc-icon: url('/images/prc/icons/android.svg'); }
/* The app buttons on Our App are bigger: 365 x 67, 20px words, 37px icons. */
.btn.prc-btn-apple,
.btn.prc-btn-android { min-width: min(365px, 100%); min-height: 67px; font-size: clamp(16px, 1.16vw, 20px); justify-content: center; gap: 18px; }
.btn.prc-btn-apple::after,
.btn.prc-btn-android::after { width: 37px; height: 37px; }

/* Visible focus on every control, against white, pale blue, pink and photo. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid #000;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px #fff;
}

/* Sizes read off the design's buttons: the handset 24px and 17px clear of the
   words (Book by phone 202 wide), the Android head 43px. */
.btn.prc-btn-phone { gap: 17px; }
.btn.prc-btn-phone::after { width: 24px; height: 24px; }
.btn.prc-btn-android::after { width: 43px; height: 43px; }

/* ── Page shell ────────────────────────────────────────────────────────────
   Every block is a band that stops at the frame width (1728), content back on
   the grid; core's "Full-width band" tick lifts the cap for the design's
   `bg full` sections. The min() is load-bearing: percentage padding resolves
   against the container, not the capped band, so the plain calc(50% - 779px)
   squeezes a capped band's content on a screen wider than 1728. */
.page-body { padding: 0; }
.page-body > .container,
.page-body .content-section > .container { width: auto; max-width: none; padding: 0; }
.page-body .builder-block {
    max-width: 1728px;
    margin: 0 auto;
    padding-block: clamp(56px, 5.44vw, 94px);
    padding-inline: max(var(--prc-gutter), calc(min(50%, 864px) - 779px));
}
.page-body .builder-block.u-full-bleed {
    width: auto;
    max-width: none;
    margin-inline: 0;
    padding-inline: max(var(--prc-gutter), calc(50% - 779px));
}
/* The feed's own wrapper is chrome for a feed dropped into a text page: a grey
   rule and extra air the design never draws. */
.page-body .builder-block .content-section { border-top: 0; padding: 0; }
.page-body .builder-block .content-section > .container > h2 { display: none; }

/* Anything in the unwrapped page container that is not a block goes back on
   the grid: the 4xx and 5xx pages, Terms, Privacy and core's Back links. */
.page-body > .container > :not(.builder-block):not(script):not(style) {
    box-sizing: border-box;
    max-width: 1728px;
    margin-left: auto;
    margin-right: auto;
    padding-left: max(var(--prc-gutter), calc(min(50%, 864px) - 779px));
    padding-right: max(var(--prc-gutter), calc(min(50%, 864px) - 779px));
}
.page-body:not(:has(.builder-block)) > .container { padding-block: clamp(40px, 4.6vw, 80px); }
.page-hero:not(.static-hero) > .container {
    width: auto;
    max-width: 1728px;
    padding-inline: max(var(--prc-gutter), calc(min(50%, 864px) - 779px));
}

/* ── Offer ticker (core Announcement, banner style, "Scroll" overflow) ──────
   Figma 2007:507. 50px gradient strip, bold 22px white capitals. The client
   writes the offer in Announcements; this only restyles core's banner. */
.cms-announcement--banner {
    background: var(--prc-gradient);
    color: #fff;
}
.cms-announcement--banner .cms-announcement__inner {
    max-width: none;
    min-height: 50px;
    display: flex;
    align-items: center;
    padding: 8px 48px 8px var(--prc-gutter);
}
.cms-announcement--banner .cms-announcement__content {
    font-family: var(--font-family);
    font-size: clamp(14px, 1.27vw, 22px);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}
.cms-announcement--banner .cms-announcement__close { color: #fff; font-size: 24px; }

/* ── Header ─────────────────────────────────────────────────────────────────
   Figma 2007:506. 150px white row: logo 48px in, the two rows of links
   centred, the phone over "Book a taxi" on the right. */
.site-header.prc-header {
    background: #fff;
    border: 0;
    padding: 0;
    position: relative;
    z-index: 50;
}
.prc-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 40px);
    min-height: clamp(96px, 8.68vw, 150px);
    max-width: 1728px;
    margin: 0 auto;
    padding: 6px clamp(16px, 3.01vw, 52px) 0 clamp(16px, 2.78vw, 48px);
}
/* The two link rows centre on the PAGE, as drawn: the logo and the phone and
   button get the same width, so the space either side of the rows matches. */
@media (min-width: 1181px) {
    .prc-header__logo,
    .prc-header__actions { flex: 0 0 clamp(150px, 12.2vw, 211px); }
}
.prc-header__logo { display: block; flex: none; line-height: 0; }
/* 145px on every screen, not just the 1728 the design is drawn at. */
.prc-header__logo img { width: 145px; height: auto; }

.prc-header .site-nav { flex: 1; background: transparent; margin: 0; }
.prc-nav__panel { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.prc-nav__secondary,
.prc-nav__primary { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.prc-nav__secondary { gap: 4px clamp(14px, 1.45vw, 25px); }
.prc-nav__primary { gap: 4px clamp(18px, 3.1vw, 54px); }
.prc-nav__secondary a {
    display: block;
    padding: 2px 0;
    color: #000;
    font-family: var(--font-nav);
    font-size: 12px;
    font-weight: 700;
    line-height: 26px;
    text-transform: uppercase;
    text-decoration: none;
}
.prc-header .prc-nav__primary > .nav-item > a,
.prc-header .prc-nav__primary > .nav-item > .nav-label {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    background: none;
    border: 0;
    color: #000;
    font-family: var(--font-nav);
    font-size: clamp(15px, 1.16vw, 20px);
    font-weight: 400;
    line-height: 32px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}
.nav-note { font-size: 12px; font-weight: 400; line-height: 1; }
.prc-nav__secondary a:hover,
.prc-header .prc-nav__primary > .nav-item > a:hover,
.prc-header .prc-nav__primary > .nav-item.active > a { color: var(--color-primary); }
.prc-header .prc-nav__primary > .nav-item.active > a { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

.prc-header .nav-item { position: relative; }
.prc-header .nav-sub {
    position: absolute;
    top: 100%;
    left: -20px;
    min-width: 260px;
    margin: 0;
    padding: 10px 0;
    list-style: none;
    background: #fff;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    display: none;
    z-index: 5;
}
.prc-header .nav-item:hover > .nav-sub,
.prc-header .nav-item:focus-within > .nav-sub { display: block; }
.prc-header .nav-sub a { display: block; padding: 10px 20px; color: #000; font-size: 14px; text-transform: uppercase; text-decoration: none; }
.prc-header .nav-sub a:hover { background: var(--color-bg-alt); color: var(--color-primary); }

.prc-header__actions { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: center; }
.prc-header__phone { color: #000; font-size: clamp(16px, 1.16vw, 20px); font-weight: 700; line-height: 26px; text-decoration: none; }
.prc-header__phone:hover { color: var(--color-primary); }
.prc-header__book.btn { min-width: clamp(150px, 12.2vw, 211px); font-size: clamp(14px, 1.04vw, 18px); font-style: italic; }

/* The 2px gradient rule under the header on a page with no banner
   (Figma 2038:471, the News page). */
body:not(:has(.page-hero, .builder-block--prc_hero)) .site-header.prc-header::after {
    content: "";
    display: block;
    height: 2px;
    background: var(--prc-gradient);
}

.prc-header .nav-toggle { display: none; }

@media (max-width: 1180px) {
    .prc-header__inner { flex-wrap: wrap; }
    .prc-header .nav-toggle {
        order: 2;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        width: auto;
        min-height: 44px;
        margin-left: 0;
        padding: 12px 14px;
        border: 0;
        border-radius: 12px;
        background: #000;
        color: #fff;
        font-weight: 700;
        text-transform: uppercase;
    }
    .nav-toggle__bars,
    .nav-toggle__bars::before,
    .nav-toggle__bars::after { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
    .nav-toggle__bars::before,
    .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
    .nav-toggle__bars::before { top: -6px; }
    .nav-toggle__bars::after { top: 6px; }
    .prc-header__inner { padding-inline: var(--prc-gutter); }
    .prc-header__actions { order: 1; margin-left: auto; }
    .prc-header .site-nav { order: 3; flex: 0 0 100%; }
    .prc-nav__panel.nav-main { display: none; align-items: stretch; padding: 0 0 20px; }
    .prc-nav__panel.nav-main.open { display: flex; }
    .prc-nav__secondary,
    .prc-nav__primary { flex-direction: column; align-items: stretch; gap: 0; }
    .prc-nav__primary { order: -1; }
    .prc-nav__secondary a,
    .prc-header .prc-nav__primary > .nav-item > a { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
    .prc-header .nav-sub { display: block; position: static; box-shadow: none; padding: 0 0 8px 16px; min-width: 0; }
}
/* On a phone the number stays: it is the one-tap call this site exists for. */
@media (max-width: 600px) {
    .prc-header__inner { gap: 0 10px; min-height: 0; padding-block: 10px; }
    /* The number, Book a taxi and Menu need 250px beside the logo: any wider and
       Menu drops to a row of its own, so a narrow phone gets a smaller logo. */
    .prc-header__logo img { width: min(145px, calc(100vw - 250px)); }
    .prc-header__actions { gap: 2px; }
    .prc-header__phone { font-size: 15px; line-height: 22px; }
    .prc-header__book.btn { min-width: 0; min-height: 44px; padding: 0 14px; }
}
@media (max-width: 400px) {
    .nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ── Page banner (the static hero on Pages and Services) ────────────────────
   Figma 2034:569. 462px at 1728, a 28% black wash (two 15% layers), the
   italic line ABOVE the heading and an optional line under it. The italic
   line is the banner's Overlay caption, moved above the heading with `order`
   so the <h1> stays first in reading order; the line under the heading is the
   heading's Accent, set as its own smaller line. */
.page-hero.static-hero.static-hero--height-standard { min-height: clamp(280px, 26.7vw, 462px) !important; }
.page-hero.static-hero {
    margin: 0;
    border: 0;
    padding: 0;
    min-height: clamp(280px, 26.7vw, 462px);
    display: flex;
    align-items: center;
    position: relative;
    isolation: isolate;
    color: #fff;
}
.page-hero.static-hero > .container {
    width: auto;
    max-width: 1728px;
    margin: 0 auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-block: 32px;
    padding-inline: max(var(--prc-gutter), calc(min(50%, 864px) - 774px));
}
/* 722 is the drawn heading box: it is what breaks "We are Dorset's premier
   fleet" over three lines. A short heading that must stay on one line wider
   than the box (Nationwide app) keeps its words together with a no-break space
   in the content. */
.page-hero.static-hero .static-hero__heading {
    max-width: 722px;
    margin: 0;
    color: #fff;
    font-size: var(--font-size-h1);
    font-weight: 700;
    line-height: var(--lh-h1);
    text-transform: uppercase;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.page-hero.static-hero .static-hero__heading-accent {
    display: block;
    margin-top: 12px;
    color: #fff;
    font-size: clamp(14px, 1.04vw, 18px);
    font-weight: 400;
    line-height: 1.4;
}
.page-hero.static-hero .static-hero__caption {
    order: -1;
    margin: 0 0 4px;
    max-width: 865px;
    color: #fff;
    font-size: clamp(20px, 2.08vw, 36px);
    font-style: italic;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.page-hero.static-hero .static-hero__cta-wrap { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 16px; }

/* A service page opening with the PRC hero prints its summary in core's title
   band above it; the hero holds the page's heading and the summary is the
   tile's line, so the band stands down. */
.page-body-heading:has(+ .page-body > .container > .builder-block--prc_hero:first-child) { display: none; }

/* The heading band on a page with no banner (News). */
.page-body-heading { padding: clamp(40px, 4.6vw, 80px) 0 0; }
.page-body-heading:not(:has(> .container > *)) { display: none; }
/* A page with no banner that opens on a card feed (the News listing) starts
   straight on its cards in the design; the h1 stays for screen readers and
   search, so it is hidden visually, never removed. */
.page-body-heading:has(+ .page-body > .container > .builder-block--content_feed:first-child) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.page-body-heading:has(+ .page-body > .container > .builder-block--content_feed:first-child) + .page-body > .container > .builder-block:first-child { padding-top: clamp(40px, 3.82vw, 66px); }
.page-body-heading:has(+ .page-body > .container > .builder-block--content_feed:first-child) + .page-body > .container > .builder-block:first-child .card-grid { margin-top: 0; }
.page-body-heading > .container {
    width: auto;
    max-width: 1728px;
    margin: 0 auto;
    padding-inline: max(var(--prc-gutter), calc(min(50%, 864px) - 779px));
}
.page-body-heading h1 { font-size: var(--font-size-h2); line-height: var(--lh-h2); color: var(--color-h1); }

/* ── Home and Taxis hero (site block prc_hero) ───────────────────────────────
   Figma 2007:451 / 2031:432. The photo fills the band under a 28% wash; the
   copy runs 82 -> 947 on the left and the quote card is 605 wide on the
   right. 959px tall on Home, 780 on Taxis ("Tall" off). */
.page-body .builder-block.builder-block--prc_hero {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}
.prc-hero {
    position: relative;
    isolation: isolate;
    background: var(--color-bg-alt);
    color: #fff;
}
.prc-hero__media,
.prc-hero__media picture { position: absolute; inset: 0; z-index: -2; display: block; }
.prc-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.prc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, .28);
}
.prc-hero__inner {
    max-width: 1728px;
    min-height: clamp(560px, 45.1vw, 780px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: clamp(32px, 3vw, 52px);
    padding: clamp(40px, 3.1vw, 54px) clamp(20px, 7.18vw, 124px) clamp(40px, 3.1vw, 54px) max(var(--prc-gutter), 4.75vw);
}
.prc-hero--tall .prc-hero__inner { min-height: clamp(600px, 55.5vw, 959px); padding-top: calc(clamp(40px, 3.1vw, 54px) + clamp(0px, 2.3vw, 40px)); }
.prc-hero--with-quote .prc-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 605px); }
.prc-hero__text { display: flex; flex-direction: column; align-items: flex-start; max-width: 865px; }
.prc-hero__eyebrow {
    order: -1;
    margin: 0 0 4px;
    font-size: clamp(20px, 2.08vw, 36px);
    font-style: italic;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.prc-hero__heading {
    margin: 0 0 clamp(12px, 1.2vw, 20px);
    color: #fff;
    font-size: var(--font-size-h1);
    font-weight: 700;
    line-height: var(--lh-h1);
    text-transform: uppercase;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.prc-hero__body {
    max-width: 781px;
    margin: 0 0 clamp(24px, 3.36vw, 58px);
    font-size: 16px;
    line-height: 26px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}
.prc-hero__actions { display: flex; flex-wrap: wrap; gap: 16px clamp(16px, 1.6vw, 28px); }
.prc-hero__actions .btn { min-width: 159px; }
.prc-hero__actions .btn-primary { min-width: 187px; }
.prc-hero__strap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px clamp(8px, 0.75vw, 13px); margin-top: clamp(40px, 3.7vw, 64px); }
.prc-hero__strap-label { margin: 0 0 4px; font-size: 14px; line-height: 1.5; text-transform: uppercase; }
.prc-hero__strap-heading { max-width: 463px; margin: 0; font-size: clamp(26px, 2.43vw, 42px); font-weight: 700; line-height: 1; text-transform: uppercase; }
.prc-hero__strap-logo { align-self: flex-end; margin-bottom: 6px; }
.prc-hero__strap-logo img { width: clamp(160px, 13.7vw, 237px); height: auto; }

/* The quote card (Figma 2007:456): white, 12px corners, pink-outlined fields
   70px tall, the route legend sitting in the first field's border. */
.prc-quote {
    align-self: center;
    margin: 0;
    padding: clamp(28px, 3.1vw, 54px) clamp(20px, 2.1vw, 37px) clamp(24px, 2.1vw, 36px);
    background: #fff;
    border-radius: 12px;
    color: #000;
    font-family: var(--font-family);
}
.prc-quote__route { position: relative; margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 21px; }
/* The legend sits on the first field's top border, its line centred on the
   border (-0.65em is half its 1.3 line height). Absolute is load-bearing: a
   relative legend stays in the fieldset's own top border area, so it sits
   above the first field and pushes every field down, off the drawn notch.
   The white band behind it is the notch: only as tall as the border needs,
   so it does not hide the top of the field's focus outline. */
.prc-quote__title {
    position: absolute;
    top: -0.65em;
    left: 17px;
    width: auto;
    margin: 0;
    padding: 0 4px;
    z-index: 1;
    background: linear-gradient(transparent calc(50% - 7px), #fff calc(50% - 7px), #fff calc(50% + 7px), transparent calc(50% + 7px));
    color: var(--color-primary);
    font-size: clamp(20px, 1.39vw, 24px);
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
}
.prc-quote__field { display: block; }
.prc-quote__field input {
    width: 100%;
    height: 70px;
    padding: 0 20px;
    border: 1px solid var(--color-primary);
    border-radius: 12px;
    background: #fff;
    color: #000;
    font: 400 18px/1 var(--font-family);
    text-align: center;
}
.prc-quote__field input::placeholder { color: #000; opacity: 1; text-transform: uppercase; }
.prc-quote__vehicle { display: flex; align-items: center; gap: 6px; margin: 25px 0 0 33px; font-size: 18px; }
/* Sized outright: the person icon's viewBox is narrow, so height:auto would
   stretch it to twice its drawn height. */
.prc-quote__vehicle img { display: block; width: 31px; height: 31px; object-fit: contain; }
.prc-quote__vehicle img:first-child { width: 44px; height: 44px; margin-right: 6px; }
.prc-quote__vehicle img:last-child { width: 32px; height: 32px; }
.prc-quote__vehicle span { margin-left: 10px; }
.prc-quote__fare-label { margin: 22px 0 6px; font-size: 10px; line-height: 1.5; text-align: center; text-transform: uppercase; }
.prc-quote__fares { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.1vw, 36px); }
.prc-quote__fare {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 101px;
    margin: 0;
    border: 1px solid var(--color-primary);
    border-radius: 12px;
}
.prc-quote__time { font-size: 10px; line-height: 1.5; text-transform: uppercase; }
.prc-quote__price { color: var(--color-primary); font-size: 40px; font-weight: 700; line-height: 1.3; }
.prc-quote__price small { margin-right: 6px; font-size: 24px; font-weight: 400; }
.prc-quote__calc,
.prc-quote__book {
    display: block;
    width: 100%;
    min-height: 70px;
    margin-top: 32px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    font: italic 700 18px/1.2 var(--font-family);
    text-transform: uppercase;
    cursor: pointer;
}
.prc-quote__calc { background: #000; }
.prc-quote__book { margin-top: 32px; background: var(--prc-gradient); border: 1px solid var(--color-primary); font-style: normal; }
.prc-quote__calc:hover { background: #333; }
.prc-quote__book:hover { background: var(--color-primary-hover); }
.prc-quote__note { margin: 16px 0 0; font-size: 14px; line-height: 1.5; text-align: center; }
.prc-quote__note a { color: var(--color-primary); font-weight: 700; }

/* Address suggestions under each quote field (public/js/prc-quote.js). Not
   drawn in the Figma: white, the field's pink outline and corners, the
   highlighted row in the primary colour (white on it is 4.7:1). */
.prc-quote__field { position: relative; }
.prc-quote__options {
    position: absolute;
    z-index: 5;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 300px;
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
    list-style: none;
    background: #fff;
    border: 1px solid var(--color-primary);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    text-align: left;
}
.prc-quote__options[hidden] { display: none; }
.prc-quote__option { padding: 10px 20px; font-size: 16px; line-height: 1.4; cursor: pointer; }
.prc-quote__option:hover,
.prc-quote__option.is-active { background: var(--color-primary); color: #fff; }
.prc-quote__calc:disabled { background: #333; cursor: progress; }
a.prc-quote__book { display: flex; align-items: center; justify-content: center; text-decoration: none; }
/* Core's a:hover (frontend.css) outranks the button colour and turns the text
   the same pink as this hover background, so the words vanish. */
a.prc-quote__book:hover,
a.prc-quote__book:focus-visible { color: #fff; text-decoration: none; }
.prc-quote__note:empty { margin: 0; }
/* A message is a problem to fix (or the phone number when quotes are down),
   so it reads as one: tinted, outlined and bold, not the small grey line it
   was. Black on the 6% pink tint is well over 4.5:1. */
.prc-quote__note:not(:empty) {
    margin: 20px 0 0;
    padding: 12px 16px;
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    background: #fdf0f7;
    background: color-mix(in srgb, var(--color-primary) 6%, #fff);
    color: #000;
    font-size: 15px;
    font-weight: 600;
}
.prc-quote__note:not(:empty) + .prc-quote__actions { margin-top: 16px; }
/* Calculate and Reset share a row (Reset was asked for by Jamie, after
   United Taxis' box): Calculate keeps the drawn black bar, Reset is the
   narrow outlined button beside it, the same height. */
.prc-quote__actions { display: flex; gap: 16px; margin-top: 32px; }
.prc-quote__actions .prc-quote__calc { flex: 1 1 auto; width: auto; margin-top: 0; }
.prc-quote__reset {
    flex: 0 0 auto;
    min-height: 70px;
    padding: 0 28px;
    border: 1px solid var(--color-primary);
    border-radius: 12px;
    background: #fff;
    color: var(--color-primary);
    font: 700 18px/1.2 var(--font-family);
    text-transform: uppercase;
    cursor: pointer;
}
.prc-quote__reset:hover { background: #fdf0f7; background: color-mix(in srgb, var(--color-primary) 6%, #fff); }
.prc-quote__trip { margin: 12px 0 0; font-size: 16px; font-weight: 600; line-height: 1.4; text-align: center; }
.prc-quote__trip:empty { margin: 0; }
.prc-quote__small { margin: 14px 0 0; font-size: 12px; line-height: 1.5; text-align: center; }
.prc-quote__small a { color: var(--color-primary); font-weight: 700; }
.prc-quote__app { margin: 16px 0 0; font-size: 13px; line-height: 1.5; text-align: center; }
.prc-quote__app a { color: var(--color-primary); font-weight: 700; }

@media (max-width: 1100px) {
    .prc-hero--with-quote .prc-hero__inner { grid-template-columns: minmax(0, 1fr); }
    .prc-quote { max-width: 605px; width: 100%; }
    /* One column means the copy sits wherever the photo is brightest: the wash
       deepens so white 16px copy keeps 4.5:1 over any part of it. */
    .prc-hero::before { background: rgba(0, 0, 0, .5); }
}

/* ── Block type ───────────────────────────────────────────────────────────── */

.builder-block__eyebrow {
    margin: 0 0 2px;
    color: var(--eyebrow-color);
    font-size: clamp(15px, 1.04vw, 18px);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.6;
    text-transform: uppercase;
}
.page-body .builder-block .builder-block__heading {
    margin: 0 0 clamp(16px, 1.6vw, 28px);
    font-size: var(--font-size-h2);
    font-weight: 700;
    line-height: var(--lh-h2);
    text-transform: uppercase;
}
.builder-block__heading-accent { color: var(--heading-accent-color); }

/* Headings typed into rich text: core's `.page-body .cms-content h2` is 0,2,1
   (cascade trap 6), so these carry `.page-body` and one more class. */
.page-body .builder-block .cms-content h2 {
    margin: 0 0 clamp(16px, 1.6vw, 28px);
    color: var(--color-h2);
    font-size: var(--font-size-h2);
    line-height: var(--lh-h2);
}
.page-body .builder-block .cms-content h3 {
    margin: 0 0 14px;
    color: var(--color-h3);
    font-size: var(--font-size-h3);
    line-height: var(--lh-h3);
}
.page-body .builder-block .cms-content h4 { margin: 0 0 10px; font-size: 18px; font-weight: 700; line-height: 1.4; text-transform: uppercase; }
.page-body .builder-block .cms-content p,
.page-body .builder-block .cms-content ul,
.page-body .builder-block .cms-content ol { margin: 0 0 26px; font-size: 16px; line-height: 26px; }
.page-body .builder-block .cms-content ul,
.page-body .builder-block .cms-content ol { padding-left: 24px; }
.page-body .builder-block .cms-content > :last-child { margin-bottom: 0; }
.page-body .builder-block .cms-content a:not(.btn) { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.page-body .builder-block .cms-content a:not(.btn):hover { color: var(--color-primary); }

/* The rich-text formats in cms-site.php (editor_style_formats). */
.page-body .builder-block .cms-content p.prc-eyebrow,
.prc-eyebrow {
    margin: 0 0 2px;
    color: var(--eyebrow-color);
    font-size: clamp(15px, 1.04vw, 18px);
    line-height: 1.6;
    text-transform: uppercase;
}
.page-body .builder-block .cms-content p.prc-subhead,
.prc-subhead {
    margin: 0 0 clamp(28px, 2.43vw, 42px);
    font-size: clamp(16px, 1.04vw, 18px);
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
}
/* The eyebrow belongs to the heading under it, so the heading closes up. */
.page-body .builder-block .cms-content p.prc-eyebrow + h2,
.page-body .builder-block .cms-content p.prc-eyebrow + h3 { margin-top: 0; }
.page-body .builder-block .cms-content h2 + p.prc-subhead { margin-top: calc(7px - clamp(16px, 1.6vw, 28px)); }
/* Core spaces list items 0.3rem apart; the design sets them on the line. */
.page-body .builder-block .cms-content li { margin-bottom: 0; }
a.prc-link,
.page-body .builder-block .cms-content a.prc-link {
    color: var(--color-primary);
    font-size: clamp(15px, 1.04vw, 18px);
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    text-transform: uppercase;
}
a.prc-link:hover,
.page-body .builder-block .cms-content a.prc-link:hover { text-decoration: underline; color: var(--color-primary); }
/* A paragraph holding only buttons is a row of buttons, 28px apart. */
.page-body .builder-block .cms-content p:has(> a.btn) { display: flex; flex-wrap: wrap; gap: 16px 28px; }
.page-body .builder-block .cms-content p:has(> a.btn) { margin-top: 40px; }
.page-body .builder-block .cms-content p:has(> a.btn) .btn-outline { min-width: 159px; }
.page-body .builder-block .cms-content p.prc-contact-line,
.prc-contact-line {
    display: grid;
    grid-template-columns: clamp(110px, 10.4vw, 180px) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(16px, 2.2vw, 38px);
    margin: 0 0 clamp(24px, 2.2vw, 38px);
    font-size: clamp(17px, 1.39vw, 24px);
    font-weight: 700;
    line-height: 1.4;
}
.prc-contact-line img { grid-row: 1 / span 3; width: 100%; height: auto; }
.prc-contact-line a,
.page-body .builder-block .cms-content .prc-contact-line a:not(.btn) { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.prc-contact-line a:hover { color: var(--color-primary); }
.prc-contact-line br { display: none; }
.prc-contact-line > a,
.prc-contact-line > span { grid-column: 2; }

/* ── Bands ──────────────────────────────────────────────────────────────────
   0,3,0 so they beat the shell rule above whatever order the classes arrive. */
.page-body .builder-block.u-prc-band-pale { background: var(--color-bg-alt); }
.page-body .builder-block.u-prc-band-brand { background: var(--prc-gradient); color: #fff; }
.page-body .builder-block.u-prc-band-dark { background: #000; color: #fff; }
.page-body .builder-block.u-prc-band-brand :is(.builder-block__eyebrow, .builder-block__heading, .cms-content, .cms-content h2, .cms-content h3, .builder-stat__value, .builder-stat__label, .builder-stat__subtext, .builder-quote__text, .builder-quote__cite),
.page-body .builder-block.u-prc-band-dark :is(.builder-block__eyebrow, .builder-block__heading, .cms-content, .cms-content h2, .cms-content h3, .builder-stat__value, .builder-stat__label, .builder-stat__subtext, .builder-quote__text, .builder-quote__cite) { color: #fff; }
.page-body .builder-block.u-prc-band-brand .btn-outline,
.page-body .builder-block.u-prc-band-dark .btn-outline { border-color: #fff; color: #fff; }
.page-body .builder-block.u-prc-band-brand .btn-primary { background: #fff; color: var(--color-primary); }
.page-body .builder-block.u-prc-band-pale { --prc-field-bg: #fff; }

/* ── Centred section (u-prc-centred) ─────────────────────────────────────────
   Figma 2034:299, 2045:1624, 2035:865: the heading on the centre line with a
   line of copy under it. */
.page-body .builder-block.u-prc-centred { text-align: center; }
.page-body .builder-block.u-prc-centred .builder-block__heading,
.page-body .builder-block.u-prc-centred .cms-content h2 { max-width: 1081px; margin-inline: auto; }
.page-body .builder-block.u-prc-centred .cms-content > :not(h2) { max-width: 1120px; margin-inline: auto; }
.page-body .builder-block.u-prc-centred .cms-content p:has(> a.btn) { justify-content: center; }
/* A centred heading leading straight into the section under it (Contact). */
/* Text only: the helper also centres a form's heading, and on the form block
   these would open a white strip under its band. */
.page-body .builder-block--text.u-prc-centred:has(+ .builder-block) { padding-bottom: clamp(24px, 2.2vw, 38px); }
.page-body .builder-block--text.u-prc-centred + .builder-block { padding-top: clamp(16px, 1.6vw, 28px); }
/* Contact: the heading and its line sit close over the two columns. */
.page-body .builder-block--text.u-prc-centred:has(+ .builder-block--form_text) { padding-bottom: 12px; }
.page-body .builder-block--text.u-prc-centred:has(+ .builder-block--form_text) .cms-content h2 { margin-bottom: 15px; }
.page-body .builder-block.u-prc-centred.u-prc-band-pale + .builder-block.u-prc-band-pale { padding-top: 0; }

/* ── Call and app strip (text + u-prc-app-strip) ─────────────────────────────
   Figma 2007:196, a Synced Block placed under every banner. 170px gradient
   band: "Call today 01202 37 37 37", "Download the app today" with the arrow,
   the two store icons and the QR code on a white tile, all on one line. The
   copy is ordinary rich text, so the client edits the number and links. */
/* Above the next block: the Our App phone photo tucks up under it. */
.page-body .builder-block.u-prc-app-strip {
    position: relative;
    z-index: 1;
    background: var(--prc-gradient);
    color: #fff;
    padding-block: 22px;
}
.page-body .builder-block.u-prc-app-strip .cms-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px clamp(20px, 1.62vw, 28px);
    min-height: 126px;
}
/* Core gives every rich-text image a 16px top and bottom margin, which made
   the strip 33px taller than drawn. */
.page-body .builder-block.u-prc-app-strip .cms-content img { margin-block: 0; }
.page-body .builder-block.u-prc-app-strip .cms-content p {
    margin: 0;
    color: #fff;
    font-size: clamp(22px, 2.08vw, 36px);
    line-height: 1.2;
    text-transform: uppercase;
}
.page-body .builder-block.u-prc-app-strip .cms-content p:first-child { margin-right: clamp(0px, 1.97vw, 34px); }
.page-body .builder-block.u-prc-app-strip .cms-content a { color: #fff; text-decoration: none; }
.page-body .builder-block.u-prc-app-strip .cms-content strong { font-weight: 700; }
.page-body .builder-block.u-prc-app-strip .cms-content em { font-style: italic; }
/* The curved arrow after "app today" (Figma 2007:208), drawn from the same
   white SVG the footer uses. Decorative. */
.page-body .builder-block.u-prc-app-strip .cms-content p:nth-child(2)::after {
    content: "";
    display: inline-block;
    width: 52px;
    height: 14px;
    margin-left: 12px;
    vertical-align: middle;
    background: url('/images/prc/icons/arrow.svg') center / contain no-repeat;
}
.page-body .builder-block.u-prc-app-strip .cms-content p:has(img) { display: flex; align-items: center; gap: clamp(16px, 2.08vw, 36px); }
.page-body .builder-block.u-prc-app-strip .cms-content p:has(img) a { display: inline-flex; line-height: 0; }
.page-body .builder-block.u-prc-app-strip .cms-content p:has(img) a img { width: auto; height: clamp(40px, 3.41vw, 59px); }
.page-body .builder-block.u-prc-app-strip .cms-content img.prc-qr {
    width: clamp(96px, 7.35vw, 127px);
    height: auto;
    margin-left: clamp(8px, 1.3vw, 23px);
    padding: clamp(7px, 0.52vw, 9px);
    background: #fff;
    border-radius: 12px;
}
@media (max-width: 900px) {
    .page-body .builder-block.u-prc-app-strip .cms-content { justify-content: center; text-align: center; }
    .page-body .builder-block.u-prc-app-strip .cms-content img.prc-qr { display: none; }
}

/* The column gap for every two-column block. It sits above the image and video
   rules on purpose: at the same weight, a later copy would win and every
   image + text section would lose its drawn gap. */
.page-body .builder-block .content-row-grid { gap: clamp(32px, 6.4vw, 110px); }

/* ── Image + text ────────────────────────────────────────────────────────────
   Figma 2034:301 / 2042:939 / 2044:1237. Copy 678 wide at x 85, the photo
   660 square (or 663 x 466) on the right, vertically centred on the copy. */
.page-body .builder-block--image_text .content-row-grid {
    grid-template-columns: minmax(0, 678fr) minmax(0, 660fr);
    gap: clamp(32px, 8.2vw, 141px);
    align-items: center;
}
.page-body .builder-block--image_text .content-row-grid:has(> .builder-block__image:first-child) { grid-template-columns: minmax(0, 660fr) minmax(0, 678fr); }
.page-body .builder-block--image_text .cms-content > p,
.page-body .builder-block--image_text .cms-content > ul { max-width: 678px; }
.page-body .builder-block--image_text .builder-block__image img { width: 100%; height: auto; border-radius: 0; object-fit: cover; }
/* The Our App phone is a cut-out on a clear background: no crop, and it may
   hang past the band like the drawn one. */
.page-body .builder-block--image_text .builder-block__image img[src$=".png"] { object-fit: contain; }
@media (max-width: 900px) {
    .page-body .builder-block--image_text .content-row-grid,
    .page-body .builder-block--image_text .content-row-grid:has(> .builder-block__image:first-child) { grid-template-columns: 1fr; }
}

/* Drawn rows stop short of the grid's right edge: copy 678, gap 141, photo 660
   (1479 in all; 1492 with the photo first and a 154 gap). */
@media (min-width: 901px) {
    .page-body .builder-block.builder-block--image_text .content-row-grid { max-width: 1479px; gap: clamp(32px, 8.16vw, 141px); }
    .page-body .builder-block.builder-block--image_text .content-row-grid:has(> .builder-block__image:first-child) { max-width: 1492px; gap: clamp(32px, 8.91vw, 154px); }
}
.page-body .builder-block.builder-block--image_text .cms-content h2 { max-width: 673px; margin-bottom: 19px; }
.page-body .builder-block.builder-block--image_text .cms-content p:has(> a.btn) { margin-top: clamp(32px, 3.13vw, 54px); }

/* Square photo beside the copy (image_text + u-prc-square-photo, Figma
   2038:2, 2042:939, 2044:1237): 660 x 660, cropped to fill. */
.page-body .builder-block.u-prc-square-photo { padding-block: clamp(48px, 4.57vw, 79px); }
.page-body .builder-block.u-prc-square-photo .builder-block__image img { aspect-ratio: 1; object-fit: cover; }

/* App phone (image_text + u-prc-app-phone, Figma 2070:47): the copy indented
   to 119, the phone photo at full size, tucked up under the pink strip above
   and spilling past the band's foot as drawn. The percentages are of the photo
   column, so the overhang scales with it. */
.page-body .builder-block.u-prc-app-phone {
    padding-block: clamp(40px, 4.4vw, 76px) clamp(56px, 7.8vw, 135px);
    padding-left: max(var(--prc-gutter), calc(min(50%, 864px) - 745px));
    padding-right: max(var(--prc-gutter), calc(min(50%, 864px) - 760px));
}
@media (min-width: 901px) {
    .page-body .builder-block.builder-block--image_text.u-prc-app-phone .content-row-grid { grid-template-columns: minmax(0, 672fr) minmax(0, 833fr); column-gap: 0; max-width: none; align-items: start; }
    .page-body .builder-block.u-prc-app-phone .builder-block__image { margin: calc(-1 * clamp(40px, 4.4vw, 76px) - 5.9%) 0 -22.4%; }
    .page-body .builder-block.u-prc-app-phone .builder-block__image img { display: block; }
}
.page-body .builder-block.u-prc-app-phone .cms-content h2 { margin-bottom: 20px; }
.page-body .builder-block.u-prc-app-phone .cms-content > p:not(:has(> a.btn)) { max-width: 659px; }
.page-body .builder-block.u-prc-app-phone .cms-content > p:has(> a.btn) { margin-top: 49px; }
.page-body .builder-block.u-prc-app-phone .cms-content > p:has(> a.btn) + p:has(> a.btn) { margin-top: 39px; }

/* ── Video + text (Figma 2033:2, 2093:142) ─────────────────────────────────── */
.page-body .builder-block--video_text .content-row-grid {
    grid-template-columns: minmax(0, 678fr) minmax(0, 667fr);
    gap: clamp(32px, 6.9vw, 120px);
    align-items: center;
}
.page-body .builder-block--video_text .content-row-grid:has(> .builder-video:first-child) { grid-template-columns: minmax(0, 667fr) minmax(0, 678fr); }
.builder-video__frame { border-radius: 0; overflow: hidden; }
.builder-video__play { background: var(--prc-gradient); }
@media (max-width: 900px) {
    .page-body .builder-block--video_text .content-row-grid,
    .page-body .builder-block--video_text .content-row-grid:has(> .builder-video:first-child) { grid-template-columns: 1fr; }
}

@media (min-width: 901px) {
    .page-body .builder-block.builder-block--video_text .content-row-grid { max-width: 1479px; gap: clamp(32px, 8.16vw, 141px); }
}

/* ── Columns ─────────────────────────────────────────────────────────────── */
.page-body .builder-block .builder-grid { gap: clamp(24px, 3vw, 52px); }

/* Bold capitals list beside the copy (Figma 2038:36, Our drivers). A list in
   either column renders with no bullets, 24px bold capitals, 48px apart. */
.page-body .builder-block.u-prc-ticks .cms-content ul { list-style: none; padding: 0; }
.page-body .builder-block.u-prc-ticks .cms-content ul li {
    margin: 0 0 12px;
    font-size: clamp(18px, 1.39vw, 24px);
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
}
.page-body .builder-block.u-prc-ticks .content-row-grid { align-items: start; }
@media (min-width: 901px) {
    .page-body .builder-block.u-prc-ticks .content-row-grid { grid-template-columns: minmax(0, 812fr) minmax(0, 639fr); gap: clamp(32px, 6.19vw, 107px); }
}
.page-body .builder-block.u-prc-ticks { padding-bottom: clamp(48px, 4.05vw, 70px); }
.page-body .builder-block.u-prc-ticks .cms-content h2 { margin-bottom: 23px; }

/* Columns of white cards (Figma 2039:680, What you need to see & do). Core's
   Callout format becomes the card, so the client adds a card by applying
   Formats > Callout to a new paragraph; outside this helper a callout keeps
   its normal look. */
.page-body .builder-block.u-prc-card-columns .cms-content { text-align: center; }
.page-body .builder-block.u-prc-card-columns .cms-content > h2 { font-size: var(--font-size-h3); line-height: 1.5; margin-bottom: 0; }
.page-body .builder-block.u-prc-card-columns .cms-content > h2 + p { margin-bottom: clamp(20px, 1.6vw, 28px); }
.page-body .builder-block.u-prc-card-columns .cms-content .callout {
    margin: 0 0 25px;
    padding: clamp(28px, 3vw, 52px) clamp(20px, 2.5vw, 43px) clamp(24px, 1.8vw, 30px);
    background: #fff;
    border: 0;
    border-radius: 0;
    color: #000;
    text-align: center;
}
.page-body .builder-block.u-prc-card-columns .cms-content .callout h3 {
    margin: 0 0 clamp(16px, 1.5vw, 26px);
    font-size: clamp(22px, 2.08vw, 36px);
    line-height: 1;
}
.page-body .builder-block.u-prc-card-columns .cms-content .callout p { margin: 0 0 18px; }
.page-body .builder-block.u-prc-card-columns .cms-content .callout > :last-child { margin-bottom: 0; }
.page-body .builder-block.u-prc-card-columns .cms-content .callout::before { display: none; }

/* ── Photo tiles, two across (content_feed services cards + u-prc-tiles) ─────
   Figma 2007:157. Four 740 x 480 tiles, 53px apart across and 50 down: the
   photo, then at the foot a small label, the 42px title, a line and the
   gradient "Find out more". The card markup is core's (photo first inside
   .card-body), so the photo is lifted out of the flow and the copy stacks at
   the foot. The small label is the first line of the service's Card heading:
   type the label, a line break, then the title. Without a line break the
   heading prints whole at full size. */
.page-body .builder-block.u-prc-tiles > .builder-block__heading { margin-bottom: 4px; font-size: var(--font-size-h3); text-align: center; }
.page-body .builder-block.u-prc-tiles > .builder-block__eyebrow { text-align: center; font-size: 14px; }
/* Here the label sits UNDER the heading ("PRC Streamline group services"). */
.page-body .builder-block.u-prc-tiles:has(> .builder-block__heading) { display: flex; flex-direction: column; }
.page-body .builder-block.u-prc-tiles > .builder-block__eyebrow { order: 1; margin-bottom: clamp(32px, 3.4vw, 59px); }
.page-body .builder-block.u-prc-tiles > .builder-block__heading { order: 0; }
.page-body .builder-block.u-prc-tiles > :not(.builder-block__heading):not(.builder-block__eyebrow) { order: 2; }
.page-body .builder-block.u-prc-tiles .card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 740px));
    justify-content: center;
    gap: clamp(20px, 2.9vw, 50px) clamp(20px, 3.07vw, 53px);
    max-width: none;
    margin: 0;
}
.page-body .builder-block.u-prc-tiles .card {
    aspect-ratio: 740 / 480;
    overflow: hidden;
    isolation: isolate;
    background: var(--color-bg-alt);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    position: relative;
}
.page-body .builder-block.u-prc-tiles .card .card-body {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 24px clamp(20px, 3.1vw, 54px) clamp(24px, 2.4vw, 41px);
    color: #fff;
    text-align: left;
}
/* Not drawn: white type over a bright photo needs a fade at the foot to stay
   readable (4.5:1 for the 20px line), so one is added under the copy only. */
.page-body .builder-block.u-prc-tiles .card .card-body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .65) 100%);
}
.page-body .builder-block.u-prc-tiles .card .card-body > picture,
.page-body .builder-block.u-prc-tiles .card .card-body > .card-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
}
.page-body .builder-block.u-prc-tiles .card .card-image { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.page-body .builder-block.u-prc-tiles .card:hover .card-image { transform: scale(1.03); }
.page-body .builder-block.u-prc-tiles .card .card-body h3 {
    margin: 0 0 6px;
    color: #fff;
    font-size: clamp(26px, 2.43vw, 42px);
    font-weight: 700;
    line-height: .86;
    text-transform: uppercase;
}
.page-body .builder-block.u-prc-tiles .card .card-body h3:has(br)::first-line {
    font-size: 10px;
    font-weight: 400;
    line-height: 2.1;
}
.page-body .builder-block.u-prc-tiles .card .card-body h3 a { color: inherit; text-decoration: none; }
.page-body .builder-block.u-prc-tiles .card .card-body h3 a::after { content: ""; position: absolute; inset: 0; }
.page-body .builder-block.u-prc-tiles .card .card-body > p:not(.card-actions) {
    display: block;
    margin: 6px 0 0;
    color: #fff;
    font-size: clamp(15px, 1.16vw, 20px);
    line-height: 1.35;
    text-transform: uppercase;
}
.page-body .builder-block.u-prc-tiles .card .card-actions { position: relative; z-index: 1; margin: clamp(16px, 1.3vw, 23px) 0 0; }
.page-body .builder-block.u-prc-tiles .card .card-actions .btn {
    min-width: 156px;
    min-height: 50px;
    padding: 0 20px;
    border: 0;
    background: var(--prc-gradient);
    color: #fff;
}
.page-body .builder-block.u-prc-tiles .card .card-actions .btn:hover { background: var(--color-primary-hover); }
.page-body .builder-block.u-prc-tiles .card:has(h3 a:focus-visible) { outline: 3px solid #000; outline-offset: 4px; }
@media (max-width: 760px) {
    .page-body .builder-block.u-prc-tiles .card-grid { grid-template-columns: minmax(0, 1fr); }
}

.page-body .builder-block.u-prc-tiles { padding-block: clamp(32px, 2.9vw, 50px); }
.page-body .builder-block.u-prc-tiles > .builder-block__heading { line-height: 1.5; margin-bottom: 7px; }
.page-body .builder-block.u-prc-tiles > .builder-block__eyebrow { margin-bottom: clamp(24px, 2.2vw, 38px); }
/* Full width, or the heading shrinks to its small first line and the title
   breaks onto two lines. */
.page-body .builder-block.u-prc-tiles .card .card-body h3 { align-self: stretch; }
.page-body .builder-block.u-prc-tiles .card .card-actions .btn { font-size: 14px; }

/* ── Feeds: cards (News, and every other card feed) ─────────────────────────
   Figma 2038:480. 463 square pale blue cards, three across, 54px apart: the
   pink date, a 52px title, the summary and a pink "Read more". Core prints the
   date after the title, so the card is a column and the date is moved up. */
.builder-block--content_feed .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3.1vw, 54px) clamp(20px, 3.1vw, 54px); }
.builder-block--content_feed:not(.u-prc-tiles) .card .card-body h3 { align-self: stretch; overflow-wrap: break-word; }
.builder-block--content_feed .card {
    background: var(--card-bg);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    position: relative;
}
.builder-block--content_feed .card:hover { box-shadow: none; transform: none; }
.builder-block--content_feed .card .card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    padding: clamp(28px, 2.6vw, 45px) clamp(24px, 2.4vw, 41px) clamp(28px, 2.3vw, 40px);
}
.builder-block--content_feed .card .card-body > picture,
.builder-block--content_feed .card .card-body > .card-image {
    display: block;
    order: -2;
    width: calc(100% + 2 * clamp(24px, 2.4vw, 41px));
    max-width: none;
    margin: calc(-1 * clamp(28px, 2.6vw, 45px)) calc(-1 * clamp(24px, 2.4vw, 41px)) clamp(24px, 2vw, 34px);
    aspect-ratio: 465 / 334;
    object-fit: cover;
}
.builder-block--content_feed .card .card-body > picture img { width: 100%; height: 100%; object-fit: cover; }
.builder-block--content_feed .card .card-body .card-meta {
    order: -1;
    margin: 0 0 10px;
    color: var(--color-primary);
    font-size: clamp(15px, 1.04vw, 18px);
    line-height: 1.5;
    text-transform: uppercase;
}
.builder-block--content_feed .card .card-body h3 {
    margin: 0 0 clamp(16px, 1.6vw, 28px);
    font-size: clamp(30px, 3.01vw, 52px);
    font-weight: 700;
    line-height: 1.04;
    text-transform: uppercase;
}
.builder-block--content_feed .card .card-body h3 a { color: var(--card-title); text-decoration: none; }
.builder-block--content_feed .card .card-body h3 a::after { content: ""; position: absolute; inset: 0; }
.builder-block--content_feed .card .card-body > p { margin: auto 0 0; font-size: 16px; line-height: 26px; }
.builder-block--content_feed .card .card-body > p.card-subtitle { margin: 0 0 12px; font-weight: 700; }
/* "Read more" is drawn under every card. Core prints no such link on a news
   card, and the heading is already the card's one link (stretched over it),
   so this is its visible sign only, hidden from screen readers. */
.builder-block--content_feed .card:not(:has(.card-actions)) .card-body::after {
    content: "Read more" / "";
    margin-top: clamp(14px, 1.2vw, 20px);
    color: var(--color-primary);
    font-size: clamp(15px, 1.04vw, 18px);
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
}
.builder-block--content_feed .card .card-actions { position: relative; z-index: 1; margin: clamp(14px, 1.2vw, 20px) 0 0; }
.builder-block--content_feed .card .card-actions .btn {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary);
    font-size: clamp(15px, 1.04vw, 18px);
}
.builder-block--content_feed .card .card-actions .btn:hover { text-decoration: underline; background: none; color: var(--color-primary); }
.builder-block--content_feed .card:has(h3 a:focus-visible) { outline: 3px solid #000; outline-offset: 4px; }
/* "View more stories": the wide gradient button under the grid (2038:540). */
.builder-block--content_feed .content-section > .container > p:last-child,
.builder-block--content_feed .builder-feed__list > p:last-child { margin: clamp(32px, 2.9vw, 50px) 0 0; text-align: center; }
.builder-block--content_feed .content-section > .container > p:last-child .btn,
.builder-block--content_feed .builder-feed__cta .btn,
.builder-block--content_feed .pagination-wrap .btn {
    min-width: min(536px, 100%);
    min-height: 54px;
    border: 0;
    background: var(--prc-gradient);
    color: #fff;
    font-size: 18px;
    font-style: italic;
}
.page-body .builder-block--content_feed .pagination-wrap:not(:has(*)) { display: none; }
@media (max-width: 1100px) { .builder-block--content_feed .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .builder-block--content_feed .card-grid { grid-template-columns: minmax(0, 1fr); } }

/* Feed list and compact styles keep the same type. */
.builder-block--content_feed .content-list li,
.builder-block--content_feed .compact-list li { border-color: var(--color-border); }

@media (min-width: 1101px) {
    .builder-block--content_feed .card-grid { grid-template-columns: repeat(3, minmax(0, 463px)); justify-content: center; column-gap: clamp(20px, 3.2vw, 55px); }
}
.builder-block--content_feed .card .card-body { padding: clamp(28px, 2.6vw, 45px) clamp(20px, 1.62vw, 28px) clamp(24px, 1.68vw, 29px) clamp(24px, 2.4vw, 41px); }
.builder-block--content_feed:not(.u-prc-tiles) .card .card-body h3 { margin-bottom: clamp(10px, 0.75vw, 13px); }
.builder-block--content_feed .card:not(:has(.card-actions)) .card-body::after { margin-top: clamp(14px, 1.04vw, 18px); }
/* A card photo bleeds to the card's edges past the uneven padding above. */
.builder-block--content_feed:not(.u-prc-tiles) .card .card-body > picture,
.builder-block--content_feed:not(.u-prc-tiles) .card .card-body > .card-image {
    width: calc(100% + clamp(24px, 2.4vw, 41px) + clamp(20px, 1.62vw, 28px));
    margin: calc(-1 * clamp(28px, 2.6vw, 45px)) calc(-1 * clamp(20px, 1.62vw, 28px)) clamp(24px, 2vw, 34px) calc(-1 * clamp(24px, 2.4vw, 41px));
}

/* ── Carousels: the dots ─────────────────────────────────────────────────────
   Figma 2007:74. A 54 x 17 pink pill for the current slide, 17px dots for the
   rest, left aligned, no arrows. The design draws the other dots in the pale
   blue, which is near invisible on white (1.1:1); they are outlined in pink
   here so they meet the 3:1 a control needs. The dots stay real buttons. */
.page-body .builder-block .builder-carousel { margin: 0; }
.page-body .builder-block .builder-carousel__controls { justify-content: flex-start; margin-top: clamp(28px, 2.6vw, 45px); gap: 0; }
.page-body .builder-block .builder-carousel__prev,
.page-body .builder-block .builder-carousel__next { display: none; }
.page-body .builder-block .builder-carousel__dots { gap: 19px; }
.page-body .builder-block .builder-carousel__dot {
    width: 17px;
    height: 17px;
    padding: 0;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    background: var(--color-bg-alt);
    transition: width .25s ease;
}
.page-body .builder-block .builder-carousel__dot.is-active { width: 54px; border-radius: 32px; background: var(--color-primary); }
.page-body .builder-block .builder-carousel__dot:hover { background: var(--color-primary); }
.page-body .builder-block .builder-carousel__pause { margin-left: 24px; color: #000; font-size: 12px; }

/* ── Testimonials (content_feed testimonials carousel + u-prc-testimonials) ──
   Figma 2007:73. Four 438-wide cards to a view, centred: the 220px pale blue
   Prata quote mark, five pink 39px stars, the words, the name in Prata and the
   place in pink capitals. The curly quotes core prints round the rich text
   are bare text nodes, so the quote box is set to zero size and its
   paragraphs restored: the marks vanish and the design's own mark is the
   ::before. Core writes an em dash before the place; the design has none, so the
   line is pulled left by the dash and its space (16px in 14px Poppins Bold,
   measured) and that much is clipped off. Change the size and this changes. */
.page-body .builder-block.u-prc-testimonials { padding-block: clamp(24px, 1.6vw, 28px) clamp(40px, 2.3vw, 40px); }
.page-body .builder-block.u-prc-testimonials > .builder-block__eyebrow {
    margin-bottom: clamp(16px, 1.6vw, 28px);
    color: #000;
    font-size: 12px;
    text-transform: none;
}
.builder-block--content_feed.u-prc-testimonials .builder-carousel__slide:has(> .testimonial-card) { flex: 0 0 min(438px, 80%); }
.builder-block--content_feed.u-prc-testimonials .builder-carousel--cards .builder-carousel__track { gap: 0; }
.builder-block--content_feed.u-prc-testimonials .testimonial-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0 clamp(16px, 2.3vw, 40px);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
}
.builder-block--content_feed.u-prc-testimonials .testimonial-card::before {
    content: "\201C";
    display: block;
    height: clamp(80px, 7.2vw, 124px);
    font-family: 'Prata', Georgia, serif;
    font-size: clamp(140px, 12.7vw, 220px);
    line-height: .9;
    color: var(--color-bg-alt);
}
.builder-block--content_feed.u-prc-testimonials .testimonial-card .rating {
    order: 0;
    margin: 0 0 clamp(16px, 0.6vw, 10px);
    color: var(--color-primary);
    font-family: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', 'DejaVu Sans', sans-serif;
    font-size: clamp(28px, 2.26vw, 39px);
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}
.builder-block--content_feed.u-prc-testimonials .testimonial-card .quote {
    order: 1;
    margin: 0 0 clamp(14px, 1.2vw, 20px);
    font-size: 0;
    font-style: normal;
}
.builder-block--content_feed.u-prc-testimonials .testimonial-card .quote > * {
    margin: 0 0 26px;
    color: #000;
    font-size: 16px;
    line-height: 26px;
}
.builder-block--content_feed.u-prc-testimonials .testimonial-card .quote > :last-child { margin-bottom: 0; }
.builder-block--content_feed.u-prc-testimonials .testimonial-card .testimonial-card__avatar { display: none; }
.builder-block--content_feed.u-prc-testimonials .testimonial-card .author {
    order: 2;
    color: #000;
    font-family: 'Prata', Georgia, serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6;
}
.builder-block--content_feed.u-prc-testimonials .testimonial-card .author { display: flex; flex-direction: column; align-items: center; }
.builder-block--content_feed.u-prc-testimonials .testimonial-card .role {
    display: block;
    margin-left: -16px;
    clip-path: inset(0 0 0 16px);
    color: var(--color-primary);
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 700;
    line-height: 28px;
    text-transform: uppercase;
}

.page-body .builder-block.u-prc-testimonials > .builder-block__eyebrow { font-size: 14px; margin-bottom: 7px; }
.builder-block--content_feed.u-prc-testimonials .testimonial-card { padding: 0 clamp(16px, 2.55vw, 44px); }
.builder-block--content_feed.u-prc-testimonials .testimonial-card::before { line-height: 1.37; }
.builder-block--content_feed.u-prc-testimonials .testimonial-card .rating { margin-bottom: clamp(8px, 0.6vw, 10px); }

/* ── Logo strips (Our accreditations, in the footer) ─────────────────────────
   Figma 2007:53. Four marks spread across the grid in 347 x 144 tiles, the
   small "Our accreditations" label above. The design's dots imply a slider;
   with four marks there is nothing to slide, so the strip is still (switch on
   "Scroll" in the block if more are added). */
.builder-block--logo_strip .builder-block__eyebrow { margin-bottom: clamp(12px, 1.6vw, 28px); color: #000; font-size: 12px; text-transform: none; }
.builder-block--logo_strip .builder-logo-strip { flex-wrap: nowrap; justify-content: space-between; gap: clamp(16px, 4.3vw, 75px); margin: 0; }
.builder-block--logo_strip .builder-logo-strip__track { gap: clamp(16px, 4.3vw, 75px); }
.builder-block--logo_strip .builder-logo-strip__item {
    flex: 0 1 347px;
    min-width: 0;
    height: clamp(80px, 8.3vw, 144px);
    justify-content: center;
}
.builder-block--logo_strip .builder-logo-strip__item img { max-width: 72%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Logos of very different shapes look the same size only when sized apart: a
   long thin mark gets the tile's full width, a solid square block a little less
   height. Opted in by the image's file name ending "-wide" or "-square". */
.builder-block--logo_strip .builder-logo-strip__item img[src*="-wide."] { max-width: 100%; }
.builder-block--logo_strip .builder-logo-strip__item img[src*="-square."] { max-height: 80%; }
/* A scrolling strip: logos fade in at the right rather than being cut through
   (the left edge stays hard, on the heading's line, because the pause button
   sits there inside the same box and a fade would wash it out), and the pause
   button (core's, needed because the strip moves on its own) takes the brand
   pink so it can be found. */
.builder-block--logo_strip .builder-logo-strip-scroller.is-scrolling {
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
    mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.builder-block--logo_strip .builder-logo-strip__pause { color: var(--color-primary); font-size: 14px; }

/* Two to a row on a phone, for a still strip only: core's scroller needs the
   strip as one unwrapped row to measure and loop it. A scrolling strip has no
   width to share out, so its tiles get their own. */
@media (max-width: 760px) {
    .builder-block--logo_strip .builder-logo-strip:not(.builder-logo-strip--scroll) { flex-wrap: wrap; justify-content: center; }
    .builder-block--logo_strip .builder-logo-strip:not(.builder-logo-strip--scroll) .builder-logo-strip__item { flex-basis: 40%; }
    .builder-block--logo_strip .builder-logo-strip--scroll .builder-logo-strip__item { flex: 0 0 40vw; }
}

.builder-block--logo_strip .builder-block__eyebrow { font-size: 14px; margin-bottom: clamp(24px, 2.6vw, 45px); }
/* The four marks sit in 347px tiles from x 133, 75 apart, the last running
   off the frame's edge as drawn. */
@media (min-width: 761px) {
    .prc-footer__accreditations .builder-block { padding-left: max(var(--prc-gutter), calc(min(50%, 864px) - 731px)); padding-right: 0; overflow: clip; }
    .prc-footer__accreditations .builder-logo-strip { justify-content: flex-start; gap: min(4.34vw, 75px); }
    .prc-footer__accreditations .builder-logo-strip__item { flex: 0 0 min(20.08vw, 347px); }
}
.prc-footer__accreditations .builder-block { padding-bottom: clamp(48px, 5.8vw, 100px); }

/* ── Photo band (cta banner + u-prc-photo-band) ──────────────────────────────
   Figma 2033:57, "Airport, ferry & cruise transfers". The photo fills a
   522px band; a black fade from the left (80% to clear by 827px at 1728)
   carries the pink label, the white 64px heading and a line of copy. */
.page-body .builder-block.u-prc-photo-band { padding: 0; }
.page-body .builder-block.u-prc-photo-band .builder-cta {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(360px, 30.2vw, 522px);
    margin: 0;
    padding: clamp(48px, 5vw, 86px) max(var(--prc-gutter), calc(50% - 783px));
    border-radius: 0;
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: left;
}
/* Core writes the photo inline as TWO layers, a flat 50% black wash over the
   picture, which would darken the whole band where the design fades only from
   the left. Giving the first layer no size removes the wash and keeps the
   photo; !important because the size is in the element's style attribute. */
.page-body .builder-block.u-prc-photo-band .builder-cta[style*="background-image"] { background-size: 0 0, cover !important; }
.page-body .builder-block.u-prc-photo-band .builder-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .8) clamp(240px, 24.5vw, 424px), rgba(0, 0, 0, 0) clamp(480px, 47.9vw, 827px));
}
.page-body .builder-block.u-prc-photo-band .builder-cta__inner { max-width: 673px; margin: 0; text-align: left; }
.page-body .builder-block.u-prc-photo-band .builder-cta h2 {
    margin: 0 0 clamp(20px, 2.3vw, 40px);
    color: #fff;
    font-size: var(--font-size-h2);
    line-height: var(--lh-h2);
}
.page-body .builder-block.u-prc-photo-band .builder-cta p { max-width: 610px; color: #fff; font-size: 16px; line-height: 26px; }
/* The pink label is the block's eyebrow, which core prints above the band:
   it is pulled down into it. */
.page-body .builder-block.u-prc-photo-band { position: relative; }
.page-body .builder-block.u-prc-photo-band > .builder-block__eyebrow {
    position: absolute;
    z-index: 1;
    top: clamp(60px, 7.6vw, 131px);
    left: max(var(--prc-gutter), calc(50% - 781px));
    margin: 0;
}
.page-body .builder-block.u-prc-photo-band:has(> .builder-block__eyebrow) .builder-cta h2 { margin-top: 30px; }
@media (max-width: 760px) {
    .page-body .builder-block.u-prc-photo-band .builder-cta::before { background: rgba(0, 0, 0, .65); }
}

.page-body .builder-block.u-prc-photo-band:has(> .builder-block__eyebrow) .builder-cta h2 { margin-top: 37px; }
.page-body .builder-block.u-prc-photo-band .builder-cta h2 { margin-bottom: clamp(20px, 1.9vw, 33px); }

/* ── Timeline (stats + u-prc-timeline) ───────────────────────────────────────
   Figma 2035:863, Our history. 179px gradient discs with the year in white,
   joined by a dotted road; under each a short rule, the milestone in bold
   capitals and a line of copy. Value = year, Label = milestone, Sub-text =
   the copy. It is a row that scrolls sideways (five show at 1728), so any
   number of milestones fits; without the helper it is a plain stats grid. */
.page-body .builder-block.u-prc-timeline { text-align: center; }
.page-body .builder-block.u-prc-timeline .builder-stats {
    display: flex;
    gap: clamp(40px, 5.1vw, 88px);
    margin: clamp(40px, 5vw, 86px) 0 0;
    padding: 0 0 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--color-primary) var(--color-bg-alt);
}
.page-body .builder-block.u-prc-timeline .builder-stat {
    flex: 0 0 237px;
    position: relative;
    scroll-snap-align: start;
}
.page-body .builder-block.u-prc-timeline .builder-stat__value {
    width: 179px;
    height: 179px;
    margin: 0 auto 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--prc-gradient);
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
}
/* The rule under the disc. */
.page-body .builder-block.u-prc-timeline .builder-stat__label::before {
    content: "";
    display: block;
    width: 2px;
    height: 46px;
    margin: 0 auto 32px;
    background: #000;
}
/* The dotted road to the next disc, level with the disc's centre. */
.page-body .builder-block.u-prc-timeline .builder-stat:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 89px;
    left: calc(50% + 89px + 14px);
    width: calc(100% - 179px + clamp(40px, 5.1vw, 88px) - 28px);
    height: 3px;
    background: radial-gradient(circle, #000 1.5px, transparent 1.6px) 0 0 / 9px 3px repeat-x;
}
.page-body .builder-block.u-prc-timeline .builder-stat__label {
    margin: 0 auto 12px;
    max-width: 204px;
    color: #000;
    font-size: 26px;
    font-weight: 700;
    line-height: 32px;
    text-transform: uppercase;
}
.page-body .builder-block.u-prc-timeline .builder-stat__subtext { color: #000; font-size: 16px; line-height: 26px; }

/* The heading above the timeline sits close, as drawn (2035:863). */
.page-body .builder-block--text.u-prc-centred:has(+ .builder-block.u-prc-timeline) { padding-top: clamp(40px, 3.36vw, 58px); }
.page-body .builder-block--text.u-prc-centred:has(+ .builder-block.u-prc-timeline) .cms-content h2 { margin-bottom: 12px; }
.page-body .builder-block.u-prc-centred + .builder-block.u-prc-timeline .builder-stats { margin-top: clamp(16px, 1.93vw, 33px); }
/* The row starts 80px in from the grid and runs off the right edge, as the
   drawn road does. */
.page-body .builder-block.u-prc-timeline .builder-stats { margin-right: calc(-1 * var(--prc-gutter)); padding-left: clamp(0px, 4.63vw, 80px); scroll-padding-left: clamp(0px, 4.63vw, 80px); }
.page-body .builder-block.u-prc-timeline .builder-stat:not(:last-child)::after { left: calc(50% + 109.5px); width: calc(100% - 179px + clamp(40px, 5.1vw, 88px) - 44px); }
.page-body .builder-block.u-prc-timeline .builder-stat__value { padding-top: 13px; }
/* Every milestone's copy starts on the same line, however many lines its
   heading takes: the heading box is a fixed height, its text pushed down. */
.page-body .builder-block.u-prc-timeline .builder-stat__label { display: flex; flex-direction: column; align-items: center; min-height: 163px; margin: 0 auto; }
.page-body .builder-block.u-prc-timeline .builder-stat__label::before { flex: none; margin: 0 auto auto; }
.page-body .builder-block.u-prc-timeline .builder-stat__label::after { content: ""; margin-top: auto; }

/* ── Stats (anywhere else) ──────────────────────────────────────────────────── */
.builder-stat__value { color: var(--stat-value); font-size: clamp(40px, 3.7vw, 64px); font-weight: 700; line-height: 1.06; }
.builder-stat__label { color: #000; font-size: 18px; font-weight: 700; text-transform: uppercase; }
.builder-stat__subtext { color: #000; font-size: 16px; }

/* ── Icon grid ───────────────────────────────────────────────────────────────
   Every card style shares core's markup: icon, title, description, link. */
.builder-icon-grid { gap: clamp(20px, 3.1vw, 54px); }
.builder-icon-grid__title { font-size: clamp(20px, 1.5vw, 26px); font-weight: 700; line-height: 1.2; text-transform: uppercase; color: #000; }
.builder-icon-grid__desc { color: #000; font-size: 16px; line-height: 26px; }
.builder-icon-grid__icon img,
.builder-icon-grid__svg { color: var(--color-primary); }

/* Pink cards (Figma 2038:588, Local area): 463 x 371 pink panels, the white
   icon beside a 52px white title, a line of copy and the link in bold
   underlined capitals. */
.u-prc-cards-pink .builder-icon-grid__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    column-gap: clamp(12px, 1.2vw, 20px);
    min-height: clamp(260px, 21.5vw, 371px);
    padding: clamp(28px, 2.9vw, 50px) clamp(24px, 2.4vw, 41px) clamp(28px, 2.6vw, 45px);
    background: var(--color-primary);
    color: #fff;
}
.u-prc-cards-pink .builder-icon-grid__icon { grid-row: 1; margin: 0; }
.u-prc-cards-pink .builder-icon-grid__icon img { width: clamp(52px, 4.7vw, 81px); height: auto; filter: brightness(0) invert(1); }
.page-body .builder-block.u-prc-cards-pink .builder-icon-grid__title {
    grid-row: 1;
    align-self: center;
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 3.01vw, 52px);
    line-height: 1.04;
}
.u-prc-cards-pink .builder-icon-grid__desc { grid-column: 1 / -1; margin-top: clamp(20px, 2.3vw, 40px); color: #fff; font-size: 16px; line-height: 26px; }
.u-prc-cards-pink .builder-icon-grid__desc a,
.u-prc-cards-pink .builder-icon-grid__item a { color: #fff; font-size: clamp(15px, 1.04vw, 18px); font-weight: 700; text-transform: uppercase; text-decoration: underline; overflow-wrap: anywhere; }
.u-prc-cards-pink .builder-icon-grid__item--link:hover { background: var(--color-primary-hover); }
/* A linked card is one link (core wraps the whole card), so the drawn link
   line is its visible sign, hidden from screen readers: the card's own name
   already says where it goes. */
.u-prc-cards-pink .builder-icon-grid__item--link::after,
.u-prc-cards-photo .builder-icon-grid__item--link::after {
    grid-column: 1 / -1;
    margin-top: 18px;
    font-size: clamp(15px, 1.04vw, 18px);
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
}
.u-prc-cards-pink .builder-icon-grid__item--link::after { content: "Visit the website" / ""; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.u-prc-cards-photo .builder-icon-grid__item--link::after { content: "Find out more" / ""; margin: 18px clamp(24px, 2.4vw, 42px) 0; color: var(--color-primary); }
.u-prc-cards-pink .builder-icon-grid__item--link,
.u-prc-cards-photo .builder-icon-grid__item--link { text-decoration: none; color: inherit; }

/* Photo cards (Figma 2039:766, Some of our favourites): the photo on top,
   then a pale blue panel with a 52px title, a line and the pink link. */
.u-prc-cards-photo .builder-icon-grid__item {
    display: flex;
    flex-direction: column;
    padding: 0 0 clamp(28px, 2.4vw, 40px);
    background: var(--color-bg-alt);
}
.u-prc-cards-photo .builder-icon-grid__icon { margin: 0 0 clamp(24px, 2.4vw, 41px); }
.u-prc-cards-photo .builder-icon-grid__icon img { display: block; width: 100%; height: auto; aspect-ratio: 465 / 334; object-fit: cover; }
.page-body .builder-block.u-prc-cards-photo .builder-icon-grid__title {
    margin: 0 clamp(24px, 2.4vw, 42px) clamp(16px, 2.3vw, 40px);
    font-size: clamp(30px, 3.01vw, 52px);
    line-height: 1.04;
}
.u-prc-cards-photo .builder-icon-grid__desc { margin: 0 clamp(24px, 2.4vw, 42px); }
.u-prc-cards-photo .builder-icon-grid__desc a,
.u-prc-cards-photo .builder-icon-grid__link { color: var(--color-primary); font-size: clamp(15px, 1.04vw, 18px); font-weight: 700; text-transform: uppercase; text-decoration: none; }
.page-body .builder-block.u-prc-cards-photo > .builder-block__heading { color: var(--color-primary); text-align: center; }
@media (max-width: 1100px) {
    .u-prc-cards-pink .builder-icon-grid--3col,
    .u-prc-cards-photo .builder-icon-grid--3col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .u-prc-cards-pink .builder-icon-grid--3col,
    .u-prc-cards-photo .builder-icon-grid--3col { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 1101px) {
    .u-prc-cards-pink .builder-icon-grid,
    .u-prc-cards-photo .builder-icon-grid { grid-template-columns: repeat(3, minmax(0, 463px)); justify-content: center; column-gap: clamp(20px, 3.2vw, 55px); }
}
.u-prc-cards-pink .builder-icon-grid,
.u-prc-cards-photo .builder-icon-grid { margin-block: 0; }
.page-body .builder-block.u-prc-cards-pink { padding-block: clamp(40px, 3.8vw, 66px) clamp(48px, 5.2vw, 90px); }
.u-prc-cards-pink .builder-icon-grid__item { padding-right: clamp(20px, 1.62vw, 28px); }
.u-prc-cards-pink .builder-icon-grid__desc { margin-top: clamp(16px, 1.39vw, 24px); min-height: 78px; }
.u-prc-cards-pink .builder-icon-grid__item--link::after { margin-top: 10px; }
/* Each icon keeps its drawn proportions (the traffic light is taller than it
   is wide); 81 is the widest. */
.u-prc-cards-pink .builder-icon-grid__icon img { width: auto; height: auto; max-width: clamp(52px, 4.7vw, 81px); }
.page-body .builder-block.u-prc-cards-photo > .builder-block__heading { margin-bottom: clamp(28px, 2.6vw, 45px); }
.u-prc-cards-photo .builder-icon-grid__icon { margin-bottom: clamp(24px, 1.97vw, 34px); }
.page-body .builder-block.u-prc-cards-photo .builder-icon-grid__title { margin-right: clamp(20px, 1.62vw, 28px); margin-bottom: clamp(10px, 0.75vw, 13px); }
/* The summary and link line up across the row whatever the title's length. */
.u-prc-cards-photo .builder-icon-grid__desc { margin-top: auto; margin-right: clamp(20px, 1.62vw, 28px); }
.u-prc-cards-photo .builder-icon-grid__item { padding-bottom: clamp(28px, 2.1vw, 36px); }

/* What you need to see & do (Figma 2039:680): two 706 columns 45 apart, 52px
   column headings, 80 between the two rows of columns. */
@media (min-width: 901px) {
    .page-body .builder-block.u-prc-card-columns .content-row-grid { grid-template-columns: repeat(2, minmax(0, 706px)); justify-content: center; column-gap: clamp(24px, 2.6vw, 45px); }
}
.page-body .builder-block.u-prc-card-columns .cms-content > h2 { font-size: clamp(30px, 3.01vw, 52px); line-height: 1.04; }
.page-body .builder-block.u-prc-card-columns .cms-content > h2 + p { margin-top: 9px; }
.page-body .builder-block.u-prc-card-columns .cms-content > .callout:last-child { margin-bottom: 0; }
/* Executive vehicles: Nicky's services, each name in bold over its line, two columns on a wide screen.
   Without the class (say, if an editor drops it) it is an ordinary bulleted list. */
.page-body .cms-content ul.prc-services { list-style: none; padding: 0; }
.page-body .cms-content ul.prc-services li { break-inside: avoid; margin: 0 0 clamp(18px, 1.6vw, 28px); }
.page-body .cms-content ul.prc-services strong { display: block; margin-bottom: 4px; }
@media (min-width: 901px) {
    .page-body .cms-content ul.prc-services { columns: 2; column-gap: clamp(32px, 4vw, 70px); }
}
/* Local area: a photo of the district heads its tourism column. */
.page-body .builder-block.u-prc-card-columns .cms-content > .prc-area-photo { margin: 0 0 clamp(20px, 1.6vw, 28px); }
.page-body .builder-block.u-prc-card-columns .cms-content > .prc-area-photo img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.page-body .builder-block.u-prc-card-columns { padding-bottom: clamp(48px, 4.46vw, 77px); }
.page-body .builder-block.u-prc-card-columns:has(+ .builder-block.u-prc-card-columns) { padding-bottom: clamp(40px, 4.6vw, 80px); }
.page-body .builder-block.u-prc-card-columns + .builder-block.u-prc-card-columns { padding-top: 0; }
.page-body .builder-block.u-prc-card-columns .cms-content .callout p:not(:last-child) { margin-bottom: 26px; }

/* ── Forms ───────────────────────────────────────────────────────────────────
   Figma 2034:281, 2045:1647, 2075:361. Fields are 70px tall with 12px corners
   and no border: pale blue on white, white on the pale blue band. The design
   shows the placeholder only, centred in capitals, so labels are kept for
   screen readers and hidden on screen; the placeholder repeats the label word
   for word so nothing is lost. A drop-down has no placeholder to carry its
   question, so its label stays on screen. Submit is the full-width gradient
   in black italic capitals. */
.cms-form-wrap { margin: 0; padding: 0; background: none; border-radius: 0; }
.cms-form__intro {
    margin: 0 0 clamp(20px, 2.4vw, 41px);
    color: #000;
    font-size: clamp(18px, 1.39vw, 24px);
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
}
.contact-form .form-row { gap: clamp(12px, 1.1vw, 19px); }
.contact-form .form-group { margin-bottom: clamp(14px, 1.33vw, 23px); }
.contact-form .form-group label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.contact-form .form-group:has(> select[name="fields[heard_about]"]) label,
.contact-form .form-group:has(input[type="checkbox"]) label,
.contact-form .form-group:has(input[type="radio"]) label,
.contact-form .form-group:has(input[type="file"]) label,
.contact-form .form-group:has(input[type="date"]) label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    display: block;
    margin: 0 0 8px;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}
.contact-form .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.contact-form .form-group select,
.contact-form .form-group textarea {
    width: 100%;
    min-height: 70px;
    padding: 0 24px;
    border: 0;
    border-radius: 12px;
    background-color: var(--prc-field-bg, var(--color-bg-alt));
    color: #000;
    font: 400 18px/1.3 var(--font-family);
    text-align: center;
}
.contact-form .form-group select { text-align-last: center; text-transform: uppercase; }
.contact-form .form-group textarea { min-height: 70px; height: 140px; padding-top: 22px; }
.contact-form .form-group input::placeholder,
.contact-form .form-group textarea::placeholder { color: #000; opacity: 1; text-transform: uppercase; }
.contact-form .form-group input:focus,
.contact-form .form-group select:focus,
.contact-form .form-group textarea:focus { outline: 3px solid var(--color-primary); outline-offset: 0; box-shadow: none; }
.contact-form .form-actions { margin-top: clamp(4px, 0.4vw, 8px); }
.contact-form .form-actions .btn-primary {
    width: 100%;
    min-height: 70px;
    font-size: 18px;
    font-style: italic;
    font-weight: 900;
}
/* "Text & instructions" fields used as column headings (Your details, Details
   of required journey). */
.contact-form .form-text { margin: 0 0 clamp(14px, 1.33vw, 23px); }
.contact-form .form-text h2,
.contact-form .form-text h3,
.contact-form .form-text .prc-col-break {
    margin: 0 0 8px;
    color: #000;
    font-size: clamp(18px, 1.39vw, 24px);
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
    text-transform: uppercase;
}

.page-body .builder-block.u-prc-centred .cms-form__intro {
    margin: 0 auto clamp(32px, 3.9vw, 67px);
    max-width: 724px;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    text-align: center;
    text-transform: none;
}
.page-body .builder-block.u-prc-centred .contact-form { text-align: left; }

/* Long form in two columns (form + u-prc-form-columns, Figma 2034:281). The
   fields flow down the left column then the right; the column breaks at the
   "Text & instructions" field written in the Form column break format. With
   no such line the browser balances the two columns itself. */
@media (min-width: 900px) {
    .page-body .builder-block.u-prc-form-columns form.contact-form {
        columns: 2;
        column-gap: clamp(32px, 6.6vw, 115px);
    }
    .page-body .builder-block.u-prc-form-columns form.contact-form > * { break-inside: avoid; }
    .page-body .builder-block.u-prc-form-columns form.contact-form > :has(.prc-col-break) { break-before: column; }
    /* Submit ends the right-hand column, as drawn. */
    .page-body .builder-block.u-prc-form-columns form.contact-form > .form-actions { break-before: avoid; }
}
.page-body .builder-block.u-prc-form-columns .cms-form-wrap { max-width: 1443px; margin: 0 auto; }

/* Form + text (Contact, Accounts): copy beside the form, 650 + 664 at 1728. */
.page-body .builder-block--form_text .content-row-grid {
    grid-template-columns: minmax(0, 678fr) minmax(0, 664fr);
    gap: clamp(32px, 9.6vw, 166px);
    align-items: start;
}
@media (max-width: 900px) {
    .page-body .builder-block--form_text .content-row-grid { grid-template-columns: 1fr; }
}

/* Form + image and Map + text / image: the same two-column rhythm. */
.page-body .builder-block--form_image .content-row-grid,
.page-body .builder-block--map_text .content-row-grid,
.page-body .builder-block--map_image .content-row-grid { gap: clamp(32px, 6.4vw, 110px); align-items: center; }
.builder-map { border-radius: 0; overflow: hidden; }

/* Rows of half-width fields: the 23px field margin is the whole gap between
   rows, as drawn (93px pitch), so the grid adds none of its own. */
.contact-form .form-row { gap: 0 clamp(12px, 1.1vw, 19px); }
.contact-form .form-actions { margin-top: 0; }
/* The drawn drop-down arrow: a black V, 24px in from the field's edge. */
.contact-form .form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11' fill='none'%3E%3Cpath d='M1 1l5 8 4-8' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 11px 11px;
    background-position: right 24px center;
    padding-left: 48px;
    padding-right: 48px;
}

/* Arrange an executive vehicle (Figma 2034:281): the form on the grid's left,
   the heading and line centred over it. */
.page-body .builder-block.u-prc-form-columns.u-prc-centred { padding-block: clamp(48px, 4.4vw, 76px) clamp(40px, 3.24vw, 56px); }
.page-body .builder-block.u-prc-form-columns > .builder-block__heading { margin-bottom: clamp(12px, 0.87vw, 15px); }
.page-body .builder-block.u-prc-form-columns .cms-form__intro { margin-bottom: clamp(24px, 2.3vw, 40px); }
.page-body .builder-block.u-prc-form-columns .cms-form-wrap { max-width: none; margin: 0; }
.page-body .builder-block.u-prc-form-columns form.contact-form { max-width: 1443px; }
/* Title is a narrow field beside a wide Full name (158 + 491), Telephone and
   Email an even pair under them. */
@media (min-width: 900px) {
    .page-body .builder-block.u-prc-form-columns .form-row:has(> .form-group > select[name="fields[title]"]) { grid-template-columns: minmax(0, 158fr) minmax(0, 143fr) minmax(0, 325fr); }
    .page-body .builder-block.u-prc-form-columns .form-row:has(> .form-group > select[name="fields[title]"]) > .form-group:nth-child(2) { grid-column: 2 / span 2; }
    .page-body .builder-block.u-prc-form-columns .form-row:has(> .form-group > select[name="fields[title]"]) > .form-group:nth-child(3) { grid-column: 1 / span 2; }
}

/* Form + text: Accounts (2075:361) and Contact (2045:1587). */
.page-body .builder-block.builder-block--form_text { padding-block: clamp(56px, 6.25vw, 108px) clamp(56px, 5.6vw, 97px); }
@media (min-width: 901px) {
    .page-body .builder-block--form_text .content-row-grid { max-width: 1508px; }
    .page-body .builder-block--form_text:has(.prc-contact-line) .content-row-grid { grid-template-columns: minmax(0, 709fr) minmax(0, 664fr); column-gap: clamp(32px, 4.05vw, 70px); max-width: 1443px; }
}
.page-body .builder-block--form_text .cms-form__intro { margin-bottom: clamp(12px, 1.56vw, 27px); }
.page-body .builder-block--form_text .cms-content > h3 { margin: 0 0 38px; font-size: clamp(18px, 1.39vw, 24px); line-height: 1.5; }
.page-body .builder-block--form_text .cms-content h4 { margin: 0; font-size: 16px; line-height: 26px; }
.page-body .builder-block--form_text .cms-content ul { padding-left: 16px; }
/* Contact lines: the logo beside the number and email, centred on them. */
.page-body .builder-block .cms-content p.prc-contact-line,
.prc-contact-line { grid-template-columns: clamp(110px, 9.84vw, 170px) minmax(0, 1fr); grid-template-rows: auto auto; line-height: 1.5; }
.page-body .cms-content .prc-contact-line img { grid-row: 1 / span 2; margin: 0; border-radius: 0; }
.prc-contact-line > a:first-of-type { align-self: end; }
.prc-contact-line > a:last-of-type { align-self: start; }
/* A line that also carries its hours (or the department to ask for) and what it
   is for: the logo runs down all four rows from the top, and the number and
   email step down a size so the four read as one entry. */
.page-body .builder-block .cms-content p.prc-contact-line:has(.prc-contact-about),
.prc-contact-line:has(.prc-contact-about) { grid-template-rows: none; align-items: start; font-size: clamp(16px, 1.16vw, 20px); }
.page-body .cms-content .prc-contact-line:has(.prc-contact-about) img { grid-row: 1 / span 4; }
.prc-contact-line:has(.prc-contact-about) > a { align-self: auto; }
.prc-contact-hours { font-weight: 400; }
.prc-contact-about { margin-top: 4px; font-size: 16px; font-weight: 400; line-height: 1.5; }
@media (max-width: 600px) {
    .page-body .cms-content .prc-contact-line:has(.prc-contact-about) img { grid-row: auto; }
}

/* ── Footer ─────────────────────────────────────────────────────────────────
   Figma 2007:23. The accreditations strip on white, then the black band: the
   logo sitting half over its top edge, centred contact lines, the Book a taxi
   button, the two link rows, the app row, and the legal line under a rule. */
.site-footer.prc-footer { background: #fff; color: #fff; padding: 0; margin: 0; }
.prc-footer__accreditations .builder-block {
    max-width: 1728px;
    margin: 0 auto;
    padding: clamp(24px, 1.6vw, 28px) max(var(--prc-gutter), calc(min(50%, 864px) - 759px)) clamp(48px, 4.4vw, 76px);
}
.prc-footer__band { margin-top: clamp(40px, 2.8vw, 48px); background: #000; }
.prc-footer__inner {
    max-width: 1728px;
    margin: 0 auto;
    padding: 0 var(--prc-gutter) clamp(40px, 4.2vw, 72px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.prc-footer__logo { display: block; margin-top: calc(-1 * clamp(28px, 1.6vw, 28px)); line-height: 0; }
.prc-footer__logo img { width: 145px; height: auto; }
/* The number is pink on the black band (Nicky's ask, in place of a pinker
   band). The pink reads only 4.49:1 on black, short of 4.5:1 for body text,
   so the size never drops below 19px bold: that counts as large text, where
   3:1 passes. Shrink it and the number fails contrast on phones. */
.prc-footer__call { margin: clamp(16px, 1vw, 17px) 0 0; font-size: clamp(19px, 1.39vw, 24px); line-height: 1.5; text-transform: uppercase; }
.prc-footer__call a { color: var(--color-primary); font-weight: 700; text-decoration: none; }
.prc-footer__email { margin: 4px 0 0; font-size: 16px; line-height: 1.5; }
.prc-footer__email a { color: #fff; text-decoration: none; }
.prc-footer a:hover { color: var(--footer-link-hover); text-decoration: underline; }
.prc-footer__book { margin: clamp(24px, 1.85vw, 32px) 0 0; }
.prc-footer__book .btn { width: 312px; max-width: 100%; min-height: 70px; font-size: 18px; font-style: italic; }
.prc-footer__book .btn:hover { color: #fff; text-decoration: none; }
.prc-footer__nav { margin-top: clamp(28px, 2.1vw, 35px); }
.prc-footer__primary,
.prc-footer__secondary { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.prc-footer__primary { gap: 4px clamp(18px, 2.3vw, 40px); }
.prc-footer__secondary { gap: 4px clamp(14px, 2.2vw, 38px); margin-top: 6px; }
.prc-footer__primary a { color: #fff; font-size: clamp(15px, 1.16vw, 20px); line-height: 32px; text-transform: uppercase; text-decoration: none; }
.prc-footer__secondary a { color: #fff; font-size: 12px; font-weight: 700; line-height: 26px; text-transform: uppercase; text-decoration: none; }
.prc-footer__app { display: flex; align-items: center; gap: clamp(12px, 1vw, 17px); margin-top: clamp(28px, 2.1vw, 35px); }
.prc-footer__app-text { max-width: 108px; margin: 0; font-size: 18px; line-height: 22px; text-align: left; text-transform: uppercase; }
.prc-footer__app-arrow { width: 48px; height: auto; }
.prc-footer__store { display: inline-flex; line-height: 0; }
.prc-footer__store img { height: 55px; width: auto; }
.prc-footer__legal {
    max-width: 1728px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 32px;
    padding: 0 max(var(--prc-gutter), calc(min(50%, 864px) - 738px)) 24px;
    font-size: 12px;
    line-height: 18px;
}
.prc-footer__copyright { margin: 0; }
.prc-footer__reg { margin-left: 24px; }
.prc-footer__legal-list { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; padding: 0; list-style: none; }
.prc-footer__legal-list a { color: #fff; text-decoration: underline; }
/* Core spaces the credit bar off the footer with a margin, which would show
   white between the black band and the bar. The rule above it is drawn. */
.site-footer--credit .agency-credit { margin-top: 0; border-top: 1px solid #fff; background: #000; }

.prc-footer__email { margin-top: 0; }
.prc-footer__book { margin-top: clamp(24px, 2.31vw, 40px); }
.prc-footer__primary { gap: 4px clamp(18px, 3.1vw, 54px); }
.prc-footer__secondary { gap: 4px clamp(14px, 1.45vw, 25px); margin-top: 16px; }
.prc-footer__app { margin-top: clamp(28px, 3.07vw, 53px); }
/* The arrow hangs off the end of "today" at its baseline, as drawn. */
.prc-footer__app-arrow { margin-left: -26px; align-self: flex-end; margin-bottom: 7px; }
.prc-footer__store + .prc-footer__store { margin-left: 20px; }
.prc-footer__inner { padding-bottom: clamp(40px, 4.8vw, 83px); }
.prc-footer__legal { padding-bottom: 30px; padding-right: max(var(--prc-gutter), calc(min(50%, 864px) - 751px)); }
.prc-footer__legal-list { gap: 0 14px; }
.site-footer--credit .agency-credit__inner { max-width: 1728px; margin: 0 auto; padding: 0 max(var(--prc-gutter), calc(min(50%, 864px) - 738px)); }

/* ── Kitchen sink: every other block in the site's language ────────────────
   Not drawn in the design (it predates the template). Each follows the
   nearest drawn treatment: pale blue panels, pink accents, 12px corners on
   controls only. */

/* Call to action: banner = gradient band, card = pale blue panel, minimal =
   centred line and button. Heading left, button below, as the drawn
   sections are. */
.page-body .builder-block--cta:not(.u-prc-photo-band) .builder-cta { border-radius: 0; }
.page-body .builder-block--cta .builder-cta--banner { background: var(--prc-gradient); color: #fff; padding: clamp(40px, 4.6vw, 80px) clamp(24px, 4.6vw, 80px); }
.page-body .builder-block--cta .builder-cta--banner h2 { color: #fff; }
.page-body .builder-block--cta .builder-cta--banner .btn-primary { background: #fff; color: var(--color-primary); }
.page-body .builder-block--cta .builder-cta--card { background: var(--color-bg-alt); }
.page-body .builder-block--cta .builder-cta h2 { font-size: var(--font-size-h2); line-height: var(--lh-h2); text-transform: uppercase; }
.page-body .builder-block--cta .builder-cta__inner { max-width: 900px; }
.builder-cta__heading-accent { color: var(--color-primary); }

/* Accordion / FAQ: pale blue rows, a pink plus. */
.builder-accordion details.faq-item {
    margin: 0 0 12px;
    border: 0;
    border-radius: 12px;
    background: var(--color-bg-alt);
}
.builder-accordion details.faq-item summary {
    padding: 22px 64px 22px 28px;
    color: #000;
    font-size: clamp(16px, 1.04vw, 18px);
    font-weight: 700;
    text-transform: uppercase;
}
.builder-accordion details.faq-item .faq-answer { padding: 0 28px 24px; color: #000; line-height: 26px; }

/* Tabs: capitals, the active tab underlined in the gradient. */
.builder-tabs__nav { border-bottom: 2px solid var(--color-bg-alt); }
.builder-tabs__tab { font-weight: 700; text-transform: uppercase; color: #000; border-radius: 0; }
.builder-tabs__tab[aria-selected="true"] { color: var(--color-primary); box-shadow: inset 0 -3px 0 var(--color-primary); background: none; }

/* Pull quote: the Prata mark and words, pink rule. */
.builder-quote { border-left: 4px solid var(--color-primary); }
.builder-quote__text { font-family: 'Prata', Georgia, serif; font-size: clamp(22px, 1.85vw, 32px); line-height: 1.4; color: #000; }
.builder-quote__cite { color: #000; font-weight: 700; text-transform: uppercase; }
.builder-quote__role { color: var(--color-primary); font-size: 14px; font-weight: 700; text-transform: uppercase; }

/* Pricing: pale blue plans, pink figure, gradient badge. */
.builder-pricing__plan { background: var(--color-bg-alt); border: 0; border-radius: 0; box-shadow: none; }
.builder-pricing__name { text-transform: uppercase; }
.builder-pricing__amount { color: var(--color-primary); font-weight: 700; }
.builder-pricing__badge { background: var(--prc-gradient); color: #fff; border-radius: 12px; text-transform: uppercase; }

/* Key points and business facts: the pale blue panel. */
.builder-key-points,
.builder-business-facts { background: var(--color-bg-alt); border: 0; border-radius: 0; }
.builder-key-points__heading { text-transform: uppercase; }

/* Info card (flip box): pale blue front, gradient back. */
.builder-info-card { background: var(--color-bg-alt); border-radius: 0; }
.builder-info-card__heading { text-transform: uppercase; }

/* Countdown: pink figures. */
.builder-countdown__value { color: var(--color-primary); font-weight: 700; }
.builder-countdown__unit { background: var(--color-bg-alt); border-radius: 12px; }

/* Share / follow: black buttons, pink on hover. */
.builder-share__btn { border-radius: 12px; }

/* Table of contents. */
.builder-toc { background: var(--color-bg-alt); border: 0; border-radius: 0; }
.builder-toc__heading { text-transform: uppercase; }

/* Mini gallery and carousel photos: square corners. */
.mini-gallery__item,
.mini-gallery__item img,
.builder-carousel__slide img { border-radius: 0; }
.mini-gallery__caption,
.builder-carousel__caption { color: #000; font-size: 14px; }

/* Buttons block. */
.builder-buttons { gap: 16px 28px; }

/* Split hero (core), should anyone use it in place of the PRC hero: the
   photo band treatment, white copy over a wash. */
.builder-block--split_hero .builder-hero__heading { text-transform: uppercase; }
.builder-block--split_hero .builder-hero__badge-stars { color: var(--color-primary); }

/* Expanding panels: the black tab, pink when hovered. */
.builder-block--panels .builder-panels {
    --panels-tab-bg: #000;
    --panels-tab-hover-bg: var(--color-primary);
}
.builder-block--panels .builder-panels__heading { text-transform: uppercase; }

/* Callout outside the card-columns helper: pale blue, pink edge. */
.cms-content .callout { background: var(--color-bg-alt); border-left-color: var(--color-primary); border-radius: 0; }

/* ── Phones and tablets ─────────────────────────────────────────────────────
   The design is drawn at desktop only. These keep each section readable and in
   a sensible order as it narrows. Media queries only, last in the file so they
   win over the desktop rules of the same weight above. */

/* The open menu: service links, a gap, then the company links at a size a
   thumb can hit; two columns on a tablet. */
@media (max-width: 1180px) {
    .prc-nav__secondary { margin-top: 12px; }
    .prc-nav__secondary a { font-size: 14px; }
}
@media (min-width: 601px) and (max-width: 1180px) {
    .prc-nav__panel.nav-main.open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 48px); align-items: start; }
    .prc-nav__secondary { margin-top: 0; }
}

/* Hero: once the quote card stacks, the photo sits behind the copy only and
   the card follows on the pale blue, so the photo is never stretched to the
   height of both. */
@media (max-width: 1100px) {
    .prc-hero--with-quote { display: grid; grid-template-columns: minmax(0, 1fr); }
    .prc-hero--with-quote::before { content: none; }
    .prc-hero--with-quote .prc-hero__inner { display: contents; }
    .prc-hero--with-quote .prc-hero__media { position: relative; inset: auto; grid-area: 1 / 1; z-index: 0; }
    .prc-hero--with-quote .prc-hero__media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
    .prc-hero--with-quote .prc-hero__text { grid-area: 1 / 1; position: relative; z-index: 1; max-width: none; padding: clamp(40px, 6vw, 64px) var(--prc-gutter); }
    .prc-hero--with-quote .prc-quote { grid-area: 2 / 1; justify-self: center; width: calc(100% - 2 * var(--prc-gutter)); max-width: 605px; margin: clamp(24px, 4vw, 40px) 0; }
}
@media (min-width: 601px) and (max-width: 900px) {
    .prc-hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 480px; }
    .prc-hero__actions .btn { min-width: 0; }
}
@media (max-width: 600px) {
    .prc-hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-self: stretch; }
    .prc-hero__actions .btn { width: 100%; min-width: 0; }
    .prc-quote__fare-label,
    .prc-quote__time { font-size: 12px; }
}

/* Call and app strip: once the store icons wrap below, the arrow would point
   at nothing. */
@media (max-width: 900px) {
    .page-body .builder-block.u-prc-app-strip .cms-content p:nth-child(2)::after { display: none; }
}

/* Photo tiles: taller on a tablet so the copy is not crammed; a readable label
   on a phone. */
@media (min-width: 761px) and (max-width: 1100px) {
    .page-body .builder-block.u-prc-tiles .card { aspect-ratio: 4 / 3; }
}
@media (max-width: 760px) {
    .page-body .builder-block.u-prc-tiles .card .card-body h3:has(br)::first-line { font-size: 12px; }
}

/* Testimonials: two whole cards on a tablet and one on a phone, never a
   sliver of the next with its words cut mid-word; the dots show there is more. */
@media (min-width: 601px) and (max-width: 1100px) {
    .builder-block--content_feed.u-prc-testimonials .builder-carousel__slide:has(> .testimonial-card) { flex-basis: 50%; }
}
@media (max-width: 600px) {
    .builder-block--content_feed.u-prc-testimonials .builder-carousel__slide:has(> .testimonial-card) { flex-basis: 100%; }
}
/* A 33px hit area round each 17px dot, without changing how it looks. */
.page-body .builder-block .builder-carousel__dot { position: relative; }
.page-body .builder-block .builder-carousel__dot::after { content: ""; position: absolute; inset: -8px; }

/* Photo band: the copy hangs under its label, and the fade runs further so the
   words never sit on the bright side of the photo. */
@media (max-width: 1100px) {
    .page-body .builder-block.u-prc-photo-band > .builder-block__eyebrow { top: 56px; }
    .page-body .builder-block.u-prc-photo-band:has(> .builder-block__eyebrow) .builder-cta { align-items: flex-start; padding-top: 92px; }
    .page-body .builder-block.u-prc-photo-band:has(> .builder-block__eyebrow) .builder-cta h2 { margin-top: 0; }
}
@media (min-width: 761px) and (max-width: 1100px) {
    .page-body .builder-block.u-prc-photo-band .builder-cta::before { background: linear-gradient(90deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .65) 55%, rgba(0, 0, 0, .3) 100%); }
}

/* Stacked image + text: the copy always first, so two photos never meet across
   two blocks; the photo cropped to 4:3 so it does not fill a tablet screen.
   The Our App phone (a cut-out PNG) is never cropped. */
@media (max-width: 900px) {
    .page-body .builder-block--image_text .content-row-grid > .builder-block__image:first-child,
    .page-body .builder-block--video_text .content-row-grid > .builder-video:first-child { order: 1; }
    .page-body .builder-block--image_text .builder-block__image img:not([src$=".png"]) { aspect-ratio: 4 / 3; max-height: 520px; }
    .page-body .builder-block.u-prc-app-phone .builder-block__image img { aspect-ratio: auto; max-height: none; object-fit: contain; }
}

/* A row of buttons in the copy becomes an even full-width stack on a phone. */
@media (max-width: 600px) {
    .page-body .builder-block .cms-content p:has(> a.btn) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; }
    .page-body .builder-block .cms-content p:has(> a.btn) > a.btn { width: 100%; }
}

/* Contact lines: on a phone the logo sits above the number and email, so the
   address never splits mid-word. */
@media (max-width: 600px) {
    .page-body .builder-block .cms-content p.prc-contact-line,
    .prc-contact-line { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 2px; }
    .page-body .cms-content .prc-contact-line img { grid-row: auto; width: 120px; margin-bottom: 8px; }
    .prc-contact-line > a,
    .prc-contact-line > span { grid-column: 1; }
}

/* Card titles step down on narrower cards so they stay below the page heading. */
@media (max-width: 1100px) {
    .builder-block--content_feed:not(.u-prc-tiles) .card .card-body h3 { font-size: clamp(24px, 3.2vw, 30px); }
}
/* An odd last card on a two-column tablet grid centres rather than leaving a hole. */
@media (min-width: 681px) and (max-width: 1100px) {
    .u-prc-cards-pink .builder-icon-grid--3col > :last-child:nth-child(odd),
    .u-prc-cards-photo .builder-icon-grid--3col > :last-child:nth-child(odd),
    .builder-block--content_feed:not(.u-prc-tiles) .card-grid > .card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - clamp(20px, 3.1vw, 54px) / 2); }
}

/* Footer: the legal line centred under the centred footer, and every small
   link at least 24px tall to tap. */
@media (max-width: 900px) {
    .prc-footer__legal { justify-content: center; text-align: center; }
    .prc-footer__legal-list { justify-content: center; }
}
@media (max-width: 600px) {
    .prc-footer__reg { display: block; margin-left: 0; }
    .prc-footer__legal-list a,
    .prc-footer__secondary a { display: inline-block; padding-block: 4px; }
}

/* The ticker's dismiss button sits on the pink so the scrolling words pass
   under it rather than through it. */
.cms-announcement--banner .cms-announcement__close { background: var(--color-primary); opacity: 1; }

/* Timeline on a phone: one milestone centred at a time. */
@media (max-width: 600px) {
    .page-body .builder-block.u-prc-timeline .builder-stats { padding-inline: calc(50% - 118px); scroll-padding-inline: calc(50% - 118px); }
    .page-body .builder-block.u-prc-timeline .builder-stat { scroll-snap-align: center; }
}

/* The timeline's previous and next buttons (js/prc-timeline.js), level with
   the centre of the discs; --prc-timeline-top is the row's top, set by the
   script. Shown only while the row has more than fits. White with a solid
   fill so the discs and road read as passing under them. */
.page-body .prc-timeline-host { position: relative; }
.page-body .prc-timeline-nav {
    position: absolute;
    top: calc(var(--prc-timeline-top, 0px) + 89px);
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-top: -26px;
    padding: 0;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    background: #fff;
    color: var(--color-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
    cursor: pointer;
    transition: background-color .15s, color .15s, opacity .15s;
}
.page-body .prc-timeline-host--scrolls .prc-timeline-nav { display: flex; }
.page-body .prc-timeline-nav--prev { left: 0; }
.page-body .prc-timeline-nav--next { right: 0; }
.page-body .prc-timeline-nav--next svg { transform: scaleX(-1); }
.page-body .prc-timeline-nav:hover:not(:disabled) { background: var(--color-primary); color: #fff; }
.page-body .prc-timeline-nav:disabled { opacity: .3; box-shadow: none; cursor: default; }
@media (max-width: 600px) {
    .page-body .prc-timeline-nav { width: 44px; height: 44px; margin-top: -22px; }
}

/* Long headings balance their lines once the desktop's drawn breaks no longer
   apply. */
@media (max-width: 1100px) {
    .prc-hero__heading,
    .prc-hero__strap-heading,
    .static-hero__heading,
    .page-body .builder-block .builder-block__heading,
    .page-body .builder-block .cms-content h2 { text-wrap: balance; }
}

/* A stand-alone pink link gets a taller target. */
a.prc-link,
.page-body .builder-block .cms-content a.prc-link { display: inline-block; padding-block: 5px; }

/* A news story's own page: the date in the cards' pink capitals. The copy runs
   the full content width, like every block on the site. */
.page-body-heading .card-meta { margin-top: 10px; color: var(--color-primary); font-size: clamp(15px, 1.04vw, 18px); line-height: 1.5; text-transform: uppercase; }

/* Document helper (u-prc-document, cms-site.php): terms and policies keep the
   block's full width, with headings a step below the section headings so a
   page of twenty of them does not shout. */
.page-body .builder-block.u-prc-document .cms-content :is(h2, h3) { margin: 1.6em 0 .5em; font-size: clamp(20px, 1.6vw, 26px); line-height: 1.3; }

/* Numbered clauses helper (u-prc-clauses, cms-site.php): 1, 1.1, then i, ii.
   PRC's Terms refer to their clauses by these numbers ("clause 7.2 iv"), so on
   that page the numbering is load-bearing. */
.page-body .builder-block.u-prc-clauses .cms-content > ol { counter-reset: clause; padding-left: 0; list-style: none; }
.page-body .builder-block.u-prc-clauses .cms-content > ol > li { counter-increment: clause; margin-top: 1.5em; }
.page-body .builder-block.u-prc-clauses .cms-content > ol > li::before { content: counter(clause) ". "; font-weight: 700; }
.page-body .builder-block.u-prc-clauses .cms-content > ol > li > ol { counter-reset: subclause; margin-top: .5em; padding-left: 2.75em; list-style: none; }
.page-body .builder-block.u-prc-clauses .cms-content > ol > li > ol > li { position: relative; counter-increment: subclause; margin-top: .4em; }
.page-body .builder-block.u-prc-clauses .cms-content > ol > li > ol > li::before { content: counter(clause) "." counter(subclause); position: absolute; left: -2.75em; }
.page-body .builder-block.u-prc-clauses .cms-content > ol > li > ol > li > ol { margin-top: .3em; padding-left: 2em; list-style: lower-roman; }