/* Public website styles (PublicLayout.razor) - built to the CRLM president's Homepage Technical
   Specification (Sept 2026). Everything below is scoped under .pub so none of it leaks into the
   staff app, which keeps using Bootstrap + app.css as before. Fonts are self-hosted (no Google
   Fonts request - faster, and no visitor data sent to a third party). */

/* @font-face rules for Poppins/Inter live in App.razor, not here: there each font URL goes through
   Assets[...] so it is fingerprinted and cached for a year (a url() in this file can't be), and the
   same URLs can be preloaded (SeoHead.razor). */

.pub {
    /* Spec section 1 brand colours */
    --pub-navy: #073E83;
    --pub-pink: #D96591;
    /* Deeper pink for anything that carries words: pink text, pink button fills and outlines.
       #D96591 is only ~3.3:1 on the page backgrounds; this passes WCAG AA 4.5:1 on white, warm
       white, blush and pale blue. Approved by the CRLM President (Oct 2026). Icons, paws, wave,
       underlines and the large hero highlight keep --pub-pink (decorative, or large text at 3:1). */
    --pub-pink-strong: #B83F70;
    /* Edges of form boxes/tick-boxes: 3.4:1 on the page (WCAG 1.4.11 asks 3:1; Bootstrap's grey is 1.3:1). */
    --pub-field-border: #7D8AA0;
    --pub-blush: #FAEDF2;
    --pub-pale-blue: #C8E0F5;
    --pub-warm-white: #FCFBF9;
    --pub-text: #173B68;
    --pub-footer-bg: #F5F4F2;
    --pub-max: 1240px;
    --pub-gutter: clamp(16px, 4vw, 48px);
    /* Soft feathered photo edges: a blurred rounded rectangle used as a mask (the photo itself
       fades out - nothing is laid over it). Defined once here; used with mask-size 100% 100%.
       Light = large solid centre, short feather (most of the photo shows); strong = wider feather. */
    --pub-feather: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='3.2'/%3E%3C/filter%3E%3Crect x='6' y='7' width='88' height='86' rx='13' fill='white' filter='url(%23b)'/%3E%3C/svg%3E");
    --pub-feather-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Crect x='11' y='13' width='78' height='74' rx='16' fill='white' filter='url(%23b)'/%3E%3C/svg%3E");

    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--pub-warm-white);
    color: var(--pub-text);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 18px;
    line-height: 1.6;
    overflow-x: clip;
}

/* "Skip to main content" (PublicLayout): off-screen until a keyboard user tabs to it. */
.pub-skip {
    position: absolute; left: 12px; top: -100px; z-index: 1000;
    background: var(--pub-navy); color: #fff !important; font-weight: 600; text-decoration: none;
    padding: 12px 20px; border-radius: 999px;
}
.pub-skip:focus { top: 12px; }
/* The skip link moves focus to <main> (tabindex="-1"); it isn't a control, so no focus ring round the page. */
.pub main:focus { outline: none; }

.pub h1, .pub h2, .pub h3 {
    font-family: "Poppins", "Inter", system-ui, sans-serif;
    color: var(--pub-navy);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Safety net for very large text on narrow screens: break a word that genuinely can't fit rather
   than letting it run into neighbouring content. */
/* Only splits a word that genuinely can't fit on a line of its own - no automatic hyphenation,
   which was breaking words like "rehabilitate" that could simply wrap whole. */
.pub h1, .pub h2, .pub h3 { overflow-wrap: break-word; }

.pub h2 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.12; margin-bottom: 0.6em; }
/* :where() keeps this at element-level specificity, so Bootstrap .btn link colours still win. */
:where(.pub) a { color: var(--pub-navy); }
.pub main { flex: 1 0 auto; }

.pub-container {
    max-width: var(--pub-max);
    margin: 0 auto;
    padding: 0 var(--pub-gutter);
}

.pub-label {
    display: block;
    color: var(--pub-pink-strong);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* ---- Buttons (spec: 52-58px high, pill, 16-18px) ---- */
.pub-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 54px;
    padding: 0 2rem;
    border-radius: 999px;
    border: 2px solid transparent;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: filter 0.15s, background-color 0.15s;
}
.pub-btn:hover { filter: brightness(1.08); }
.pub-btn:focus-visible { outline: 3px solid var(--pub-navy); outline-offset: 2px; }
.pub .pub-btn-navy { background: var(--pub-navy); color: #fff; }
.pub .pub-btn-pink { background: var(--pub-pink-strong); color: #fff; }
.pub .pub-btn-outline { background: var(--pub-warm-white); color: var(--pub-pink-strong); border-color: var(--pub-pink-strong); }
.pub .pub-btn-soft { background: var(--pub-blush); color: var(--pub-pink-strong); }
.pub .pub-btn-soft:hover { filter: brightness(0.97); }

/* ---- Header (spec section 2) ---- */
.pub-header { background: var(--pub-warm-white); position: relative; z-index: 5; }
.pub-header-inner {
    display: flex;
    align-items: center;
    gap: 2rem;
    min-height: 104px;
    max-width: var(--pub-max);
    margin: 0 auto;
    padding: 8px var(--pub-gutter);
}
.pub-logo { display: block; flex-shrink: 0; }
/* multiply knocks out the white background of the current JPEG logo against the warm-white
   header, so it never sits inside a visible white rectangle (spec section 2). Harmless once a
   transparent PNG/SVG master replaces it. */
.pub-logo img { width: 130px; height: auto; display: block; mix-blend-mode: multiply; }
.pub-logo-text { font-family: "Poppins", sans-serif; font-weight: 700; color: var(--pub-navy); font-size: 20px; text-decoration: none; }

.pub-nav { display: flex; align-items: center; gap: 1.75rem; margin-left: auto; }
.pub-nav a {
    color: var(--pub-navy);
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}
.pub-nav a:hover { border-bottom-color: var(--pub-blush); }
.pub-nav a.active { border-bottom-color: var(--pub-pink); }
.pub-header .pub-donate { min-height: 48px; padding: 0 1.6rem; margin-left: 1rem; }

/* Mobile menu: <details>, so it works with JavaScript off or before anything loads */
.pub-menu { display: none; margin-left: auto; }
.pub-menu > summary {
    list-style: none;
    cursor: pointer;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--pub-navy);
}
.pub-menu > summary::-webkit-details-marker { display: none; }
.pub-menu > summary:focus-visible { outline: 3px solid var(--pub-navy); }
.pub-menu-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--pub-warm-white);
    border-top: 1px solid var(--pub-blush);
    box-shadow: 0 12px 24px rgba(7, 62, 131, 0.12);
    padding: 8px var(--pub-gutter) 20px;
    display: flex;
    flex-direction: column;
}
.pub-menu-panel a:not(.pub-btn) {
    padding: 14px 0;
    border-bottom: 1px solid var(--pub-blush);
    color: var(--pub-navy);
    font-weight: 500;
    text-decoration: none;
}
.pub-menu-panel a.active { color: var(--pub-pink-strong); }
.pub-menu-panel .pub-btn { margin-top: 16px; }

