/* ==========================================================================
   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; }

/* Page scrollbar, in the same language as the process-step scrollers: a gold
   thumb on a warm cream track, no arrow buttons. The thumb is inset from the
   track by a cream border so it reads as a slim bar, and deepens to the
   interactive gold on hover and drag. Chrome ignores ::-webkit-scrollbar once
   scrollbar-color is set, so the standard properties go to Firefox only. */
html::-webkit-scrollbar { width: 12px; height: 12px; }
html::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
html::-webkit-scrollbar-track {
    background: var(--surface-soft);
    border-left: 1px solid var(--border-cream);
}
html::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--secondary-light), var(--secondary-brand));
    border: 3px solid var(--surface-soft);
    border-radius: 12px;
    min-height: 48px;
}
html::-webkit-scrollbar-thumb:hover { background: var(--secondary-brand); }
html::-webkit-scrollbar-thumb:active { background: var(--secondary); }
html::-webkit-scrollbar-corner { background: var(--surface-soft); }
@supports (-moz-appearance: none) {
    html {
        scrollbar-width: thin;
        scrollbar-color: var(--secondary-brand) var(--surface-soft);
    }
}

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; }
/* A heading's level follows the outline (h1, h2, h3 with no gaps) and its
   size follows the design, so a sidebar or panel title can be an h2 that
   still looks like the h4 or h5 it was drawn as. */
.bph-h3 { font-size: var(--fs-h3); }
.bph-h4 { font-size: var(--fs-h4); }
.bph-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); }
/* A book slider placed straight under a section heading already has the
   heading's margin above it; its own tight padding doubled the gap. */
.bph-head + .bph-section--tight { padding-top: 0; }
.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;
    /* Above .bph-header__inner (z-index 2, later in the source), whose top
       padding sits under the hanging tabs and was swallowing their clicks. */
    z-index: 3;
    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); }

/* Split item: the label is a link, the chevron is its own button. */
.bph-nav__item--split { display: flex; align-items: center; }
.bph-nav__item--split > .bph-nav__link { padding-right: .2rem; }
.bph-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: none;
    border: 0;
    padding: .6rem .5rem .6rem .15rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color .2s var(--ease);
}
.bph-nav__toggle i { font-size: .65rem; transition: transform .2s var(--ease); }
.bph-nav__toggle:hover,
.bph-nav__item--split > .bph-nav__link:hover + .bph-nav__toggle,
.bph-nav__toggle.is-active { color: var(--secondary-light); }
.bph-nav__item.is-open > .bph-nav__toggle 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); }
    /* The logo is a cream-and-gold mark for dark grounds and all but
       disappeared on the white drawer, so the drawer's head is a navy band
       running edge to edge, the same as the header it replaces. */
    .bph-nav__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--primary);
        border-bottom: 3px solid var(--secondary-brand);
        margin: -1.5rem calc(-1 * var(--gutter)) 1.25rem;
        padding: .9rem var(--gutter);
    }
    .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;
        /* No bottom padding while closed: max-height cannot shrink a box
           below its padding, so it used to leave every closed dropdown
           12px tall and the rows with a submenu visibly deeper than the
           rest. */
        padding: 0 0 0 .5rem;
        max-height: 0;
        overflow: hidden;
        transition: max-height .28s var(--ease), padding-bottom .28s var(--ease);
    }
    .bph-nav__item:hover > .bph-dropdown { max-height: 0; }
    .bph-nav__item.is-open > .bph-dropdown { max-height: 560px; padding-bottom: .75rem; }
    .bph-nav__item--split { flex-wrap: wrap; }
    .bph-nav__item--split > .bph-nav__link { flex: 1; width: auto; }
    .bph-nav__toggle {
        width: 44px;
        height: 44px;
        padding: 0 .25rem 0 0;
        /* Right-aligned, so a split item's chevron lines up with the ones
           drawn inside the plain dropdown links. */
        justify-content: flex-end;
        color: var(--primary);
    }
    .bph-nav__toggle:hover,
    .bph-nav__item--split > .bph-nav__link:hover + .bph-nav__toggle,
    .bph-nav__toggle.is-active { color: var(--secondary); }
    .bph-nav__item--split > .bph-dropdown { flex-basis: 100%; }
    .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; }
    /* The hanging utility tabs stack above the header row, and so above the
       drawer inside it, where they sat on top of the close button. */
    body.nav-open .bph-topbar__inner { visibility: hidden; }
}

@media (max-width: 620px) {
    .bph-topbar__tab span:not(.bph-keep) { display: none; }
    /* Icon-only on phones, so widen them to a thumb-sized target. */
    .bph-topbar__tab { padding-inline: .65rem; min-width: 40px; justify-content: center; }
}
@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) + .75rem); padding-bottom: clamp(1rem, .7rem + 1vw, 1.75rem); }
.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); }
/* Book-trio mockups (transparent WebP) sit whole on the card's tinted panel. */
.bph-card__media.bph-media--mockup { padding: .7rem 1rem .4rem; }
.bph-card__media.bph-media--mockup img { object-fit: contain; }
@media (min-width: 1024px) {
    .bph-pagehero__grid { grid-template-columns: 1fr 1fr; }
    .bph-pagehero__media { position: sticky; top: calc(var(--header-h) + 1rem); }
}

/* Book stage — a trio of live CSS 3D hardcovers straight on the white hero
   (Our Services): one forward in the centre, one angled either side. Sizes
   are container units, so the group scales with the column. Each book's
   place comes from data-slot; britannia.js steps covers through
   right → centre → left while the rest wait off-stage ("in" / "out"). */
.bph-bookstage { aspect-ratio: 5 / 4; width: 100%; max-width: 560px; margin-inline: auto; }
:where(.bph-bookstage) { position: relative; } /* yields to the desktop sticky rule */
/* The container sits on an inner layer: containment on the grid item itself
   would collapse its height while the grid sizes its rows. */
