/* ==========================================================================
   Britannia Publishing House — design system
   Layout system mirrors the Troubador Publishing reference structure;
   colour, type and brand assets remain Britannia's own.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand palette — navy replaces the reference blue, gold replaces its teal.
       Navy is punctuation, not a ground. It carries the header, the hero, one
       band per page and the footer, and nothing else. The blue-grey tints that
       used to fill card wells and hover states are gone: a cold #f4f7fb panel
       inside a white card read as yet another patch of blue and pushed the
       page over into feeling entirely navy. Warm tints do that job now. */
    --primary: #012442;
    --primary-deep: #01192e;
    --primary-soft: #0a3358;
    --primary-mid: #1d4a74;

    /* Two golds. --secondary is the interactive one. It was #806b33, tuned
       to clear WCAG AA against white only (5.17:1). The cream sections are a
       darker ground than white, and on them that gold fell to 4.33:1, which
       fails for the eyebrows, "see more" links and testimonial bylines set
       in it. #75612d clears AA on all four grounds the site now uses —
       white 5.99, cream 5.03, deep cream 4.79 — and white-on-gold buttons
       improve from 5.16 to 5.99 as well. --secondary-brand is the original
       brand gold, kept for decorative fills and the header and footer rules,
       where it is never type. */
    --secondary: #75612d;
    --secondary-hover: #6b5929;
    --secondary-brand: #998145;
    --secondary-light: #d0b378;
    --secondary-deep: #6b5726;
    --secondary-tint: #f6f1e5;

    /* Neutrals. Three warm grounds, strongest first. --surface-alt is the
       alternating full-width section band and is the one colour the page
       rhythm is built from; --surface-soft is the half-strength version for
       small fills (wells, stripes, hover) that would be too loud at full
       cream; --surface-cream is the deepest and backs image panels. */
    --background: #ffffff;
    --surface: #ffffff;
    --surface-alt: #f3ebd2;
    --surface-soft: #faf5e9;
    --surface-cream: #ece6d0;

    --text: #16202c;
    --text-invert: #ffffff;
    /* #5d6b7a cleared AA on white at 5.46:1 but only reached 4.36:1 on the
       deep cream of the guide band. One step darker clears every ground. */
    --muted: #57646f;
    --muted-invert: rgba(255, 255, 255, .82);
    --border: #e6e9ef;
    --border-strong: #cfd6e0;
    --border-invert: rgba(255, 255, 255, .18);
    /* --border reads as nothing against --surface-alt; cream sections and
       anything sitting on them need their own hairline. */
    --border-cream: #e2d6b4;

    /* Type */
    --font-display: "Oswald", system-ui, sans-serif;
    --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;

    --fs-hero: clamp(2.75rem, 1.3rem + 5.2vw, 5.25rem);
    --fs-h1: clamp(2.2rem, 1.35rem + 3.2vw, 3.6rem);
    --fs-h2: clamp(1.8rem, 1.25rem + 2.3vw, 2.85rem);
    --fs-h3: clamp(1.25rem, 1.05rem + .85vw, 1.7rem);
    --fs-h4: clamp(1.08rem, 1rem + .45vw, 1.35rem);
    --fs-h5: 1.1rem;
    --fs-body: 1.0625rem;
    --fs-sm: .95rem;
    --fs-xs: .82rem;
    --fs-xxs: .73rem;

    /* Space + shape */
    /* Section padding is paid twice at every boundary, so 6rem meant 192px of
       empty ground between one block and the next on a desktop screen. These
       values halve that without crowding the content. --section-y-tight was
       previously written out inline in four places. */
    --section-y: clamp(2rem, 1.4rem + 1.8vw, 3rem);
    --section-y-tight: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 3px rgba(1, 25, 46, .08), 0 1px 2px -1px rgba(1, 25, 46, .08);
    --shadow-sm: 0 6px 20px rgba(1, 36, 66, .09);
    --shadow: 0 16px 44px rgba(1, 36, 66, .13);
    --shadow-lg: 0 30px 72px rgba(1, 36, 66, .22);

    --container: 1280px;
    --gutter: clamp(1rem, .55rem + 1.6vw, 2rem);
    /* Gold rule + hanging utility tabs + logo row. The tabs hang 34px below
       the rule, so the logo row must clear them or the two collide. */
    --topbar-h: 10px;
    --tab-drop: 34px;
    --header-h: 132px;
    --ease: cubic-bezier(.22, .8, .3, 1);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 130px; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--text);
    background: var(--background);
    overflow-x: hidden;
    overflow-wrap: break-word;
}

body.nav-open { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: .005em;
    color: var(--primary);
    margin: 0 0 .55em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); font-weight: 600; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--secondary-deep); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--secondary); }

ul, ol { margin: 0 0 1rem; padding-left: 1.2rem; }
li { margin-bottom: .45rem; }

strong { font-weight: 600; color: var(--primary); }

:focus-visible {
    outline: 3px solid var(--secondary);
    outline-offset: 3px;
    border-radius: 4px;
}

