/*
Theme Name: Agency Theme
Theme URI:
Author: Jake
Description: Custom theme for a creative agency, built around ACF field groups.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: agency-theme
*/

/* === Reset & Base === */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-bg: #000;
    --color-surface: #141414;
    --color-surface-alt: #1a1a1a;
    --color-border: #2a2a2a;
    --color-text: #fff;
    --color-text-muted: #888;
    --color-accent: #cddd00;
    --color-accent-dark: #b0be00;
    --color-white: #fff;
    --color-overlay: rgba(0, 0, 0, 0.6);
    --font-heading: 'Chivo', "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: 'Chivo', "Helvetica Neue", Helvetica, Arial, sans-serif;
    --max-width: 1400px;
    --gap: clamp(1rem, 3vw, 3rem);
    --header-height: 80px;
    --transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /*
     * Stable viewport-height unit. Write calc(N * var(--svh)), never Nsvh.
     * header.php overwrites this with a px value measured once per width,
     * because Firefox on iOS resizes 1svh continuously while its toolbars
     * hide and show, which rescaled section heights and cover images
     * mid-scroll. 1svh is the fallback if that script never runs.
     */
    --svh: 1svh;

    /*
     * Horizontal spacing scale. Width-based on purpose: these used to be vh,
     * which made left/right padding track the viewport HEIGHT, so everything
     * shifted sideways when a mobile browser collapsed its URL bar. Desktop
     * values match the old vh sizes at a ~1080px-tall viewport.
     */
    --space-x-xs:  clamp(0.5rem, 0.8vw, 0.75rem);      /* was 1vh    */
    --space-x-sm:  clamp(0.75rem, 2vw, 1.75rem);       /* was 2.5vh  */
    --space-x-md:  clamp(1rem, 3vw, 2.75rem);          /* was 4vh    */
    --space-x-lg:  clamp(1.25rem, 3.75vw, 3.375rem);   /* was 5vh    */
    --space-x-xl:  clamp(2rem, 7.5vw, 6.75rem);        /* was 10vh   */
    --space-x-2xl: clamp(2.5rem, 11.25vw, 10.125rem);  /* was 15vh   */
}

:root {
    --font-size-body: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
    --font-size-h6: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
    --font-size-h5: clamp(1rem, 0.875rem + 0.625vw, 1.625rem);
    --font-size-h4: clamp(1.25rem, 1.1rem + 0.75vw, 2rem);
    --font-size-h3: clamp(1.125rem, 0.95rem + 0.875vw, 2rem);
    --font-size-h2: clamp(1.625rem, 1.375rem + 1.25vw, 2.875rem);
    --font-size-h1: clamp(1.625rem, 1.25rem + 1.875vw, 3.5rem);
    --font-size-btn1: clamp(0.75rem, 0.725rem + 0.125vw, 0.875rem);
    --font-size-hero1: clamp(1.75rem, 0.35rem + 6.2vw, 5.25rem);
    --font-size-hero2: clamp(4rem, 3.35rem + 9.2vw, 9.25rem);
}

/* === Google Fonts === */
/* tomorrow-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Tomorrow';
  font-style: normal;
  font-weight: 100;
  src: url('../agency-theme/fonts/tomorrow-v19-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* tomorrow-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Tomorrow';
  font-style: italic;
  font-weight: 100;
  src: url('../agency-theme/fonts/tomorrow-v19-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* tomorrow-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Tomorrow';
  font-style: normal;
  font-weight: 700;
  src: url('../agency-theme/fonts/tomorrow-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* tomorrow-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Tomorrow';
  font-style: italic;
  font-weight: 700;
  src: url('../agency-theme/fonts/tomorrow-v19-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* tomorrow-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Tomorrow';
  font-style: normal;
  font-weight: 800;
  src: url('../agency-theme/fonts/tomorrow-v19-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* tomorrow-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Tomorrow';
  font-style: italic;
  font-weight: 800;
  src: url('../agency-theme/fonts/tomorrow-v19-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* rajdhani-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 400;
  src: url('../agency-theme/fonts/rajdhani-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* rajdhani-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 500;
  src: url('../agency-theme/fonts/rajdhani-v17-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* rajdhani-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  src: url('../agency-theme/fonts/rajdhani-v17-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* rajdhani-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  src: url('../agency-theme/fonts/rajdhani-v17-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* chivo-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 100;
  src: url('../agency-theme/fonts/chivo-v21-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* chivo-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Chivo';
  font-style: italic;
  font-weight: 100;
  src: url('../agency-theme/fonts/chivo-v21-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* chivo-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 400;
  src: url('../agency-theme/fonts/chivo-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* chivo-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Chivo';
  font-style: italic;
  font-weight: 400;
  src: url('../agency-theme/fonts/chivo-v21-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* chivo-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 700;
  src: url('../agency-theme/fonts/chivo-v21-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* chivo-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Chivo';
  font-style: italic;
  font-weight: 700;
  src: url('../agency-theme/fonts/chivo-v21-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* chivo-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 900;
  src: url('../agency-theme/fonts/chivo-v21-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* chivo-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Chivo';
  font-style: italic;
  font-weight: 900;
  src: url('../agency-theme/fonts/chivo-v21-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


html {
    font-size: var(--font-size-body);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Menu anchors (#process, #about) land below the fixed header with room to
   spare, so the section's eyebrow is not tucked under the nav. Covers both the
   smooth-scroll handler in main.js, which reads this value, and the browser's
   own jump when arriving from another page. */
section[id] {
    scroll-margin-top: calc(var(--header-height) + 4rem);
}

body {
    font-family: var(--font-body);
    font-weight: 500;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity var(--transition);
}

/* a:hover {
    opacity: 0.7;
} */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.15;
}

p, span, li, td, th, label, input, textarea, select, blockquote {
    font-family: var(--font-body);
    font-weight: 500;
}

/* === Layout === */
.site-container {
    min-height: calc(100 * var(--svh));
    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1;
}

.container {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: calc(5 * var(--svh)) var(--space-x-lg);
}

.section {
    padding: clamp(4rem, 8vw, 10rem) 0;
}

/* ===================================================
   Site Header & Hamburger Toggle
   =================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-height);
    display: flex;
    align-items: center;
    /* No background by default */
}

.site-header.scrolled {
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.menu-open .site-header.scrolled {
    background: transparent;
    backdrop-filter: none;
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-logo {
    display: flex;
    align-items: center;
    z-index: 1001;
}

.site-logo__img {
    height: 50px !important;
    width: auto;
}

.site-logo__img--desktop {
    height: 20px !important;
    width: auto;
}

.site-logo__img--mobile {
    display: none;
}

@media (max-width: 768px) {
    .site-header {
        height: auto;
    }

    .site-logo__img {
        height: 40px !important;
    }

    .site-logo__img--desktop {
        display: none;
    }

    .site-logo__img--mobile {
        display: block;
    }

    .site-header .container {
        padding: calc(2.5 * var(--svh)) var(--space-x-sm);
    }
}

/* --- Intro Hero: Logo Row --- */
.intro-hero__logo-row {
    display: flex;
    align-items: flex-start;
    margin-top: 3rem;
}

.intro-hero__logomark {
    flex: 0 0 auto;
    width: 100px;
    height: auto;
    display: block;
    margin-top: -1em;
}

/* Horizontal lockup; stands in for .intro-hero__logomark on mobile. */
.intro-hero__logomark--horz {
    display: none;
}

.intro-hero__divider {
    flex: 1 1 auto;
    height: 1px;
    background: #cddd00;
    margin: 1em 2.5rem 0;
}

.intro-hero__body {
    flex: 0 0 45%;
    max-width: 45%;
}

@media (max-width: 768px) {
    .intro-hero__logo-row {
        flex-direction: column;
        align-items: flex-start;
        gap: .8rem;
    }

    .intro-hero__logomark {
        display: none;
    }

    .intro-hero__logomark--horz {
        display: block;
        flex: 0 0 auto;
        width: 180px;
        height: auto;
    }

    .intro-hero__divider {
        width: 100%;
        margin: 0;
    }

    .intro-hero__body {
        flex: 0 0 100%;
        max-width: 100%;
        padding-top: 10px;
    }
}

/* Hamburger button */
.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.menu-toggle__bar {
    display: block;
    width: 100%;
    height: 3px;
    background: #cddd00;
    border-radius: 1px;
    transition: transform var(--transition), opacity var(--transition), background var(--transition);
}

/* Animate to X when menu is open */
.menu-toggle.active .menu-toggle__bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.menu-toggle.active .menu-toggle__bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active .menu-toggle__bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

@media (max-width: 768px) {
    .menu-toggle {
        gap: 5px;
        width: 40px;
        height: 40px;
    }

    .menu-toggle__bar {
        height: 2px;
    }

    .menu-toggle.active .menu-toggle__bar:nth-child(3) {
        transform: translateY(-5px) rotate(-45deg);
    }
}


/* ===================================================
   Fullscreen Menu Overlay
   =================================================== */
.fs-menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.5s, opacity 0.4s ease;
}

.fs-menu.open {
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.4s ease;
}

body.menu-open .site-logo__img {
    opacity: 0;
    pointer-events: none;
    transition: visibility 0s, opacity 0.4s ease;
}

/* Left panel - dark with stacked logo */
.fs-menu__panel-left {
    flex: 0 0 40%;
    background: url('img/MW-Home-Bkgd_5.svg') center/cover no-repeat, #000;
    display: flex;
    align-items: flex-start;
    justify-content: right;
    padding: 0px;
    transform: translateX(-100%);
    transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
    padding-top: calc(var(--header-height) + 7rem);
}

.fs-menu.open .fs-menu__panel-left {
    transform: translateX(0);
}

.fs-menu__logo-wrap {
    border: 2px solid var(--color-accent);
    padding: 8svw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -3px;
}

.fs-menu__logo {
    width: clamp(125px, 18vw, 260px);
    height: auto;
}

/* Right panel - brand color with nav and contact */
.fs-menu__panel-right {
    flex: 1;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: clamp(2rem, 5vw, 5rem);
    padding-top: calc(var(--header-height) + 2rem);
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
    overflow-y: auto;
    padding-right: 0px;
    padding-top: calc(var(--header-height) + 7rem);
}

.fs-menu.open .fs-menu__panel-right {
    transform: translateX(0);
}

/* Close button */
.fs-menu__close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #cddd00;
    cursor: pointer;
    transition: opacity var(--transition);
    z-index: 10;
    display: none;
}

.fs-menu__close:hover {
    opacity: 0.6;
}

/* Navigation links */
.fs-menu__nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.fs-menu__link {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 3.5rem);
    text-transform: uppercase;
    color: var(--color-bg);
    line-height: 1.2;
    display: inline-block;
    padding: 0.15em 0.4em;
    background: var(--color-accent);
    transition: background 0.2s ease, color 0.2s ease;
    opacity: 1;
    position: relative;
    /* margin-left: -0.4em; */
}

.fs-menu__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: var(--color-bg);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: -1;
}

.fs-menu__link:hover {
    color: #fff;
    opacity: 1;
}

.fs-menu__link:hover::after {
    transform: scaleX(1);
}

/* Staggered link animation */
.fs-menu.open .fs-menu__link {
    animation: slideInRight 0.4s ease forwards;
    opacity: 0;
}

