/* =============================================================================
   ABC — additive stylesheet for the Figma multi-page build.

   ADDITIVE ONLY: app.min.css is never edited (stale-source rule, A1). Everything
   new is namespaced `abcp-*` so no existing selector or bundle handler matches it.

   Colour + type are the theme's REAL tokens, matching inc/qa/qa-redesign.css:
     gold   #997233   navy ink #00182b   ground #f5f8fa   orange #ff9233
     Canela (display) + Inter (body)
   ========================================================================== */

:root {
    --abcp-gold: #997233;
    --abcp-navy: #00182b;
    --abcp-ground: #f5f8fa;
    --abcp-orange: #ff9233;
    --abcp-ink-muted: rgba(0, 24, 43, .78);
    --abcp-line: rgba(255, 255, 255, .18);
    --abcp-gutter: clamp(20px, 6.25vw, 120px);
}

/* ---------------------------------------------------------------- headings --
   The site's h2s take an orange first letter; the page HERO h1 deliberately
   does NOT (verified across every page design), so .abcp-page-hero is excluded. */
.abcp-heading {
    color: var(--abcp-navy);
    font-family: Canela, serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.15em;
    margin: 0;
    font-size: clamp(32px, 2.9vw, 56px);
}

.abcp-heading::first-letter {
    color: var(--abcp-orange);
}

.abcp-heading--light {
    color: #fff;
}

.abcp-eyebrow {
    display: block;
    color: var(--abcp-navy);
    font-family: Inter, sans-serif;
    font-size: clamp(14px, 1.05vw, 18px);
    line-height: 1.4em;
    margin-bottom: clamp(14px, 1.25vw, 24px);
}

.abcp-pill {
    display: inline-block;
    border: 1px solid var(--abcp-line);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-radius: 200px;
    font-family: Inter, sans-serif;
    font-size: clamp(13px, .85vw, 16px);
    line-height: 1.3em;
    padding: 8px 18px;
    margin-bottom: clamp(18px, 1.7vw, 32px);
}

/* ------------------------------------------------------- two-column intro -- */
.abcp-intro {
    background: var(--abcp-ground);
    padding: clamp(56px, 7.8vw, 150px) var(--abcp-gutter);
}

.abcp-intro__container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 96px);
    align-items: start;
    margin-inline: auto;
}

/* Heading-only variant (Latest Articles, Q&A Videos): collapse to one column so
   the empty body column cannot leave a gap. */
.abcp-intro--single .abcp-intro__container {
    grid-template-columns: minmax(0, 1fr);
}

/* The measure goes on the heading itself: a ch cap on the head resolved against the small body
   font (~368px), squeezing "Meet the team supporting your brand grow in Japan" to 4 lines at
   1920 where the design sets 2. */
.abcp-intro--single .abcp-intro__head {
    max-width: none;
}

.abcp-intro--single .abcp-heading {
    max-width: 17em;
}

.abcp-intro__body p {
    color: var(--abcp-ink-muted);
    font-family: Inter, sans-serif;
    font-size: clamp(15px, 1.05vw, 20px);
    line-height: 1.65em;
    margin: 0 0 1.1em;
}

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

/* The opening paragraph is set noticeably larger (design: ~26px on a 42px pitch at 1920). */
.abcp-intro__body .abcp-intro__lead {
    color: var(--abcp-navy);
    font-size: clamp(18px, 1.35vw, 26px);
    line-height: 1.6em;
}

.abcp-intro__head .abc_button {
    margin-top: clamp(24px, 2.3vw, 44px);
}

/* --------------------------------------------------- dark navy card panel -- */
.abcp-panel {
    background: var(--abcp-ground);
    padding: 0 clamp(8px, .6vw, 12px);
}

.abcp-panel__inner {
    position: relative;
    /* clip, not hidden: `hidden` made this box the scroll container of the sticky column
       inside it, and since the box never scrolls, the column never pinned. `clip` still clips
       the glows and the rounded corners without creating a scroll container. `hidden` stays
       first as the fallback for engines without `clip`. */
    overflow: hidden;
    overflow: clip;
    background: var(--abcp-navy);
    border-radius: clamp(20px, 2.1vw, 40px);
    padding: clamp(56px, 7.3vw, 140px) var(--abcp-gutter);
}

/* Decorative soft glows bleeding off the panel edges — CSS, not <img>. */
.abcp-panel__glow {
    position: absolute;
    width: clamp(320px, 34vw, 660px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.abcp-panel__glow--tl {
    top: -14%;
    left: -12%;
}

.abcp-panel__glow--br {
    bottom: -18%;
    right: -10%;
}

.abcp-panel__container {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 96px);
    align-items: start;
}

/* The left column stays pinned while the cards scroll past it, as drawn. On desktop the head
   is stretched to the full row (min-width:992px block below) so the column has room to travel;
   `top` clears the scrolled header pill (81px tall at 1200-1440, 105px at 1024, 114px at 1920). */
.abcp-panel__sticky {
    position: sticky;
    top: clamp(120px, 9vw, 150px);
}

/* The design leaves ~62px between the heading's last line and the CTA; it sat on the
   descenders. The compiled 20px mobile margin only applied at <=768px. */
.abcp-panel__sticky .abc_button {
    margin-top: clamp(24px, 3.3vw, 64px);
}

/* Balanced breaks where they prevent orphans. From 1200 up the design's own break wins
   (Logistics: "Logistics solutions tailored / for Japan's market"), so it is limited. */
@media (max-width: 1199px) {
    .abcp-panel .abcp-heading {
        text-wrap: balance;
    }
}

.abcp-panel__cards {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 5.2vw, 100px);
}

.abcp-card {
    border: 1px solid var(--abcp-line);
    border-radius: clamp(14px, 1.25vw, 24px);
    padding: clamp(24px, 2.1vw, 40px);
    background: rgba(255, 255, 255, .02);
}

/* Card type follows the design (title ~45px, body ~24px on a 42px pitch at 1920). */
.abcp-card__title {
    color: #fff;
    font-family: Canela, serif;
    font-weight: 400;
    font-size: clamp(22px, 2.35vw, 45px);
    line-height: 1.2em;
    margin: 0 0 clamp(12px, 1vw, 20px);
}

.abcp-card p {
    color: rgba(255, 255, 255, .82);
    font-family: Inter, sans-serif;
    font-size: clamp(15px, 1.25vw, 24px);
    line-height: 1.75em;
    margin: 0 0 1em;
}

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