.bph-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--primary);
    color: #fff;
    padding: .8rem 1.2rem;
    border-radius: 0 0 var(--radius-sm) 0;
}
.bph-skip:focus { left: 0; color: #fff; }

.bph-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.bph-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.bph-container--narrow { max-width: 920px; }
.bph-container--mid { max-width: 1120px; }

.bph-section { padding-block: var(--section-y); }
.bph-section--tight { padding-block: var(--section-y-tight); }
.bph-section--flush-top { padding-top: 0; }
.bph-section--flush-bottom { padding-bottom: 0; }
/* The alternating cream band. This is what carries the page rhythm now —
   before, white was the only ground and navy the only relief, which is why
   navy ended up on five or six blocks a page. */
.bph-section--alt { background: var(--surface-alt); }
/* Cards and wells sit on white inside a cream band, not on more cream. */
.bph-section--alt .bph-card,
.bph-section--alt .bph-acc { border-color: var(--border-cream); }
.bph-section--alt .bph-acc:hover { background: rgba(255, 255, 255, .55); }
/* Two cream blocks must never touch — the seam disappears. */
.bph-section--alt + .bph-section--alt { padding-top: 0; }

/* Full-bleed navy band — the reference's bg-tb-blue section */
.bph-band {
    position: relative;
    background: var(--primary);
    color: var(--text-invert);
}
.bph-band h1, .bph-band h2, .bph-band h3, .bph-band h4, .bph-band h5 { color: #fff; }
.bph-band p, .bph-band li { color: var(--muted-invert); }
.bph-band strong { color: #fff; }
.bph-band a { color: var(--secondary-light); }
/* Buttons keep their own foreground: the rule above was tinting the label
   on a gold button light-gold, leaving it at 2.56:1. */
.bph-band a.bph-btn--primary,
.bph-band a.bph-btn--navy { color: #fff; }
.bph-band a.bph-btn--secondary { color: var(--secondary); }
.bph-band a.bph-btn--ghost-light { color: #fff; }
.bph-band__inner { padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
.bph-band__inner--right { max-width: 880px; margin-left: auto; }
.bph-band__inner--narrow { max-width: 860px; margin-inline: auto; text-align: center; }
.bph-band__inner--narrow .bph-btn-row { justify-content: center; }

.bph-eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: .75rem;
}
.bph-band .bph-eyebrow { color: var(--secondary-light); }

.bph-gold {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 600;
    font-size: .94em;
    text-transform: none;
    color: var(--secondary);
}
.bph-band .bph-gold { color: var(--secondary-light); }

/* 3.5rem left a 56px hole under every section heading, on top of the section
   padding already above it. */
.bph-head { max-width: 820px; margin-bottom: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); }
.bph-head--center { margin-inline: auto; text-align: center; }
.bph-head h2 { text-wrap: balance; margin-bottom: .5em; }
.bph-head p { color: var(--muted); font-size: clamp(1.02rem, .98rem + .25vw, 1.15rem); line-height: 1.65; }
.bph-band .bph-head p { color: var(--muted-invert); }

/* Gold rule under every section heading — the strongest single cue that
   a new section has started. */
.bph-head h2::after {
    content: "";
    display: block;
    width: 68px;
    height: 4px;
    border-radius: 2px;
    background: var(--secondary);
    margin-top: .75rem;
}
.bph-head--center h2::after { margin-inline: auto; }
.bph-band .bph-head h2::after { background: var(--secondary-light); }

.bph-lead { font-size: clamp(1.02rem, .97rem + .3vw, 1.18rem); color: var(--muted); line-height: 1.65; }
.bph-band .bph-lead { color: var(--muted-invert); }

.bph-grid { display: grid; gap: 1rem; }
.bph-grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.bph-grid--3 { grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); }
.bph-grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
/* A grid whose item count does not divide by its column count leaves the end
   of the last row empty — ten service cards over four columns left a
   584x280px hole. This centres the trailing items instead, the same way
   .bph-cards-flex already does for the five cards on the homepage. */
.bph-grid--center { display: flex; flex-wrap: wrap; justify-content: center; }
.bph-grid--center > * { width: 100%; }
@media (min-width: 640px) { .bph-grid--center > * { width: calc(50% - .5rem); } }
@media (min-width: 1024px) { .bph-grid--center > * { width: calc(33.333% - .667rem); } }
@media (min-width: 1280px) { .bph-grid--center > * { width: calc(25% - .75rem); } }

.bph-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.bph-ticks li { position: relative; padding-left: 1.9rem; margin: 0; color: var(--muted); }
.bph-ticks li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: .1rem;
    font-size: .8rem;
    color: var(--secondary);
}
.bph-band .bph-ticks li { color: var(--muted-invert); }
.bph-band .bph-ticks li::before { color: var(--secondary-light); }

.bph-crumbs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    padding: 0;
    margin: 0 0 1rem;
    font-size: var(--fs-xs);
    color: var(--muted);
}
.bph-crumbs li { margin: 0; }
.bph-crumbs li + li::before { content: "/"; margin-right: .45rem; opacity: .5; }
.bph-band .bph-crumbs { color: var(--muted-invert); }
.bph-hero .bph-crumbs { color: var(--muted); }
.bph-band .bph-crumbs a { color: #fff; }
.bph-hero .bph-crumbs a { color: var(--primary); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.bph-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.2;
    padding: .95rem 1.7rem;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.bph-btn:hover { transform: translateY(-2px); }

.bph-btn--primary { background: var(--secondary); color: #fff; box-shadow: 0 6px 18px rgba(117, 97, 45, .3); }
.bph-btn--primary:hover { background: var(--secondary-hover); color: #fff; box-shadow: 0 10px 24px rgba(117, 97, 45, .38); }

.bph-btn--secondary { background: #fff; color: var(--secondary); border-color: var(--secondary); }
.bph-btn--secondary:hover { background: var(--secondary-tint); color: var(--secondary-hover); border-color: var(--secondary-hover); }

.bph-btn--navy { background: var(--primary); color: #fff; }
.bph-btn--navy:hover { background: var(--primary-soft); color: #fff; }

.bph-btn--ghost { background: transparent; color: var(--primary); border-color: var(--border-strong); }
.bph-btn--ghost:hover { background: var(--surface-soft); color: var(--primary); border-color: var(--primary); }

.bph-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.bph-btn--ghost-light:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }

.bph-btn--sm { font-size: .82rem; padding: .5rem 1rem; letter-spacing: .08em; }
.bph-btn--block { width: 100%; }

.bph-btn-row { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.5rem; }

/* Inline "See more" link used on every card */
.bph-cta-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--font-display);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--secondary);
}
.bph-cta-link i { transition: transform .2s var(--ease); }
.bph-card:hover .bph-cta-link i,
.bph-cta-link:hover i { transform: translateX(4px); }

/* Pill filter buttons — blog topics, FAQ jump nav, genre filters */
.bph-filter {
    font-family: var(--font-display);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .06em;
    padding: .5rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--secondary);
    background: #fff;
    color: var(--secondary);
    cursor: pointer;
    transition: all .2s var(--ease);
}
.bph-filter:hover { background: var(--secondary-tint); }
.bph-filter.is-active { background: var(--secondary); color: #fff; }
.bph-filters { display: flex; flex-wrap: wrap; gap: .5rem; }

/* --------------------------------------------------------------------------
   5. Header — gold rule, hanging utility tabs, sticky nav
   -------------------------------------------------------------------------- */
.bph-progress {
    position: fixed;
    inset: 0 auto auto 0;
    height: 3px;
    width: 0;
    background: var(--secondary);
    z-index: 120;
    transition: width .1s linear;
}

/* The brand logo is a light cream-and-gold mark made for dark grounds, so
   the header bar is navy rather than white. It still goes transparent over
   a dark hero and solidifies on scroll, as the reference header does. */
.bph-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    width: 100%;
    background: var(--primary);
    transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
.bph-header.is-stuck { background: var(--primary); box-shadow: 0 6px 24px rgba(1, 25, 46, .28); }
/* Over the navy hero the header used to be transparent, so the two ran
   together as one block. It is now a near-black glass bar, darker than the
   hero beneath it, closed off by a gold rule with a slow light sweep. */
body.has-dark-hero .bph-header:not(.is-stuck),
.bph-header.is-stuck {
    background: linear-gradient(180deg, rgba(0, 9, 17, .94) 0%, rgba(0, 16, 30, .86) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 14px 40px rgba(0, 6, 12, .45);
}
.bph-header::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px;
    height: 2px;
    background:
        linear-gradient(90deg, transparent 0%, rgba(255, 244, 214, .95) 50%, transparent 100%) -40% 0 / 35% 100% no-repeat,
        linear-gradient(90deg, rgba(153, 129, 69, 0) 0%, var(--secondary-brand) 12%, var(--secondary-light) 50%, var(--secondary-brand) 88%, rgba(153, 129, 69, 0) 100%);
    box-shadow: 0 0 14px rgba(208, 179, 120, .55), 0 0 2px rgba(208, 179, 120, .9);
    animation: bph-header-sheen 7s ease-in-out infinite;
    pointer-events: none;
}
@keyframes bph-header-sheen {
    0%, 15%  { background-position: -40% 0, 0 0; }
    65%, 100% { background-position: 140% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .bph-header::after { animation: none; background-position: -100% 0, 0 0; }
}
/* backdrop-filter makes the header the containing block for fixed children,
   which would shrink the off-canvas menu to the header's height. */
@media (max-width: 1180px) {
    body.has-dark-hero .bph-header:not(.is-stuck),
    .bph-header.is-stuck {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: linear-gradient(180deg, #000a14 0%, #00111f 100%);
    }
}

/* Gold rule with utility tabs hanging beneath it. The rule itself is only
   10px; the tabs overhang it, so the row below reserves --tab-drop. */
.bph-topbar { position: relative; height: var(--topbar-h); background: var(--secondary-brand); }
.bph-topbar__inner {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: .5rem;
    position: relative;
    z-index: 2;
    height: 0;
}
.bph-topbar__tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: #fff;
    color: var(--primary);
    font-size: var(--fs-xs);
    font-weight: 500;
    line-height: 1.1;
    /* One fixed height so the Trustpilot tab (logo image) and the text tabs
       line up along their bottom edge. */
    box-sizing: border-box;
    height: 30px;
    padding: 0 .85rem;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-xs);
    transform: translateY(0);
    transition: transform .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease);
}
.bph-topbar__tab:hover { transform: translateY(2px); color: var(--secondary); }
.bph-topbar__tab i { color: var(--secondary); font-size: .8rem; }
.bph-topbar__tab--rating { font-family: var(--font-display); letter-spacing: .04em; }
.bph-topbar__tab--rating img { width: auto; height: 20px; }

.bph-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* clear the hanging tabs above */
    padding-top: calc(var(--tab-drop) - var(--topbar-h) + .5rem);
    padding-bottom: .8rem;
    transition: padding .2s var(--ease);
    /* Above the header's gold rule (::after) so open dropdowns cover it. */
    position: relative;
    z-index: 2;
}
.bph-header.is-stuck .bph-header__inner { padding-top: .5rem; padding-bottom: .5rem; }
/* Once stuck, the tabs retract so the bar stays compact. */
.bph-header.is-stuck .bph-topbar__tab { transform: translateY(-100%); opacity: 0; pointer-events: none; }

.bph-logo { flex-shrink: 0; display: block; }
.bph-logo img { height: 64px; width: auto; transition: height .2s var(--ease), filter .2s var(--ease); }
.bph-header.is-stuck .bph-logo img { height: 50px; }

.bph-nav__list {
    display: flex;
    align-items: center;
    gap: .1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.bph-nav__item { position: relative; margin: 0; }

.bph-nav__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--font-body);
    font-size: .93rem;
    font-weight: 500;
    color: #fff;
    background: none;
    border: 0;
    padding: .6rem .62rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color .2s var(--ease), background .2s var(--ease);
}
.bph-nav__link i { font-size: .65rem; transition: transform .2s var(--ease); }
.bph-nav__link:hover,
.bph-nav__link.is-active { color: var(--secondary-light); }
.bph-nav__item.is-open > .bph-nav__link i { transform: rotate(180deg); }

.bph-dropdown {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    min-width: 262px;
    list-style: none;
    margin: 0;
    padding: .5rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.bph-nav__item:hover > .bph-dropdown,
.bph-nav__item.is-open > .bph-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.bph-dropdown li { margin: 0; }
.bph-dropdown a {
    display: block;
    padding: .55rem .7rem;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    color: var(--primary);
    transition: background .18s var(--ease), color .18s var(--ease);
}
.bph-dropdown a:hover,
.bph-dropdown a.is-active { background: var(--surface-soft); color: var(--secondary); }

.bph-header__cta { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }

.bph-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
}

.bph-nav__head { display: none; }
.bph-nav__mobile-cta { display: none; }
.bph-backdrop { display: none; }

@media (max-width: 1180px) {
    .bph-nav {
        position: fixed;
        inset: 0;
        z-index: 130;
        background: #fff;
        padding: 1.5rem var(--gutter) 3rem;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform .28s var(--ease);
    }
    .bph-nav.is-open { transform: translateX(0); }
    .bph-nav__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.75rem;
    }
    .bph-nav__head img { height: 52px; width: auto; }
    .bph-nav__close {
        width: 42px;
        height: 42px;
        border-radius: var(--radius-pill);
        border: 1px solid var(--border-strong);
        background: #fff;
        color: var(--primary);
        font-size: 1.1rem;
        cursor: pointer;
    }
    .bph-nav__list { display: block; }
    .bph-nav__item { border-bottom: 1px solid var(--border); }
    .bph-nav__link {
        width: 100%;
        justify-content: space-between;
        font-size: 1.05rem;
        padding: .95rem .25rem;
        border-radius: 0;
        /* The drawer is a white panel, so links go back to navy inside it. */
        color: var(--primary);
    }
    .bph-nav__link:hover,
    .bph-nav__link.is-active { color: var(--secondary); }
    .bph-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        padding: 0 0 .75rem .5rem;
        max-height: 0;
        overflow: hidden;
        transition: max-height .28s var(--ease);
    }
    .bph-nav__item:hover > .bph-dropdown { max-height: 0; }
    .bph-nav__item.is-open > .bph-dropdown { max-height: 560px; }
    .bph-nav__mobile-cta { display: grid; gap: .6rem; margin-top: 1.75rem; }
    .bph-burger { display: inline-flex; }
    .bph-header__cta .bph-btn { display: none; }
    .bph-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 125;
        background: rgba(1, 25, 46, .55);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s var(--ease), visibility .25s;
    }
    .bph-backdrop.is-open { opacity: 1; visibility: visible; }
    /* The drawer lives inside the header's stacking context (z-index 100),
       so lift the whole header above the backdrop while it is open. */
    .bph-header:has(.bph-nav.is-open) { z-index: 130; }
}

