/*  /css/Custom/FlexiblePage/flexible-page.css
    Flexible Page template — block-grid band styles.
    First consumer: the AI Services page (design direction 1a,
    "The Compounding Return").

    Scoped under `main.flexible-page` so it cannot leak into the 37 pages still
    on masterLayout, or into StrategyPage.

    Palette judged in UAT 2026-08-07: the BRAND colours won — navy #333366
    and gold #ffc400 replace the handoff's #211F54/#F5B72B (team call).
    Shadow tints follow the navy. The indigo/periwinkle accent family stays
    from the design pending any further brand direction.
    ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

main.flexible-page {
    /* ----- Colour ----- */
    --fp-navy:          #333366;
    --fp-indigo:        #3B4BC8;
    --fp-indigo-deep:   #5C61C0;
    --fp-periwinkle:    #8E92D8;
    --fp-lavender:      #A9A5E0;
    --fp-gold:          #ffc400;

    --fp-body:          #5C5A82;
    --fp-body-alt:      #4A4870;
    --fp-body-dark:     #3D3B63;
    --fp-body-on-navy:  #CFCFE6;

    --fp-line:          #E4E4F0;
    --fp-line-soft:     #E8E8F2;
    --fp-line-grid:     #DDDDEB;
    --fp-line-timeline: #D6D6E8;

    --fp-surface:       #FFFFFF;
    --fp-tint-panel:    #FAFAFD;
    --fp-tint-badge:    #EDEEF9;

    /* ----- Geometry ----- */
    --fp-radius-pill:   999px;
    --fp-radius-panel:  20px;
    --fp-radius-case:   18px;
    --fp-radius-card:   16px;
    --fp-radius-grid:   14px;

    --fp-shadow-panel:  0 24px 60px rgba(51, 51, 102, .14);
    --fp-shadow-card:   0 18px 44px rgba(51, 51, 102, .12);

    --fp-pad-y:         96px;
    --fp-pad-x:         24px;   /* mobile gutter only; >=992px uses the site container */

    --fp-font-head:     'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --fp-font-body:     'Roboto-Regular', Roboto, Arial, sans-serif;

    color: var(--fp-body);
    font-family: var(--fp-font-body);
    -webkit-font-smoothing: antialiased;

    /* The site header is position:fixed at 100px. Every other page clears it
       with padding-top:80px on <main> (see main.strategy-page). Match that
       exactly, or the hero sits under the nav. */
    padding-top: 80px;
}

/* ============================================================
   Container — 100px gutters like the site's .container, but capped at the
   DESIGN CONTENT width: 1064px (the 1240 prototype minus its 88px gutters).
   At the site container's 1440 the cards and columns stretch ~37% wider than
   the reference and the page stops looking like the design (Predit,
   2026-08-07). At a 1280 viewport this is within 1px of the old behaviour,
   so the pixel-pass measurements all hold. Band BACKGROUNDS stay full-bleed;
   only the inner content is inset.
       >= 992px    max-width 1064, fixed 100px gutters
       >= 1264px   max-width 1064, centred
   ============================================================ */

main.flexible-page .fp-hero__inner,
main.flexible-page .fp-statement__inner,
main.flexible-page .fp-services__intro,
main.flexible-page .fp-services__grid,
main.flexible-page .fp-principles__inner,
main.flexible-page .fp-case__header,
main.flexible-page .fp-case__inner,
main.flexible-page .fp-contact__inner {
    box-sizing: border-box;
    margin-left: var(--fp-pad-x);
    margin-right: var(--fp-pad-x);
}

@media (min-width: 992px) {
    main.flexible-page .fp-hero__inner,
    main.flexible-page .fp-statement__inner,
    main.flexible-page .fp-services__intro,
    main.flexible-page .fp-services__grid,
    main.flexible-page .fp-principles__inner,
    main.flexible-page .fp-case__header,
    main.flexible-page .fp-case__inner,
    main.flexible-page .fp-contact__inner {
        max-width: 1064px;
        margin-left: 100px;
        margin-right: 100px;
    }
}