.bph-bookstage__inner {
    position: absolute;
    inset: 0;
    container-type: size;
    perspective: 210cqw;
    perspective-origin: 50% 20%;
}
/* one soft floor shadow under the whole trio */
.bph-bookstage__inner::before {
    content: "";
    position: absolute;
    left: 6%; right: 6%; bottom: 1cqw;
    height: 9cqw;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(1, 36, 66, .28), rgba(1, 36, 66, 0));
}
.bph-b3d {
    --w: 46cqw; --d: 4.8cqw;
    position: absolute;
    left: calc(50% - var(--w) / 2);
    bottom: 5cqw;
    width: var(--w);
    /* height comes from the cover image, so each book keeps its real shape */
    transform-style: preserve-3d;
    transform-origin: 50% 100%;
    transition: transform 1.1s cubic-bezier(.65, 0, .35, 1), opacity .8s ease;
}
.bph-b3d[data-slot="center"] { z-index: 3; transform: rotateY(-8deg); }
.bph-b3d[data-slot="left"]   { z-index: 2; transform: translateX(-30cqw) translateZ(-12cqw) rotateY(28deg) scale(.82); }
.bph-b3d[data-slot="right"]  { z-index: 2; transform: translateX(30cqw) translateZ(-12cqw) rotateY(-28deg) scale(.82); }
.bph-b3d[data-slot="in"]     { z-index: 1; opacity: 0; transform: translateX(20cqw) translateZ(-40cqw) rotateY(-36deg) scale(.66); }
.bph-b3d[data-slot="out"]    { z-index: 1; opacity: 0; transform: translateX(-20cqw) translateZ(-40cqw) rotateY(36deg) scale(.66); }
.bph-b3d.is-jump { transition: none; }
.bph-b3d__body {
    position: relative;
    transform-style: preserve-3d;
    animation: bph-b3d-float 6s ease-in-out infinite;
    animation-delay: calc(var(--i) * -1.7s);
}
.bph-b3d__body > span { position: absolute; backface-visibility: hidden; }
.bph-b3d__body > .bph-b3d__cover {
    position: relative;
    display: block;
    transform: translateZ(calc(var(--d) / 2));
    border-radius: 1px 4px 4px 1px;
    overflow: hidden;
    box-shadow: 0 2.4cqw 4.4cqw rgba(1, 36, 66, .28), 0 .4cqw 1cqw rgba(1, 36, 66, .16);
}
.bph-pagehero__media.bph-bookstage img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
}
/* hardcover hinge + a sweep of gloss */
.bph-b3d__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,.45) 0, rgba(255,255,255,.24) 1%, rgba(0,0,0,.2) 2.4%, rgba(255,255,255,.1) 3.6%, transparent 6.5%),
        linear-gradient(110deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 66%, rgba(0,0,0,.16) 100%);
}
.bph-b3d__spine {
    top: 0; height: 100%;
    width: var(--d);
    left: calc(50% - var(--d) / 2);
    transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
    background-size: auto 100%;
    background-position: 0 0;
}
.bph-b3d__spine::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.6), rgba(0,0,0,.25) 35%, rgba(255,255,255,.1) 60%, rgba(0,0,0,.55));
}
.bph-b3d__pages {
    top: 1%; height: 98%;
    width: calc(var(--d) - .5cqw);
    left: calc(50% - (var(--d) - .5cqw) / 2);
    transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - .6cqw));
    background:
        linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,.06) 45%, rgba(0,0,0,.26)),
        repeating-linear-gradient(90deg, #f4ecd9 0 2px, #d6c9ab 2px 3px);
}
.bph-b3d__back {
    inset: 0;
    transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
    background: #0b0f16;
}
@keyframes bph-b3d-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1.4cqw); }
}
@media (prefers-reduced-motion: reduce) {
    .bph-b3d__body { animation: none; }
}

/* 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; } }
/* Four claims: auto-fit put three on a tablet row and stranded the fourth. */
@media (min-width: 560px) and (max-width: 1023px) {
    .bph-usps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.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; }
/* Tablets fit two cards a row; with three (or five) the last one sat alone
   on the left. Flex-wrap and centre it instead. Same for the step grids. */
@media (min-width: 640px) and (max-width: 1023px) {
    .bph-personas,
    .bph-steps:not(.bph-grid--center) { display: flex; flex-wrap: wrap; justify-content: center; }
    .bph-personas > * { width: calc(50% - .625rem); }
    .bph-steps:not(.bph-grid--center) > * { width: calc(50% - .5rem); }
}
.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: 4 / 5; /* author headshots are 4:5 portraits: show them whole */
    height: auto;
    object-fit: cover;
    object-position: center top;
}
.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%; }
/* pan-y keeps vertical page scrolling native and hands horizontal drags to
   the slider's swipe handler. The height transition is for phones, where
   the viewport follows the height of the one card on show. */
.bph-slider__viewport { overflow: hidden; padding-block: 1.25rem; touch-action: pan-y; transition: height .3s var(--ease); }
.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); } }

/* Author cards: the Author Spotlight directory's four-up width on desktop. */
.bph-slider--authors { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.bph-slider--authors .bph-slider__track { align-items: stretch; }
.bph-slider--authors .bph-authorcard { height: 100%; }
@media (min-width: 1200px) { .bph-slider--authors .bph-slider__item { width: calc(25% - .75rem); } }

.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; } }
/* Below 900px there is no gutter to hang the arrows in, and over a
   full-width card they cover its text. They sit as a pair under the rail
   instead, so a visitor can see there is more to swipe through. A disabled
   arrow dims rather than vanishing, so its partner does not jump sideways. */
@media (max-width: 899px) {
    .bph-slider { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .75rem; }
    .bph-slider__viewport { flex: 0 0 100%; }
    .bph-slider__btn,
    .bph-slider__btn--prev,
    .bph-slider__btn--next { display: inline-flex; position: static; transform: none; box-shadow: var(--shadow-sm); }
    .bph-slider__btn:disabled { opacity: .35; }
}
@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); }
/* Slider cards share one height, so a long review would stretch every card
   to its length. Cap the body and let it scroll. */