@media (min-width: 992px) {

    .abcp-panel__head {
        align-self: stretch;
    }

    /* Design split: heading measure ~670px beside 885px cards (at 1920), so the headings
       break where drawn. Scoped to the card panel; the process timeline keeps 50/50. */
    .abcp-panel--cards .abcp-panel__container {
        grid-template-columns: minmax(0, 670fr) minmax(0, 885fr);
        column-gap: clamp(48px, 5.4vw, 104px);
    }

    /* Equal-height cards ~250px apart, as drawn: the long travel is what lets the pinned
       left column read as pinned. */
    .abcp-panel--cards .abcp-panel__cards {
        display: grid;
        grid-auto-rows: 1fr;
        row-gap: clamp(120px, 13vw, 250px);
    }
}

/* ----------------------------------------------------------- scroll reveal --
   inc/pages/reveal.js adds .abc-reveal-on to <html> only when motion is allowed and there is
   something below the fold to reveal, so without JS, or under reduced motion, nothing is
   hidden. Same easing as the home page's reveals. */
.abc-reveal-on [data-abc-reveal] {
    transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1);
}

.abc-reveal-on [data-abc-reveal]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(40px);
}

@media (prefers-reduced-motion: reduce) {

    /* !important because this must beat both the
       :not(.is-revealed) rule above (0-3-0) and the per-component transition further down. */
    .abc-reveal-on [data-abc-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ------------------------------------------------------ FAQ, tab-less mode --
   The interior pages show one category with no tab row. The bundle's accordion JS
   keys off .accordionjs, which is untouched — only the tab bar is absent. */
.faq_box--no-tabs .faq_box-questions {
    width: 100%;
}

/* Collapsed rows are separated by 1px hairlines in the design (spec: "collapsed rows sit on
   the page background separated by 1px dividers"). */
.faq_box--no-tabs .accordion-custom .acc_section:not(.acc_active):not(:last-child) {
    border-bottom: 1px solid rgba(0, 24, 43, .1);
}

/* Keyboard focus. The question rows become buttons in inc/pages/faq-a11y.js; the bundle sets
   outline:none on buttons, so neither the questions nor the Home/Contact tabs showed focus. */
.faq .accordionjs > li > [role="button"]:focus-visible,
.faq .faq_box-buttons button:focus-visible {
    outline: 2px solid var(--abcp-navy);
    outline-offset: 4px;
    border-radius: 8px;
}

/* ------------------------------------------------------------------ footer --
   footer.php renders the design's four columns (Company / Services / Insights / Address), but
   the bundle still hides the first column and lays the rest out 2-up. The .footer prefix
   out-ranks the bundle, which loads late (preload-swap) on Home/Contact. The legal row stays
   hidden by the bundle until the Terms and Cookie pages exist. */
.footer .footer_top .col_two .quick_links:first-child {
    display: block;
}

/* One row from 1400px: at 1201-1399 the Address column ran past the viewport (measured
   1269px wide content at 1201), so those widths keep the bundle's tidy 2x2 grid. */
@media (min-width: 1366px) {
    .footer .footer_top .col_two {
        grid-template-columns: repeat(4, max-content);
        justify-content: space-between;
        column-gap: clamp(24px, 3vw, 56px);
        padding-left: clamp(40px, 6.25vw, 120px);
    }

    .footer .footer_top .col_two .quick_links:last-child {
        width: auto;
    }
}

/* Address lines were <a href="#"> dead links; they are plain <li> now. They take the link
   columns' type so both columns step on the same rhythm. */
.footer .footer_address li {
    color: rgba(255, 255, 255, .7);
    font-family: Inter, sans-serif;
    font-size: 18px;
    line-height: 1.3em;
}

@media (min-width: 1441px) {
    .footer .footer_address li {
        font-size: 1.09375vw;
        line-height: 1.5625vw;
    }
}

@media (max-width: 768px) {
    .footer .footer_address li {
        font-size: 15px;
    }
}

/* Header dropdowns + light-header nav rules moved to inc/pages/nav.css (redesigned menu,
   enqueued after this file). The light-header CTA fix further down still lives here. */

/* --------------------------------------------------------------- responsive -- */
@media (max-width: 991px) {

    .abcp-intro__container,
    .abcp-panel__container {
        grid-template-columns: minmax(0, 1fr);
    }

    .abcp-panel__sticky {
        position: static;
    }
}

/* ------------------------------------------------------------ quote panel -- */
.abcp-quote {
    background: var(--abcp-ground);
    padding: clamp(40px, 5.2vw, 100px) clamp(8px, .6vw, 12px);
}

.abcp-quote__inner {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: clamp(28px, 3.6vw, 70px);
    align-items: center;
    border-radius: clamp(20px, 2.1vw, 40px);
    background: linear-gradient(105deg, #dceefb 0%, #bfe1f7 100%);
    padding: clamp(32px, 4.2vw, 80px) var(--abcp-gutter);
}

.abcp-quote__media img {
    width: 100%;
    height: auto;
    border-radius: clamp(14px, 1.25vw, 24px);
    display: block;
}

.abcp-quote__body {
    margin: 0;
    position: relative;
}

.abcp-quote__mark {
    display: block;
    color: var(--abcp-orange);
    font-family: Canela, serif;
    font-size: clamp(56px, 5.2vw, 100px);
    line-height: .6em;
    margin-bottom: clamp(10px, 1vw, 20px);
}

.abcp-quote__text {
    color: var(--abcp-navy);
    font-family: Canela, serif;
    font-size: clamp(20px, 1.85vw, 34px);
    line-height: 1.4em;
    margin: 0 0 clamp(20px, 2vw, 38px);
}

.abcp-quote__cite {
    font-style: normal;
}

.abcp-quote__name {
    display: block;
    color: var(--abcp-navy);
    font-family: Inter, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: clamp(15px, 1.05vw, 18px);
}

.abcp-quote__role {
    display: block;
    color: var(--abcp-ink-muted);
    font-family: Inter, sans-serif;
    font-size: clamp(14px, .95vw, 16px);
    margin-top: 4px;
}

/* --------------------------------------------------- linked service cards -- */
.abcp-services {
    background: var(--abcp-ground);
    padding: clamp(56px, 7.8vw, 150px) var(--abcp-gutter);
}

.abcp-services__container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 96px);
    align-items: start;
}

.abcp-services__list {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.1vw, 40px);
}

.abcp-service-card {
    background: #fff;
    border-radius: clamp(14px, 1.25vw, 24px);
    padding: clamp(24px, 2.1vw, 40px);
}