@media (max-width: 620px) {
    .bph-topbar__tab span:not(.bph-keep) { display: none; }
    .bph-topbar__tab { padding-inline: .65rem; }
}
@media (max-width: 420px) {
    /* The Trustpilot chip dominates the row at phone width; the logo alone
       still links through to the reviews. */
    .bph-topbar__tab--rating .bph-keep { display: none; }
    .bph-topbar__inner { gap: .35rem; }
}

/* --------------------------------------------------------------------------
   6. Home hero — light panel under the dark header, book collage left, copy right
   -------------------------------------------------------------------------- */
.bph-hero {
    position: relative;
    /* White into warm cream, so the hero reads as its own light panel
       beneath the near-black header instead of merging with it. */
    background:
        radial-gradient(circle at 1px 1px, rgba(1, 36, 66, .07) 1px, transparent 0) 0 0 / 22px 22px,
        linear-gradient(165deg, #ffffff 0%, #fdfaf2 55%, var(--surface-alt) 100%);
    color: var(--text);
    overflow: hidden;
    padding-top: calc(var(--header-h) + 2rem);
    padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}
/* Soft gold glow behind the copy so the headline has warmth on white. */
.bph-hero::after {
    content: "";
    position: absolute;
    inset: -20% -20% auto 40%;
    height: 120%;
    background: radial-gradient(closest-side, rgba(208, 179, 120, .28), transparent 70%);
    pointer-events: none;
}
.bph-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
    min-height: 420px;
}
.bph-hero__copy { max-width: 620px; }
.bph-hero h1 {
    color: var(--primary);
    /* Two lines: "Serious Independent" / "Publishing". Sized so the first
       line fits the copy column without wrapping. */
    font-size: clamp(2.4rem, 1.2rem + 4vw, 4.4rem);
    line-height: .98;
    letter-spacing: -.01em;
    margin-bottom: 1.35rem;
    text-wrap: balance;
}
/* In the two-column range the copy column is only ~46% of the viewport,
   so tie the size to it; "Serious Independent" is ~8.2em wide. */
@media (min-width: 900px) and (max-width: 1299px) {
    .bph-hero h1 { font-size: calc(5.9vw - 6.5px); }
}
/* Each line is a direct child span; inner spans (the gold word) stay inline. */
.bph-hero h1 > span { display: block; }
.bph-hero__copy p { color: var(--muted); font-size: clamp(1.05rem, .98rem + .45vw, 1.25rem); line-height: 1.6; }
.bph-hero .bph-eyebrow { color: var(--secondary); }
.bph-hero .bph-btn-row { margin-top: 2rem; }

/* Rotated cover collage, the reference's angled book wall.
   The wrapper is the clipping box: covers bleed off the bottom by design
   but must never be sliced by the header at the top. */
/* No mask here: the rotated inner block paints outside this element's box,
   and a mask would clip those covers away entirely. The hero's own
   overflow:hidden gives the bottom bleed. */
