/* ==========================================================================
   Page kit
   --------------------------------------------------------------------------
   A design layer for the company pages — About Us, Our Values, Clients &
   Partners, Team.

   Written from scratch rather than as more patches on the theme. Those pages
   were rendering through classes built for a 2015 Bootstrap template
   (.about-section, .banner-sec, .events-conferences), and every previous
   attempt to improve them was an override fighting a rule further up the
   cascade. That is why they kept coming out flat: the underlying system had
   no type scale, no spacing scale and no surfaces, so there was nothing to
   be consistent with.

   Everything here is scoped under `.pk` on the body. Nothing outside those
   four pages can be touched by any of it, which is what makes it safe for
   this file to be as opinionated as it is.

   Three ideas, and that is the whole system:

     1. One scale for type and one for space, both fluid. Nothing is a
        magic number.
     2. Surfaces alternate so a reader can see where one idea ends and the
        next begins, without rules and boxes everywhere.
     3. Copy has a measure. Nothing runs the full width of a 1400px page.
   ========================================================================== */

.pk {
    /* ---- Type ------------------------------------------------------------
       A 1.25 scale, fluid between a phone and a large desktop. Headings are
       set tight; body copy is not. */
    --pk-display: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem);
    --pk-h2:      clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem);
    --pk-h3:      clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem);
    --pk-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
    --pk-body:    clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
    --pk-small:   0.875rem;

    /* ---- Space -----------------------------------------------------------
       Section rhythm is the single biggest thing that makes a page read as
       designed, and it was the thing most obviously missing. */
    /* The site's rhythm, not a second one. The kit used to set its own
       section spacing at nearly twice everything else, so moving between a
       company page and any other page changed how the site breathed. Its type
       scale and surfaces are still its own — only the gap is shared. */
    --pk-section:  var(--sec-rhythm, clamp(48px, 6vw, 96px));
    --pk-block:    clamp(2rem, 1.2rem + 3vw, 4rem);
    --pk-gap:      clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
    --pk-gutter:   clamp(1.25rem, 0.5rem + 3vw, 4rem);

    /* ---- Colour ----------------------------------------------------------
       Two surfaces and one accent. More than that and alternating stops
       meaning anything. */
    --pk-ink:      #0f1b26;
    --pk-body-ink: #55616f;
    --pk-muted:    #7b8593;
    --pk-line:     #e3e9f1;
    --pk-surface:  #ffffff;
    --pk-surface-2:#f5f8fb;
    --pk-brand:    #0070ad;
    --pk-brand-dk: #005580;
    --pk-radius:   18px;
}

/* --------------------------------------------------------------------------
   Reset just enough
   -------------------------------------------------------------------------- */

.pk main { color: var(--pk-body-ink); }

.pk main h1, .pk main h2, .pk main h3, .pk main h4 {
    color: var(--pk-ink);
    letter-spacing: -0.018em;
    text-wrap: balance;
}

.pk main p { color: var(--pk-body-ink); }

/* The theme's section paddings are replaced wholesale rather than adjusted:
   pt-7/pb-7 and mt-5 are what made the rhythm arbitrary. */
