.servicespg__breakdown-section {
    grid-column: 3 / -3;
    display: grid;
    grid-template-columns: subgrid;
}

.servicespg__breakdown-section .eyebrow {
    grid-column: 1 / -1;
    /* margin-bottom: 0; */
}
.servicespg__breakdown-section--blocks {
    grid-column: 1 / -1;
    /* display: grid;
    grid-template-columns: subgrid; */
    display: flex;
    /* row-gap: 32px; */
    gap: 40px;
    margin-bottom: 200px;
}

@media (max-width: 1024px) {
    .servicespg__breakdown-section--blocks {
        margin-bottom: 140px;
        display: grid;
        grid-template-columns: subgrid;
        row-gap: 32px;
    }
}
@media (max-width: 767px) {
    .servicespg__breakdown-section--blocks {
        margin-bottom: 120px;
    }
}


.servicespg__breakdown-section .text-block {
    /* grid-column: span 4; */
    flex: 1 0 0;
}
@media (max-width: 1024px) {
    .servicespg__breakdown-section .text-block {
        grid-column: span 4;
    }
}


.servicespg__breakdown-section .text-block .text-block__title {
    font-weight: var(--regular);
}

.servicespg-specialist-expertise {
    margin: 200px 0;
}
.servicespg-specialist-expertise .text-block {
    grid-column: 3 / -3;
}

@media (max-width: 1024px) {
    .servicespg-specialist-expertise .text-block,
    .servicespg__breakdown-section {
        grid-column: 1 / -1;
    }
}


.homepg-our-audience-section {
    padding: 100px 0;
    background-color: var(--teal-80);
}

.homepg-our-audience-section .eyebrow {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--teal-60);
    padding-bottom: 32px;
    margin-bottom: 40px;
}

.homepg-our-audience-section.adoption-architecture-pg > .container > .text-block {
    grid-column: 1 / span 8;
    padding-bottom: 80px;
    /* margin-bottom: 80px; */
    /* border-bottom: 1px solid var(--teal-60); */
}

.homepg-our-audience-section.adoption-architecture-pg .parallax-section-wrap {
    padding-top: 80px;
    border-top: 1px solid var(--teal-60);
}

.adoption-architecture-pg > .header {
    padding-bottom: 200px;
}

@media (max-width: 767px) {
    .homepg-our-audience-section.adoption-architecture-pg > .container > .text-block {
        grid-column: 1 / -1;
    }
}

.homepg-our-audience-section.adoption-architecture-pg .eyebrow {
    border-bottom: none;
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .homepg-our-audience-section .eyebrow {
        grid-column: 1 / -1;
    }

    .homepg-our-audience-section.adoption-architecture-pg > .container > .text-block {
        padding-bottom: 60px;
        /* margin-bottom: 60px; */
    }

    .homepg-our-audience-section.adoption-architecture-pg .parallax-section-wrap {
        padding-top: 60px;
    }
    
}
@media (max-width: 767px) {
    .homepg-our-audience-section.adoption-architecture-pg > .container > .text-block {
        padding-bottom: 50px;
        /* margin-bottom: 50px; */
    }
    .homepg-our-audience-section.adoption-architecture-pg .parallax-section-wrap {
        padding-top: 50px;
    }
    
}


/* || Our Audiences — button-switched panels

   >1024px: the legend sits beside the panels, which are all stacked in one
   grid cell so exactly one shows at a time and the section stays as tall as
   the tallest panel — switching never reflows the page or moves the section
   below it. Clicking a nav item cross-fades its panel in.

   <=1024px: the same markup becomes an accordion. `order` interleaves each
   nav item with the panel it opens, so no second copy of the markup is needed.

   Behaviour lives in assets/js/parallax-section.js. Everything that hides a
   panel is gated on .is-enhanced, set by that script, so with JS off the
   panels simply stack and stay readable. */

.parallax-section-wrap {
    --parallax-rise: 16px;

    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    gap: 64px;
}

