/*=============================================
    About — browning
    Widget: classes/widgets/About/about.php

    Copy on one side (eyebrow, heading, lead, checklist, CTA), a full-bleed
    image on the other.

    NO SHAPE CSS. The arc and its two backing crescents used to be drawn here
    with border-radius, but the artwork now ships with the curve already
    composited in, so masking it again would clip the image twice. The image
    is placed plain — anything shape-like in this section comes from the file.

    The columns are 44/56 rather than an even split: the copy's own max-width
    means it never fills half the section, so 1fr 1fr left a dead band between
    the text and the image.

    Sizing is vw on the same 1440 canvas and the same 1024/767 breakpoints as
    hero.css, service.css and coverage.css, so the sections scale together.
    Loaded only where the widget is used (get_style_depends).
=============================================*/

.about {
    --about-navy: #111827;
    --about-body: #4B5563;
    --about-yellow: #e8b64a;
    --about-bg: #fdfcf9;

    /* Width of the copy column; the image takes the rest, out to the section
       edge. Not 1fr 1fr: the copy only ever fills about 32vw, so an even split
       left a dead band between the text and the image. */
    --about-split: 44%;

    position: relative;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: var(--about-split) 1fr;
    align-items: stretch;
    width: 100%;
    /* the section owns no outer space: it butts up against whatever sits above
       and below it, so a theme margin on <section> can never open a strip */
    margin: 0;
    background: var(--about-bg);
    color: var(--about-navy);
}

.about *,
.about *::before,
.about *::after {
    box-sizing: border-box;
}

/* ============ Copy ============ */
/* padding rather than a max-width container: the media half has to reach the
   section's right edge, so the two columns cannot share a centred wrapper */
.about__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* the right inset is small on purpose — the copy's own max-width sets the
       measure, so extra padding here only widens the band before the image */
    padding: 6vw 2.5vw 6vw 5.56vw;
}

.about__eyebrow {
    display: flex;
    align-items: center;
    gap: .56vw;
    margin: 0 0 1.11vw;
}

.about__eyebrow i {
    display: block;
    width: 1.67vw;
    height: .14vw;
    min-height: 2px;
    background: currentColor;
}

.about__eyebrow span {
    font-size: .97vw;
    font-weight: 400;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.about__title {
    margin: 0 0 1.39vw;
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 800;
    font-size: 4.17vw;
    line-height: .98;
    letter-spacing: -.01em;
}

.about__text {
    margin: 0 0 2.08vw;
    max-width: 32vw;
    font-size: 1.11vw;
    line-height: 1.65;
    color: var(--about-body);
}

.about__text p {
    margin: 0 0 1em;
}

.about__text p:last-child {
    margin-bottom: 0;
}

/* ============ Checklist ============ */
.about__list {
    display: flex;
    flex-direction: column;
    gap: .97vw;
    margin: 0 0 2.36vw;
    padding: 0;
    list-style: none;
}

.about__item {
    display: flex;
    align-items: center;
    gap: .83vw;
    font-size: 1.04vw;
    font-weight: 600;
    line-height: 1.4;
    color: var(--about-navy);
}

.about__item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.11vw;
    color: var(--about-yellow);
}

