/* Block: service-page */

/*
 * Page-level CSS for the five service pages.
 *
 * The pages used to be PHP templates, each with its own stylesheet in
 * styles/template/ that only loaded on that template. Those are gone: the
 * pages are block patterns now and this file loads on EVERY page, so every
 * selector below is scoped under .service-page (and usually under the
 * per-page .service-page--<slug> that the pattern's root group carries).
 * Nothing here may match outside a service page.
 *
 * Component-level styling stays in its own styles/blocks/<name>.css. What is
 * left here is section rhythm, the background bands and the handful of prose
 * wrappers the pages own themselves.
 */

/* ---------------------------------------------------------------------------
   Top-level rhythm
   styles/template/blocks.css gives every direct child of .block-page
   46px of margin-block. That file belongs to another session, so the
   exceptions are declared here.

   Rule of thumb: a block that paints a full-width background butts against
   its neighbours; a block that is ordinary content in the flow breathes.
   The hero additionally relies on a negative margin-top to slide under the
   transparent header, and 46px collapses that to -38px, leaving a strip of
   page background above the violet panel.

   Both the wrapped and unwrapped class names are listed because some blocks
   render their own root element (split-panel returns the component's
   <section> directly) while others wrap it in a block div.
   --------------------------------------------------------------------------- */
.block-page > .service-page,
.block-page > .wp-block-tgc-service-hero,
.block-page > .service-hero,
.block-page > .wp-block-tgc-statement,
.block-page > .statement,
.block-page > .wp-block-tgc-split-panel,
.block-page > .split-panel,
.block-page > .wp-block-tgc-case-studies,
.block-page > .wp-block-tgc-consulting-profile,
.block-page > .consulting-profile {
    margin-block: 0;
}

/* ---------------------------------------------------------------------------
   Page root
   The pattern wraps the whole page in one core/group carrying
   .service-page .service-page--<slug>, which is what scopes this file.
   --------------------------------------------------------------------------- */
.service-page {
    position: relative;
}

/*
 * theme.json opts into appearanceTools, so core's flow layout puts a
 * block-gap margin between the children of every group. The bands set their
 * own rhythm with padding, exactly as the templates did, so that gap is
 * cleared first and re-declared below where a section actually needs it.
 */
.service-page > *,
.service-page .wp-block-group > * {
    margin-block-start: 0;
    margin-block-end: 0;
}

/* ---------------------------------------------------------------------------
   Shared bands and helpers
   The background colours also come from [data-tgc-bg] in
   styles/blocks/service-hero.css; these repeat them so the page still reads
   correctly if the scroll hook is ever absent.
   --------------------------------------------------------------------------- */
.service-page .service-page__band--cream {
    background-color: var(--tgc-cream);
}

.service-page .service-page__band--white {
    background-color: var(--theme-white);
}

/* Centred supporting copy under a section-heading. */
.service-page .service-page__lede {
    max-width: calc(1120 * var(--tgc-u));
    margin: calc(22 * var(--tgc-u)) auto 0;
    padding: 0 var(--tgc-gutter);
    font-size: var(--tgc-text-body);
    line-height: 1.75;
    color: var(--tgc-ink-muted);
    text-align: center;
    text-wrap: pretty;
}

.service-page .service-page__lede p + p {
    margin-top: calc(16 * var(--tgc-u));
}

/* Closing line under a pill grid. */
.service-page .service-page__note {
    max-width: calc(1120 * var(--tgc-u));
    margin: calc(30 * var(--tgc-u)) auto 0;
    padding: 0 var(--tgc-gutter);
    font-size: var(--tgc-text-body);
    line-height: 1.75;
    color: var(--tgc-ink-muted);
    text-align: center;
    text-wrap: pretty;
}

.service-page .service-page__note--strong {
    font-weight: 600;
    color: var(--tgc-ink);
}

@media (max-width: 768px) {
    .service-page .service-page__lede,
    .service-page .service-page__note {
        padding: 0 20px;
    }
}

/* ===========================================================================
   Consulting
   =========================================================================== */