.bph-hero__collage {
    display: none;
    position: relative;
    align-self: stretch;
    min-height: 540px;
    pointer-events: none;
}
.bph-hero__collage-inner {
    position: absolute;
    inset: 0;
    transform: rotate(-11deg) scale(1.02);
    transform-origin: 50% 40%;
}
.bph-hero__collage-col {
    position: absolute;
    display: grid;
    gap: 1.75rem;
}
.bph-hero__collage-col--a { top: 1rem; left: 2%; }
.bph-hero__collage-col--b { top: 5.5rem; left: 44%; }
.bph-hero__collage img {
    width: 215px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 24px 48px rgba(1, 25, 46, .28), 0 6px 14px rgba(1, 25, 46, .12);
    outline: 1px solid rgba(1, 25, 46, .08);
    outline-offset: -1px;
}

.bph-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-cream);
}
.bph-hero__meta strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1.85rem;
    color: var(--secondary);
    line-height: 1;
}
.bph-hero__meta span { font-size: var(--fs-xs); color: var(--muted); letter-spacing: .03em; }

@media (min-width: 900px) {
    .bph-hero { padding-bottom: 0; }
    .bph-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 640px; gap: 3rem; }
    .bph-hero__collage { display: block; }
    .bph-hero__copy { order: 2; margin-left: auto; }
}
@media (min-width: 1200px) {
    .bph-hero__grid { min-height: 700px; }
    .bph-hero__collage img { width: 250px; }
    .bph-hero__collage-col--b { left: 46%; }
}

/* Page hero — white, H1 and lead left, artwork right */
.bph-pagehero { padding-top: calc(var(--header-h) + 2rem); padding-bottom: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
.bph-pagehero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
    align-items: center;
}
.bph-pagehero h1 { margin-bottom: 1rem; }
.bph-pagehero__media img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    object-fit: cover;
    aspect-ratio: 5 / 4;
}

/* Showcase frame — for book covers and 3D mockups, which are portrait and
   would be sliced by object-fit:cover. The whole artwork stays visible on a
   tinted panel instead. */
.bph-media--showcase {
    background: linear-gradient(160deg, var(--surface-soft), var(--secondary-tint));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: clamp(1rem, .6rem + 1.4vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bph-media--showcase img {
    object-fit: contain !important;
    width: auto !important;
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--radius-sm);
    box-shadow: 0 14px 34px rgba(1, 36, 66, .22);
    aspect-ratio: auto !important;
}
.bph-pagehero__media.bph-media--showcase img { max-height: 420px; }
.bph-zig__media.bph-media--showcase img { max-height: 380px; }
/* Inside a fixed-height card the frame keeps the card's own geometry. */
.bph-card__media.bph-media--showcase { padding: .85rem; border: 0; border-radius: 0; box-shadow: none; }
.bph-card__media.bph-media--showcase img { max-height: 100%; box-shadow: 0 8px 20px rgba(1, 36, 66, .18); }
@media (min-width: 1024px) {
    .bph-pagehero__grid { grid-template-columns: 1fr 1fr; }
    .bph-pagehero__media { position: sticky; top: calc(var(--header-h) + 1rem); }
}

/* Spacer used on pages whose first block is not a hero */
.bph-headroom { height: calc(var(--header-h) + .5rem); }

/* --------------------------------------------------------------------------
   7. USP strip — white card lifted over the hero
   -------------------------------------------------------------------------- */
.bph-usps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: .75rem;
    /* Negative values: the smaller (most negative) bound goes first. */
    margin-top: clamp(-5.5rem, -4.5vw, -2rem);
    position: relative;
    z-index: 3;
}
.bph-usps__item { text-align: center; padding: 1.5rem 1.15rem; position: relative; }
/* Hairline separators between the four claims, like the reference card. */
.bph-usps__item + .bph-usps__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    height: 64%;
    width: 1px;
    background: var(--border);
}
@media (max-width: 1023px) { .bph-usps__item + .bph-usps__item::before { display: none; } }
.bph-usps__item i {
    font-size: 2rem;
    color: var(--secondary);
    margin-bottom: 1rem;
    display: block;
}
.bph-usps__item p { font-size: 1rem; line-height: 1.55; color: var(--primary); margin: 0; font-weight: 500; }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.bph-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    color: var(--text);
    transition: background .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease);
}
a.bph-card:hover {
    background: #fff;
    border-color: var(--secondary);
    box-shadow: var(--shadow);
    transform: translateY(-4px);
    color: var(--text);
}
.bph-card__media { position: relative; height: 200px; background: var(--surface-soft); overflow: hidden; }
.bph-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
a.bph-card:hover .bph-card__media img { transform: scale(1.04); }
.bph-card__body { padding: 1.25rem 1.35rem 0; flex: 1; }
.bph-card__body h3, .bph-card__body h4 { margin-bottom: .5rem; }
.bph-card__body p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.bph-card__foot { padding: 1rem 1.35rem 1.35rem; }

.bph-card--pad { padding: 1.5rem; }
.bph-card--pad .bph-card__body { padding: 0; }

/* Icon card used for values / feature grids */
.bph-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    background: var(--secondary-tint);
    color: var(--secondary-deep);
    font-size: 1.15rem;
    margin-bottom: .9rem;
}
.bph-card__icon img { width: 26px; height: 26px; object-fit: contain; }

/* Service cards, the flex-wrap 3-up grid on the homepage */
.bph-cards-flex { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.bph-cards-flex > * { width: 100%; }
@media (min-width: 640px) { .bph-cards-flex > * { width: calc(50% - .5rem); } }
@media (min-width: 1024px) { .bph-cards-flex > * { width: calc(33.333% - .667rem); } }

/* --------------------------------------------------------------------------
   9. Trust band + partner credentials
   -------------------------------------------------------------------------- */
/* Deliberately still navy: at 78px it reads as a rule between sections
   rather than a field of colour, and it is the only navy left in the middle
   of most pages. The margin is dropped — it was adding up to 96px of empty
   ground on top of the section padding already either side of it. */
.bph-trustband {
    background: var(--primary);
    color: #fff;
    padding-block: 1.25rem;
    border-block: 1px solid rgba(255, 255, 255, .1);
}
.bph-trustband__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 2.5rem;
    text-align: center;
}
.bph-trustband img { width: 118px; height: auto; }
.bph-trustband__score { font-family: var(--font-display); font-size: 1rem; letter-spacing: .05em; color: #fff; }
.bph-trustband__stars { color: var(--secondary-light); letter-spacing: .1em; }
.bph-trustband span { color: var(--muted-invert); font-size: var(--fs-sm); }

.bph-partners { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
.bph-partners h2 { text-wrap: balance; }
.bph-partners__logos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 2rem 1.75rem;
}
.bph-partner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .75rem;
    color: var(--primary);
    position: relative;
}
.bph-partner i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: var(--radius-pill);
    background: var(--secondary-tint);
    font-size: 1.5rem;
    color: var(--secondary);
}
.bph-partner span { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; line-height: 1.35; }
@media (min-width: 640px) { .bph-partners__logos { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .bph-partners { grid-template-columns: 1fr 1.45fr; gap: 3rem; } }

/* --------------------------------------------------------------------------
   10. Persona cards — "Who we help"
   -------------------------------------------------------------------------- */
.bph-personas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; align-items: stretch; }
.bph-persona {
    display: flex;
    flex-direction: column;
    text-align: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: box-shadow .22s var(--ease), transform .22s var(--ease);
}
.bph-persona:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
/* The photo library is landscape, so the card uses a landscape crop.
   A portrait crop sliced faces out of frame. */
.bph-persona img {
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
    object-position: center 35%;
}
.bph-persona__body { padding: 1.5rem 1.35rem 1.75rem; flex: 1; }
.bph-persona h3 { margin: 0 0 .85rem; }
.bph-persona h3::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: var(--secondary);
    margin: .65rem auto 0;
}
.bph-persona p { font-size: var(--fs-sm); color: var(--muted); margin: 0; }