.fs-menu.open .fs-menu__link:nth-child(1) { animation-delay: 0.15s; }
.fs-menu.open .fs-menu__link:nth-child(2) { animation-delay: 0.22s; }
.fs-menu.open .fs-menu__link:nth-child(3) { animation-delay: 0.29s; }
.fs-menu.open .fs-menu__link:nth-child(4) { animation-delay: 0.36s; }

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Contact info */
.fs-menu__contact {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fs-menu__contact-item {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(0.85rem, 1.2vw, 1.1rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #000;
    line-height: 1.4;
}

a.fs-menu__contact-item:hover {
    color: #cddd00;
    opacity: 1;
}

/* Divider */
.fs-menu__divider {
    width: 100%;
    max-width: 480px;
    height: 2px;
    background: #cddd00;
    margin: 0.75rem 0;
}

/* Social icons */
.fs-menu__social {
    display: flex;
    gap: 1.5rem;
    margin-top: 0;
}

.fs-menu__social-link {
    color: #cddd00;
    transition: color var(--transition);
}

.fs-menu__social-link:hover {
    color: #000;
    opacity: 1;
}

/* Body lock when menu open */
body.menu-open {
    overflow: hidden;
}

/* === Responsive: Mobile fullscreen menu === */
@media (max-width: 768px) {
    .fs-menu {
        flex-direction: column;
    }

    .fs-menu__panel-left {
        flex: 0 0 auto;
        /* padding: calc(var(--header-height)) 2rem 4rem; */
        padding: calc(8 * var(--svh)) 0px;
        transform: translateY(-100%);
        justify-content: center;
    }

    .fs-menu.open .fs-menu__panel-left {
        transform: translateY(0);
    }

    .fs-menu__logo-wrap {
        padding: 1.5rem 2rem;
    }

    .fs-menu__panel-right {
        flex: 1;
        transform: translateY(100%);
        padding-top: 2rem;
    }

    .fs-menu.open .fs-menu__panel-right {
        transform: translateY(0);
    }

    /* --font-size-h5 bottomed out near 1rem on phones - half the desktop size
       and too small for the menu's main targets. ~27px at 375px, capped at 36px. */
    .fs-menu__link {
        font-size: clamp(1.625rem, 1.1rem + 2.5vw, 2.25rem);
    }

    .fs-menu__nav {
        gap: 10px;
    }
}




/* === Animation initial states === */
.anim-ready {
    opacity: 0;
    transform: translateY(30px);
}

.anim-ready--scale {
    opacity: 0;
    transform: translateY(50px) scale(0.97);
}

.anim-ready--fade {
    opacity: 0;
}

/* Intro hero entrance (2026-11-11). Same motion the GSAP reveal gave it
   (30px rise, 1s / 0.85s +0.15s, power3.out), but CSS so it starts at first
   paint instead of waiting for GSAP to download. See animations.js. */
@keyframes intro-hero-rise {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .intro-hero__headline {
        animation: intro-hero-rise 1s cubic-bezier(0.215, 0.61, 0.355, 1) both;
    }

    .intro-hero__logo-row {
        animation: intro-hero-rise 0.85s cubic-bezier(0.215, 0.61, 0.355, 1) 0.15s both;
    }
}




/* ===================================================
   Intro Hero
   =================================================== */
.intro-hero {
    min-height: auto;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 10vw 0vw;
    text-align: center;
    /* background: url('img/MW-Home-Bkgd_5.svg') center/cover no-repeat, #000; */
}

.intro-hero .container {
    max-width: none;
}

.intro-hero__headline {
    font-size: var(--font-size-hero1);
    line-height: 1.2em;
    margin-bottom: 6vw;
    text-align: left;
    max-width: none;
    padding-top: calc(5 * var(--svh));
    font-weight: 000;
    letter-spacing: 0rem;
}

.intro-hero__copy {
    font-family: 'Rajdhani';
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.8;
    color: #cddd00;
    max-width: 650px;
    margin: 0;
    text-align: left;
}

.intro-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

@keyframes mw-btn-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.intro-hero__btn {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-heading);
    font-size: var(--font-size-btn1);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.75em 1.75em;
    border: 2px solid #cddd00;
    line-height: 1;
    transition: background 0.2s ease, color 0.2s ease;
    will-change: background, color;
    background: #cddd00;
    color: #000;
}

.intro-hero__btn::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0.65em;
    background: url('/wp-content/themes/agency-theme/img/MW_Web-2026_ButtonArrow.svg') center / contain no-repeat;
    mask: url('/wp-content/themes/agency-theme/img/MW_Web-2026_ButtonArrow.svg') center / contain no-repeat;
    opacity: 0;
    transform: translateX(-6px);
    margin-left: 0;
    transition: width 0.25s ease, opacity 0.25s ease, transform 0.25s ease, margin-left 0.25s ease;
    vertical-align: middle;
}

.intro-hero__btn:hover::after {
    width: 1.5em;
    height: 0.65em;
    opacity: 1;
    transform: translateX(0);
    margin-left: 0.6em;
    background: #cddd00;
}

.intro-hero__btn--solid {
    background: #cddd00;
    color: #000;
}

.intro-hero__btn--solid:hover {
    background: #ffffff00;
    color: #ffffff;
}

.intro-hero__btn--outline {
    background: transparent;
    color: #fff;
}

.intro-hero__btn--outline:hover {
    background: #000;
    color: #cddd00;
}

/* Menu "Contact Us". Reuses .intro-hero__btn - the theme already treats it as
   its button component; the process CTA uses it outside the hero too - with the
   --solid colours flipped: black box and white text at rest, MW green fill with
   black text on hover, black border throughout.

   Must stay after the .intro-hero__btn rules above. These selectors carry the
   same specificity, so source order is the only thing deciding the cascade;
   placed earlier (with the other fs-menu rules) every one of these loses.

   align-self stops the button stretching, since .fs-menu__contact is a column
   flex container. */
.fs-menu__contact-btn {
    align-self: flex-start;
    background: #000;
    color: #fff;
    border-color: #000;
}

.fs-menu__contact-btn:hover,
.fs-menu__contact-btn:focus-visible {
    background: var(--color-accent);
    color: #000;
    border-color: #000;
}

/* The arrow is a masked pseudo-element, so its colour is its background. Black
   reads on the green fill, where the hero buttons use green on dark. */
.fs-menu__contact-btn:hover::after,
.fs-menu__contact-btn:focus-visible::after {
    background: #000;
}

.intro-hero__cta .intro-hero__btn {
    opacity: 0;
    animation: mw-btn-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.intro-hero__cta .intro-hero__btn:nth-child(1) {
    animation-delay: 1.2s;
}

.intro-hero__cta .intro-hero__btn:nth-child(2) {
    animation-delay: 1.5s;
}

.home-process__cta .intro-hero__btn {
    opacity: 0;
    transform: translateY(14px);
    animation: none;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.2s ease,
                color 0.2s ease;
}

.home-process__cta.is-visible .intro-hero__btn {
    opacity: 1;
    transform: translateY(0);
}

.home-process__cta {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    width: min(500px, 100%);
    height: auto;
    aspect-ratio: 1;
    gap: 1.25rem;
}

.home-process__cta-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* animation: mw-ring-spin 18s linear infinite; */
    pointer-events: none;
    will-change: transform;
}

@keyframes mw-ring-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.home-process__cta .intro-hero__btn {
    position: relative;
    z-index: 1;
}

.intro-hero {
    position: relative;
    overflow: hidden;
}

#mw-hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    z-index: 0;
    /* The mask used to be set by hero-canvas.js, which loads last, so the
       browser found the SVG late and the hero (the page's LCP) waited for it.
       functions.php also preloads it on the front page. */
    -webkit-mask-image: url('img/MW-Home-Bkgd_6.svg');
    mask-image: url('img/MW-Home-Bkgd_6.svg');
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.intro-hero > *:not(#mw-hero-canvas) {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .intro-hero {
        min-height: auto;
        height: 80%;
        padding: calc(5 * var(--svh)) 10%;
    }

    /* The 10% inset comes from .intro-hero; the container adds vertical only. */
    .intro-hero .container {
        padding: calc(5 * var(--svh)) 0;
    }

    .intro-hero__headline {
        font-size: 3rem;
        line-height: 1em;
        letter-spacing: -1px;
        padding-top: calc(20 * var(--svh));
    }

    .intro-hero__copy {
        margin-left: auto;
        /* Lifts the lime copy off the hero canvas behind it. */
        text-shadow: 0 0 15px rgb(0, 0, 0);
    }
}

/* ===================================================
   Hero Slider
   =================================================== */
.hero-slider {
    position: relative;
    height: calc(80 * var(--svh));
    overflow: hidden;
    background: #fff;
    margin: 0 0 0 var(--space-x-lg);
}

.hero-slider__track {
    display: flex;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}

.hero-slider__slide {
    flex: 0 0 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    padding: calc(5 * var(--svh)) var(--space-x-lg);
}

.hero-slider__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-slider__overlay {
    position: absolute;
    inset: 0;
    /* background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); */
    display: flex;
    align-items: flex-end;
    padding: 0px;
    /* padding-bottom: clamp(3rem, 6vw, 6rem); */
}

.hero-slider__overlay a {
    opacity: 1;
}

.hero-slider__info {
    color: #000;
    background: #fff;
    padding: calc(5 * var(--svh)) var(--space-x-lg);
}

.hero-slider__info h3 {
    font-size: var(--font-size-h6);
    font-weight: 500;
    font-family: var(--font-body);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 0;
    color: #000;
}

.hero-slider__info h2 {
    font-size: var(--font-size-h2);
    text-transform: uppercase;
}

.hero-slider__controls {
    position: absolute;
    bottom: 5px;
    right: var(--space-x-md);
    display: flex;
    gap: 0.75rem;
    z-index: 10;
}

.hero-slider__btn {
    width: 40px;
    height: 40px;
    border: 0px solid rgb(205, 221, 0);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0);
    /* backdrop-filter: blur(10px); */
    color: #cddd00;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    font-size: var(--font-size-h6);
}

.hero-slider__btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
}

.hero-slider__counter {
    position: absolute;
    bottom: 10px;
    left: var(--space-x-lg);
    color: #cddd00;
    font-size: var(--font-size-body);
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    z-index: 10;
}

.slider-current {
    font-weight: 800;
}

.slider-total {
    font-weight: 800;
}

@media (max-width: 768px) {
    .hero-slider {
        height: auto;
        /* 10% left inset; keeps the existing 5svh top margin. */
        margin: calc(5 * var(--svh)) 0 0 10%;
    }

    /* height:auto with object-fit:contain let every image keep its own aspect
       ratio, so slide heights tracked whatever the source file happened to be.
       Pin the ratio and crop instead; 16/9 matches the width/height attributes
       already on the img, so the reserved space is right before it loads.
       display:block drops the inline descender gap under the image. */
    .hero-slider__slide img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    .hero-slider__slide {
        padding: 0;
    }

    .hero-slider__overlay {
        position: relative;
        padding: 0 var(--space-x-sm) calc(2.5 * var(--svh)) var(--space-x-sm);
    }

    .hero-slider__info {
        padding: 0px;
        padding-top: calc(2.5 * var(--svh));
    }

    .hero-slider__info h2 {
        text-transform: uppercase;
    }

    .hero-slider__counter {
        position: relative;
        left: var(--space-x-sm);
    }

    .hero-slider__controls {
        /* position: relative; */
        right: var(--space-x-xs);
    }
}

/* ===================================================
   Client List - Logos
   =================================================== */
.home__client-list {
    padding: 0px;
    background-size: 18px;
    background-position: center;
    background-repeat: repeat;
    height: auto;
    background-color: #fff;
    margin: 0 0 0 var(--space-x-lg);
}

.home__client-list .container {
    padding: calc(30 * var(--svh)) 0 calc(10 * var(--svh)) var(--space-x-lg);
}

/* ===================================================
   Client Logo Marquee
   =================================================== */
.client-marquee {
    padding: calc(5 * var(--svh)) 0 calc(8 * var(--svh)) 0;
    /* overflow: hidden; */
    background: #fff;
}

.client-marquee__subhead {
    font-size: var(--font-size-hero1);
    text-align: right;
    margin-bottom: calc(6 * var(--svh));
    color: #cddd00;
    font-weight: 900;
    text-transform: uppercase;
    margin-top: calc(-9 * var(--svh));
    margin-right: var(--space-x-lg);
}

.client-marquee__track {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); */
}

.client-marquee__inner {
    display: flex;
    gap: clamp(2rem, 5vw, 5rem);
    width: max-content;
    animation: marquee-scroll 45s linear infinite;
    will-change: transform;
}

.client-marquee__item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
}

.client-marquee__item img {
    height: 100%;
    width: auto;
    object-fit: contain;
    /* filter: grayscale(100%) brightness(1.5); */
    /* opacity: 0.5; */
    transition: filter 0.3s ease, opacity 0.3s ease;
    max-width: 175px;
}

/* .client-marquee:hover .client-marquee__inner {
    animation-play-state: paused;
} */

/* .client-marquee:hover .client-marquee__item img {
    filter: grayscale(0%);
    opacity: 1;
} */

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Must stay after the base .client-marquee__inner rule - a media query adds no
   specificity. Stopping an infinite marquee for visitors who ask for reduced
   motion; the logos are content, so they stay put rather than disappearing.
   The second set exists only to make the loop seamless and is already
   aria-hidden, so drop it and let the one real set be scrolled by hand -
   otherwise the overflow would simply clip the logos out of reach. */
@media (prefers-reduced-motion: reduce) {
    .client-marquee__inner {
        animation: none;
    }

    .client-marquee__item[aria-hidden="true"] {
        display: none;
    }

    .client-marquee__track {
        overflow-x: auto;
    }
}