.pk main section {
    padding-top: var(--pk-section) !important;
    padding-bottom: var(--pk-section) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/*
 * …but the editor's own spacing choice still decides which step of the scale.
 *
 * A first version of this collapsed every section to one padding, which read
 * evenly and quietly took the Vertical spacing control away: an editor could
 * set Compact or Generous and nothing moved. The scale is the kit's, the step
 * is theirs.
 */
.pk main .sec-pad-none > section { padding-block: 0 !important; }
.pk main .sec-pad-sm   > section { padding-block: var(--pk-block) !important; }
.pk main .sec-pad-md   > section { padding-block: var(--pk-section) !important; }
.pk main .sec-pad-lg   > section { padding-block: calc(var(--pk-section) * 1.35) !important; }

/* The banner keeps its own generous padding — it is a header, not a section. */
.pk main .page-title-banner { padding-top: 0 !important; padding-bottom: 0 !important; }

.pk main .container { padding-inline: var(--pk-gutter); max-width: 1320px; }

/* Two sections on the same surface read as one long section. Alternating is
   how the eye finds the seams. */
.pk main .sec-wrap { padding-block: 0; }
.pk main .sec-bg-light,
.pk main .sec-bg-soft { background: var(--pk-surface-2); }

/* --------------------------------------------------------------------------
   Section headings
   --------------------------------------------------------------------------
   One pattern everywhere: an optional eyebrow, a heading, and a lead
   paragraph on a measure. Centred only where the section asks for it.
   -------------------------------------------------------------------------- */

.pk main .heading {
    padding: 0 0 var(--pk-block);
    margin: 0;
    max-width: none;
    text-align: left;
}

.pk main .heading h2 {
    font-size: var(--pk-h2);
    font-weight: 500;
    line-height: 1.12;
    margin: 0 0 0.5em;
    max-width: 22ch;
}

.pk main .heading > p {
    font-size: var(--pk-lead);
    line-height: 1.6;
    max-width: 62ch;
    margin: 0;
    color: var(--pk-body-ink);
}

.pk main .sec-align-center .heading { text-align: center; }
.pk main .sec-align-center .heading h2,
.pk main .sec-align-center .heading > p { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Page banner
   --------------------------------------------------------------------------
   Editorial rather than a photograph with a scrim: the title is the point,
   and it should not depend on somebody having uploaded artwork.
   -------------------------------------------------------------------------- */

.pk .page-title-banner {
    position: relative;
    min-height: clamp(300px, 42vh, 460px);
    display: flex;
    align-items: flex-end;
    background-color: #08243b;
    overflow: hidden;
}

.pk .page-title-banner > .container {
    padding-block: clamp(2.5rem, 1rem + 6vw, 5.5rem);
}

.pk .page-title-banner h1 {
    font-size: var(--pk-display);
    font-weight: 400;
    line-height: 1.04;
    color: #fff;
    max-width: 16ch;
    margin: 0;
    padding-top: 1.25rem;
}

.pk .page-title-banner h1::before {
    width: 72px;
    height: 2px;
    background: rgba(255, 255, 255, .75);
}

.pk .page-title-banner p {
    margin: 1.25rem 0 0;
    max-width: 56ch;
    font-size: var(--pk-lead);
    line-height: 1.55;
    color: rgba(255, 255, 255, .86);
}

/* --------------------------------------------------------------------------
   Rich text
   -------------------------------------------------------------------------- */

.pk main .section-content .heading + p,
.pk main .section-content p,
.pk main .section-content li {
    font-size: var(--pk-body);
    line-height: 1.75;
    max-width: 68ch;
}

.pk main .section-standfirst {
    font-size: var(--pk-lead);
    line-height: 1.6;
    color: var(--pk-ink);
    max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------
   A quieter card than the theme's: no border by default, a surface, and the
   lift only on hover. Borders on every card is what made the grids look like
   a spreadsheet.
   -------------------------------------------------------------------------- */

.pk main .section-cards .row { --bs-gutter-x: var(--pk-gap); --bs-gutter-y: var(--pk-gap); }

.pk main .section-cards .events-sec {
    border: 0;
    border-radius: var(--pk-radius);
    background: var(--pk-surface);
    box-shadow: 0 1px 2px rgba(15, 27, 38, .04), 0 12px 28px -20px rgba(15, 27, 38, .3);
    overflow: hidden;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease;
}

.pk main .sec-bg-light .section-cards .events-sec,
.pk main .sec-bg-soft .section-cards .events-sec { background: var(--pk-surface); }

.pk main .section-cards .events-sec:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgba(15, 27, 38, .05), 0 26px 50px -26px rgba(15, 27, 38, .45);
}

.pk main .section-cards .events-sec img { aspect-ratio: 3 / 2; }

.pk main .section-cards .events-info { padding: var(--pk-gap); }

.pk main .section-cards .events-info h3 {
    font-size: var(--pk-h3);
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

.pk main .section-cards .events-info p {
    font-size: var(--pk-body);
    line-height: 1.6;
    color: var(--pk-body-ink);
}

/* A text-only card leads with a rule rather than pretending to be a photo. */
.pk main .section-cards .events-sec--text {
    border-top: 2px solid var(--pk-brand);
    box-shadow: none;
    background: var(--pk-surface);
}

.pk main .section-cards .events-sec--text:hover {
    box-shadow: 0 20px 44px -28px rgba(15, 27, 38, .4);
}

/* --------------------------------------------------------------------------
   Statistics
   -------------------------------------------------------------------------- */

.pk main .section-stats h3 {
    font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
    font-weight: 600;
    line-height: 0.95;
    color: var(--pk-brand);
}

.pk main .section-stats p {
    font-size: var(--pk-small);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pk-muted);
}

/* --------------------------------------------------------------------------
   Alternating rows
   -------------------------------------------------------------------------- */

.pk main .fr-rows { gap: var(--pk-section); }

.pk main .fr-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: center;
}

.pk main .fr-media img { border-radius: var(--pk-radius); }

.pk main .fr-copy h3 {
    font-size: var(--pk-h2);
    font-weight: 500;
    line-height: 1.14;
    max-width: 18ch;
}

.pk main .fr-body,
.pk main .fr-body p {
    font-size: var(--pk-body);
    line-height: 1.75;
    max-width: 54ch;
}

.pk main .fr-number {
    font-size: var(--pk-small);
    letter-spacing: .18em;
    color: var(--pk-muted);
}

/* --------------------------------------------------------------------------
   Image beside text
   -------------------------------------------------------------------------- */

.pk main .section-image_text .row { --bs-gutter-x: clamp(2rem, 1rem + 4vw, 5rem); }
.pk main .section-image_text img { border-radius: var(--pk-radius); box-shadow: none; }
.pk main .section-image_text p { font-size: var(--pk-body); line-height: 1.75; max-width: 54ch; }

/* --------------------------------------------------------------------------
   Pull quote
   -------------------------------------------------------------------------- */

.pk main .section-quote h3 {
    font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.4rem) !important;
    font-weight: 400 !important;
    line-height: 1.28 !important;
    max-width: 26ch;
}

