/* ==========================================================================
   Magenta Research — theme styles
   Built to the 'Magenta' Figma design.
   ========================================================================== */

:root {
    --magenta: #fb0099;
    --navy: #01153e;
    --purple: #544596;
    --teal: #00cfcf;
    --grey: #e3ebed;
    --grey-light: #f1f5f6;
    --stone: #f4f1ec;
    --stone-light: #faf8f5;
    --white: #ffffff;

    --font-head: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
    --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;

    --maxw: 1300px;
    --gutter: clamp(20px, 5vw, 70px);
    --radius: 75px;            /* the design's common card/section radius */
    --radius-lg: 75px;
    --radius-hero: 75px;       /* big bottom radius on hero/overlap sections */
    --peek: 75px;              /* section-level overlap (next slides up behind) */
    --card-peek: 75px;         /* card body slides up behind its header */
    --section-pad: clamp(48px, 7vw, 96px);
}

/* ---------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.6;
    color: var(--navy);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--magenta); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    font-weight: 400;
    line-height: 1.13;
    margin: 0 0 0.5em;
    color: inherit;
}
h1, .h1 { font-size: clamp(38px, 4.4vw, 54px) }
h2, .h2 { font-size: clamp(30px, 4vw, 45px); }
h3, .h3 { font-size: clamp(24px, 3vw, 36px); line-height: 1.3; }
h4, .h4 { font-size: 18px; font-weight: 700; line-height: 1.5; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--magenta);
    margin: 0 0 1rem;
    display: block;
}

.container {
    width: 100%;
    max-width: calc(var(--maxw) + var(--gutter) * 2);
    margin: 0 auto;
    padding-inline: var(--gutter);
}

.section { padding-block: var(--section-pad); }
.lead { font-size: clamp(18px, 2vw, 20px); line-height: 1.5; }
.text-center { text-align: center; }

/* ---------------------------------------------------------------- Overlap / "peek" pattern
   A section gets a large bottom radius and sits above (.peek-host); the following
   section slides up behind it (.peek-under) so the rounded corners reveal it.
   Driven by --peek so the overlap can be tuned per use. */
.peek-host {
    position: relative; z-index: 2; overflow: hidden;
    border-bottom-left-radius: var(--radius-hero);
    border-bottom-right-radius: var(--radius-hero);
}
.peek-under {
    position: relative; z-index: 1;
    margin-top: calc(-1 * var(--peek));
    padding-top: calc(var(--section-pad) + var(--peek));
}
/* When the peek-under is a plain band (no .section padding), use this to add only the offset */
.peek-under--flush { padding-top: var(--peek); }