@media (max-width: 768px) {
    .home__client-list {
        margin: 0 0 0 10%;
    }

    .client-marquee__subhead {
        font-weight: 800;
        line-height: 1em;
        margin-top: calc(-7 * var(--svh));
    }

    .home__client-list .container {
        padding: calc(15 * var(--svh)) 0 calc(10 * var(--svh)) var(--space-x-lg);
    }

    .client-marquee__item {
        height: 50px;
    }
}

/* ============================================
   Home: Services
   ============================================ */

@keyframes svc-enter-left {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes svc-enter-right {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes svc-panel-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

.home-services {
    padding: 0;
    margin: calc(20 * var(--svh)) auto;
    width: 80%;
    max-width: 1200px;
}

.home-services__inner {
    max-width: var(--container-width, 1400px);
    margin: 0 auto;
    padding: 0 var(--gutter, 40px);
}

.home-services__heading {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: var(--font-size-hero1);
    text-transform: uppercase;
    color: #fff;
    margin: 0 auto calc(10 * var(--svh));
    text-align: center;
}

.home-services__layout {
    display: grid;
    grid-template-columns: 30% 60%;
    gap: 10%;
    align-items: start;
    border-top: 1px solid #cddd00;
}

/* -- Nav / Triggers ---------------------------------------- */

.home-services__nav {
    display: flex;
    flex-direction: column;
    /* margin-top: 10px; */
}

.home-services__trigger {
    display: block;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 22px 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--font-size-h3);
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.3);
    transition: color 0.15s ease;
    opacity: 0;
}

/* .home-services__trigger:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
} */

.home-services__trigger:hover {
    color: rgba(255, 255, 255, 0.8);
}

.home-services__trigger.is-active {
    color: #cddd00;
}

/* Scroll entrance — triggers */
.home-services.is-visible .home-services__trigger {
    animation: svc-enter-left 0.5s ease both;
    animation-delay: var(--svc-delay, 0s);
}

/* Scroll entrance — panels column */
.home-services__panels {
    position: sticky;
    top: 80px;
    display: grid;
    margin-top: 30px;
}

.home-services.is-visible .home-services__panels {
    animation: svc-enter-right 0.6s ease both;
    animation-delay: 0.85s;
}

/* -- Panels ------------------------------------------------ */

.home-services__panel {
    grid-area: 1 / 1;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.home-services__panel.is-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    animation: svc-panel-in 0.35s ease both;
}

.home-services__panel-image {
    margin: 0 0 28px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.home-services__panel-image img {
    display: block;
    width: auto;
    height: 100%;
    object-fit: cover;
    margin: auto;
}

.home-services__panel-copy {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--font-size-body);
    line-height: 1.65;
    color: #cddd00;
}

.home-services__panel-copy p {
    margin: 0 0 1em;
}

.home-services__panel-copy p:last-child {
    margin-bottom: 0;
}

/* -- Capabilities ------------------------------------------ */

.home-services__panel-caps {
    margin-top: 50px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
}

.home-services__panel.is-active .home-services__panel-caps {
    animation: svc-panel-in 0.35s ease both;
    animation-delay: 0.5s;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.home-services__caps-heading {
    font-family: var(--font-heading);
    font-weight: 100;
    font-size: var(--font-size-h5);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    margin: 0 0 15px;
}

.home-services__caps-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.home-services__cap-item {
    display: inline-block;
    color: #fff;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--font-size-btn1);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 15px;
    line-height: 1;
    border: 1px solid #fff;
}

/* -- Responsive -------------------------------------------- */

@media (max-width: 900px) {
    .home-services__layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .home-services__panels {
        position: static;
    }
}

/* -- Accordion (mobile) ------------------------------------ */

.home-services__accordion {
    display: none;
    border-top: 1px solid #cddd00;
}

.home-services__acc-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.home-services__acc-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    padding: 20px 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: var(--font-size-h4);
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s ease;
    gap: 1rem;
}

.home-services__acc-trigger[aria-expanded="true"] {
    color: #cddd00;
}

.home-services__acc-label {
    flex: 1 1 auto;
}

.home-services__acc-icon {
    flex-shrink: 0;
    position: relative;
    width: 18px;
    height: 18px;
}

.home-services__acc-icon::before,
.home-services__acc-icon::after {
    content: '';
    position: absolute;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.home-services__acc-icon::before {
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    transform: translateY(-50%);
}

.home-services__acc-icon::after {
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    transform: translateX(-50%);
}

.home-services__acc-trigger[aria-expanded="true"] .home-services__acc-icon::after {
    transform: translateX(-50%) scaleY(0);
    opacity: 0;
}

.home-services__acc-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.home-services__acc-content {
    padding: 4px 0 32px;
}

/*
 * .home-services__panel-caps defaults to hidden and is only revealed by
 * .home-services__panel.is-active - a selector that never matches in the
 * accordion, where the caps sit in .home-services__acc-content instead. The
 * accordion body handles its own show/hide, so the caps are always visible.
 */
.home-services__acc-content .home-services__panel-caps {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: none;
    margin-top: 32px;
}

@media (max-width: 900px) {
    .home-services {
        width: 100%;
    }

    .home-services__heading {
        margin: 0 auto calc(5 * var(--svh));
        text-align: left;
    }

    .home-services__layout {
        display: none;
    }

    .home-services__accordion {
        display: block;
    }

    #mw-services-canvas {
        display: none;
    }
}

/* Canvas */
#mw-services-canvas {
    position: absolute;
    right: -14%;
    top: 35%;
    transform: translateY(-50%);
    width: 75%;
    aspect-ratio: 117.8 / 93;
    pointer-events: none;
    z-index: 0;
}

/* Ensure section contains absolute canvas */
.home-services {
    position: relative; /* add to existing rule */
}

/* Lift content above canvas */
.home-services__inner {
    position: relative;
    z-index: 1;
}

/* === Home: Process Section === */
.home-process {
    position: relative;
    overflow: visible;
    margin: calc(10 * var(--svh)) var(--space-x-xl);
    line-height: 0;
    padding: 0;
}

.home-process__bg {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: calc(70 * var(--svh));
}

.home-process__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.home-process__inner {
    position: absolute;
    bottom: 0;
    left: calc(var(--space-x-lg) * -1);
    z-index: 2;
    transform: translateY(calc(7 * var(--svh)));
    max-width: 950px;
}

.home-process__headline {
    font-size: var(--font-size-hero2);
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--color-white);
    line-height: 1em;
    display: inline-block;
    letter-spacing: -.25rem;
}

.home-process__copy-block {
    background-color: var(--color-bg);
    padding: 0;
}

.home-process__copy,
.home-process__copy p {
    font-size: var(--font-size-body);
    color: var(--color-white);
    line-height: 1.6em;
    max-width: 800px;
    min-width: 0;
}

.home-process__copy-row {
    display: grid;
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    align-items: center;
    gap: 5vw;
    /* padding: clamp(2rem, 4vw, 4rem) 0; */
}

.home-process__cta-copy {
    position: relative;
    font-family: var(--font-heading);
    font-size: var(--font-size-h2);
    color: var(--color-white);
    line-height: 1em;
    margin: 0;
    z-index: 1;
    font-weight: 900;
    text-align: left;
    /* Proportional to the ring rather than fixed: percentage margins and widths
       resolve against .home-process__cta, which is the ring's own width. At the
       full 500px ring that is a 100px indent and a 350px measure; as the column
       narrows they shrink with it, so the copy stays left-aligned inside the
       ring right up to the 768px stack. A 1280px rule used to centre it here
       instead, while the columns were still side by side. */
    max-width: 70%;
    margin-left: 20%;
}

@media (max-width: 768px) {
    /* Full-bleed left/right; keep the vertical rhythm. */
    .home-process {
        margin: calc(10 * var(--svh)) 0;
    }

    /* Sit the headline inside the image edge and hang it lower. */
    .home-process__inner {
        left: var(--space-x-lg);
        transform: translateY(73%);
        max-width: 75%;
    }

    .home-process__headline {
        font-size: clamp(3rem, 14vw, 5rem);
        letter-spacing: -.15rem;
    }

    .home-process__copy-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-process__cta {
        align-items: center;
        margin: 10% 0;
    }

    /* Centred only once the columns stack and the ring centres its contents. */
    .home-process__cta-copy {
        max-width: 60%;
        text-align: center;
        margin-left: 0;
    }
}

/* === Home: Industries Section === */
.home-industries {
    background-color: var(--color-bg);
    padding: 0 0 calc(10 * var(--svh)) 0;
}

.home-industries__header {
    margin-bottom: clamp(2rem, 5vw, 4rem);
}

.home-industries__headline {
    font-size: var(--font-size-h2);
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--color-white);
    line-height: 1.15;
    margin-bottom: 1rem;
}

.home-industries__copy {
    font-size: var(--font-size-h5);
    color: var(--color-white);
    line-height: 1.6;
    max-width: 700px;
}

.home-industries__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    padding-top: 0;
}

.industry-card {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    text-decoration: none;
}

.industry-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.industry-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition);
}

.industry-card:hover .industry-card__image img {
    transform: scale(1.04);
}

.industry-card__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.industry-card__title {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    font-size: var(--font-size-h4);
    font-family: var(--font-heading);
    font-weight: 800;
    color: #000;
    line-height: 1.2;
    text-align: center;
    z-index: 1;
    background-color: #ffffffc4;
    transition: var(--transition);
}

.industry-card__title:hover {
    color: #ffffff00;
    background-color: #ffffff00;
}

.home-industries > .container {
    padding: calc(7 * var(--svh)) var(--space-x-lg) 0;
    margin: 0 var(--space-x-lg);
    border-left: 2px solid #fff;
}

@media (max-width: 900px) {
    .home-industries__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Must stay after the base .industry-card rule - a media query adds no
   specificity, so an earlier block would lose to it. */
@media (max-width: 768px) {
    .industry-card {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 560px) {
    .home-industries__grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================================
   Gallery Tagline
   =================================================== */
.gallery-tagline {
    padding: clamp(4rem, 8vw, 8rem) 0;
    text-align: center;
}

.gallery-tagline .container {
    max-width: 800px;
}

.gallery-tagline__text {
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    font-weight: 300;
    font-family: var(--font-body);
    line-height: 1.5;
    color: var(--color-text-muted);
}

.gallery-tagline__text p {
    margin-bottom: 1em;
}

.gallery-tagline__text p:last-child {
    margin-bottom: 0;
}

/* ===================================================
   Work Grid
   =================================================== */
.work-grid {
    padding: 0px;
    background-color: #fff;
}

/* padding-top was an inline style on the section, which no media query could
   reach. Same desktop value, now overridable below. .work-grid2 is used only by
   archive-work.php, so this stays scoped to the Work archive - and it must sit
   after .section, which sets padding on the same element at equal specificity. */
.work-grid2 {
    padding-top: calc(var(--header-height) + 4rem);
    padding-bottom: clamp(4rem, 8vw, 10rem);
    background-color: #000000;
}

/* The header is a flat 80px at every width, so on a phone the 4rem on top of it
   left far too much dead space above "Our Work". */
@media (max-width: 768px) {
    .work-grid2 {
        padding-top: calc(var(--header-height) + 1rem);
    }
}

.work-grid__heading {
    font-size: var(--font-size-hero1);
    margin-bottom: clamp(2rem, 4vw, 4rem);
    text-align: center;
    color: var(--color-accent);
}

/* Work archive filters. Same chip language as .about-section__eyebrow - accent
   outline, uppercase - filled when selected. */
.work-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: clamp(2rem, 4vw, 4rem);
}

.work-filters__btn {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--font-size-btn1);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    padding: 10px 15px;
    color: var(--color-accent);
    background: transparent;
    border: 1px solid var(--color-accent);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.work-filters__btn:hover,
.work-filters__btn:focus-visible {
    background: var(--color-accent);
    color: #000;
}

.work-filters__btn[aria-pressed="true"] {
    background: var(--color-accent);
    color: #000;
}

.work-filters__empty {
    color: var(--color-text-muted);
    text-align: center;
    padding: 2rem 0;
}

/* Mobile dropdown. The toggle carries .work-filters__btn so it inherits the
   same chip styling, filled because it shows the current selection. Hidden
   outside the breakpoint; .is-enhanced is added by JS, so with JS off the
   buttons stay laid out as a row. */
.work-filters__toggle {
    display: none;
}

@media (max-width: 768px) {
    .work-filters-wrap.is-enhanced {
        margin-bottom: clamp(2rem, 4vw, 4rem);
    }

    .work-filters-wrap.is-enhanced .work-filters__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75em;
        width: 100%;
        background: var(--color-accent);
        color: #000;
    }

    /* Caret, drawn rather than shipped as an asset. */
    .work-filters-wrap.is-enhanced .work-filters__toggle::after {
        content: '';
        width: 0.5em;
        height: 0.5em;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-0.15em) rotate(45deg);
        transition: transform 0.2s ease;
    }

    .work-filters-wrap.is-enhanced.is-open .work-filters__toggle::after {
        transform: translateY(0.1em) rotate(-135deg);
    }

    .work-filters-wrap.is-enhanced .work-filters {
        display: none;
        flex-direction: column;
        align-items: stretch;
        margin-top: 10px;
        margin-bottom: 0;
    }

    .work-filters-wrap.is-enhanced.is-open .work-filters {
        display: flex;
    }
}