.about__item-icon svg {
    width: 100%;
    height: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about__item-icon i {
    font-size: 1vw;
    line-height: 1;
}

/* ============ Button ============ */
.about__actions {
    display: flex;
}

.about__btn {
    display: inline-flex;
    align-items: center;
    gap: .69vw;
    padding: 1.25vw 2.36vw;
    border: 0;
    border-radius: .28vw;
    background: var(--about-yellow);
    font-size: 1.18vw;
    font-weight: 600;
    line-height: 1;
    color: var(--about-navy);
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.about__btn:hover,
.about__btn:focus {
    background: var(--about-navy);
    color: #ffffff;
    transform: translateY(-2px);
}

.about__btn svg {
    width: 1.11vw;
    height: 1.11vw;
    fill: currentColor;
}

.about__btn i {
    font-size: 1vw;
    line-height: 1;
}

/* ============ Media ============ */
.about__media {
    position: relative;
    align-self: stretch;
    min-height: 42vw;
}

.about__figure {
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: inherit;
    overflow: hidden;
}

/* Pinned to all four edges rather than sized with height: 100%.

   Themes routinely ship `img { height: auto }` at a higher specificity than
   anything here, and when that wins the photo stops short and the section's
   background shows as a strip along the bottom. With top and bottom both set,
   `height: auto` resolves to the distance between them — so the photo fills the
   column whichever rule wins. The figure always has a height to fill: its
   column carries min-height on desktop and an aspect-ratio once stacked. */
.about__figure img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ============ Mirrored: image on the left ============ */
/* Visual order only — the DOM keeps the heading before the image, so screen
   readers and the stacked mobile layout both still lead with the copy. */
.about--media-left .about__media {
    order: -1;
}

.about--media-left .about__content {
    padding-right: 5.56vw;
    padding-left: 4vw;
}

/* the sweep comes from the other side */
@media (prefers-reduced-motion: no-preference) {

    .about--media-left.about--animated .about__figure {
        animation-name: about-sweep-left;
    }
}

@keyframes about-sweep-left {
    from { opacity: 0; transform: translateX(-3vw); }
}

/*=============================================
    MOTION
    Gated on .about--animated, which the widget's Animation control adds, and
    held at frame one by assets/css/reveal.css until scrolled into view.

    fill-mode is `backwards`, never `forwards`/`both`: every animation ends at
    the element's natural state, and a forwards fill would keep overriding it —
    which would break .about__btn:hover's translateY. Most keyframes declare
    `from` alone, so the end state is never hardcoded.
=============================================*/
@media (prefers-reduced-motion: no-preference) {

    .about--animated .about__eyebrow,
    .about--animated .about__title,
    .about--animated .about__text,
    .about--animated .about__item,
    .about--animated .about__actions {
        animation: about-rise .8s cubic-bezier(.22, 1, .36, 1) backwards;
    }

    .about--animated .about__eyebrow i {
        transform-origin: left center;
        animation: about-rule .7s cubic-bezier(.22, 1, .36, 1) .12s backwards;
    }

    .about--animated .about__eyebrow { animation-delay: .05s; }
    .about--animated .about__title   { animation-delay: .14s; }
    .about--animated .about__text    { animation-delay: .24s; }
    .about--animated .about__item:nth-child(1) { animation-delay: .34s; }
    .about--animated .about__item:nth-child(2) { animation-delay: .41s; }
    .about--animated .about__item:nth-child(3) { animation-delay: .48s; }
    .about--animated .about__item:nth-child(n+4) { animation-delay: .55s; }
    .about--animated .about__actions { animation-delay: .62s; }

    /* the photo sweeps in from the side it sits on */
    .about--animated .about__figure {
        animation: about-sweep 1s cubic-bezier(.22, 1, .36, 1) .1s backwards;
    }

}

@keyframes about-rise {
    from { opacity: 0; transform: translateY(1.4vw); }
}

@keyframes about-rule {
    from { opacity: 0; transform: scaleX(0); }
}

@keyframes about-sweep {
    from { opacity: 0; transform: translateX(3vw); }
}

/*=============================================
    Breakpoints
=============================================*/
@media (max-width: 1024px) {

    .about {
        grid-template-columns: 1fr;
    }

    .about__content {
        padding: 64px 24px 40px;
    }

    .about__eyebrow { gap: 8px; margin-bottom: 14px; }
    .about__eyebrow i { width: 24px; height: 2px; }
    .about__eyebrow span { font-size: 13px; }

    .about__title { font-size: clamp(34px, 6.5vw, 56px); margin-bottom: 16px; }
    .about__text { font-size: clamp(15px, 2.2vw, 17px); max-width: 60ch; margin-bottom: 26px; }

    .about__list { gap: 12px; margin-bottom: 28px; }
    .about__item { font-size: 16px; gap: 12px; }
    .about__item-icon { width: 16px; }
    .about__item-icon i { font-size: 15px; }

    .about__btn { font-size: 16px; padding: 16px 30px; border-radius: 6px; gap: 10px; }
    .about__btn svg { width: 16px; height: 16px; }

    /* stacked, so the photo no longer needs to fill a column's height */
    .about__media {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 767px) {

    .about__content { padding: 48px 18px 32px; }

    .about__media { aspect-ratio: 1 / 1; }
}

/*=============================================
    STYLE 2
    Centred header over two columns: a photo collage with a stat badge and a
    reviews card on one side, icon/title/text rows and a CTA on the other.

    The collage is a container: everything inside is sized in cqw, so the badge,
    the reviews card and their type all scale with the collage itself rather
    than with the viewport. That is what keeps it intact from 2560 down to 320
    without a single positional value being restated per breakpoint. Each cqw
    line is preceded by a px fallback for engines without container units.
=============================================*/
.about--style-2 .about {
    display: block;
    padding: 5.56vw 80px;
}

.about--style-2 .about__head {
    margin: 0 auto 4vw;
    text-align: center;
}

.about--style-2 .about__eyebrow {
    justify-content: center;
}

.about--style-2 .about__title {
    max-width: 44vw;
    margin-inline: auto;
    font-size: max(30px, 3.9vw);
    line-height: 1.05;
}

.about--style-2 .about__text {
    max-width: 46vw;
    margin-inline: auto;
}

.about--style-2 .about__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4vw;
}

/* .about--animated sits on the section, .about--style-2 on the wrapper around
   it, so these two never share an element — the selector has to descend */
@media (prefers-reduced-motion: no-preference) {

    .about--style-2 .about--animated .about__feature {
        animation: about-rise .8s cubic-bezier(.22, 1, .36, 1) backwards;
    }

    .about--style-2 .about--animated .about__feature:nth-child(1) { animation-delay: .34s; }
    .about--style-2 .about--animated .about__feature:nth-child(2) { animation-delay: .41s; }
    .about--style-2 .about--animated .about__feature:nth-child(3) { animation-delay: .48s; }
    .about--style-2 .about--animated .about__feature:nth-child(n+4) { animation-delay: .55s; }

    .about--style-2 .about--animated .about__collage {
        animation: about-sweep 1s cubic-bezier(.22, 1, .36, 1) .1s backwards;
    }
}

.about--style-2.about--media-right .about__collage {
    order: 2;
}

/* ---------- Collage ---------- */
.about__collage {
    position: relative;
    container-type: inline-size;
    aspect-ratio: var(--about-collage-ratio, 1.19);
}

.about__shot {
    position: absolute;
    overflow: hidden;
    border-radius: 3cqw;
}

.about__shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about__shot--a {
    top: 0;
    left: 0;
    width: 62%;
    height: 74%;
}
.about--style-3 .about__shot.about__shot--a {
    z-index: 9;
}
.about__shot--b {
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 62%;
    height: 50%;
    box-shadow: 0 2cqw 5cqw rgba(17, 24, 39, .18);
}

.about__badge {
    position: absolute;
    top: 9%;
    left: 55%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 27%;
    aspect-ratio: 1.12;
    padding: 2cqw;
    border-radius: 3cqw;
    background: var(--about-badge-bg, #1c3244);
    color: var(--about-badge-ink, #ffffff);
    text-align: center;
}

.about__badge-num {
    font-size: 28px;
    font-size: 7.6cqw;
    font-weight: 600;
    line-height: 1;
    font-family: var(--thm-heading-font);
}

.about__badge-label {
    margin-top: .8cqw;
    font-size: 11px;
    font-size: 2.5cqw;
    letter-spacing: .08em;
    line-height: 1.3;
    text-transform: uppercase;
    font-family: var(--thm-body-font);
}

.about__reviews {
    position: absolute;
    bottom: 2%;
    left: 6%;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 2.4cqw;
    width: 50%;
    padding: 2.4cqw 3cqw;
    border-radius: 20px;
    background: var(--about-reviews-bg, #ffffff);
    box-shadow: 0 2cqw 5cqw rgba(17, 24, 39, .16);
}

.about__reviews-logo {
    display: flex;
    flex: 0 0 auto;
    width: 24px;
    width: 7cqw;
}

.about__reviews-logo img,
.about__reviews-logo svg {
    display: block;
    width: 100%;
    height: auto;
}

.about__reviews-num {
    display: block;
    font-size: 16px;
    font-size: 4.4cqw;
    font-weight: 600;
    line-height: 1.1;
    color: var(--about-navy);
}

.about__reviews-label {
    display: block;
    font-size: 10px;
    font-size: 2.5cqw;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1.3;
    text-transform: uppercase;
    color: #737092;
}

/* ---------- Feature rows ---------- */
.about__features {
    display: flex;
    flex-direction: column;
    gap: 1.9vw;
    margin: 0 0 2.4vw;
    padding: 0;
    list-style: none;
}

.about__feature {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.1vw;
    row-gap: .55vw;
}

.about__feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(16px, 1.35vw);
    height: max(16px, 1.35vw);
    margin-top: .15em;
    color: var(--about-navy);
}

.about__feature-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about__feature-icon i {
    font-size: max(14px, 1.2vw);
    line-height: 1;
}

.about__feature-title {
    grid-column: 2;
    margin: 0;
    font-weight: 600;
    line-height: 1.3;
    color: var(--about-navy);
}

.about__feature-text {
    grid-column: 2;
    margin: 0;
    font-size: max(13px, 1.05vw);
    line-height: 1.6;
    color: var(--about-body);
}

/*=============================================
    STYLE 4
    The split of Style 1 with icon rows in the copy. NO SHAPE CSS, same as
    Style 1: the photo is placed plain and any curve comes composited into the
    artwork, so nothing here masks it a second time.
=============================================*/
.about--style-4 .about {
    --about-chip-tile: #efe6d2;
    display: grid;
    grid-template-columns: var(--about-split, 46%) 1fr;
    align-items: stretch;
}

.about--style-4 .about__content {
    padding: 6vw 3vw 9vw 5.56vw;
}

.about--style-4 .about__title {
    margin-bottom: 1.2vw;
    font-size: max(30px, 3.9vw);
    line-height: 1.04;
}

.about--style-4 .about__text {
    margin-bottom: 2.2vw;
    font-size: max(14px, 1.15vw);
}

.about__arc {
    position: relative;
    display: flex;
    align-self: stretch;
    min-height: var(--about-arc-h, 42vw);
}

/* flex rather than height:100% so the photo fills the column even when the
   copy beside it ends up taller */
.about__arc .about__figure {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    overflow: hidden;
}

/* ---------- Icon rows ---------- */
.about__rows {
    display: flex;
    flex-direction: column;
    gap: 1.8vw;
    margin: 0 0 2.2vw;
    padding: 0;
    list-style: none;
}

.about__row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 1vw;
    row-gap: .25vw;
}

.about__row-icon {
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(34px, 2.6vw);
    height: max(34px, 2.6vw);
    border-radius: 50%;
    background: var(--about-chip-tile);
    color: var(--about-navy);
}

.about__row-icon svg {
    width: 46%;
    height: 46%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about__row-icon i {
    font-size: max(13px, 1.1vw);
    line-height: 1;
}

.about--style-4 .about__feature-title {
    font-size: max(14px, 1.15vw);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.about--style-4 .about__feature-text {
    font-size: max(12px, .95vw);
    line-height: 1.5;
}

@media (prefers-reduced-motion: no-preference) {

    .about--style-4 .about--animated .about__row {
        animation: about-rise .8s cubic-bezier(.22, 1, .36, 1) backwards;
    }

    .about--style-4 .about--animated .about__row:nth-child(1) { animation-delay: .34s; }
    .about--style-4 .about--animated .about__row:nth-child(2) { animation-delay: .41s; }
    .about--style-4 .about--animated .about__row:nth-child(n+3) { animation-delay: .48s; }
}

@media (max-width: 1024px) {

    .about--style-4 .about {
        grid-template-columns: 1fr;
    }

    .about--style-4 .about__content {
        padding: 56px 24px 40px;
    }

    .about--style-4 .about__title {
        margin-bottom: 14px;
        font-size: clamp(30px, 5.5vw, 42px);
    }

    .about--style-4 .about__text {
        max-width: 60ch;
        margin-bottom: 26px;
        font-size: 17px;
    }

    .about__rows {
        gap: 18px;
        margin-bottom: 28px;
    }

    .about__row {
        column-gap: 14px;
        row-gap: 4px;
    }

    .about__row-icon {
        width: 42px;
        height: 42px;
    }

    .about--style-4 .about__feature-title {
        font-size: 16px;
    }

    .about--style-4 .about__feature-text {
        font-size: 15px;
    }

    /* stacked, so the photo no longer needs to fill a column's height */
    .about__arc {
        min-height: 0;
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 767px) {

    .about--style-4 .about__content {
        padding: 44px 20px 32px;
    }

    .about__arc {
        aspect-ratio: 1 / 1;
    }
}

/*=============================================
    STYLE 3
    Copy and a ruled list on one side, a collage with floating chips on the
    other. Shares the collage container from Style 2, so the chips are sized in
    cqw and hold their place at every width.
=============================================*/
.about--style-3 .about {
    display: block;
    padding: 5.56vw 80px;
}

.about--style-3 .about__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4vw;
}

.about--style-3 .about__head {
    margin: 0 0 2.2vw;
    text-align: left;
}

.about--style-3 .about__title {
    max-width: none;
    margin-inline: 0;
    font-size: max(30px, 3.6vw);
    line-height: 1.06;
}

.about--style-3 .about__text {
    max-width: 34vw;
    margin-inline: 0;
}

/* the ruled rows */
.about__rules {
    display: flex;
    flex-direction: column;
    gap: 20px 0;
    margin: 0 0 2.4vw;
    padding: 0;
    list-style: none;
}

.about__rule-item {
    padding-left: 1.1vw;
    border-left: max(2px, .17vw) solid var(--about-rule, #c9a961);
}

.about__rule-item .about__feature-title {
    margin-bottom: .3vw;
}

/* collage: the big photo sits top right, the second overlaps bottom left */
.about--style-3 .about__collage {
    aspect-ratio: var(--about-collage-ratio, .91);
}

.about--style-3 .about__shot--a {
    top: 0;
    right: 0;
    left: auto;
    width: 65%;
    height: 72%;
    box-shadow: 0 2cqw 5cqw rgba(17, 24, 39, .16);
}

.about--style-3 .about__shot--b {
    right: auto;
    bottom: 0;
    left: 0;
    width: 58%;
    height: 55%;
}

.about__chips {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    z-index: 9;
}

.about__chip {
        position: absolute;
    top: var(--chip-y, 50%);
    left: var(--chip-x, 20%);
    display: flex;
    align-items: center;
    gap: 2cqw;
    padding: 7px 15px;
    border-radius: 2cqw;
    background: var(--about-chip-bg, #ffffff);
    box-shadow: 0 1.6cqw 4cqw rgba(17, 24, 39, .16);
    white-space: nowrap;
    pointer-events: auto;
}

.about__chip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 20px;
    width: 6cqw;
    height: 20px;
    height: 6cqw;
    border-radius: 1.6cqw;
    background: var(--chip-bg, #f97316);
    color: #ffffff;
}

.about__chip-icon svg {
    width: 55%;
    height: 55%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.about__chip-icon i {
    font-size: 11px;
    font-size: 3cqw;
    line-height: 1;
}

.about__chip-text {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--about-navy);
}

/* The drawn arrangement. Wrapped in :where() so it carries no specificity at
   all — a per-chip Position or Icon Color from the panel then always wins,
   rather than tying with these and depending on stylesheet order. */
:where(.about__chip:nth-child(1)) { --chip-x: 25%; --chip-y: 27%; --chip-bg: #f97316; }
:where(.about__chip:nth-child(2)) { --chip-x: 4%;  --chip-y: 46%; --chip-bg: #0F2A44; }
:where(.about__chip:nth-child(3)) { --chip-x: 61%; --chip-y: 74%; --chip-bg: #10b981; }
:where(.about__chip:nth-child(n+4)) { --chip-x: 30%; --chip-y: 90%; --chip-bg: #6b7280; }

@media (prefers-reduced-motion: no-preference) {

    .about--style-3 .about--animated .about__rule-item {
        animation: about-rise .8s cubic-bezier(.22, 1, .36, 1) backwards;
    }

    .about--style-3 .about--animated .about__rule-item:nth-child(1) { animation-delay: .30s; }
    .about--style-3 .about--animated .about__rule-item:nth-child(2) { animation-delay: .36s; }
    .about--style-3 .about--animated .about__rule-item:nth-child(3) { animation-delay: .42s; }
    .about--style-3 .about--animated .about__rule-item:nth-child(4) { animation-delay: .48s; }
    .about--style-3 .about--animated .about__rule-item:nth-child(5) { animation-delay: .54s; }
    .about--style-3 .about--animated .about__rule-item:nth-child(n+6) { animation-delay: .60s; }

    .about--style-3 .about--animated .about__collage {
        animation: about-sweep 1s cubic-bezier(.22, 1, .36, 1) .1s backwards;
    }
}

@media (max-width: 1024px) {

    .about--style-2 .about,
    .about--style-3 .about {
        padding: 56px 32px;
    }

    .about--style-3 .about__cols {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .about--style-3 .about__head {
        margin-bottom: 20px;
    }

    .about--style-3 .about__title {
        font-size: clamp(30px, 5.5vw, 40px);
    }

    .about--style-3 .about__text {
        max-width: 60ch;
    }

    .about__rules {
        gap: 18px;
        margin-bottom: 28px;
    }

    .about__rule-item {
        padding-left: 14px;
    }

    .about__rule-item .about__feature-title {
        margin-bottom: 4px;
    }
}

@media (max-width: 767px) {

    .about--style-3 .about {
        padding: 40px 20px;
    }
}

@media (max-width: 1024px) {

    .about--style-2 .about {
        padding: 56px 32px;
    }

    .about--style-2 .about__head {
        margin-bottom: 32px;
    }

    .about--style-2 .about__title {
        max-width: none;
        font-size: clamp(30px, 5.5vw, 40px);
    }

    .about--style-2 .about__text {
        max-width: 60ch;
    }

    .about--style-2 .about__cols {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    /* the collage leads once stacked, whichever side it takes on desktop */
    .about--style-2.about--media-right .about__collage {
        order: 0;
    }

    .about__collage {
        width: min(560px, 100%);
        margin-inline: auto;
    }

    .about__features {
        gap: 22px;
        margin-bottom: 28px;
    }

    .about__feature {
        column-gap: 14px;
        row-gap: 6px;
    }

    .about__feature-icon {
        width: 20px;
        height: 20px;
    }

    .about__feature-title {
        font-size: 20px;
    }

    .about__feature-text {
        font-size: 16px;
    }
}

@media (max-width: 767px) {

    .about--style-2 .about {
        padding: 40px 20px;
    }
}

/*=============================================
    STYLE 5
    Dark field. Style 4's icon rows become tinted cards down the left, Style 3's
    chipped collage sits on the right. Both keep their markup, so the Row Icon
    and Chip controls carry over untouched — only the skin repaints them.
=============================================*/
.about--style-5 .about {
    --about-bg: #1b3245;
    --about-navy: #ffffff;
    --about-body: rgba(255, 255, 255, .66);
    --about-rowcard: rgba(255, 255, 255, .06);
    --about-rowline: rgba(255, 255, 255, .10);
    --about-chip-tile: rgba(9, 22, 33, .55);
    --about-chip-bg: #ffffff;
    display: block;
    padding: 5.2vw 5.56vw;
    /* the light lifts the middle-right, behind the collage */
    background-image: radial-gradient(70% 90% at 62% 46%, rgba(58, 104, 138, .45) 0%, rgba(27, 50, 69, 0) 68%);
}

/* same --about-split contract as Styles 1 and 4, so the Copy Column Width
   control reaches this skin too */
.about--style-5 .about__cols {
    display: grid;
    grid-template-columns: var(--about-split, 46%) 1fr;
    align-items: center;
    gap: 4vw;
}

.about--style-5 .about__head {
    margin: 0 0 2.2vw;
    text-align: left;
}

.about--style-5 .about__eyebrow span,
.about--style-5 .about__eyebrow i {
    color: var(--about-yellow);
}

.about--style-5 .about__eyebrow i {
    background: var(--about-yellow);
}

.about--style-5 .about__title {
    max-width: none;
    margin-inline: 0;
    font-size: max(30px, 3.9vw);
    line-height: 1.04;
}

.about--style-5 .about__text {
    max-width: 32vw;
    margin-inline: 0;
    font-size: max(14px, 1.1vw);
}

/* ---------- Row cards ---------- */
.about--style-5 .about__rows {
    gap: .95vw;
    margin-bottom: 2.4vw;
}

.about--style-5 .about__row {
        align-items: center;
    column-gap: 1vw;
    row-gap: .15vw;
    padding: 1.5vw 1.4vw;
    border: none;
    border-radius: .8vw;
    background: #1C3244;
}

/* the disc reads darker than the card it sits on, not lighter */
.about--style-5 .about__row-icon {
    align-self: center;
    width: max(28px, 2.1vw);
    height: max(28px, 2.1vw);
    background: var(--about-chip-tile);
    color: #ffffff;
}

/* Style 4 sets these uppercase; this design keeps them in title case */
.about--style-5 .about__feature-title {
    margin: 0;
    font-size: max(14px, 1.12vw);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #ffffff;
    margin-bottom: 10px;
}

.about--style-5 .about__feature-text {
    margin: 0;
    font-size: max(12px, .95vw);
    line-height: 1.5;
    color: var(--about-body);
}

/* ---------- Collage ---------- */
.about--style-5 .about__collage {
    aspect-ratio: var(--about-collage-ratio, 1.02);
}

.about--style-5 .about__shot {
    border-radius: 2.2cqw;
}

.about--style-5 .about__shot--a {
    top: 0;
    right: 0;
    left: auto;
    z-index: 1;
    width: 60%;
    height: 72%;
    box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .3);
}

/* the pale edge is what separates the two photos where they overlap */
.about--style-5 .about__shot--b {
    top: auto;
    right: auto;
    bottom: 3%;
    left: 95px;
    z-index: 3;
    width: 44%;
    height: 46%;
    border: max(3px, .3cqw) solid rgba(255, 255, 255, .9);
    box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .32);
}

/* Style 3 anchors a chip by its top-left corner, so a wide one at a high
   Horizontal Position walks off the right edge as its text grows. Here the
   offsets address the chip's centre instead: the position stays put whatever
   the label's length, and the Position sliders read the way they look. */
.about--style-5 .about__chip {
    max-width: 96%;
    padding: 6px 13px;
    border-radius: 1.6cqw;
    transform: translate(-50%, -50%);
    box-shadow: 0 1.4cqw 3.4cqw rgba(0, 0, 0, .28);
}

.about--style-5 .about__chip-text {
    font-size: 13px;
    color: #1b3245;
}

/* one chip in the drawn design, sat over the foot of the big photo. :where()
   keeps the specificity at zero so a per-chip Position still wins. */
:where(.about--style-5 .about__chip:nth-child(1)) { --chip-x: 74%; --chip-y: 66%; --chip-bg: #10b981; }
:where(.about--style-5 .about__chip:nth-child(2)) { --chip-x: 22%; --chip-y: 16%; --chip-bg: #2563eb; }
:where(.about--style-5 .about__chip:nth-child(n+3)) { --chip-x: 30%; --chip-y: 96%; --chip-bg: #f97316; }

@media (prefers-reduced-motion: no-preference) {

    .about--style-5 .about--animated .about__row {
        animation: about-rise .8s cubic-bezier(.22, 1, .36, 1) backwards;
    }

    .about--style-5 .about--animated .about__row:nth-child(1) { animation-delay: .34s; }
    .about--style-5 .about--animated .about__row:nth-child(2) { animation-delay: .41s; }
    .about--style-5 .about--animated .about__row:nth-child(n+3) { animation-delay: .48s; }

    .about--style-5 .about--animated .about__collage {
        animation: about-sweep 1s cubic-bezier(.22, 1, .36, 1) .1s backwards;
    }
}

@media (max-width: 1024px) {

    .about--style-5 .about {
        padding: 56px 32px;
    }

    .about--style-5 .about__cols {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .about--style-5 .about__head {
        margin-bottom: 24px;
    }

    .about--style-5 .about__title {
        font-size: clamp(30px, 5.5vw, 42px);
    }

    .about--style-5 .about__text {
        max-width: 60ch;
        font-size: 17px;
    }

    .about--style-5 .about__rows {
        gap: 12px;
        margin-bottom: 28px;
    }

    .about--style-5 .about__row {
        column-gap: 14px;
        row-gap: 3px;
        padding: 16px 18px;
        border-radius: 12px;
    }

    .about--style-5 .about__row-icon {
        width: 38px;
        height: 38px;
    }

    .about--style-5 .about__feature-title {
        font-size: 17px;
    }

    .about--style-5 .about__feature-text {
        font-size: 15px;
    }

    .about--style-5 .about__chip-text {
        font-size: 12px;
    }
}

/* Phone — the drawn mobile layout: the collage on top, then the copy, the rows
   and the CTA under it. Only Style 5 lifts the collage; the other skins keep
   their DOM order, so the reorder is scoped rather than put on .about__cols. */
@media (max-width: 767px) {

    .about--style-5 .about {
        /* landscape on a phone: at the desktop 1.02 the collage would take
           almost a full screen height before the heading is reached. Set as the
           variable so a Collage Ratio picked for Mobile still wins. */
        --about-collage-ratio: 1.3;
        padding: 40px 20px;
    }

    .about--style-5 .about__cols {
        gap: 26px;
    }

    /* the panel is first in the markup, which is the reading order a screen
       reader should keep — the photos are decorative and lead visually only */
    .about--style-5 .about__collage {
        order: -1;
    }

    /* the desktop offset is a fixed 95px — two thirds of the way across a phone,
       which throws the small photo off the right edge. On this width it sits in
       the left corner as drawn. */
    .about--style-5 .about__shot--b {
        left: 0;
        bottom: 0;
        width: 52%;
        height: 52%;
    }

    .about--style-5 .about__shot--a {
        width: 66%;
        height: 68%;
    }

    .about--style-5 .about__head {
        margin-bottom: 20px;
    }

    .about--style-5 .about__title {
        font-size: clamp(26px, 7.4vw, 32px);
    }

    .about--style-5 .about__text {
        font-size: 15px;
    }

    .about--style-5 .about__rows {
        gap: 6px;
        margin-bottom: 24px;
    }

    /* the card sits within a shade of the field it is on, so the padding is
       what separates one row from the next rather than an edge */
    .about--style-5 .about__row {
        column-gap: 12px;
        padding: 14px 16px;
        border-radius: 10px;
    }

    .about--style-5 .about__row-icon {
        width: 34px;
        height: 34px;
    }

    .about--style-5 .about__feature-title {
        margin-bottom: 6px;
        font-size: 15px;
    }

    .about--style-5 .about__feature-text {
        font-size: 13px;
    }

    /* a chip is sized in cqw against a collage now about a third of its desktop
       width; the label is the one part that does not shrink with it */
    .about--style-5 .about__chip {
        padding: 5px 10px;
        border-radius: 6px;
    }

    .about--style-5 .about__chip-text {
        font-size: 10px;
    }
}

/*=============================================
    STYLE 6
    Copy on one side; two overlapping circles and the stat badge on the other.
    The shots keep their % width but take aspect-ratio: 1 rather than a paired
    % height — the two percentages resolve against different axes of the
    collage, so a circle would only stay round at one container shape.
=============================================*/
.about--style-6 .about {
    --about-bg: #1b3245;
    --about-navy: #ffffff;
    --about-body: rgba(255, 255, 255, .74);
    --about-badge-bg: #16293a;
    --about-badge-ink: #ffffff;
    --about-shot-ring: #ffffff;
    display: block;
    padding: 5.2vw 5.56vw;
    background-image: radial-gradient(72% 88% at 74% 34%, rgba(62, 108, 142, .42) 0%, rgba(27, 50, 69, 0) 68%);
}

.about--style-6 .about__cols {
    display: grid;
    grid-template-columns: var(--about-split, 50%) 1fr;
    align-items: center;
    gap: 4vw;
}

.about--style-6 .about__head {
    margin: 0 0 2.4vw;
    text-align: left;
}

.about--style-6 .about__title {
    max-width: none;
    margin-inline: 0;
    font-size: max(30px, 3.6vw);
    line-height: 1.06;
}

.about--style-6 .about__text {
    max-width: 39vw;
    margin-inline: 0;
    font-size: max(14px, 1.15vw);
    line-height: 1.7;
}

/* ---------- Circle collage ---------- */
.about--style-6 .about__collage {
    aspect-ratio: var(--about-collage-ratio, .87);
}

.about--style-6 .about__shot {
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
}

.about--style-6 .about__shot--a {
    top: 0;
    right: 0;
    left: auto;
    z-index: 1;
    width: 77%;
}

/* the white ring is what separates the two circles where they overlap */
.about--style-6 .about__shot--b {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 3;
    width: 65%;
    border: max(4px, 1.4cqw) solid var(--about-shot-ring);
}

.about--style-6 .about__badge {
    top: auto;
    bottom: 34%;
    left: 51px;
    aspect-ratio: 1.07;
    border-radius: 2cqw;
}

@media (prefers-reduced-motion: no-preference) {

    .about--style-6 .about--animated .about__collage {
        animation: about-sweep 1s cubic-bezier(.22, 1, .36, 1) .1s backwards;
    }
}

@media (max-width: 1024px) {

    .about--style-6 .about {
        padding: 56px 32px;
    }

    .about--style-6 .about__cols {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .about--style-6 .about__head {
        margin-bottom: 24px;
    }

    .about--style-6 .about__title {
        font-size: clamp(30px, 5.5vw, 42px);
    }

    .about--style-6 .about__text {
        max-width: 60ch;
        font-size: 17px;
    }
}

/* Phone — the drawn mobile layout: the circles and the badge on top, then the
   eyebrow, the heading, the paragraph and the CTA under them. Scoped to Style 6
   rather than put on .about__cols, so the other skins keep their DOM order. */
@media (max-width: 767px) {

    .about--style-6 .about {
        /* the desktop .87 is a portrait box — on a phone it would push the
           heading most of a screen down. Set as the variable so a Collage Ratio
           picked for Mobile still wins. */
        --about-collage-ratio: .95;
        padding: 40px 20px;
    }

    .about--style-6 .about__cols {
        gap: 26px;
    }

    /* the panel is first in the markup, which is the reading order a screen
       reader should keep — the circles are decorative and lead visually only */
    .about--style-6 .about__collage {
        order: -1;
    }

    /* the desktop offset is a fixed 51px, a quarter of the way across a phone
       collage; a percentage keeps the badge on the left edge of the big circle
       the way it is drawn */
    .about--style-6 .about__badge {
        bottom: 16%;
        left: 10%;
        width: 34%;
        /* square rather than 1.07: the label needs the extra line of room once
           its type stops shrinking with the collage — see below */
        aspect-ratio: 1;
        /* 2cqw lands at under 5px here, so the type would sit on the edge */
        padding: 8px;
        border-radius: 10px;
    }

    /* Both are sized in cqw against a collage now about a third of its desktop
       width, which takes the number to 17px and the label under 6px. Floored at
       the smallest size either still reads at. */
    .about--style-6 .about__badge-num {
        font-size: max(18px, 7.6cqw);
    }

    .about--style-6 .about__badge-label {
        font-size: max(8px, 2.5cqw);
        letter-spacing: .06em;
    }

    .about--style-6 .about__head {
        margin-bottom: 22px;
    }

    .about--style-6 .about__title {
        font-size: clamp(26px, 7vw, 34px);
    }

    .about--style-6 .about__text {
        font-size: 15px;
    }
}

/*=============================================
    STYLE 7
    The ruled list of Style 3 beside a single plain photo. The photo is a
    direct grid child rather than sitting in .about__media, so Image Position
    moves it with `order` while the copy stays first in the DOM.
=============================================*/
.about--style-7 .about {
    --about-bg: #fdfbf5;
    --about-navy: #1c3244;
    --about-body: #5a6880;
    --about-rule: #c9a961;
    display: block;
    padding: 5.2vw 5.56vw;
}

.about--style-7 .about__cols {
    display: grid;
    grid-template-columns: var(--about-split, 46%) 1fr;
    align-items: center;
    gap: 4vw;
}

/* the control's default is Right, so this design wants it set to Left */
.about--style-7.about--media-left .about__figure {
    order: -1;
}

.about--style-7 .about__head {
    margin: 0 0 2vw;
    text-align: left;
}

.about--style-7 .about__title {
    max-width: none;
    margin-inline: 0;
    font-size: max(30px, 3.5vw);
    line-height: 1.06;
}

.about--style-7 .about__text {
    max-width: none;
    margin-inline: 0;
    margin-bottom: 0;
    font-size: max(14px, 1.15vw);
}

/* Style 1 stretches this to a full-height column and pins the image to all
   four edges. Here it is a plain framed box, so it needs a shape of its own. */
.about--style-7 .about__figure {
    position: relative;
    height: auto;
    min-height: 0;
    aspect-ratio: var(--about-fig-ratio, .88);
    overflow: hidden;
    border-radius: 1.2vw;
}

.about--style-7 .about__figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.about--style-7 .about__rules {
    gap: 1.4vw 0;
    margin: 2vw 0 2.2vw;
}

.about--style-7 .about__rule-item {
    padding-left: 1.1vw;
}

.about--style-7 .about__feature-title {
    margin-bottom: .35vw;
    font-size: max(13px, 1.15vw);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--about-navy);
}

.about--style-7 .about__feature-text {
    font-size: max(12px, .95vw);
    line-height: 1.5;
    color: var(--about-body);
}

@media (prefers-reduced-motion: no-preference) {

    .about--style-7 .about--animated .about__rule-item {
        animation: about-rise .8s cubic-bezier(.22, 1, .36, 1) backwards;
    }

    .about--style-7 .about--animated .about__rule-item:nth-child(1) { animation-delay: .32s; }
    .about--style-7 .about--animated .about__rule-item:nth-child(2) { animation-delay: .39s; }
    .about--style-7 .about--animated .about__rule-item:nth-child(n+3) { animation-delay: .46s; }

    .about--style-7 .about--animated .about__figure {
        animation: about-sweep 1s cubic-bezier(.22, 1, .36, 1) .1s backwards;
    }
}

@media (max-width: 1024px) {

    .about--style-7 .about {
        padding: 56px 32px;
    }

    .about--style-7 .about__cols {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    /* the copy leads once stacked, whichever side the photo takes on desktop */
    .about--style-7.about--media-left .about__figure {
        order: 0;
    }

    .about--style-7 .about__figure {
        border-radius: 16px;
    }

    .about--style-7 .about__head {
        margin-bottom: 20px;
    }

    .about--style-7 .about__title {
        font-size: clamp(30px, 5.5vw, 42px);
    }

    .about--style-7 .about__text {
        max-width: 60ch;
        font-size: 17px;
    }

    .about--style-7 .about__rules {
        gap: 18px 0;
        margin: 24px 0 26px;
    }

    .about--style-7 .about__rule-item {
        padding-left: 14px;
    }

    .about--style-7 .about__feature-title {
        margin-bottom: 4px;
        font-size: 16px;
    }

    .about--style-7 .about__feature-text {
        font-size: 15px;
    }
}

@media (max-width: 767px) {

    .about--style-7 .about {
        padding: 40px 20px;
    }
}

/*=============================================
    STYLE 8
    Style 6's dark field and white-framed photos, Style 3's collage
    arrangement, and a ticked list whose row title and copy share one line of
    flow instead of stacking.
=============================================*/
.about--style-8 .about {
    --about-bg: #1c3244;
    --about-navy: #ffffff;
    --about-body: rgba(255, 255, 255, .72);
    --about-shot-ring: #ffffff;
    display: block;
    padding: 5.2vw 5.56vw;
    background-image: radial-gradient(72% 88% at 74% 34%, rgba(62, 108, 142, .34) 0%, rgba(28, 50, 68, 0) 68%);
}

.about--style-8 .about__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4vw;
}

.about--style-8 .about__head {
    margin: 0 0 1.8vw;
    text-align: left;
}

.about--style-8 .about__eyebrow {
    color: var(--about-yellow);
}

.about--style-8 .about__title {
    max-width: none;
    margin-inline: 0;
    margin-bottom: 1.2vw;
    font-size: max(30px, 3.4vw);
    line-height: 1.04;
    color: var(--about-navy);
}

.about--style-8 .about__text {
    max-width: 32vw;
    margin-inline: 0;
    margin-bottom: 1.8vw;
    font-size: max(14px, 1.05vw);
}

/* ---- ticked rows ---- */
.about__ticks {
    display: flex;
    flex-direction: column;
    gap: 1.1vw;
    margin: 0 0 2.2vw;
    padding: 0;
    list-style: none;
}

.about__tick-item {
    display: flex;
    align-items: flex-start;
    gap: .8vw;
}

/* min-width:0 so a long unbroken word wraps rather than stretching the row */
.about__tick-copy {
    margin: 0;
    min-width: 0;
}

.about--style-8 .about__feature-icon {
    flex: 0 0 auto;
    width: max(14px, 1.05vw);
    height: max(14px, 1.05vw);
    margin-top: .3em;
    color: var(--about-yellow);
}

.about--style-8 .about__feature-icon svg {
    width: 100%;
    height: 100%;
}

/* Title and copy run on together, so both are inline and set at the same
   size — only the weight and the colour separate them. Everywhere else these
   two are a block <h3> over a block <p>, hence the display override. */
.about--style-8 .about__feature-title {
    display: inline;
    margin: 0;
    font-size: max(13px, .97vw);
    font-weight: 700;
    line-height: 1.55;
    color: var(--about-yellow);
}

.about--style-8 .about__feature-text {
    display: inline;
    margin: 0;
    font-size: max(13px, .97vw);
    line-height: 1.55;
    color: var(--about-body);
}

/* ---- collage: big photo top right, the second overlapping bottom left ---- */
.about--style-8 .about__collage {
    aspect-ratio: var(--about-collage-ratio, .95);
}

.about--style-8 .about__shot {
    border: max(4px, 1.2cqw) solid var(--about-shot-ring);
    border-radius: 3.4cqw;
    box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .28);
}

.about--style-8 .about__shot--a {
    top: 0;
    right: 0;
    left: auto;
    z-index: 2;
    width: 66%;
    height: 78%;
}

.about--style-8 .about__shot--b {
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 46%;
    height: 58%;
}

/* The drawn arrangement, same pattern as Style 5's. These are centre points,
   not corners — see the transform above. The first chip's centre sits on the
   bottom edge of the big photo, which ends at 78% of the collage, so the pill
   straddles it half and half. 70% across keeps its right edge inside the
   collage at every width.

   These override the generic arrangement further up rather than a var()
   fallback — that block sets --chip-x/--chip-y on every chip, so a fallback
   here could never fire. :where() keeps the specificity at zero, so it is
   source order that beats the generic rules and any per-chip Position from
   the panel still wins outright. */
:where(.about--style-8 .about__chip:nth-child(1))   { --chip-x: 70%; --chip-y: 78%; --chip-bg: #10b981; }
:where(.about--style-8 .about__chip:nth-child(2))   { --chip-x: 22%; --chip-y: 14%; --chip-bg: #2563eb; }
:where(.about--style-8 .about__chip:nth-child(n+3)) { --chip-x: 30%; --chip-y: 96%; --chip-bg: #f97316; }

/* Anchored by its centre and capped against the collage, the way Style 5 does
   it. Both parts matter for narrow screens: the base rule anchors by the
   top-left corner and is `white-space: nowrap`, so the pill could not shrink
   and simply grew off the right of the collage — and because nothing here
   clips overflow, that took the whole page into horizontal scroll. Wrapping
   is allowed for the same reason: a nowrap box cannot honour max-width, its
   text just spills out of it. */
.about--style-8 .about__chip {
    max-width: 92%;
    padding: 6px 13px;
    transform: translate(-50%, -50%);
    white-space: normal;
    box-shadow: 0 1.4cqw 3.4cqw rgba(0, 0, 0, .28);
}

/* --about-navy is white on this field, and the chip is a white pill — it
   needs the dark ink back or the label disappears into it */
.about--style-8 .about__chip-text {
    font-size: 13px;
    color: #16293a;
}

@media (max-width: 1024px) {

    .about--style-8 .about {
        padding: 56px 32px;
    }

    .about--style-8 .about__cols {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .about--style-8 .about__title {
        font-size: 36px;
        margin-bottom: 14px;
    }

    .about--style-8 .about__text {
        max-width: none;
        margin-bottom: 24px;
        font-size: 16px;
    }

    .about__ticks {
        gap: 14px;
        margin-bottom: 26px;
    }

    .about__tick-item {
        gap: 10px;
    }

    .about--style-8 .about__feature-icon {
        width: 18px;
        height: 18px;
    }

    .about--style-8 .about__feature-title,
    .about--style-8 .about__feature-text {
        font-size: 15px;
    }

    .about--style-8 .about__chip {
        padding: 5px 11px;
    }

    .about--style-8 .about__chip-text {
        font-size: 12px;
    }
}

@media (max-width: 767px) {

    .about--style-8 .about {
        padding: 40px 20px;
    }

    /* The collage is at its narrowest here and the pill at its widest relative
       to it, so it comes in off the edge and its centre moves to the middle of
       the photo. Left where it was, the half hanging past 100% is what put a
       phone into horizontal scroll. */
    :where(.about--style-8 .about__chip:nth-child(1)) {
        --chip-x: 56%;
        --chip-y: 80%;
    }

    .about--style-8 .about__chip {
        max-width: 88%;
        padding: 5px 10px;
    }

    .about--style-8 .about__chip-text {
        font-size: 11px;
    }
}

/*=============================================
    STYLE 9
    Style 8's dark field and ticked list beside a single arch-topped photo,
    a faint ring drawn behind it and a small card overlapping its foot.

    No collage: .about__arch is the photo's own box and carries container-type,
    so the ring, the card and the card's type are all placed and sized against
    the photo rather than the viewport. That is what keeps the arrangement
    intact from 2560 down to 320, and what makes Photo Width move the whole
    group together. Each cqw line is preceded by a px fallback for engines
    without container units.
=============================================*/
.about--style-9 .about {
    --about-bg: #142433;
    --about-navy: #ffffff;
    --about-body: rgba(255, 255, 255, .70);
    --about-ring: rgba(255, 255, 255, .08);
    --about-note-bg: #e7d9be;
    --about-note-ink: #1c3244;
    display: block;
    padding: 5.2vw 5.56vw;
    background-image: radial-gradient(62% 82% at 76% 40%, rgba(58, 104, 138, .30) 0%, rgba(20, 36, 51, 0) 70%);
}

/* same --about-split contract as Styles 1, 4, 5 and 7, so the Copy Column
   Width control reaches this skin too */
.about--style-9 .about__cols {
    display: grid;
    grid-template-columns: var(--about-split, 48%) 1fr;
    align-items: center;
    gap: 4vw;
}

/* Visual order only - the copy stays first in the DOM, so screen readers and
   the stacked layout both still lead with the heading */
.about--style-9.about--media-left .about__arch {
    order: -1;
}

.about--style-9 .about__head {
    margin: 0 0 1.8vw;
    text-align: left;
}

.about--style-9 .about__eyebrow {
    color: var(--about-yellow);
}

.about--style-9 .about__title {
    max-width: none;
    margin-inline: 0;
    margin-bottom: 1.2vw;
    font-size: max(30px, 3.4vw);
    line-height: 1.04;
    color: var(--about-navy);
}

.about--style-9 .about__text {
    max-width: 32vw;
    margin-inline: 0;
    margin-bottom: 1.8vw;
    font-size: max(14px, 1.05vw);
}

/* ---- ticked rows: Style 8's list, repainted ---- */
.about--style-9 .about__feature-icon {
    flex: 0 0 auto;
    width: max(14px, 1.05vw);
    height: max(14px, 1.05vw);
    margin-top: .3em;
    color: var(--about-yellow);
}

.about--style-9 .about__feature-icon svg {
    width: 100%;
    height: 100%;
}

/* Title and copy run on together, so both are inline and set at the same
   size - only the weight and the colour separate them. Everywhere outside the
   ticked lists these two are a block <h3> over a block <p>, hence the display
   override. */
.about--style-9 .about__feature-title {
    display: inline;
    margin: 0;
    font-size: max(13px, .97vw);
    font-weight: 700;
    line-height: 1.55;
    color: var(--about-yellow);
}

.about--style-9 .about__feature-text {
    display: inline;
    margin: 0;
    font-size: max(13px, .97vw);
    line-height: 1.55;
    color: var(--about-body);
}

/* ---- arch photo, ring and note card ---- */
/* The container is the photo's own box, not the grid cell: the ring and the
   card are then placed in per cent of the photo they belong to, and cqw reads
   as a per cent of it too, so both hold their place when Photo Width moves. It
   takes the outer edge of its column, away from the copy. */
.about__arch {
    position: relative;
    container-type: inline-size;
    width: var(--about-arch-w, 78%);
    margin-left: auto;
}

/* the ring is drawn, never fetched: a circle wider than the photo it is
   centred on, clipped by nothing and hit-testing nothing */
.about--style-9 .about__arch::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 132%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 1px solid var(--about-ring);
    border-radius: 50%;
    pointer-events: none;
}

/* Style 1 stretches .about__figure to a full-height column and pins the image
   to all four edges. Here it fills the arch box, which carries the shape's
   size: the ratio comes from the same Collage Ratio control the other skins
   use.

   The dome is one border-radius with two radii per corner - 50% across, the
   Arch Depth down - so the curve stays elliptical whatever the photo's ratio
   rather than turning into a half-circle at one shape only. */
.about--style-9 .about__figure {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: var(--about-collage-ratio, .76);
    overflow: hidden;
    border-radius: 50% 50% 1.4cqw 1.4cqw / var(--about-arch-y, 34%) var(--about-arch-y, 34%) 1.4cqw 1.4cqw;
}

.about--style-9 .about__figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Anchored by its own corner rather than its centre: it is a card sitting at
   the foot of the photo, not a chip floating over it, so the sliders read as
   an inset from the photo's left and bottom edges. The negative default is
   what hangs it past the edge, the way the design has it. */
.about--style-9 .about__note {
    position: absolute;
    bottom: var(--about-note-y, 12%);
    left: var(--about-note-x, -11%);
    z-index: 2;
    width: var(--about-note-w, 48%);
    padding: 14px;
    padding: 32px 70px;
    border-radius: 6px;
    border-radius: 1.4cqw;
    background: var(--about-note-bg);
    color: var(--about-note-ink);
    box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, .30);
    text-align: center;
}

.about--style-9 .about__note-title {
    display: block;
    margin-bottom: 6px;
    margin-bottom: 1.6cqw;
    font-size: 18px;
    font-size: 5.2cqw;
    font-weight: 500;
    line-height: 1.15;
    color: inherit;
}

.about--style-9 .about__note-text {
    display: block;
    font-size: 12px;
    font-size: 3.1cqw;
    font-weight: 700;
    line-height: 1.35;
    color: inherit;
}

/* Mirrored: the photo takes the outer edge of its column whichever side that
   is, so the ring trails away from the copy and the card still overlaps the
   photo's inner edge - the one facing the text. */
.about--style-9.about--media-left .about__arch {
    margin-left: 0;
    margin-right: auto;
}

.about--style-9.about--media-left .about__note {
    left: auto;
    right: var(--about-note-x, -11%);
}

@media (prefers-reduced-motion: no-preference) {

    .about--style-9 .about--animated .about__tick-item {
        animation: about-rise .8s cubic-bezier(.22, 1, .36, 1) backwards;
    }

    .about--style-9 .about--animated .about__tick-item:nth-child(1) { animation-delay: .32s; }
    .about--style-9 .about--animated .about__tick-item:nth-child(2) { animation-delay: .39s; }
    .about--style-9 .about--animated .about__tick-item:nth-child(n+3) { animation-delay: .46s; }

    .about--style-9 .about--animated .about__figure {
        animation: about-sweep 1s cubic-bezier(.22, 1, .36, 1) .1s backwards;
    }

    .about--style-9 .about--animated .about__note {
        animation: about-rise .8s cubic-bezier(.22, 1, .36, 1) .5s backwards;
    }
}

@media (max-width: 1024px) {

    .about--style-9 .about {
        padding: 56px 32px;
    }

    .about--style-9 .about__cols {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    /* the copy leads once stacked, whichever side the photo takes on desktop */
    .about--style-9.about--media-left .about__arch {
        order: 0;
        margin-left: auto;
    }

    /* stacked, the column runs the full width of the section - left at 78% of
       that the photo would read as a billboard, so it is capped and centred */
    .about__arch {
        width: min(420px, 76%);
        margin-inline: auto;
    }

    /* the card back on the left from both desktop arrangements, so the stacked
       layout reads the same either way */
    .about--style-9.about--media-left .about__note {
        right: auto;
        left: var(--about-note-x, -11%);
    }

    .about--style-9 .about__title {
        margin-bottom: 14px;
        font-size: 36px;
    }

    .about--style-9 .about__text {
        max-width: none;
        margin-bottom: 24px;
        font-size: 16px;
    }

    .about--style-9 .about__feature-icon {
        width: 18px;
        height: 18px;
    }

    .about--style-9 .about__feature-title,
    .about--style-9 .about__feature-text {
        font-size: 15px;
    }
}

@media (max-width: 767px) {

    .about--style-9 .about {
        padding: 40px 20px;
    }

    /* The photo is at its narrowest here and the section's padding at its
       thinnest, so the overhang - a per cent of the photo everywhere else -
       comes back in rather than sitting out on that padding. */
    .about--style-9 .about__note {
        left: var(--about-note-x, -4%);
    }

    .about--style-9.about--media-left .about__note {
        left: auto;
        right: var(--about-note-x, -4%);
    }
}