/*
 * FR2 — blue / full-bleed section theme.
 *
 * Loaded AFTER site.css on every page. Two jobs:
 *
 *   1. Move the palette off the warm brown (#7a6a53) and onto the brand navy
 *      already sampled from the FR2 mark (#1D1B57), with a tint scale built
 *      from it.
 *   2. Make the section bands read as full-bleed alternating fields of colour
 *      rather than white blocks separated by hairlines. The bands were already
 *      edge-to-edge in markup - only the inner .shell is constrained - so this
 *      is a colour and rhythm change, not a layout rewrite.
 *
 * Kept in its own file so site.css keeps its hash (and its 234 dependent
 * pages) and so the whole treatment can be reverted by removing one <link>.
 */

:root {
    --brand:        #1D1B57;   /* sampled from the logo artwork */
    --brand-700:    #17164a;
    --brand-500:    #2E2B7A;
    --brand-300:    #8F8CC4;
    --brand-tint:   #F2F3F8;   /* pale field for alternating bands */
    --brand-tint-2: #E7E9F2;   /* border / divider inside tinted fields */
    --accent:       #1D1B57;   /* links and rules follow the brand now */
    --accent-soft:  #4B47A0;
}

/* ── Links and small chrome ─────────────────────────────────────── */

a { color: var(--brand-500); }
.site-nav a:hover, .site-nav a.is-active { color: var(--brand-500); }
.site-footer a:hover { color: var(--brand-500); }
.crumbs a:hover { color: var(--brand-500); }

/* ── Alternating full-bleed sections ────────────────────────────────
   Infradigm's page reads as a stack of coloured fields that run the full
   width of the viewport and butt directly against one another. The
   hairline borders that separated our bands undercut that, so they go. */

.band { padding: 104px 0; }

.band--soft {
    background: var(--brand-tint);
    border-top: 0;
    border-bottom: 0;
}