@media (min-width: 1264px) {
    main.flexible-page .fp-hero__inner,
    main.flexible-page .fp-statement__inner,
    main.flexible-page .fp-services__intro,
    main.flexible-page .fp-services__grid,
    main.flexible-page .fp-principles__inner,
    main.flexible-page .fp-case__header,
    main.flexible-page .fp-case__inner,
    main.flexible-page .fp-contact__inner {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Bootstrap and custom.css both set aggressive heading rules site-wide;
   re-assert inside the page so bands render as designed. */
main.flexible-page h1,
main.flexible-page h2,
main.flexible-page h3 {
    font-family: var(--fp-font-head);
    color: var(--fp-navy);
    margin: 0;
    text-wrap: pretty;
}

/* The site layout wraps every page in .body-content.pb-5 (48px, !important).
   The design runs the contact gradient band straight into the footer, so
   remove it for flexible pages only (Predit, 2026-08-07). */
.body-content.pb-5:has(> main.flexible-page) { padding-bottom: 0 !important; }

main.flexible-page p { margin: 0; }
main.flexible-page ul,
main.flexible-page ol { margin: 0; padding: 0; list-style: none; }

/* ============================================================
   Shared primitives
   ============================================================ */

main.flexible-page .fp-eyebrow {
    font-family: var(--fp-font-head);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--fp-periwinkle);
}

main.flexible-page .fp-h2 {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.015em;
}

main.flexible-page .fp-lead {
    font-size: 18px;
    line-height: 1.65;
    color: var(--fp-body);
}

main.flexible-page .fp-body {
    font-size: 17px;
    line-height: 1.7;
    color: var(--fp-body);
}

main.flexible-page .fp-rule {
    width: 150px;
    height: 4px;
    background: var(--fp-gold);
    margin: 34px 0 30px;
}

/* ----- Buttons ----- */
/* line-height is pinned, not left to the font: the default computed to a 57px
   button against the reference's 53px (screenshots/01-hero.png, y 541..593). */
main.flexible-page .fp-btn {
    display: inline-block;
    font-family: var(--fp-font-head);
    font-size: 15px;
    font-weight: 600;
    line-height: 19px;
    padding: 16px 30px;
    border-radius: var(--fp-radius-pill);
    text-decoration: none;
    transition: all .2s;
}

main.flexible-page .fp-btn--solid {
    background: var(--fp-navy);
    color: #fff;
    border: 1px solid var(--fp-navy);
}
main.flexible-page .fp-btn--solid:hover { background: var(--fp-indigo); border-color: var(--fp-indigo); color: #fff; }

main.flexible-page .fp-btn--outline {
    background: transparent;
    color: var(--fp-navy);
    border: 1px solid var(--fp-navy);
}
main.flexible-page .fp-btn--outline:hover { background: var(--fp-navy); color: #fff; }

/* Anchor targets (#services, #contact) must clear the 100px fixed header —
   without this the band lands underneath it (Predit, 2026-08-07). */
main.flexible-page .fp-services,
main.flexible-page .fp-contact {
    scroll-margin-top: 100px;
}

/* The prototype set `outline:none`. Never ship that — restore a visible ring. */
main.flexible-page a:focus-visible,
main.flexible-page button:focus-visible {
    outline: 2px solid var(--fp-indigo);
    outline-offset: 3px;
}

/* ============================================================
   1. Hero  (splitHero)
   ============================================================ */

/* Vertical rhythm below is measured against screenshots/01-hero.png, taking the
   hero's own top edge as y=0. Reference ink positions: eyebrow 125, H1 167 and
   239, lead 383/415/446/477, gold rule 341, button 541..593. */
main.flexible-page .fp-hero {
    position: relative;
    overflow: hidden;
    /* NB: .fp-hero__inner is align-items:center, so changing the left column's
       height moves its top by HALF the delta. Tune the eyebrow gap first, then
       this padding — not both at once. */
    padding: 104px 0 var(--fp-pad-y);
    background: linear-gradient(135deg, #F6F6FC 0%, #EDEEF9 46%, #E2E4F6 100%);
}

/* The reference leaves 35px between the eyebrow and the H1; the default
   inherited gap was 11px. */
main.flexible-page .fp-hero .fp-eyebrow { margin-bottom: 24px; }

/* Decorative circle, top-right of the hero — the prototype's LITERAL element
   (AI Services Page 1a.dc.html): a 620px box clipped to a circle
   (border-radius:50%) holding an off-centre glow. Because the gradient's
   centre sits at 30%/30% while the clip is the full circle, the glow is
   still visible where the lower-left rim cuts it — that crisp curved rim is
   IN THE DESIGN ("the curvy line", Predit 2026-08-07). Two earlier readings
   were wrong: first a square box (renders the rim's near-vertical segment
   as a straight edge), then an unclipped soft glow (no rim at all). Keep
   the border-radius; keep the hard rim. */
main.flexible-page .fp-hero__blob {
    position: absolute;
    top: -180px;
    right: -140px;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 30% 30%,
                rgba(142, 146, 216, .38),
                rgba(142, 146, 216, 0) 68%);
}

/* Once the container centres (>=1264px), the circle must follow the content:
   viewport-anchored it drifts into empty space on wide monitors. At the
   design width its right edge sits 228px past the content edge; centred
   content's right edge is 50% + 532px. */
@media (min-width: 1264px) {
    main.flexible-page .fp-hero__blob { right: calc(50% - 760px); }
}

main.flexible-page .fp-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 72px;
    align-items: center;
}

main.flexible-page .fp-hero__title {
    font-size: 70px;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.02em;
}

main.flexible-page .fp-hero__lead {
    max-width: 490px;
    font-size: 19px;
    line-height: 1.65;
    color: var(--fp-body-alt);
}

main.flexible-page .fp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 41px;   /* reference puts the button top at y=541 */
}

main.flexible-page .fp-hero__panel {
    background: var(--fp-surface);
    border-radius: var(--fp-radius-panel);
    padding: 44px 42px;
    box-shadow: var(--fp-shadow-panel);
}

main.flexible-page .fp-points { margin-top: 22px; }

main.flexible-page .fp-point {
    display: flex;
    gap: 20px;
    padding: 24px 0;
    border-top: 1px solid var(--fp-line-soft);
}
main.flexible-page .fp-point:first-child { border-top: 0; padding-top: 0; }
main.flexible-page .fp-point:last-child { padding-bottom: 0; }

main.flexible-page .fp-point__num {
    flex: 0 0 44px;
    font-family: var(--fp-font-head);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--fp-periwinkle);
}