@media (max-width: 1023.98px) {
    .pub-nav, .pub-header .pub-donate { display: none; }
    .pub-menu { display: block; }
    .pub-header-inner { min-height: 80px; }
    .pub-logo img { width: 96px; }
}

/* ---- Hero (spec section 3) ---- */
.pub-hero {
    position: relative;
    display: grid;
    /* Text column = the page's left content edge + room for the headline, so it never gets
       squeezed on very wide screens (a plain 38% was mostly eaten by the margin at 1920px). The
       photo is absolutely positioned on the right, so it doesn't depend on this. */
    grid-template-columns: minmax(0, calc(max(var(--pub-gutter), (100vw - var(--pub-max)) / 2 + var(--pub-gutter)) + 580px)) minmax(0, 1fr);
    min-height: 680px;
    /* the wave overlaps the bottom of the photo; this reserves room for it under the text */
    padding-bottom: 150px;
}
.pub-hero-text {
    align-self: center;
    padding-left: max(var(--pub-gutter), calc((100vw - var(--pub-max)) / 2 + var(--pub-gutter)));
    padding-right: 1rem;
    position: relative;
    z-index: 2;
}
.pub-hero h1 {
    font-size: clamp(44px, 4.4vw, 68px);
    line-height: 1;
    margin-bottom: 0.4em;
}
.pub-hero h1 em { font-style: normal; color: var(--pub-pink); }
.pub-hero-sub { font-size: clamp(21px, 2vw, 27px); line-height: 1.35; font-weight: 500; margin-bottom: 2rem; }
.pub-hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.pub-hero-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    /* 62% per spec, bleeding to the right edge. */
    width: 62%;
}
.pub-hero-photo .pub-photo { height: 100%; }
/* multiply turns the photo's pure-white studio background into the page's warm white, so there's
   no visible seam where the photo meets the header/page - the kittens themselves are unaffected. */
.pub-hero-photo img { mix-blend-mode: multiply; }
/* Soft fade on the photo's left edge so it "bleeds" into the page rather than sitting in a box */
.pub-hero-photo::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 18%;
    background: linear-gradient(to right, var(--pub-warm-white), transparent);
    z-index: 1;
    pointer-events: none;
}

/* Small laptops/tablets: the photo's slot is nearly square there, which crops the landscape
   kittens photo hard - widen it and narrow the fade so all four kittens stay clear. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .pub-hero-photo { width: 70%; }
    .pub-hero-photo::before { width: 8%; }
}

/* ---- Signature wave (spec section 4, LOCKED) ---- */
.pub-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 170px;
    z-index: 3;
    pointer-events: none;
}
.pub-wave > svg:first-child { display: block; width: 100%; height: 100%; }
/* The homepage's closing wave: its own block between Donate and the footer (not overlapping any
   content), on the Donate section's white so the photo's bottom fade flows straight into it. */
.pub-wave .pub-wave-paw {
    position: absolute;
    right: max(var(--pub-gutter), 5%);
    bottom: 26px;
    width: 50px;
    height: 50px;
    color: var(--pub-pink);
}

/* ---- Photos (placeholder until CRLM's real photograph is dropped in) ---- */
.pub-photo { position: relative; width: 100%; height: 100%; overflow: hidden; }
.pub-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-photo-placeholder {
    width: 100%;
    height: 100%;
    min-height: 280px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 2rem;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.7), transparent 60%),
        linear-gradient(135deg, var(--pub-blush), var(--pub-pale-blue));
    color: var(--pub-navy);
    font-size: 15px;
}
.pub-photo-placeholder svg { width: 56px; height: 56px; color: var(--pub-pink); margin: 0 auto 0.75rem; display: block; }

/* ---- Who We Are (spec section 5) ---- */
.pub-who { background: #fff; padding: 76px 0; }
.pub-who-grid { display: grid; grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); gap: 3rem; align-items: center; }
.pub-who-grid p { max-width: 36em; }
.pub-pillars {
    display: grid;
    /* Columns sized in em, not a fixed 3-up: as text grows (browser/phone font-size settings),
       fewer columns fit and they wrap, instead of long words like "Rehabilitate" overflowing
       into the next column. 15px base so three still fit at default size. */
    font-size: 15px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8em), 1fr));
    gap: 1.25rem;
    border-left: 2px solid var(--pub-pale-blue);
    padding-left: 2rem;
    text-align: center;
}
.pub-pillars svg, .pub-pillars .pub-pillar-icon { width: 48px; height: 48px; margin-bottom: 0.6rem; }
.pub-pillars h3 { font-size: 18px; margin-bottom: 0.3rem; }
.pub-pillars p { font-size: 15px; line-height: 1.45; margin: 0; }

