/* ============================================================
   BRANCH AREA GUIDE

   Follows the conventions in branch.css:
     - same --c-* / --space-* / --card-* token names
     - cards are white + --card-radius + --card-shadow, no border
     - no font-family declarations; type is inherited from the site

   Loaded after branch.css, which already supplies .branch-hero__bg
   and the .accordion component.
   ============================================================ */

:root {
    /* Identical to the block in branch.css. Worth lifting both into a
       shared _tokens.css rather than declaring twice. */
    --c-white: #ffffff;
    --c-surface: #f8fafc;
    --c-border: #e5e7eb;
    --c-text-primary: #111827;
    --c-text-body: #374151;
    --c-text-muted: #6b7280;
    --c-brand: #0071E4;
    --c-brand-dark: #005bb5;
    --c-highlight-bg: #eef5fd;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --card-radius: 0.625rem;
    --card-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 2px 12px rgba(0,0,0,0.05);
    --card-padding: var(--space-lg);
    /* Additions for this page, all from the main.css palette so
       nothing new enters the brand. */
    --c-navy: #003366; /* blue-200  */
    --c-navy-dark: #01274e; /* blue-300  */
    --c-yellow: #ffe019; /* yellow    */
    --c-green: #5a9e2d; /* green     */
    --c-gray-150: #f2f2f2;
    --c-gray-200: #e2e2e4;
}

.area-guide-body {
    background: linear-gradient(to bottom, #f0f4f8 0%, #ddeaf8 40%, #c2d8f2 100%) !important;
}
/* ============================================================
   Layout primitives
   ============================================================ */
.ag-shell {
    width: 100%;
    max-width: 1344px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.ag-section {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.ag-section--tight {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

.ag-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
}

.ag-section__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-text-primary);
    letter-spacing: -0.5px;
}

.ag-rule {
    border: 0;
    border-top: 1px solid var(--c-border);
    margin: 0;
}

.ag-link-more {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-brand);
    text-decoration: none;
    white-space: nowrap;
}

    .ag-link-more:hover {
        color: var(--c-brand-dark);
        text-decoration: underline;
    }

    .ag-link-more::after {
        content: " \2192";
    }

.ag-align-end {
    text-align: right;
    margin-top: var(--space-sm);
}

.ag-align-end--spaced {
    margin-top: var(--space-lg);
}

/* ============================================================
   Buttons - mirrors .btn / .btn--yellow / .btn--white in main.css
   ============================================================ */

.ag-btn {
    display: inline-block;
    padding: 1rem;
    border-radius: 0.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-color: var(--c-brand);
    color: var(--c-white);
    transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

    .ag-btn:hover:not(:disabled),
    .ag-btn:focus:not(:disabled) {
        text-decoration: none;
        background-color: var(--c-green);
        color: var(--c-white);
        outline: 2px solid transparent;
        outline-offset: 2px;
    }

.ag-btn--gold {
    background-color: var(--c-yellow);
    color: var(--c-navy);
}

.ag-btn--white {
    background-color: var(--c-white);
    color: var(--c-navy);
}

.ag-btn--navy {
    background-color: var(--c-navy);
    color: var(--c-white);
}

.ag-btn--block {
    display: block;
    width: 100%;
}

/* ============================================================
   Flexible grid

   auto-fill rather than auto-fit, so three cards stay card-sized
   instead of stretching across the row and a wrapped single item
   does not go full width. min() stops an oversized card forcing a
   horizontal scrollbar.
   ============================================================ */

.ag-grid {
    display: grid;
    gap: var(--grid-gap, var(--space-sm));
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 180px), 100%), 1fr));
    align-items: stretch;
}

.ag-grid--facts {
    --grid-min: 155px;
}

.ag-grid--hoods {
    --grid-min: 158px;
}

.ag-grid--life {
    --grid-min: 155px;
}

.ag-grid--audience {
    --grid-min: 185px;
}

.ag-grid--nearby {
    --grid-min: 175px;
}

.ag-grid--quotes {
    --grid-min: 180px;
}