/* --------------------------------------------------------------------------
   11. Slider — testimonials and book carousels
   -------------------------------------------------------------------------- */
.bph-slider { position: relative; width: 100%; }
.bph-slider__viewport { overflow: hidden; padding-block: 1.25rem; }
.bph-slider__track {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: transform .45s var(--ease);
    will-change: transform;
}
.bph-slider__item { flex: 0 0 auto; margin: 0; width: 100%; }
@media (min-width: 640px) { .bph-slider__item { width: calc(50% - .5rem); } }
@media (min-width: 1024px) { .bph-slider__item { width: calc(33.333% - .667rem); } }

.bph-slider--books .bph-slider__item { width: 150px; }
@media (min-width: 640px) { .bph-slider--books .bph-slider__item { width: 170px; } }

.bph-slider__btn {
    position: absolute;
    top: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--secondary);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background .2s var(--ease), opacity .2s var(--ease);
}
.bph-slider__btn:hover { background: var(--secondary-hover); }
.bph-slider__btn:disabled { opacity: 0; pointer-events: none; }
/* Arrows sit just outside the rail. Below 1400px there is no room in the
   gutter, so they tuck to the edge with a ring to stay legible over a card. */
.bph-slider__btn--prev { left: -20px; }
.bph-slider__btn--next { right: -20px; }
@media (min-width: 900px) { .bph-slider__btn { display: inline-flex; } }
@media (max-width: 1399px) {
    .bph-slider__btn { box-shadow: 0 0 0 4px #fff, var(--shadow-sm); }
    .bph-slider__btn--prev { left: -12px; }
    .bph-slider__btn--next { right: -12px; }
    .bph-band .bph-slider__btn,
    .bph-section--alt .bph-slider__btn { box-shadow: 0 0 0 4px var(--surface-alt), var(--shadow-sm); }
}

/* --------------------------------------------------------------------------
   12. Testimonials
   -------------------------------------------------------------------------- */
.bph-testimonial {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    height: 100%;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: 1.35rem;
}
.bph-testimonial__quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.35;
    color: var(--primary);
    margin: 0 0 .75rem;
}
.bph-testimonial p { font-size: var(--fs-sm); color: var(--muted); }
.bph-testimonial__author { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--secondary); margin: 0; }
.bph-testimonial__book { font-size: var(--fs-sm); font-weight: 500; color: var(--primary); margin: 0; }
.bph-testimonial__flag {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    padding: .1rem .45rem;
    margin-top: .6rem;
}

/* Masonry wall on the testimonials page */
.bph-masonry { columns: 1; column-gap: 1rem; }
.bph-masonry > * { break-inside: avoid; margin-bottom: 1rem; }
@media (min-width: 640px) { .bph-masonry { columns: 2; } }
@media (min-width: 960px) { .bph-masonry { columns: 3; } }
.bph-masonry .is-hidden { display: none; }

/* --------------------------------------------------------------------------
   13. Zig-zag feature rows
   -------------------------------------------------------------------------- */
.bph-zig {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, .9rem + 1.8vw, 3rem);
    align-items: center;
    /* Paid twice between consecutive rows, so 3rem meant 96px of empty
       column between one row and the next. */
    padding-block: clamp(1.25rem, .9rem + 1.4vw, 2.25rem);
}
.bph-zig__media img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    object-fit: cover;
    aspect-ratio: 4 / 3;
}
.bph-zig__media.bph-media--showcase { aspect-ratio: 4 / 3; }
@media (min-width: 1024px) {
    .bph-zig { grid-template-columns: 1fr 1fr; }
    .bph-zig--flip .bph-zig__media { order: 2; }
}

/* Compact variant used for a service page's sub-services */
/* Image-and-copy rows. These sit inside .bph-container alongside a section
   heading and cards that run the full container width, so the row has to run
   the full width too: at max-width:1024px inside a 1280px container every row
   was inset by 96px on each side and read as a misalignment against
   everything above and below it. The columns are proportional rather than a
   fixed 384px panel, so the image scales with the row instead of shrinking to
   a third of it on a wide screen. */
.bph-feature-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: center;
    padding-block: clamp(1.25rem, .9rem + 1.4vw, 2.25rem);
}
/* Radius and shadow live on the wrapper, not the image, because on wide
   screens the image is positioned to fill it. Matches .bph-zig__media, which
   is the same kind of row elsewhere on the site — the flat 12px corner and
   missing shadow made these look unfinished next to it. */
.bph-feature-row__media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.bph-feature-row__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* The body is a flex column on wide screens, where margins do not collapse,
   so the paragraph's own bottom margin was stacking on the button row's top
   margin and opening a 41px gap under the copy. */
.bph-feature-row__body p { color: var(--muted); margin-bottom: 0; }
.bph-feature-row__body > * + * { margin-top: .75rem; }
.bph-feature-row__body h3 { margin-bottom: 0; }
.bph-feature-row__body .bph-btn-row { margin-top: 1.35rem; }
@media (min-width: 768px) {
    .bph-feature-row {
        grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
        gap: clamp(1.75rem, 1.2rem + 1.8vw, 3rem);
        /* Not center: the media panel takes the row's height and the row's
           height comes from the copy. A fixed 3/2 image next to a two-line
           sub-service description was 327px tall against 90px of text, so
           every one of these rows carried ~240px of empty ground beside it. */
        align-items: stretch;
    }
    .bph-feature-row__media { min-height: 210px; }
    .bph-feature-row__media img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
    /* Copy stays optically centred against the panel whatever the row height
       works out to be. */
    .bph-feature-row__body { display: flex; flex-direction: column; justify-content: center; }
    /* Grid placement rather than row-reverse. The track sizes have to be
       swapped along with the placement: leaving them as 4fr/6fr put the
       picture in the 6fr column on every other row, so alternate rows had a
       703px panel at 3.35:1 that cut 55% off a landscape photo and 60% off
       an illustration. */
    .bph-feature-row--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
    .bph-feature-row--flip .bph-feature-row__media { grid-column: 2; grid-row: 1; }
    .bph-feature-row--flip .bph-feature-row__body { grid-column: 1; grid-row: 1; }
}

/* --------------------------------------------------------------------------
   14. Guide band — cream promo with an angled book
   -------------------------------------------------------------------------- */
/* Cream, not navy. On a service page this sits immediately under the hero,
   so a navy fill put two dark blocks back to back and the band stopped
   registering as a separate thing at all. The margin is gone too: the
   sections either side already pad themselves, and the band's own margin
   was stacking on top of that. */
