/*
Theme Name: Proviam
Theme URI: https://proviam.co.uk
Author: Proviam
Description: Custom theme for Proviam — strategy, growth and leadership consulting. Built to the Proviam design system. Content managed via Advanced Custom Fields.
Version: 4.6
Requires PHP: 7.4
Text Domain: proviam
*/

/* Proviam typefaces — extracted from the Proviam design file and self-hosted.
   Newsreader (display/serif) + Public Sans (UI/sans), both variable fonts. */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url('assets/fonts/newsreader-0a301b6d.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url('assets/fonts/newsreader-40f89707.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url('assets/fonts/newsreader-c78a4bc6.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/public-sans-45ac3f4b.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/public-sans-587f1fa8.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/public-sans-13406031.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}

/* ============================================================
   Design tokens — taken directly from the Proviam design file
   ============================================================ */
:root {
    --dark:        #085041;  /* header, hero                    */
    --mid:         #0F6E56;  /* stats band, links, eyebrows     */
    --seafoam:     #5DCAA5;  /* accent                          */
    --ink:         #173B32;  /* headings, CTA band, footer      */
    --cream:       #F7F6F2;  /* page background                 */
    --white:       #FFFFFF;
    --body:        #4A4A4A;  /* body copy                       */
    --border:      #E4E1D8;
    --btn-ink:     #0A3428;  /* text on seafoam buttons         */
    --on-dark-1:   #CFE6DC;  /* hero subcopy                    */
    --on-dark-2:   #B7DDCC;  /* stat labels, CTA subcopy        */
    --on-dark-3:   #EAF3EF;  /* nav links                       */
    --footer-text: #D9E8E2;
    --footer-mute: #6E9284;

    --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
    --sans:  'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --container: 1240px;
    --gutter: 40px;
    --shadow-card: 0 4px 18px rgba(8, 80, 65, .07);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--cream);
    color: var(--body);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Newsreader is a variable font whose optical-size axis auto-tightens
       glyphs at display sizes, which narrows headings versus the source
       design. Pin it so type matches the Proviam design file. Public Sans has
       no opsz axis, so this is a no-op for body copy. */
    font-optical-sizing: none;
    font-variation-settings: 'opsz' 16;
}
img { max-width: 100%; display: block; }
a { color: var(--mid); text-decoration: none; }
a:hover { color: var(--dark); }

h1, h2, h3, h4 {
    font-family: var(--serif);
    color: var(--ink);
    margin: 0;
    font-weight: 500;
    line-height: 1.2;
}
p { margin: 0 0 16px; }

.wrap {
    max-width: var(--container);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}
.wrap-narrow { max-width: 860px; margin: 0 auto; }

/* ---------- Eyebrows ---------- */
.eyebrow {
    display: block;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: 16px;
}
.eyebrow-lg {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: var(--seafoam);
    margin-bottom: 24px;
}
.eyebrow-pill {
    display: inline-block;
    background: var(--seafoam);
    color: var(--dark);
    padding: 6px 16px;
    border-radius: 2px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 16px;
    padding: 16px 30px;
    border-radius: 3px;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-primary { background: var(--seafoam); color: var(--btn-ink); }
.btn-primary:hover { background: #7BD9B9; color: var(--btn-ink); }
.btn-ghost { border: 1px solid rgba(255,255,255,.35); color: var(--white); }
.btn-ghost:hover { border-color: rgba(255,255,255,.75); color: var(--white); }
.btn-wide { padding: 16px 34px; }

/* ---------- Accessibility helpers ---------- */
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.skip-link:focus {
    position: fixed;
    top: 12px; left: 12px;
    z-index: 300;
    width: auto; height: auto;
    margin: 0; padding: 12px 20px;
    clip-path: none;
    background: var(--seafoam);
    color: var(--btn-ink);
    font-family: var(--sans);
    font-weight: 600;
    border-radius: 3px;
}

/* ============================================================
   Header
   ============================================================ */
.site-header { background: var(--dark); width: 100%; position: sticky; top: 0; z-index: 100; }
.site-header__inner {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px var(--gutter);
    gap: 24px;
}
.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo img, .site-logo__img { height: 46px; width: auto; object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav ul, .site-nav__list { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
.site-nav a {
    color: var(--on-dark-3);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    opacity: .85;
}
.site-nav a:hover { color: var(--seafoam); opacity: 1; }
.site-nav .current-menu-item > a,
.site-nav li.is-current > a { color: var(--seafoam); font-weight: 600; opacity: 1; }
.nav-cta {
    background: var(--seafoam);
    color: var(--btn-ink);
    padding: 11px 24px;
    border-radius: 3px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .2px;
    white-space: nowrap;
}
.nav-cta:hover { background: #7BD9B9; color: var(--btn-ink); }
.nav-toggle {
    display: none;
    background: none;
    border: 0;
    color: var(--white);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 6px;
}

/* ============================================================
   Hero
   ============================================================ */
.hero { background: var(--dark); padding: 88px var(--gutter) 96px; }
.hero__inner { max-width: 800px; margin: 0 auto; text-align: center; }
.hero h1 { font-size: 54px; line-height: 1.1; color: var(--white); margin: 0 0 24px; }
.hero__sub {
    font-size: 19px;
    line-height: 1.6;
    color: var(--on-dark-1);
    margin: 0 auto 36px;
    max-width: 560px;
}
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* Interior page hero — same language, tighter */
.page-hero { background: var(--dark); padding: 72px var(--gutter) 76px; }
.page-hero__inner { max-width: 800px; margin: 0 auto; text-align: center; }
.page-hero h1 { font-size: 44px; color: var(--white); margin: 0 0 18px; }
.page-hero__sub { font-size: 18px; line-height: 1.6; color: var(--on-dark-1); margin: 0 auto; max-width: 620px; }

/* ============================================================
   Stats band
   ============================================================ */
.stats-band { background: var(--mid); padding: 44px var(--gutter); }
.stats-band__inner {
    max-width: var(--container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.stats-band .stat { text-align: center; }
.stats-band .stat__value { font-family: var(--serif); font-size: 38px; color: var(--white); font-weight: 600; line-height: 1.1; }
.stats-band .stat__label { font-family: var(--sans); font-size: 14px; color: var(--on-dark-2); margin-top: 6px; }

/* ============================================================
   Sections
   ============================================================ */
.section { padding: 100px var(--gutter); background: var(--cream); }
.section--tight-top { padding-top: 0; }
.section--white { background: var(--white); }
.section__inner { max-width: var(--container); margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 48px; }
.section-head h2 { font-size: 36px; margin: 0; }
.section-head p { margin: 16px auto 0; max-width: 620px; font-size: 17px; }

/* ---------- Split: about teaser ---------- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}
.split h2 { font-size: 36px; margin: 0 0 20px; }
.split p { font-size: 17px; line-height: 1.7; color: var(--body); margin: 0 0 28px; }
.link-arrow { color: var(--mid); font-family: var(--sans); font-size: 15px; font-weight: 600; }

/* ---------- Stat cards (left rule) ---------- */
.stat-cards { display: flex; flex-direction: column; gap: 16px; }
.stat-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--seafoam);
    border-radius: 4px;
    padding: 22px 28px;
}
.stat-card__value {
    font-family: var(--serif);
    font-size: 34px;
    color: var(--dark);
    font-weight: 600;
    min-width: 110px;
    text-align: center;
}
.stat-card__label { font-family: var(--sans); font-size: 15px; color: var(--body); }

/* ---------- Service cards ---------- */
.cards-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.card-feature {
    display: block;
    background: var(--white);
    border-radius: 4px;
    padding: 40px 36px;
    border-top: 3px solid var(--seafoam);
    box-shadow: var(--shadow-card);
    transition: transform .18s ease, box-shadow .18s ease;
}
.card-feature:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(8,80,65,.12); }
.card-feature__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.card-feature__num {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--dark);
    color: var(--seafoam);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--sans); font-size: 14px; font-weight: 700;
    flex-shrink: 0;
}
.card-feature__title { font-family: var(--serif); font-size: 24px; color: var(--ink); font-weight: 600; }
.card-feature__desc { font-family: var(--sans); font-size: 15px; color: var(--body); line-height: 1.6; }

.card-plain {
    display: block;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 32px;
    position: relative;
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease;
}
.card-plain:hover { border-color: var(--seafoam); transform: translateY(-2px); }
/* Match the numbered disc used by cards 01 and 02, so the number style is
   consistent across all five cards instead of changing after 02. */
.card-plain__num {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--dark);
    color: var(--seafoam);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 18px;
}
.card-plain__title { font-family: var(--serif); font-size: 20px; color: var(--ink); font-weight: 600; margin-bottom: 10px; }
.card-plain__desc { font-family: var(--sans); font-size: 14px; color: var(--body); line-height: 1.6; }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band { background: var(--ink); padding: 88px var(--gutter); text-align: center; }
.cta-band h2 { font-size: 36px; color: var(--white); margin: 0 0 16px; }
.cta-band p { font-size: 17px; color: var(--on-dark-2); margin: 0 auto 32px; max-width: 560px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--ink); color: var(--footer-text); }
.site-footer__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 64px var(--gutter) 32px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 48px;
}
.footer-brand { display: flex; align-items: center; }
.footer-brand img { width: 260px; height: auto; }
.footer-col__title {
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .4px;
    color: var(--seafoam);
    text-transform: uppercase;
    margin: 0 0 16px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.footer-links a, .footer-links span {
    color: var(--footer-text);
    font-family: var(--sans);
    font-size: 15px;
}
.footer-links a:hover { color: var(--seafoam); }
.site-footer__base {
    max-width: var(--container);
    margin: 0 auto;
    padding: 24px var(--gutter);
    border-top: 1px solid rgba(255,255,255,.1);
    font-family: var(--sans);
    font-size: 13px;
    color: var(--footer-mute);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.footer-legal__list { display: flex; gap: 20px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.footer-legal a { color: var(--footer-mute); font-size: 13px; }
.footer-brand__logo, .footer-brand img { width: 260px; height: auto; }
.footer-legal a:hover { color: var(--seafoam); }

/* LinkedIn */
.footer-social { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.footer-social a {
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--footer-text); font-family: var(--sans); font-size: 15px;
}
.footer-social a:hover { color: var(--seafoam); }
.footer-social svg { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; }

/* ---------- Legal / content pages ---------- */
.legal { padding: 72px var(--gutter) 96px; background: var(--cream); }
.legal__inner { max-width: 780px; margin: 0 auto; }
.legal h1 { font-size: 40px; margin: 0 0 10px; }
.legal__updated { font-family: var(--sans); font-size: 14px; color: var(--body); margin: 0 0 40px; }
.legal__body h2 { font-size: 24px; margin: 40px 0 12px; }
.legal__body h3 { font-size: 19px; margin: 28px 0 8px; }
.legal__body p, .legal__body li { font-family: var(--sans); font-size: 16px; line-height: 1.75; color: var(--body); }
.legal__body ul { padding-left: 22px; margin: 0 0 16px; }
.legal__body li { margin-bottom: 8px; }
.legal__body a { text-decoration: underline; }
.legal__body table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-family: var(--sans); font-size: 15px; }
.legal__body th, .legal__body td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.legal__body th { color: var(--ink); font-weight: 700; background: rgba(93,202,165,.12); }

/* ---------- Cookie notice ---------- */
.cookie-bar {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
    background: var(--ink); color: var(--footer-text);
    border-radius: 6px; padding: 18px 22px;
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    box-shadow: 0 8px 30px rgba(0,0,0,.28);
    max-width: 900px; margin: 0 auto;
    font-family: var(--sans); font-size: 14px; line-height: 1.55;
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; flex: 1 1 300px; }
.cookie-bar a { color: var(--seafoam); text-decoration: underline; }
.cookie-bar button {
    background: var(--seafoam); color: var(--btn-ink);
    border: 0; border-radius: 3px; padding: 11px 24px;
    font-family: var(--sans); font-weight: 600; font-size: 14px; cursor: pointer;
}
.cookie-bar button:hover { background: #7BD9B9; }

/* ============================================================
   Shared interior pieces — built to the client's design files
   ============================================================ */
.center-head { text-align: center; margin: 0 auto 48px; }
.center-head__eyebrow {
    font-family: var(--sans); font-size: 13px; font-weight: 700;
    letter-spacing: 1px; color: var(--mid); margin-bottom: 12px;
}
.center-head h2 { font-size: 34px; font-weight: 600; margin: 0 0 16px; }
.center-head p { max-width: 600px; margin: 0 auto; font-size: 16px; line-height: 1.6; color: var(--body); }

/* Numbered disc used across the service cards and process steps */
.disc {
    border-radius: 50%;
    background: var(--dark);
    color: var(--seafoam);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-weight: 600;
    flex-shrink: 0;
}
.disc--lg { width: 56px; height: 56px; font-size: 20px; box-shadow: 0 0 0 4px #E4F0EA; }
.disc--md { width: 44px; height: 44px; font-size: 18px; }
.disc--sm { width: 36px; height: 36px; font-size: 13px; font-family: var(--sans); font-weight: 700; }

/* Quote with the seafoam rule, as used in every service block */
.rule-quote {
    border-left: 3px solid var(--seafoam);
    padding-left: 20px;
    margin: 0 0 24px;
    font-family: var(--serif); font-style: italic;
    font-size: 16px; line-height: 1.5; color: var(--mid);
}

/* Two-up title/description pairs */
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pair__title { font-family: var(--sans); font-size: 14px; color: var(--ink); font-weight: 700; margin-bottom: 4px; }
.pair__desc  { font-family: var(--sans); font-size: 13px; color: var(--body); line-height: 1.5; }
.pair--rule { border-top: 2px solid var(--border); padding-top: 10px; }
.pair--bar  { border-left: 2px solid var(--seafoam); padding-left: 14px; }
.pair--bar .pair__title { margin-bottom: 2px; }
.pair--on-dark .pair__title { color: var(--white); }
.pair--on-dark .pair__desc  { color: var(--on-dark-1); }

.stack { display: flex; flex-direction: column; gap: 16px; }
.panel-label {
    font-family: var(--sans); font-size: 12px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase; color: var(--mid);
    margin-bottom: 18px;
}
.panel-label--on-dark { color: var(--seafoam); }

/* ============================================================
   Services page
   ============================================================ */
.svc-hero { background: var(--dark); padding: 80px var(--gutter) 64px; text-align: center; }
.svc-hero__eyebrow {
    color: var(--seafoam); font-family: var(--sans); font-size: 14px;
    font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 18px;
}
.svc-hero h1 { font-size: 46px; color: var(--white); margin: 0 auto; max-width: 680px; line-height: 1.2; }

.svc-section { padding: 96px var(--gutter); }
.svc-section__inner { max-width: 1160px; margin: 0 auto; }
.svc-section--cream { background: var(--cream); }
.svc-section--mid   { background: var(--mid); }
.svc-section--mint  { background: #E4F0EA; }

/* Takeaway banner above services 01/02 */
.takeaway {
    text-align: center; margin: 0 0 32px;
    background: var(--dark);
    border-radius: 4px; border-top: 3px solid var(--seafoam);
    padding: 32px 48px;
}
.takeaway__lead { font-family: var(--serif); font-size: 19px; font-style: italic; color: var(--on-dark-2); margin-bottom: 16px; }
.takeaway .eyebrow-pill { margin-bottom: 16px; }
.takeaway h2 { font-size: 21px; color: var(--white); font-weight: 600; margin: 0; line-height: 1.3; }

.svc-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.svc-card {
    background: var(--white); border-radius: 4px;
    padding: 40px 36px; border-top: 3px solid var(--seafoam);
    box-shadow: 0 4px 18px rgba(8, 80, 65, .06);
}
.svc-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.svc-card__head h3 { font-size: 26px; color: var(--ink); font-weight: 600; margin: 0; }
.svc-card__tagline { font-family: var(--sans); font-size: 15px; color: var(--body); margin-bottom: 22px; }

/* Service 03 — on the mid-green band */
.svc-band-head { text-align: center; margin-bottom: 48px; }
.svc-band-head__eyebrow { font-family: var(--sans); font-size: 13px; color: var(--on-dark-2); font-weight: 700; letter-spacing: 1px; margin-bottom: 12px; }
.svc-band-head h2 { font-size: 34px; color: var(--white); font-weight: 600; margin: 0 0 16px; }
.svc-band-head blockquote { margin: 0 auto; max-width: 600px; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--on-dark-1); line-height: 1.5; }
.glass-panel { background: rgba(255,255,255,.08); border-radius: 4px; padding: 28px 32px; }

/* Service 04 */
.svc-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; }
.svc-split__eyebrow { font-family: var(--sans); font-size: 13px; color: var(--seafoam); font-weight: 700; letter-spacing: 1px; margin-bottom: 12px; }
.svc-split h2 { font-size: 32px; color: var(--ink); font-weight: 600; margin: 0 0 8px; }
.svc-split .rule-quote { font-size: 18px; margin: 16px 0 0; }
.svc-split__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

/* Service 05 + process — 5 across */
.five-up { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.step-card {
    background: var(--white); border-radius: 6px; border-top: 3px solid var(--seafoam);
    padding: 26px 20px; box-shadow: 0 3px 14px rgba(8, 80, 65, .06);
}
.step-card .disc { margin-bottom: 14px; }
.step-card__title { font-family: var(--serif); font-size: 18px; color: var(--ink); font-weight: 600; margin-bottom: 8px; }
.step-card__desc { font-family: var(--sans); font-size: 13px; color: var(--body); line-height: 1.5; }

.process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; position: relative; }
.process__rail { position: absolute; top: 50px; left: 10%; right: 10%; height: 2px; background: #D9D4C4; z-index: 0; }
.process-card {
    background: var(--white); border: 1px solid var(--border); border-radius: 6px;
    padding: 28px 20px 24px; text-align: center; position: relative; z-index: 1;
}
.process-card .disc { margin: 0 auto 18px; }
.process-card__title { font-family: var(--serif); font-size: 18px; color: var(--ink); font-weight: 600; margin-bottom: 8px; }
.process-card__desc { font-family: var(--sans); font-size: 14px; color: var(--body); line-height: 1.6; }

/* Closing band */
.end-band { padding: 80px var(--gutter); text-align: center; }
.end-band--dark { background: var(--dark); }
.end-band--ink  { background: var(--ink); }
.end-band h2 { font-size: 32px; color: var(--white); margin: 0 0 16px; }
.end-band__sub { font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--on-dark-1); max-width: 560px; margin: 0 auto 28px; }
.end-band__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   About page
   ============================================================ */
.about-hero { padding: 88px var(--gutter); background: var(--dark); }
.about-hero__inner {
    max-width: 1160px; margin: 0 auto;
    display: grid; grid-template-columns: .85fr 1.15fr;
    gap: 64px; align-items: center;
}
.about-hero__photo { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; }
.about-hero__eyebrow {
    color: var(--seafoam); font-family: var(--sans); font-size: 14px;
    font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 18px;
}
.about-hero h1 { font-size: 42px; color: var(--white); margin: 0 0 20px; line-height: 1.2; }
.about-hero p { font-family: var(--sans); font-size: 17px; line-height: 1.7; color: var(--on-dark-1); margin: 0 0 16px; }
.about-hero p:last-child { margin-bottom: 0; }

.about-stats { padding: 80px var(--gutter); background: var(--cream); }
.about-stats__inner { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat-tile { background: var(--white); border: 1px solid var(--border); border-radius: 4px; padding: 28px 20px; text-align: center; }
.stat-tile__value { font-family: var(--serif); font-size: 32px; color: var(--dark); font-weight: 600; line-height: 1.1; }
.stat-tile__label { font-family: var(--sans); font-size: 13px; color: var(--body); margin-top: 6px; line-height: 1.45; }

.recognition-wrap { padding: 0 var(--gutter) 100px; background: var(--cream); }
.recognition {
    max-width: 900px; margin: 0 auto;
    background: var(--mid); border-radius: 6px; padding: 48px;
    display: flex; align-items: center; gap: 40px;
}
.recognition__badge {
    width: 110px; height: 110px; border-radius: 50%;
    border: 3px solid var(--seafoam);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex-shrink: 0; text-align: center;
}
.recognition__badge-year { font-family: var(--serif); font-size: 16px; color: var(--seafoam); font-weight: 700; }
.recognition__badge-label { font-family: var(--sans); font-size: 10px; color: var(--white); letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; }
.recognition__eyebrow { font-family: var(--sans); font-size: 12px; color: var(--seafoam); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.recognition h3 { font-size: 24px; color: var(--white); font-weight: 600; margin: 0 0 10px; }
.recognition p { font-family: var(--sans); font-size: 15px; line-height: 1.7; color: var(--on-dark-1); margin: 0; }

/* ============================================================
   Contact page
   ============================================================ */
.contact-hero { background: var(--dark); padding: 96px var(--gutter); text-align: center; }
.contact-hero h1 { font-size: 46px; color: var(--white); margin: 0 0 20px; }
.contact-hero p { font-family: var(--sans); font-size: 17px; color: var(--on-dark-1); max-width: 560px; margin: 0 auto; line-height: 1.6; }

.contact-body { padding: 88px var(--gutter) 100px; background: var(--cream); }
.form-card {
    max-width: 780px; margin: 0 auto;
    background: var(--white); border: 1px solid var(--border);
    border-radius: 4px; padding: 40px 48px;
}
.form-card__label {
    font-family: var(--sans); font-size: 12px; color: var(--mid);
    font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px;
}

/* Contact Form 7, styled to the design */
.pv-form { display: flex; flex-direction: column; gap: 16px; }
.pv-form p { margin: 0; }
.pv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pv-form br { display: none; }
.pvf label {
    display: block;
    font-family: var(--sans); font-size: 12px; font-weight: 700;
    letter-spacing: .8px; text-transform: uppercase; color: var(--mid);
    margin-bottom: 7px;
}
.pvf .req { color: #C0553C; }
.pv-form input[type="text"],
.pv-form input[type="email"],
.pv-form input[type="tel"],
.pv-form select,
.pv-form textarea {
    width: 100%;
    border: 1px solid #D8D4C8; border-radius: 3px;
    padding: 14px 16px;
    font-family: var(--sans); font-size: 15px;
    color: var(--ink); background: var(--cream);
    -webkit-appearance: none; appearance: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.pv-form select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230F6E56' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
    padding-right: 42px;
}
.pv-form textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.pv-form input:focus, .pv-form select:focus, .pv-form textarea:focus {
    outline: none; border-color: var(--mid);
    box-shadow: 0 0 0 3px rgba(93, 202, 165, .28);
}
.pv-form ::placeholder { color: #9AA5A1; }
.pv-submit { margin-top: 4px !important; }
.pv-form input[type="submit"] {
    width: 100%;
    background: var(--seafoam); color: var(--btn-ink);
    padding: 15px 28px; border: 0; border-radius: 3px;
    font-weight: 600; font-size: 16px; font-family: var(--sans);
    cursor: pointer; transition: background .18s ease;
}
.pv-form input[type="submit"]:hover { background: #7BD9B9; }
.wpcf7-spinner { display: block; margin: 10px auto 0; }

/* CF7 messages */
.wpcf7 form .wpcf7-response-output {
    margin: 20px 0 0; padding: 14px 18px;
    border: 0; border-left: 4px solid var(--seafoam);
    border-radius: 4px; background: rgba(93, 202, 165, .16);
    font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--dark);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
    background: #FCEDEA; border-left-color: #C0553C; color: #7A2E1D;
}
.wpcf7-not-valid-tip { font-family: var(--sans); font-size: 13px; color: #C0553C; margin-top: 6px; }
.pv-form .wpcf7-not-valid { border-color: #C0553C; }

.contact-extra { padding: 0 var(--gutter) 100px; background: var(--cream); }
.contact-extra__inner { max-width: 780px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.contact-chip__value { white-space: nowrap; }
.contact-chip {
    background: var(--white); border: 1px solid var(--border);
    border-left: 3px solid var(--seafoam); border-radius: 4px;
    padding: 18px 20px; display: block;
}
.contact-chip__label { display: block; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mid); margin-bottom: 6px; }
.contact-chip__value { display: block; font-family: var(--sans); font-size: 15px; color: var(--ink); font-weight: 600; word-break: break-word; }
a.contact-chip:hover { border-color: var(--seafoam); }

/* ============================================================
   LinkedIn feed (ProFeed plugin) — blended into the Proviam system

   ProFeed drives nearly all of its presentation from --lf-* custom
   properties on .profeedwp-feed, so we re-point those at our own tokens
   rather than fighting its rules individually. Only type, the LinkedIn-blue
   accents and the loading state need direct overrides.
   ============================================================ */
.pv-linkedin { padding: 96px var(--gutter); background: var(--cream); }
/* Hidden until the feed returns posts (see initLinkedInFeed in theme.js), so
   an empty company page never shows a heading over an error message. */
.pv-linkedin--pending { display: none; }
/* The feed sits on the same cream as the section above it, so two lots of
   section padding stacked up into ~196px of dead space with no colour change
   to justify it. Drop ours and let the previous section's padding separate. */
.section + .pv-linkedin,
.recognition-wrap + .pv-linkedin,
.svc-section--cream + .pv-linkedin,
.about-stats + .pv-linkedin { padding-top: 0; }
.pv-linkedin__inner { max-width: 1160px; margin: 0 auto; }
.pv-linkedin__cta { text-align: center; margin-top: 48px; }

.pv-linkedin .profeedwp-feed {
    --lf-primary-color: var(--mid);
    --lf-secondary-color: var(--body);
    --lf-text-color: var(--body);
    --lf-text-light: #7A8A84;
    --lf-background-color: var(--white);
    --lf-background-light: var(--cream);
    --lf-border-color: var(--border);
    --lf-border-width: 1px;
    --lf-border-radius: 6px;
    --lf-border-radius-small: 4px;
    --lf-shadow-light: var(--shadow-card);
    --lf-shadow-hover: 0 10px 28px rgba(8, 80, 65, .12);
    --lf-image-border-radius: 0;
    --lf-image-height-desktop: 200px;
    --lf-image-height-mobile: 190px;
    --lf-font-size-base: 15px;
    --lf-font-size-small: 13px;
    --lf-font-size-text-with-image: 15px;
    --lf-font-size-text-no-image: 16px;
    --lf-line-height-base: 1.65;
    --lf-spacing-md: 26px;
    --lf-card-min-height: 320px;
}

/* LinkedIn often returns fewer posts than asked for, and ProFeed pins the grid
   to a fixed column count with !important — which strands the row. The extra
   class in the selector is what beats that !important.

   The max track size must stay 1fr: with a definite max, CSS derives the
   auto-fit repetition count from the MAX, so minmax(290px, 380px) yielded two
   columns for three posts. Instead we cap the whole grid when there are only
   one or two posts, so they sit centred at card width rather than stretching. */
.pv-linkedin .profeedwp-feed .profeedwp-feed-posts.profeedwp-feed-grid {
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) !important;
    justify-content: center;
    align-items: stretch;
}
/* Each post sits inside its own link wrapper, so count direct children of the
   grid rather than .profeedwp-feed-post (which is always an only child). */
.pv-linkedin .profeedwp-feed-posts:not(:has(> :nth-child(2))) {
    max-width: 390px;
    margin-inline: auto;
}
.pv-linkedin .profeedwp-feed-posts:has(> :nth-child(2)):not(:has(> :nth-child(3))) {
    max-width: 790px;
    margin-inline: auto;
}

/* Cards pick up the same seafoam top rule as every other card on the site. */
.pv-linkedin .profeedwp-feed-post {
    border-top: 3px solid var(--seafoam);
    overflow: hidden;
}
.pv-linkedin .profeedwp-feed-post-link:hover .profeedwp-feed-post {
    transform: translateY(-2px);
    box-shadow: var(--lf-shadow-hover);
}
.pv-linkedin .profeedwp-feed-post-link:focus-visible {
    outline: 2px solid var(--mid);
    outline-offset: 3px;
    border-radius: 6px;
}
.pv-linkedin .profeedwp-feed-post .profeedwp-feed-post-content { padding: 26px 28px 22px; }

/* Type: the plugin ships system fonts — put it back on ours. */
.pv-linkedin .profeedwp-feed,
.pv-linkedin .profeedwp-feed-post-text,
.pv-linkedin .profeedwp-feed-post-date,
.pv-linkedin .profeedwp-feed-post-meta { font-family: var(--sans); }

.pv-linkedin .profeedwp-feed-post .profeedwp-feed-post-text { color: var(--body); }
/* ProFeed bolds the opening paragraph — make that the card's "headline". */
.pv-linkedin .profeedwp-first-paragraph {
    font-family: var(--serif);
    font-size: 19px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--ink);
    display: block;
    margin-bottom: 12px;
}
.pv-linkedin .profeedwp-feed-post .profeedwp-feed-post-date {
    color: var(--mid);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.pv-linkedin .profeedwp-feed-post-meta { color: #7A8A84; }

/* Loading + error states in our palette rather than LinkedIn blue. */
.pv-linkedin .profeedwp-feed-loading,
.pv-linkedin .profeedwp-feed-error {
    font-family: var(--sans);
    font-size: 15px;
    color: var(--body);
    text-align: center;
    padding: 32px 0;
}
.pv-linkedin .profeedwp-feed-spinner {
    border-color: var(--border);
    border-top-color: var(--seafoam);
    margin: 0 auto 14px;
}
.pv-linkedin .profeedwp-shortcode-error {
    font-family: var(--sans);
    background: #FCEDEA;
    border-left: 4px solid #C0553C;
    color: #7A2E1D;
    padding: 16px 20px;
    border-radius: 4px;
}
.pv-linkedin .profeedwp-feed-linkedin-logo { opacity: .5; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
    .svc-section { padding: 72px var(--gutter); }
    .five-up, .process { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .process__rail { display: none; }
    .takeaway h2 { font-size: 19px; }
}
@media (max-width: 1024px) {
    .split { gap: 48px; }
    .list-cols { gap: 32px; }
    .svc-duo { gap: 24px; }
    .svc-card { padding: 32px 28px; }
    .svc-split { grid-template-columns: 1fr; gap: 36px; }
    .about-hero__inner { grid-template-columns: 1fr; gap: 40px; }
    .about-hero__photo { max-width: 420px; }
    .about-stats__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    :root { --gutter: 24px; }
    .site-nav ul { display: none; }
    .nav-toggle { display: block; }
    .site-header { position: sticky; top: 0; }
    .site-header.is-open .site-nav ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        position: absolute;
        left: 0; right: 0; top: 100%;
        background: var(--dark);
        padding: 22px var(--gutter) 26px;
        z-index: 60;
        border-top: 1px solid rgba(255,255,255,.12);
    }
    .hero { padding: 64px var(--gutter) 72px; }
    .hero h1 { font-size: 36px; }
    .hero__sub { font-size: 17px; }
    .page-hero h1 { font-size: 32px; }
    .stats-band__inner { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .section { padding: 64px var(--gutter); }
    .split { grid-template-columns: 1fr; gap: 40px; }

    /* Three across as compact tiles rather than three wide bars with a
       stranded label; uses the row properly on tablet. */
    .stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .stat-card { flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px 22px; }
    .stat-card__value { min-width: 0; text-align: left; font-size: 30px; }
    .stat-card__label { font-size: 14px; }
    .cards-2, .cards-3 { grid-template-columns: 1fr; }
    /* Footer was far too heavy on phones: tighter padding, smaller lockup. */
    .site-footer__inner { grid-template-columns: 1fr 1fr; gap: 26px 20px; padding: 36px var(--gutter) 22px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-brand { justify-content: flex-start; }
    .footer-brand img, .footer-brand__logo { width: 170px; }
    .footer-col__title { margin-bottom: 12px; }
    .footer-links { gap: 8px; }
    .footer-links a, .footer-links span { font-size: 14px; }
    .site-footer__base { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px var(--gutter); font-size: 12px; }
    .footer-legal__list { gap: 16px; }
    .footer-legal a { font-size: 12px; }
    .footer-social { margin-top: 10px; }

    /* Header logo scales back so it doesn't dominate the bar. */
    .site-logo img, .site-logo__img { height: 38px; }
    .list-cols { grid-template-columns: 1fr; }
    .cta-band { padding: 64px var(--gutter); }
    .cta-band h2, .section-head h2 { font-size: 28px; }

    /* --- interior --- */
    .svc-hero { padding: 56px var(--gutter) 48px; }
    .svc-hero h1 { font-size: 32px; }
    .svc-section { padding: 56px var(--gutter); }
    .svc-duo { grid-template-columns: 1fr; }
    .takeaway { padding: 26px 24px; }
    .takeaway h2 { font-size: 18px; }
    .svc-band-head h2, .center-head h2 { font-size: 27px; }
    .svc-band-head blockquote { font-size: 17px; }
    .glass-panel { padding: 22px 20px; }
    .svc-split__cols { gap: 28px; }  /* stays two columns; stacks at 620px */
    .five-up, .process { grid-template-columns: 1fr 1fr; }
    .end-band { padding: 56px var(--gutter); }
    .end-band h2 { font-size: 26px; }
    .end-band__sub { font-size: 16px; }
    .end-band__actions { flex-direction: column; align-items: stretch; gap: 12px; }
    .end-band__actions .btn { text-align: center; }

    .about-hero { padding: 56px var(--gutter); }
    .about-hero h1 { font-size: 32px; }
    /* Portrait was running full-bleed on phones — cap and centre it. */
    .about-hero__photo { max-width: 260px; margin-left: auto; margin-right: auto; }
    .recognition { flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px 28px; }
    .recognition-wrap { padding-bottom: 64px; }
    .about-stats { padding: 56px var(--gutter); }

    .legal { padding: 48px var(--gutter) 64px; }
    .legal h1 { font-size: 30px; }
    .legal__body h2 { font-size: 21px; margin-top: 32px; }
    .legal__body table { display: block; overflow-x: auto; white-space: nowrap; }
    .legal__body th, .legal__body td { white-space: normal; min-width: 150px; }

    .pv-linkedin { padding: 56px var(--gutter); }
    /* Two per row on tablet: three would be cramped and the third orphaned
       onto a row of its own. Reverts to three on desktop, one on phones. */
    .pv-linkedin .profeedwp-feed .profeedwp-feed-posts.profeedwp-feed-grid > :nth-child(n + 3) { display: none !important; }
    .pv-linkedin__cta { margin-top: 28px; }
    .pv-linkedin .profeedwp-feed-post .profeedwp-feed-post-content { padding: 22px 20px 18px; }
    .pv-linkedin .profeedwp-first-paragraph { font-size: 17px; }

    .contact-hero { padding: 64px var(--gutter); }
    .contact-hero h1 { font-size: 32px; }
    .contact-body { padding: 56px var(--gutter) 64px; }
    .form-card { padding: 28px 24px; }
}
@media (max-width: 620px) {
    .cookie-bar { left: 10px; right: 10px; bottom: 10px; padding: 16px 18px; gap: 12px; }
    .cookie-bar button { width: 100%; }
    .pairs { grid-template-columns: 1fr; }
    .five-up, .process { grid-template-columns: 1fr; }
    .contact-extra__inner { grid-template-columns: 1fr; }
    .stats-band__inner { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
    .about-stats__inner { grid-template-columns: 1fr; }
    .pv-row { grid-template-columns: 1fr; }
    .svc-split__cols { grid-template-columns: 1fr; }
    .stat-cards { grid-template-columns: 1fr; }
    .contact-extra__inner { grid-template-columns: 1fr; }
    .contact-chip__value { white-space: normal; }
    /* Single column on phones, so show all the posts again. */
    .pv-linkedin .profeedwp-feed .profeedwp-feed-posts.profeedwp-feed-grid > :nth-child(n + 3) { display: block !important; }
    .svc-card__head { gap: 12px; }
    .svc-card__head h3 { font-size: 22px; }
}