.bph-slider .bph-testimonial__text { max-height: 18rem; }
/* A phone shows one card at a time, so the shared height buys nothing and
   a two-line review sat above 200px of empty card. Let each card fit its
   own review there. */
@media (max-width: 639px) {
    .bph-slider .bph-testimonial { height: auto; justify-content: flex-start; }
}
/* Wall cards are a fixed height; the headline and author stay put and the
   review between them fills the rest, scrolling when it runs longer. */
.bph-masonry .bph-testimonial { height: 360px; }
.bph-masonry .bph-testimonial > div:first-child {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.bph-masonry .bph-testimonial__text { flex: 1; min-height: 0; }
.bph-slider .bph-testimonial__text,
.bph-masonry .bph-testimonial__text {
    overflow-y: auto;
    padding-right: .75rem;
    overscroll-behavior: contain;
}
.bph-testimonial__text p:last-child { margin-bottom: 0; }
/* Same slim gold scrollbar as the process step cards. */
.bph-testimonial__text::-webkit-scrollbar { width: 6px; }
.bph-testimonial__text::-webkit-scrollbar-button { display: none; height: 0; }
.bph-testimonial__text::-webkit-scrollbar-track {
    background: var(--surface-alt);
    border-radius: 6px;
    margin-block: 2px;
}
.bph-testimonial__text::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--secondary-light), var(--secondary-brand));
    border-radius: 6px;
}
.bph-testimonial__text::-webkit-scrollbar-thumb:hover { background: var(--secondary); }
@supports (-moz-appearance: none) {
    .bph-testimonial__text {
        scrollbar-width: thin;
        scrollbar-color: var(--secondary-brand) var(--surface-alt);
    }
}
.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;
}

/* Testimonial wall. It was a column masonry; with fixed-height cards it is an
   even grid, which also keeps "Load more" filling rows left to right. */
.bph-masonry { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 640px) { .bph-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .bph-masonry { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.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: -1; }
}

/* 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; }
}

/* --------------------------------------------------------------------------
   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 .bph-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 { 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; }
/* The tile is a fixed 3:4 slot, but the cover inside it keeps its own shape.
   The original imprint covers are all 3:4 and fill the slot as before; the
   author covers run from 2:3 to square, and `object-fit: cover` was slicing
   titles and author names off them. They now stand on a common baseline,
   like books on a shelf, and the shadow belongs to the cover, not the slot. */
.bph-book__cover {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    aspect-ratio: 3 / 4;
    transition: transform .25s var(--ease);
}
.bph-book__cover img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    transition: box-shadow .25s var(--ease);
}
.bph-book:hover .bph-book__cover { transform: translateY(-4px); }
.bph-book:hover .bph-book__cover img { box-shadow: var(--shadow-lg); }
.bph-book__author a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-cream); text-underline-offset: 3px; }
.bph-book__author a:hover { color: var(--secondary); text-decoration-color: currentColor; }
.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 .bph-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; }
/* Phones: a 520px table in a 340px column meant swiping sideways to read
   it. Each row becomes a card instead, headed by its first cell, with the
   column heading (data-label, added by the build) beside every value. */
@media (max-width: 599px) {
    .bph-table-wrap:has(.bph-table--stack) { overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
    .bph-table-wrap .bph-table--stack { min-width: 0; }
    .bph-table--stack, .bph-table--stack tbody, .bph-table--stack tr { display: block; }
    .bph-table--stack tr:first-child { display: none; }
    .bph-table--stack tr {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-xs);
        overflow: hidden;
        margin-bottom: .75rem;
    }
    .bph-table-wrap .bph-table--stack tr td {
        display: grid;
        grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
        gap: .75rem;
        padding: .6rem .9rem;
        background: #fff;
    }
    .bph-table--stack td::before {
        content: attr(data-label);
        font-family: var(--font-display);
        font-size: var(--fs-xs);
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--primary);
    }
    .bph-table-wrap .bph-table--stack tr td:first-child {
        display: block;
        border-top: 0;
        background: var(--primary);
        color: #fff;
        font-weight: 600;
    }
    .bph-table--stack td:first-child::before { content: none; }
}
.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); }
/* A step count that does not divide evenly (the publishing process page has
   eleven) uses .bph-grid--center, which needs flex rather than grid. */
.bph-steps.bph-grid--center { display: flex; }
/* Step copy runs to paragraph length, so hold at three columns. */
@media (min-width: 1280px) { .bph-steps.bph-grid--center > * { width: calc(33.333% - .667rem); } }
/* Four cards read better as two pairs than as three and one. */
@media (min-width: 1024px) {
    .bph-steps--pairs.bph-grid--center { max-width: 960px; margin-inline: auto; }
    .bph-steps--pairs.bph-grid--center > * { width: calc(50% - .5rem); }
}
/* Equal-height cards: longer copy scrolls inside the card instead of
   stretching the row. */
.bph-steps.bph-grid--center .bph-step { display: flex; flex-direction: column; height: 280px; }
.bph-steps.bph-grid--center .bph-step p {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: .75rem;
    overscroll-behavior: contain;
}
/* Scrollbar: slim gold thumb on a cream track, no arrow buttons. Chrome
   drops the ::-webkit-scrollbar styles whenever scrollbar-color is set, so
   the standard properties are given to Firefox only. */
.bph-steps.bph-grid--center .bph-step p::-webkit-scrollbar { width: 6px; }
.bph-steps.bph-grid--center .bph-step p::-webkit-scrollbar-button { display: none; height: 0; }
.bph-steps.bph-grid--center .bph-step p::-webkit-scrollbar-track {
    background: var(--surface-alt);
    border-radius: 6px;
    margin-block: 2px;
}
.bph-steps.bph-grid--center .bph-step p::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--secondary-light), var(--secondary-brand));
    border-radius: 6px;
}
.bph-steps.bph-grid--center .bph-step p::-webkit-scrollbar-thumb:hover { background: var(--secondary); }
@supports (-moz-appearance: none) {
    .bph-steps.bph-grid--center .bph-step p {
        scrollbar-width: thin;
        scrollbar-color: var(--secondary-brand) var(--surface-alt);
    }
}
.bph-band .bph-step { background: rgba(255, 255, 255, .07); border-color: var(--border-invert); box-shadow: none; }