/* ---- Section dividers (spec section 6) ---- */

/* ---- Foster / Donate feature rows (spec sections 7-8) ---- */
.pub-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 400px; }
.pub-feature-copy { align-self: center; padding: 56px var(--pub-gutter); }
/* Line the copy up with the page's content edge (same as .pub-container) on whichever side of
   the screen it sits, while the photo still runs to the screen edge on the other side. */
.pub-donate-section .pub-feature-copy { padding-left: max(var(--pub-gutter), calc((100vw - var(--pub-max)) / 2 + var(--pub-gutter))); padding-bottom: 206px; }
/* Donate hosts the closing navy wave at its bottom (see PublicHome.razor); the copy's extra bottom
   padding keeps the text and button clear of it, while the photo runs down underneath it. */
.pub-donate-section { position: relative; }
.pub-foster .pub-feature-copy { padding-right: max(var(--pub-gutter), calc((100vw - var(--pub-max)) / 2 + var(--pub-gutter))); }
.pub-feature-copy > * { max-width: 34rem; }
.pub-feature-copy p { margin-bottom: 1.75rem; }
.pub-feature-photo { min-height: 320px; }
.pub-foster { background: var(--pub-blush); grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
.pub-donate-section { background: #fff; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); }

/* Per CRLM's Foster/Donate design mock: each photo melts into its section on the edge that faces
   the copy (no hard box edge) - Foster fades right into the blush, Donate fades left into white.
   An overlay rather than a mask so it degrades to a plain photo, never to a missing one. */
.pub-feature-photo { position: relative; }
/* The photo fills whatever height the copy needs (plus the min-height), rather than its own
   proportions setting the section's height - a real photo's natural height made Foster ~630px. */
.pub-feature-photo > .pub-photo { position: absolute; inset: 0; }
.pub-feature-photo::before,
.pub-feature-photo::after { content: ""; position: absolute; pointer-events: none; z-index: 1; }
/* Second edge of each photo: Foster's top melts into the blush under the pink divider curve,
   Donate's bottom melts into white - no straight photo edge against either. */
.pub-foster .pub-feature-photo::before { inset: 0 0 auto 0; height: 22%; background: linear-gradient(to bottom, var(--pub-blush), transparent); }
/* Foster: the tabby's head runs right to the edge of the original photo, so any fade there crosses
   its face. The right-edge fade is wide but eased - only a light haze over most of the head, solid
   blush only at the very edge - so the transition is soft without hiding the cat. Bottom fades too. */
.pub-foster .pub-feature-photo::after { inset: 0; background: linear-gradient(to right, transparent 64%, rgba(250, 237, 242, 0.12) 78%, rgba(250, 237, 242, 0.4) 89%, rgba(250, 237, 242, 0.8) 96%, var(--pub-blush)), linear-gradient(to bottom, transparent 74%, var(--pub-blush)); }
/* Donate: top edge fades so the photo's light-grey studio backdrop doesn't meet the white page in
   a hard line; its bottom edge sits under the closing wave instead of fading. */
/* Lion King memorial image: its soft background is faintly pink-grey, not pure white, so its own
   edges fade out (mask - nothing laid over the photo) to avoid a visible rectangle on the white. Shown whole at its own shape (its lettering must never be cropped), top-aligned, with
   the section's bottom padding keeping the closing wave clear of it. */
.pub-donate-section .pub-feature-photo::before,
.pub-donate-section .pub-feature-photo::after { display: none; }
.pub-donate-section .pub-feature-photo { min-height: 0; align-self: start; aspect-ratio: 1756 / 896; margin-top: 24px; }
.pub-donate-section .pub-feature-photo .pub-photo {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 88%, transparent);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent, #000 9%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 88%, transparent);
            mask-composite: intersect;
}

/* ---- Inner pages (Adopt, Foster, About, How You Can Help, Contact) ---- */
.pub-page { padding: 48px 0 72px; }
.pub-page-intro { max-width: 46em; margin-bottom: 2.5rem; }
.pub-page-intro h1 { font-size: clamp(36px, 4vw, 52px); line-height: 1.08; margin-bottom: 0.5em; }
.pub-page-intro p { font-size: 19px; }
.pub-panel { background: #fff; border-radius: 20px; padding: 2rem; }
.pub-panel-blush { background: var(--pub-blush); }
.pub-prose { max-width: 42em; }
.pub-prose p { margin-bottom: 1.1em; }
.pub-contact-list { list-style: none; padding: 0; margin: 0; }
.pub-contact-list li { padding: 0.75rem 0; border-bottom: 1px solid var(--pub-blush); }
.pub-contact-list strong { display: block; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--pub-pink-strong); }

/* ---- Footer (spec section 9) ---- */
.pub-footer { background: var(--pub-footer-bg); padding: 40px 0 24px; font-size: 15px; flex-shrink: 0; }
.pub-footer-grid { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2rem; align-items: center; }
.pub-footer-logo img { width: 96px; height: auto; display: block; mix-blend-mode: multiply; }
.pub-footer-org strong { font-family: "Poppins", sans-serif; color: var(--pub-navy); font-size: 16px; }
.pub-footer-org p { margin: 0.25rem 0 0; line-height: 1.5; }
.pub-footer-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; justify-content: flex-end; }
.pub-footer-nav a { text-decoration: none; }
.pub-footer-nav a:hover { text-decoration: underline; }
.pub-footer .social-links { justify-content: flex-end; margin-top: 0.75rem; }
.pub-footer .social-link { color: var(--pub-navy); }
/* 26px tap/click area round each 18px icon (WCAG 2.5.8 asks for 24px) - the padding is cancelled by
   the negative margin, so the icons look and sit exactly where they did. */