.service-page--consulting .service-page__band--white {
    padding: calc(18 * var(--tgc-u)) 0;
}

.service-page--consulting .service-page__section {
    padding: calc(52 * var(--tgc-u)) 0;
}

/*
 * The closing line under the questions stands on its own: dropped clear of
 * the pills, with the space under it taken in so it is not left adrift above
 * the contact panel. The section's own bottom padding goes and the band's is
 * trimmed; the contact panel's top margin does the rest.
 */
.service-page--consulting .service-page__section--questions {
    padding-bottom: 0;
}

.service-page--consulting .service-page__band:has(> .service-page__section--questions) {
    padding-bottom: calc(40 * var(--tgc-u));
}

.service-page--consulting .service-page__section--questions .service-page__note--strong {
    margin-top: calc(72 * var(--tgc-u));
}

/* Short questions, so they sit centred in their pills. */
.service-page--consulting .service-page__section--questions .check-pill {
    justify-content: center;
    text-align: center;
}

/* "We can support with:" and "We ask you:" end the lede, so the grid under
   each one needs a clear break from it. */
.service-page--consulting .service-page__lede + .check-grid {
    margin-top: calc(44 * var(--tgc-u));
}

/* Standfirst at the top of the split panel prose column. */
.service-page--consulting .consulting-lead {
    font-size: var(--tgc-text-body);
    font-weight: 600;
    line-height: 1.6;
    color: var(--tgc-ink);
}

/*
 * "When to bring us in" reuses audience-pills, but the design draws these as
 * plain solid pills running the full width of the container. The tick is
 * switched off per pill with the block's own tick attribute, so only the
 * layout is set here.
 */
.service-page--consulting .service-page__section--when .audience-pills {
    max-width: var(--tgc-container);
    gap: calc(14 * var(--tgc-u)) calc(24 * var(--tgc-u));
    margin-top: calc(30 * var(--tgc-u));
}

.service-page--consulting .service-page__section--when .audience-pill {
    padding: 10px calc(20 * var(--tgc-u));
}

.service-page--consulting .service-page__section--when .audience-pill__text {
    font-size: var(--tgc-text-ui);
}

@media (max-width: 768px) {
    .service-page--consulting .service-page__section {
        padding: 36px 0;
    }

    .service-page--consulting .service-page__section--questions {
        padding-bottom: 0;
    }

    .service-page--consulting .service-page__section--questions .service-page__note--strong {
        margin-top: 36px;
    }

    .service-page--consulting .service-page__section--when .audience-pills {
        gap: 10px;
    }
}

/* ===========================================================================
   AI Data Systems
   =========================================================================== */
.service-page--ai-systems {
    overflow-x: clip;
}

.service-page--ai-systems .service-page__band {
    padding: var(--tgc-section-half) 0;
}

.service-page--ai-systems .service-page__band--cream {
    background-color: var(--tgc-cream);
}

.service-page--ai-systems .service-page__band--white {
    background-color: var(--theme-white);
}

.service-page--ai-systems .service-page__band > * + * {
    margin-top: calc(52 * var(--tgc-u));
}

.service-page--ai-systems .service-page__band > .wp-block-tgc-section-heading + * {
    margin-top: calc(34 * var(--tgc-u));
}

/* --- Prose blocks the page owns ------------------------------------------ */

.service-page--ai-systems .ai-systems-prose {
    max-width: calc(1196 * var(--tgc-u));
    margin: 0 auto;
    padding: 0 var(--tgc-gutter);
    text-align: center;
}

.service-page--ai-systems .ai-systems-prose p {
    font-size: var(--tgc-text-body);
    line-height: 1.75;
    color: var(--tgc-ink-muted);
}

.service-page--ai-systems .ai-systems-prose p + p {
    margin-top: calc(16 * var(--tgc-u));
}

/* --- Split panel body ---------------------------------------------------- */

