/* 05-theme.css - the theme layer: blooms, washes, arches, icons, tiles.
   Linked after 04-public.css, so it overrides 02 to 04 by order and those
   files stay unedited. Motion is in 06. Tokens from 01 only; no image
   references, filter, fixed or sticky position. Budget 4,000 B brotli. */

/* BLOOMS. A petal drawn inline in a section that clips it: .has-bloom clips
   and isolates, the art sits absolute at z-index -1, and its width is a
   min() of vw and rem so 200% text cannot widen the page. */

.has-bloom {
    position: relative;
    overflow: hidden;
    overflow: clip;
    isolation: isolate;
}

.bloom {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    width: min(38vw, 30rem);
    max-width: 100%;
    color: var(--sage-soft);
    opacity: 0.55;
}

.bloom svg {
    width: 100%;
    height: auto;
    display: block;
}

.bloom--top-right {
    top: -12%;
    right: -8%;
}

.bloom--top-left {
    top: -12%;
    left: -8%;
}

.bloom--bottom-right {
    bottom: -14%;
    right: -10%;
}

.bloom--bottom-left {
    bottom: -14%;
    left: -10%;
}

.bloom--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bloom--top-right svg,
.bloom--bottom-left svg {
    transform: rotate(22deg);
}

.bloom--top-left svg,
.bloom--bottom-right svg {
    transform: rotate(-22deg);
}

.bloom--scatter {
    width: min(60vw, 40rem);
}

.bloom--scatter svg {
    transform: none;
}

.bloom--violet {
    color: var(--violet-soft);
}

.bloom--deep {
    color: var(--ink-on-deep);
    opacity: 0.09;
}

.bloom--teal {
    color: var(--teal);
    opacity: 0.35;
}

/* WASHES. Radial tints of existing tokens over --bg, peaks 26% sage-soft,
   18% violet-soft, 10% teal at most (every ink clears AA at every peak). Two
   layers via custom properties so modifiers combine; no color-mix keeps
   plain --bg. Never on a --bg-sage band. */

.wash {
    background-color: var(--bg);
    background-image: var(--wash-a, none), var(--wash-b, none);
}

.wash--sage-bl {
    --wash-a: radial-gradient(52rem 52rem at 8% 100%, color-mix(in srgb, var(--sage-soft) 26%, transparent), transparent 70%);
}

.wash--sage-br {
    --wash-a: radial-gradient(52rem 52rem at 92% 100%, color-mix(in srgb, var(--sage-soft) 26%, transparent), transparent 70%);
}

.wash--violet-tr {
    --wash-b: radial-gradient(60rem 42rem at 92% 30%, color-mix(in srgb, var(--violet-soft) 18%, transparent), transparent 70%);
}

.wash--teal-tr {
    --wash-b: radial-gradient(60rem 42rem at 92% 20%, color-mix(in srgb, var(--teal) 10%, transparent), transparent 70%);
}

/* ARCHES. A photograph as a petal bud by border-radius alone: the box
   Picture reserves is unchanged, nothing is requested. Wide 5:4 on the
   office frames, tall 4:5 on the portrait. The offset block hangs off the
   photo box; the shape's bottom margin reserves the drop. One per screen. */

.arch {
    --arch-r: 50% 50% var(--radius-card) var(--radius-card) / 42% 42% var(--radius-card) var(--radius-card);
    display: grid;
    margin: 0;
}

.arch--tall {
    --arch-r: 50% 50% 12px 12px / 36% 36% 12px 12px;
}

.arch__shape,
.arch > picture {
    grid-area: 1 / 1;
    position: relative;
    isolation: isolate;
}

.arch__shape {
    margin-bottom: 12px;
}

.arch img {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: 50% 58%;
    border-radius: var(--arch-r);
}

.arch--tall img {
    aspect-ratio: 4 / 5;
}

.arch__shape::before,
.arch > picture::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--arch-r);
    transform: translate(-12px, 12px);
    background-color: var(--bg-sage);
}