.pub-footer .social-link { display: inline-flex; padding: 4px; margin: -4px; }
.pub-footer-base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #E6E3DE;
    font-size: 13px;
}
.pub-footer-base a { color: inherit; }

.pub-outage { background: #FFF4D6; color: #5C4400; text-align: center; font-size: 15px; padding: 8px 16px; }

/* ---- Mobile (spec section 11): reflow, don't just shrink ---- */
@media (max-width: 767.98px) {
    .pub { font-size: 17px; }

    .pub-hero { display: flex; flex-direction: column; min-height: 0; padding-bottom: 0; }
    .pub-hero-text { padding: 28px var(--pub-gutter) 28px; align-self: stretch; }
    .pub-hero h1 { font-size: clamp(40px, 11vw, 48px); }
    .pub-hero-actions { align-items: stretch; }
    .pub-hero-actions .pub-btn { width: 100%; }
    .pub-hero-photo { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 3; }
    /* Soft top edge into the page background above (the wave covers the bottom). Eased so the
       kittens' ears, from ~10% down, stay at full strength. */
    .pub-hero-photo .pub-photo {
        -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.6) 6%, #000 13%);
                mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.6) 6%, #000 13%);
    }
    .pub-hero-photo::before { display: none; }
    .pub-hero .pub-wave { height: 90px; margin-top: -60px; position: relative; }
    .pub-wave.pub-wave-closing { height: 90px; }
    .pub-wave .pub-wave-paw { width: 40px; height: 40px; bottom: 12px; }

    .pub-who { padding: 48px 0; }
    .pub-who-grid { grid-template-columns: 1fr; gap: 2rem; }
    .pub-pillars { border-left: 0; border-top: 2px solid var(--pub-pale-blue); padding: 1.75rem 0 0; grid-template-columns: 1fr; gap: 1.5rem; text-align: left; }
    /* Phones: one row per pillar - icon on the left, heading and text beside it. Reads well at
       any text size, where three narrow columns overflowed with enlarged phone fonts. */
    .pub-pillars > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: start; }
    .pub-pillars svg, .pub-pillars .pub-pillar-icon { grid-row: span 2; margin: 0.1rem 0 0; }
    .pub-pillars h3 { margin-bottom: 0.15rem; }

    .pub .pub-feature { grid-template-columns: 1fr; min-height: 0; }
    /* Stacked on phones, so the fade moves to the edge that meets the copy: bottom for Foster
       (photo above copy), top for Donate (photo below copy). */
    .pub .pub-foster .pub-feature-photo > .pub-photo { right: 0; }
    .pub .pub-foster .pub-feature-photo::after { inset: auto 0 0 0; width: auto; height: 28%; background: linear-gradient(to bottom, transparent, var(--pub-blush)); }
    /* Phones: one short top fade only, and the photo dropped 20px so the ginger's ear tips sit
       below it - two stacked top fades were washing the ears out. */
    /* Phones: the photo's faded bottom edge tucks just behind the top of the closing wave (the
       lettering sits mid-image, well clear), instead of leaving a white gap above it. */
    .pub .pub-donate-section .pub-feature-photo { margin: 0 0 22px; }
    .pub-feature-photo { min-height: 260px; height: 260px; }
    .pub .pub-feature-copy { padding: 36px var(--pub-gutter); }
    /* Phones: Donate photo sits below its copy and runs under the closing wave - taller to allow for it. */
    .pub .pub-donate-section .pub-feature-photo { height: auto; }
    /* Foster: photo then copy (source order). Donate: copy then photo (source order). */

    .pub-footer-grid { grid-template-columns: 1fr; text-align: left; }
    .pub-footer-nav, .pub-footer .social-links { justify-content: flex-start; }
}

/* ---- Existing Bootstrap content inside public pages (the Adopt cards, cat profile pages) ----
   Re-coloured to the brand rather than rewritten, so those pages' behaviour stays untouched. */
