/* ============================================================
   page-hero
   Figma: home 1407:99019 / 1407:99484 / 1407:99273,
          product 1407:65430 / 1407:74910 / 1407:69016,
          hub 1407:64998 / 1407:74540 / 1407:74173,
          stats 1407:87798 / 1407:88249,
          contact 1398:47072 / 1398:47348 / 1398:46778
   (desktop / tablet / mobile). Positions are from the top of the
   page: the header is absolutely positioned and takes no space.

   The photo sits in a box the size of the Figma image layer and is
   clipped to the frame's ellipse (rx and cx as a % of the width, so
   the curve scales with the screen). The wash is the image layer's
   gradient: pale blue on the left, clear on the right.
   ============================================================ */

.page-hero {
    position: relative;
    overflow: hidden;
    background: var(--color-surface);
    min-height: 720px;
    padding: 209px var(--space-gutter) 0;   /* home: the eyebrow at y209 */
}

.page-hero__inner {
    max-width: var(--layout-content-max-w);
    margin: 0 auto;
}

/* ── Background ───────────────────────────────────────────── */
.page-hero__bg {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 759px;
    clip-path: ellipse(100% 720px at 50% 1px);   /* home: 2880×1440, centred, bottom at 720 */
    z-index: 0;
}

@media (min-width: 1025px) {
    .page-template-teams .page-hero__bg {
        clip-path: ellipse(95% 660px at 50% 10px);
    } 
}

.page-template-teams .page-hero__bg img {
    height: 105%;
}

.page-hero__bg picture,
.page-hero__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(270.8deg, transparent -6.2%, var(--color-wash) 94.8%);
    opacity: 0.5;   /* the home wash layer is at 50% (83% tablet, 80% mobile); product's is 100% */
}

/* ── Breadcrumb (product) ─────────────────────────────────── */
.page-hero .breadcrumb {
    position: relative;
    z-index: 1;
}

/* ── Content ──────────────────────────────────────────────── */
.page-hero__content {
    position: relative;
    z-index: 1;
    max-width: 800px;   /* home: the Heading frame */
}

.page-hero__eyebrow { margin-bottom: 8px; }

/* Figma sets the heading in Title Case ("TITLE" text case) */
.page-hero__heading {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--color-text);
    text-transform: capitalize;
    margin-bottom: 16px;
}

.page-template-home .page-hero__heading {
    color: var(--color-secondary);
} 

.page-hero__lead {
    max-width: 750px;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-secondary);
    margin-bottom: 20px;
}

/* ── Product ──────────────────────────────────────────────────
   The breadcrumb at y99 and the eyebrow at y175. The curve is
   off-centre (centre at 24.4% of the width), dipping to 681 on
   the left and rising to 432 at the right edge.
   ───────────────────────────────────────────────────────────── */
.page-hero--product {
    min-height: 682px;
    padding-top: 99px;
}
.page-hero--product .page-hero__bg {
    top: -39px;
    clip-path: ellipse(100% 720px at 24.375% 0);
}
.page-hero--product .page-hero__bg::after {
    background: linear-gradient(292.2deg, transparent 15.3%, var(--color-wash) 92.4%);
    opacity: 1;
}
.page-hero--product .page-hero__content {
    max-width: 850px;
    margin-top: 59px;
}
.page-hero--product .page-hero__heading {
    font-size: var(--text-display);
    line-height: var(--leading-display);
    word-spacing: var(--word-spacing-display);
}

/* ── Hub (Ancillary Insurance 1407:64998) ─────────────────────
   A 605px hero. The eyebrow at y125, and the curve's centre at
   64.79% of the width (the frame's 2880×1440 ellipse at -507,-835),
   over a photo layer at y-120. T4 and T6 centre theirs at 59.24%
   and 68.19%: built to the Ancillary frame, flagged for UX.
   ───────────────────────────────────────────────────────────── */