.arch--violet .arch__shape::before,
.arch--violet > picture::before {
    background-color: color-mix(in srgb, var(--violet-soft) 30%, var(--bg-raised));
}

.arch__chip picture::before {
    content: none;
}

.arch__caption {
    position: relative;
    z-index: 1;
    margin-top: var(--space-3);
    font-size: var(--fs-small);
    color: var(--ink-muted);
    max-width: 46ch;
}

/* THE CHIP. A 56px tall-arch portrait and two lines, all one link; the one
   shadow besides the call bar, because it floats. In flow on a phone; from
   860px it shares the photo's cell and hangs 2rem off its bottom left, 8px
   past the reserved drop. */

.arch__chip {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-3);
    background-color: var(--bg-raised);
    border: 1px solid var(--rule);
    border-radius: var(--radius-card);
    box-shadow: 0 8px 24px rgba(22, 48, 60, 0.12);
    color: inherit;
    text-decoration: none;
}

.arch__chip:hover {
    transform: translateY(-2px);
    border-color: var(--rule-strong);
}

.arch__chip-portrait {
    width: 56px;
    flex: none;
}

.arch__chip-text {
    display: grid;
    gap: 2px;
    font-size: var(--fs-small);
    line-height: 1.35;
}

.arch__chip-text strong {
    color: var(--ink-strong);
}

.arch__chip-text span {
    color: var(--ink-muted);
}

@media (min-width: 860px) {
    .arch__shape::before,
    .arch > picture::before {
        transform: translate(-24px, 24px);
    }

    .arch__shape {
        margin-bottom: 24px;
    }

    .arch__chip {
        grid-area: 1 / 1;
        align-self: end;
        justify-self: start;
        z-index: 1;
        margin: 0 0 -8px -1.5rem;
    }

    .arch__chip + .arch__caption {
        margin-top: calc(var(--space-2) + var(--space-4));
    }
}

/* PETAL MARKERS. The logo's petal at reading size in pure CSS: a square with
   one rounded corner turned 45 degrees, before every eyebrow, audience and
   recognize item. The strapline is the eyebrow in the logo's three colors;
   --violet on untinted ground only. */

.eyebrow::before,
.audience li::before,
.recognize-list li::before {
    content: "";
    flex: none;
    width: 0.55em;
    height: 0.55em;
    border-radius: 100% 0;
    transform: rotate(45deg);
    background-color: var(--sage);
}

.eyebrow::before {
    display: inline-block;
    margin-right: 0.5em;
    vertical-align: 0.05em;
}

.section--deep .eyebrow::before,
.cta-band--deep .eyebrow::before {
    background-color: var(--ink-on-deep);
}

.strapline__1 {
    color: var(--teal-text);
}

.strapline__2 {
    color: var(--sage-text);
}

.strapline__3 {
    color: var(--violet);
}

/* ICONS. 1.25em beside text, 24px in a 48x60 arch tile, 28px in the 64x80
   hero tile, seated low so the glyph sits in the bud. Tile ground:
   --bg-sage on light bands, --bg-raised on sage ones, so --teal always
   clears 3:1; inside a card always sage. */

.icon {
    display: inline-block;
    vertical-align: middle;
    flex: none;
}

.icon--inline {
    width: 1.25em;
    height: 1.25em;
}

.icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 48px;
    height: 60px;
    padding-top: 10px;
    border-radius: 50% 50% 8px 8px / 40% 40% 8px 8px;
    background-color: var(--bg-sage);
    color: var(--teal);
}

.icon--tile,
.icon-tile .icon {
    width: 24px;
    height: 24px;
}

.icon-tile--lg {
    width: 64px;
    height: 80px;
}

.icon-tile--lg .icon {
    width: 28px;
    height: 28px;
}

.section--sage .icon-tile,
.insurer-strip .icon-tile,
.cta-band .icon-tile {
    background-color: var(--bg-raised);
}

.card .icon-tile {
    background-color: var(--bg-sage);
}