.band--navy,
.band--dark {
    background: var(--brand);
    color: #DCDCEC;
    border: 0;
}
.band--navy h1, .band--navy h2, .band--navy h3,
.band--dark h1, .band--dark h2, .band--dark h3 { color: #fff; }
.band--navy .band-title, .band--dark .band-title { color: #fff; }
.band--navy .band-sub,  .band--dark .band-sub  { color: #B4B1D8; }
.band--navy .band-eyebrow, .band--dark .band-eyebrow { color: var(--brand-300); }
.band--navy a, .band--dark a { color: #fff; }

.band-eyebrow { color: var(--accent-soft); }

/* ── Hero as a full-bleed navy field ────────────────────────────────
   Replaces the warm beige gradient. The programme-bar motif is kept but
   re-tinted to sit on the dark ground. */

.hero {
    background: linear-gradient(150deg, var(--brand-700) 0%, var(--brand) 55%, var(--brand-500) 100%);
    border-bottom: 0;
    padding: 128px 0 116px;
}
.hero::before {
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, .10) 0 10px,
        transparent 10px 34px
    );
}
.hero h1 { color: #fff; }
.hero h1 strong { color: #fff; }
.hero-lede { color: #C3C0E0; }

/* On the navy ground the outline button needs a light border, and the solid
   button has to invert - a navy fill on navy is invisible. */
.hero .btn { border-color: rgba(255,255,255,.45); color: #fff; }
.hero .btn:hover { background: #fff; color: var(--brand); border-color: #fff; }
.hero .btn--solid { background: #fff; color: var(--brand); border-color: #fff; }
.hero .btn--solid:hover { background: var(--brand-300); border-color: var(--brand-300); color: var(--brand-700); }

/* ── Buttons elsewhere ──────────────────────────────────────────── */

.btn { border-color: var(--brand); color: var(--brand); }
.btn:hover { background: var(--brand); color: #fff; }
.btn--solid { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn--solid:hover { background: var(--brand-500); border-color: var(--brand-500); }

.band--navy .btn, .band--dark .btn { border-color: rgba(255,255,255,.45); color: #fff; }
.band--navy .btn:hover, .band--dark .btn:hover { background: #fff; color: var(--brand); }
.band--navy .btn--solid, .band--dark .btn--solid { background: #fff; color: var(--brand); border-color: #fff; }

/* ── Cards on the tinted field ───────────────────────────────────── */

.band--soft .card { background: #fff; border-color: var(--brand-tint-2); }
.band--soft .card:hover { background: #fff; border-color: var(--brand-300); }
.card__more { color: var(--brand-500); }
.stat__num { color: var(--brand); }
.stat-row { border-top-color: var(--brand-tint-2); }

/* ── Closing CTA band, retuned to navy ──────────────────────────── */

.cta-band {
    background: var(--brand);
    border-top: 0;
    margin-top: 0;
}
.cta-band h2 { color: #fff; }
.cta-band h2 em { color: var(--brand-300); }
.cta-band p { color: #B4B1D8; }
.cta-band .cta-note { color: #8F8CC4; }
.cta-band .cta-btn { border-color: rgba(255,255,255,.45); color: #fff; }
.cta-band .cta-btn:hover { background: #fff; color: var(--brand); border-color: #fff; }
.cta-band .cta-btn--solid { background: #fff; color: var(--brand); border-color: #fff; }
.cta-band .cta-btn--solid:hover { background: var(--brand-300); border-color: var(--brand-300); color: var(--brand-700); }

/* ── Interior (prose) pages ─────────────────────────────────────────
   These have no bands at all - just an article in the editorial shell -
   so the CTA field is the only full-bleed element. Give it a little air
   above so it does not collide with the last paragraph. */

main > .cta-band { margin-top: 88px; }

/* ── Header ─────────────────────────────────────────────────────────
   A navy hairline under the nav ties the masthead to the hero below. */

.site-header { border-bottom: 1px solid var(--brand-tint-2); }
.site-nav { border-top-color: var(--brand-tint-2); }

/* ── Footer ─────────────────────────────────────────────────────── */

.site-footer { background: var(--brand-tint); border-top: 0; }

/* ── Notice / accent rules ──────────────────────────────────────── */

.notice { border-left-color: var(--brand); background: var(--brand-tint); }

@media (max-width: 720px) {
    .band { padding: 68px 0; }
    .hero { padding: 84px 0 76px; }
}

/* ── Interior page head ─────────────────────────────────────────────
   Interior pages had no full-bleed element at all: they opened straight
   into a two-column article under a hairline crumb bar. The page title
   is lifted out of the article into a navy field that runs the full
   width, so a service page opens the way the home page does. */

.page-head {
    background: var(--brand);
    padding: 44px 0 56px;
}
.page-head .shell { max-width: 1180px; }

/* The crumb bar now sits inside the navy field, so it loses its own
   border and inverts. */
.page-head .crumbs {
    border-bottom: 0;
    padding: 0;
    color: var(--brand-300);
}
.page-head .crumbs .shell { max-width: none; padding: 0; }
.page-head .crumbs a { color: var(--brand-300); }
.page-head .crumbs a:hover { color: #fff; }
.page-head .crumbs__sep { color: rgba(255,255,255,.3); }
.page-head .crumbs [aria-current="page"] { color: #fff; }

.page-head__title {
    margin-top: 22px;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 300;
    letter-spacing: -0.4px;
    color: #fff;
    max-width: 20ch;
}

/* The lifted title left a hidden stand-in inside the article for the
   stylesheets that key off .block-label; make sure nothing reserves
   space for it. */
.block-label[hidden] { display: none !important; }

/* The article no longer needs the negative pull that clipped the old
   crumb bar to the header, and it wants its own breathing room under
   the navy field. */
main > .page-head + .shell { margin-top: 56px; }
main > .crumbs:first-child { margin-top: 0; }

@media (max-width: 720px) {
    .page-head { padding: 28px 0 34px; }
    .page-head__title { font-size: 28px; margin-top: 16px; }
    main > .page-head + .shell { margin-top: 32px; }
}

/* ── Seams ──────────────────────────────────────────────────────────
   <main> carries 76px of vertical padding for prose pages. On any page
   whose first or last child is a full-bleed field, that padding shows
   as a white sliver between the header, the field and the footer -
   exactly the gap the edge-to-edge look is meant to close. */

main > .hero:first-child,
main > .page-head:first-child { margin-top: -76px; }
main > .cta-band:last-child { margin-bottom: -76px; }

@media (max-width: 720px) {
    main > .hero:first-child,
    main > .page-head:first-child { margin-top: -48px; }
    main > .cta-band:last-child { margin-bottom: -48px; }
}

/* On the home page the client wall runs straight into the closing CTA;
   drop its trailing padding so the two fields meet. */
.clients-strip { padding-bottom: 96px; }

/* ── Article column ─────────────────────────────────────────────────
   .block is a two-column grid whose first column held the page label.
   That label now lives in the navy page-head band, so the grid would
   otherwise reserve 306px of empty gutter and squeeze the prose into a
   narrow strip. Collapse it to one measured column instead - which also
   closes the "lot of blank space" the two-column layout left on pages
   with a short label and long body. */

.block:has(> .block-label[hidden]) {
    display: block;
    max-width: 820px;
}

/* Fallback for engines without :has - the hidden label still must not
   claim a grid track. */
.block-label[hidden] { display: none !important; }

/* Tables inside the article can exceed the measure; let them scroll
   rather than forcing the column wider. */
.block-body table { display: block; overflow-x: auto; max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════════
   DETAIL PASS — type, contrast, rules, icons
   Sampled from the reference: dark ground #1D2433, light ground
   #F2F0EC (warm bone, not white), body #B9BBC4 on dark / #5E5C68 on
   light, and a periwinkle #C9CBEC for the italic second clause.
   FR2's own navy (#1D1B57, from the logo) is kept as the dark field
   so the mark and the ground stay the same colour; everything else
   below follows the reference.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* Warm paper replaces the cold blue tint: it is what stops the
       light bands reading as "white gaps between blue bits". */
    --paper:       #F2F0EC;
    --paper-line:  #DDD9D2;

    /* Text on the navy ground. */
    --on-dark:      #B9BBC4;
    --on-dark-soft: #8F92A6;
    --periwinkle:   #C9CBEC;

    /* Hairline weights for each ground. */
    --rule-dark:  rgba(255,255,255,.14);
    --rule-light: #DDD9D2;

    /* Display face. The site deliberately makes no external font
       request (see site.css), so this is a system serif stack rather
       than the reference's webfont - Georgia is the closest
       transitional serif present on effectively every device. */
    --display: Georgia, "Iowan Old Style", "Palatino Linotype",
               "Book Antiqua", Palatino, "Times New Roman", serif;
}

:root {
    --arrow-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12L12 4M12 4H5.5M12 4v6.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Type: serif display, sans body ─────────────────────────────── */

.hero h1,
.band-title,
.page-head__title,
.cta-band h2,
.block-body h2 {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: -0.01em;
}

.hero h1 {
    font-size: 54px;
    line-height: 1.08;
    letter-spacing: -0.02em;
}
.hero h1 strong { font-weight: 700; }

.page-head__title { font-size: 46px; line-height: 1.1; font-weight: 400; }
.band-title { font-size: 38px; line-height: 1.18; }
.cta-band h2 { font-size: 32px; line-height: 1.2; font-weight: 400; }

/* The italic second clause is the reference's signature move: the
   sentence turns from statement to argument mid-line. */
.cta-band h2 em,
.band-title em,
.hero h1 em {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
}

/* Card and list headings stay sans - they are labels, not statements. */
.card h3, .team-card h3 { font-family: inherit; }

/* ── Contrast: warm paper, not cold tint ────────────────────────── */

.band--soft { background: var(--paper); }
.site-footer { background: var(--paper); }
.notice { background: var(--paper); }
.band--soft .card { background: #fff; border-color: var(--paper-line); }
.band--soft .card:hover { border-color: var(--brand-500); }

/* Body copy on each ground, at the reference's generous leading. */
.band--navy, .band--dark { color: var(--on-dark); }
.band--navy .band-sub, .band--dark .band-sub { color: var(--on-dark); }
.hero-lede { color: var(--on-dark); line-height: 1.7; font-size: 18px; }
.cta-band p { color: var(--on-dark); line-height: 1.7; }
.cta-band .cta-note { color: var(--on-dark-soft); }
.cta-band h2 em { color: var(--periwinkle); }
.band--navy .band-eyebrow, .band--dark .band-eyebrow { color: var(--periwinkle); }
.page-head .crumbs, .page-head .crumbs a { color: var(--periwinkle); }

/* ── Rules ──────────────────────────────────────────────────────────
   The reference divides list items with a single hairline and nothing
   else - no cards, no boxes. One token per ground so a rule is never
   invisible or heavy. */

.band--soft .stat-row,
.band--soft hr { border-color: var(--rule-light); }
.band--navy hr, .band--dark hr, .hero hr { border-color: var(--rule-dark); }

hr, .block-body hr {
    border: 0;
    border-top: 1px solid var(--rule-light);
    margin: 40px 0;
}

.band-head { border-bottom: 1px solid var(--rule-light); padding-bottom: 26px; }
.band--navy .band-head,
.band--dark .band-head { border-bottom-color: var(--rule-dark); }

/* ── Icons: one glyph, the ↗ arrow ──────────────────────────────────
   The reference uses a single north-east arrow everywhere a link goes
   somewhere, and nothing else. Drawn as a mask so it inherits
   currentColor - one definition works on navy and on paper, and
   follows every hover state without a second asset. */

.btn__arrow {
    /* replaces the → character */
    font-size: 0;
    width: 13px;
    height: 13px;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask: var(--arrow-ne) center / contain no-repeat;
    mask: var(--arrow-ne) center / contain no-repeat;
}

.card__more { display: inline-flex; align-items: center; gap: 7px; }
.card__more::after {
    content: "";
    width: 12px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask: var(--arrow-ne) center / contain no-repeat;
    mask: var(--arrow-ne) center / contain no-repeat;
    transition: transform .18s ease;
}
.card:hover .card__more::after { transform: translate(2px, -2px); }
.btn:hover .btn__arrow { transform: translate(2px, -2px); }


/* The card's "Explore" label loses its literal arrow character, now
   that the pseudo-element draws one. */
.card__more { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }

@media (max-width: 720px) {
    .hero h1 { font-size: 34px; }
    .page-head__title { font-size: 28px; }
    .band-title { font-size: 26px; }
    .cta-band h2 { font-size: 24px; }
}

/* The client wall's cells carry the same affordance as a card, so they
   get the same drawn arrow rather than a second literal character. */
.client-cell__more { display: inline-flex; align-items: center; gap: 7px; }
.client-cell__more::after {
    content: "";
    width: 11px;
    height: 11px;
    background-color: currentColor;
    -webkit-mask: var(--arrow-ne) center / contain no-repeat;
    mask: var(--arrow-ne) center / contain no-repeat;
    transition: transform .18s ease;
}
.client-cell:hover .client-cell__more::after { transform: translate(2px, -2px); }

/* ═══════════════════════════════════════════════════════════════════
   REFLOW AND PRINT
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fluid vertical rhythm ──────────────────────────────────────────
   The band paddings were fixed pixel values tuned for a 1280px
   desktop. Reflowed into a narrow viewport - a phone, or a desktop at
   300% zoom, which WCAG 1.4.10 treats as a 320px-wide viewport - those
   same values leave large empty voids between short blocks of content.
   clamp() ties them to viewport width so the rhythm compresses as the
   column narrows, instead of the page ballooning to six screens of
   whitespace. */

.hero      { padding: clamp(56px, 9vw, 128px) 0 clamp(52px, 8vw, 116px); }
.band      { padding: clamp(44px, 7vw, 104px) 0; }
.page-head { padding: clamp(22px, 3.5vw, 44px) 0 clamp(28px, 4.5vw, 56px); }
.cta-band .shell { padding-block: clamp(36px, 5.5vw, 54px) clamp(38px, 6vw, 58px); }
.stat-row  { gap: clamp(18px, 3vw, 40px); padding-top: clamp(24px, 3.5vw, 40px); }
.band-head { margin-bottom: clamp(26px, 4vw, 44px); }
main > .page-head + .shell { margin-top: clamp(28px, 4.5vw, 56px); }
main > .cta-band { margin-top: clamp(48px, 7vw, 88px); }
.clients-strip { padding-bottom: clamp(44px, 7vw, 96px); }

/* ── Print ──────────────────────────────────────────────────────────
   There was no print stylesheet at all. Two consequences: every
   .reveal block printed at opacity 0 - which is why a printed page
   came out as tall blank fields with only the odd stat visible - and
   the navy grounds burned through a cartridge for no benefit.

   Reveals are forced visible, the coloured fields drop to white with
   dark text, and the chrome that cannot be used on paper is removed.
   Link targets are printed after the text so a reference survives. */

@media print {
    .reveal, .reveal-group > * {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
    .page-veil { display: none !important; }

    /* Ink: no full-bleed colour fields on paper. */
    .hero, .band--navy, .band--dark, .band--soft,
    .page-head, .cta-band, .site-footer {
        background: #fff !important;
        color: #000 !important;
        padding-block: 18pt !important;
    }
    .hero::before { display: none !important; }
    .hero h1, .hero h1 strong, .hero h1 em,
    .page-head__title, .cta-band h2,
    .band--navy h2, .band--dark h2,
    .page-head .crumbs, .page-head .crumbs a,
    .cta-band p, .cta-band h2 em, .hero-lede { color: #000 !important; }
    .btn, .cta-btn {
        border-color: #000 !important;
        background: transparent !important;
        color: #000 !important;
    }

    /* Chrome with no function on paper. */
    .site-nav, .submenu, .site-header .version { display: none !important; }
    .site-header { position: static !important; border: 0 !important; }

    /* Keep a heading with the block it introduces. */
    h1, h2, h3, h4 { break-after: avoid; }
    .card, .stat, .client-cell, figure, table { break-inside: avoid; }

    /* A printed link is useless without its target. */
    .block-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }

    a { text-decoration: underline; }
    body { font-size: 11pt; }
}

/* ── Footer addresses ───────────────────────────────────────────────
   Postal detail sits in <address> under the Contact links rather than
   as three more anonymous <li>s, so it is machine-readable and reads
   as a place rather than a menu item. */

.footer-addr {
    font-style: normal;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-soft);
    margin-top: 16px;
}
.footer-addr__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-strong);
    margin-bottom: 3px;
}

/* Country leads, city follows: an international practice is placed by
   country first, so that carries the weight and the city sits under it. */
.footer-addr__city {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .8px;
    color: var(--text-soft);
    margin-top: 1px;
}