/* --------------------------------------------------------------------------
   21. Video
   -------------------------------------------------------------------------- */
/* Held to 880px so the whole 16:9 frame fits on a laptop screen under its
   heading (full container width made it ~630px tall), and so the 1280px
   poster is not stretched past its own resolution. */
.bph-video {
    position: relative;
    max-width: 880px;
    margin-inline: auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    outline: 1px solid var(--border-cream);
    outline-offset: -1px;
}
.bph-video + .bph-video__note { max-width: 880px; margin-inline: auto; }
.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; transition: transform .6s var(--ease); }
.bph-video__play:hover img { transform: scale(1.02); }
/* A navy fade along the foot of the poster carries the play control, so the
   button sits in the lower corner instead of over the speaker's face. */
.bph-video__play::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to top, rgba(1, 25, 46, .78), rgba(1, 25, 46, 0));
    pointer-events: none;
}
.bph-video__cta {
    position: absolute;
    left: clamp(1rem, .6rem + 1.6vw, 1.75rem);
    bottom: clamp(1rem, .6rem + 1.6vw, 1.75rem);
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .9rem;
    text-align: left;
}
.bph-video__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: clamp(52px, 40px + 2vw, 64px);
    height: clamp(52px, 40px + 2vw, 64px);
    padding-left: 3px; /* optical centre for the triangle */
    border-radius: var(--radius-pill);
    background: var(--secondary);
    color: #fff;
    font-size: 1.2rem;
    box-shadow: 0 0 0 6px rgba(208, 179, 120, .28), 0 10px 24px rgba(1, 25, 46, .35);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.bph-video__play:hover .bph-video__btn,
.bph-video__play:focus-visible .bph-video__btn { transform: scale(1.08); box-shadow: 0 0 0 9px rgba(208, 179, 120, .32), 0 12px 28px rgba(1, 25, 46, .4); }
.bph-video__label { display: flex; flex-direction: column; font-size: var(--fs-sm); line-height: 1.35; color: rgba(255, 255, 255, .85); }
.bph-video__label strong {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-xs);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--secondary-light);
}
@media (max-width: 479px) { .bph-video__label { display: none; } }
.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; }
/* File field: the browser's own picker button, dressed as a secondary button. */
.bph-field input[type="file"] { padding: .5rem .6rem; cursor: pointer; }
.bph-field input[type="file"]::file-selector-button {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--secondary);
    background: #fff;
    border: 1px solid var(--secondary);
    border-radius: var(--radius-sm);
    padding: .45rem .85rem;
    margin-right: .85rem;
    cursor: pointer;
    transition: background .2s var(--ease);
}
.bph-field input[type="file"]::file-selector-button:hover { background: var(--secondary-tint); }
.bph-form__fine { font-size: var(--fs-xs); color: var(--muted); margin: 0 0 .85rem; }
.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 h2, .bph-form-panel h3, .bph-form-panel h5 { color: var(--primary); }

.bph-search { display: flex; gap: .5rem; }
/* Search boxes (bookshop, blog, authors, FAQs) were left with the browser's
   default field; they now match the form fields and the button beside them. */
.bph-search input {
    flex: 1;
    min-width: 0;
    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: .6rem .85rem;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.bph-search input:focus {
    outline: 0;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(153, 129, 69, .16);
}
.bph-search .bph-btn { flex: 0 0 auto; min-width: 46px; }
/* iOS Safari zooms the page into any field set below 16px when it is
   tapped, and leaves it zoomed. Hold every text field at 16px on phones
   and tablets. */
@media (max-width: 1023px) {
    .bph-field input,
    .bph-field select,
    .bph-field textarea,
    .bph-search input,
    /* The footer field's own font-size comes later in the file at the same
       specificity, so it needs the extra `form` to win. */
    .bph-footer__signup form input { font-size: 1rem; }
}

/* 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); } }
/* Tablet: brand and newsletter side by side, the three link columns across
   the full width underneath. In half the width the links wrapped "Publishing
   With Us" and most other labels onto two lines. */
@media (min-width: 640px) and (max-width: 1023px) {
    .bph-footer__grid {
        grid-template-areas: "brand signup" "links links";
        column-gap: 2rem;
        row-gap: 2rem;
    }
    .bph-footer__brand { grid-area: brand; }
    .bph-footer__links { grid-area: links; }
    .bph-footer__signup { grid-area: signup; }
}
/* 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-link { display: inline-block; margin-bottom: 1rem; border-radius: var(--radius-sm); }
.bph-footer__logo { display: block; width: 186px; height: auto; }
.bph-footer__brand p { font-size: var(--fs-sm); color: var(--muted-invert); }
/* Credentials strip: its own full-width row under the columns, divided off
   by a hairline. Squeezed into the brand column as a 2x2 block, the labels
   broke over three lines and the icons sat out of line with them. */
.bph-footer__creds {
    list-style: none;
    margin: 2rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
}
@media (min-width: 900px) {
    .bph-footer__creds { grid-template-columns: repeat(4, auto); justify-content: space-between; }
}
.bph-footer__cred {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-family: var(--font-display);
    font-size: var(--fs-xxs);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.3;
}
.bph-footer__cred i {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1px solid rgba(153, 129, 69, .55);
    color: var(--secondary-light);
    font-size: .95rem;
}

.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; }

/* Phones and tablets. The contact bar wraps onto three lines, and the
   social icons were left stranded at the start of the last one. The legal
   links break onto their own line at the rule rather than wherever the
   text runs out, which used to start that line with a stray "|". Small
   footer, breadcrumb and "see more" links are padded up to a 24px touch
   target without changing how they read; the ones a thumb actually aims
   for (footer columns, contact bar, social icons) get closer to 40px.
   Label-sized type steps up from 11.7px to 12.5px, the smallest that
   stays legible on a phone. */