main.flexible-page .fp-point__title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}

main.flexible-page .fp-point__text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--fp-body);
}

/* ============================================================
   2. Statement band  (statementBand) — "Tangible ROI"
   ============================================================ */

main.flexible-page .fp-statement {
    padding: var(--fp-pad-y) 0;
    background: var(--fp-surface);
}

main.flexible-page .fp-statement--dark {
    background: var(--fp-navy);
}

main.flexible-page .fp-statement__inner {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;
    align-items: start;
}

main.flexible-page .fp-statement--dark .fp-statement__heading { color: #fff; }

main.flexible-page .fp-statement__body p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--fp-body);
    margin-bottom: 22px;
}
main.flexible-page .fp-statement__body p:last-child { margin-bottom: 0; }
main.flexible-page .fp-statement--dark .fp-statement__body p { color: var(--fp-body-on-navy); }

/* 32px top, not the handoff prose's 10px: the reference puts the quote 32px
   under the last paragraph (prototype = 22px flex gap + 10px margin; measured
   at rows 394->425 in 02-tangible-roi.png). Our paragraph margin-bottom:22
   collapses into this, so 32 is what actually renders. */
main.flexible-page .fp-pullquote {
    margin: 32px 0 0;
    padding: 22px 26px;
    border-left: 3px solid var(--fp-gold);
    background: rgba(51, 51, 102, .04);
    font-family: var(--fp-font-head);
    font-size: 17px;
    font-weight: 500;
    font-style: italic;
    color: var(--fp-navy);
}
main.flexible-page .fp-statement--dark .fp-pullquote {
    background: rgba(255, 255, 255, .05);
    color: #fff;
}

/* ============================================================
   3. Services grid  (serviceCardGrid)
   ============================================================ */

/* padding-top 98, not the design's nominal 100: the site's inherited eyebrow
   line-height (18px vs the prototype's ~14.6px) seats the eyebrow ink 2px low.
   Same class of compensation as the hero's margin-bottom:24. */
main.flexible-page .fp-services {
    padding: 98px 0 100px;
    background: var(--fp-surface);
}

/* Width cap goes on the CHILDREN, never the intro itself: the intro is one of
   the container-mirror elements, so a max-width here gets centred by the
   >=1440px margin:auto rule — the whole block drifted to the middle of the
   screen on wide monitors (Predit caught it, 2026-08-07). */
main.flexible-page .fp-services__intro {
    margin-bottom: 56px;
}
main.flexible-page .fp-services__intro > * {
    max-width: 660px;
}
/* margin-top 18 (not 14): reference eyebrow-ink -> H2-ink gap is 30px
   (03-services-grid.png rows 111->141); 14 rendered 26. */