.bph-guide {
    background: linear-gradient(135deg, var(--surface-cream) 0%, var(--surface-alt) 100%);
    color: var(--text);
    /* Gold rules top and bottom, the same device as the rule under the header
       and the one above the footer. They are what let this band sit against a
       cream section without the seam disappearing. */
    border-block: 3px solid var(--secondary-brand);
    /* Clips the tilted cover so it can never appear sliced against the
       white sections above and below. */
    overflow: hidden;
}
.bph-guide__grid { display: grid; grid-template-columns: 1fr; align-items: center; gap: 1.5rem; }
.bph-guide__art { display: none; }
.bph-guide__art img {
    width: auto;
    max-width: 100%;
    max-height: 300px;
    margin-inline: auto;
    transform: rotate(-6deg);
    /* Lighter than it was: a 50%-black drop shadow was tuned for navy and
       reads as dirt on cream. */
    box-shadow: 0 18px 38px rgba(1, 25, 46, .28);
    border-radius: 3px;
}
.bph-guide__copy { padding-block: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.bph-guide__copy h2 { color: var(--primary); }
.bph-guide__copy p { color: var(--muted); }
@media (min-width: 768px) {
    .bph-guide__grid { grid-template-columns: 1fr 2fr; gap: 2.5rem; }
    /* Vertical padding leaves room for the tilt, so nothing is clipped. */
    .bph-guide__art { display: flex; align-items: center; justify-content: center; padding-block: 2.5rem; }
}
@media (min-width: 1024px) {
    .bph-guide__grid { grid-template-columns: 2fr 5fr; gap: 3rem; }
}

/* --------------------------------------------------------------------------
   15. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.bph-accordion { width: 100%; }
.bph-acc { border-top: 1px solid var(--border); transition: background .2s var(--ease); }
.bph-acc:last-child { border-bottom: 1px solid var(--border); }
.bph-acc:hover { background: var(--surface-soft); }
.bph-acc__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 1.15rem .75rem;
    font-family: var(--font-body);
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--primary);
    cursor: pointer;
}
.bph-acc__btn i { flex-shrink: 0; color: var(--secondary); transition: transform .25s var(--ease); }
.bph-acc.is-open .bph-acc__btn i { transform: rotate(45deg); }
.bph-acc__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s var(--ease);
}
.bph-acc.is-open .bph-acc__panel { max-height: 640px; }
.bph-acc__panel > div { padding: 0 .75rem 1.25rem; color: var(--muted); font-size: var(--fs-sm); }

/* Accordion inside a navy band */
.bph-band .bph-acc { border-color: var(--border-invert); }
.bph-band .bph-acc:last-child { border-bottom-color: var(--border-invert); }
.bph-band .bph-acc:hover { background: rgba(255, 255, 255, .06); }
.bph-band .bph-acc__btn { color: #fff; }
.bph-band .bph-acc__btn i { color: var(--secondary-light); }
.bph-band .bph-acc__panel > div { color: var(--muted-invert); }

/* --------------------------------------------------------------------------
   16. Split CTA card — gold artwork panel beside a white copy panel
   -------------------------------------------------------------------------- */
/* Cream, not navy. This sits directly on top of the navy footer, and when
   both were var(--primary) the two merged into one 1,250px slab of blue with
   no visible seam anywhere between the CTA and the copyright line. */
.bph-ctasplit {
    background: var(--surface-alt);
    border-top: 1px solid var(--border-cream);
    padding-block: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}
.bph-ctasplit__grid { display: grid; grid-template-columns: 1fr; }
.bph-ctasplit__art {
    background: var(--secondary);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    display: flex;
    overflow: hidden;
    min-height: 240px;
}
/* Fills the panel rather than floating in the middle of it. */
.bph-ctasplit__art img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.bph-ctasplit__copy {
    background: #fff;
    border: 1px solid var(--border-cream);
    border-top: 0;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.bph-ctasplit__copy h2 { color: var(--primary); }
.bph-ctasplit__copy p { color: var(--muted); }
.bph-ctasplit__copy h5 { margin: 1.1rem 0 .5rem; color: var(--primary); }
@media (min-width: 768px) {
    .bph-ctasplit__grid { grid-template-columns: 2fr 3fr; }
    .bph-ctasplit__art { border-radius: var(--radius-xl) 0 0 var(--radius-xl); align-items: center; padding-top: 0; }
    .bph-ctasplit__copy { border-radius: 0 var(--radius-xl) var(--radius-xl) 0; border-top: 1px solid var(--border-cream); border-left: 0; }
}

/* A page whose last block is already cream would swallow the CTA whole, so
   the CTA takes white instead and the card's own border carries it. This is
   a sibling rule rather than a per-page decision so new pages cannot get it
   wrong. */
.bph-section--alt + .bph-ctasplit,
/* Same reason as above, for the cream FAQ band that now closes the pages
   which have spent their navy allowance: cream CTA on cream FAQ was one
   unbroken run of warm ground down to the footer. */
.bph-band--cream + .bph-ctasplit,
.bph-guide + .bph-ctasplit { background: var(--background); border-top-color: var(--border); }

/* --------------------------------------------------------------------------
   17. "Other pages you might find interesting"
   -------------------------------------------------------------------------- */
.bph-otherpages { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1rem; }

/* --------------------------------------------------------------------------
   18. Books
   -------------------------------------------------------------------------- */
.bph-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 1.25rem; }
.bph-book { margin: 0; text-align: left; }
.bph-book__cover {
    display: block;
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.bph-book__cover img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.bph-book:hover .bph-book__cover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.bph-book__body { padding-top: .7rem; }
.bph-book__genre {
    font-family: var(--font-display);
    font-size: var(--fs-xxs);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--secondary);
    margin: 0 0 .2rem;
}
.bph-book__body h3 { font-size: 1rem; line-height: 1.25; margin: 0 0 .2rem; }
.bph-book__body h3 a { color: var(--primary); }
.bph-book__body h3 a:hover { color: var(--secondary); }
.bph-book__author { font-size: var(--fs-xs); color: var(--muted); margin: 0; }
.bph-book__excerpt { font-size: var(--fs-sm); color: var(--muted); margin-top: .4rem; }
.bph-book.is-hidden { display: none; }

.bph-badge {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--fs-xxs);
    letter-spacing: .12em;
    text-transform: uppercase;
    background: var(--secondary-tint);
    color: var(--secondary-deep);
    border-radius: var(--radius-pill);
    padding: .2rem .65rem;
    margin-bottom: .4rem;
}

/* Book detail page */
.bph-bookdetail { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); align-items: start; }
.bph-bookdetail__cover img { width: 100%; max-width: 340px; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
@media (min-width: 900px) { .bph-bookdetail { grid-template-columns: 340px 1fr; } }

/* --------------------------------------------------------------------------
   19. Blog
   -------------------------------------------------------------------------- */
.bph-bloglayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
/* min-width:0 stops the content column being sized by the slider rail,
   which would otherwise push the whole page wider than the viewport. */
.bph-bloglayout > * { min-width: 0; }
@media (min-width: 1024px) {
    .bph-bloglayout { grid-template-columns: 300px minmax(0, 1fr); gap: 4rem; }
    .bph-blogaside { position: sticky; top: calc(var(--header-h) + 1rem); align-self: start; }
}

.bph-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.bph-posts--feature > *:first-child { grid-column: 1 / -1; }

.bph-post { margin: 0; }
.bph-post .bph-card__media { height: 190px; }
.bph-posts--feature > *:first-child .bph-card__media { height: 280px; }
.bph-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .8rem;
    margin-bottom: .55rem;
    font-size: var(--fs-xs);
    color: var(--primary);
    font-weight: 500;
}
.bph-post__tag {
    background: var(--secondary);
    color: #fff;
    border-radius: var(--radius-pill);
    padding: .15rem .8rem;
    font-size: var(--fs-xxs);
    font-weight: 500;
}
.bph-post__body h3 { font-size: 1.12rem; line-height: 1.25; }
.bph-post__body h3 a { color: var(--primary); }
.bph-post__body h3 a:hover { color: var(--secondary); }
.bph-post.is-hidden { display: none; }

.bph-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; }
.bph-pagination__count { width: 100%; text-align: center; font-size: var(--fs-sm); color: var(--muted); margin-top: .75rem; }

/* Article */
.bph-article { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1100px) { .bph-article { grid-template-columns: 300px minmax(0, 1fr); gap: 2.5rem; } }