.ag-grid--faq {
    --grid-min: 420px;
    --grid-gap: var(--space-sm) var(--space-lg);
    align-content: start;
}

.ag-grid--trust {
    --grid-min: 240px;
    --grid-gap: 0;
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}

.ag-grid--promo {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) minmax(0, 1fr);
    --grid-gap: var(--space-lg);
    align-items: start;
}

.ag-grid--proof {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr) minmax(0, 1.1fr);
    --grid-gap: var(--space-lg);
}

/* Two equal cards. auto-fit rather than auto-fill so a missing
   column does not leave a phantom track. */
.ag-grid--columns {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    --grid-gap: var(--space-sm);
}

.ag-col {
    display: flex;
    flex-direction: column;
    background: var(--c-white);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--card-padding);
}

    .ag-col h3 {
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--c-text-primary);
        margin-bottom: var(--space-md);
    }

/* Area note. Keeps the highlight background so it stays distinct from the
   white cards above it, but takes the card shadow so it reads as a panel
   rather than a flat tint on the section background. */
.ag-note {
    margin-top: var(--space-sm);
    background: var(--c-highlight-bg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--card-padding);
}

    .ag-note h3 {
        font-size: 1rem;
        font-weight: 700;
        color: var(--c-text-primary);
        margin-bottom: var(--space-xs);
    }

    .ag-note .wysiwyg {
        font-size: 0.875rem;
        color: var(--c-text-body);
    }

/* ============================================================
   Hero
   Sits on .branch-hero__bg from branch.css, which is already
   absolutely positioned and object-fit cover. The fade is an
   ::after so the template needs no overlay element.
   ============================================================ */

.branch-area-guide-hero {
    position: relative;
    background-color: #f3f4f6;
    overflow: hidden;
}

    .branch-area-guide-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(to right, rgba(243,244,246,1) 0%, rgba(243,244,246,0.97) 30%, rgba(243,244,246,0.7) 50%, rgba(243,244,246,0) 70%);
    }

    .branch-area-guide-hero > .ag-shell {
        position: relative;
        z-index: 2;
    }

.ag-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-xl);
    align-items: start;
    padding-top: 3rem;
    padding-bottom: 2rem;
}

.ag-hero__intro h1 {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--c-text-primary);
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin-bottom: 0.75rem;
}

.ag-hero__eyebrow {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--c-text-body);
    letter-spacing: 0;
    margin-bottom: 0.25rem;
}

.ag-hero__subtitle {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--c-text-body);
    margin-bottom: 0.75rem;
}

.ag-hero__standfirst {
    max-width: 46ch;
    color: var(--c-text-primary);
    margin-bottom: 1.25rem;
}

.ag-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* One-line summary panel */

.ag-oneline {
    background: var(--c-navy);
    color: var(--c-white);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--card-padding);
}

    .ag-oneline h2 {
        color: var(--c-white);
        font-size: 1.0625rem;
        font-weight: 700;
        margin-bottom: var(--space-xs);
    }

    .ag-oneline p {
        font-size: 0.875rem;
        color: rgba(255,255,255,0.88);
    }

    .ag-oneline a {
        display: inline-block;
        margin-top: var(--space-sm);
        color: var(--c-yellow);
        font-size: 0.875rem;
        font-weight: 600;
        text-decoration: none;
    }

        .ag-oneline a::after {
            content: " \2192";
        }

/* Just an opening quote mark. Its ink is short and sits high - at 3rem the glyph is
   only ~11px tall and stops ~24px above its own baseline - so the box is mostly dead
   space underneath. The negative margin claws that back; em units keep it in step if
   the font-size changes. */
.ag-oneline__mark {
    display: block;
    font-size: 3rem;
    line-height: 0.8;
    margin-bottom: -0.4em;
    color: var(--c-yellow);
}

/* ============================================================
   Trust bar
   ============================================================ */

.ag-trust {
    background: var(--c-navy);
    color: var(--c-white);
}