/* Work archive intro: heading and filters on the left, the industry case
   studies pointer on the right. Only the pointer is boxed: like
   .fs-menu__logo-wrap it has no right border and runs off the page edge - the
   negative margin cancels .container's right padding, and the same amount is
   added back to its own padding so the copy still ends on the page margin.
   html/body clip overflow-x, so this adds no horizontal scroll.

   Must stay after the .work-grid__heading, .work-filters and mobile
   .work-filters-wrap rules above - the margin and alignment overrides here tie
   or beat them on specificity only when they come later. */
.work-intro {
    --work-intro-pad: clamp(1.5rem, 3.5vw, 3.5rem);
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--work-intro-pad);
    margin-bottom: clamp(2rem, 4vw, 4rem);
}

.work-intro .work-grid__heading {
    text-align: left;
    color: #fff;
    margin-bottom: clamp(1rem, 2vw, 2rem);
}

.work-intro .work-filters {
    justify-content: flex-start;
    margin-bottom: 0;
}

.work-intro .work-filters-wrap.is-enhanced {
    margin-bottom: 0;
}

.work-intro__industries {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    border: 2px solid var(--color-accent);
    border-right: 0;
    border-bottom: 0;
    margin-right: calc(-1 * var(--space-x-lg));
    padding: var(--work-intro-pad);
    padding-right: calc(var(--work-intro-pad) + var(--space-x-lg));
}

.work-intro__industries-text {
    font-family: var(--font-heading);
    font-size: var(--font-size-h4);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-accent);
    margin: 0;
}

/* White variant of .intro-hero__btn. The hover arrow is a masked
   pseudo-element whose colour is its background, so it goes black to read on
   the white fill. */
.work-intro__industries .intro-hero__btn {
    background: #fff;
    border-color: #fff;
    color: #000;
}

.work-intro__industries .intro-hero__btn:hover::after,
.work-intro__industries .intro-hero__btn:focus-visible::after {
    background: #000;
}

/* The hover arrow grows to 2.1em (1.5em wide + 0.6em margin). Left in the
   flow, that widens the button, and where the label only just fits on one line
   it reflows to two mid-hover. Taking the same 2.1em out of the side padding
   keeps the button's box and the label's wrap width identical: the label
   slides left to make room instead. */
.work-intro__industries .intro-hero__btn {
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, padding 0.25s ease;
}

.work-intro__industries .intro-hero__btn:hover,
.work-intro__industries .intro-hero__btn:focus-visible {
    padding-left: 0.7em;
    padding-right: 0.7em;
}

@media (max-width: 900px) {
    .work-intro {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Stacked under the filters the CTA steps back: a grey outline and an
       outlined button, so the green filter toggle above stays the loudest
       thing on the screen. */
    /* Horizontal padding trimmed so the copy fits on one line from 390px up.
       The right side keeps only the bleed, so the copy ends on the page margin
       in line with the grid below. */
    .work-intro__industries {
        border-color: #444;
        padding-left: 1.25rem;
        padding-right: var(--space-x-lg);
    }

    .work-intro__industries-text {
        font-family: var(--font-body);
        font-size: var(--font-size-h5);
        font-weight: 400;
        line-height: 1.3;
    }

    .work-intro__industries .intro-hero__btn {
        background: transparent;
        border-color: #444;
        color: #fff;
    }

    .work-intro__industries .intro-hero__btn:hover,
    .work-intro__industries .intro-hero__btn:focus-visible {
        border-color: #fff;
    }

    .work-intro__industries .intro-hero__btn:hover::after,
    .work-intro__industries .intro-hero__btn:focus-visible::after {
        background: var(--color-accent);
    }
}

.work-grid__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 375px), 1fr));
    gap: 20px;
}

/* Must stay after .work-card, which sets its own display context. */
.work-card[hidden] {
    display: none;
}

@media (max-width: 768px) {
    .work-grid__items {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* 16:9 to match the thumbnails - 124 of 126 on Dev are 16:9. Was 5 / 3, which
   trimmed the top and bottom of every one. */
.work-card {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-surface);
}

.work-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.work-card:hover img {
    transform: scale(1.05);
}

.work-card__overlay {
    position: absolute;
    inset: 0;
    /* background: rgba(0, 0, 0, 0.65); */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity var(--transition);
    padding-left: 0px;
}

.work-card:hover .work-card__overlay {
    opacity: 1;
}

.work-card__client {
    font-size: var(--font-size-btn1);
    line-height: 1.2em;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #cddd00;
    margin-bottom: 0;
    background-color: #000;
    padding: .75rem 1.5rem 0rem;
}

.work-card__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-h5);
    color: #fff;
    font-weight: 700;
    background-color: #000;
    line-height: 1em;
    padding: 0rem 1.5rem .75rem;
}

.work-card__tags {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    display: none;
}

.work-card__tag {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(255, 255, 255);
    border: 1px solid rgb(255, 255, 255);
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
}

.work-card--all {
    background: #cddd00;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    box-shadow: inset 0 0 0 0px #cddd00;
}

.work-card--all:hover {
    background: #000;
    box-shadow: inset 0 0 0 20px #cddd00;
}

.work-card__all-label {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2vw, 2rem);
    font-weight: 800;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 1em;
    transition: color 0.3s ease;
}

.work-card--all:hover .work-card__all-label {
    color: #fff;
}

/*
 * Touch devices have no real hover - a tap latches :hover and the effect
 * sticks until you tap elsewhere. Hold every work-card hover at its resting
 * state on mobile. Must stay after the base :hover rules; a media query adds
 * no specificity.
 */
@media (max-width: 768px) {
    /*
     * At two columns the tile is only ~162px wide with a 20px label and no
     * padding, so "View All Work" ran edge to edge. Inset the text.
     */
    .work-card--all {
        padding: 14px;
    }

    .work-card:hover img {
        transform: none;
    }

    .work-card:hover .work-card__overlay {
        opacity: 0;
    }

    .work-card--all:hover {
        background: #cddd00;
        box-shadow: inset 0 0 0 0px #cddd00;
    }

    .work-card--all:hover .work-card__all-label {
        color: #000;
    }
}

/* -----------------------------------------------
   Selected Work — section dividers
----------------------------------------------- */
.section-selected-work {
    background: #fff;
}

.sw-divider {
    display: block;
    width: 100%;
    aspect-ratio: 303.9 / 60.59;
    fill: #000;
    margin-bottom: -1px;
}

/* Same seam as --top, mirrored: the polygon runs past y=60.59, below the
   viewBox, so the fill is solid through the section's bottom edge and there is
   no shape edge there to round off. Only the outer corners move; the apex at
   (105.7,60.59) stays put, so the sharp point survives. */
.sw-divider--bottom {
    margin-bottom: -.5px;
    margin-top: 0;
    overflow: visible;
}

/* aspect-ratio gives these SVGs a fractional height, so at some viewport widths
   the paint rounded down a pixel and the white section background showed as a
   hairline above the divider. The polygon now extends to y=-6, above the
   viewBox, so there is no shape edge at the seam to round off - the fill is
   solid straight through it. overflow:visible is what lets that bleed paint
   outside the viewBox; without it the SVG viewport clips it away.

   Bleed rather than shifting the whole SVG up, which clipped the sharp apex at
   (198.2,0). Everything below y=0 is unchanged, so the shape still reads as the
   logo. The bleed is full-width black and only ever overlaps the black section
   above, so it is invisible. */
.sw-divider--top {
    overflow: visible;
}

.sw-inner {
    padding: 80px var(--site-padding, 40px);
}

@media (max-width: 768px) {
    .sw-inner {
        padding: 80px 10px;
    }
}

/* ===================================================
   About Section
   =================================================== */
.about-section {
    background: var(--color-bg);
    box-sizing: unset;
}

/* Wider than the site default so this section reads as a full-bleed block. */
.about-section .container {
    max-width: 950px;
    width: 80%;
    padding: 0 var(--gutter, 40px);
}

/* Matches .home-services__cap-item, in the brand lime. */
.about-section__eyebrow,
.home-services__eyebrow,
.industry-block__eyebrow {
    display: inline-block;
    color: var(--color-accent);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--font-size-btn1);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 15px;
    line-height: 1;
    border: 1px solid var(--color-accent);
    margin-bottom: 1.5rem;
}

/* Must stay after the shared eyebrow rule above. The services heading is
   centred, so the eyebrow above it is centred too; the about one stays left. */
.home-services__eyebrow {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* Must stay after the rule above - same specificity, so order decides. Matches
   the services section's own 900px breakpoint, not 768px: that is where
   .home-services__heading flips to text-align:left and the accordion replaces
   the tab layout, so the eyebrow tracks the content it sits above. At 768px it
   would sit centred over left-aligned content between 769 and 900px. */
@media (max-width: 900px) {
    .home-services__eyebrow {
        margin-left: 0;
    }
}

.about-section__title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    margin-bottom: 3rem;
    text-align: left;
}

/* Team grid at 35%, team copy beside it — breaking 15% past the section margin */
.about-section__lower {
    display: grid;
    grid-template-columns: 35% 1fr;
    column-gap: 5%;
    align-items: center;
    width: 130%;
    margin-inline: -15%;
}

.about-section__text {
    font-size: var(--font-size-body);
    line-height: 1.8;
    color: var(--color-text-muted);
    text-align: left;
    max-width: none;
    margin: 0 0 3rem;
}

.about-section__text p {
    margin-bottom: 1em;
}

.about-section__text p:last-child {
    margin-bottom: 0;
}

.about-section__aside {
    font-size: var(--font-size-body);
    line-height: 1.6em;
    color: var(--color-accent);
    margin-bottom: 0;
}

/*
 * All headings inside this field only — the global h1-h6 rule sets 1.15 and
 * beats inheritance. The descendant selector keeps it off the rest of the site.
 */
.about-section__aside :is(h1, h2, h3, h4, h5, h6) {
    line-height: 1.6em;
}

.about-section__aside p {
    margin-bottom: 1em;
}

.about-section__aside p:last-child {
    margin-bottom: 0;
}

.team-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 0;
}

.team-member {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-surface-alt);
}

.team-member img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
}

.team-member__gif {
    position: absolute;
    inset: 0;
    opacity: 0;
}

.team-member:hover .team-member__gif {
    opacity: 1;
}

@media (max-width: 768px) {
    /* Drop the gutter so the container's 80% is the full content width. */
    .about-section .container {
        padding: 0;
    }

    /* No breakout on mobile - everything sits at the container's 80%. */
    .about-section__lower {
        grid-template-columns: 1fr;
        row-gap: 2rem;
        width: 100%;
        margin-inline: 0;
    }

    /*
     * Headings in this field default to the browser's 2em, which is oversized
     * on a phone. Bring them down to the theme's h5 scale.
     */
    .about-section__aside :is(h1, h2, h3, h4, h5, h6) {
        font-size: var(--font-size-h5);
    }
}

/* ===================================================
   Single Work: Project Header
   =================================================== */
.project-header {
    padding-top: calc(var(--header-height) + clamp(3rem, 6vw, 6rem));
    padding-bottom: clamp(3rem, 6vw, 6rem);
}
.project-header .container {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: 25% 1fr;
    column-gap: 5%;
}
.project-header__meta {
    display: block;
    grid-column: 2;
    grid-row: 1;
    max-width: 800px;
}
.project-header__client,
.project-header__tags span {
    font-size: var(--font-size-body);
    font-family: var(--font-body);
    text-transform: uppercase;
    color: var(--color-text-muted);
}
/*
 * line-height 1em so the line box equals the text, rather than inheriting
 * body's 1.6 and getting ~4px of half-leading above and below. That leading
 * was the only thing holding the border off the text, which is why changing
 * line-height looked like it changed the padding. It is real padding now, so
 * the box keeps its height and the spacing is adjustable on its own.
 * Top is 1px heavier than bottom to optically centre the all-caps text.
 */