.parallax-section--legend {
    /* 440 + 64 + 660 is wider than columns 3/-3 give below ~1600px, so both
       sides carry a real basis and shrink in proportion rather than the
       legend taking its full width out of the panels. */
    flex: 0 1 440px;
    min-width: 0;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.parallax-section--navitem {
    color: var(--teal-40);
    text-decoration: none;
    display: flex;
    gap: 20px;
    align-items: flex-end;
    width: 100%;
    padding: 0;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s ease-in-out;
    background-color: transparent;
    border: none;
}

.parallax-section--navitem svg {
    min-width: 38px;
    transform: translate(0px, -25%);
    transition: transform 0.3s ease-in-out;
}

.parallax-section--panels {
    flex: 1 1 660px;
    min-width: 0;
    max-width: 660px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* Only ever seen in the no-JS fallback, where the panels keep their own
       rows instead of sharing one cell. */
    gap: 120px;
}

.parallax-section--content {
    width: 100%;
    padding: 10px 0;
}

.parallax-section--content .parallax-section--intro {
    color: var(--teal-20);
}

/* An intro carrying block markup is a div wrapping its own <p>/<ul>, so trim
   the outer margins its children bring — the single-line <p> version has
   none, and both need to sit the same distance off the block grid below. */
.parallax-section--intro > :first-child:not(ul):not(.eyebrow-text-list):not(img) {
   margin-top: 0;
}

.parallax-section--intro > :last-child {
    margin-bottom: 0;
}

/* The theme sets no global anchor or list style, so markup in the intro would
   otherwise fall back to browser defaults — default-blue links on dark teal,
   and a 40px bullet indent. Scoped here rather than globally: this is the one
   place body copy is authored as HTML. */
.parallax-section--intro a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--green-30);
    text-underline-offset: 4px;
    transition: color 0.3s ease-in-out;
}

.parallax-section--intro a:hover {
    color: var(--green-30);
}


/* The three rhombus drawings are the same height but different widths, so
   sizing them by column width would render the narrow ones taller. Fix the
   height instead and let each keep its own width — the columns stay equal,
   the drawings line up along a single top and bottom edge. */
.parallax-section--intro-image-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    --rhombus-height: clamp(180px, 24vw, 309px);
    margin-top: 32px !important;
}

@media (max-width: 767px) {
    .parallax-section--intro-image-images {
        grid-template-columns: repeat(3, auto);
    }   
}

.parallax-section--intro-image-images img {
    width: auto;
    min-height: var(--rhombus-height);
    height: var(--rhombus-height);
    max-width: 100%;
    /* object-fit: contain; */
    object-position: center top;
}

.parallax-section--intro-image-images .eyebrow-text {
    display: block;
    text-wrap: nowrap;
    width: 0;
}

@media (max-width: 767px) {
    .parallax-section--intro-image-images .eyebrow-text {
        width: auto;
        text-wrap: wrap;
    }
}

.parallax-section--intro-image-images .eyebrow-text:first-of-type {
    margin-top: 24px;
}

.parallax-section--intro-image-images .eyebrow-text + .eyebrow-text {
    margin-top: 12px;
}


/* An illustration authored into the intro. It sits on its own line between
   the copy and whatever follows, and scales with the panel column rather
   than holding it open — the panels share a grid cell on desktop, so an
   image wider than its siblings would set the height for all three. */
/* .parallax-section--intro-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 32px 0 0;
} */

.parallax-section--intro ol {
    padding-left: 1.5em;
}