.ag-trust__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
    border-left: 1px solid rgba(255,255,255,0.15);
}

    .ag-trust__item:first-child {
        border-left: 0;
        padding-left: 0;
    }

    .ag-trust__item strong {
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
    }

    .ag-trust__item span span {
        font-size: 0.8125rem;
        color: rgba(255,255,255,0.72);
    }

.ag-trust__icon {
    flex: none;
    color: var(--c-yellow);
}

    .ag-trust__icon svg {
        width: 22px;
        height: 22px;
    }

/* ============================================================
   Quick facts
   ============================================================ */

.ag-fact {
    background: var(--c-white);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-md);
}

.ag-fact__label {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.75rem;
    color: var(--c-text-muted);
    margin-bottom: var(--space-xs);
}

    .ag-fact__label svg {
        width: 36px;
        height: 36px;
        flex: none;
        color: var(--c-brand);
    }

.ag-fact__value {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--c-text-primary);
    line-height: 1.25;
}

.ag-fact__meta {
    font-size: 0.6875rem;
    color: var(--c-text-muted);
    margin-top: 0.375rem;
    line-height: 1.4;
}

/* ============================================================
   Top strengths
   ============================================================ */

/* Full-width card now the scorecard no longer sits alongside it, so the
   items flow into as many columns as fit rather than stranding a wide
   band of whitespace down one side. */
.ag-strengths {
    background: var(--c-white);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--card-padding);
    list-style: none;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--space-sm) var(--space-lg);
}

    .ag-strengths li {
        display: flex;
        align-items: flex-start;
        gap: 0.625rem;
        font-size: 0.875rem;
        color: var(--c-text-primary);
    }

    .ag-strengths svg {
        width: 28px;
        height: 28px;
        flex: none;
        margin-top: 2px;
        color: var(--c-green);
    }

/* ============================================================
   Neighbourhoods
   ============================================================ */

.ag-hoods {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
    gap: var(--space-sm);
    align-items: stretch;
}

.ag-hoods--nomap {
    grid-template-columns: minmax(0, 1fr);
}

.ag-hood {
    display: flex;
    flex-direction: column;
    background: var(--c-white);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.ag-hood__media {
    /* position: relative is load-bearing. ImageHelper stamps .lazyimage-img on
       the <img>, and main.css gives that class position: absolute, so without a
       positioned wrapper the image escapes the card and sizes itself against
       <main class="site-main relative">. Same reason .branch-coverage-layout__image
       and .branch-area-guide__image in branch.css are relative. */
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

    /* <picture> is display: inline by default, so it neither fills the media box
       nor passes a height down to the image. */
    .ag-hood__media picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    .ag-hood__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 300ms ease;
    }

.ag-hood:hover .ag-hood__media img {
    transform: scale(1.04);
}

.ag-hood__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.4375rem;
    padding: var(--space-sm);
}

.ag-hood__name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--c-text-primary);
}

    .ag-hood__name a {
        color: inherit;
        text-decoration: none;
    }

        .ag-hood__name a:hover {
            text-decoration: underline;
        }

.ag-hood__blurb {
    font-size: 0.75rem;
    color: var(--c-text-body);
    flex: 1;
}

.ag-hood__tag {
    font-size: 0.75rem;
    font-weight: 600;
}

/* Superflous - use bold for "Best for" - colours for price range */
.ag-hood__tag--family {
    color: var(--c-green);
}

.ag-hood__tag--first {
    color: var(--c-brand);
}

.ag-hood__tag--value {
    color: var(--c-navy);
}

.ag-hood__tag--retire {
    color: var(--c-text-muted);
}