@media (max-width: 767px) {
    :root { --fs-xxs: .78rem; }
    .bph-footer__bar-inner { justify-content: center; }
    .bph-footer__bar-links a { padding-block: .55rem; }
    .bph-footer__links li { margin-bottom: 0; }
    .bph-footer__link { padding-block: .5rem; }
    .bph-footer__social { gap: .6rem; }
    .bph-footer__social a { width: 40px; height: 40px; font-size: .95rem; }
    .bph-footer__legal .sep--break { display: block; height: 0; overflow: hidden; visibility: hidden; }
    .bph-footer__legal a { display: inline-block; padding-block: .45rem; }
}
@media (max-width: 1023px) {
    .bph-crumbs a { display: inline-block; padding-block: .35rem; }
    .bph-cta-link { min-height: 24px; }
}

/* --------------------------------------------------------------------------
   25. Floating contact
   -------------------------------------------------------------------------- */
/* There used to be a sticky Get Started / Call bar along the bottom of the
   screen below 900px. It was removed on 2026-10-22 at the client's request;
   the WhatsApp button now sits in the corner at every width. */
.bph-float { position: fixed; left: 1rem; bottom: 1.25rem; z-index: 85; display: grid; gap: .5rem; }

/* Tawk.to's automatic greeting ("Hi! How can we help?") opens in a 360 x 252
   frame above the chat bubble. The frame is mostly transparent but still
   takes every click, and it sat over the "Send Enquiry" buttons, so the
   forms could not be sent (found on the live site, 26 October 2026). The
   bubble, its unread badge and the chat window itself are untouched. */
#message-preview { display: none !important; }
/* 60px, the size of the Tawk.to chat bubble opposite, so the two corner
   buttons read as a pair. Tawk is positioned to match in parts.mjs. */
.bph-float a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-pill);
    color: #fff;
    font-size: 1.65rem;
    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 > * { 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); }

/* --------------------------------------------------------------------------
   29. Authors — the directory (/authors/) and each author profile
   -------------------------------------------------------------------------- */
/* Everything here is built from existing tokens: the page hero, the cream
   band, card borders and radii, the Oswald eyebrow and the Playfair accent.
   Portraits are cropped to 4:5 at source, so the frames below never have to
   guess at a face. Book covers are never cropped: they sit in the showcase
   frame at their own proportions. */

/* Monogram — stands in where no photograph was supplied. */
.bph-monogram {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 5;
    background: var(--primary);
    container-type: inline-size;
}
.bph-monogram::before {
    content: "";
    position: absolute;
    inset: 7%;
    border: 1px solid rgba(208, 179, 120, .45);
    border-radius: var(--radius-sm);
}
.bph-monogram span {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(2.5rem, 24cqi, 7rem);
    letter-spacing: .02em;
    color: var(--secondary-light);
}

/* Directory hero: counts under the lead, a portrait mosaic beside it. */
.bph-authorstats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem clamp(1.5rem, 1rem + 2vw, 3rem);
    margin: 2rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.bph-authorstats div { display: flex; flex-direction: column-reverse; margin: 0; }
.bph-authorstats dt {
    font-family: var(--font-display);
    font-size: var(--fs-xxs);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}
.bph-authorstats dd {
    margin: 0 0 .3rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
    line-height: 1;
    color: var(--primary);
}

.bph-authorsmosaic {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .5rem;
}
.bph-authorsmosaic img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-xs);
}
@media (min-width: 1024px) {
    .bph-authorsmosaic {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .9rem;
        max-width: 540px;
        margin-left: auto;
        padding-bottom: 2rem;
    }
    .bph-authorsmosaic img { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
    /* The middle column steps down, echoing the homepage cover collage. */
    .bph-authorsmosaic img:nth-child(3n + 2) { transform: translateY(2rem); }
}

/* Directory: heading and search share a bar, count underneath. */
.bph-authorsbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
}
.bph-authorsbar .bph-head { margin-bottom: 0; }
.bph-authorsbar .bph-search { flex: 1 1 320px; max-width: 420px; }
.bph-authorsbar__count { text-align: left; margin: 1.25rem 0 1.5rem; }

/* Directory grid. Flex rather than grid so a partial last row centres
   (eighteen authors over four columns leaves two), and so a search that
   narrows the list does not leave a ragged hole on one side. */
.bph-authors { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }
.bph-authors > * { width: 100%; }
@media (min-width: 560px) { .bph-authors > * { width: calc(50% - .625rem); } }
@media (min-width: 900px) { .bph-authors > * { width: calc(33.333% - .834rem); } }
@media (min-width: 1200px) { .bph-authors > * { width: calc(25% - .9375rem); } }

.bph-authorcard { margin: 0; }
.bph-authorcard.is-hidden { display: none; }
.bph-authorcard__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--border-cream);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    color: var(--text);
    transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.bph-authorcard__link:hover {
    color: var(--text);
    border-color: var(--secondary);
    box-shadow: var(--shadow);
    transform: translateY(-4px);
}
.bph-authorcard__media { position: relative; }
.bph-authorcard__photo { overflow: hidden; background: var(--surface-soft); }
.bph-authorcard__photo img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform .5s var(--ease);
}
.bph-authorcard__link:hover .bph-authorcard__photo img { transform: scale(1.035); }
/* The author's book, overlapping the foot of the portrait. */
.bph-authorcard__book {
    position: absolute;
    right: 1rem;
    bottom: -1.4rem;
    width: 23%;
    height: auto;
    border-radius: 3px;
    box-shadow: 0 10px 22px rgba(1, 36, 66, .3);
    transition: transform .3s var(--ease);
}
.bph-authorcard__link:hover .bph-authorcard__book { transform: translateY(-4px) rotate(-2deg); }
.bph-authorcard__body { flex: 1; padding: 1.1rem 1.25rem 0; }
.bph-authorcard__body .bph-book__genre { padding-right: 26%; }
.bph-authorcard__body :is(h2, h3) { font-size: var(--fs-h4); margin: .35rem 0 .3rem; }
.bph-authorcard__title { font-size: var(--fs-sm); color: var(--primary); margin: 0 0 .65rem; line-height: 1.45; }
.bph-authorcard__title cite,
.bph-authorhero__of cite {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 600;
    color: var(--secondary);
}
.bph-authorcard__excerpt {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}
.bph-authorcard__foot { padding: 1rem 1.25rem 1.3rem; }
.bph-authorcard__link:hover .bph-cta-link i { transform: translateX(4px); }
/* On a phone, eighteen full-width portraits made the directory twelve
   thousand pixels long. The card turns into a row: a framed 4:5 thumbnail
   beside the name, so the list scans like an index. */