.abcp-service-card__title {
    color: var(--abcp-navy);
    font-family: Canela, serif;
    font-weight: 400;
    font-size: clamp(22px, 1.85vw, 34px);
    line-height: 1.2em;
    margin: 0 0 clamp(10px, .9vw, 18px);
}

.abcp-service-card__text {
    color: var(--abcp-ink-muted);
    font-family: Inter, sans-serif;
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.65em;
    margin: 0 0 clamp(18px, 1.7vw, 32px);
}

/* ------------------------------------------------------------------- team -- */
.abcp-team {
    background: var(--abcp-ground);
    padding: clamp(48px, 6.2vw, 120px) var(--abcp-gutter);
}

.abcp-team__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: clamp(28px, 3.3vw, 64px);
}

.abcp-team__controls {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 38px);
}

/* Circular carousel arrows. The compiled gold disc styling is scoped to `.insights
   .splide__arrow`, so the team row needs its own matching pair. */
.abcp-arrows {
    display: flex;
    align-items: center;
    gap: 8px;
}

.abcp-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(40px, 2.7vw, 52px);
    aspect-ratio: 1;
    border: 0;
    border-radius: 50%;
    background: var(--abcp-gold);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease, opacity .2s ease;
}

.abcp-arrow:disabled {
    background: rgba(153, 114, 51, .1);
    color: rgba(0, 24, 43, .3);
    cursor: default;
}

.abcp-team__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.3vw, 44px);
}

/* The About Us and bio pages show the same cards as a horizontal run. Scroll-snap
   keeps it a carousel without mounting a second Splide instance. */
.abcp-team--carousel .abcp-team__list {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.abcp-team--carousel .abcp-team__list::-webkit-scrollbar {
    display: none;
}

.abcp-team--carousel .abcp-team__item {
    flex: 0 0 clamp(220px, 22vw, 320px);
    scroll-snap-align: start;
}

.abcp-team-card {
    display: block;
    text-decoration: none;
}

.abcp-team-card__media {
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: clamp(14px, 1.25vw, 24px);
    overflow: hidden;
    background: #e6edf3;
}

.abcp-team-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.abcp-team-card__name {
    color: var(--abcp-navy);
    font-family: Canela, serif;
    font-weight: 400;
    font-size: clamp(18px, 1.35vw, 24px);
    line-height: 1.3em;
    margin: clamp(12px, 1vw, 20px) 0 4px;
}

.abcp-team-card__role {
    color: var(--abcp-ink-muted);
    font-family: Inter, sans-serif;
    font-size: clamp(14px, .95vw, 16px);
    margin: 0;
}

/* -------------------------------------------------------- process timeline --
   The steps reuse the home page's `.how_we_work-box` rail markup so the scroll
   enhancement drives them unchanged; only the colours change for the navy panel. */
.abcp-process__steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.abcp-process__step {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: clamp(18px, 1.7vw, 32px);
    padding-bottom: clamp(48px, 6.2vw, 120px);
}

.abcp-process__step:last-child {
    padding-bottom: 0;
}

.abcp-process__num {
    display: block;
    color: rgba(255, 255, 255, .45);
    font-family: Canela, serif;
    font-size: clamp(20px, 1.6vw, 30px);
    margin-bottom: clamp(8px, .7vw, 14px);
}

.abcp-process__title {
    color: #fff;
    font-family: Canela, serif;
    font-weight: 400;
    font-size: clamp(22px, 1.85vw, 34px);
    line-height: 1.25em;
    margin: 0 0 clamp(12px, 1vw, 20px);
}

.abcp-process__body p {
    color: rgba(255, 255, 255, .78);
    font-family: Inter, sans-serif;
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.65em;
    margin: 0 0 1em;
}

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

/* Step qualifier (client, 20 Oct: step 5 gained a note under its two paragraphs). Colour is
   inherited rather than dimmed, because this block renders on the light timeline AND on the
   home page’s darker band — a fixed tint would fail contrast on one of them. */
.abcp-process__note {
    font-size: clamp(13px, .95vw, 16px);
    line-height: 1.55em;
    margin-top: clamp(14px, 1.2vw, 24px);
    padding-left: clamp(12px, .9vw, 18px);
    border-left: 2px solid var(--abcp-gold);
}

/* ------------------------------------------------------------ Q&A Videos -- */
.abcp-qav {
    background: var(--abcp-ground);
    padding: 0 var(--abcp-gutter) clamp(56px, 7.8vw, 150px);
}

.abcp-qav__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: clamp(20px, 2.1vw, 40px) clamp(16px, 1.6vw, 30px);
}

/* Worded tiles, not poster cards (client, 20 Oct). .qa2-row still carries the modal
   contract; only its look changes, so the reset below replaces qa-redesign.css's list row. */