.page-hero--hub {
    min-height: 605px;
    padding-top: 125px;
}
.page-hero--hub .page-hero__bg {
    top: -120px;
    clip-path: ellipse(100% 720px at 64.79% 5px);
}
.page-hero--hub .page-hero__bg::after {
    background: linear-gradient(284.2deg, transparent 13.9%, var(--color-wash) 92.5%);
    opacity: 1;
}
.page-hero--hub .page-hero__content { max-width: 750px; }
.page-hero--hub .page-hero__heading {
    font-size: var(--text-display);
    line-height: var(--leading-display);
    word-spacing: var(--word-spacing-display);
}
.page-hero--hub .page-hero__lead {
    max-width: 608px;
    margin-bottom: 16px;
}

/* ── Stats (About Us 1407:87798) ──────────────────────────────
   Home's curve under the wash at 100%, the eyebrow at y160, a
   Display heading in Secondary, the lead 835 wide, then 24px to the
   buttons and 24px to the glass stat cards. Also T11/T12/T13.
   ───────────────────────────────────────────────────────────── */
.page-hero--stats { padding-top: 160px; }
.page-hero--stats .page-hero__bg::after {
    background: linear-gradient(294.8deg, transparent 28.9%, var(--color-wash) 95.3%);
    opacity: 1;
}
.page-hero--stats .page-hero__content { max-width: 860px; }
.page-hero--stats .page-hero__heading {
    font-size: var(--text-display);
    line-height: var(--leading-display);
    word-spacing: var(--word-spacing-display);
    color: var(--color-secondary);
}
.page-hero--stats .page-hero__lead {
    max-width: none;
    margin-bottom: 24px;
}

.page-template-about-us .page-hero__lead {
    max-width: 500px;
}
.page-hero--stats .stat-block { margin-top: 24px; }

/* ── Stat block (StatBlock, 1407:87821 / 1407:88272) ──────────
   Glass cards: white at 28% over a 19px backdrop blur (the "glass"
   effect style), value in H2 and label in H4, centred 8 apart. The
   cards share the row equally and match heights.
   ───────────────────────────────────────────────────────────── */
.stat-block {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 22.16px;
    max-width: 860px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.stat-block__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px;
    border-radius: 16px;
    background: var(--color-surface-glass-card);
    -webkit-backdrop-filter: blur(var(--blur-glass));
    backdrop-filter: blur(var(--blur-glass));
    text-align: center;
    color: var(--color-text);
}
.stat-block__value {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
}
.stat-block__label {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
}

/* ── Contact (Contact Us 1398:47072) ──────────────────────────
   Home's curve under the wash at 100%, the eyebrow at y174, a
   Display heading in Secondary, and the team cards 20 below the lead.
   The frame has no buttons.
   ───────────────────────────────────────────────────────────── */
.page-hero--contact { padding-top: 174px; }
.page-hero--contact .page-hero__bg::after {
    background: linear-gradient(290.8deg, transparent 23.9%, var(--color-wash) 93.8%);
    opacity: 1;
}
.page-hero--contact .page-hero__content { max-width: none; }
.page-hero--contact .page-hero__heading {
    max-width: 750px;
    font-size: var(--text-display);
    line-height: var(--leading-display);
    word-spacing: var(--word-spacing-display);
    color: var(--color-secondary);
}

/* ── Article (the singles, 1491:23239 / mobile 1586:64161) ────
   Home's curve over a photo layer at y-149 (the ellipse's bottom at
   572), the date at y156, an 8px gap to a Display heading in
   Secondary 943 wide, then the lead 750 wide. No breadcrumb or
   buttons. The photo is 118% wide, left-aligned and dropped 17%
   within its layer. The tablet has no frame and follows the mobile.
   ───────────────────────────────────────────────────────────── */
.page-hero--article {
    min-height: 572px;
    padding-top: 156px;
}
.page-hero--article .page-hero__bg { top: -149px; }
.page-hero--article .page-hero__bg img {
    width: 118.16%;
    max-width: none;
    margin-left: -0.01%;
    transform: translateY(17.22%);
}
.page-hero--article .page-hero__bg::after {
    background: linear-gradient(289.24deg, transparent 4.77%, var(--color-wash) 93.96%);
    opacity: 1;
}
.page-hero--article .page-hero__content { max-width: 943px; }
.page-hero--article .page-hero__date { margin-bottom: 8px; }
.page-hero--article .page-hero__heading {
    margin-bottom: 28px;
    font-size: var(--text-display);
    line-height: var(--leading-display);
    word-spacing: var(--word-spacing-display);
    color: var(--color-secondary);
}
.page-hero--article .page-hero__lead { margin-bottom: 0; }