@media (max-width: 559px) {
    .bph-authorcard__link {
        display: grid;
        /* 112px left the name and excerpt a 119px column on a 320px phone. */
        grid-template-columns: clamp(84px, 27vw, 112px) minmax(0, 1fr);
        grid-template-rows: 1fr auto;
        column-gap: 1rem;
        padding: .85rem;
    }
    .bph-authorcard__media { grid-row: 1 / span 2; align-self: start; }
    .bph-authorcard__photo { border-radius: var(--radius-sm); }
    .bph-authorcard__book { right: -.4rem; bottom: -.6rem; width: 40%; border-radius: 2px; }
    .bph-authorcard__body { padding: 0; }
    .bph-authorcard__body .bph-book__genre { padding-right: 0; }
    .bph-authorcard__body :is(h2, h3) { font-size: 1.15rem; margin-top: .15rem; }
    .bph-authorcard__title { font-size: var(--fs-xs); margin-bottom: .4rem; }
    .bph-authorcard__excerpt { font-size: var(--fs-xs); -webkit-line-clamp: 3; line-clamp: 3; }
    .bph-authorcard__foot { padding: .6rem 0 0; }
    .bph-authorcard__foot .bph-cta-link { font-size: var(--fs-xxs); }
}

/* Profile hero: portrait with an offset gold frame, name beside it. */
.bph-authorhero .bph-crumbs { margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }
.bph-authorhero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 3vw, 4.5rem);
    align-items: center;
}
.bph-authorhero__portrait { position: relative; width: 100%; max-width: 230px; margin-bottom: 1.25rem; }
.bph-authorhero__portrait::before {
    content: "";
    position: absolute;
    inset: 1.1rem -1.1rem -1.1rem 1.1rem;
    border: 2px solid var(--secondary-brand);
    border-radius: var(--radius-lg);
}
.bph-authorhero__portrait > img,
.bph-authorhero__portrait > .bph-monogram {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.bph-authorhero h1 {
    font-size: clamp(2.6rem, 1.4rem + 4.2vw, 4.75rem);
    line-height: 1.02;
    margin-bottom: 0;
    text-wrap: balance;
}
.bph-authorhero h1::after {
    content: "";
    display: block;
    width: 68px;
    height: 4px;
    border-radius: 2px;
    background: var(--secondary);
    margin: 1.1rem 0 1.25rem;
}
.bph-authorhero__of { font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); line-height: 1.45; color: var(--primary); margin-bottom: 1rem; }
.bph-authorhero__tags { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.bph-authorhero__tags li {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-xxs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: var(--secondary-tint);
    color: var(--secondary-deep);
    border-radius: var(--radius-pill);
    padding: .3rem .8rem;
}
/* Covers in the hero, one per title, for authors with more than one. */
.bph-authorhero__shelf { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem; padding: 0; margin: 1.5rem 0 0; }
.bph-authorhero__shelf li { margin: 0; }
.bph-authorhero__shelf a {
    display: flex;
    align-items: center;
    gap: .8rem;
    max-width: 320px;
    padding: .5rem 1rem .5rem .5rem;
    border: 1px solid var(--border-cream);
    border-radius: var(--radius);
    background: var(--surface-soft);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.25;
    color: var(--primary);
    transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.bph-authorhero__shelf a:hover { background: #fff; border-color: var(--secondary); color: var(--secondary); }
.bph-authorhero__shelf img { width: 42px; height: auto; flex: none; border-radius: 3px; box-shadow: var(--shadow-xs); }
@media (min-width: 900px) {
    .bph-authorhero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .bph-authorhero__portrait { max-width: 440px; margin-bottom: 0; }
    .bph-authorhero__portrait::before { inset: 1.5rem -1.5rem -1.5rem 1.5rem; }
}

/* Biography: heading column beside a measured reading column, set off
   from the hero by a hairline rather than a change of ground. */
.bph-authorbio { padding-top: 0; }
.bph-authorbio__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem clamp(2rem, 1rem + 4vw, 5rem);
    border-top: 1px solid var(--border);
    padding-top: var(--section-y);
}
.bph-authorbio__head { margin-bottom: 1rem; }
.bph-authorbio__body {
    max-width: 68ch;
    font-size: clamp(1.02rem, .98rem + .25vw, 1.12rem);
    line-height: 1.8;
    color: var(--muted);
}
.bph-authorbio__body p { margin-bottom: 1.15em; }
.bph-authorbio__body > p:first-child { font-size: 1.1em; line-height: 1.7; color: var(--primary); }
.bph-authorbio__body h3 { font-size: var(--fs-h4); margin: 2rem 0 .55rem; }
@media (min-width: 1024px) {
    .bph-authorbio__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
    .bph-authorbio__head { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; }
}

.bph-pullquote {
    margin: 1.75rem 0;
    padding: .2rem 0 .2rem 1.5rem;
    border-left: 3px solid var(--secondary-brand);
}
.bph-pullquote p {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
    line-height: 1.45;
    color: var(--primary);
    margin: 0;
}

/* Books: cover in the showcase frame, title and full description beside it. */
.bph-seriesnote {
    max-width: 920px;
    background: #fff;
    border: 1px solid var(--border-cream);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
    margin-bottom: clamp(1rem, .5rem + 1vw, 1.5rem);
}
.bph-seriesnote h3 { font-size: var(--fs-h3); }
.bph-seriesnote p { color: var(--muted); line-height: 1.75; }

.bph-bookentry {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
    padding-block: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.bph-bookentry + .bph-bookentry { border-top: 1px solid var(--border-cream); }
.bph-bookentry__cover.bph-media--showcase { padding: clamp(1.5rem, 1rem + 2.5vw, 3.25rem); }
.bph-bookentry__cover.bph-media--showcase img { max-height: 440px; }

/* 3D book mockup built from the flat cover: the cover is the front board,
   ::before is the page block on the fore-edge, ::after the back board that
   also casts the shadow. Turned so the pages face the reader; it squares up
   a little on hover. --book-t is the book's thickness. */
.bph-book3d {
    --book-t: clamp(30px, 22px + 1.6vw, 46px);
    display: inline-block;
    max-width: 100%;
    perspective: 1600px;
    padding-right: calc(var(--book-t) * .6);
}
.bph-book3d__book {
    position: relative;
    display: block;
    transform-style: preserve-3d;
    transform: rotateY(-30deg) rotateX(2deg);
    transition: transform .6s var(--ease);
}
.bph-book3d:hover .bph-book3d__book { transform: rotateY(-12deg) rotateX(1deg); }
.bph-book3d__book img {
    position: relative;
    display: block;
    border-radius: 2px 4px 4px 2px !important;
    box-shadow: none !important;
    transform: translateZ(calc(var(--book-t) / 2));
}
.bph-book3d__book::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    right: calc(var(--book-t) / -2 + 4px);
    width: calc(var(--book-t) - 4px);
    background:
        linear-gradient(90deg, rgba(1, 36, 66, .18), transparent 18%, transparent 82%, rgba(1, 36, 66, .22)),
        repeating-linear-gradient(90deg, #fffdf7 0 2px, #ede7d8 2px 3px);
    transform: rotateY(90deg);
}
.bph-book3d__book::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 2px 4px 4px 2px;
    background: var(--primary);
    transform: translateZ(calc(var(--book-t) / -2));
    box-shadow: -18px 22px 44px rgba(1, 36, 66, .34), -4px 6px 12px rgba(1, 36, 66, .2);
}
/* Hinge crease and a soft sheen on the front board. */
.bph-book3d__hinge {
    position: absolute;
    inset: 0;
    border-radius: 2px 4px 4px 2px;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .3) 0, rgba(255, 255, 255, .22) 1.4%, rgba(0, 0, 0, .14) 2.8%, transparent 6%),
        linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .14) 55%, transparent 70%);
    transform: translateZ(calc(var(--book-t) / 2 + .5px));
}
.bph-bookentry__body h3 {
    font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.6rem);
    line-height: 1.08;
    margin: .3rem 0 .4rem;
    text-wrap: balance;
}
.bph-bookentry__subtitle {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem);
    line-height: 1.4;
    color: var(--secondary);
    margin-bottom: .6rem;
}
.bph-bookentry__by {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}
/* Publication date, ISBNs, ASIN and series under each book: the facts its
   schema record states, so they have to be readable on the page. */