/* Same as the lead on Development ("They need reliable hosting..."). */
.service-page--ai-systems .ai-systems-lead {
    font-size: var(--tgc-text-lead);
    font-weight: 500;
    line-height: 1.5;
    color: var(--tgc-ink);
}

/* Same as Development's subhead ("Development services that help..."). */
.service-page--ai-systems .ai-systems-subhead {
    margin: calc(46 * var(--tgc-u)) 0 calc(20 * var(--tgc-u));
    font-size: var(--tgc-text-lead);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--tgc-ink);
}

.service-page--ai-systems .ai-systems-subhead + p {
    margin-top: calc(18 * var(--tgc-u));
}

.service-page--ai-systems .ai-systems-bullets {
    margin-top: calc(16 * var(--tgc-u));
    padding-left: calc(18 * var(--tgc-u));
    list-style: disc;
}

.service-page--ai-systems .ai-systems-bullets li {
    font-size: var(--tgc-text-body);
    line-height: 1.75;
    color: var(--tgc-ink-muted);
}

.service-page--ai-systems .ai-systems-bullets li::marker {
    font-size: 0.7em;
}

.service-page--ai-systems .ai-systems-bullets + p {
    margin-top: calc(18 * var(--tgc-u));
}

.service-page--ai-systems .ai-systems-bullets--two {
    column-count: 2;
    column-gap: calc(36 * var(--tgc-u));
}

.service-page--ai-systems .ai-systems-bullets--two li {
    break-inside: avoid;
}

/* --- "Our approach": intro column beside the accordion ------------------- */

.service-page--ai-systems .ai-systems-approach {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: calc(40 * var(--tgc-u)) calc(64 * var(--tgc-u));
    align-items: start;
    max-width: var(--tgc-container);
    margin: 0 auto;
    padding: 0 var(--tgc-gutter);
}

.service-page--ai-systems .ai-systems-approach__intro p {
    font-size: var(--tgc-text-body);
    line-height: 1.8;
    color: var(--tgc-ink);
}

.service-page--ai-systems .ai-systems-approach__list > * {
    margin-top: 0;
}

/* --- Showcase rows ------------------------------------------------------- */

.service-page--ai-systems .ai-systems-showcase {
    margin-top: calc(64 * var(--tgc-u));
}

.service-page--ai-systems .ai-systems-showcase .ai-systems-lead,
.service-page--ai-systems .ai-systems-showcase .ai-systems-bullets,
.service-page--ai-systems .ai-systems-showcase .ai-systems-bullets li,
.service-page--ai-systems .ai-systems-showcase .ai-systems-case__lead {
    color: inherit;
}

/* Matches the opening line on every other case study (Chirpy Heat etc.). */
.service-page--ai-systems .ai-systems-case__lead {
    font-size: var(--tgc-text-ui);
    font-weight: 600;
    line-height: 1.8;
    color: inherit;
}

.service-page--ai-systems .ai-systems-showcase .ai-systems-bullets li {
    font-size: var(--tgc-text-ui);
    line-height: 1.8;
}

@media (max-width: 768px) {
    .service-page--ai-systems .service-page__band {
        padding: 44px 0;
    }

    .service-page--ai-systems .service-page__band > * + * {
        margin-top: calc(36 * var(--tgc-u));
    }

    .service-page--ai-systems .service-page__band > .wp-block-tgc-section-heading + * {
        margin-top: calc(26 * var(--tgc-u));
    }

    .service-page--ai-systems .ai-systems-prose,
    .service-page--ai-systems .ai-systems-approach {
        padding: 0 calc(20 * var(--tgc-u));
    }

    .service-page--ai-systems .ai-systems-approach {
        grid-template-columns: 1fr;
        gap: calc(28 * var(--tgc-u));
    }

    .service-page--ai-systems .ai-systems-showcase {
        margin-top: calc(44 * var(--tgc-u));
    }

    .service-page--ai-systems .ai-systems-bullets--two {
        column-count: 1;
    }

    .service-page--ai-systems .ai-systems-subhead {
        margin-top: calc(30 * var(--tgc-u));
        font-size: var(--tgc-text-body);
    }
}