/* ── Vacancy (the single vacancy 1727:23452, mobile 1727:23660) ──
   The article hero with the date at y203 (the copy is centred in the
   80-551 band below the header), a Display heading, a row of three
   32px chips 20 below it, then "Apply Now" 48 under the chips. The
   mobile frame draws only the article placeholder, so the desktop
   copy is used there too (chips stacked, as on the vacancy cards).
   ───────────────────────────────────────────────────────────── */
.page-hero--vacancy { padding-top: 203px; }
/* The artwork is the whole layer: no 118% crop and no wash over it */
.page-hero--vacancy .page-hero__bg img {
    width: 100%;
    margin-left: 0;
    transform: none;
}
.page-hero--vacancy .page-hero__bg::after { content: none; }
.page-hero--vacancy .page-hero__heading { margin-bottom: 20px; }
.page-hero__meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.page-hero__meta-item {
    display: flex;
    align-items: center;
    height: 32px;
    padding-right: 12px;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-text);
}
.page-hero__meta-icon { box-sizing: border-box; width: 32px; height: 32px; padding: 4px; color: var(--color-accent); flex: 0 0 32px; }
.page-hero--vacancy .page-hero__actions { margin-top: 48px; }

/* ── Contact teams (ContactTeams, 1398:47086) ─────────────────
   Three glass cards sharing a 1011 row: a 48px navy circle with
   the icon in Primary Accent, the team in H3, then the number and
   address in Body (small), 4 apart. The links' hover and focus
   aren't designed: an underline, and the site's focus ring.
   ───────────────────────────────────────────────────────────── */
.contact-teams {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 22.16px;
    max-width: 1011px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.contact-teams__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    border-radius: 16px;
    background: var(--color-surface-glass-card);
    -webkit-backdrop-filter: blur(var(--blur-glass));
    backdrop-filter: blur(var(--blur-glass));
    text-align: center;
    color: var(--color-text);
}
.contact-teams__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-surface-tint);
}
.contact-teams__glyph {
    display: block;
    width: 24px;
    height: 24px;
}
.contact-teams__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.contact-teams__name {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    color: var(--color-text);
}
.contact-teams__links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    font-family: var(--font-heading);   /* Body (small) is set in Futura */
    font-weight: var(--weight-medium);
    font-size: var(--text-body-small);
    line-height: var(--leading-body-small);
}
.contact-teams__link {
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.contact-teams__link:hover { text-decoration: underline; }
.contact-teams__link:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Topics (Insights 1331:153992, FAQs 1331:155489) ──────────
   Home's curve under the wash at 100%, the eyebrow at y160, a
   Display heading in Secondary, then a row of glass tiles: pad 24,
   radius 16, gap 22, white at 28% and a 19px blur. Insights tiles
   stack a 48px navy disc (the icon in Primary Accent) over an H4
   label; FAQ tiles put an H3 label over a 48px ring with a 16px
   down arrow, and are in-page links.
   ───────────────────────────────────────────────────────────── */
.page-hero--topics { padding-top: 160px; }
.page-hero--topics .page-hero__bg::after {
    background: linear-gradient(289.2deg, transparent 4.8%, var(--color-wash) 94%);
    opacity: 1;
}
.page-hero--topics .page-hero__heading {
    font-size: var(--text-display);
    line-height: var(--leading-display);
    word-spacing: var(--word-spacing-display);
    color: var(--color-secondary);
    margin-bottom: 8px;
}
.page-hero__content--topics-icon { max-width: 943px; }
.page-hero__content--topics-jump { max-width: 750px; }
.page-hero__content--topics-jump .page-hero__heading { margin-bottom: 20px; }
.page-hero--topics .page-hero__lead {
    max-width: 750px;
    margin-bottom: 48px;
}
.page-hero__content--topics-jump .page-hero__lead {
    max-width: 656px;
    margin-bottom: 20px;
}

.page-hero__topics-label {
    margin-bottom: 12px;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
    color: var(--color-secondary);
}
.page-hero__topics-list {
    display: grid;
    grid-template-columns: 264fr 263fr 263fr 291fr;   /* the frame's four tile widths */
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 1147px;
    max-width: calc(100vw - 2 * var(--space-gutter));
}
.page-hero__topics--jump .page-hero__topics-list {
    width: 1175px;
    grid-template-columns: 277fr 278fr 278fr 278fr;
}
/* the frame's labels run a little wider than the padding box */
.page-hero__topic-label { margin: 0 -12px; }
.page-hero__topics-item { display: flex; }
.page-hero__topic {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-sizing: border-box;
    padding: 24px;
    border-radius: 16px;
    background: var(--color-surface-glass-card);
    -webkit-backdrop-filter: blur(var(--blur-glass));
    backdrop-filter: blur(var(--blur-glass));
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
}
.page-hero__topics--icon .page-hero__topic { min-height: 160px; }
.page-hero__topics--jump .page-hero__topic {
    min-height: 164px;
    flex-direction: column-reverse;   /* the label first in the frame; the markup keeps the disc first for the row layout below */
}
.page-hero__topic-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: var(--color-surface-tint);
}
.page-hero__topic-glyph {
    width: 24px;
    height: 24px;
}
.page-hero__topic-icon--arrow {
    background: transparent;
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary);
}
.page-hero__topic-icon--arrow .page-hero__topic-glyph {
    width: 16px;
    height: 16px;
    transform: rotate(90deg);   /* arrow-forward turned down, as faq-accordion does */
}
.page-hero__topic-label {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
}
.page-hero__topics--jump .page-hero__topic-label {
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
}
/* Hover and focus aren't designed: the ring fills, and the site's focus ring */
a.page-hero__topic:hover .page-hero__topic-icon--arrow {
    background: var(--color-secondary);
    color: var(--color-text-inverse);
}
/* A linked icon tile (the Insights tiles): the disc deepens a shade. Not designed either. */
a.page-hero__topic:hover .page-hero__topic-icon:not(.page-hero__topic-icon--arrow) {
    background: var(--color-card-navy);
}
a.page-hero__topic:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* ── Platform logo (Ancillary HUB 1331:137969) ───────────────
   The AncillaryHUB logo stands in for the eyebrow, 450×80 over
   the heading, and an indigo wash replaces the pale blue; every
   line of text is white.
   ───────────────────────────────────────────────────────────── */