.skip-link {
    position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff;
    padding: 10px 16px; z-index: 1000;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------------------- Buttons & links */
.m-btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-head); font-weight: 700; font-size: 16px;
    padding: 13px 30px; border-radius: 50px; border: 2px solid transparent;
    text-transform: uppercase; letter-spacing: 0.02em; transition: all .2s ease;
    cursor: pointer; line-height: 1;
}
.m-btn:hover { text-decoration: none; transform: translateY(-1px); }
.m-btn--magenta { background: var(--magenta); color: #fff; }
.m-btn--magenta:hover { background: #d80085; }
.m-btn--navy { background: var(--navy); color: #fff; }
.m-btn--navy:hover { background: #02224f; }
.m-btn--ghost { background: transparent; border-color: var(--magenta); color: var(--magenta); }
.m-btn--ghost:hover { background: var(--magenta); color: #fff; }

.m-arrow-link {
    display: inline-flex; align-items: center; gap: 14px;
    font-family: var(--font-head); font-weight: 700; font-size: 13px;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.m-arrow-link:hover { text-decoration: none; }
.m-arrow-link__icon {
    width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
    flex: none; transition: transform .2s ease;
}
.m-arrow-link__icon svg { width: 100%; height: 100%; display: block; }
.m-arrow-link--right:hover .m-arrow-link__icon { transform: translateX(4px); }
.m-arrow-link--down:hover .m-arrow-link__icon { transform: translateY(4px); }
.m-arrow-link--magenta { color: var(--magenta); }
.m-arrow-link--white { color: #fff; }
.m-arrow-link--navy { color: var(--navy); }

/* ---------------------------------------------------------------- Decorative bubble
   Perfectly round teal bubble pinned to the top-right, slightly off-screen. */
.m-bubble { position: absolute; border-radius: 50%; z-index: 1; pointer-events: none; }
.m-bubble--teal { background: var(--teal); }
.m-bubble--purple { background: var(--purple); }
.m-bubble--top-right { top: -70px; right: -60px; width: 300px; height: 300px; }
@media (max-width: 700px) { .m-bubble { display: none; } }

/* ---------------------------------------------------------------- Header
   Sticky pill bar that floats OVER the hero (negative margin pulls the hero up
   beneath it); menu items are right-aligned. */
.site-header {
    position: sticky; top: 0; z-index: 100;
    padding: 18px var(--gutter) 0;
    margin-bottom: calc(-1 * var(--header-h));
    pointer-events: none;
}
:root { --header-h: 90px; }
.site-header__bar {
    pointer-events: auto;
    max-width: 1380px; margin: 0 auto;
    background: #fff; border-radius: 50px;
    box-shadow: 0 10px 40px rgba(1, 21, 62, 0.10);
    display: flex; align-items: center; justify-content: flex-start;
    padding:12px 8px 12px 18px; gap: clamp(18px, 2.4vw, 40px); min-height: 72px;
}
.site-logo { display: inline-flex; align-items: center; flex: none; }
.site-logo svg, .site-logo img { width: 158px; height: auto; }
.primary-nav { display: flex; margin-left: auto; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 44px); }
.primary-nav a {
    font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--navy);
}
.primary-nav a:hover, .primary-nav .current-menu-item > a { color: var(--magenta); text-decoration: none; }
.header-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--navy); margin: 5px 0; transform-origin: center; transition: transform .3s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------- Footer */
.site-footer { background: var(--navy); color: #fff; padding: 72px 0 40px; }
.site-footer a { color: rgba(255,255,255,0.82); font-size: 14px; }
.site-footer a:hover { color: #fff; }
/* Brand column absorbs the slack so the three link columns sit squashed to the right. */
.footer-grid { display: grid; grid-template-columns: 1fr repeat(3, minmax(150px, 190px)); gap: clamp(28px, 4vw, 56px); }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
    width: 38px; height: 38px; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.footer-social a:hover { opacity: .85; }
.footer-social svg { width: 100%; height: 100%; display: block; }
.footer-col h4 { font-family: var(--font-body); font-weight: 700; font-size: 14px; margin-bottom: 16px; color: #fff; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.24); margin-top: 48px; padding-top: 22px;
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-size: 13px; color: rgba(255,255,255,0.6);
}

/* ---------------------------------------------------------------- Hero (full-bleed photo) */
.page-hero {
    position: relative; color: #fff; min-height: 758px; display: flex; align-items: center;
    background-size: cover; background-position: center;
}
.page-hero::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(1,21,62,0.78) 0%, rgba(1,21,62,0.45) 55%, rgba(1,21,62,0.15) 100%);
}
.page-hero .container { position: relative; z-index: 2; padding-block: calc(var(--header-h) + 40px) 90px; }
/* Pages whose first block is a plain section (team/case single) must clear the floating nav. */
.site-main > .section:first-child { padding-top: calc(var(--section-pad) + var(--header-h)); }
.page-hero h1 { max-width: 14ch; }
.page-hero .lead { max-width: 46ch; color: rgba(255,255,255,0.9); }
/* LENS + Case-study archive heroes use a larger subheading than other pages. */
.page-hero--lead-lg .lead {   line-height: 1.3; max-width: 26ch; }
.page-hero__eyebrow { color: #fff; opacity: .85; }

/* ---------------------------------------------------------------- LENS page */
.lens-intro__lead { font-family: var(--font-head); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.3; color: var(--navy); margin: 0 0 22px; }
.lens-intro__detail { margin-top: 30px; }
.lens-intro__label { font-weight: 700; color: var(--navy); }
.lens-intro__detail p { font-size: 16px; line-height: 1.6; }
.lens-intro__discipline { margin: 0 0 16px; }
.lens-intro__combined { font-weight: 700; color: var(--navy); margin-top: 22px; }
.lens-icon { display: flex; align-items: flex-start; justify-content: end; }
.lens-icon__card {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; max-width: 400px; aspect-ratio: 3/4; border-radius: var(--radius);
    background: linear-gradient(160deg, var(--magenta) 0%, var(--purple) 48%, var(--navy) 100%);
}
.lens-icon__card img { width: 64%; }

/* ---------------------------------------------------------------- Gradient band */
.gradient-band {
    background: linear-gradient(110deg, var(--magenta) 0%, #5e2178 50%, #45408c 100%);
    color: #fff; text-align: center;
    display: flex; align-items: center;
}
@media (prefers-reduced-motion: no-preference) {
    .gradient-band.is-animating {
        transition: background-size 0.55s ease-out, background-position 0.55s ease-out;
    }
}
.gradient-band .container { padding-block: clamp(60px, 9vw, 120px); width: 100%; }
/* Homepage statement band matches the design's taller min-height. */
.gradient-band--tall { min-height: clamp(420px, 38vw, 540px); }
/* LENS "Where LENS is most useful": smaller heading, large statement paragraph. */
.gradient-band--lens h2 { font-size: clamp(26px, 2.8vw, 34px); margin-bottom: 24px; }
.gradient-band--lens .lead {
    font-family: var(--font-head); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.25;
    max-width: 22ch; margin-inline: auto; color: #fff;
}
.gradient-band h2 { font-size: clamp(32px, 4vw, 52px); max-width: 30ch; margin-inline: auto; line-height: 1.2; }
.gradient-band--wide h2 { max-width: 42ch; font-size: clamp(28px, 3.4vw, 44px); }

/* Section colour helpers */
.bg-navy { background: var(--navy); color: #fff; }
.bg-magenta { background: var(--magenta); color: #fff; }
.bg-purple { background: var(--purple); color: #fff; }
.bg-teal { background: var(--teal); color: var(--navy); }
.bg-stone { background: var(--stone); }
.bg-stone-light { background: var(--stone-light); }
.bg-grey { background: var(--grey); }
.bg-navy .eyebrow, .bg-purple .eyebrow, .bg-magenta .eyebrow { color: #fff; }

/* ---------------------------------------------------------------- CTA block */
.cta-block { position: relative; overflow: hidden; background: var(--navy); color: #fff; }
.cta-block .container:after {
    content: " ";
    display: block;
    width: 91%;
    border-bottom: 1px solid rgba(255, 255, 255, .24);
    position: absolute;
    bottom: 0;
}
.cta-block .container { position: relative; z-index: 2; padding-block: clamp(64px, 8vw, 104px);  }
.cta-block .container > { position: relative; z-index: 2; padding-block: clamp(64px, 8vw, 104px); border-bottom: 1px solid rgba(255, 255, 255, .14);}
.cta-block h2 { font-size: clamp(38px, 4.4vw, 54px); margin-bottom: 18px; max-width: 690px;}
.cta-block p { font-size: 20px; max-width: 40ch; margin-bottom: 34px; color: rgba(255,255,255,0.92); }
.cta-block__circle {
    position: absolute; border-radius: 50%; z-index: 1;
    transform: translate3d(var(--blob-x, 0px), var(--blob-y, 0px), 0);
    transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}
.cta-block.is-blobs-active .cta-block__circle { transition: transform .35s cubic-bezier(.33, 1, .68, 1); }
.cta-block__circle--teal { width: 300px; height: 300px; background: var(--teal); top: -40px; right: -30px; }
.cta-block__circle--purple { width: 520px; height: 520px; background: var(--purple); bottom: -150px; right: -20px; opacity: .92; z-index: 2; }
.page-template-template-approach-php h1 {
    max-width: 989px;
}
.page-template-template-about-php h1 {
    max-width: 690px;
}

.cta-block__circle--purple {
    width: 330px;
    height: 330px;
    background: var(--purple);
    bottom: 30px;
    right: 200px;
    opacity: .92;
    z-index: 2;
}
.cta-block__circle--teal {
    width: 230px;
    height: 230px;
    background: var(--teal);
    top: -20px;
    right: 40px;
}

@media (prefers-reduced-motion: reduce) { .cta-block__circle { transform: none; transition: none; } }
@media (max-width: 700px) { .cta-block__circle { display: none; } }

/* ---------------------------------------------------------------- Testimonial slider ("What clients say") */
/* The section sits on light grey everywhere it appears, except the case-study
   single (white) and the homepage photo variant (.testi--image). */
.testi { background: var(--grey-light); position: relative; }
.single-case_study .testi { background: transparent; }
/* The purple card is narrower than the container, per the design. */
.testi__inner {
    background: var(--purple); color: #fff; border-radius: var(--radius-lg);
    padding: clamp(44px, 6vw, 80px); text-align: center; position: relative; z-index: 2;
    max-width: 1080px; margin: 0 auto;
}
.testi__eyebrow { color: var(--magenta); }
.testi__track { display: flex; overflow: hidden; }
.testi__slide { min-width: 100%; opacity: 0; transition: opacity .4s ease; display: none; margin:0;}
.testi__slide.is-active { opacity: 1; display: block; }
.testi__quote { font-family: var(--font-head); font-size: clamp(22px, 2.5vw, 32px); line-height: 1.3; margin: 0 auto 22px; max-width: 48ch; }
.testi__attr { font-weight: 700; font-style: normal; font-size: 14px; opacity: .85; }
.testi__dots { display: flex; gap: 10px; justify-content: center; margin-top: 28px; }
.testi__dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.35); cursor: pointer; padding: 0; }
.testi__dots button.is-active { background: #fff; }
.testi__dots button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Homepage variant: a photo fills the section; the purple card sits on top and the
   photo shows below it. */
.testi--image {
    background-size: cover; background-position: center;
    min-height: 1024px; padding-block: 0; display: flex; align-items: flex-end;
}
.testi--image .container { position: relative; z-index: 2; width: 100%; padding-block: 0 130px; }
/* The homepage testimonial card spans (nearly) the full container width. */
.testi--image .testi__inner { max-width: none; }

/* ---------------------------------------------------------------- Case study cards
   Coloured media square (rounded, on top) with the meta panel peeking up behind it. */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 72px; align-items: start; }
/* The archive shows a denser 3-up grid than the homepage "latest work" row. */
.cs-archive-grid { gap: 30px; }
.m-case-card {
    position: relative; display: flex; flex-direction: column;
    color: #fff; text-decoration: none; transition: transform .25s ease;
}
.m-case-card:hover { transform: translateY(-6px); text-decoration: none; }
.m-case-card__media {
    position: relative; z-index: 2; aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center; padding: clamp(30px, 3vw, 44px);
    border-radius: var(--radius);
}
.m-case-card--purple .m-case-card__media { background: var(--purple); }
.m-case-card--magenta .m-case-card__media { background: var(--magenta); }
.m-case-card--teal .m-case-card__media { background: var(--teal); }
.m-case-card--navy .m-case-card__media { background: var(--navy); }
.m-case-card__circle { width: 100%; aspect-ratio: 1/1; border-radius: 50%; background-size: cover; background-position: center; }
.m-case-card__meta {
    position: relative; z-index: 1; background: var(--grey-light); color: var(--navy);
    margin-top: calc(-1 * var(--card-peek));
    padding: calc(26px + var(--card-peek)) 54px 32px;
    border-radius: 0 0 var(--radius) var(--radius);
    flex: 1; display: flex; flex-direction: column; gap: 8px; text-align: center;
}
.m-case-card__sector { font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; color: var(--magenta); }
.m-case-card__title { font-family: var(--font-head); font-size: 22px; line-height: 1.2; }

/* ---------------------------------------------------------------- How we work / feature cards
   Navy rounded header (pink title) with the teal body peeking up behind it. */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
.feature-card { position: relative; display: flex; flex-direction: column; }
.feature-card__head {
    position: relative; z-index: 2; background: var(--navy); border-radius: var(--radius);
    padding: 40px 28px 44px; text-align: center; min-height: 150px;
    display: flex; align-items: center; justify-content: center;
}
.feature-card__head h3 { font-size: clamp(28px, 2.4vw, 32px); line-height: 1.12; margin: 0; color: var(--magenta); }
.feature-card__body {
    position: relative; z-index: 1; background: var(--teal); color: var(--navy);
    margin-top: calc(-1 * var(--card-peek));
    padding: calc(30px + var(--card-peek)) 53px 40px;
    border-radius: 0 0 var(--radius) var(--radius);
    flex: 1; font-size: 17px; line-height: 1.5; text-align: center;
}

/* ---------------------------------------------------------------- Service cards (Our Approach) */
.service-card { display: grid; grid-template-columns: 1fr 400px; border-radius: var(--radius); overflow: hidden; min-height: 420px; margin-bottom: 30px; }
.service-card__text { padding: clamp(32px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.service-card__text h3 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; }
.service-card__text h3 strong { font-weight: 700; display: block; }
.service-card__subtitle { font-weight: 400; display: block; }
.service-card__text p { font-size: 16px; line-height: 1.6; max-width: 603px;}

/* Our Approach → sticky-stacking content cards.
   Each card sticks just below the floating header; the next card scrolls up and
   stacks over it. Equal min-height keeps the stack tidy. */
.sticky-stack { position: relative; }
.sticky-stack .service-card {
    position: sticky;
    top: calc(var(--header-h) + 16px + var(--i, 0) * 0px);
    z-index: calc(var(--i, 0) + 1);
    min-height: clamp(540px, 68vh, 640px);
    margin-bottom: 40px;
    box-shadow: 0 -10px 40px rgba(1, 21, 62, 0.12);
}
/* Mobile/tablet: normal scroll — no sticky card stacking */
@media (max-width: 1024px) {
    .sticky-stack .service-card {
        position: static;
        z-index: auto;
        min-height: 420px;
        margin-bottom: 30px;
        box-shadow: none;
    }
}
article.single-case-study h1 {
    max-width: 24ch !important;
}
article.single-case-study .section:nth-child(4) > .container:after {
    border-bottom: 1px solid #c8c8c8;
    content: " ";
    display: block;
    width: 100%;
    position: relative;
    bottom: -90px;
}
.service-card__media { background-size: cover; background-position: center; }
.service-card--purple .service-card__text { background: var(--purple); color: #fff; }
.service-card--teal .service-card__text { background: var(--teal); color: var(--navy); }
.service-card--navy .service-card__text { background: var(--navy); color: #fff; }
.service-card--lens { grid-template-columns: 1fr 480px; min-height: 480px; }
.service-card--lens .service-card__text { background: var(--teal); color: var(--navy); justify-content: center; }
.service-card--lens .service-card__media { background: linear-gradient(160deg, var(--magenta) 0%, var(--purple) 52%, var(--navy) 100%); display: flex; align-items: center; justify-content: center; }
.service-card--lens .service-card__media img { width: 58%; }
.lens-card__label { font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 2vw, 24px); color: var(--navy); display: block; margin-bottom: 10px; }
.lens-card__title { font-family: var(--font-head); font-size: clamp(28px, 3.2vw, 42px); line-height: 1.12; color: var(--navy); margin: 0 0 22px; max-width: 21ch; }
.lens-card__body { font-size: 15px; line-height: 1.55; color: var(--navy); max-width: 46ch; margin-bottom: 30px; }
section.gradient-band.gradient-band--lens h2 {
    font-weight: 600;
}
section.gradient-band.gradient-band--lens .lead{
    max-width: 35ch;
}
article.single-case-study > .container.section {
    margin-top: 12px;
}

.post-type-archive-case_study .page-hero .lead {
    max-width: 24ch !important;
}
/* ---------------------------------------------------------------- Logo strips */
.logo-strip { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.logo-strip img { max-height: 70px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .8; }
.award-strip { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 64px); flex-wrap: wrap; }
.award-strip img { max-height: 110px; width: auto; object-fit: contain; }

/* Infinitely-scrolling logo marquee (clients / awards). */
.marquee {
    overflow: hidden; width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marquee__track { display: flex; width: max-content; animation: marquee-scroll var(--marquee-dur, 75s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee--clients .marquee__group img { max-height: 70px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .8; margin: 0 44px; }
.marquee--awards { --marquee-dur: 72s; }
.marquee--awards .marquee__group img { max-height: 110px; width: auto; object-fit: contain; margin: 0 48px; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }
p.voices-signup__intro {
    display: none;
}
body .voices-signup {
    margin-top: 0; 
}
.voices-signup__form input[type=submit]{ 
    padding: 13px 30px;
    margin-top: 15px;
}
body.blog.logged-in.wp-theme-magentaresearch p.lead {
    max-width: 550px;
}
@media (max-width: 969px) {
    body.blog.logged-in.wp-theme-magentaresearch p.lead {
        max-width: 520px;
    }
}
a:hover{
    text-decoration: none !important;
}
/* ---------------------------------------------------------------- Two column text rows */
.text-rows { display: grid; gap: 56px; }
.text-row { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: clamp(30px, 6vw, 96px); align-items: start; }
.text-row h3 { font-size: clamp(22px, 2.4vw, 30px); }
.text-row__body { font-size: 16px; line-height: 1.7; }

/* Case study body icon rows */
/* Case study body "table": icon | heading | body, per the design. */
.cs-rows { display: grid; gap: clamp(48px, 6vw, 72px); }
.cs-row { display: grid; grid-template-columns: 96px minmax(220px, 300px) 1fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
.cs-row__icon { width: 64px; height: 64px; flex: none; color: var(--magenta); display: flex; align-items: center; justify-content: center; }
.cs-row__icon svg { width: 100%; height: 100%; object-fit: contain; }
.cs-row__heading { font-size: clamp(20px, 2vw, 24px); margin: 0; line-height: 1.25; color: var(--navy); }
.cs-row__heading strong { font-weight: 700; display: block; }
.cs-row__heading span { font-weight: 400; display: block; }
.cs-row__body { font-size: 16px; line-height: 1.7; color: var(--navy); }

/* ---------------------------------------------------------------- Case study filter */
/* Plain-text filter (MEDIA / BRAND / RETAIL / CHARITY), per the design. */
.cs-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-top: 8px; }
.cs-filter__btn {
    font-family: var(--font-head); font-weight: 700; font-size: 14px; letter-spacing: .06em;
    text-transform: uppercase; padding: 6px 8px; border: 0; background: none;
    color: var(--navy); cursor: pointer; transition: color .2s;
}
.cs-filter__btn:not(:last-child)::after { content: "/"; margin-left: 16px; color: var(--navy); opacity: .45; }
.cs-filter__btn:hover { color: var(--magenta); }
.cs-filter__btn.is-active { color: var(--magenta); }
.m-case-cell { display: contents; }
.m-case-cell.is-hidden { display: none; }
/* When a filter shows fewer than three cards, centre them in the 3-up row. */
.case-grid.cs-archive-grid.cs-archive-grid--sparse {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}
.case-grid.cs-archive-grid.cs-archive-grid--sparse .m-case-cell:not(.is-hidden) {
    display: block;
    flex: 0 0 calc((100% - 60px) / 3);
    max-width: calc((100% - 60px) / 3);
}

/* ---------------------------------------------------------------- Current Vacancies */
/* Single-select filter (one role shown at a time). Rendered as clear pill
   buttons so it reads as interactive; only shown when there are 2+ roles. */
.vac-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.vac-filter__btn {
    font-family: var(--font-head); font-weight: 700; font-size: 14px; letter-spacing: .04em;
    text-transform: uppercase; padding: 12px 24px; border: 1.5px solid rgba(1,21,62,.18); border-radius: 999px;
    background: #fff; color: var(--navy); cursor: pointer; transition: color .2s, background .2s, border-color .2s;
}
.vac-filter__btn:hover { border-color: var(--magenta); color: var(--magenta); }
.vac-filter__btn.is-active { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.vac-cell.is-hidden { display: none; }

/* Spacing: the listing tucks under the hero via .peek-under. The active role's
   head sits directly below the hero (no filter) or below the filter pills. */
.vacancy__head { padding-top: clamp(32px, 4vw, 56px); }
.vac-listing .vac-cell .vacancy__head { padding-top: 0; }
.vac-listing--filtered .vac-cell .vacancy__head { padding-top: clamp(28px, 4vw, 56px); }

.vacancy__eyebrow { line-height: 1.6; }
.vacancy__subtitle { display: block; }
.vacancy__headline { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; margin: 14px auto 0; color: var(--navy); }

/* Sections table: icon | heading+lead | body. */
.vac-rows { display: grid; gap: clamp(40px, 5vw, 64px); }
.vac-row { display: grid; grid-template-columns: 96px minmax(220px, 320px) 1fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
.vac-row__icon { width: 64px; height: 64px; flex: none; color: var(--magenta); display: flex; align-items: center; justify-content: center; }
.vac-row__icon svg { width: 100%; height: 100%; object-fit: contain; }
.vac-row__heading { font-size: clamp(20px, 2vw, 24px); margin: 0; line-height: 1.25; color: var(--navy); font-weight: 700; }
.vac-row__lead { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--navy); font-weight: 600; }
.vac-row__lead p { margin: 0 0 10px; }
.vac-row__body { font-size: 16px; line-height: 1.7; color: var(--navy); }
.vac-row__body p { margin: 0 0 14px; }
.vac-row__body p:last-child { margin-bottom: 0; }

.vac-contact .eyebrow { display: block; margin-bottom: 18px; }

/* ---------------------------------------------------------------- Single vacancy hero overlay */
.single-vacancy__hero-title {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #fff; font-family: var(--font-head); font-weight: 700;
    font-size: clamp(32px, 4.5vw, 64px); text-align: center; padding: 24px;
    background: linear-gradient(180deg, rgba(1,21,62,.25), rgba(1,21,62,.45));
}

/* ---------------------------------------------------------------- Team grid */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
/* About → "Our team" horizontal carousel */
.team-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.team-head__title { max-width: 32ch; margin: 8px 0 0; overflow-wrap: normal; word-break: normal; }
.team-nav { display: flex; gap: 12px; flex: none; }
.team-nav__btn {
    width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--navy); background: transparent;
    color: var(--navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.team-nav__btn:hover { background: var(--navy); color: #fff; }
.team-nav__btn svg { width: 22px; height: 22px; }
.team-nav__btn[disabled] { opacity: .3; cursor: default; }
.team-carousel {
    display: flex; gap: 26px; margin-top: 40px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding-bottom: 8px; scrollbar-width: thin;
}
.team-carousel .team-card { flex: 0 0 clamp(260px, 31%, 360px); scroll-snap-align: start; }
.team-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1/1; background: var(--purple); display: flex; align-items: flex-end; justify-content: center; }
/* Pink disc behind the cut-out portrait — same treatment as .founder-portrait */
.team-card::before {
    content: ""; position: absolute; left: 50%; top: 9%; transform: translateX(-50%);
    width: 80%; aspect-ratio: 1/1; background: var(--magenta); border-radius: 50%; z-index: 0;
}
.team-card img { position: relative; z-index: 1; width: 92%; height: auto; object-fit: contain; align-self: flex-end; }
.team-card__name {
    position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; flex-direction: column;
    background: rgba(84,69,150,0.55); color: #fff; opacity: 0; transition: .25s; text-align: center; padding: 20px;
}
.team-card:hover .team-card__name { opacity: 1; }
.team-card__name small { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; margin-bottom: 6px; }
.team-card__name span { font-family: var(--font-head); font-size: 24px; }

/* ---------------------------------------------------------------- Team bio hero */
.team-hero { background: var(--navy); border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-columns: 1fr 0.8fr; gap: 0; }
.team-hero__text { padding: clamp(36px, 5vw, 72px); display: flex; flex-direction: column; justify-content: center; }
.team-hero__media { position: relative; min-height: 360px; background: var(--purple); overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
/* Pink disc behind the cut-out portrait — same treatment as the team cards */
.team-hero__disc {
    position: absolute; left: 50%; top: 9%; transform: translateX(-50%);
    width: 80%; aspect-ratio: 1/1; background: var(--magenta); border-radius: 50%; z-index: 0;
}
.team-hero__photo { position: relative; z-index: 1; width: 88%; height: auto; object-fit: contain; align-self: flex-end; top:40px; }
@media (max-width: 860px) { .team-hero { grid-template-columns: 1fr; } .team-hero__media { min-height: 360px; } }

.team-hero__text p {
    max-width: 480px;
}

/* ---------------------------------------------------------------- Home hero */
.home-hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.home-hero .container { position: relative; z-index: 3; padding-block: clamp(180px, 18vw, 260px) clamp(120px, 14vw, 200px); }
.home-hero__copy { max-width: 760px; }
.home-hero h1 { font-size: clamp(38px, 4.4vw, 54px); max-width: none; line-height: 1.06; }
.home-hero .lead { max-width: 44ch; color: rgba(255,255,255,0.9); }
.home-hero__visual { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; z-index: 2; }
.home-hero__circle {
    position: absolute; width: clamp(320px, 34vw, 520px); aspect-ratio: 1 / 1; height: auto; border-radius: 50%;
    top: 55%; right: 0%; transform: translateY(-50%); background-size: cover; background-position: center;
    /* box-shadow: 0 30px 80px rgba(0,0,0,0.3); */
    z-index: 2;
}
.home-hero__blob {
    position: absolute; border-radius: 50%; z-index: 1;
    transform: translate3d(var(--blob-x, 0px), var(--blob-y, 0px), 0);
    transition: transform 1.1s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}
.home-hero.is-blobs-active .home-hero__blob {
    transition: transform .35s cubic-bezier(.33, 1, .68, 1);
}
@media (prefers-reduced-motion: reduce) {
    .home-hero__blob { transform: none; transition: none; }
}
.home-hero__blob--teal {
    width: 400px;
    height: 400px;
    background: var(--teal);
    top: -70px;
    right: -120px;
    opacity: 1;
}
.home-hero__blob--purple {
    width: 660px;
    height: 660px;
    background: var(--purple);
    bottom: -290px;
    right: 50px;
    opacity: .9;
}
/* Inner pages (e.g. Magenta Voices) — same height as .page-hero photo heroes */
.home-hero--archive {
    min-height: 758px;
    display: flex;
    align-items: center;
}
.home-hero--archive .container {
    padding-block: calc(var(--header-h) + 40px) 90px;
}
.home-hero--archive .home-hero__copy { max-width: 680px; }

/* Magenta Voices newsletter signup (in the page header) */
.voices-signup { margin-top: 32px; max-width: 520px; }
.voices-signup__intro { color: #fff; font-weight: 600; margin: 0 0 14px; }
.voices-signup__form .wpcf7-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.voices-signup__form .wpcf7 p { margin: 0; flex: 1 1 240px; }
.voices-signup__form .wpcf7-form-control-wrap { display: block; }
.voices-signup__form input[type="email"] {
    width: 100%; padding: 14px 18px; border-radius: 999px; border: 0;
    font-size: 16px; background: #fff; color: var(--navy);
}
.voices-signup__form input[type="submit"] {
    flex: 0 0 auto; padding: 14px 26px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--magenta); color: #fff; font-weight: 700; font-size: 15px;
    text-transform: uppercase; letter-spacing: .04em;
    opacity: 0; pointer-events: none; transition: opacity .8s ease;
}
.voices-signup__form.is-email-filled input[type="submit"] {
    opacity: 1; pointer-events: auto;
}
.voices-signup__form input[type="submit"]:hover { filter: brightness(1.08); }
.voices-signup__form .wpcf7-spinner { margin: 0 8px; }
.voices-signup__form .wpcf7-response-output { flex: 1 1 100%; margin: 4px 0 0; color: #fff; font-size: 14px; }
.voices-signup__form .wpcf7-not-valid-tip { color: #ffd2ea; font-size: 14px; }


@media (max-width: 980px) {
    .home-hero__visual { position: relative; width: 100%; height: 320px; }
    .home-hero__circle { right: 50%; transform: translate(50%, -50%); width: 280px; aspect-ratio: 1 / 1; height: auto; }
    /* .home-hero__blob { display: none; } */

    .home-hero__blob--teal {
        width: 400px;
        height: 400px;
        background: var(--teal);
        top: 120px;
        right: -120px;
        opacity: 1;
    }
    /* .home-hero__blob--purple {
        width: 660px;
        height: 660px;
        background: var(--purple);
        bottom: -290px;
        right: 50px;
        opacity: .9;
    } */

}

/* Magenta intro band (navy section with single sentence) */
/* Subhero band slides up behind the hero's rounded bottom corners. */
.intro-band { background: var(--magenta); color: #fff; position: relative; z-index: 1; margin-top: calc(-1 * var(--peek)); }
.intro-band .container { padding-block: calc(var(--peek) + 40px) 40px; }
.intro-band p { font-size: clamp(15px, 1.6vw, 18px); font-weight: 700; max-width: 46ch; line-height: 1.4; margin: 0; }
.intro-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.intro-band__inner .m-arrow-link { flex: none; }

.home-howwework__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.home-howwework__head .m-arrow-link { flex: none; }

/* Charity / split feature */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
.split__media { position: relative; }
.split__media .circle-bg { position: absolute; inset: -10% -10% -10% 10%; background: var(--teal); border-radius: 50%; z-index: 0; }
.split__media img { position: relative; z-index: 1; margin: 0 auto; max-width: 300px; }

p.text-row__body{
    max-width: 550px;
}
.page-hero .lead { 
    max-width: 527px !important;
}


/* Founder portrait (About → Our story): purple card, pink disc, cut-out portrait */
.founder-portrait { position: relative; background: var(--purple); border-radius: var(--radius-lg); aspect-ratio: 1/1; max-width: 460px; margin-inline: auto; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.founder-portrait__disc { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); width: 80%; aspect-ratio: 1/1; background: var(--magenta); border-radius: 50%; z-index: 0; }
.founder-portrait img { position: relative; z-index: 1; width: 92%; max-width: none; margin: 0; align-self: flex-end; }

/* About → Our story */
.about-story { background: #fff; }
.about-story__heading { font-size: clamp(24px, 2.7vw, 34px); line-height: 1.28; max-width: none; margin: 14px 0 0; color: var(--navy); }
.about-story .text-row__body { margin-top: 22px; }
.about-story__bold { font-weight: 700; color: var(--navy); margin-top: 18px; }
.about-story__attr { color: var(--magenta); margin-top: 22px; }

/* About → Giving back */
.giving-back__title { margin-bottom: 8px; }
.giving-back__copy p { font-size: 16px; line-height: 1.7; }
.giving-back__copy p + p { margin-top: 20px; }
.giving-back__media { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; }
.giving-back__media .circle-bg {display:none; position: absolute; inset: auto; width: 660px; height: 660px; right: -110px; top: 50%; transform: translateY(-50%); background: var(--teal); border-radius: 50%; z-index: 0; }
.giving-back__media img { position: relative; z-index: 1; max-width: 360px; margin: 0; }

/* ---------------------------------------------------------------- Blog (Magenta Voices) */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; scroll-margin-top: calc(var(--header-h) + 16px); }
.post-card { border-radius: var(--radius); overflow: hidden; background: var(--grey-light); display: flex; flex-direction: column; }
.post-card.post-card--enter { opacity: 0; transition: opacity .35s ease; }
.post-card.post-card--enter.is-visible { opacity: 1; }
.post-card__img { aspect-ratio: 16/10; background: var(--purple); background-size: cover; background-position: center; }
.post-card__body { padding: 24px; flex: 1; display: flex; flex-direction: column; gap: 10px; text-align: center;}
.post-card__body h3 { font-size: 22px; margin: 0; }
.post-card__body .meta { font-size: 13px; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; }
.post-pagination { margin-top: 48px; }
.post-pagination__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; max-width: 420px; margin: 0 auto;
}
.post-pagination .m-btn.is-disabled {
    opacity: 0.35; pointer-events: none; cursor: default;
}
.post-pagination .m-btn.is-disabled:hover {
    transform: none; background: var(--magenta);
}
.voices-archive.is-loading .post-grid {
    opacity: 0.45; pointer-events: none; transition: opacity .2s ease;
}
.voices-archive.is-loading .post-pagination .m-btn:not(.is-disabled) {
    opacity: 0.6; pointer-events: none;
}
span.contact-details__label {
    visibility: hidden;
}
.page-template-template-contact .eyebrow {
    display: none;
}

.post-single__wrap { max-width: 960px; }
.post-single__media {
    position: relative; margin: 0 0 clamp(32px, 5vw, 48px);
    display: flex; justify-content: center; align-items: center;
    min-height: clamp(300px, 38vw, 440px); width: 100%;
}
.post-single__blob { position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; }
.post-single__blob--teal {
    width: clamp(220px, 28vw, 320px);
    height: clamp(220px, 28vw, 320px);
    background: var(--teal);
    top: 60%;
    left: 40%;
    transform: translate(18%, -88%);
}
.post-single__blob--purple {
    width: clamp(320px, 42vw, 480px);
    height: clamp(320px, 42vw, 480px);
    background: var(--purple);
    opacity: .9;
    top: -4%;
    left: 6%;
    transform: translate(-22%, -8%);
}
.post-single__inner { max-width: 960px; }
.post-single__bubble {
    position: relative; z-index: 1;
    display: block;
    width: clamp(240px, 32vw, 360px); aspect-ratio: 1 / 1; border-radius: 50%;
    background-size: cover; background-position: center;
    box-shadow: 0 24px 70px rgba(1, 21, 62, 0.18);
}

/* Prev / next navigation on single posts */
.post-nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    margin-top: clamp(40px, 6vw, 64px); padding-top: 32px;
    border-top: 1px solid rgba(1, 21, 62, 0.12);
}
.post-nav__link {
    display: inline-flex; align-items: center; gap: 16px;
    text-decoration: none; color: var(--navy);
    border: 1.5px solid rgba(1, 21, 62, 0.16); border-radius: var(--radius);
    padding: 20px 26px; transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.post-nav__link--next { justify-content: flex-end; text-align: right; grid-column: 2; }
.post-nav__link:hover { border-color: var(--magenta); background: var(--navy); color: #fff; }
.post-nav__cue {
    font-size: 22px; line-height: 1; color: var(--magenta); flex: none;
}
.post-nav__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.post-nav__text small {
    font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--magenta); font-weight: 700;
}
.post-nav__text > span {
    font-family: var(--font-head); font-size: 18px; line-height: 1.25;
}
@media (max-width: 700px) {
    .post-nav { grid-template-columns: 1fr; }
    .post-nav__link--next { grid-column: 1; }
}

/* ---------------------------------------------------------------- Contact */
.home-hero--contact {
    min-height: 758px;
    display: flex;
    align-items: center;
}
.home-hero--contact .container {
    width: 100%;
    padding-block: calc(var(--header-h) + 40px) 90px;
}
.home-hero--contact .home-hero__copy { max-width: 680px; }

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(40px, 6vw, 88px);
    align-items: start;
}
.contact-form input, textarea {
    margin-bottom: 20px;
}

section.section.peek-under.vac-listing {
    position: relative;
    top: -20px;
}

h2.vacancy__headline {
    padding-top: 40px;
    padding-bottom: 30px;
}
.contact-aside__title { font-size: clamp(28px, 3.2vw, 40px); max-width: 18ch; margin: 0 0 16px; }
.contact-aside__lead { max-width: 42ch; margin-bottom: 36px; color: rgba(1, 21, 62, 0.88); }

.contact-steps {
    list-style: none; margin: 0 0 40px; padding: 0;
    display: grid; gap: 22px;
}
.contact-steps__item {
    display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start;
}
.contact-steps__num {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--magenta); color: #fff;
    font-family: var(--font-head); font-weight: 700; font-size: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    flex: none;
}
.contact-steps__item strong {
    display: block; font-family: var(--font-head); font-size: 18px;
    color: var(--navy); margin-bottom: 4px;
}
.contact-steps__item p { font-size: 15px; line-height: 1.55; color: rgba(1, 21, 62, 0.82); margin: 0; }

.contact-details {
    display: grid; gap: 18px; padding-top: 8px;
    border-top: 1px solid rgba(1, 21, 62, 0.12);
}
.contact-details__label {
    display: block; font-family: var(--font-head); font-weight: 700;
    font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--magenta); margin-bottom: 4px;
}
.contact-details a { font-size: 17px; font-weight: 500; color: var(--navy); text-decoration: none; }
.contact-details a:hover { color: var(--magenta); text-decoration: underline; }
/* LinkedIn "Follow us" — navy button with pink LinkedIn icon */
.contact-linkedin-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--navy); color: #fff !important;
    font-family: var(--font-head); font-weight: 700; font-size: 16px;
    padding: 12px 22px; border-radius: 999px;
    text-decoration: none !important; transition: background .2s ease, transform .2s ease;
}
.contact-linkedin-btn:hover { background: #02205c; transform: translateY(-1px); }
.contact-linkedin-btn__icon { color: var(--magenta); flex: none; }
.contact-aside__extra { margin-top: 32px; }

/* Form panel — navy header with white body, teal accent bubble */
.contact-form-panel {
    position: relative; overflow: hidden;
    border-radius: var(--radius);
    box-shadow: 0 24px 70px rgba(1, 21, 62, 0.12);
}
.contact-form-panel__bubble {
    position: absolute; z-index: 0; pointer-events: none;
    width: 220px; height: 220px; border-radius: 50%;
    background: var(--teal);
    top: -70px; right: -50px;
}
.contact-form-panel__head {
    position: relative; z-index: 1;
    background: var(--navy); color: #fff;
    padding: clamp(28px, 4vw, 40px) clamp(28px, 4vw, 48px);
}
.contact-form-panel__head h2 {
    font-size: clamp(24px, 2.8vw, 32px); margin: 0 0 8px;
}
.contact-form-panel__head p {
    margin: 0; font-size: 15px; color: rgba(255, 255, 255, 0.78);
}
.contact-form-panel__body {
    position: relative; z-index: 1;
    background: #fff;
    padding: clamp(28px, 4vw, 44px) clamp(28px, 4vw, 48px) clamp(32px, 4vw, 48px);
}

/* CF7 form layout */
.contact-form .wpcf7-form { margin: 0; }
.contact-form .wpcf7-form > p { margin: 0; }
.contact-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
}
.contact-form__field--full { grid-column: 1 / -1; }
.contact-form__label {
    display: block;
    font-family: var(--font-head); font-weight: 700;
    font-size: 13px; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--navy);
    margin-bottom: 8px;
}
.contact-form__input,
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form input[type=tel],
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: 16px 18px;
    border: 2px solid var(--grey);
    border-radius: 16px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.4;
    background: var(--grey-light);
    color: var(--navy);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.contact-form__input::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(1, 21, 62, 0.42); }
.contact-form__input:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-color: var(--magenta);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(251, 0, 153, 0.1);
}
.contact-form__textarea,
.contact-form textarea { min-height: 180px; resize: vertical; }
.contact-form__recaptcha { margin-top: 4px; }
.grecaptcha-badge { display: none; }
.contact-form__actions { margin-top: 8px; }
.contact-form__submit,
.contact-form .wpcf7-submit {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%;
    background: var(--magenta); color: #fff; border: 0; border-radius: 50px;
    font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 18px 34px; cursor: pointer; font-size: 16px;
    transition: background .2s ease, transform .2s ease;
}
.contact-form__submit:hover,
.contact-form .wpcf7-submit:hover { background: #d80085; transform: translateY(-1px); }
.contact-form .wpcf7-not-valid-tip {
    font-size: 13px; color: #c4006a; margin-top: 6px;
}
.contact-form .wpcf7-response-output {
    margin: 20px 0 0; padding: 14px 18px; border-radius: 12px;
    font-size: 15px; border: 2px solid transparent;
}
.contact-form .wpcf7 form.invalid .wpcf7-response-output,
.contact-form .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-form .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: rgba(196, 0, 106, 0.25); background: rgba(251, 0, 153, 0.06);
}
.contact-form .wpcf7 form.sent .wpcf7-response-output {
    border-color: rgba(0, 207, 207, 0.45); background: rgba(0, 207, 207, 0.12);
}
@media (max-width: 640px) {
    .contact-form__grid { grid-template-columns: 1fr; }
    .contact-form-panel__bubble { display: none; }
}

/* ---------------------------------------------------------------- Single content */
.entry-content { font-size: 18px; line-height: 1.7; max-width: 760px; }
.entry-content h2 { margin-top: 1.6em; }
.entry-content img { border-radius: var(--radius); margin: 1.5em 0; }
.blog .home-hero .eyebrow {
    display: none;
}
/* ---------------------------------------------------------------- Utilities & responsive */
.stack-gap > * + * { margin-top: 1rem; }
.mt-0 { margin-top: 0; }

.post-card__body .meta { 
    font-weight: 600;
}

.post-card__body > span {
    text-align: center;
}

@media (min-width: 1200px) {
    article.service-card.service-card--lens h3 {
        max-width: 600px;
    }   
.service-card { 
    grid-template-columns: 1fr 540px; 
}
    .home-hero__visual {
        position: absolute;
        top: 0;
        right: calc(50% - 760px);
        bottom: 0;
        width: 46%;
        z-index: 2;
    }
    .footer-col:nth-child(3) {
        position: relative;
        right: -40px;
    }
}

@media (max-width: 1200px) {
    article.single-case-study .section:nth-child(4) > .container:after {
        border-bottom: 1px solid #c8c8c8;
        content: " ";
        display: block;
        width: 100%;
        position: relative;
        bottom: -40px;
    }
    .site-header__bar { position: relative; }
    /* Animated drop panel: kept in the DOM (no display:none) so it can transition
       open/closed. Taller, with teal + purple accent circles tucked at the edges. */
    .primary-nav {
        display: flex; align-items: center; justify-content: center;
        position: absolute; top: calc(100% + 12px); left: 0; right: 0;
        min-height: min(64vh, 560px);
        background: #fff; border-radius: 38px; padding: 56px 30px;
        box-shadow: 0 20px 50px rgba(1,21,62,.18);
        overflow: hidden;
        opacity: 0; visibility: hidden;
        transform: translateY(-14px) scale(.97); transform-origin: top center;
        transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.25,1), visibility 0s linear .4s;
    }
    .primary-nav.is-open {
        opacity: 1; visibility: visible; transform: translateY(0) scale(1);
        transition: opacity .3s ease, transform .42s cubic-bezier(.2,.8,.25,1), visibility 0s;
        background: #fb0099;
    }
    /* Accent circles at the panel edges */
    .primary-nav::before, .primary-nav::after {
        content: ""; position: absolute; border-radius: 50%; z-index: 0; pointer-events: none;
    }
    .primary-nav::before { width: 220px; height: 220px; background: var(--teal); top: -88px; right: -72px; }
    .primary-nav::after { width: 300px; height: 300px; background: var(--purple); bottom: -172px; left: -90px; opacity: .92; }
    .primary-nav ul { position: relative; z-index: 1; flex-direction: column; align-items: stretch; gap: 26px; width: 100%; }
    .primary-nav li { width: 100%; text-align: center; opacity: 0; transform: translateY(12px); transition: opacity .35s ease, transform .35s ease; }
    .primary-nav.is-open li { opacity: 1; transform: none; }
    .primary-nav.is-open li:nth-child(1) { transition-delay: .10s; }
    .primary-nav.is-open li:nth-child(2) { transition-delay: .16s; }
    .primary-nav.is-open li:nth-child(3) { transition-delay: .22s; }
    .primary-nav.is-open li:nth-child(4) { transition-delay: .28s; }
    .primary-nav.is-open li:nth-child(5) { transition-delay: .34s; }
    .primary-nav.is-open li:nth-child(6) { transition-delay: .40s; }
    .primary-nav a { font-size: 24px; color: white; }
    .primary-nav a:hover { font-size: 24px; color: var(--navy); }
    .nav-toggle { display: block; margin-left: auto; 
        position: relative;
        right: -8px;}
    .header-actions .m-btn { display: none; }
    .home-hero .container {
        padding-top: 130px;
    }
    .primary-nav a:hover, .primary-nav .current-menu-item > a {
        color: var(--navy); 
    }
    section.page-hero.peek-host .container > div:nth-child(4) {
        gap: 20px !important;
    }
    .testi--image{
        min-height: 800px;
    }
    .service-card__text {
        padding-top: 40px;
        padding-left: 40px;
    }
    .service-card__text h3 strong,.service-card__subtitle{
        display: inline;
    }
    .service-card--lens .service-card__media img {
        width: 38%;
    }
    article.single-case-study {
        padding-top: 50px;
    }
    article.single-case-study > div > div {
        border-radius: 30px !important;
    }
}

@media (max-width: 1200px) and (prefers-reduced-motion: reduce) {
    .primary-nav, .primary-nav li { transition: opacity .15s ease; transform: none; }
    .primary-nav.is-open li { transition-delay: 0s; }
}

@media (max-width: 1024px) {
    .case-grid, .feature-grid, .team-grid, .post-grid { grid-template-columns: repeat(2, 1fr); }
    .case-grid.cs-archive-grid.cs-archive-grid--sparse .m-case-cell:not(.is-hidden) {
        flex: 0 0 calc((100% - 30px) / 2);
        max-width: calc((100% - 30px) / 2);
    }
    .service-card { grid-template-columns: 1fr; }
    .service-card__media { min-height: 240px; }
    .text-row { grid-template-columns: 1fr; gap: 12px; }
    .cs-row { grid-template-columns: 1fr; gap: 12px; }
    .vac-row { grid-template-columns: 1fr; gap: 12px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    .split, .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .case-grid, .feature-grid, .team-grid, .post-grid { grid-template-columns: 1fr; }
    .case-grid.cs-archive-grid.cs-archive-grid--sparse .m-case-cell:not(.is-hidden) {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .logo-strip { justify-content: center; }
}

/* ---------------------------------------------------------------- Cookie bar */
body:has(#cookie-bar) { padding-bottom: clamp(88px, 12vw, 120px); }

.cookie-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    background: var(--navy); color: #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -8px 32px rgba(1, 21, 62, 0.18);
    padding: 18px 0;
}
.cookie-bar__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: clamp(16px, 3vw, 32px);
}
.cookie-bar__text {
    margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.9);
}
.cookie-bar__text a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.cookie-bar__text a:hover { color: var(--magenta); text-decoration: underline; }
.cookie-bar__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.cookie-bar__decline {
    background: transparent; border-color: rgba(255, 255, 255, 0.45); color: #fff;
}
.cookie-bar__decline:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; }
.cookie-bar__accept { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 720px) {
    .cookie-bar__inner { flex-direction: column; align-items: stretch; text-align: center; }
    .cookie-bar__actions { flex-direction: column; width: 100%; }
    .cookie-bar__accept,
    .cookie-bar__decline { width: 100%; }
}