.pk main .section-quote p { font-size: var(--pk-small); letter-spacing: .06em; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.pk main .global-btn2 {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: var(--pk-body);
    font-weight: 500;
    color: var(--pk-brand);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: gap .2s ease, color .2s ease;
}

.pk main .global-btn2:hover { gap: .9rem; color: var(--pk-brand-dk); }
.pk main .global-btn2 i { transition: none; }

/* --------------------------------------------------------------------------
   Call to action
   -------------------------------------------------------------------------- */

.pk main .cta,
.pk main .section-cta {
    background: linear-gradient(120deg, #08243b 0%, var(--pk-brand-dk) 62%, var(--pk-brand) 100%);
}

.pk main .cta-heading h2 {
    font-size: var(--pk-h2);
    font-weight: 400;
    line-height: 1.15;
    color: #fff;
    max-width: 20ch;
}

.pk main .cta-heading p {
    font-size: var(--pk-lead);
    color: rgba(255, 255, 255, .85);
    max-width: 52ch;
}

/* --------------------------------------------------------------------------
   Dynamic listings
   -------------------------------------------------------------------------- */

.pk main .dll-card {
    border-radius: var(--pk-radius);
    border-color: transparent;
    background: var(--pk-surface);
    box-shadow: 0 1px 2px rgba(15, 27, 38, .04), 0 12px 28px -20px rgba(15, 27, 38, .3);
}

.pk main .dll-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 50px -26px rgba(15, 27, 38, .45);
}

.pk main .dll-title { font-size: var(--pk-h3); font-weight: 500; line-height: 1.25; }
.pk main .dll-summary { font-size: var(--pk-body); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Dark
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .pk {
    --pk-ink:       #e9eef5;
    --pk-body-ink:  #aab3c0;
    --pk-muted:     #8791a0;
    --pk-line:      rgba(255, 255, 255, .12);
    --pk-surface:   #141b23;
    --pk-surface-2: #0e141a;
    --pk-brand:     #4aa8dd;
    --pk-brand-dk:  #2f8bc0;
}

html[data-theme="dark"] .pk main .section-cards .events-sec,
html[data-theme="dark"] .pk main .dll-card {
    background: var(--pk-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 34px -22px rgba(0, 0, 0, .85);
}

html[data-theme="dark"] .pk main .section-cards .events-sec--text {
    border-top-color: var(--pk-brand);
}

/* The pull quote's measure belongs to the block, not to the heading alone —
   see the note in builder-sections.css. The kit set it on the h3, which left
   the attribution running the full column width beneath it. */
.pk main .section-quote h3 { max-width: none !important; }
.pk main .section-quote .heading { max-width: min(54rem, 100%); margin-inline: auto; }