.page-hero__logo {
    display: block;
    width: 450px;
    max-width: 100%;
    height: 80px;
    margin-bottom: 21px;
    object-fit: contain;
    object-position: left center;
}

/* ── Tablet (1407:99484, 1407:74910) ──────────────────────────
   A 474px hero with a centred 1897×1440 curve.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* The hero grows with its copy (at least the frame's 474), keeping 80px
       under the buttons, and the photo fills it with the curve anchored to
       its bottom edge: at 474 that's the frame's curve exactly. */
    .page-hero {
        min-height: 474px;
        padding-top: 125px;
        padding-bottom: 80px;
    }
    .page-hero__bg {
        top: 0;
        height: auto;
        bottom: 0;
        clip-path: ellipse(127.5% 720px at 50% calc(100% - 720px));
    }
    .page-hero__bg::after {
        background: linear-gradient(286deg, transparent -28%, var(--color-wash) 91.7%);
        opacity: 0.83;
    }

    .page-hero--stats .page-hero__bg::after {
        background: linear-gradient(294.8deg, transparent 0%, var(--color-wash) 95.3%);
    }

    .page-hero__content, .page-hero--stats .page-hero__content { max-width: 510px; }
    .page-hero__heading,
    .page-hero--product .page-hero__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
        word-spacing: normal;   /* the 6px is for Display only */
    }
    .page-hero__lead { max-width: 447px; }

    /* The tablet frame has no breadcrumb; it's shown here as on desktop
       and mobile (Alex, 29 Sep), 20px above the eyebrow at y116. */
    .page-hero--product {
        min-height: 474px;
        padding-top: 79px;
    }
    .page-hero--product .page-hero__bg {
        top: 0;
        clip-path: ellipse(127.5% 720px at 50% calc(100% - 720px));
    }
    .page-hero--product .page-hero__bg::after {
        background: linear-gradient(284.8deg, transparent -10.4%, var(--color-wash) 91.9%);
        opacity: 1;
    }
    .page-hero--product .page-hero__content {
        max-width: 469px;
        margin-top: 20px;
    }
    /* The product heading stays a display heading on tablet: Mobile/Display
       rather than the frame's Mobile/H2 (Alex, 29 Sep) */
    .page-hero--product .page-hero__heading {
        font-size: var(--text-mobile-display);
        line-height: var(--leading-mobile-display);
        word-spacing: var(--word-spacing-display);
        color: var(--color-secondary);   /* the tablet frame's colour */
    }
    .page-hero--product .page-hero__lead { margin-bottom: 16px; }   /* home keeps 20 */

    /* Hub (the Ancillary tablet frame 1407:74540): home's 474px curve, the
       eyebrow at y126, a Mobile/H2 heading in Secondary and a 12px gap
       between the buttons */
    .page-hero--hub { padding-top: 126px; }
    .page-hero--hub .page-hero__bg {
        top: 0;
        clip-path: ellipse(127.5% 720px at 50% calc(100% - 720px));
    }
    .page-hero--hub .page-hero__bg::after {
        background: linear-gradient(284.9deg, transparent -10.5%, var(--color-wash) 91.9%);
        opacity: 0.87;
    }
    .page-hero--hub .page-hero__content { max-width: 469px; }
    .page-hero--hub .page-hero__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
        word-spacing: normal;
        color: var(--color-secondary);
    }
    .page-hero--hub .page-hero__lead { max-width: 447px; }
    .page-hero--hub .page-hero__actions { gap: 12px; }
    /* The tablet frame's Ask Coplus is already Mobile/Action */
    .page-hero--hub .page-hero__ask {
        font-family: var(--font-heading);
        font-size: var(--text-mobile-action);
        font-weight: var(--weight-medium);
    }

    /* Stats: no tablet frame, so tablet takes the mobile frame's type and
       cards (U12) on the home tablet curve */
    .page-hero--stats .page-hero__heading {
        font-size: var(--text-mobile-display);
        line-height: var(--leading-mobile-display);
        color: var(--color-text);   /* the mobile frame's colour */
    }
    .page-hero--stats .page-hero__lead {
        margin-bottom: 20px;
        font-family: var(--font-heading);   /* Mobile/Body is set in Futura */
        font-size: var(--text-mobile-body);
        line-height: var(--leading-mobile-body);
    }
    .page-hero--stats .page-hero__actions { gap: 12px; }

    /* Contact (the tablet frame 1398:47348): the eyebrow at y85, a
       Mobile/H2 heading, and three smaller cards (651 across, 12 apart)
       with a 32px icon circle */
    .page-hero--contact { padding-top: 85px; }
    .page-hero--contact .page-hero__bg::after {
        background: linear-gradient(286deg, transparent -28.1%, var(--color-wash) 91.7%);
        opacity: 0.83;
    }
    .page-hero--contact .page-hero__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
        word-spacing: normal;
    }
    .contact-teams {
        max-width: 651px;
        gap: 12px;
    }
    .contact-teams__card {
        padding: 12px;
        border-radius: 8px;
        -webkit-backdrop-filter: blur(var(--blur-glass-mobile));
        backdrop-filter: blur(var(--blur-glass-mobile));
    }
    .contact-teams__icon {
        width: 32px;
        height: 32px;
    }
    .contact-teams__glyph {
        width: 16px;
        height: 16px;
    }
    .contact-teams__body { gap: 8px; }
    /* The frames set the team in an unstyled Futura PT Demi 20; built in
       Mobile/H4 (20px), the declared style of that size */
    .contact-teams__name {
        font-size: var(--text-mobile-h4);
        line-height: var(--leading-mobile-h4);
    }
    .page-hero--stats .stat-block {
        margin-top: 20px;
        gap: 16px;
    }
    .stat-block__item {
        padding: 12px;
        border-radius: 8px;
        -webkit-backdrop-filter: blur(var(--blur-glass-mobile));
        backdrop-filter: blur(var(--blur-glass-mobile));
    }
    .stat-block__value {
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }
    .stat-block__label {
        font-family: var(--font-info);
        font-weight: var(--weight-bold);
        font-size: var(--text-mobile-info);
        line-height: var(--leading-mobile-info);
    }

    /* Topics (Insights 1331:154279, FAQs 1331:155681): the eyebrow at y81,
       a 739px hero with its 1440 circle pinned to the bottom edge, and the
       tiles as stacked rows. The tablet follows the mobile frame. */
    .page-hero--topics {
        min-height: 739px;
        padding-top: 81px;
    }
    .page-hero--topics .page-hero__bg {
        top: -43px;
        height: auto;
        bottom: 0;
        clip-path: ellipse(183.2% 720px at 49.87% calc(100% - 720px));
    }
    .page-hero--topics .page-hero__bg::after {
        background: linear-gradient(320.5deg, transparent 27%, var(--color-wash) 71.4%);
    }
    .page-hero--topics .page-hero__content { max-width: none; }
    .page-hero--topics .page-hero__heading {
        font-size: var(--text-mobile-display);
        line-height: var(--leading-mobile-display);
        word-spacing: var(--word-spacing-display);
        color: var(--color-text);
        margin-bottom: 16px;
    }
    .page-hero--topics .page-hero__lead,
    .page-hero__content--topics-jump .page-hero__lead {
        max-width: none;
        margin-bottom: 20px;
    }
    .page-hero__topics-label {
        font-size: var(--text-mobile-h4);
        line-height: var(--leading-mobile-h4);
    }
    .page-hero__topics-list,
    .page-hero__topics--jump .page-hero__topics-list {
        grid-template-columns: 1fr;
        gap: 12px;
        width: auto;
        max-width: none;
    }
    .page-hero__topic,
    .page-hero__topics--icon .page-hero__topic,
    .page-hero__topics--jump .page-hero__topic {
        flex-direction: row;
        justify-content: flex-start;
        min-height: 72px;
        padding: 12px;
        border-radius: 8px;
        text-align: left;
        -webkit-backdrop-filter: blur(var(--blur-glass-mobile));
        backdrop-filter: blur(var(--blur-glass-mobile));
    }
    .page-hero__topic-label,
    .page-hero__topics--jump .page-hero__topic-label {
        margin: 0;
        font-size: var(--text-mobile-h4);   /* no text style in the frame: Futura PT Demi 20 */
        line-height: var(--leading-mobile-h4);
    }

    /* Article (no tablet frame: the mobile's): 81 to the date, a Mobile/H2
       heading, and a 562 hero with its circle pinned to the bottom */
    .page-hero--article {
        min-height: 400px;
        padding-top: 81px;
    }
    .page-hero--article .page-hero__bg { top: 0; }
    .page-hero--article .page-hero__bg img {
        width: 100%;
        margin-left: 0;
        transform: none;
        object-position: 37.7% 0;
    }
    .page-hero--article .page-hero__bg::after {
        background: linear-gradient(327.93deg, transparent 11.95%, var(--color-wash) 70.84%);
        opacity: 1;
    }
    .page-hero--article .page-hero__content { max-width: none; }
    .page-hero--article .page-hero__heading {
        margin-bottom: 16px;
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
        word-spacing: normal;
        color: var(--color-text);
    }
    .page-hero--vacancy { padding-top: 81px; }
    .page-hero--vacancy .page-hero__bg::after { content: none; }
    .page-hero--vacancy .page-hero__heading { margin-bottom: 20px; }
    .page-hero__meta { flex-direction: column; gap: 8px; }
    .page-hero--vacancy .page-hero__actions { margin-top: 24px; }

    /* Image focus — set per page via the hero's "Image Focus" field. Only
       applies below desktop, where the photo crops hard enough to lose its
       subject; desktop keeps the framing as designed. */
    .page-hero__bg--focus-left   img { object-position: left center; }
    .page-hero__bg--focus-right  img { object-position: right center; }
    .page-hero__bg--focus-top    img { object-position: center top; }
    .page-hero__bg--focus-bottom img { object-position: center bottom; }
}