.abcp-qav .qa2-row {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(20px, 2vw, 36px);
    width: 100%;
    min-height: clamp(180px, 15vw, 260px);
    text-align: left;
    background: #fff;
    border: 1px solid rgba(0, 24, 43, .12);
    border-radius: clamp(10px, .85vw, 16px);
    padding: clamp(20px, 1.8vw, 32px);
    cursor: pointer;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.abcp-qav .qa2-row:is(:hover, :focus-visible) {
    border-color: var(--abcp-gold);
    box-shadow: 0 10px 30px rgba(0, 24, 43, .08);
}

.abcp-qav-card__caption {
    display: block;
    color: var(--abcp-navy);
    font-family: Inter, sans-serif;
    font-size: clamp(16px, 1.15vw, 20px);
    line-height: 1.45em;
}

.abcp-qav-card__play {
    width: clamp(40px, 3vw, 52px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--abcp-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    align-self: flex-start;
    transition: transform .25s ease;
}

.abcp-qav .qa2-row:hover .abcp-qav-card__play,
.abcp-qav .qa2-row:focus-visible .abcp-qav-card__play {
    transform: scale(1.08);
}

/* -------------------------------------------------------------- team bio -- */
.abcp-bio {
    background: var(--abcp-ground);
    padding: clamp(56px, 7.8vw, 150px) var(--abcp-gutter);
}

.abcp-bio__container {
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    gap: clamp(32px, 4.7vw, 90px);
    align-items: start;
}

.abcp-bio__media img {
    width: 100%;
    height: auto;
    border-radius: clamp(14px, 1.25vw, 24px);
    display: block;
}

.abcp-bio__name {
    margin-bottom: clamp(20px, 2vw, 38px);
}

.abcp-bio__text p {
    color: var(--abcp-ink-muted);
    font-family: Inter, sans-serif;
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.7em;
    margin: 0 0 1.1em;
}

.abcp-bio__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: clamp(20px, 2vw, 38px);
}

@media (max-width: 991px) {

    .abcp-quote__inner,
    .abcp-services__container,
    .abcp-bio__container {
        grid-template-columns: minmax(0, 1fr);
    }

    .abcp-team__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .abcp-team__list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------------------------------------- shared bits -- */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.abcp-richtext p {
    color: var(--abcp-ink-muted);
    font-family: Inter, sans-serif;
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.7em;
    margin: 0 0 1.1em;
}

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

.abcp-richtext ul {
    margin: 0 0 1.1em;
    padding-left: 1.2em;
}

.abcp-richtext li {
    color: var(--abcp-ink-muted);
    font-family: Inter, sans-serif;
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.7em;
    margin-bottom: .6em;
}

.abcp-richtext--lead p {
    color: var(--abcp-navy);
    font-size: clamp(17px, 1.3vw, 22px);
    line-height: 1.55em;
}

/* ------------------------------------------------------------ article grid -- */
.abcp-archive {
    background: var(--abcp-ground);
    padding: clamp(32px, 3.6vw, 70px) var(--abcp-gutter) clamp(56px, 7.8vw, 150px);
}

.abcp-archive__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(32px, 4.7vw, 90px) clamp(20px, 2.9vw, 56px);
}

.abcp-archive__empty {
    color: var(--abcp-ink-muted);
    font-family: Inter, sans-serif;
}

/* Cards are unboxed in the design — image and text sit straight on the ground. */
.abcp-article-card {
    display: block;
    text-decoration: none;
}

.abcp-article-card .postcard-info h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------------- filters -- */
.abcp-filters {
    background: var(--abcp-ground);
    padding: 0 var(--abcp-gutter);
}

.abcp-filters__label {
    color: var(--abcp-navy);
    font-family: Inter, sans-serif;
    font-size: clamp(15px, 1.05vw, 18px);
    font-weight: 400;
    margin: 0 0 clamp(14px, 1.25vw, 24px);
}

.abcp-filters__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.abcp-filter {
    display: inline-block;
    border-radius: 200px;
    padding: 9px 18px;
    background: #ece7e0;
    color: rgba(0, 24, 43, .72);
    font-family: Inter, sans-serif;
    font-size: clamp(14px, .95vw, 16px);
    line-height: 1.3em;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.abcp-filter:hover,
.abcp-filter:focus-visible {
    background: #e0d8cd;
    color: var(--abcp-navy);
}

.abcp-filter.is-active {
    background: var(--abcp-gold);
    color: #fff;
}

/* ------------------------------------------------------------ pagination -- */
.abcp-pagination {
    margin-top: clamp(40px, 5.2vw, 100px);
}

.abcp-pagination__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.abcp-pagination__list .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(44px, 2.9vw, 56px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ece7e0;
    color: var(--abcp-navy);
    font-family: Inter, sans-serif;
    font-size: clamp(15px, 1.05vw, 18px);
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
}

.abcp-pagination__list a.page-numbers:hover,
.abcp-pagination__list a.page-numbers:focus-visible {
    background: #e0d8cd;
}

.abcp-pagination__list .page-numbers.current,
.abcp-pagination__list .page-numbers.next {
    background: var(--abcp-gold);
    color: #fff;
}

.abcp-pagination__list .page-numbers.dots {
    background: #ece7e0;
    cursor: default;
}

/* --------------------------------------------------------- article detail -- */
/* The header is position:fixed OVER the page, so this padding is measured from the very top, not
   from under the header. The design puts the first content (the "Browse all Insights" button) at
   y=300 of the 1920 frame; the floor clears the 96-105px header below 1200px. */
.abcp-article-hero {
    background: var(--abcp-ground);
    padding: clamp(120px, 15.625vw, 300px) var(--abcp-gutter) 0;
}

.abcp-article-hero__container,
.abcp-article-body__container,
.abcp-review-meta__container,
.abcp-review-body__container {
    max-width: 1680px;
    margin-inline: auto;
}

.abcp-byline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: clamp(24px, 2.3vw, 44px) 0 clamp(20px, 2vw, 38px);
    color: var(--abcp-ink-muted);
    font-family: Inter, sans-serif;
    font-size: clamp(14px, .95vw, 17px);
}

.abcp-byline__avatar img {
    width: clamp(44px, 3.3vw, 62px);
    height: clamp(44px, 3.3vw, 62px);
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.abcp-byline__name {
    color: var(--abcp-navy);
    font-weight: 600;
}

/* Thin vertical rules between the byline parts, as drawn. */
.abcp-byline__item {
    position: relative;
    padding-left: 15px;
}

.abcp-byline__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 1.1em;
    background: rgba(0, 24, 43, .2);
}

.abcp-article-hero__title,
.abcp-review-meta__title {
    color: var(--abcp-navy);
    font-family: Canela, serif;
    font-weight: 400;
    font-size: clamp(30px, 3.75vw, 72px);
    line-height: 1.15em;
    margin: 0 0 clamp(28px, 3.3vw, 64px);
}

.abcp-article-hero__media,
.abcp-review-meta__media,
.abcp-article-image,
.abcp-review-image {
    margin: 0;
}

.abcp-article-hero__media img,
.abcp-review-meta__media img,
.abcp-article-image img,
.abcp-review-image img {
    width: 100%;
    height: auto;
    border-radius: clamp(12px, 1.25vw, 24px);
    display: block;
}

.abcp-article-body,
.abcp-review-body {
    background: var(--abcp-ground);
    padding: clamp(40px, 5.2vw, 100px) var(--abcp-gutter);
    display: flex;
    flex-direction: column;
    gap: clamp(40px, 5.2vw, 100px);
}

.abcp-article-h2,
.abcp-review-qa__question {
    color: var(--abcp-navy);
    font-family: Canela, serif;
    font-weight: 400;
    font-size: clamp(24px, 2.8vw, 54px);
    line-height: 1.2em;
    margin: 0 0 clamp(16px, 1.5vw, 28px);
}

.abcp-article-split,
.abcp-review-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 3.6vw, 70px);
    align-items: start;
}

.abcp-article-split--media-left .abcp-article-split__media,
.abcp-review-split--media-left .abcp-review-split__media {
    order: -1;
}

.abcp-article-split__media,
.abcp-review-split__media {
    margin: 0;
}