/* ===========================================================================
   Design
   =========================================================================== */
.service-page--design .service-page__section {
    position: relative;
}

.service-page--design .service-page__section--cream {
    background-color: var(--tgc-cream);
}

.service-page--design .service-page__section--white {
    background-color: var(--tgc-card);
    padding: calc(64 * var(--tgc-u)) 0 calc(80 * var(--tgc-u));
}

/* The statement block brings its own top padding under the hero. */
.service-page--design .service-page__section--intro {
    padding: 0 0 calc(40 * var(--tgc-u));
}

.service-page--design .service-page__section--approach {
    padding: calc(80 * var(--tgc-u)) 0 calc(96 * var(--tgc-u));
}

/* ------------------------------------------------- split panel body column */

.service-page--design .split-panel__body p {
    margin-bottom: calc(18 * var(--tgc-u));
    font-size: var(--tgc-text-body);
    line-height: 1.75;
    color: var(--tgc-ink-muted);
}

.service-page--design .split-panel__body p:last-child {
    margin-bottom: 0;
}

.service-page--design p.service-page__split-lead {
    margin-bottom: calc(22 * var(--tgc-u));
    font-size: var(--tgc-text-body);
    line-height: 1.6;
    color: var(--tgc-ink);
}

.service-page--design .service-page__split-subhead {
    margin: calc(40 * var(--tgc-u)) 0 calc(22 * var(--tgc-u));
    font-size: var(--tgc-text-lead);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--tgc-ink);
}

.service-page--design .service-page__disciplines {
    margin: calc(24 * var(--tgc-u)) 0 calc(28 * var(--tgc-u));
}

.service-page--design .service-page__section--white .feature-cards {
    margin-top: calc(80 * var(--tgc-u));
}

/* --------------------------------------------------------- case study rows */

.service-page--design .service-page__cases {
    margin-top: calc(66 * var(--tgc-u));
}

/* ------------------------------------------------------------ our approach */

.service-page--design .service-page__approach {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
    gap: calc(120 * var(--tgc-u));
    align-items: start;
    max-width: var(--tgc-container);
    margin: calc(44 * var(--tgc-u)) auto 0;
    padding: 0 var(--tgc-gutter);
}

.service-page--design .service-page__approach-intro p {
    margin-bottom: calc(20 * var(--tgc-u));
    font-size: var(--tgc-text-body);
    line-height: 1.75;
    color: var(--tgc-ink);
}

.service-page--design .service-page__approach-intro p:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------- closing  prose */

.service-page--design .service-page__approach + .wp-block-tgc-section-heading {
    margin-top: calc(88 * var(--tgc-u));
}

.service-page--design .service-page__prose {
    max-width: calc(1106 * var(--tgc-u));
    margin: calc(26 * var(--tgc-u)) auto 0;
    padding: 0 var(--tgc-gutter);
    text-align: center;
}

.service-page--design .service-page__prose p {
    margin-bottom: calc(18 * var(--tgc-u));
    font-size: var(--tgc-text-body);
    line-height: 1.75;
    color: var(--tgc-ink-muted);
}

.service-page--design .service-page__prose p:last-child {
    margin-bottom: 0;
}

@media (max-width: 968px) {
    .service-page--design .service-page__approach {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }
}

@media (max-width: 768px) {
    .service-page--design .service-page__section--white {
        padding: 40px 0 48px;
    }

    .service-page--design .service-page__section--approach {
        padding: calc(48 * var(--tgc-u)) 0 calc(56 * var(--tgc-u));
    }

    .service-page--design p.service-page__split-lead {
        font-size: var(--tgc-text-body);
    }

    .service-page--design .service-page__split-subhead {
        margin-top: calc(32 * var(--tgc-u));
        font-size: var(--tgc-text-body);
    }

    .service-page--design .service-page__cases {
        margin-top: 40px;
    }

    .service-page--design .service-page__approach {
        margin-top: calc(28 * var(--tgc-u));
        padding: 0 calc(20 * var(--tgc-u));
    }

    .service-page--design .service-page__approach + .wp-block-tgc-section-heading {
        margin-top: calc(48 * var(--tgc-u));
    }

    .service-page--design .service-page__prose {
        padding: 0 calc(20 * var(--tgc-u));
    }
}