.card--link:hover .icon-tile {
    background-color: color-mix(in srgb, var(--sage-soft) 40%, var(--bg-raised));
}

/* PROOF ROW. Short facts with icons under the hero. */

.proof-row {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-5);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--ink-strong);
}

.proof-row li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    max-width: none;
}

.proof-row .icon {
    color: var(--teal);
    margin-top: 0.2em;
}

.proof-row a {
    color: inherit;
    text-decoration: underline;
}

/* FEATURE CARDS. An icon tile above the title. The icon grid is two across
   from 480px to 03's four columns at 1120px; tighter padding and a 40x50
   tile under 860px. */

.card--feature .card__icon {
    margin-bottom: var(--space-4);
}

@media (min-width: 480px) and (max-width: 1119.98px) {
    .card-grid--icons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 859.98px) {
    .card-grid--icons {
        gap: var(--space-4);
    }

    .card-grid--icons .card {
        padding: var(--space-4);
    }

    .card-grid--icons .icon-tile {
        width: 40px;
        height: 50px;
        padding-top: 8px;
    }

    .card-grid--icons .icon-tile .icon {
        width: 20px;
        height: 20px;
    }
}

/* SMALL LISTS. .chips the credentials; .audience who-this-is-for;
   .recognize-list fragments inside prose (beats .prose ul); .programs the
   four linked names with icons. */

.chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.chip {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    background-color: var(--bg-raised);
    font-size: var(--fs-small);
    color: var(--ink-strong);
}

.audience {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin-bottom: var(--space-6);
    font-weight: 500;
}

.prose .recognize-list,
.recognize-list {
    list-style: none;
    padding-left: 0;
    max-width: var(--measure);
}

.recognize-list li + li {
    margin-top: var(--space-2);
}

.audience li,
.recognize-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    max-width: none;
}

.audience li::before,
.recognize-list li::before {
    margin-top: 0.5em;
}

.programs {
    list-style: none;
    display: grid;
    gap: var(--space-1) var(--space-5);
}

.programs li {
    max-width: none;
}

.programs a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-2);
    font-weight: 500;
}

.programs .icon {
    color: var(--teal);
}

.programs__title {
    margin-top: var(--space-6);
}

@media (min-width: 560px) {
    .programs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* TIMELINE. The existing .steps, markers as arch tiles on one line (the
   ol's ::before): down the left on a phone, through the three markers from
   860px, with a transform-origin so 06 can draw it. The numeral is still a
   counter; the order is in the markup. */

.steps--timeline {
    position: relative;
    isolation: isolate;
}

.steps--timeline::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(1.25rem - 1px);
    top: 1.5rem;
    bottom: 1.5rem;
    width: 2px;
    background-color: var(--rule-strong);
    transform-origin: top;
}

.steps--timeline li {
    position: relative;
    padding-left: 3.5rem;
}

.steps--timeline li::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 2.5rem;
    height: 3rem;
    margin: 0;
    padding-bottom: 0.5rem;
    align-items: flex-end;
    border-radius: 50% 50% 8px 8px / 40% 40% 8px 8px;
    background-color: var(--bg-sage);
}

.section--sage .steps--timeline li::before {
    background-color: var(--bg-raised);
}

.steps__icon {
    color: var(--teal);
    margin-right: var(--space-2);
    vertical-align: -0.15em;
}

@media (min-width: 860px) {
    .steps--timeline::before {
        left: 1.25rem;
        right: calc((100% - var(--gutter) * 2) / 3 - 1.25rem);
        top: calc(1.5rem - 1px);
        bottom: auto;
        width: auto;
        height: 2px;
        transform-origin: left;
    }

    .steps--timeline li {
        padding-left: 0;
    }

    .steps--timeline li::before {
        position: static;
        margin-bottom: var(--space-4);
    }
}

/* EDITORIAL GRID. From 860px, rows of one wide 7-column 3:2 tile beside one
   square 5-column tile, sides alternating. Corners stay 12px: a gallery of
   arches is a church. */