.project-header__tags span {
    border: 1px solid var(--color-text-muted);
    padding: 5px 8px 4px;
    line-height: 1em;
    font-size: var(--tag-font-size);
    font-weight: 600;
    cursor: default;
}
/*
 * Hover disabled: these tags are not links yet, so a hover treatment promises
 * an interaction that does not exist. Restore this block (and the pointer
 * cursor above) once they have a destination.
 *
 * .project-header__tags span:hover {
 *     border: 1px solid #cddd00;
 *     background: #cddd00;
 *     color: #000;
 * }
 */
.project-header__client {
    font-family: var(--font-heading);
    font-size: var(--font-size-h4);
    text-transform: uppercase;
    font-weight: 800;
    max-width: none;
    margin-bottom: 0;
    color: #fff;
    letter-spacing: .5px;
    line-height: 1.2em;
}
.project-header__filed-under {
    font-size: var(--font-size-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1rem;
    color: var(--color-text-muted);
    margin-top: 8px;
}

.project-header__tags {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    grid-column: 1;
    grid-row: 2;
    align-self: start;

    /*
     * "Filed Under:" is an <h6> with no theme font-size, so it was landing on
     * the browser default of 0.67em against --font-size-body. Declared here
     * once and inherited by both the heading and the chips so they can't drift
     * apart, and so neither depends on a UA default.
     */
    --tag-font-size: calc(var(--font-size-body) * 0.67);
}

.project-header__filed-under h6 {
    font-size: var(--tag-font-size);
}
.project-header__tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.project-header__title {
    font-size: var(--font-size-h1);
    line-height: 1em;
    margin-bottom: calc(5 * var(--svh));
    font-weight: 900;
    text-transform: uppercase;
    color: #cddd00;
}
.project-header__intro {
    font-size: var(--font-size-body);
    line-height: 1.6em;
    color: var(--color-text-muted);
    grid-column: 2;
    grid-row: 2;
    max-width: 800px;
}
.project-header__intro p {
    margin-bottom: 1em;
}
.project-header__intro blockquote p {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: 500;
    padding-left: var(--space-x-sm);
    border-left: 5px solid #cddd00;
    color: #cddd00;
    line-height: 1.4em;
    font-style: italic;
}
.project-header__intro a {
    /* Same as .slide-text__copy a: the global a rule strips underlines and
       links inherit the muted copy colour. */
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Mobile: single column, natural DOM order */
@media (max-width: 767px) {
    .project-header .container {
        display: block;
    }
}

/* ===================================================
   Flexible Content: Slides
   =================================================== */
.work-slides {
    position: relative;
    background-color: #fff;
    /* The one vertical space for work slides: above and below every padded
       slide, and above, below and between the slides of a related group. It
       replaces 5% on inset slides, 10svh/5svh on text, 60px on web and 10% on
       groups, which is why two slides in a row never lined up. ~40px on a
       phone, ~72px at 1440px, capped at 96px. */
    --slide-space: clamp(2.5rem, 5vw, 6rem);
}

.work-slide {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* .work-slide--full-width {
    no padding
} */

.work-slide--inset-medium {
    max-width: none;
    margin: 0 auto;
    padding: var(--slide-space) var(--gap);
}

/* min() so the fixed cap can never outgrow the fluid container - below a
   ~1064px viewport 1000px is wider than the padded box, and the image was
   spilling out and getting cropped by .work-slide's overflow: hidden. */
.work-slide.work-slide--inset-medium.slide-image img {
    max-width: min(1000px, 100%);
    margin: auto;
}

.work-slide--inset-small {
    max-width: none;
    margin: 0 auto;
    padding: var(--slide-space) var(--gap);
}

.work-slide.work-slide--inset-small.slide-image img {
    max-width: min(600px, 100%);
    margin: auto;
}

/* Labels vs values: the stored values predate the fourth size, so they no
   longer match the editor labels. inset-medium = "Inset Large" (1000px),
   inset-small = "Inset Medium" (600px), inset-xsmall = "Inset Small" (350px).
   Renaming the values would have broken every existing slide. */
.work-slide--inset-xsmall {
    max-width: none;
    margin: 0 auto;
    padding: var(--slide-space) var(--gap);
}

.work-slide.work-slide--inset-xsmall.slide-image img {
    max-width: min(350px, 100%);
    margin: auto;
}

/* The inset caps above only ever matched .slide-image, so Inset Medium and
   Inset Small did nothing to a video slide beyond the container padding - the
   video kept filling the width. Same caps, same min() guard, applied to both
   the uploaded <video> and the embed wrapper. */
.work-slide.work-slide--inset-medium.slide-video:not(.slide-video--phone) > video,
.work-slide.work-slide--inset-medium.slide-video:not(.slide-video--phone) > .slide-video__player,
.work-slide.work-slide--inset-medium.slide-video:not(.slide-video--phone) .slide-video__embed,
.work-slide.work-slide--inset-medium.slide-video:not(.slide-video--phone) .slide-audio {
    max-width: min(1000px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.work-slide.work-slide--inset-small.slide-video:not(.slide-video--phone) > video,

.work-slide.work-slide--inset-small.slide-video:not(.slide-video--phone) > .slide-video__player,
.work-slide.work-slide--inset-small.slide-video:not(.slide-video--phone) .slide-video__embed,
.work-slide.work-slide--inset-small.slide-video:not(.slide-video--phone) .slide-audio {
    max-width: min(600px, 100%);
    margin-left: auto;
    margin-right: auto;
}

/* Lift inset videos off their background. Phone-frame videos are excluded:
   the frame carries its own shadow. The slide's overflow is released because
   inside a related group it has no vertical padding, and .work-slide's
   overflow: hidden would cut the shadow off flat; the min() caps above keep
   the video itself inside the box. */
.work-slide.work-slide--inset-medium.slide-video:not(.slide-video--phone),
.work-slide.work-slide--inset-small.slide-video:not(.slide-video--phone) {
    overflow: visible;
}

.work-slide.work-slide--inset-medium.slide-video:not(.slide-video--phone) > video,

.work-slide.work-slide--inset-medium.slide-video:not(.slide-video--phone) > .slide-video__player,
.work-slide.work-slide--inset-medium.slide-video:not(.slide-video--phone) .slide-video__embed,
.work-slide.work-slide--inset-medium.slide-video:not(.slide-video--phone) .slide-audio,
.work-slide.work-slide--inset-small.slide-video:not(.slide-video--phone) > video,
.work-slide.work-slide--inset-small.slide-video:not(.slide-video--phone) > .slide-video__player,
.work-slide.work-slide--inset-small.slide-video:not(.slide-video--phone) .slide-video__embed,
.work-slide.work-slide--inset-small.slide-video:not(.slide-video--phone) .slide-audio {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.18);
}

.work-slide--related + .work-slide {
    margin-top: 0 !important;
}

/* =============================================================================
   Work Slides — Additions
   Add these rules to style.css after the existing .work-slide block.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Related group — shared background wrapper
   
   .work-slide-group is the element that owns the continuous background image.
   Individual .slide-image elements inside it have their own background cleared
   so nothing stacks on top of the group background.
----------------------------------------------------------------------------- */

.work-slide-group {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Attachment is intentionally scroll (default). Set to 'fixed' below only
       if you want a true parallax/sticky effect at the cost of mobile repaint. */
}

/* Remove per-slide backgrounds inside a group so only the wrapper shows. */
.work-slide-group .slide-image {
    background-image: none !important;
    background-color: transparent !important;
}

/* Slide: Image */
.slide-image {
    background-size: cover;
    background-position: center;
}

.slide-image img {
    width: 100%;
    display: block;
}

.slide-image__bg {
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(40 * var(--svh));
}

.slide-image__bg img {
    max-height: calc(80 * var(--svh));
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Full width is meant to fill the frame. The 40svh minimum above is a stage for
   inset images on a colour, but under a full-width image it only adds bars:
   a 16:9 image on a 375x812 phone is 211px tall inside a 325px box, 57px of
   background above and below. Any image slide with a background colour gets
   this wrapper, even one set to plain #ffffff. */
.work-slide--full-width .slide-image__bg {
    min-height: 0;
}

/* Same reasoning for the height cap: 80svh kept a full-width image inside the
   viewport by narrowing it, which left side strips of the background colour
   (143px a side for a 16:9 image at 1440x900). Full width means edge to edge. */
.work-slide--full-width .slide-image__bg img {
    max-height: none;
    width: 100%;
}

/*
 * Overflow is handled by the min() in the base caps above, at every width.
 * This only pulls "small" in further so it stays visibly smaller than
 * "medium" on a phone, where both would otherwise fill the container.
 *
 * Must stay after the base .work-slide--inset-* img rules: a media query adds
 * no specificity.
 */
@media (max-width: 768px) {
    .work-slide.work-slide--inset-small.slide-image img,
    .work-slide.work-slide--inset-small.slide-video:not(.slide-video--phone) > video,
    .work-slide.work-slide--inset-small.slide-video:not(.slide-video--phone) > .slide-video__player,
    .work-slide.work-slide--inset-small.slide-video:not(.slide-video--phone) .slide-video__embed,
    .work-slide.work-slide--inset-small.slide-video:not(.slide-video--phone) .slide-audio {
        max-width: 80%;
        margin-top: calc(2.5 * var(--svh));
        margin-bottom: calc(2.5 * var(--svh));
    }

    /* A 350px cap is wider than a phone's padded container, so without this
       Inset Small would render larger than Inset Medium's 80%. */
    .work-slide.work-slide--inset-xsmall.slide-image img {
        max-width: 60%;
        margin-top: calc(2.5 * var(--svh));
        margin-bottom: calc(2.5 * var(--svh));
    }
}

/* -----------------------------------------------------------------------------
   Related group - equal vertical rhythm

   The Relation switch joins a slide to the next, on any layout, and
   single-work.php wraps each run in .work-slide-group, which carries the first
   slide's background. The wrapper owns all the vertical space: --slide-space
   above and below the group, and the same above every slide after the first.
   Every slide inside drops its own vertical padding, so nothing stacks and the
   gaps between joined slides match the space at the top and bottom.

   Also why .slide-image__bg loses its 40svh minimum here: with the image
   centred in it, the slack above and below each image doubled between them.
----------------------------------------------------------------------------- */
.work-slide-group {
    padding: var(--slide-space) 0;
}

.work-slide-group .work-slide,
.work-slide-group .slide-web__stage {
    padding-top: 0;
    padding-bottom: 0;
}

/* ~ rather than +: a text slide with a quote colour prints a <style> tag right
   after itself, so the next slide is not its adjacent sibling and + never
   matched - the slide after it sat flush against it. ~ reaches every slide
   after the first however many non-slide elements are in between. */
.work-slide-group > .work-slide ~ .work-slide {
    margin-top: var(--slide-space);
}

/* Hug the image; the wrapper handles the rhythm. */
.work-slide-group .slide-image__bg {
    min-height: 0;
}

/* Per-item margins would re-introduce the doubling. These have to match the
   mobile inset-small rule above, which reaches (0,4,1) for video, and sit
   after it. */
.work-slide-group .work-slide.slide-image img,
.work-slide-group .work-slide.slide-video:not(.slide-video--phone) > video,
.work-slide-group .work-slide.slide-video:not(.slide-video--phone) > .slide-video__player,
.work-slide-group .work-slide.slide-video:not(.slide-video--phone) .slide-video__embed,
.work-slide-group .work-slide.slide-video:not(.slide-video--phone) .slide-audio {
    margin-top: 0;
    margin-bottom: 0;
}

/* Phones: Inset Medium is inset only by the side gutter (--gap, 16px at 375px),
   so 40px above and below left it boxed in tall and narrow. Its vertical space
   drops to the gutter to match - its own padding, and the gap above it in a
   group, since margin-top resolves the variable on the slide itself. The group
   edges come from the wrapper, and both follow the FIRST slide so the bottom
   of a group always matches its top; keying the bottom off the last slide let
   the two differ whenever the group opened and closed on different types.
   Inset Small is left alone: shrunk to 80%, its sides already sit close to
   --slide-space. */
@media (max-width: 768px) {
    .work-slide--inset-medium {
        --slide-space: var(--gap);
    }

    .work-slide-group:has(> .work-slide--inset-medium:first-child) {
        padding-top: var(--gap);
        padding-bottom: var(--gap);
    }

    /* The gap BELOW an Inset Medium slide is the next slide's margin-top, so
       it needs the gutter too or a mixed group reads 16px above the image and
       40px below. + is safe here: only text slides print a trailing <style>,
       and Inset Medium is always an image or video. */
    .work-slide-group > .work-slide--inset-medium + .work-slide {
        --slide-space: var(--gap);
    }
}

/* Slide: Video */
/* object-fit reaches the poster as well as the playing frames. Posters were
   letterboxed whenever their aspect ratio differed from the video's; cover
   crops them to fill the player instead of stretching. The box itself still
   takes the video's own ratio, so the video is never cropped. */
.slide-video video {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* aspect-ratio, not the padding-top: 56.25% hack: percentage padding resolves
   against the PARENT's width, so once the inset caps narrowed the embed to
   1000px/600px the box stayed 16:9 of the full slide, and the player sat
   letterboxed inside a too-tall box with the shadow around the empty space. */
.slide-video__embed {
    position: relative;
    aspect-ratio: 16 / 9;
}

.slide-video__embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* An audio file on a Video slide (see slide-video.php): the cover image with a
   play button over it. The <audio> controls stay hidden until main.js adds
   .is-started on the first click. */
.slide-audio {
    position: relative;
}

.slide-audio > img {
    display: block;
    width: 100%;
    height: auto;
}

/* No cover uploaded: keep a 16:9 box for the button to sit in. */
.slide-audio:not(:has(> img)) {
    aspect-ratio: 16 / 9;
    background: #000;
}

/* A video with sound: the same play button over its poster, and no native
   controls until main.js adds .is-started on the first click. */
.slide-video__player {
    position: relative;
}

.slide-video__player.is-started .slide-play {
    display: none;
}

.slide-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0);
    cursor: pointer;
    transition: background 0.2s ease;
}

.slide-play:hover,
.slide-play:focus-visible {
    background: rgba(0, 0, 0, 0.25);
}

.slide-play img {
    width: clamp(48px, 12%, 80px);
    height: auto;
    filter: drop-shadow(0px 0px 24px rgba(0, 0, 0, 0.45));
    transition: transform 0.2s ease;
}

/* Must stay after the base .slide-play img rule: a media query adds no
   specificity. */
@media (min-width: 769px) {
    .slide-play img {
        width: clamp(64px, 14%, 120px);
    }
}

.slide-play:hover img,
.slide-play:focus-visible img {
    transform: scale(1.08);
}

.slide-audio audio {
    display: none;
}

.slide-audio.is-started .slide-play {
    display: none;
}

/* Under the cover rather than over it: covers can be short banners (CARL's is
   1920x483, ~75px tall at Inset Small on a phone), too short to hold a bar. */
.slide-audio.is-started audio {
    display: block;
    width: 100%;
}

/* -----------------------------------------------------------------------------
   Video: phone frame (ACF "Phone Frame?" switch on the Video layout)

   For vertical video - Instagram, TikTok. Proportions are taken from the phone
   mockup the portfolio-shots skill draws in scripts/export.py, so a framed video
   sits next to those composites without looking like a different device:

       bezel          0.045 x screen width       body   rgb(22,22,26)
       screen radius  0.14  x screen width       island 0.3 wide, 0.0504 tall,
       body radius    screen radius + bezel             0.036 below the screen top

   Everything is calc()'d off --phone-w so the frame scales as one piece; change
   that single value to resize the phone. content-box keeps --phone-w meaning the
   screen, with the bezel added outside it, exactly as the skill measures it.
----------------------------------------------------------------------------- */
.slide-video--phone {
    display: flex;
    justify-content: center;
}

.slide-video--phone .slide-video__phone {
    --phone-w: min(340px, 72vw);
    position: relative;
    box-sizing: content-box;
    width: var(--phone-w);
    padding: calc(var(--phone-w) * 0.045);
    background: #16161a;
    border-radius: calc(var(--phone-w) * 0.185);
    box-shadow: 0 calc(var(--phone-w) * 0.061) calc(var(--phone-w) * 0.078) rgba(0, 0, 0, 0.39);
}

.slide-video--phone .slide-video__phone video,
.slide-video--phone .slide-video__phone .slide-video__player,
.slide-video--phone .slide-video__phone .slide-video__embed {
    display: block;
    width: 100%;
    border-radius: calc(var(--phone-w) * 0.14);
    overflow: hidden;
}

/* The embed wrapper is hard-coded to 16:9; inside a phone the point is vertical. */
.slide-video--phone .slide-video__phone .slide-video__embed {
    aspect-ratio: 9 / 16;
}

.slide-video--phone .slide-video__phone-island {
    position: absolute;
    z-index: 2;
    top: calc(var(--phone-w) * 0.045 + var(--phone-w) * 0.036);
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--phone-w) * 0.3);
    height: calc(var(--phone-w) * 0.0504);
    border-radius: calc(var(--phone-w) * 0.0252);
    background: #000;
}

/* Slide: Text */
.slide-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--slide-space) var(--space-x-2xl);
    background-size: cover;
    background-position: center;
    position: relative;
}