/* ===========================================================================
   Development
   =========================================================================== */
.service-page--development .service-page__section {
    padding: calc(88 * var(--tgc-u)) 0;
}

.service-page--development .service-page__section--intro {
    background-color: var(--tgc-cream);
    padding-bottom: calc(96 * var(--tgc-u));
}

.service-page--development .service-page__section--work {
    background-color: var(--tgc-card);
    padding: calc(96 * var(--tgc-u)) 0 calc(104 * var(--tgc-u));
}

.service-page--development .service-page__section--why {
    background-color: var(--tgc-cream);
    padding: calc(96 * var(--tgc-u)) 0 calc(40 * var(--tgc-u));
}

/* ------------------------------ intro: statement above the split panel ---- */

.service-page--development .service-page__section--intro > * + * {
    margin-top: calc(72 * var(--tgc-u));
}

/* The lead line above the supporting prose sits in ink, a step up in size. */
.service-page--development .service-development__lead {
    color: var(--tgc-ink);
    font-size: var(--tgc-text-lead);
    font-weight: 500;
    line-height: 1.5;
}

/* -------------------- work: the two wide cards and the case-study rows ---- */

.service-page--development .service-development__cases {
    margin-top: calc(96 * var(--tgc-u));
}

/* ---------- why: intro left, numbered accordion right --------------------- */

.service-page--development .service-development__why {
    max-width: var(--tgc-container);
    margin: calc(56 * var(--tgc-u)) auto 0;
    padding: 0 var(--tgc-gutter);
    display: grid;
    grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
    gap: calc(40 * var(--tgc-u));
    align-items: start;
}

.service-page--development .service-development__why-intro p {
    max-width: 42ch;
    font-size: var(--tgc-text-body);
    line-height: 1.75;
    color: var(--tgc-ink-muted);
}

.service-page--development .service-development__why-list > * {
    margin-top: 0;
}

/* ------------------------------------------------------------ closing prose */

.service-page--development .service-development__why + .wp-block-tgc-section-heading {
    margin-top: calc(112 * var(--tgc-u));
}

.service-page--development .service-development__outro {
    max-width: calc(1164 * var(--tgc-u));
    margin: calc(28 * var(--tgc-u)) auto 0;
    padding: 0 var(--tgc-gutter);
    text-align: center;
}

.service-page--development .service-development__outro p {
    font-size: var(--tgc-text-body);
    line-height: 1.8;
    color: var(--tgc-ink-muted);
    text-wrap: pretty;
}

.service-page--development .service-development__outro p + p {
    margin-top: calc(20 * var(--tgc-u));
}

@media (max-width: 768px) {
    .service-page--development .service-page__section {
        padding: 56px 0;
    }

    .service-page--development .service-page__section--intro {
        padding-bottom: calc(56 * var(--tgc-u));
    }

    .service-page--development .service-page__section--work {
        padding: calc(56 * var(--tgc-u)) 0;
    }

    .service-page--development .service-page__section--why {
        padding: calc(56 * var(--tgc-u)) 0 calc(24 * var(--tgc-u));
    }

    .service-page--development .service-page__section--intro > * + * {
        margin-top: calc(40 * var(--tgc-u));
    }

    .service-page--development .service-development__why {
        grid-template-columns: minmax(0, 1fr);
        gap: calc(28 * var(--tgc-u));
        padding: 0 calc(20 * var(--tgc-u));
        margin-top: calc(32 * var(--tgc-u));
    }

    .service-page--development .service-development__why-intro p {
        max-width: none;
    }

    .service-page--development .service-development__cases {
        margin-top: calc(56 * var(--tgc-u));
    }

    .service-page--development .service-development__why + .wp-block-tgc-section-heading {
        margin-top: calc(64 * var(--tgc-u));
    }

    .service-page--development .service-development__outro {
        padding: 0 calc(20 * var(--tgc-u));
        text-align: left;
    }

    .service-page--development .service-development__lead {
        font-size: var(--tgc-text-body);
    }
}