.bph-toc { display: none; }
@media (min-width: 1100px) {
    .bph-toc {
        display: block;
        position: sticky;
        top: calc(var(--header-h) + 1rem);
        align-self: start;
        background: #fff;
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xs);
        padding: 1.1rem;
        max-height: calc(100vh - 170px);
        overflow-y: auto;
    }
}
.bph-toc h4 { font-size: 1rem; margin-bottom: .75rem; }
.bph-toc ul { list-style: none; padding: 0; margin: 0; }
.bph-toc li { margin-bottom: .35rem; }
.bph-toc a { display: block; font-size: var(--fs-sm); color: var(--muted); padding: .3rem .5rem; border-radius: var(--radius-sm); border-left: 2px solid var(--border); }
.bph-toc a:hover, .bph-toc a.is-active { color: var(--secondary); background: var(--surface-soft); border-left-color: var(--secondary); }

.bph-article__hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: .9rem; }
.bph-article__body { max-width: 72ch; font-size: 1.075rem; line-height: 1.75; }
.bph-article__body h2 {
    margin-top: 2.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border);
}
.bph-article__body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.bph-article__body h3 { margin-top: 2rem; }
.bph-article__body h4 { margin-top: 1.75rem; margin-bottom: .5rem; color: var(--primary); }
.bph-article__body p, .bph-article__body li { color: var(--muted); }

/* Lead paragraph that opens most articles. */
.bph-article__body .intro {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--primary);
    font-weight: 500;
    border-left: 3px solid var(--secondary);
    padding-left: 1.1rem;
    margin-bottom: 1.75rem;
}

/* Authored as a single paragraph of middot-separated points; presented as
   a boxed checklist so it reads as the list it actually is. */
.bph-article__body .bph-row {
    background: var(--secondary-tint);
    border: 1px solid var(--border);
    border-left: 3px solid var(--secondary);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    color: var(--primary);
    font-size: 1rem;
    line-height: 1.85;
}

/* Article tables */
.bph-table-wrap {
    overflow-x: auto;
    margin: 1.75rem 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    -webkit-overflow-scrolling: touch;
}
.bph-table-wrap table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 520px; }
.bph-table-wrap th {
    background: var(--primary);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: var(--fs-xs);
    text-align: left;
    padding: .8rem 1rem;
}
.bph-table-wrap td { padding: .75rem 1rem; border-top: 1px solid var(--border); color: var(--muted); vertical-align: top; }
.bph-table-wrap tr:nth-child(even) td { background: var(--surface-soft); }
.bph-table-wrap td:first-child { color: var(--primary); font-weight: 500; }
.bph-article__body blockquote {
    margin: 1.75rem 0;
    padding: 1.1rem 1.35rem;
    border-left: 3px solid var(--secondary);
    background: var(--surface-alt);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--primary);
}
.bph-article__author {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: var(--surface-soft);
    border-radius: var(--radius-xl);
    padding: 1.1rem;
}
.bph-article__author .ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: var(--secondary-light);
    font-size: 1.2rem;
}
.bph-rule { height: 0; width: 210px; border-bottom: 3px solid var(--secondary); margin-bottom: 1.5rem; }
/* Full-width hairline for breaking up a long single-colour run where a
   change of ground colour is not available — the bookshop column, mainly. */
.bph-divider { height: 0; border: 0; border-top: 1px solid var(--border-cream); margin: 2.25rem 0 0; }

/* --------------------------------------------------------------------------
   20. Process / steps
   -------------------------------------------------------------------------- */
.bph-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1rem; counter-reset: step; }
/* --step-cols comes from processSection and divides the steps evenly; auto-fit
   above still governs the narrower breakpoints. */
@media (min-width: 1024px) {
    .bph-steps { grid-template-columns: repeat(var(--step-cols, 4), minmax(0, 1fr)); }
}
.bph-step {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: 1.5rem 1.15rem 1.15rem;
    margin: 0;
}
.bph-step::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    font-family: var(--font-display);
    font-size: .8rem;
    letter-spacing: .12em;
    color: var(--secondary);
    display: block;
    margin-bottom: .5rem;
}
.bph-step p { font-size: var(--fs-sm); color: var(--muted); }
.bph-band .bph-step { background: rgba(255, 255, 255, .07); border-color: var(--border-invert); box-shadow: none; }

/* --------------------------------------------------------------------------
   21. Video
   -------------------------------------------------------------------------- */
.bph-video { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.bph-video__play {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
}
.bph-video__play img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.bph-video__btn {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: var(--radius-pill);
    background: var(--secondary);
    color: #fff;
    font-size: 1.5rem;
    transition: transform .2s var(--ease);
}
.bph-video__play:hover .bph-video__btn { transform: translate(-50%, -50%) scale(1.08); }
.bph-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.bph-video__note { text-align: center; font-size: var(--fs-xs); color: var(--muted-invert); margin-top: .85rem; }

.bph-videogrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1rem; }

/* --------------------------------------------------------------------------
   22. Forms
   -------------------------------------------------------------------------- */
.bph-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .85rem; }
.bph-field { margin-bottom: .85rem; }
.bph-field label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--primary);
    margin-bottom: .35rem;
}
.bph-field input,
.bph-field select,
.bph-field textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: .7rem .85rem;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.bph-field textarea { min-height: 128px; resize: vertical; }
.bph-field input:focus,
.bph-field select:focus,
.bph-field textarea:focus {
    outline: 0;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(153, 129, 69, .16);
}
.bph-field input.is-invalid,
.bph-field select.is-invalid,
.bph-field textarea.is-invalid { border-color: #c0392b; }
.bph-form__note { font-size: var(--fs-xs); color: var(--muted); margin-top: .75rem; }

.bph-form-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
}
.bph-form-panel h3, .bph-form-panel h5 { color: var(--primary); }

.bph-search { display: flex; gap: .5rem; }
.bph-search input { flex: 1; }