.pub .btn { border-radius: 999px; font-weight: 600; padding-left: 1.1rem; padding-right: 1.1rem; }
.pub .btn-primary {
    --bs-btn-bg: var(--pub-navy); --bs-btn-border-color: var(--pub-navy);
    --bs-btn-hover-bg: #0A4E9F; --bs-btn-hover-border-color: #0A4E9F;
    --bs-btn-active-bg: #052F63; --bs-btn-active-border-color: #052F63;
}
.pub .btn-outline-primary {
    --bs-btn-color: var(--pub-navy); --bs-btn-border-color: var(--pub-navy);
    --bs-btn-hover-bg: var(--pub-navy); --bs-btn-hover-border-color: var(--pub-navy);
    --bs-btn-active-bg: var(--pub-navy);
}
.pub .btn-outline-success {
    --bs-btn-color: var(--pub-pink-strong); --bs-btn-border-color: var(--pub-pink-strong);
    --bs-btn-hover-bg: var(--pub-pink-strong); --bs-btn-hover-border-color: var(--pub-pink-strong); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--pub-pink-strong);
}
.pub .card { border: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 2px 14px rgba(7, 62, 131, 0.07); }
.pub .card-title, .pub h5 { font-family: "Poppins", sans-serif; color: var(--pub-navy); }
.pub .text-muted { color: #52698A !important; }

/* Forms (the /enquire form). 16px, not the public body's 18px: keeps multi-column labels like
   "Postcode" on one line, and is the minimum that stops iOS Safari zooming in on focus. */
.pub .form-label, .pub .form-control, .pub .form-select, .pub .form-check-label { font-size: 16px; }
/* Bootstrap draws these edges from --bs-border-color; its own :focus/:checked colours still apply. */
.pub .form-control, .pub .form-select, .pub .form-check-input { --bs-border-color: var(--pub-field-border); }

/* ---- About page (CRLM About mock + palette notes, Sept 2026) ----
   Navy headings/icons, dark blue-grey body, pink label/highlights/wave, blush soft backgrounds,
   pale blue for the closing section and divider, warm white for breathing space. */
.pub-emph { font-weight: 600; color: var(--pub-navy); }

.pub-about-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, calc(max(var(--pub-gutter), (100vw - var(--pub-max)) / 2 + var(--pub-gutter)) + 660px)) minmax(0, 1fr);
    min-height: 560px;
    background: var(--pub-blush);
}
.pub-about-hero-text {
    position: relative;
    z-index: 2;
    align-self: center;
    padding: 56px 1.5rem 48px max(var(--pub-gutter), calc((100vw - var(--pub-max)) / 2 + var(--pub-gutter)));
}
.pub-about-hero h1 { font-size: clamp(34px, 3.8vw, 54px); line-height: 1.06; margin-bottom: 0.6em; }
.pub-about-hero-text p { max-width: 36em; }
.pub-about-story {
    font-size: 20px;
    line-height: 1.55;
    color: var(--pub-navy);
    border-left: 4px solid var(--pub-pink);
    padding-left: 1.1rem;
}
.pub-about-hero-photo { position: absolute; top: 0; right: 0; bottom: 0; width: min(48%, 760px); }
.pub-about-hero-photo .pub-photo {
    height: 100%;
    /* Soft bottom edge into the next section instead of a hard photo edge. */
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
            mask-image: linear-gradient(to bottom, #000 82%, transparent);
}
/* Photo melts into the blush on the side facing the text (as in the mock) - no hard box edge. */
.pub-about-hero-photo::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 32%; z-index: 1; pointer-events: none;
    background: linear-gradient(to right, var(--pub-blush), transparent);
}

.pub-chapters { background: var(--pub-warm-white); padding: 32px 0 48px; }
.pub-chapter {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 1.75rem;
    max-width: 62rem;
    padding: 32px 0;
    border-bottom: 1px solid var(--pub-blush);
}
.pub-chapter:last-child { border-bottom: 0; }
.pub-chapter .pub-pillar-icon { width: 88px; height: 88px; }
.pub-chapter h2 { font-size: clamp(30px, 3vw, 40px); margin-bottom: 0.15em; }
.pub-chapter-tag { font-size: 21px; font-weight: 500; line-height: 1.4; color: var(--pub-navy); margin-bottom: 0.9rem; }
.pub-chapter p { max-width: 44em; }

.pub-community { background: var(--pub-blush); grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
.pub-community .pub-feature-copy { padding-right: max(var(--pub-gutter), calc((100vw - var(--pub-max)) / 2 + var(--pub-gutter))); }
.pub-community .pub-feature-copy p { margin-bottom: 1rem; }
/* Straight-edged, full-width blush band (no waves either side). The photo fades out through a
   blurred rounded-rectangle mask (an inline SVG - no colour overlay): an even, feathered edge all
   round with soft corners. The current photo (CRLM, 2026-09-29) has a wide pale-pink margin around
   the hand and kitten, so it takes the stronger, softer feather without fading the subject.
   Stacked straight fades showed bands at the corners, and an oval vignette read as an obvious ellipse. */
.pub-community { padding: 24px 0; }
.pub-community .pub-feature-photo::after { display: none; }
/* Tall enough that the landscape photo is barely cropped - the kitten's ears stay clear of the top fade. */
.pub-community .pub-feature-photo { min-height: 480px; }
.pub-community .pub-feature-photo .pub-photo {
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-image: var(--pub-feather-strong);
            mask-image: var(--pub-feather-strong);
}

/* Pale blue closing (#C8E0F5 at ~40% on white). */
.pub-about-close { background: #E9F2FB; padding: 48px 0 80px; text-align: center; }
.pub-about-close-line {
    font-family: "Poppins", "Inter", sans-serif;
    font-weight: 700;
    color: var(--pub-navy);
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.2;
    max-width: 22em;
    margin: 0 auto 1.25rem;
}
.pub-about-close-bar { display: inline-block; width: 120px; height: 4px; border-radius: 2px; background: var(--pub-pink); }

@media (max-width: 767.98px) {
    .pub-about-hero { display: flex; flex-direction: column; min-height: 0; }
    .pub-about-hero-text { padding: 32px var(--pub-gutter) 28px; align-self: stretch; }
    /* Phones: the photos fade themselves out (mask) rather than having a coloured overlay laid
       on top - an overlay's edge never lines up exactly with the photo's at phone pixel ratios,
       leaving a visible hairline. A mask fades straight into whatever is behind, so no seam.
       Hero is taller than a strip and framed high so Mary's ears sit clear of the short top fade. */
    .pub-about-hero-photo { position: relative; width: 100%; height: auto; aspect-ratio: 1 / 1; }
    .pub-about-hero-photo::before { display: none; }
    .pub-about-hero-photo .pub-photo img { object-position: center top !important; }
    .pub-about-hero-photo .pub-photo {
        -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.55) 5%, #000 11%, #000 78%, transparent);
                mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.55) 5%, #000 11%, #000 78%, transparent);
    }
    .pub-chapter { grid-template-columns: 60px minmax(0, 1fr); gap: 1rem; padding: 24px 0; }
    .pub-chapter .pub-pillar-icon { width: 56px; height: 56px; }
    .pub-chapter-tag { font-size: 19px; }
    .pub .pub-community .pub-feature-photo::after { display: none; }
    .pub .pub-community .pub-feature-photo { height: 300px; min-height: 0; }
}