main.flexible-page .fp-services__intro .fp-h2 { margin: 18px 0 18px; }

main.flexible-page .fp-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

main.flexible-page .fp-card {
    display: flex;
    flex-direction: column;
    padding: 38px 34px;
    background: var(--fp-surface);
    border: 1px solid var(--fp-line);
    border-radius: var(--fp-radius-card);
    transition: all .22s ease;
}
main.flexible-page .fp-card:hover {
    border-color: var(--fp-periwinkle);
    box-shadow: var(--fp-shadow-card);
    transform: translateY(-4px);
}

main.flexible-page .fp-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--fp-tint-badge);
    color: var(--fp-indigo);
    font-family: var(--fp-font-head);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 26px;
}

main.flexible-page .fp-card__title {
    font-size: 21px;
    font-weight: 600;
    line-height: 1.28;
    margin-bottom: 14px;
}

/* flex-grow keeps every card's CTA on the same baseline across a row */
main.flexible-page .fp-card__summary {
    flex-grow: 1;
    font-size: 15px;
    line-height: 1.7;
    color: var(--fp-body);
    margin-bottom: 24px;
}

main.flexible-page .fp-card__cta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--fp-font-head);
    font-size: 14px;
    font-weight: 600;
    color: var(--fp-indigo);
    text-decoration: none;
    transition: all .22s ease;
}
main.flexible-page .fp-card__cta:hover { gap: 16px; color: var(--fp-navy); }
main.flexible-page .fp-card__arrow { font-size: 16px; }

main.flexible-page .fp-promo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 38px 34px;
    border-radius: var(--fp-radius-card);
    background: linear-gradient(150deg, var(--fp-periwinkle), var(--fp-indigo-deep));
}
main.flexible-page .fp-promo__title { color: #fff; font-size: 21px; font-weight: 600; line-height: 1.28; margin-bottom: 14px; }
main.flexible-page .fp-promo__body { color: rgba(255, 255, 255, .88); font-size: 15px; line-height: 1.7; margin-bottom: 24px; }
main.flexible-page .fp-promo__cta {
    align-self: flex-start;
    background: #fff;
    color: var(--fp-indigo);
    font-family: var(--fp-font-head);
    font-size: 14px;
    font-weight: 600;
    padding: 13px 26px;
    border-radius: var(--fp-radius-pill);
    text-decoration: none;
    transition: all .2s;
}
main.flexible-page .fp-promo__cta:hover { background: var(--fp-gold); color: var(--fp-navy); }

/* ============================================================
   4. Responsible AI  (principleGrid)
   ============================================================ */

main.flexible-page .fp-principles {
    padding: var(--fp-pad-y) 0;
    background: linear-gradient(120deg, #F6F6FC, #E9EAF7);
}

main.flexible-page .fp-principles__inner {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 76px;
    align-items: start;
}
/* 17/22 margins measured against 04-responsible-ai.png (H2 ink 136, body 297);
   the nominal 14/18 rendered 3px and 7px tight. */
main.flexible-page .fp-principles__copy .fp-h2 { font-size: 40px; margin: 17px 0 22px; }

/* The 1px gap over a tinted background draws the dividers — not per-cell
   borders, which would double up to 2px on every internal edge. */
main.flexible-page .fp-principles__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--fp-line-grid);
    border: 1px solid var(--fp-line-grid);
    border-radius: var(--fp-radius-grid);
    overflow: hidden;
}

main.flexible-page .fp-principle {
    background: var(--fp-surface);
    /* bottom 33: each cell row rendered 1px short of the reference (14px/1.7
       line-box rounding), accumulating to -3 on the grid; +1/row corrects it. */
    padding: 32px 30px 33px;
}
main.flexible-page .fp-principle__title { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
main.flexible-page .fp-principle__body { font-size: 14px; line-height: 1.7; color: var(--fp-body); }

/* ============================================================
   5. Case study  (caseStudyBand)
   ============================================================ */

main.flexible-page .fp-case {
    padding: 100px 0;
    background: var(--fp-surface);
}

main.flexible-page .fp-case__header {
    display: flex;
    align-items: center;
    gap: 20px;
    /* 41, not the nominal 44: the header eyebrow's 18px inherited line box
       seats the grid 3px low vs 05-case-study.png (panel border row 163). */
    margin-bottom: 41px;
}
main.flexible-page .fp-case__rule {
    flex-grow: 1;
    height: 1px;
    background: var(--fp-line);
}

main.flexible-page .fp-case__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start;
}