/* ===========================================================================
   Audits
   =========================================================================== */
.service-page--audits {
    background-color: var(--tgc-cream);
    overflow-x: clip;
}

.service-page--audits .service-audits__section {
    padding: var(--tgc-section-half) 0;
}

/* --- Cream: statement + "what our audits cover" split panel --------------- */

.service-page--audits .service-audits__cover {
    background-color: var(--tgc-cream);
    padding: calc(104 * var(--tgc-u)) 0 var(--tgc-section-half);
}

.service-page--audits .service-audits__panel {
    margin-top: var(--tgc-section);
}

/* The opening line of the panel prose: same as the lead on Development. */
.service-page--audits .split-panel__lead {
    font-size: var(--tgc-text-lead);
    font-weight: 500;
    line-height: 1.5;
    color: var(--tgc-ink);
}

/* --- White: why commission an audit + what you get ----------------------- */

.service-page--audits .service-audits__why {
    background-color: var(--tgc-card);
    padding: var(--tgc-section-half) 0;
}

.service-page--audits .service-audits__cards {
    margin-top: var(--tgc-heading-gap);
}

.service-page--audits .service-audits__output {
    margin-top: var(--tgc-section);
}

.service-page--audits .service-audits__output .check-grid {
    margin-top: calc(44 * var(--tgc-u));
}

.service-page--audits .service-audits__audiences .audience-pills {
    margin-top: var(--tgc-heading-gap);
}

.service-page--audits .service-audits__lead {
    max-width: calc(928 * var(--tgc-u));
    margin: calc(26 * var(--tgc-u)) auto 0;
    padding: 0 var(--tgc-gutter);
    font-size: var(--tgc-text-body);
    line-height: 1.7;
    color: var(--tgc-ink-muted);
    text-align: center;
}

/* --- Cream: who the audits suit + closing prose -------------------------- */

.service-page--audits .service-audits__audiences {
    background-color: var(--tgc-cream);
    padding: var(--tgc-section-half) 0 var(--tgc-section-half);
}

.service-page--audits .service-audits__closing {
    margin-top: var(--tgc-section);
}

.service-page--audits .service-audits__prose {
    max-width: calc(954 * var(--tgc-u));
    margin: calc(34 * var(--tgc-u)) auto 0;
    padding: 0 var(--tgc-gutter);
    text-align: center;
}

.service-page--audits .service-audits__prose p {
    font-size: var(--tgc-text-body);
    line-height: 1.75;
    color: var(--tgc-ink-muted);
}

.service-page--audits .service-audits__prose p + p {
    margin-top: calc(20 * var(--tgc-u));
}

@media (max-width: 1024px) {
    .service-page--audits .service-audits__panel {
        margin-top: 84px;
    }

    .service-page--audits .service-audits__output,
    .service-page--audits .service-audits__closing {
        margin-top: calc(80 * var(--tgc-u));
    }
}

@media (max-width: 768px) {
    .service-page--audits .service-audits__section {
        padding: 48px 0;
    }

    .service-page--audits .service-audits__cover {
        padding: calc(60 * var(--tgc-u)) 0 calc(40 * var(--tgc-u));
    }

    .service-page--audits .service-audits__why {
        padding: calc(48 * var(--tgc-u)) 0;
    }

    .service-page--audits .service-audits__audiences {
        padding: calc(48 * var(--tgc-u)) 0 calc(72 * var(--tgc-u));
    }

    .service-page--audits .service-audits__panel {
        margin-top: calc(56 * var(--tgc-u));
    }

    .service-page--audits .service-audits__cards {
        margin-top: calc(32 * var(--tgc-u));
    }

    .service-page--audits .service-audits__output,
    .service-page--audits .service-audits__closing {
        margin-top: calc(60 * var(--tgc-u));
    }

    .service-page--audits .split-panel__lead {
        font-size: var(--tgc-text-body);
    }

    .service-page--audits .service-audits__lead,
    .service-page--audits .service-audits__prose {
        padding: 0 calc(20 * var(--tgc-u));
    }
}