.slide-text__content {
    max-width: none;
    position: relative;
    z-index: 2;
}

.slide-text__title {
    font-size: var(--font-size-h5);
    margin-bottom: 1.5rem;
}

.slide-text__copy {
    font-size: var(--font-size-body);
    line-height: 1.8;

    /*
     * Column width for the smaller headings and body copy. h1/h2 deliberately
     * fill the container to call them out; everything else is held narrower.
     * The two media queries below the blockquote rule ramp this down and then
     * break it.
     */
    --copy-col: 800px;
}

.slide-text__copy h1 {
    font-size: var(--font-size-h1);
    line-height: 1.4em;
    text-align: left;
    max-width: none;
    font-weight: 900;
    margin-bottom: calc(5 * var(--svh));
}

.slide-text__copy h2 {
    font-size: var(--font-size-h2);
    font-weight: 100;
    margin-bottom: calc(5 * var(--svh));
    line-height: 1.6em;
    letter-spacing: -.08rem;
}

.slide-text__copy h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h3);
    max-width: var(--copy-col);
    margin-bottom: calc(5 * var(--svh));
    margin-right: 0;
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.4em;
}

.slide-text__copy h4 {
    font-family: var(--font-body);
    font-size: var(--font-size-h4);
    line-height: 1.6em;
    text-align: left;
    font-weight: 500;
    max-width: var(--copy-col);
    margin-bottom: calc(5 * var(--svh));
    margin-right: 0;
    margin-left: auto;
}

.slide-text__copy h5 {
    font-family: var(--font-body);
    font-size: var(--font-size-h5);
    max-width: var(--copy-col);
    margin-bottom: calc(5 * var(--svh));
    margin-right: 0;
    margin-left: auto;
    line-height: 1.6em;
}

.slide-text__copy h6 {
    font-family: var(--font-heading);
    font-size: var(--font-size-h6);
    text-transform: uppercase;
    font-weight: 700;
    max-width: var(--copy-col);
    margin-bottom: calc(5 * var(--svh));
    margin-right: 0;
    margin-left: auto;
    letter-spacing: .5px;
    line-height: 1.4em;
}

.slide-text__copy p {
    font-family: var(--font-body);
    max-width: var(--copy-col);
    margin-bottom: calc(5 * var(--svh));
    margin-right: 0;
    margin-left: auto;
}

.slide-text__copy blockquote {
    background-color: var(--quote-bg, transparent);
    color: var(--quote-color, inherit);
}

.slide-text__copy blockquote p {
    max-width: none;
    margin-right: 0;
    margin-left: auto;
    font-family: var(--font-heading) !important;
    font-size: var(--font-size-h3);
    margin-bottom: calc(5 * var(--svh));
    font-weight: 800;
    text-align: left !important;
    line-height: 1.6em;
    padding: calc(3.5 * var(--svh)) var(--space-x-lg);
}

/*
 * h1/h2 fill the container while the rest sits at --copy-col, so as the
 * viewport narrows the container closes in on the fixed 800px and the
 * contrast collapses - at 1080px the wide text was only 37px wider, which
 * reads as a mistake rather than emphasis.
 *
 * From 1230px down, pull the narrow column in faster than the container so
 * the distinction stays obvious: 800px at 1230px, 600px at 1080px.
 */
@media (max-width: 1230px) {
    .slide-text__copy {
        --copy-col: calc(800px - (1230px - 100vw) * 4 / 3);
    }
}

/* Solid break: below this everything shares the container width. */
@media (max-width: 1080px) {
    .slide-text__copy {
        --copy-col: none;
    }
}

@media (max-width: 768px) {
    .slide-text__copy h1 {
        line-height: 1.2em;
    }

    .slide-text__copy h2 {
        margin-bottom: calc(2.5 * var(--svh));
        line-height: 1.2em;
    }

    .slide-text__copy h3 {
        margin-bottom: calc(2.5 * var(--svh));
        line-height: 1.2em;
        margin-left: auto;
        margin-right: auto;
    }

    .slide-text__copy h4 {
        margin-bottom: calc(2.5 * var(--svh));
        line-height: 1.2em;
        margin-left: auto;
        margin-right: auto;
    }

    .slide-text__copy h5 {
        margin-bottom: calc(2.5 * var(--svh));
        line-height: 1.2em;
        margin-left: auto;
        margin-right: auto;
    }

    .slide-text__copy h6 {
        margin-bottom: calc(2.5 * var(--svh));
        line-height: 1.2em;
        margin-left: auto;
        margin-right: auto;
    }

    .slide-text__copy p {
        margin-bottom: calc(2.5 * var(--svh));
        line-height: 1.6em;
        margin-left: auto;
        margin-right: auto;
    }

    .slide-text__copy blockquote p {
        margin-bottom: calc(2.5 * var(--svh));
        line-height: 1.2em;
        margin-left: auto;
        margin-right: auto;
    }

    .slide-text__content {
        width: 100%;
    }

    .slide-text {
        padding: var(--slide-space) var(--space-x-lg);
    }
}

/* The copy's headings and paragraphs carry a bottom margin to space them from
   what follows (5svh, 2.5svh on phones). On the last element there is nothing
   following, so it stacked onto the slide's bottom padding and the space below
   the text read larger than the space above. (0,2,0) beats every
   .slide-text__copy <tag> rule at (0,1,1)/(0,1,2), including the mobile ones,
   so source order does not matter here. The second selector covers the last
   paragraph inside a trailing blockquote; the title only counts when the slide
   has no copy. */
.slide-text__content > :last-child,
.slide-text__copy > :last-child,
.slide-text__copy > :last-child > :last-child {
    margin-bottom: 0;
}

/* The global a rule strips underlines; in running copy a link needs one to be
   told apart from the text around it, since both inherit the same colour. The
   offset keeps the line clear of descenders. */
.slide-text__copy a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Slide: Web */
.slide-web {
    position: relative;
    overflow: hidden;
}

.slide-web__image {
    padding: clamp(2rem, 5vw, 5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    min-height: calc(50 * var(--svh));
}

.slide-web__image img {
    max-width: 100%;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* ----------------------------------------
   Slide: Web
---------------------------------------- */
.slide-web__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    padding: var(--slide-space) 80px;
}

/* Phones: 80px a side left the browser mockup small. --space-x-2xl tracks
   roughly 10% of the width here (42px at 375px, 86px at 768px), and is the
   token text slides use for their sides. Must stay after the base rule - a
   media query adds no specificity. */
@media (max-width: 768px) {
    .slide-web__stage {
        padding-left: var(--space-x-2xl);
        padding-right: var(--space-x-2xl);
    }
}

.slide-web__browser {
    position: relative;
    width: 100%;
    max-width: 1000px;
    filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, .15));
}

.slide-web__frame {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    pointer-events: none;
    user-select: none;
}

/* Adjust these percentages to align with the transparent viewport area of the PNG */
.slide-web__viewport {
    position: absolute;
    top: 8.5%;
    left: 0%;
    right: 0%;
    bottom: 0%;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 1;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.slide-web__viewport::-webkit-scrollbar {
    display: none;
}

.slide-web__screenshot {
    display: block;
    width: 100%;
    height: auto;
}

.slide-web__scroll-hint {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 0 14px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.55));
    color: #fff;
    pointer-events: none;
    z-index: 3;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.slide-web__scroll-hint.is-hidden {
    opacity: 0;
}