@media (min-width: 860px) {
    .editorial-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: start;
    }

    .editorial-grid > :nth-child(4n+1),
    .editorial-grid > :nth-child(4n+4) {
        grid-column: span 7;
    }

    .editorial-grid > :nth-child(4n+2),
    .editorial-grid > :nth-child(4n+3) {
        grid-column: span 5;
    }

    .editorial-grid > :nth-child(4n+2) img,
    .editorial-grid > :nth-child(4n+3) img {
        aspect-ratio: 1 / 1;
    }
}

.photo-grid a {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-card);
}

.photo-grid a:hover figcaption {
    text-decoration: underline;
}

/* INSURER TILES. From 860px the strip's flat markup becomes a 5/7 grid: the
   marks span every row on the right as tiles, scaled by max-height so the
   widest wordmark still fits. Below 860px nothing here applies. */

.insurer-strip__caveat {
    margin-top: var(--space-4);
    font-size: var(--fs-small);
    color: var(--ink-muted);
}

.insurer-strip__icon {
    margin-bottom: var(--space-4);
}

@media (min-width: 860px) {
    .insurer-strip--tiles .insurer-strip__inner {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        grid-template-rows: repeat(5, auto) 1fr;
        column-gap: var(--space-7);
        align-items: start;
    }

    .insurer-strip--tiles .insurer-strip__inner > * {
        grid-column: 1;
    }

    .insurer-strip--tiles .insurer-logos--tiles {
        grid-column: 2;
        grid-row: 1 / -1;
        margin-top: 0;
    }

    .insurer-logos--tiles {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
    }

    .insurer-logos--tiles li {
        justify-content: center;
        min-height: 88px;
        padding: var(--space-4);
        background-color: var(--bg-raised);
        border: 1px solid var(--rule);
        border-radius: var(--radius-card);
    }

    .insurer-logos--tiles img {
        height: auto;
        min-height: 0;
        max-height: 2.5rem;
        width: auto;
        max-width: 100%;
    }
}

/* SMALL PIECES. The FAQ marker with empty alternative text (no "plus" read
   out); the foot link under a band; the serving band's lists; a source
   line; the footer's strapline, two-column list, brand column (holds a
   bloom) and no-tracking note. */

.faq__question::after {
    content: "+" / "";
}

.faq__item[open] > .faq__question::after {
    content: "-" / "";
}

.section-foot {
    margin-top: var(--space-5);
}

.serving__towns {
    list-style: none;
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.serving__facts {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.serving__facts,
.serving__facts address {
    font-style: normal;
}

.serving__towns li,
.serving__facts > * {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    max-width: none;
}

.serving__towns .icon,
.serving__facts .icon {
    color: var(--teal);
    margin-top: 0.2em;
}

.source-line {
    font-size: var(--fs-small);
    color: var(--ink-muted);
}

.site-footer__strapline {
    margin-block: var(--space-2) var(--space-3);
    font-size: var(--fs-small);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-on-deep);
}

.site-footer__brand-col {
    position: relative;
    overflow: clip;
    isolation: isolate;
    /* 4px out, 4px back: layout unchanged, the clip edge clears a focus ring. */
    padding: 4px;
    margin: -4px;
}

.site-footer__brand-col .bloom {
    opacity: 0.06;
}

.site-footer__note {
    margin-block: var(--space-3);
    font-size: var(--fs-small);
    max-width: 78ch;
}

@media (min-width: 560px) {
    .site-footer__nav--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* FIX PASS (findings BC-31): .prose ol beat .steps (a typed numeral beside
   each marker); the quiet link's chevron follows a wrapped last word; under
   860px focus scrolls clear of the call bar. */

.prose .steps {
    list-style: none;
    padding-left: 0;
}

.prose .steps li + li {
    margin-top: 0;
}

.btn-quiet {
    display: inline-block;
}

.btn-quiet::after {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.4em;
}

@media (max-width: 859.98px) {
    html {
        scroll-padding-bottom: var(--call-bar-height);
    }
}