.bph-bookentry__facts {
    list-style: none;
    margin: .85rem 0 0;
    padding: .7rem 0 0;
    border-top: 1px solid var(--border-cream);
    display: grid;
    gap: .2rem;
    font-size: var(--fs-sm);
    color: var(--muted);
}
.bph-bookentry__facts li:first-child { color: var(--primary); font-weight: 600; }
.bph-bookentry__facts span { color: var(--primary); font-weight: 500; }
/* The author's own website, set as a highlighted panel under "Author of …"
   so it reads as the next step, not as fine print. */
.bph-authorhero__site {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    max-width: 100%;
    margin: 0 0 1.1rem;
    padding: .7rem 1rem .7rem .8rem;
    background: var(--secondary-tint);
    border: 1px solid var(--border-cream);
    border-left: 4px solid var(--secondary);
    border-radius: var(--radius-sm);
    color: var(--primary);
    text-decoration: none;
    transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.bph-authorhero__site:hover { background: var(--surface-alt); border-color: var(--secondary); transform: translateY(-1px); }
.bph-authorhero__site-icon {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: var(--secondary);
    color: #fff;
    font-size: 1rem;
}
.bph-authorhero__site-text { display: grid; gap: .1rem; min-width: 0; }
.bph-authorhero__site-label {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--secondary);
}
.bph-authorhero__site-url { font-weight: 600; overflow-wrap: anywhere; }
.bph-authorhero__site-go { flex: none; color: var(--secondary); transition: transform .2s var(--ease); }
.bph-authorhero__site:hover .bph-authorhero__site-go { transform: translateX(3px); }
.bph-bookentry__desc {
    max-width: 66ch;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-cream);
    color: var(--muted);
    line-height: 1.8;
}
.bph-bookentry__desc p { margin-bottom: 1.05em; }
.bph-bookentry__desc p:last-child { margin-bottom: 0; }
.bph-bookentry__hook {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
    line-height: 1.45;
    color: var(--primary);
}
/* Verse-like blurbs keep their line breaks. */
.bph-stanza { color: var(--primary); }
@media (min-width: 900px) {
    .bph-bookentry { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 3vw, 4.5rem); }
    .bph-bookentry--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .bph-bookentry--flip .bph-bookentry__cover { order: 2; }
    /* Long descriptions scroll past a cover that stays in view. */
    .bph-bookentry__cover { position: sticky; top: calc(var(--header-h) + 1.5rem); }
    .bph-bookentry__cover.bph-media--showcase img { max-height: 540px; }
    .bph-bookentry--short { align-items: center; }
}

/* --------------------------------------------------------------------------
   30. Get Started page
   -------------------------------------------------------------------------- */