/* ── Mobile (1407:99273, 1407:69016) ──────────────────────────
   A 600px hero with a 1440px circle as the curve. Supply the
   portrait crop through the "Mobile Background Image" field.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .page-hero {
        min-height: 598px;
        padding-top: 94px;
    }
    .page-hero__bg {
        height: 600px;
        clip-path: ellipse(183.2% 720px at 51.65% -122px);
    }
    .page-hero__bg::after {
        background: linear-gradient(324.5deg, transparent 26.3%, var(--color-wash) 70.3%);
        opacity: 0.8;
    }

    .page-hero__content { max-width: none; }
    .page-hero__heading,
    .page-hero--product .page-hero__heading {
        font-size: var(--text-mobile-display);
        line-height: var(--leading-mobile-display);
        word-spacing: var(--word-spacing-display);
        color: var(--color-text);
    }
    .page-hero__lead {
        max-width: none;
        margin-bottom: 20px;
    }

    /* The home frame's Ask Coplus is Mobile/Action */
    .page-hero__ask {
        font-family: var(--font-heading);
        font-size: var(--text-mobile-action);
        font-weight: var(--weight-medium);
    }

    .page-hero--product {
        min-height: 600px;
        padding-top: 81px;
    }
    .page-hero--product .page-hero__bg {
        clip-path: ellipse(183.2% 720px at 47.84% -120px);
    }
    .page-hero--product .page-hero__bg::after {
        background: linear-gradient(321.7deg, transparent 0%, var(--color-wash) 69.3%);
        opacity: 1;
    }
    .page-hero--product .page-hero__content { margin-top: 20px; }

    /* Hub (1407:74173): a 498px hero, its circle's centre at 49.62% and
       its bottom at 496, over a 500px photo layer */
    .page-hero--hub { min-height: 498px; }
    .page-hero--hub .page-hero__bg {
        height: 500px;
        clip-path: ellipse(183.2% 720px at 49.62% -224px);
    }
    .page-hero--hub .page-hero__bg::after {
        background: linear-gradient(330.4deg, transparent 0%, var(--color-wash) 70.7%);
        opacity: 0.8;
    }
    .page-hero--hub .page-hero__content,
    .page-hero--hub .page-hero__lead { max-width: none; }
    .page-hero--hub .page-hero__heading {
        font-size: var(--text-mobile-display);
        line-height: var(--leading-mobile-display);
        word-spacing: var(--word-spacing-display);
    }

    /* Stats (1407:88249): the eyebrow at y81 and a 739px hero. The photo
       layer starts at y-43 and the 1440 circle is pinned to the hero's
       bottom edge, so a longer lead grows the hero rather than spilling
       out of the curve. "Talk To Our Team" takes the row's spare width. */
    .page-hero--stats {
        min-height: 739px;
        padding-top: 81px;
    }
    .page-hero--stats .page-hero__bg {
        top: -43px;
        height: auto;
        bottom: 0;
        clip-path: ellipse(183.2% 720px at 49.87% calc(100% - 720px));
    }
    .page-hero--stats .page-hero__bg::after {
        background: linear-gradient(320.5deg, transparent 27%, var(--color-wash) 71.4%);
    }
    .page-hero--stats .page-hero__actions .btn--primary { flex: 1 1 auto; }

    /* Contact (1398:46778): the eyebrow at y81, a Mobile/H2 heading in
       Text, a 730px hero with its circle pinned to the bottom edge, and
       the cards as stacked rows with the 48px icon on the left */
    .page-hero--contact {
        min-height: 730px;
        padding-top: 81px;
    }
    .page-hero--contact .page-hero__bg {
        top: -47px;
        height: auto;
        bottom: 0;
        clip-path: ellipse(183.2% 715.5px at 49.87% calc(100% - 715.5px));
    }
    .page-hero--contact .page-hero__bg::after {
        background: linear-gradient(312.1deg, transparent -14.3%, var(--color-wash) 68.5%);
        opacity: 1;
    }
    .page-hero--contact .page-hero__heading { color: var(--color-text); }
    .contact-teams {
        grid-auto-flow: row;
        max-width: none;
    }
    .contact-teams__card {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
    }
    .contact-teams__icon {
        width: 48px;
        height: 48px;
    }
    .contact-teams__glyph {
        width: 24px;
        height: 24px;
    }

    /* Platform logo (Ancillary HUB mobile 1331:137458): 328 x 58.5 */
    .page-hero__logo {
        width: 328px;
        height: 58.5px;
        margin-bottom: 16px;
    }
}