.abcp-article-split__media img,
.abcp-review-split__media img {
    width: 100%;
    height: auto;
    border-radius: clamp(12px, 1.25vw, 24px);
    display: block;
}

/* Framing boxes. The designs show each photo in a fixed-ratio frame and crop it to fit — the
   review pages even crop ONE wide product shot differently for the lead image and both splits.
   Rendering at natural height turned a 1600x350 strip into a thin ribbon. A fixed ratio with
   object-fit: cover reproduces the design framing from whole source images, and keeps any image
   an editor swaps in later framed the same way. Ratios are the frames measured on the 1920px
   exports of Articles 1-3 and Reviews 1-3 (identical on all six): lead 1680x945, band 1680x600,
   split 762x800. */
.abcp-article-hero__media img,
.abcp-review-meta__media img {
    aspect-ratio: 1680 / 945;
    object-fit: cover;
}

.abcp-article-image img,
.abcp-review-image img {
    aspect-ratio: 1680 / 600;
    object-fit: cover;
}

.abcp-article-split__media img,
.abcp-review-split__media img {
    aspect-ratio: 762 / 800;
    object-fit: cover;
}

@media (max-width: 991px) {

    /* Stacked on small screens: a portrait frame would dominate, so splits go landscape. */
    .abcp-article-split__media img,
    .abcp-review-split__media img {
        aspect-ratio: 4 / 3;
    }
}

/* Page hero photo. The compiled hero styles size the <picture>, and give the img only
   height:100% (.h-100). With WordPress's width/height attributes on the tag, the img took its
   intrinsic 2400px width, overflowed, and was cropped from the left. Fill and cover instead. */
.abcp-page-hero .contact_hero_image img {
    width: 100%;
    object-fit: cover;
    object-position: center;
}

/* ---------------------------------------------------------- more insights --
   `.insights{display:none}` is a compiled rule left over from the dropped home
   section; this variant re-enables it without editing the bundle. */
.insights.abcp-more-insights {
    display: block;
}

.abcp-more-insights__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: clamp(16px, 1.6vw, 30px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.abcp-more-insights__list::-webkit-scrollbar {
    display: none;
}

.abcp-more-insights__item {
    flex: 0 0 clamp(260px, 27vw, 510px);
    scroll-snap-align: start;
}

/* ---------------------------------------------------------- review detail -- */
/* Measured from the page top under the fixed header (see .abcp-article-hero). The design's
   "Interviewer:" label sits at y=307 of the 1920 frame. */
.abcp-review-meta {
    background: var(--abcp-ground);
    padding: clamp(120px, 16vw, 307px) var(--abcp-gutter) 0;
}

.abcp-review-meta__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 2.9vw, 56px);
    margin-bottom: clamp(32px, 3.6vw, 70px);
}

.abcp-review-meta__label {
    display: block;
    color: var(--abcp-ink-muted);
    font-family: Inter, sans-serif;
    font-size: clamp(14px, .95vw, 17px);
}

.abcp-review-meta__row .abcp-byline {
    margin: 10px 0 0;
}

.abcp-review-meta__guests {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(18px, 2vw, 38px);
}

.abcp-review-qa__speakers {
    list-style: none;
    margin: 0 0 clamp(18px, 1.7vw, 32px);
    padding-left: clamp(16px, 2vw, 40px);
}

.abcp-review-qa__speakers li {
    color: var(--abcp-ink-muted);
    font-family: Inter, sans-serif;
    font-size: clamp(15px, 1.05vw, 18px);
    line-height: 1.7em;
}

.abcp-review-qa__speakers strong {
    color: var(--abcp-navy);
    font-weight: 600;
}

.abcp-review-qa__note {
    margin-top: clamp(40px, 5.2vw, 100px);
}

.abcp-review-signoff {
    margin-top: clamp(28px, 3.3vw, 64px);
    font-family: Inter, sans-serif;
    font-size: clamp(17px, 1.35vw, 26px);
    color: var(--abcp-navy);
}

.abcp-review-signoff__line,
.abcp-review-signoff__name {
    display: block;
    line-height: 1.5em;
}

.abcp-review-signoff__name {
    font-weight: 700;
}

@media (max-width: 991px) {

    .abcp-archive__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .abcp-article-split,
    .abcp-review-split,
    .abcp-review-meta__row {
        grid-template-columns: minmax(0, 1fr);
    }

    /* One rule for both mirrored splits: the image always follows the text on
       small screens, rather than the design's alternating sides. */
    .abcp-article-split--media-left .abcp-article-split__media,
    .abcp-review-split--media-left .abcp-review-split__media {
        order: 0;
    }
}

@media (max-width: 600px) {
    .abcp-archive__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .abcp-byline {
        gap: 10px;
    }
}

/* ==========================================================================
   Corrections from the visual QA pass. Each of these was invisible in the
   markup checks and only showed up in a rendered screenshot.
   ========================================================================== */

/* 1. Process timeline. The steps keep `.how_we_work-box` so timeline-progress.js
      can find `.how_we_work-box .scrollbar-line`, but that class also carries the
      home page's flex layout, which collapsed the step column to roughly one word
      per line and left the page ~14,000px tall. The inherited layout is reset here
      and the type recoloured for the navy panel. */