/* Contact tiles */
.bph-contact-tiles { display: grid; gap: .75rem; }
.bph-contact-tile {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: .9rem 1.1rem;
    color: var(--text);
    transition: background .2s var(--ease);
}
a.bph-contact-tile:hover { background: var(--surface-soft); color: var(--text); }
.bph-contact-tile i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: var(--radius-pill);
    background: var(--secondary-tint);
    color: var(--secondary-deep);
}
.bph-contact-tile > div { min-width: 0; }
.bph-contact-tile strong { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
/* Long email addresses have no break opportunity, so allow one anywhere. */
.bph-contact-tile span { display: block; font-size: var(--fs-sm); color: var(--primary); overflow-wrap: anywhere; }

.bph-map { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.bph-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --------------------------------------------------------------------------
   23. Modal
   -------------------------------------------------------------------------- */
.bph-modal {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(1, 25, 46, .62);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), visibility .25s;
}
.bph-modal.is-open { opacity: 1; visibility: visible; }
.bph-modal__box {
    position: relative;
    width: min(620px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: clamp(1.35rem, 1rem + 1.4vw, 2.25rem);
}
.bph-modal__close {
    position: absolute;
    top: .85rem;
    right: .85rem;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: #fff;
    color: var(--primary);
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   24. Footer
   -------------------------------------------------------------------------- */
/* Navy, for the same reason as the header: the logo is a light mark and
   was invisible on the cream ground it started out on. */
.bph-footer {
    position: relative;
    background: var(--primary);
    color: var(--muted-invert);
    /* Mirrors the 10px gold rule at the top of the header, so the page is
       closed by the same device that opens it. Without this the footer had
       no edge of its own and simply inherited whatever the block above it
       happened to be. */
    border-top: 10px solid var(--secondary-brand);
    padding-top: clamp(2.25rem, 1.5rem + 2vw, 3.25rem);
}
.bph-footer h2, .bph-footer h3, .bph-footer h4 { color: #fff; }
.bph-footer__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.bph-footer__grid > * { min-width: 0; }
@media (min-width: 640px) { .bph-footer__grid { grid-template-columns: repeat(2, 1fr); } }
/* The link column needs the lion's share: at 2fr/3fr/2fr its three
   sub-columns fell to 151px and every label wrapped onto two lines. */
@media (min-width: 1024px) { .bph-footer__grid { grid-template-columns: minmax(0, 1.9fr) minmax(0, 4fr) minmax(0, 2.1fr); gap: 2rem; } }
@media (min-width: 1280px) { .bph-footer__grid { gap: 2.5rem; } }

.bph-footer__logo { width: 186px; height: auto; margin-bottom: 1rem; }
.bph-footer__brand p { font-size: var(--fs-sm); color: var(--muted-invert); }
.bph-footer__creds { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-top: 1.1rem; max-width: 320px; }
.bph-footer__cred {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-display);
    font-size: var(--fs-xxs);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.25;
}
.bph-footer__cred i { color: var(--secondary-light); font-size: 1rem; }

.bph-footer__links { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 480px) { .bph-footer__links { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
.bph-footer__links ul { list-style: none; margin: 0; padding: 0; }
.bph-footer__links li { margin-bottom: .1rem; }
.bph-footer__link {
    display: block;
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: var(--muted-invert);
    padding: .26rem 0;
}
.bph-footer__link:hover { color: var(--secondary-light); }
.bph-footer__link--head {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-sm);
    letter-spacing: .04em;
    color: #fff;
    margin-top: .35rem;
}
.bph-footer__links li:first-child .bph-footer__link--head { margin-top: 0; }

.bph-footer__signup p { font-size: var(--fs-sm); color: var(--muted-invert); margin-bottom: .85rem; }
.bph-footer__signup form { display: flex; flex-wrap: wrap; gap: .5rem; }
.bph-footer__signup input {
    flex: 1 1 180px;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: .65rem .85rem;
    background: #fff;
}
.bph-footer__signup input:focus { outline: 0; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(153, 129, 69, .16); }

/* Gold contact/social bar */
.bph-footer__bar { background: var(--secondary); margin-top: 1.75rem; }
.bph-footer__bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    padding-block: .5rem;
}
.bph-footer__bar-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; justify-content: center; }
.bph-footer__bar-links a,
.bph-footer__bar-links span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--fs-xs);
    font-weight: 500;
    color: #fff;
}
.bph-footer__bar-links a:hover { color: var(--primary); }
.bph-footer__social { display: flex; gap: .45rem; justify-content: center; }
.bph-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--secondary);
    font-size: .8rem;
    transition: color .2s var(--ease), background .2s var(--ease);
}
.bph-footer__social a:hover { background: #fff; color: var(--primary); }

.bph-footer__legal { padding-block: 1rem; text-align: center; }
.bph-footer__legal p, .bph-footer__legal small { font-size: var(--fs-xxs); color: rgba(255, 255, 255, .62); margin: 0; }
.bph-footer__legal p { margin-top: .4rem; }
.bph-footer__legal a { color: rgba(255, 255, 255, .82); }
.bph-footer__legal a:hover { color: var(--secondary-light); }
.bph-footer__legal .sep { opacity: .45; margin-inline: .45rem; }

/* --------------------------------------------------------------------------
   25. Sticky mobile CTA + floating contact
   -------------------------------------------------------------------------- */
.bph-stickybar {
    position: fixed;
    inset: auto 0 0;
    z-index: 90;
    background: var(--primary);
    padding: .75rem var(--gutter);
    display: flex;
    justify-content: center;
    gap: .6rem;
    box-shadow: 0 -8px 24px rgba(1, 25, 46, .22);
}
.bph-stickybar .bph-btn { flex: 1; max-width: 240px; }
@media (min-width: 900px) { .bph-stickybar { display: none; } }
@media (max-width: 899px) { body { padding-bottom: 76px; } }

.bph-float { position: fixed; right: 1rem; bottom: 90px; z-index: 85; display: grid; gap: .5rem; }
@media (min-width: 900px) { .bph-float { bottom: 1.25rem; } }
.bph-float a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-pill);
    color: #fff;
    font-size: 1.2rem;
    box-shadow: var(--shadow);
    transition: transform .2s var(--ease);
}
.bph-float a:hover { transform: translateY(-2px); color: #fff; }
.bph-float__wa { background: #25d366; }
.bph-float__tel { background: var(--primary); }

/* --------------------------------------------------------------------------
   26. Reveal on scroll
   -------------------------------------------------------------------------- */
/* Content is visible by default. The hidden state is opt-in via .js-reveal,
   which britannia.js adds only once it has actually started running — so a
   failed or blocked script leaves the page readable instead of blank. */
html.js-reveal [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
html.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   27. Prose helpers for legal / long-form pages
   -------------------------------------------------------------------------- */
.bph-prose { max-width: 820px; }
.bph-prose h2 { margin-top: 2.25rem; }
.bph-prose h3 { margin-top: 1.5rem; }
.bph-prose p, .bph-prose li { color: var(--muted); }

/* Collapsed until "Load more" is pressed */
.is-collapsed { display: none !important; }

/* Grid children must be allowed to shrink below their content width. */
.bph-grid > *,
.bph-pagehero__grid > *,
.bph-zig > *,
.bph-article > *,
.bph-hero__grid > *,
.bph-ctasplit__grid > *,
.bph-guide__grid > * { min-width: 0; }

/* Form wrapper — a hook for the JS submit handler; fields carry the styling. */
.bph-form { display: block; }

/* --------------------------------------------------------------------------
   28. Cream variant of the full-bleed band
   -------------------------------------------------------------------------- */
/* Several pages ran two navy bands plus the navy trust ribbon plus the navy
   footer, which is what made the site read as blue throughout. Where a page
   needs a second band, it takes this one instead: same full-bleed shape,
   warm ground, navy type. It lives at the end of the file because every rule
   here overrides a `.bph-band ...` selector of identical specificity, and the
   later declaration is the one that has to win. */
.bph-band--cream {
    background: var(--surface-alt);
    color: var(--text);
    border-block: 1px solid var(--border-cream);
}
.bph-band--cream h1,
.bph-band--cream h2,
.bph-band--cream h3,
.bph-band--cream h4,
.bph-band--cream h5 { color: var(--primary); }
.bph-band--cream p,
.bph-band--cream li { color: var(--muted); }
.bph-band--cream strong { color: var(--primary); }
.bph-band--cream a { color: var(--secondary); }
.bph-band--cream a.bph-btn--primary { color: #fff; }
.bph-band--cream a.bph-btn--navy { color: #fff; }
.bph-band--cream a.bph-btn--secondary { color: var(--secondary); }
.bph-band--cream .bph-eyebrow,
.bph-band--cream .bph-gold { color: var(--secondary); }
.bph-band--cream .bph-head p,
.bph-band--cream .bph-lead { color: var(--muted); }
.bph-band--cream .bph-head h2::after { background: var(--secondary); }
.bph-band--cream .bph-ticks li { color: var(--muted); }
.bph-band--cream .bph-ticks li::before { color: var(--secondary); }
.bph-band--cream .bph-crumbs { color: var(--muted); }
.bph-band--cream .bph-crumbs a { color: var(--secondary); }
/* Accordion, for a cream FAQ block */
.bph-band--cream .bph-acc { border-color: var(--border-cream); }
.bph-band--cream .bph-acc:last-child { border-bottom-color: var(--border-cream); }
.bph-band--cream .bph-acc:hover { background: rgba(255, 255, 255, .55); }
.bph-band--cream .bph-acc__btn { color: var(--primary); }
.bph-band--cream .bph-acc__btn i { color: var(--secondary); }
.bph-band--cream .bph-acc__panel > div { color: var(--muted); }
/* Slider arrows punch out of the ground they sit on. */
.bph-band--cream .bph-slider__btn { box-shadow: 0 0 0 4px var(--surface-alt), var(--shadow-sm); }