.ag-hood__price {
    font-size: 0.875rem;
    color: var(--c-text-muted);
}

    /* The pound signs cannot get heavier via font-weight: body type is plain
       sans-serif with no webfont, so preflight's `b { font-weight: bolder }`
       already resolves to 700 and there is no face above it. The extra weight
       comes from the size bump plus a hairline stroke, which picks up the band
       colour through currentColor. */
    .ag-hood__price b {
        font-size: 1.125rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        -webkit-text-stroke: 0.3px currentColor;
        color: var(--c-text-primary);
    }

    /* Price band ramp, cheapest to dearest. These were built into an inline style
       from a dictionary in the view; the hex values are carried over unchanged.
       Two classes deep so they beat the .ag-hood__price b default above. */
    .ag-hood__price .ag-hood__band--1 {
        color: #2e7d32; /* green */
    }

    .ag-hood__price .ag-hood__band--2 {
        color: #8bc34a; /* light green */
    }

    .ag-hood__price .ag-hood__band--3 {
        color: #fbc02d; /* amber */
    }

    .ag-hood__price .ag-hood__band--4 {
        color: #f57c00; /* orange */
    }

    .ag-hood__price .ag-hood__band--5 {
        color: #c62828; /* red */
    }

.ag-hoods__map {
    position: relative;
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    min-height: 240px;
    background: var(--c-gray-150);
}

    .ag-hoods__map img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .ag-hoods__map .ag-btn {
        position: absolute;
        left: 50%;
        bottom: var(--space-md);
        transform: translateX(-50%);
        padding: 0.5rem 1rem;
        white-space: nowrap;
    }

.ag-deflist {
    display: grid;
    gap: var(--space-md);
    margin: 0 0 var(--space-lg);
}

    /* The bottom margin spaced the list off a footer link. As the last thing in the
       card it would just stack onto the card's own padding. */
    .ag-deflist:last-child {
        margin-bottom: 0;
    }

.ag-deflist__item {
    display: flex;
    gap: var(--space-sm);
}

.ag-deflist__icon {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 0.25rem;
    background: var(--c-highlight-bg);
    color: var(--c-brand);
}

    .ag-deflist__icon svg {
        width: 24px;
        height: 24px;
    }

.ag-deflist dt {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-text-primary);
}

.ag-deflist dd {
    margin: 3px 0 0;
    font-size: 0.8125rem;
    color: var(--c-text-body);
}

/* ============================================================
   Life in - lifestyle tiles
   Same card construction as .ag-hood: the card clips the media,
   so the image corners come from --card-radius rather than being
   rounded separately.
   ============================================================ */

.ag-life__item {
    display: flex;
    flex-direction: column;
    background: var(--c-white);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.ag-life__media {
    /* See .ag-hood__media - contains the absolutely positioned .lazyimage-img. */
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--c-gray-150);
}

    .ag-life__media picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    .ag-life__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.ag-life__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-sm);
}

.ag-life__item h3 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--c-navy);
    margin-bottom: 4px;
}

.ag-life__item p {
    font-size: 0.75rem;
    color: var(--c-text-body);
}

/* ============================================================
   Audience cards
   ============================================================ */

.ag-audience__card {
    display: flex;
    gap: 0.625rem;
    background: var(--c-white);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-md);
}

    .ag-audience__card > svg {
        width: 42px;
        height: 42px;
        flex: none;
        color: var(--c-brand);
    }

    .ag-audience__card h3 {
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--c-text-primary);
        margin-bottom: 3px;
    }

    .ag-audience__card p {
        font-size: 0.75rem;
        color: var(--c-text-body);
    }

/* ============================================================
   Promo row - why choose / quick links / market insight
   ============================================================ */

.ag-promo__panel {
    height: 100%;
    padding: var(--card-padding);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

    .ag-promo__panel h2 {
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--c-text-primary);
        margin-bottom: var(--space-md);
    }

.ag-promo__panel--navy {
    background: var(--c-navy);
    color: var(--c-white);
}

    .ag-promo__panel--navy h2 {
        color: var(--c-white);
    }

.ag-promo__panel--plain {
    background: var(--c-white);
}

.ag-promo__panel--cream {
    background: var(--c-highlight-bg);
}

.ag-promo__ticks {
    list-style: none;
    margin: 0 0 var(--space-lg);
    padding: 0;
    display: grid;
    gap: 0.6875rem;
}

    .ag-promo__ticks li {
        display: flex;
        gap: 0.625rem;
        font-size: 0.8125rem;
        color: rgba(255,255,255,0.92);
    }

    .ag-promo__ticks svg {
        width: 15px;
        height: 15px;
        flex: none;
        margin-top: 2px;
        color: var(--c-yellow);
    }