/* Indigo (Ancillary HUB): last, so it wins over the product rules it modifies */
.page-hero--indigo .page-hero__bg::after {
    background: linear-gradient(270.8deg, transparent -6.2%, var(--color-hub) 94.8%);
    opacity: 1;
}
.page-hero--indigo .page-hero__content { max-width: 1100px; }
.page-hero--indigo .page-hero__lead { max-width: 1014px; }
.page-hero--indigo .page-hero__heading,
.page-hero--indigo .page-hero__lead,
.page-hero--indigo .breadcrumb a {
    color: var(--color-text-inverse);
}
.page-hero--indigo .breadcrumb__list { color: var(--color-text-inverse-muted); }
.page-hero--indigo .page-hero__bg { clip-path: ellipse(100% 720px at 50% 0); }   /* the frame's curve is centred, bottom at 681 */

@media (max-width: 1024px) {
    .page-hero--indigo .page-hero__bg::after {
        background: linear-gradient(321.7deg, transparent 12.9%, var(--color-hub) 69.3%);
    }
    .page-hero--indigo .page-hero__bg { clip-path: ellipse(183.2% 720px at 47.84% -120px); }
    .page-hero--indigo .page-hero__heading { color: var(--color-text-inverse); }
    .page-hero--indigo .page-hero__content,
    .page-hero--indigo .page-hero__lead { max-width: none; }
}