/* The copy runs well past the form, so both columns align to the top. */
.bph-start__grid { align-items: start; }
.bph-start__copy .bph-prose h2 { font-size: var(--fs-h3); margin-top: 1.75rem; }
.bph-start__copy .bph-ticks { margin-bottom: 1.25rem; }
/* The H1 is set as two lines and sized from its column's width, so the first
   line ("Start Your Self-Publishing", 10.7em of Oswald) always fits whole. */
.bph-start__copy { container-type: inline-size; }
.bph-start__title { font-size: min(var(--fs-h1), 9cqi); }
.bph-start__title > span { display: block; }

/* A compact form, so the whole card fits beside the copy on a laptop screen. */
.bph-start__panel { padding: 1.25rem 1.5rem; }
.bph-start__panel .bph-h5 { margin-bottom: .75rem; }
.bph-start__panel .bph-field { margin-bottom: .65rem; }
.bph-start__panel .bph-field label { margin-bottom: .25rem; }
.bph-start__panel .bph-field input,
.bph-start__panel .bph-field select { padding-block: .55rem; }
.bph-start__panel .bph-field input[type="file"] { padding-block: .4rem; }
.bph-start__panel textarea { min-height: 72px; }
.bph-start__panel .bph-form__fine { margin: .15rem 0 .65rem; }
.bph-start__panel .bph-btn { padding-block: .8rem; }
.bph-start__panel .bph-form__note { margin-top: .5rem; }
/* The form stays in view while the copy scrolls past, as on the reference.
   It sits just under the header once that has shrunk on scroll (79px), and
   on a screen too short for the whole card it scrolls inside itself, so the
   submit button is always reachable. */
@media (min-width: 1024px) {
    .bph-start__panel .bph-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bph-start__panel {
        position: sticky;
        top: calc(80px + .75rem);
        max-height: calc(100vh - 80px - 1.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}
/* Booking calendar, shown under the band's copy once site.booking is set. */
.bph-start__calendar {
    margin-top: clamp(1.25rem, .9rem + 1.4vw, 2.25rem);
    background: #fff;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.bph-start__calendar iframe { display: block; width: 100%; height: 720px; border: 0; }
.bph-start__tiles { max-width: 1040px; margin-inline: auto; }
@media (min-width: 768px) { .bph-start__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   31. Pricing page
   -------------------------------------------------------------------------- */
/* The two cost explainers are copy only. As zig-zag rows with no picture they
   left half the container empty, so they share one panel instead: side by
   side from 900px with a rule between them, stacked below that. */
.bph-explain {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 4px 0 var(--secondary-brand), var(--shadow-sm);
}
.bph-explain__item { padding: clamp(1.5rem, 1rem + 2.2vw, 3rem); }
.bph-explain__item + .bph-explain__item { border-top: 1px solid var(--border); }
.bph-explain__num {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(2.2rem, 1.8rem + 1.4vw, 3rem);
    line-height: 1;
    color: var(--secondary);
    margin-bottom: .9rem;
}
.bph-explain__item h2 { font-size: var(--fs-h3); margin-bottom: .75rem; }
.bph-explain__item h2::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: var(--secondary);
    margin-top: .7rem;
}
.bph-explain__item p { color: var(--muted); line-height: 1.75; margin: 0; }
@media (min-width: 900px) {
    .bph-explain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bph-explain__item + .bph-explain__item { border-top: 0; border-left: 1px solid var(--border); }
}

/* --------------------------------------------------------------------------
   About Us — "Staying Ahead of Vanity Publishing" callout. A navy band with
   a gold-edged glass card so the stance reads as its own statement rather
   than a fourth paragraph of the origin story.
   -------------------------------------------------------------------------- */
.bph-vanity {
    overflow: hidden;
    background:
        radial-gradient(ellipse 60% 80% at 85% 0%, rgba(208, 179, 120, .16), transparent 60%),
        radial-gradient(ellipse 50% 70% at 0% 100%, rgba(29, 74, 116, .9), transparent 70%),
        var(--primary);
}
.bph-vanity::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 22px);
    pointer-events: none;
}
.bph-vanity__card {
    position: relative;
    display: grid;
    gap: clamp(1.25rem, 1rem + 1.2vw, 2.25rem);
    align-items: start;
    padding: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
    border: 1px solid rgba(208, 179, 120, .35);
    border-left: 5px solid var(--secondary-light);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.bph-vanity__icon {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    font-size: 1.9rem;
    color: var(--primary);
    background: linear-gradient(145deg, #e3cd9b, var(--secondary-light) 45%, var(--secondary-brand));
    box-shadow: 0 0 0 8px rgba(208, 179, 120, .14), 0 10px 26px rgba(0, 0, 0, .3);
}
.bph-vanity__body h2 { margin: 0 0 .9rem; }
.bph-vanity__body h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin-top: .8rem;
    border-radius: 2px;
    background: var(--secondary-light);
}
.bph-vanity__body p {
    margin: 0;
    font-size: clamp(1.02rem, .98rem + .25vw, 1.15rem);
    line-height: 1.8;
    color: rgba(255, 255, 255, .88);
}
@media (min-width: 768px) {
    .bph-vanity__card { grid-template-columns: auto 1fr; }
}

/* ---------------------------------------------------------- cookie consent
   Printed only when an analytics id is set (site.analytics). Sits above the
   floating WhatsApp and chat buttons but below the open mobile menu (130). */
.bph-consent {
    position: fixed;
    z-index: 120;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-width: 36rem;
    margin-inline: auto;
    padding: 1.1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
}
.bph-consent[hidden] { display: none; }
.bph-consent p { font-size: var(--fs-sm); color: var(--text); margin: 0 0 .9rem; }
.bph-consent p a { color: var(--secondary); text-decoration: underline; }
.bph-consent__actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
.bph-footer__cookies {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: rgba(255, 255, 255, .82);
    cursor: pointer;
}
.bph-footer__cookies:hover { text-decoration: underline; }