/* .fp-case__client removed 2026-08-07: the design renders the client label
   inside the H2 itself, one string, one style (Predit-confirmed). Later the
   same day the team replaced the label text with the client's LOGO and asked
   for a smaller headline (40 -> 32) so the narrative column doesn't tower
   over the panel with white space. */
main.flexible-page .fp-case__client-row {
    display: flex;
    flex-wrap: wrap;    /* narrow columns: the tag drops below the logo whole */
    align-items: center;
    gap: 10px 18px;
    margin-bottom: 28px;
}
main.flexible-page .fp-case__logo {
    display: block;
    height: 40px;
    width: auto;
}
/* The descriptor beside the logo speaks the page's small-caps label
   language (same voice as the CLIENT PROOF eyebrow above it). */
main.flexible-page .fp-case__client-tag {
    font-family: var(--fp-font-head);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--fp-periwinkle);
    white-space: nowrap;   /* the tag must never wrap beside the logo */
    padding-top: 4px;      /* optically centre against the logo's cap height */
}
main.flexible-page .fp-case__narrative .fp-h2 { font-size: 32px; line-height: 1.2; margin-bottom: 24px; }

main.flexible-page .fp-case__body p {
    font-size: 17px;
    line-height: 1.75;
    color: var(--fp-body);
    margin-bottom: 18px;
}
main.flexible-page .fp-case__narrative .fp-btn { margin-top: 12px; padding: 15px 28px; }

main.flexible-page .fp-case__panel {
    background: var(--fp-tint-panel);
    border: 1px solid var(--fp-line);
    border-radius: var(--fp-radius-case);
    padding: 44px 40px;
}

main.flexible-page .fp-timeline { margin-top: 27px; }  /* step-1 title ink at 252 per reference */

/* The pitch padding lives on the BODY, not the step row: the marker column
   must span the full row so the connector reaches down to the next step
   (reference: dot+connector are one continuous line, rows 255..351, with only
   the 6px dot-margin break before the next dot). */
main.flexible-page .fp-step {
    display: flex;
    gap: 22px;
}
main.flexible-page .fp-step__body {
    padding-bottom: 31px;   /* step pitch 103px per reference; 30 rendered 102 */
}
main.flexible-page .fp-step--last .fp-step__body { padding-bottom: 0; }

main.flexible-page .fp-step__marker {
    flex: 0 0 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

main.flexible-page .fp-step__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--fp-indigo);
    margin-top: 6px;
}
/* Final step lands on gold — it is the outcome, not another stage. */
main.flexible-page .fp-step--last .fp-step__dot { background: var(--fp-gold); }

main.flexible-page .fp-step__connector {
    flex-grow: 1;
    width: 1px;
    background: var(--fp-line-timeline);
    /* no margin: the connector fuses to the dot's bottom edge (reference) */
}

/* margin-bottom 5, not 8: the title's 19.2px line box renders the title->text
   ink gap at 16px where the reference shows 13px; +3 per step compounded to a
   9px-taller panel. */
main.flexible-page .fp-step__title { font-size: 16px; font-weight: 600; margin-bottom: 5px; }
main.flexible-page .fp-step__text { font-size: 14px; line-height: 1.7; color: var(--fp-body); }

main.flexible-page .fp-case__unlocked {
    margin-top: 32px;   /* holds the footer eyebrow at ref row 746 after the +1/step change */
    padding-top: 28px;
    border-top: 1px solid var(--fp-line);
}
main.flexible-page .fp-case__unlocked-text {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--fp-body-dark);
}

/* ============================================================
   6. Contact  (contactBand)

   The form itself is styled by the shared DigitalFirst Forms theme
   (/css/Custom/Form/digital-first-form.css). Nothing here restyles it --
   it already renders the designed card, chips and all.
   ============================================================ */