.abcp-process .how_we_work-boxes {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* The rail is `position:absolute; left:0` in the compiled CSS, so it takes no space
   in flow. A two-column grid therefore dropped the TEXT into the 24px rail column,
   which wrapped it one word per line and inflated the page to ~14,000px. The home
   page's own model is the correct one: a block with left padding, the rail floating
   over it. `min-height` is cleared because the compiled 32.5vw is sized for the home
   page's full-screen-per-step rhythm. */
.abcp-process .how_we_work-box {
    display: block;
    position: relative;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0 0 clamp(48px, 6.2vw, 120px) clamp(52px, 4.4vw, 84px);
}

.abcp-process .abcp-process__step {
    display: block;
    grid-template-columns: none;
}

.abcp-process .how_we_work-box:last-child {
    padding-bottom: 0;
}

.abcp-process .abcp-process__body {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* The compiled rules paint these navy, which is invisible on the navy panel. */
.abcp-process .abcp-process__title {
    color: #fff;
}

.abcp-process .abcp-process__num {
    color: rgba(255, 255, 255, .45);
}

.abcp-process .abcp-process__body p {
    color: rgba(255, 255, 255, .78);
}

/* 2. Imageless split blocks. The PHP adds this class when no artwork is set; without
      a rule the text stayed in a half-width column beside an empty one. */
.abcp-article-split--no-media,
.abcp-review-split--no-media {
    grid-template-columns: minmax(0, 1fr);
}

/* 3. Light-header CTA. The compiled `.abc_button.white` sets a navy text colour that
      outranks the earlier rule, so the label vanished into the navy fill. */
.abc-header-light .header .abc_button.white,
.abc-header-light .header .abc_button.white:is(:hover, :focus-visible) {
    background: var(--abcp-navy) !important;
    border-color: var(--abcp-navy) !important;
    color: #fff !important;
}

.abc-header-light .header .abc_button.white svg path {
    stroke: #fff !important;
}

/* 4. Team cards with no portrait no longer reserve the 4:5 tile (see team-list.php),
      so give the text a little breathing room in that state. */
.abcp-team-card > .abcp-team-card__name:first-child {
    margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {

    .abcp-qav-card__play,
    .abcp-filter,
    .abcp-pagination__list .page-numbers {
        transition: none;
    }
}

/* =============================================================================
   UX audit fixes (2026-09-11; audit/12-figma-page-build.md §48).
   Each block overrides an earlier rule in this file or a compiled one, so it sits last.
   Selectors that touch Home/Contact carry extra specificity, because app.min.css loads
   late there (preload-swap) and would otherwise win ties.
   ========================================================================== */

/* ---- quote panel (About Us.png y1300-2150) --------------------------------- */
/* The cite is a <footer>, so the compiled `footer{background:#f5f8fa;position:relative;
   z-index:5}` painted a pale bar across the gradient behind Eli's name. */
.abcp-quote__cite {
    display: block;
    background: none;
    position: static;
    z-index: auto;
    border-top: 1px solid var(--abcp-orange);
    padding-top: clamp(20px, 2.6vw, 50px);
}

.abcp-quote__text {
    font-family: Inter, sans-serif;
    font-size: clamp(18px, 1.56vw, 30px);
    line-height: 1.6em;
}

.abcp-quote__mark {
    font-size: clamp(72px, 7.3vw, 140px);
}

.abcp-quote__name {
    font-style: italic;
    font-weight: 700;
    font-size: clamp(17px, 1.56vw, 30px);
}

.abcp-quote__role {
    font-size: clamp(14px, 1.25vw, 24px);
}

@media (min-width: 992px) {

    /* Landscape photo frame beside the quote, as drawn (693x496 at 1920). */
    .abcp-quote__inner {
        grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
    }

    .abcp-quote__media img {
        aspect-ratio: 693 / 496;
        object-fit: cover;
        object-position: 50% 20%;
    }
}

/* ---- linked service cards (About Us.png y2336-4181): grey card, hairline edge --- */
.abcp-service-card {
    background: #e1e8ed;
    border: 1px solid #cbd5dc;
}

.abcp-service-card__text {
    font-size: clamp(15px, 1.3vw, 25px);
}

/* ---- team bio ------------------------------------------------------------------
   The header is fixed OVER the page, so the top padding is measured from the page top
   (the portrait sat 40px under the header on phones). Design: content from y≈305 at 1920. */
.abcp-bio {
    padding-top: clamp(120px, 15.625vw, 300px);
}

.abcp-bio__text p {
    font-size: clamp(15px, 1.05vw, 20px);
}

.abcp-bio__text p:first-child {
    color: var(--abcp-navy);
    font-size: clamp(18px, 1.46vw, 28px);
    line-height: 1.5em;
}

/* Design sets the role eyebrow larger in grey; this grey is the lightest that keeps 4.5:1. */
.abcp-bio .abcp-eyebrow {
    color: #66737f;
    font-size: clamp(16px, 1.4vw, 26px);
}

/* The name is entirely navy in the design — no orange first letter. */
.abcp-bio__name::first-letter {
    color: inherit;
}

/* ---- reviews ----------------------------------------------------------------- */
/* Two Q&As sharing one split column had 0px between them (design: ~128px). */
.abcp-review-split__text > .abcp-review-qa + .abcp-review-qa {
    margin-top: clamp(40px, 6.25vw, 120px);
}

/* Auto cross-axis margins shrank short blocks to their content and centred them
   (Dr. Fischer Q4 sat inset by 220px); max-width still caps and centres above 1920. */
.abcp-review-body > .abcp-review-body__container,
.abcp-article-body > .abcp-article-body__container {
    width: 100%;
}

/* Answers are set ~28px on a 42px pitch in all three designs (live was 18px). */
.abcp-review-body .abcp-richtext p,
.abcp-review-body .abcp-richtext li,
.abcp-review-qa__speakers li {
    font-size: clamp(16px, 1.45vw, 28px);
    line-height: 1.5em;
}

/* ---- articles ------------------------------------------------------------------ */
/* Each section's lead paragraph ran straight into the body paragraph after it (0px). */
.abcp-richtext--lead + .abcp-richtext > :first-child {
    margin-top: 1.1em;
}

/* Two compiled rules from different breakpoints set 24px type on a 22.5px line around
   1440, clipping the second line's descenders under the 2-line clamp. */
.abcp-article-card .postcard-info h3 {
    line-height: 1.3em;
}

/* Filter pills link to #insights-filter, so the results land in view under the header. */
.abcp-filters {
    scroll-margin-top: clamp(100px, 7vw, 130px);
}

/* ---- heroes ---------------------------------------------------------------------- */
/* The compiled rule sets transform twice, so only translateX survived and the title sat
   ~60px below centre. */
section.contact_hero .contact_hero_content {
    transform: translate(-50%, -50%);
}

/* Contact's hero took its width from its height (1371px): a flat strip at 1440 and a
   left-anchored crop on phones. Same cover rule the interior heroes use. */
.contact_hero .contact_hero_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ---- How We Work timeline -------------------------------------------------------
   timeline-progress.js injects .hww-fill spans, but their rules only lived in the Home
   Q&A stylesheet, so here the fill never drew and the bundle's one-way 1.2s fill ran
   instead. The design draws the rail and dots in white, with the current step bright
   and the others faded. Scoped to .abcp-process: Home's timeline is unchanged. */
.abcp-process .how_we_work-box .scrollbar-line::before {
    display: none !important;
}

.abcp-process .hww-fill {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: scaleY(0);
    transform-origin: top;
    transition: none !important;
    will-change: transform;
    pointer-events: none;
}

.abcp-process .how_we_work-box .scrollbar-line {
    background: rgba(255, 255, 255, .25);
}

.abcp-process .how_we_work-box .scrollbar-circle {
    background: rgba(255, 255, 255, .2);
}

.abcp-process .how_we_work-box .scrollbar-circle::before,
.abcp-process .how_we_work-box.active .scrollbar-circle::before {
    background: #fff;
}

/* The compiled `.how_we_work-box span{opacity:.4}` multiplied the number's own alpha. */
.abcp-process .how_we_work-box .abcp-process__num {
    opacity: 1;
    color: rgba(255, 255, 255, .45);
}

/* .6 is the lowest dim that still clears AA on the navy panel (4.71:1); .3 measured
   2.09:1, and two non-current steps are fully on screen at any scroll position. */
.abcp-process__steps.is-enhanced .abcp-process__body {
    opacity: .6;
    transition: opacity .4s cubic-bezier(.2, .8, .2, 1);
}

.abcp-process__steps.is-enhanced .how_we_work-box.is-current .abcp-process__body {
    opacity: 1;
}

/* ---- dark-panel cards: hover, as the Home who-boxes have ------------------------- */
.abcp-card {
    transition: background-color .3s ease, border-color .3s ease;
}

.abc-reveal-on .abcp-card[data-abc-reveal] {
    transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1),
        background-color .3s ease, border-color .3s ease;
}

@media (hover: hover) {
    .abcp-card:hover {
        background: rgba(255, 255, 255, .06);
        border-color: rgba(255, 255, 255, .32);
    }
}

/* ---- tab-less FAQ: the answer column was locked at 562px between 992 and 1440, so
        3-4 questions per page wrapped with one-word orphans. ------------------------ */
@media (min-width: 992px) and (max-width: 1440px) {
    .faq--single .faq-container {
        grid-template-columns: minmax(0, 1fr) 46.875vw;
        gap: 6.25vw;
    }
}

/* ---- "Let's discuss" on interior pages: the designs draw the floating photos as faint
        ghosts behind the copy; Home keeps its live-site collage. ---------------------- */
.lets_discuss--ghost .img-absolute {
    filter: opacity(.2) saturate(.6);
}

/* ---- Home ------------------------------------------------------------------------ */
/* Below 1200px the "What we do" play cue was centred on the card copy; park it top-right. */
@media (max-width: 1199px) {
    .what_we_do .what_we_do-panel__play {
        top: clamp(16px, 4vw, 28px);
        right: clamp(16px, 4vw, 28px);
        left: auto;
        transform: none;
    }
}

/* Decorative shapes sat over both ends of the CTA at 390 and swallowed taps. */
.why_work_with_abc img {
    pointer-events: none;
}

/* The compiled min-width:1440 and max-width:1440 ranges both match at exactly 1440px, so
   the success-story controls and the how-we-work pin both switched off at that width. */
@media (min-width: 1440px) and (max-width: 1440px) {
    section.success_stories .splide__bottom--desktop {
        display: flex;
    }

    .how_we_work .how_we_work-content {
        position: sticky;
        top: 20vh;
    }
}

.why_work_with_abc-sliders .splide__slide:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 4px;
    border-radius: 8px;
}

/* ---- contrast (the gold brand button stays as the client chose) -------------------- */
.faq .faq_box-buttons button:not(.active) {
    opacity: .75;
}

.get_in_touch .get_in_touch-cta p {
    opacity: .75;
}

/* 4.6:1 after the label's own .8 opacity (was 3.6:1). */
.send_an_enquiry-form .gfield_required_text {
    color: #8f2a0e;
}

/* ---- contact form: visible keyboard focus (the bundle strips it with !important) ------ */
.send_an_enquiry-form .gfield input:focus-visible,
.send_an_enquiry-form .gfield textarea:focus-visible,
.send_an_enquiry-form .gfield select:focus-visible,
.send_an_enquiry-form .gform_footer input[type="submit"]:focus-visible,
.send_an_enquiry-form .gform_footer button:focus-visible {
    outline: 2px solid var(--abcp-navy) !important;
    outline-offset: 2px !important;
}

/* ---- touch targets: 44px on touch-sized layouts ------------------------------------ */
@media (max-width: 991px) {

    a.abc_button,
    button.abc_button {
        padding-block: 11px;
    }

    .abcp-arrow,
    .insights .splide__arrow {
        width: 44px;
        height: 44px;
    }

    /* The burger and its close button were 42x42. */
    .header .header_toggle-open,
    .header .header_toggle-close {
        width: 44px;
        height: 44px;
    }
}

/* ---- header no longer vanishes while the hero scrolls away (client: "menu bug, it
        disappears then reappears"). The bundle's .is-preparing-scrolled state hid the whole
        header (logo, menu, CTA) from y≈50 until the hero had scrolled past. Keep it visible as
        a dark glass pill over the photo instead; no new motion. ------------------------- */
.header[data-header].is-preparing-scrolled {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.header[data-header].is-preparing-scrolled .header_grid {
    background: rgba(0, 24, 43, .35);
}

.header[data-header].is-preparing-scrolled .header_logo img {
    filter: none;
}

.header[data-header].is-preparing-scrolled #header-nav .abcn-trigger {
    color: #fff;
}

/* ---- skip link (header.php): off-screen until focused ------------------------------ */
.abcp-skip-link {
    position: fixed;
    left: 16px;
    top: -80px;
    z-index: 10000;
    background: var(--abcp-navy);
    color: #fff;
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 1.2;
    padding: 12px 18px;
    border-radius: 999px;
    text-decoration: none;
}

.abcp-skip-link:focus {
    top: 16px;
    color: #fff;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

#content:focus {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {

    .abcp-process__steps .abcp-process__body,
    .abcp-card {
        transition: none;
    }

    /* The logo marquee's AutoScroll extension ignores Splide's reducedMotion option. */
    section.hero #splideHero .splide__list {
        transform: none !important;
    }

    .what_we_do-panels .what_we_do-panel {
        transition: none;
    }
}