/* ---- Foster page (CRLM Foster mock) - hero reuses .pub-about-hero ---- */
.pub-lead { font-size: 20px; line-height: 1.5; color: var(--pub-text); }
.pub-steps-section { background: var(--pub-warm-white); padding: 56px 0 24px; }
.pub-steps-section > .pub-container > h2 { margin-bottom: 0.3em; }
.pub-steps-intro { font-size: 19px; max-width: 46em; margin-bottom: 2rem; }
.pub-steps { display: grid; gap: 0.5rem; max-width: 64rem; }
.pub-step { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1.75rem; padding: 22px 0; }
.pub-step h3 { font-size: 24px; margin-bottom: 0.4em; }
.pub-step p { max-width: 46em; }
.pub-step-icon {
    width: 88px; height: 88px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--pub-blush); color: var(--pub-pink);
}
.pub-step-icon svg { width: 48px; height: 48px; }

.pub-cta-wrap { padding-top: 16px; padding-bottom: 72px; }
.pub-cta {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    background: var(--pub-blush); border-radius: 24px; overflow: hidden; min-height: 280px;
}
.pub-cta-copy { align-self: center; padding: 40px 2.5rem; }
.pub-cta-copy h2 { margin-bottom: 0.35em; }
.pub-cta-copy p { margin-bottom: 1.5rem; max-width: 30em; }
.pub-cta-photo { position: relative; }
/* The kittens photo is already vignetted to white; on the blush panel that white would show as a
   pale blob, so the photo's own edges fade out through a blurred rounded-rectangle mask (same as
   the About community photo - no colour overlay on the cats): soft all round, including the top
   edge that showed as a hard line on phones. */
.pub-cta-photo .pub-photo {
    position: absolute; inset: 0;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-image: var(--pub-feather-strong);
            mask-image: var(--pub-feather-strong);
}
.pub-cta { min-height: 400px; }

@media (max-width: 767.98px) {
    .pub-steps-section { padding-top: 36px; }
    .pub-step { grid-template-columns: 56px minmax(0, 1fr); gap: 1rem; padding: 16px 0; }
    .pub-step-icon { width: 52px; height: 52px; }
    .pub-step-icon svg { width: 30px; height: 30px; }
    .pub-step h3 { font-size: 21px; }
    .pub-cta { grid-template-columns: 1fr; border-radius: 20px; }
    .pub-cta-copy { padding: 28px 1.25rem 8px; }
    .pub-cta { min-height: 0; }
    .pub-cta-photo { height: 320px; }
}

/* Foster hero (--wide): the ginger photo is wide (1721x914) with a white background. Shown whole
   in a slot matching its own shape - no cropping - on the warm-white page colour, so its white
   background merges straight into the page with no fade (CRLM's direction, 2026-09-28). */