.parallax-section--intro ul {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* The panel column shrinks with the legend beside it, so the block grid
   drops to one column on its own rather than at a fixed breakpoint — two
   columns above roughly 470px of panel, one below. */
.parallax-section--text-blocks {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
    margin-top: 32px;
}

.parallax-section--text-blocks .text-block {
    grid-column: span 1;
}


/* || Our Audiences — desktop
   The arrow already slides on hover; the open item borrows the same treatment
   so the legend shows which panel you're on, not just what you're pointing at. */

@media (min-width: 1025px) {
    .parallax-section--navitem:hover {
        color: var(--teal-40);
    }

    .parallax-section--navitem.is-active {
        color: var(--neutral-30);
    }

    .parallax-section--navitem svg path {
        stroke: var(--teal-40);
        fill: var(--teal-40);
        transition: all 0.3s ease-in-out;
    }
    .parallax-section--navitem:hover svg path,
    .parallax-section--navitem.is-active svg path {
        stroke: var(--green-30);
        fill: var(--green-30);
    }
    
    .parallax-section--navitem:hover svg {
        transform: translate(40px, -25%);
    }

    /* One shared cell: the closed panels still occupy their space, so the
       section's height is set by the tallest of them and never changes. */
    .parallax-section-wrap.is-enhanced .parallax-section--content {
        grid-area: 1 / 1;
        opacity: 0;
        transform: translateY(var(--parallax-rise));
        /* Kept visible for the length of the fade, then dropped out of the
           stack so it can't intercept clicks. */
        visibility: hidden;
        transition: opacity 0.4s ease-out, transform 0.4s ease-out, visibility 0s linear 0.4s;
    }

    .parallax-section-wrap.is-enhanced .parallax-section--content.is-open {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    }
}


/* || Our Audiences — accordion */

@media (max-width: 1024px) {
    .parallax-section-wrap {
        /* Full bleed here, like every other section on the page — the legend
           is no longer beside the panels, so there is nothing to indent for. */
        grid-column: 1 / -1;
        flex-direction: column;
        gap: 0;
    }

    /* Dissolve both wrappers so the nav items and the panels become siblings
       in one column, ready to be interleaved by `order` below. */
    .parallax-section--legend,
    .parallax-section--panels {
        display: contents;
    }

    /* Each nav item lands immediately above the panel it opens. The index
       comes from the template's $audiences loop as an inline
       --parallax-order, so the pairs can't drift and adding an audience
       needs no rule here. */
    .parallax-section--navitem { order: calc(var(--parallax-order) * 2); }
    .parallax-section--content { order: calc(var(--parallax-order) * 2 + 1); }

    .parallax-section--navitem {
        padding: 24px 0;
        justify-content: space-between;
    }

    /* The arrow points along the row on desktop; here it points at the panel
       sitting directly underneath. */
    .parallax-section--navitem.is-active {
        color: var(--neutral-30);
    }

    .parallax-section--navitem.is-active svg {
        transform: rotate(90deg);
    }

    .parallax-section-wrap.is-enhanced .parallax-section--content {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        padding: 0;
        transition: grid-template-rows 0.4s ease, opacity 0.3s ease, padding 0.4s ease;
    }

    .parallax-section-wrap.is-enhanced .parallax-section--content.is-open {
        grid-template-rows: 1fr;
        opacity: 1;
        padding: 24px 0 32px;
    }

    /* The 0fr row only collapses if its content can be squeezed. The header
       rules run full bleed, but the body keeps the same 660px measure it has
       on desktop — otherwise the intro runs to a ~960px line at 1024px and
       the block grid finds room for a third column. */
    .parallax-section--content-inner {
        min-height: 0;
        overflow: hidden;
        max-width: 660px;
    }
}


/* The rise and the arrow slide are decoration; the panel still swaps, so
   only the movement is dropped. */

@media (prefers-reduced-motion: reduce) {
    .parallax-section--navitem,
    .parallax-section--navitem svg,
    .parallax-section-wrap .parallax-section--content {
        transition: none;
    }
}

/* Desktop only: the accordion's rotated arrow is the open/closed cue, not
   decoration, so it stays. */

@media (prefers-reduced-motion: reduce) and (min-width: 1025px) {
    .parallax-section--navitem:hover svg,
    .parallax-section--navitem.is-active svg {
        transform: none;
    }

    .parallax-section-wrap.is-enhanced .parallax-section--content {
        transform: none;
    }
}


.parallax-section--best-for {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.servicespg .homepg-our-audience-section .text-block__content {
    margin-top: 8px;
}