/* =============================================================================
   UX audit fixes, second pass (plan F06, F24, F26, F30-F43).
   ========================================================================== */

/* F06(3): the compiled hero gradient carries a literal url(<path-to-image>) placeholder that
   404s on every hero. Same tint, no request. */
section.contact_hero .bg-gradient {
    background:
        linear-gradient(0deg, rgba(29, 161, 242, .2), rgba(29, 161, 242, .2)),
        linear-gradient(0deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)) #d3d3d3 50% / cover no-repeat;
}

/* F32: the <picture> carries the design's bottom radius, but the img overflowed its corners. */
section.contact_hero .contact_hero_image {
    overflow: hidden;
}

/* F24: sign-off stays ~1.4x the body; speaker lines match the body. */
.abcp-review-signoff {
    font-size: clamp(18px, 2vw, 38px);
}

.abcp-review-qa__speakers li {
    font-size: clamp(16px, 1.45vw, 28px);
    line-height: 1.5em;
}

/* F26: service-card body matches the dark-panel cards; the service intros take the design's
   column split (heading measure ~68 : body ~89). */
.abcp-service-card__text {
    font-size: clamp(15px, 1.25vw, 24px);
    line-height: 1.75em;
}

@media (min-width: 992px) {
    .abcp-intro--service .abcp-intro__container {
        grid-template-columns: minmax(0, 68fr) minmax(0, 89fr);
        column-gap: clamp(32px, 5.7vw, 110px);
    }
}