/* Mobile (1331:137427): the breadcrumb at y128 and a taller hero than product's */
@media (max-width: 767px) {
    .page-hero--indigo {
        min-height: 640px;
        padding-top: 120px;
    }
    .page-hero--indigo .page-hero__bg { height: 640px; }
}

@media (max-width: 767px) {
    /* Article (1586:64161): the date at y81, the circle's centre at 49.87%,
       bottom at 561 */
    .page-hero--article {
        min-height: 400px;
        padding-top: 81px;
    }
    .page-hero--article .page-hero__bg {
        top: 0;
        height: auto;
        bottom: 0;
        clip-path: ellipse(183.2% 720px at 49.87% calc(100% - 720px));
    }
}

/* ── Solutions (T8: For Brokers 1407:93506, tablet 1407:94937, mobile
   1407:92157; the same on Insurers & MGAs and Affinity) ───────────────
   A modifier for 'product' (use 'product solutions'): no breadcrumb, so the
   eyebrow sits at y194 (tablet 140, mobile 81), and a shorter hero whose
   curve is centred at 47.64% and bottoms out at 585 over a photo layer at
   y-49. Tablet keeps product's curve (474). Mobile: centre 29.6%, bottom
   458 (the updated frame 900:21028; it was 595 in 1407:92157). ──────────────────────────────────────────────────────────────── */