.slide-web__scroll-label {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.85);
    color: #111;
    padding: 4px 10px;
    border-radius: 3px;
}

.slide-web__scroll-arrow {
    animation: web-hint-bounce 1.4s ease-in-out infinite;
}

@keyframes web-hint-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(4px); }
}

/* ===================================================
   Related Works
   =================================================== */
.related-works {
    padding: clamp(4rem, 8vw, 8rem) 0;
    background: var(--color-surface);
}

.related-works__heading {
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
    text-align: center;
    color: var(--color-text-muted);
}

.related-works__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2px;
}

/* ===================================================
   Contact Page
   =================================================== */
.contact-page {
    background: var(--color-bg);
}

.contact-page .container {
    max-width: 1200px;
}

.contact-page__title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    margin-bottom: 3rem;
    text-align: left;
    color: var(--color-accent);
}

/* Form at 60%, contact details beside it. */
.contact-page__grid {
    display: grid;
    grid-template-columns: 60% 1fr;
    column-gap: 10%;
    align-items: start;
}

.contact-page__item {
    margin-bottom: 2.5rem;
}

.contact-page__item:last-child {
    margin-bottom: 0;
}

.contact-page__label {
    font-family: var(--font-body);
    font-size: var(--font-size-btn1);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

.contact-page__value {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--font-size-h5);
    font-weight: 800;
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.4em;
}

a.contact-page__value:hover {
    color: var(--color-accent);
}

.contact-page__social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

.contact-page__social a {
    font-family: var(--font-body);
    font-size: var(--font-size-btn1);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid var(--color-text-muted);
    padding-bottom: 2px;
}

.contact-page__social a:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.contact-page__placeholder {
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    border: 1px dashed var(--color-border);
    padding: 1.5rem;
}

/*
 * Fluent Forms keys its primary colour to this variable, including the inline
 * <style> it prints for the submit button. Redefining it here recolours that
 * and anything else keyed to the primary, without chasing their selectors.
 */
.contact-page__form {
    --fluentform-primary: var(--color-accent);
}

/*
 * Form fields.
 *
 * The element selectors are the base layer so the dark treatment survives a
 * plugin update or a switch away from Fluent Forms - their own defaults assume
 * a light background. The .fluentform rules below handle what elements cannot
 * reach (groups, labels, the name row, errors) and carry an extra class of
 * specificity to beat Fluent Forms' own .fluentform-prefixed rules.
 */
.contact-page__form input[type="text"],
.contact-page__form input[type="email"],
.contact-page__form input[type="tel"],
.contact-page__form input[type="url"],
.contact-page__form input[type="number"],
.contact-page__form textarea,
.contact-page__form select {
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    padding: 0.75rem 1rem;
    transition: border-color var(--transition);
}

.contact-page__form input[type="text"]:focus,
.contact-page__form input[type="email"]:focus,
.contact-page__form input[type="tel"]:focus,
.contact-page__form input[type="url"]:focus,
.contact-page__form input[type="number"]:focus,
.contact-page__form textarea:focus,
.contact-page__form select:focus {
    outline: none;
    border-color: var(--color-accent);
}

.contact-page__form textarea {
    min-height: 10rem;
    resize: vertical;
}

/* Fluent Forms rounds its textarea with a more specific rule than the
   element selector above; square it to match the inputs. */
.contact-page__form .fluentform .frm-fluent-form textarea.ff-el-form-control {
    border-radius: 0;
}

.contact-page__form ::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

/* Field wrapper spacing - theirs is a flat 20px. */
.contact-page__form .fluentform .ff-el-group {
    margin-bottom: 1.75rem;
}

.contact-page__form .fluentform .ff_submit_btn_wrapper {
    margin-bottom: 0;
}

/* Turnstile (added 2026-11-11): on desktop it sits on the button's row at the
   right edge. Fluent Forms always prints the submit button last, after every
   field, so the row is built by making the fieldset a wrapping flex container
   and reordering the two. Phones keep the stacked order (widget above button). */
@media (min-width: 769px) {
    .contact-page__form .frm-fluent-form fieldset {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 1.5rem;
    }

    .contact-page__form .frm-fluent-form fieldset > * {
        flex: 0 0 100%;
    }

    .contact-page__form .frm-fluent-form fieldset > .ff_submit_btn_wrapper {
        flex: 0 0 auto;
        order: 1;
    }

    .contact-page__form .fluentform .frm-fluent-form fieldset > .ff-el-group:has(.cf-turnstile) {
        flex: 0 0 auto;
        order: 2;
        margin: 0 0 0 auto;
    }
}

.contact-page__form .fluentform .ff-el-input--label label {
    font-family: var(--font-body);
    font-size: var(--font-size-btn1);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
    display: block;
}

/* Required marker. */
.contact-page__form .fluentform .ff-el-is-required.asterisk-right label:after {
    color: var(--color-accent);
}

/* First/last name row. */
.contact-page__form .frm-fluent-form .ff-t-container {
    gap: 1.25rem;
}

/* Matches .intro-hero__btn--solid. */
.contact-page__form .fluentform .frm-fluent-form .ff-btn-submit {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-heading);
    font-size: var(--font-size-btn1);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.75em 1.75em;
    border: 2px solid var(--color-accent);
    border-radius: 0;
    line-height: 1;
    background: var(--color-accent);
    color: #000;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.contact-page__form .fluentform .frm-fluent-form .ff-btn-submit:hover {
    background: transparent;
    color: var(--color-accent);
}

/* Validation and submission messages. */
.contact-page__form .fluentform .ff-el-is-error .ff-el-form-control {
    border-color: #ff6b6b;
}

.contact-page__form .fluentform .error,
.contact-page__form .fluentform .text-danger,
.contact-page__form .fluentform .ff-el-is-error .error-text {
    color: #ff6b6b;
    font-size: var(--font-size-btn1);
    margin-top: 0.4rem;
}

.contact-page__form .ff-message-success {
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    background: transparent;
    padding: 1.25rem 1.5rem;
    font-size: var(--font-size-body);
}

@media (max-width: 768px) {
    .contact-page__grid {
        grid-template-columns: 1fr;
        row-gap: 3rem;
    }
}

/* ===================================================
   Footer
   =================================================== */
.site-footer {
    position: relative;
    background-color: var(--color-white);
    background-image: url('img/MW-Home-Bkgd-Green.svg');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    padding: clamp(4rem, 8vw, 8rem) 5vw clamp(1rem, 2vw, 2rem);
    text-align: center;
    overflow: hidden;
}

/* Diamond MW mark, between the CTA and the wordmark */
.site-footer__badge {
    width: clamp(4rem, 7vw, 7rem);
    margin: clamp(3.5rem, 8vw, 7rem) auto clamp(1.5rem, 4vw, 3rem);
}

.site-footer__badge svg {
    display: block;
    width: 100%;
    height: auto;
    fill: var(--color-bg);
}

.site-footer__inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.site-footer__heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-h6);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.6em;
    color: var(--color-bg);
    margin: 1rem 0;
}

/* Big CTA with the chartreuse highlighter rules behind the type */
.site-footer__cta {
    display: block;
    text-decoration: none;
    transition: transform var(--transition);
}

.site-footer__cta:hover {
    transform: translateX(15px);
}

/* Sideways travel reads oddly on a narrow screen; nudge down instead. */
@media (max-width: 768px) {
    .site-footer__cta:hover {
        transform: translateY(6px);
    }
}

.site-footer__cta-text {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: var(--font-size-h1);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.07em;
    color: var(--color-bg);
    padding: 0 0.25em;
    background-image: repeating-linear-gradient(
        transparent,
        transparent 0.38em,
        var(--color-accent) 0.38em,
        var(--color-accent) 1.07em
    );
}

.site-footer__wordmark {
    margin-top: 0;
}

.site-footer__wordmark img {
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    height: auto;
}

.site-footer__social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.75rem;
    margin-top: 1.5rem;
}

.site-footer__social img {
    display: block;
    width: 2.8rem;
    height: auto;
    transition: opacity var(--transition);
}

.site-footer__social a:hover img {
    opacity: 0.5;
}

@media (max-width: 51em) {
    /* Scale the background graphic up so the shapes still read at phone width */
    .site-footer {
        background-size: 180% auto;
    }

    .site-footer__wordmark img {
        max-width: 80%;
    }

    .site-footer__social img {
        width: 2.25rem;
    }

    .site-footer__social {
        gap: 1.25rem;
    }
}

.site-footer__copyright {
    font-family: var(--font-body);
    font-size: 0.75rem;
    line-height: 1.5em;
    color: var(--color-text-muted);
    margin: clamp(2rem, 5vw, 4rem) 0 0;
}

/* ===================================================
   Utility
   =================================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}








body {
    opacity: 1;
    transition: opacity 0.15s ease;
}

/* ===================================================
   Single Industry - case study pages
   =================================================== */
.single-industry {
    background: var(--color-bg);
}

.industry-header {
    padding-top: calc(var(--header-height) + 4rem);
    padding-bottom: clamp(2rem, 4vw, 4rem);
}

.industry-header__eyebrow {
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--font-size-btn1);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.industry-header__title {
    font-size: var(--font-size-hero1);
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0;
    max-width: 60%;
    line-height: 1em;
}

/* Each block paints its own background_color, so the padding has to live on the
   block rather than on a shared wrapper - otherwise the colour would stop short
   of the gap between blocks. */
.industry-block {
    padding-top: clamp(3rem, 7vw, 8rem);
    padding-bottom: clamp(3rem, 7vw, 8rem);
}

/* An image block's colour is a backdrop for the image, so it keeps its padding
   only when inset; full width means full bleed. */
.industry-block--image.industry-block--full-width {
    padding: 0;
}