.ag-quicklinks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6875rem;
}

    .ag-quicklinks li {
        display: flex;
        align-items: center;
        gap: 0.5625rem;
        font-size: 0.875rem;
    }

    .ag-quicklinks svg {
        width: 15px;
        height: 15px;
        flex: none;
        color: var(--c-navy);
    }

    .ag-quicklinks a {
        color: var(--c-brand);
        text-decoration: none;
    }

        .ag-quicklinks a:hover {
            text-decoration: underline;
        }

.ag-insight {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: var(--space-md);
}

    .ag-insight blockquote {
        margin: 0 0 var(--space-sm);
        font-size: 0.875rem;
        font-style: italic;
        color: var(--c-text-primary);
    }

    .ag-insight .ag-btn {
        margin-top: var(--space-sm);
        padding: 0.5rem 1rem;
    }

.ag-insight__photo {
    width: 88px;
    height: 100px;
    border-radius: 0.25rem;
    object-fit: cover;
}

.ag-insight__name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--c-text-primary);
}

.ag-insight__role {
    font-size: 0.75rem;
    color: var(--c-text-muted);
}

/* ============================================================
   Nearby areas
   ============================================================ */

.ag-nearby__card {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    background: var(--c-white);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--space-md);
}

    .ag-nearby__card h3 {
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--c-text-primary);
    }

    .ag-nearby__card p {
        font-size: 0.75rem;
        color: var(--c-text-body);
    }

    /* Heading link. Mirrors .ag-hood__name a so it inherits the h3's size
       and colour instead of picking up the "View guide" treatment below. */
    .ag-nearby__card h3 a {
        color: inherit;
        text-decoration: none;
    }

        .ag-nearby__card h3 a:hover {
            text-decoration: underline;
        }

    /* Direct child only, so the heading anchor is excluded. Distance and
       blurb are both conditional now, so margin-top:auto is what pins this
       to the card foot rather than a flex:1 on a paragraph that may not
       be rendered at all. */
    .ag-nearby__card > a {
        margin-top: auto;
        align-self: start;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--c-brand);
        text-decoration: none;
    }

        .ag-nearby__card > a:hover {
            text-decoration: underline;
        }

        .ag-nearby__card > a::after {
            content: " \2192";
        }

    /* Same specificity as .ag-nearby__card p, so source order decides.
       Keep this rule after that one and the !important is unnecessary. */
    .ag-nearby__card .ag-nearby__dist {
        color: var(--c-text-muted);
    }

.ag-nearby__dist {
    color: var(--c-text-muted) !important;
}

/* ============================================================
   FAQ

   The .accordion component supplies its own behaviour and the
   plus/minus swap. This restyles it into a single stacked panel:
   the grid becomes the card, and each accordion becomes a row
   separated by a rule rather than a card in its own right.
   ============================================================ */

.ag-grid--faq {
    grid-template-columns: minmax(0, 1fr);
    --grid-gap: 0;
    background: var(--c-white);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

    .ag-grid--faq > .accordion {
        align-self: stretch;
        margin-left: 0;
        margin-right: 0;
        background: transparent;
        border: 0;
        border-top: 1px solid var(--c-border);
        border-radius: 0;
        box-shadow: none;
    }

        .ag-grid--faq > .accordion:first-child {
            border-top: 0;
        }

    /* Row header. The component's own bar is navy with the text first;
   this flips it to white with the icon leading. */
    .ag-grid--faq .accordion__title {
        display: flex;
        flex-direction: row; /* the component sets row-reverse; this is what was flipping it */
        align-items: center;
        justify-content: flex-start;
        gap: var(--space-sm);
        padding: var(--space-md) var(--card-padding);
        background: transparent;
        color: var(--c-text-primary);
        font-size: 0.9375rem;
        font-weight: 700;
        text-align: left;
        cursor: pointer;
    }

    .ag-grid--faq .accordion__icon {
        order: -1;
        flex: none;
        width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--c-brand);
    }

        /* Both glyphs share one grid cell so the component's existing
       show/hide toggle keeps working without them stacking. */
        .ag-grid--faq .accordion__icon svg {
            grid-area: 1 / 1;
            width: 11px;
            height: 11px;
        }

    .ag-grid--faq .accordion__content {
        display: block !important;
        max-height: 0;
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: calc(var(--card-padding) + 28px + var(--space-sm));
        padding-right: var(--card-padding);
        transition: max-height 250ms ease-in, padding 250ms ease;
    }

    .ag-grid--faq .accordion--active .accordion__content {
        max-height: 600px;
        padding-bottom: var(--card-padding);
        transition: max-height 350ms ease-out, padding 250ms ease;
    }