.page-hero--solutions {
    min-height: 585px;
    padding-top: 135px;
}
.page-hero--solutions .page-hero__bg {
    top: -49px;
    clip-path: ellipse(100% 720px at 47.64% -86px);
}
@media (max-width: 1024px) {
    .page-hero--solutions {
        min-height: 474px;
        padding-top: 120px;
    }
    .page-hero--solutions .page-hero__bg {
        top: 0;
        clip-path: ellipse(127.5% 720px at 50% calc(100% - 720px));
    }
}
/* The tablet frame sets the heading in Mobile/H2 (32); mobile goes back to
   Mobile/Display */
@media (min-width: 768px) and (max-width: 1024px) {
    .page-hero--solutions .page-hero__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
        word-spacing: normal;
    }
}
@media (max-width: 767px) {
    .page-hero--solutions {
        min-height: 458px;   /* the updated mobile frame 900:21028 (was 595); the curve's bottom is 458 */
        padding-top: 81px;
    }
    .page-hero--solutions .page-hero__bg {
        clip-path: ellipse(183.2% 720px at 29.6% -262px);
    }
    .page-hero--solutions .page-hero__content { margin-top: 0; }
    .page-hero--solutions .page-hero__lead { margin-bottom: 32px; }
    /* Both buttons full width, stacked 12 apart (1407:92170) */
    .page-hero--solutions .page-hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .page-hero--solutions .page-hero__actions .btn { justify-content: center; }
}