.industry-block--image img {
    display: block;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

/* Same caps as the Work image slides, same min() guard so a fixed cap can never
   outgrow the padded container on a narrow viewport. */
.industry-block--image.industry-block--inset-medium img {
    max-width: min(1000px, 100%);
}

.industry-block--image.industry-block--inset-small img {
    max-width: min(600px, 100%);
}

/* Right-hand background image.

   The image is a decorative layer rather than the block's own background-image,
   because it needs the gradient painted on top of it and only over its own band.
   The gradient runs from the section's colour at the image's left edge out to
   transparent, so the hard vertical edge where the image starts disappears and
   the type on the left keeps a clean field to sit on. Both the image and the
   fade colour are inline, since they are per-section values.

   The container is lifted above both so the copy is never behind the image. */
.industry-block--has-bg-image {
    position: relative;
    overflow: hidden;
}

.industry-block__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 70%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Three stops rather than two, for the same reason as the mobile rule below.
   At 70% the band starts 30% from the left, while .industry-block__measure runs
   the copy out to 60% of the container - so the image sits under roughly the
   first 43% of its own width. Full colour is held through the first quarter and
   then released slowly, which trades a little opacity under the right end of the
   measure for a softer blend into the image. Raise the middle stop if a longer
   headline starts to crowd it. */
.industry-block__bg-fade {
    position: absolute;
    inset: 0;
    display: block;
    background-image: linear-gradient(
        to right,
        var(--fade-to, #000) 0%,
        var(--fade-to, #000) 25%,
        transparent 95%
    );
}

.industry-block--has-bg-image > .container {
    position: relative;
    z-index: 1;
}

/* Mobile: no room for two columns, so the layout stacks. The image moves to a
   band across the top of the section and the copy runs the full measure beneath
   it, overlapping the lower part of the band.

   The fade turns with it - upward instead of leftward - so it is solid at the
   bottom of the band, where the eyebrow and headline sit, and clears towards the
   top where the image should read. The overlap is the difference between the
   band's height and the container's top padding, 25svh, which measured out as
   both the eyebrow and the headline crossing the band. Narrow that gap to
   overlap less. */
@media (max-width: 900px) {
    .industry-block__bg {
        left: 0;
        right: 0;
        bottom: auto;
        width: 100%;
        height: calc(55 * var(--svh));
    }

    /* Three stops rather than two: the bottom third stays fully solid so the
       overlapping eyebrow and headline sit on flat colour, and only above that
       does the image come through. A straight 0-75% fade left the type on a
       half-transparent wash. */
    .industry-block__bg-fade {
        background-image: linear-gradient(
            to top,
            var(--fade-to, #000) 0%,
            var(--fade-to, #000) 35%,
            transparent 85%
        );
    }

    .industry-block--has-bg-image {
        padding-top: 0;
    }

    .industry-block--has-bg-image > .container {
        padding-top: calc(30 * var(--svh));
    }
}

/* The chip borders itself in the accent via the shared eyebrow rule, so a
   recoloured section title would sit inside a green outline. currentColor keeps
   the border with whatever colour the dropper picked. Must stay after the shared
   rule above, which sets border-color explicitly. */
.industry-block__eyebrow {
    border-color: currentColor;
}

/* Matches .about-section__title, the homepage "unsung value of the generalist"
   headline. */
/* One measure for the whole section, so the headline wraps exactly where the
   body copy does. It stays on the wrapper rather than on each element: a
   percentage resolves against the container either way, but bounding the two
   together is what guarantees they break at the same point. */
.industry-block__measure {
    max-width: 60%;
}

/* Must stay after the rule above and after .industry-header__title. Same
   specificity, so source order is the only thing deciding it - sitting with the
   other mobile rules further up, this lost and the copy stayed in a 60% column
   on phones. */
@media (max-width: 900px) {
    .industry-block__measure,
    .industry-header__title {
        max-width: 100%;
    }
}

/* Side image: the copy keeps its 60% and the image takes what is left of the
   container after the gap. Inside the grid the column already is the measure,
   so the 60% max-width comes off - left on, it would resolve against the column
   and shrink the copy to 60% of 60%. */
.industry-block__split {
    display: grid;
    grid-template-columns: 60% minmax(0, 1fr);
    column-gap: var(--space-x-xl);
    align-items: start;
}

.industry-block__split > .industry-block__measure {
    max-width: none;
}

.industry-block__side-image {
    margin: 0;
}

.industry-block__side-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Must stay after the base .industry-block__split rule. Stacked, the image
   follows the copy at full width. */
@media (max-width: 900px) {
    .industry-block__split {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2.5rem;
    }
}

.industry-block__headline {
    font-size: clamp(2rem, 4vw, 3.5rem);
    margin-bottom: 2rem;
    text-align: left;
}

.industry-block__title {
    font-size: var(--font-size-h2);
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.industry-block__copy {
    line-height: 1.6em;
}

.industry-block__copy p + p {
    margin-top: 1.25em;
}

/* The global reset zeroes ul's default padding-left, and list markers sit
   outside the content box, so bullets landed to the LEFT of the copy. Drawing
   the marker as a pseudo-element brings it inside the flow: the dash sits on
   the copy's left edge and the text indents past it. */
.industry-block__copy ul {
    list-style: none;
    margin: 1.25em 0;
}

.industry-block__copy ul li {
    position: relative;
    padding-left: 1.5em;
    /* Wrapped lines within one bullet sit tighter than the gap between bullets. */
    line-height: 1.2em;
}

.industry-block__copy ul li::before {
    content: "\2014";
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

/* 1.2em line + 0.4em margin = the 1.6em rhythm the surrounding copy runs at, so
   bullets are spaced like body text even though each bullet's own wrapped lines
   are tighter. */
.industry-block__copy ul li + li {
    margin-top: 0.4em;
}

.industry-block__copy blockquote {
    background-color: var(--quote-bg, transparent);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    margin: 2rem 0;
    font-size: var(--font-size-h4);
    line-height: 1.4;
}

.industry-block--work .work-grid__items {
    margin-top: clamp(1.5rem, 3vw, 3rem);
}

/* ===================================================
   Industry Layout: Client List
   ===================================================

   Always on white, so it ignores the background_color the other layouts carry
   and has no such field in ACF.

   The block is white and the tile is a band across its bottom, left-aligned
   with the copy so there is plain white between the lines and the window edge.
   Both the band and the container's horizontal padding read --section-inset, so
   moving the section's width moves the lines with it.

   The band is a pseudo-element rather than the block's own background. Clipping
   a background to the content box would need padding-left on the block, and
   that padding would also indent __panel - so the copy, which carries its own
   horizontal padding, would sit at twice the intended inset. An absolutely
   positioned band takes the same offset without touching flow.

   --tile-band is shared by the block's padding-bottom and the band's height so
   the two cannot drift apart. The URL arrives as --client-list-tile, set inline
   by the template, because it has to come from AGENCY_URI rather than a path
   relative to this file. */
.industry-block--client-list {
    --tile-band: clamp(3rem, calc(10 * var(--svh)), 7rem);
    --section-inset: 15%;
    position: relative;
    background-color: #fff;
    padding-top: 0;
    padding-bottom: var(--tile-band);
}

/* This section runs narrower than the rest of the page, so it overrides
   .container's var(--space-x-lg) instead of using it. Higher specificity than
   the base .container rule, so source order is not what decides this one.
   Vertical padding is left alone. */
.industry-client-list__panel > .container {
    padding-left: var(--section-inset);
    padding-right: var(--section-inset);
}

.industry-block--client-list::after {
    content: "";
    position: absolute;
    left: var(--section-inset);
    right: 0;
    bottom: 0;
    height: var(--tile-band);
    background-image: var(--client-list-tile, none);
    background-size: 18px;
    background-position: left top;
    background-repeat: repeat;
    pointer-events: none;
}

.industry-client-list__panel {
    background: #fff;
    padding-top: clamp(3rem, 7vw, 8rem);
}

/* The block sits on white rather than the page's black, so every colour here is
   set outright - inherited --color-text would be white on white. */
.industry-client-list__headline {
    font-size: var(--font-size-h2);
    text-transform: uppercase;
    color: #000;
    margin: 0 0 clamp(2rem, 5vw, 4rem);
    line-height: 1.1;
    max-width: 65%;
}

/* One slide per client. The viewport clips, the track slides; widths are set in
   JS from the viewport's measured pixel width for the same reason the hero
   slider does it - a percentage translate against a fractional width parks the
   track mid-pixel and bleeds the neighbouring slide through the edge. */
.industry-client-list__viewport {
    overflow: hidden;
}

.industry-client-list__track {
    display: flex;
    transition: transform var(--transition);
    will-change: transform;
}

.industry-client-list__slide {
    flex: 0 0 100%;
    min-width: 0;
}

/* Logo left, type right, hairline between. align-items: stretch rather than
   center so the rule runs the full height of the taller side instead of only as
   far as the shorter one. */
.client-card {
    display: flex;
    align-items: stretch;
    gap: clamp(1.25rem, 4vw, 3.5rem);
}

.client-card__logo {
    flex: 0 0 auto;
    width: clamp(110px, 22%, 240px);
    display: flex;
    align-items: center;
}

.client-card__logo img {
    display: block;
    width: 100%;
    height: auto;
}

.client-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid #d9d9d9;
    padding-left: clamp(1.25rem, 4vw, 3.5rem);
}

.client-card__name {
    font-family: var(--font-heading);
    font-size: var(--font-size-h6);
    text-transform: uppercase;
    color: #000;
    margin: 0 0 0.5rem;
    line-height: 1.15;
}

.client-card__desc {
    font-size: var(--font-size-body);
    color: #555;
    margin: 0;
    line-height: 1.5;
    max-width: 60ch;
}

.industry-client-list__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(1.5rem, 4vw, 3rem);
}

.industry-client-list__counter {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-variant-numeric: tabular-nums;
    color: var(--color-accent);
    margin: 0;
}

.industry-client-list__controls {
    display: flex;
    gap: 0.75rem;
}

/* The hero slider's buttons are lime on black; on white that reads as glare, so
   these are outlined and fill on hover instead. */
.industry-client-list__btn {
    width: 40px;
    height: 40px;
    border: 1px solid #d9d9d9;
    border-radius: 50%;
    background: transparent;
    color: #000;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.industry-client-list__btn:hover,
.industry-client-list__btn:focus-visible {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #000;
}

/* Stacked: the vertical rule would have nothing to divide once the logo sits
   above the type, so it becomes a horizontal one. */
/* Same reset as .industry-block__measure and .industry-header__title: 65% of a
   phone is a two-word-per-line column. Must stay after the base rule - a media
   query adds no specificity, so source order is what decides it. */
@media (max-width: 900px) {
    /* 15% a side is proportional, so on a phone it spends most of the width on
       margin. Redefining the variable moves the container's padding and the
       tile band together - they both read it - so the lines stay aligned with
       the copy at every width. var(--space-x-lg) is what the rest of the page
       already uses, so the section stops being the narrow one here. */
    .industry-block--client-list {
        --section-inset: var(--space-x-lg);
    }

    .industry-client-list__headline {
        max-width: 100%;
    }
}

@media (max-width: 700px) {
    .client-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .client-card__logo {
        width: clamp(110px, 45%, 180px);
    }

    .client-card__body {
        border-left: 0;
        border-top: 1px solid #d9d9d9;
        padding-left: 0;
        padding-top: 1.25rem;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .industry-header {
        padding-top: calc(var(--header-height) + 1rem);
    }

    .industry-block--image.industry-block--inset-small img {
        max-width: 80%;
    }
}

/* ===================================================
   Industry Layout: Stats
   =================================================== */
/* Always on black by design - there is no background_color field to override. */
.industry-block--stats {
    background: #000;
    color: #fff;
}

.industry-block--stats .industry-block__headline {
    margin-bottom: 0;
}

/* Hairlines between entries only, never round the outside. The gaps are zero
   and each cell pads itself instead, so a border drawn on a cell spans the whole
   gutter and the vertical and horizontal rules meet. The first and last rows
   drop their outer padding so the grid sits flush with what is above and below.
   Base rules are the one-column phone layout. */
.industry-stats {
    --stat-pad-y: clamp(3rem, calc(7 * var(--svh)), 5.5rem);
    --stat-pad-x: var(--space-x-lg);
    --stat-rule: 1px solid var(--color-border);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: clamp(3.5rem, calc(9 * var(--svh)), 7rem);
}

.industry-stat {
    text-align: center;
    padding: var(--stat-pad-y) 0;
}

.industry-stat + .industry-stat {
    border-top: var(--stat-rule);
}

.industry-stat:first-child {
    padding-top: 0;
}

.industry-stat:last-child {
    padding-bottom: 0;
}

/* Two columns. Scoped by min-width rather than undone for phones: these
   positional selectors reach (0,3,0), which a max-width reset would have to
   out-specify one by one. Left-hand cells carry the vertical rule; every row
   after the first carries the horizontal one. */
@media (min-width: 701px) {
    .industry-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .industry-stat:nth-child(odd) {
        border-right: var(--stat-rule);
        padding-left: 0;
        padding-right: var(--stat-pad-x);
    }

    .industry-stat:nth-child(even) {
        padding-left: var(--stat-pad-x);
        padding-right: 0;
    }

    /* The second cell shares the first row, so it loses the adjacent-sibling
       rule and the top padding. */
    .industry-stat:nth-child(2) {
        border-top: 0;
        padding-top: 0;
    }

    /* Last row: the final cell, plus a left-hand cell among the last two. */
    .industry-stat:nth-child(odd):nth-last-child(-n+2) {
        padding-bottom: 0;
    }

    /* An odd count leaves the last cell alone on its row, with no neighbour for
       a vertical rule to divide it from. */
    .industry-stat:nth-child(odd):last-child {
        border-right: 0;
    }
}

/* Sized off the viewport rather than the hero tokens: a figure like $50,000 has
   to fit half the container. No nowrap - "10+ years" may break at its space on
   narrower screens rather than overflow the column. */
.industry-stat__value {
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(3rem, 1rem + 5vw, 6.5rem);
    line-height: 1;
    margin: 0 0 0.75rem;
}

.industry-stat__label {
    color: var(--color-accent);
    font-weight: 800;
    font-size: var(--font-size-h5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin: 0 0 1rem;
}

/* The measure sits on the text rather than the cell, so the rules still run
   the cell's full width. */
.industry-stat__label,
.industry-stat__desc {
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}

.industry-stat__desc {
    line-height: 1.6em;
    margin-bottom: 0;
}

/* ===================================================
   404
   =================================================== */
.not-found {
    background: var(--color-bg);
    min-height: calc(70 * var(--svh));
    display: flex;
    align-items: center;
}

.not-found .container {
    width: 100%;
}

.not-found__code {
    font-family: var(--font-heading);
    font-size: var(--font-size-hero2);
    font-weight: 900;
    line-height: 0.9;
    color: var(--color-accent);
    margin: 0 0 1.5rem;
}

.not-found__title {
    font-size: var(--font-size-h1);
    margin: 0 0 1rem;
}

.not-found__text {
    color: var(--color-text-muted);
    max-width: 36rem;
    margin: 0;
}

.not-found__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
}