/* F30: an arrow pair that cannot scroll is hidden (carousel.js sets [hidden]); the compiled
   display:flex outranks the UA [hidden] rule, so it needs saying here. */
.abcp-arrows[hidden],
.abcp-more-insights [data-abcp-carousel-arrows][hidden] {
    display: none;
}

.abcp-arrow:not(:disabled):hover {
    background: #7c5b26;
}

.abcp-arrow:focus-visible {
    outline: 3px solid var(--abcp-gold);
    outline-offset: 3px;
}

/* F31: article and team cards get the hover and focus feedback the Q&A cards already have.
   Underline rather than a colour change, so text contrast is untouched. */
.abcp-article-card .postcard-image img,
.abcp-team-card__media img {
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.abcp-article-card:is(:hover, :focus-visible) .postcard-image img,
.abcp-team-card:is(:hover, :focus-visible) .abcp-team-card__media img {
    transform: scale(1.04);
}

.abcp-article-card:is(:hover, :focus-visible) .postcard-info h3,
.abcp-team-card:is(:hover, :focus-visible) .abcp-team-card__name {
    text-decoration: underline;
    text-underline-offset: .15em;
    text-decoration-thickness: 1px;
}

.abcp-article-card:focus-visible,
.abcp-team-card:focus-visible {
    outline: 3px solid var(--abcp-gold);
    outline-offset: 4px;
    border-radius: 16px;
}

/* F34: the interior designs draw the collage as faint ghosts (measured luminance std ~2.2;
   .08 measures 4.6-6.8, .2 measured 12-19). filter, not opacity: the reveal animates opacity. */
.lets_discuss--ghost .img-absolute {
    filter: opacity(.08) saturate(.6);
}

/* F35: the panel pill and the decorative discs, to the design. */
.abcp-pill {
    font-size: clamp(14px, .85vw, 16px);
}

.abcp-panel .abcp-pill {
    background: #0d2436;
    border-color: transparent;
    font-size: clamp(14px, 1.05vw, 20px);
    padding: .6em 1em;
}

.abcp-panel__glow {
    width: clamp(280px, 28.6vw, 550px);
    background: linear-gradient(180deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, 0) 95%);
}

.abcp-panel__glow--tl {
    top: 11.9vw;
    left: -12vw;
}

.abcp-panel__glow--br {
    top: auto;
    bottom: -15vw;
    right: -9vw;
}

/* F36 + client 20 Oct: with poster cards the grid was two columns on phones. The tiles are
   now worded buttons, and two columns broke every question into three-word lines, so phones
   get a single column and tablets three. */
@media (max-width: 600px) {
    .abcp-qav__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .abcp-qav .qa2-row {
        min-height: 0;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .abcp-qav-card__play {
        align-self: center;
    }
}

@media (min-width: 601px) and (max-width: 1199px) {
    .abcp-qav__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* F37: Q&A cards took the home list-row hover (a boxy lift). The worded tiles carry their
   own hover (border + shadow), so the inherited transform is still cancelled here. */
.abcp-qav .qa2-row:hover {
    transform: none;
}

/* F39: article masthead at 1920 — byline size and rhythm, divider tone, H1 measure. */
.abcp-article-hero .abcp-byline {
    font-size: clamp(15px, 1.2vw, 23px);
    margin: clamp(32px, 6.25vw, 120px) 0 clamp(24px, 3.1vw, 60px);
}

.abcp-article-hero .abcp-byline__item::before {
    background: rgba(0, 24, 43, .45);
}

.abcp-article-hero__title {
    max-width: 19.5em;
}

/* F41: More insights sat on the compiled section padding, out of line with the article column. */
.insights.abcp-more-insights {
    padding-left: var(--abcp-gutter);
    padding-right: var(--abcp-gutter);
}

.abcp-more-insights .insights-container {
    max-width: 1680px;
    margin-inline: auto;
}

/* F42: the sign-off ran straight into the CTA panel; guests column at the design's position. */
.abcp-review-body {
    padding-bottom: clamp(64px, 15.6vw, 300px);
}

@media (min-width: 992px) {
    .abcp-review-meta__row {
        grid-template-columns: minmax(0, 1041fr) minmax(0, 583fr);
    }
}

/* F43: Meet the Team stacked the intro's bottom padding on the grid's top padding. */
.abcp-intro + .abcp-team--grid {
    padding-top: 0;
}

.abcp-intro:has(+ .abcp-team--grid) {
    padding-bottom: clamp(48px, 5.4vw, 104px);
}

/* F40: mobile bylines — avatar + name on line 1, "date | read time" on line 2 with no
   leading divider. Scoped so the guest bylines are untouched. */
@media (max-width: 600px) {

    .abcp-article-hero .abcp-byline > .abcp-byline__name,
    .abcp-review-meta__col > .abcp-byline > .abcp-byline__name {
        flex-basis: calc(100% - 58px);
    }

    .abcp-article-hero .abcp-byline > .abcp-byline__name + .abcp-byline__item,
    .abcp-review-meta__col > .abcp-byline > .abcp-byline__name + .abcp-byline__item {
        padding-left: 0;
    }

    .abcp-article-hero .abcp-byline > .abcp-byline__name + .abcp-byline__item::before,
    .abcp-review-meta__col > .abcp-byline > .abcp-byline__name + .abcp-byline__item::before {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .abcp-article-card .postcard-image img,
    .abcp-team-card__media img {
        transition: none;
    }

    .abcp-article-card:is(:hover, :focus-visible) .postcard-image img,
    .abcp-team-card:is(:hover, :focus-visible) .abcp-team-card__media img {
        transform: none;
    }
}