main.flexible-page .fp-contact {
    padding: var(--fp-pad-y) 0;
    background: linear-gradient(125deg, #F6F6FC, #E4E6F5);
}

main.flexible-page .fp-contact__inner {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 64px;
    align-items: center;
}

/* 18/22 margins: reference gaps are eyebrow->H2 29px, H2->intro 31px
   (06-contact.png rows 314->343, 428->459); nominal 14/18 rendered 25/27. */
main.flexible-page .fp-contact__copy .fp-h2 { font-size: 40px; margin: 18px 0 22px; }
main.flexible-page .fp-contact__copy .fp-body { font-size: 17px; line-height: 1.75; }

main.flexible-page .fp-contact__steps { margin: 28px 0; }  /* intro->step-1 ink gap 44px per reference */

main.flexible-page .fp-contact__step {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
}

main.flexible-page .fp-contact__num {
    flex: 0 0 22px;
    font-family: var(--fp-font-head);
    font-size: 13px;
    font-weight: 700;
    color: var(--fp-periwinkle);
    padding-top: 2px;
}

main.flexible-page .fp-contact__step-text {
    font-size: 15px;
    line-height: 1.65;
    color: var(--fp-body);
}
main.flexible-page .fp-contact__step-text strong {
    font-family: var(--fp-font-head);
    font-weight: 600;
    color: var(--fp-navy);
}

main.flexible-page .fp-contact__details {
    display: flex;
    flex-direction: column;
    gap: 4px;           /* phone->email ink pitch 25px per reference */
    margin-top: 35px;   /* step-3 -> phone ink gap 44px per reference */
}
main.flexible-page .fp-contact__phone {
    font-family: var(--fp-font-head);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.2;   /* the inherited 24px box pushed the email 5px low */
    color: var(--fp-navy);
    text-decoration: none;
}
main.flexible-page .fp-contact__email {
    font-size: 15px;
    color: var(--fp-body-alt);
    text-decoration: none;
}
main.flexible-page .fp-contact__phone:hover,
main.flexible-page .fp-contact__email:hover { color: var(--fp-indigo); }

/* The shared forms theme gives .df-card page-band margins (2.4em/3.2em) and its
   wrapper 10px padding — right for /contact-us/, wrong inside this band, where
   the design seats the card on the grid alone. Neutralise the CONTAINER only;
   nothing inside the card is touched. */
main.flexible-page .fp-contact__form .umbraco-forms-form { padding: 0; }
main.flexible-page .fp-contact__form .df-card { margin: 0; }

/* At this band's design-width card (590px) the theme's 17px field font wraps
   the situation placeholder onto a second line ("...will be..." — lone word).
   Placeholder text only, all fields for consistency; typed text stays 17px.
   (On /contact-us/ the card is wider and the same string fits — untouched.) */
main.flexible-page .fp-contact__form ::placeholder { font-size: 15px; }

/* ============================================================
   Responsive
   The prototype was desktop-only at 1240px; these breakpoints are the
   handoff's stated required behaviour.
   ============================================================ */

@media (max-width: 1024px) {
    main.flexible-page .fp-services__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    main.flexible-page {
        --fp-pad-y: 64px;
        --fp-pad-x: 40px;
    }
    main.flexible-page .fp-hero__inner,
    main.flexible-page .fp-principles__inner,
    main.flexible-page .fp-case__inner,
    main.flexible-page .fp-statement__inner,
    main.flexible-page .fp-contact__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    main.flexible-page .fp-statement,
    main.flexible-page .fp-contact { padding: var(--fp-pad-y) 0; }
    main.flexible-page .fp-hero { padding: 72px 0 var(--fp-pad-y); }
    main.flexible-page .fp-services,
    main.flexible-page .fp-case { padding: var(--fp-pad-y) 0; }
    main.flexible-page .fp-hero__title { font-size: 52px; }
    main.flexible-page .fp-h2 { font-size: 34px; }
}

@media (max-width: 640px) {
    main.flexible-page {
        --fp-pad-y: 56px;
        --fp-pad-x: 24px;
    }
    main.flexible-page .fp-services__grid,
    main.flexible-page .fp-principles__grid { grid-template-columns: 1fr; }
    main.flexible-page .fp-hero__title { font-size: 40px; }
    main.flexible-page .fp-h2,
    main.flexible-page .fp-principles__copy .fp-h2,
    main.flexible-page .fp-case__narrative .fp-h2 { font-size: 28px; }
    main.flexible-page .fp-hero__lead { font-size: 17px; }
    main.flexible-page .fp-lead { font-size: 17px; }
    main.flexible-page .fp-hero__panel { padding: 32px 26px; }
    main.flexible-page .fp-case__panel { padding: 32px 26px; }
    /* Keep tap targets >= 44px */
    main.flexible-page .fp-btn { padding: 16px 28px; }
    main.flexible-page .fp-hero__actions .fp-btn { flex: 1 1 auto; text-align: center; }
}