/* ============================================================
   Social proof + final CTA
   ============================================================ */

.ag-proof__panel {
    padding: var(--space-lg);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

.ag-proof__panel--navy {
    background: var(--c-navy);
    color: var(--c-white);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-xs);
}

    .ag-proof__panel--navy h2 {
        color: var(--c-white);
        font-size: 1.0625rem;
        font-weight: 700;
    }

    .ag-proof__panel--navy p {
        font-size: 0.8125rem;
        color: rgba(255,255,255,0.88);
    }

    /* Trustist widget sits centred inside the navy panel */
    .ag-proof__panel--navy .flex {
        justify-content: center;
        width: 100%;
    }

.ag-proof__panel--soft {
    background: var(--c-white);
}

.ag-proof__quotes-head {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--c-text-primary);
    margin-bottom: var(--space-sm);
}

.ag-proof__tel {
    color: var(--c-yellow);
    font-weight: 700;
    text-decoration: none;
}

/* Review slider needs the full panel width, not a grid track */
.ag-grid--quotes > .flex {
    grid-column: 1 / -1;
    display: block;
}

/* ============================================================
   Responsive
   Only the fixed compositions need breakpoints; .ag-grid
   handles itself.
   ============================================================ */

@media (min-width: 768px) {
    /* Once there is room, stop packing neighbourhoods six-up at ~160px and
       let each card carry a usable image. The phone stays two-up on the
       base --grid-min. */
    .ag-grid--hoods {
        --grid-min: 240px;
    }
}

@media (min-width: 1024px) {
    .ag-hero__intro h1 {
        font-size: 2.25rem;
    }
}

@media (max-width: 1100px) {
    .ag-hoods {
        grid-template-columns: minmax(0, 1fr);
    }

    .ag-hoods__map {
        min-height: 320px;
    }
}

@media (max-width: 1023px) {
    .ag-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg);
    }

    .branch-area-guide-hero::after {
        background: linear-gradient(to bottom, rgba(243,244,246,1) 0%, rgba(243,244,246,0.95) 60%, rgba(243,244,246,0.8) 100%);
    }

    .ag-oneline {
        max-width: 460px;
    }

    .ag-grid--promo,
    .ag-grid--proof {
        grid-template-columns: minmax(0, 1fr);
    }

    .ag-grid--trust {
        --grid-gap: var(--space-md) 0;
    }

    /* Drop the vertical rule, but keep padding-right: .ag-grid--trust has
       column-gap 0 and stays multi-column down to ~512px, so that padding is
       the only gutter between items. */
    .ag-trust__item {
        border-left: 0;
        padding-left: 0;
    }

    .ag-grid--columns {
        --grid-gap: var(--space-lg);
    }
}

@media (max-width: 767px) {
    .ag-section {
        padding-top: var(--space-lg);
        padding-bottom: var(--space-lg);
    }

    .ag-hero__actions .ag-btn {
        flex: 1 1 100%;
    }

    .ag-insight {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ag-hood__media img,
    .ag-grid--faq .accordion__content {
        transition-duration: 0.01ms !important;
    }
}

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

        /* Items flow across, so the first two are both top-of-column
       and the even ones are all in the right-hand column. */
        .ag-grid--faq > .accordion:nth-child(-n+2) {
            border-top: 0;
        }

        .ag-grid--faq > .accordion:nth-child(even) {
            border-left: 1px solid var(--c-border);
        }
}