.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 {
    max-width: 1360px;
    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;
}

/* Both marks ship in the button. Desktop wants the arrow throughout, so the
   rule stays hidden here and only the accordion query below swaps it in. */
.parallax-section--navitem-dash {
    display: none;
}

.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;
}

/* On mobile the three drawings read as one stack, so they butt up against each
   other at the left and a fourth, flexible track takes the slack — three `auto`
   columns on their own would have shared the leftover width out between them
   and left gaps. The cells flatten to `display: contents` so the drawing and
   its labels become grid items in their own right: drawings on row 1, labels on
   row 2 starting under the drawing they name. Each label block runs from its
   own column to the right edge, and because that span crosses the flexible
   track its width is never charged back to the drawing columns — which is what
   used to push the drawings after the lit one out of line. */
@media (max-width: 767px) {
    .parallax-section--intro-image-images {
        grid-template-columns: auto auto auto minmax(0, 1fr);
    }

    .parallax-section--rhombus {
        display: contents;
    }

    .parallax-section--intro-image-images img {
        grid-row: 1;
    }

    .parallax-section--intro-image-images .labels-container {
        grid-row: 2;
        grid-column-end: -1;
    }

    .parallax-section--rhombus:nth-child(1) img,
    .parallax-section--rhombus:nth-child(1) .labels-container {
        grid-column-start: 1;
    }

    .parallax-section--rhombus:nth-child(2) img,
    .parallax-section--rhombus:nth-child(2) .labels-container {
        grid-column-start: 2;
    }

    .parallax-section--rhombus:nth-child(3) img,
    .parallax-section--rhombus:nth-child(3) .labels-container {
        grid-column-start: 3;
    }
}

/* Every cell is a div, lit or not, so all three columns measure the same way
   whichever panel is open. The lit one also carries the labels, which are
   width-0 and so never widen their column. */
.parallax-section--rhombus {
    min-width: 0;
}


.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%);
    }

    /* Flex gives the label and the marks a column each, so a label that wraps
       leaves its arrow stranded beside the whole block. Normal inline flow
       makes the arrow just another word at the end of the sentence: it follows
       the last one down to line two or three. */
    .parallax-section--navitem {
        display: block;
    }

    /* The template (mds_bind_to_last_word) puts the label's last word and the
       marks in this one span, and nowrap is what stops the line breaking
       between them — a break is allowed on either side of a replaced element
       whatever the whitespace, so a loose arrow lands on a line of its own.
       Bound to the last word, it travels down with it instead. */
    .parallax-section--navitem-tail {
        white-space: nowrap;
    }

    .parallax-section--navitem svg {
        /* What align-items: flex-end did, now that there is no flex line to
           align to: the mark's bottom on the bottom of the last line box,
           lifted from there by the shared -25% nudge. margin-left replaces the
           flex gap, which block layout ignores. */
        vertical-align: bottom;
        margin-left: 20px;
    }

    /* The panels share one cell, so anything under the intro starts wherever
       that panel's copy happens to end — a three-line intro drops its drawings
       a line below a two-line one, and the row jumps as the user clicks
       through. parallax-section.js measures the tallest intro and publishes it
       here, so every panel reserves the same block of copy and the drawings
       below it land on one line. No JS, no variable, no reservation: the
       panels are all open and stacked anyway. */
    .parallax-section--content .parallax-section--intro {
        min-height: var(--parallax-intro-height, 0px);
    }

    /* 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: 20px 0;
        justify-content: space-between;
    }

    /* Nothing to bind here: the arrow belongs at the far end of the row, not
       against the copy. Dissolving the span hands the button back the three
       flex items it had before — the label's two text runs rejoin as one
       anonymous item, and each mark is its own item again. */
    .parallax-section--navitem-tail {
        display: contents;
    }

    /* The arrow points along the row on desktop; here it turns to point at the
       panel sitting directly underneath. The rotation replaces the -25% nudge
       rather than adding to it — upright it lifts the arrow to the text
       baseline, turned it would push it sideways. */
    .parallax-section--navitem-arrow {
        transform: rotate(90deg) !important;
    }

    /* Open, the row drops the arrowhead for a plain rule, so it reads as
       already opened rather than as somewhere still to go. */
    .parallax-section--navitem.is-active {
        color: var(--neutral-30);
    }

    .parallax-section--navitem.is-active .parallax-section--navitem-arrow {
        display: none;
    }

    .parallax-section--navitem.is-active .parallax-section--navitem-dash {
        display: block;
    }

    .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: 20px 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, where the arrow slide is the movement worth dropping. The
   accordion has no hover or open transform to cancel — it swaps marks rather
   than moving one — and its arrow's rotation is a resting orientation, not
   motion, so a blanket `transform: none` would only knock the marks out of
   place. */

@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;
}