.pub-about-hero--wide { background: var(--pub-warm-white); min-height: 0; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
.pub-about-hero--wide .pub-about-hero-photo { position: relative; top: auto; width: auto; align-self: center; aspect-ratio: 1721 / 914; }
.pub-about-hero--wide .pub-about-hero-photo::before { display: none; }
/* Right: no fade - the photo's own white background merges. Left, bottom and (eased) top get a gentle
   mask fade - the fur/blanket can't merge by colour, and the top edge showed as a hard line on
   phones (the photo fading out - no colour overlay on the cat). */
.pub-about-hero--wide .pub-about-hero-photo .pub-photo {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%), linear-gradient(to bottom, transparent, rgba(0,0,0,.4) 6%, rgba(0,0,0,.85) 12%, #000 18%, #000 86%, transparent);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent, #000 12%), linear-gradient(to bottom, transparent, rgba(0,0,0,.4) 6%, rgba(0,0,0,.85) 12%, #000 18%, #000 86%, transparent);
            mask-composite: intersect;
}
@media (max-width: 767.98px) {
    .pub-about-hero--wide .pub-about-hero-photo { aspect-ratio: 1721 / 914; }
    .pub-about-hero--wide .pub-about-hero-photo .pub-photo img { object-position: center !important; }
}

/* Main action card buttons: one line at the three-column desktop width too ("BECOME A FOSTER CARER"
   wrapped inside its card). Slightly tighter padding/tracking; still wraps at enlarged text. */



/* Contact page: three stacked panels (Found a cat? / adopting / contact details), readable width. */
.pub-contact-section { max-width: 46rem; margin-bottom: 1.5rem; }
.pub-contact-section h2 { font-size: clamp(24px, 2.4vw, 30px); margin-bottom: 0.6rem; }
.pub-contact-section p { margin-bottom: 0.9rem; }
.pub-contact-note { font-size: 16px; color: #52698A; margin-bottom: 0 !important; }
.pub-contact-section .pub-btn { margin-top: 0.25rem; }
.pub-contact-list li:last-child { border-bottom: 0; }

/* When a pill button's label wraps (enlarged text), keep the text centred with the arrow beside it
   rather than text hard left and the arrow pushed to the far right. */
.pub .pub-btn { text-align: center; }

/* ---- Donate page: white / pale blush, straight transitions, bank box as the main action ---- */
.pub-donate-where { background: var(--pub-blush); padding: 48px 0 40px; margin: 8px 0 48px; }
.pub-donate-where h2, .pub-donate-bank-wrap h2 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 0.7rem; }
.pub-donate-where p { max-width: 44em; }
.pub-donate-bank-wrap > p { max-width: 44em; }
.pub-bank {
    max-width: 36rem; margin: 1.5rem 0; padding: 1.5rem 1.75rem;
    background: #fff; border: 2px solid var(--pub-navy); border-radius: 20px;
    box-shadow: 0 6px 24px rgba(7, 62, 131, 0.08);
}
.pub-bank > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.5rem 1rem; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--pub-blush); }
.pub-bank > div:last-child { border-bottom: 0; }
.pub-bank dt { font-size: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--pub-pink-strong); }
.pub-bank dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; color: var(--pub-navy); font-weight: 500; }
.pub-bank-value { font-size: 20px; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
/* Copy button: the standard copy icon (two overlapping rectangles); a tick replaces it briefly
   after copying. 40px target - comfortable to tap on phones. */
.pub-copy {
    width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center;
    border: 1.5px solid var(--pub-blush); background: #fff; color: var(--pub-navy);
    border-radius: 10px; cursor: pointer; transition: background-color 0.15s, color 0.15s;
}
.pub-copy svg { width: 20px; height: 20px; }
.pub-copy .pub-copy-done { display: none; }
.pub-copy.is-copied .pub-copy-icon { display: none; }
.pub-copy.is-copied .pub-copy-done { display: block; }
.pub-copy-status { font-size: 14px; font-weight: 600; color: var(--pub-pink-strong); }
.pub-copy:hover { background: var(--pub-blush); }
.pub-copy:focus-visible { outline: 3px solid var(--pub-navy); outline-offset: 2px; }
.pub-copy.is-copied { background: var(--pub-navy); border-color: var(--pub-navy); color: #fff; }
.pub-donate-dgr { font-size: 15px; color: #52698A; }
.pub-donate-thanks { font-family: "Poppins", sans-serif; font-weight: 600; color: var(--pub-navy); font-size: 20px; margin-top: 2rem; }

@media (max-width: 767.98px) {
    .pub-bank { padding: 1rem 1.1rem; }
    .pub-bank > div { grid-template-columns: 1fr; gap: 0.2rem; }
}

.pub-contact-fb span { display: block; margin-bottom: 0.9rem; }
.pub-contact-fb .pub-btn { gap: 0.6em; }
/* Facebook logo sized in em, so it grows with the label (enlarged phone text left a fixed 18px
   icon looking tiny); flex-shrink:0 keeps it round when the label wraps. */
.pub-contact-fb .pub-btn svg { width: 1.45em; height: 1.45em; flex-shrink: 0; }
.pub .pub-contact-fb .pub-btn { padding: 0 1.25rem; }

/* ---- How You Can Help (president's tech spec + mock, 2026-09-28) ----
   Existing palette only; no waves. Pale-blue card tint = #C8E0F5 lightened so it isn't heavy. */
.pub .pub-btn-slate { background: var(--pub-text); color: #fff; }
.pub-help.pub-page { padding-top: 0; }
.pub-help-intro { position: relative; padding-top: 48px; }
.pub-help-intro .pub-page-intro { margin-bottom: 2rem; }
.pub-help-intro.has-photo .pub-page-intro { max-width: min(46em, 52%); }
.pub-help-intro-photo { position: absolute; top: 0; right: 0; bottom: -40px; width: 46%; z-index: 0; pointer-events: none; }
.pub-help-intro-photo .pub-photo {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 30%), linear-gradient(to bottom, #000 70%, transparent);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent, #000 30%), linear-gradient(to bottom, #000 70%, transparent);
            mask-composite: intersect;
}
.pub-help-intro .pub-container { position: relative; z-index: 1; }

.pub-help-cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.pub-help-card { display: flex; flex-direction: column; gap: 1.5rem; border-radius: 20px; padding: 1.75rem 1.75rem 1.9rem; }
.pub-help-card--adopt { background: #EAF3FC; }
.pub-help-card--foster { background: var(--pub-blush); }
.pub-help-card--donate { background: var(--pub-warm-white); border: 1.5px solid #F2D3DF; }
.pub-help-card-head { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.pub-help-card-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--pub-pink); }
.pub-help-card--donate .pub-help-card-icon { background: var(--pub-blush); }
.pub-help-card-icon svg { width: 38px; height: 38px; }
.pub-help-card h2 { font-size: 24px; margin: 0.2rem 0 0.35rem; }
.pub-help-card p { font-size: 16.5px; line-height: 1.55; margin: 0; }
/* Buttons: same height/radius/type; own widths; left-aligned in the card (customer request - at the
   card's left edge, under the icon, so "BECOME A FOSTER CARER" keeps its full width on one line) and
   aligned along the bottom of all cards. */
.pub-help-card > .pub-btn { margin-top: auto; align-self: flex-start; padding: 0 1.9rem; letter-spacing: 0.02em; }

.pub-help-other { margin-top: 48px; }
.pub-help-other-grid { display: grid; grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); gap: 2rem; align-items: stretch; }
.pub-help-other-copy h2 { font-size: clamp(28px, 2.8vw, 38px); margin-bottom: 1.75rem; max-width: 16em; }
.pub-help-ways { display: grid; gap: 1.6rem; }
.pub-help-way { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.pub-help-way-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--pub-blush); color: var(--pub-pink); }
.pub-help-way-icon svg { width: 32px; height: 32px; }
.pub-help-way h3 { font-size: 19px; margin: 0.35rem 0 0.25rem; }
.pub-help-way p { font-size: 16.5px; line-height: 1.6; margin: 0; }
/* Large feature photo: fills the right-hand column top to bottom (balancing the four items) and
   bleeds to the right edge of the screen; feathered edges, no hard boundary, never altered. */
.pub-help-other-photo {
    position: relative; min-height: 420px;
    margin-right: calc(-1 * max(var(--pub-gutter), (100vw - var(--pub-max)) / 2 + var(--pub-gutter)));
}
.pub-help-other-photo > .pub-photo {
    position: absolute; inset: 0;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-image: var(--pub-feather);
            mask-image: var(--pub-feather);
}

.pub-help-cta {
    position: relative; overflow: hidden; margin-top: 48px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto 120px; gap: 1.5rem 2rem; align-items: center;
    background: var(--pub-blush); border-radius: 20px; padding: 1.9rem 2.25rem;
}
.pub-help-cta h2 { font-size: clamp(24px, 2.3vw, 30px); margin-bottom: 0.35rem; }
.pub-help-cta p { font-size: 17px; margin: 0; max-width: 34em; }
.pub-help-cta-paws { width: 130px; height: auto; color: var(--pub-pink); opacity: 0.75; }

@media (max-width: 1023.98px) {
    .pub-help-cards { grid-template-columns: 1fr; }
    .pub-help-intro.has-photo .pub-page-intro { max-width: none; margin-bottom: 0; }
    /* Narrower screens: the intro photo sits under the text, full width, fading top and bottom. */
    .pub-help-intro-photo { position: relative; top: auto; right: auto; bottom: auto; width: 100%; aspect-ratio: 1774 / 887; margin: 0.5rem 0 1rem; }
    .pub-help-intro-photo .pub-photo {
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
                mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent);
    }
}
@media (max-width: 767.98px) {
    .pub-help-intro { padding-top: 32px; }
    .pub-help-card { padding: 1.5rem 1.25rem; }
    .pub-help-card-head, .pub-help-way { grid-template-columns: 52px minmax(0, 1fr); gap: 1rem; }
    .pub-help-card-icon, .pub-help-way-icon { width: 52px; height: 52px; }
    .pub-help-card-icon svg { width: 28px; height: 28px; }
    .pub-help-way-icon svg { width: 26px; height: 26px; }
    .pub .pub-help-card > .pub-btn { padding: 0 1.2rem; font-size: 15px; }
    .pub-help-other-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .pub-help-other-photo { min-height: 0; aspect-ratio: 1536 / 1024; margin-right: 0; }
    .pub-help-cta { grid-template-columns: minmax(0, 1fr); padding: 1.5rem 1.25rem 1.75rem; }
    .pub-help-cta > div { grid-column: 1 / -1; }
    .pub-help-cta .pub-btn { justify-self: start; max-width: 100%; }
    /* Phones: the two paws sit behind the button at the panel's bottom-right - larger and softer
       (lower opacity) - rather than squeezed in beside it. Button and text stay above them. */
    .pub-help-cta > div, .pub-help-cta .pub-btn { position: relative; z-index: 1; }
    .pub-help-cta-paws { position: absolute; right: 10px; bottom: 6px; width: 140px; opacity: 0.35; z-index: 0; pointer-events: none; }
}

/* ---- Enquiry form (/enquire, CRLM President's makeover, Oct 2026) ----
   Intro reuses the How You Can Help intro-with-photo pattern (.pub-help-intro); the form sits on
   a very pale blush panel with navy section headings, white boxes and pink required asterisks. */
.pub-enquire.pub-page { padding-top: 0; }
.pub-enquire-container { max-width: 900px; }
.pub-enquire .pub-page-intro p { margin-bottom: 0.75rem; }
.pub-enquire-cat strong { color: var(--pub-navy); }
.pub-enquire-more a { color: var(--pub-pink-strong); font-weight: 500; text-underline-offset: 3px; }

/* "Page 1 of 4" plus four small segments - the completed and current pages pink. The segments are
   decoration (aria-hidden); the words carry the information. */
.pub-progress { display: flex; align-items: center; gap: 1.25rem; margin: 0 0 1.25rem; font-size: 16px; }
.pub-progress > span:first-child { white-space: nowrap; }
.pub-progress-bar { display: flex; gap: 6px; flex: 1 1 auto; max-width: 300px; min-width: 80px; }
.pub-progress-bar > span { flex: 1; height: 8px; border-radius: 999px; background: #EAE4E8; }
.pub-progress-bar > .is-done { background: var(--pub-pink); }

/* #FCF4F7: a paler blush than the section bands, so text, the pink asterisks (4.9:1) and the
   box edges (3.2:1) all keep their contrast on it. */
.pub-form-panel { background: #FCF4F7; border-radius: 24px; padding: clamp(20px, 4vw, 40px); }
.pub-form-panel h4 {
    font-family: "Poppins", "Inter", sans-serif; font-weight: 700; color: var(--pub-navy);
    font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.01em; margin-bottom: 0.35rem;
}
.pub-form-panel h4.mt-4 { margin-top: 2.5rem !important; }
.pub-form-panel .form-label { color: var(--pub-text); font-weight: 500; }
.pub-form-panel .mb-3 { margin-bottom: 1.35rem !important; }
/* Required-field asterisks (labels and the "* required" key) - not the red error messages. */
.pub-form-panel .form-label > .text-danger,
.pub-form-panel p > .text-danger:first-child { color: var(--pub-pink-strong) !important; }
.pub-form-panel .card { box-shadow: none; border: 1px solid #EBDDE3; border-radius: 14px; }

@media (max-width: 767.98px) {
    .pub-form-panel { border-radius: 20px; margin-inline: -4px; }
}