/* ---------------------------------------------------------------------------
   Ordinary content on a block page

   page.php no longer wraps the_content() in .content-wrapper, because the
   full-bleed blocks (hero, logo strip, case studies, contact CTA) have to
   reach the viewport edge. Plain prose would otherwise run edge to edge too,
   so constrain anything that is NOT one of the theme's own blocks back to the
   container width. Theme blocks opt out - each handles its own inner
   max-width - as do group wrappers, which the patterns use as bands.
   --------------------------------------------------------------------------- */
.block-page > *:not([class*="wp-block-tgc-"]):not(.service-page):not(.alignfull):not([class*="wp-block-group"]) {
    max-width: var(--tgc-container);
    margin-inline: auto;
    padding-inline: var(--tgc-gutter);
}

@media (max-width: 768px) {
    .block-page > *:not([class*="wp-block-tgc-"]):not(.service-page):not(.alignfull):not([class*="wp-block-group"]) {
        padding-inline: 20px;
    }
}

/* ------------------------------------------------------------------ */
/* Section rhythm                                                      */

/*
 * Figma puts exactly 150 between consecutive content groups on every service
 * page — five gaps on Audits, two on Consulting, and no other value appears in
 * either. The colour bands meet in the middle of that gap, so each one carries
 * half of it and two adjacent bands add back up to 150.
 *
 * This comes last so it settles the boundaries for every page at once; the
 * per-page rules above are free to space things inside a band.
 */
.service-page > .service-page__band,
.service-page > .service-page__section,
.service-page > .service-audits__section {
    padding-top: var(--tgc-section-half);
    padding-bottom: var(--tgc-section-half);
}

/* The hero is a full-bleed band with no gap of its own, so the first section
   under it carries the whole 228 Figma leaves below the violet. */
.service-page > *:has(.service-hero) + * {
    padding-top: calc(228 * var(--tgc-u));
}

/* The contact panel closes the page, so it supplies the half the band above
   it does not — rather than the 80 it uses on the homepage. */
.service-page .contact-cta {
    margin-top: var(--tgc-section-half);
}

/*
 * Phones: with the title now under the short violet box (service-hero.css),
 * the statement and the copy move straight up after it. The two further
 * copies of the mark are dropped, so it appears once, in the violet.
 */
@media (max-width: 768px) {
    .service-page > *:has(.service-hero) + * {
        padding-top: 0;
    }

    .service-page .statement {
        padding-top: 28px;
        padding-bottom: 28px;
    }

    .service-page .statement__motif,
    .service-page .split-panel__figure {
        display: none;
    }

    .service-page .statement__title {
        margin-top: 0;
    }

    /*
     * "First paragraph ... has too much padding above it." Under the
     * statement it was the statement's own 72 plus whatever each page put
     * between the two blocks, 92 to 129 in all. It closes up to the 28 the
     * statement has above it, so title, statement and copy read as one run.
     */
    .service-page .wp-block-group > .wp-block-tgc-statement + * {
        margin-top: 0;
    }

    .service-page .wp-block-tgc-statement + .split-panel,
    .service-page .wp-block-tgc-statement + * > .split-panel:first-child {
        padding-top: 0;
    }

    /*
     * "First paragraph is in bold" (and on AI systems "is massive"). On
     * desktop the opening line steps up in size and weight beside the big
     * mark; here it is set like Design's, which the client was happy with:
     * body size and weight, in ink.
     */
    .service-page .split-panel__body > .service-development__lead,
    .service-page .split-panel__body > .split-panel__lead,
    .service-page .split-panel__body > .ai-systems-lead,
    .service-page .split-panel__body > .consulting-lead {
        font-size: var(--tgc-text-body);
        font-weight: 400;
        line-height: 1.6;
    }
}