/* ============================================================
   MODE MARKETING — MAIN CSS
   Dark, minimal, conversion-focused.
   ============================================================ */

/* ---- CSS Custom Properties --------------------------------- */
:root {
    --color-void:       #0A0A0A;
    --color-carbon:     #141414;
    --color-gunmetal:   #1E1E1E;
    --color-smoke:      #666666;
    --color-dark-grey:  #404041;
    --color-light-grey: #6D6E70;
    --color-chalk:      #F0F0F0;
    --color-white:      #FFFFFF;
    --color-volt:       #C8FF00;
    --color-volt-hover: #DFFF00;

    --font-primary: 'Exo', sans-serif;

    --transition-fast: 200ms ease-out;

    --section-padding-top:    88px;
    --section-padding-bottom: 88px;
    --section-padding: var(--section-padding-top) 0 var(--section-padding-bottom);

    --max-width: 1280px;
    --container-padding: 0 40px;

    --border-hairline: 0.5px solid var(--color-gunmetal);
}

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.75;
    color: var(--color-smoke);
    background-color: #0A0A0A;
    overflow-x: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
}

ul, ol {
    list-style: none;
}

address {
    font-style: normal;
}

/* ---- Layout ------------------------------------------------ */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--container-padding);
    width: 100%;
}

/* ---- Global animated background canvas -------------------- */
#mode-global-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.page-wrapper {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Hero sections are transparent — canvas shows through fully.
   section[class*="-hero"] catches all service/package page heroes
   (.tl-hero, .sal-hero, .faal-hero, .mp-hero, etc.) so new pages
   get the transparent hero automatically. */
.gp-hero,
.page-hero.section--void,
.hero.section--void,
.ty-hero.section--void,
section[class*="-hero"] {
    background-color: transparent !important;
    background: transparent !important;
}

/* ---- Typography -------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.05;
}

h1 {
    font-size: clamp(40px, 6vw, 88px);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.05;
}

h2 {
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.1;
}

h3 {
    font-size: 24px;
    font-weight: 500;
    color: var(--color-chalk);
    line-height: 1.3;
}

p {
    font-weight: 300;
    font-size: 17px;
    line-height: 1.75;
    color: var(--color-smoke);
}

/* Eyebrow / section labels */
.eyebrow {
    display: block;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-volt);
    margin-bottom: 24px;
}

/* ---- Buttons ----------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    padding: 16px 32px;
    cursor: pointer;
    border: none;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}

.btn--primary {
    background-color: var(--color-volt);
    color: var(--color-void);
    border: 1px solid transparent;
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background-color: var(--color-volt-hover);
    color: var(--color-void);
}

.btn--secondary {
    background-color: transparent;
    color: var(--color-chalk);
    border: 1px solid var(--color-smoke);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
    color: var(--color-white);
    border-color: var(--color-chalk);
}

/* ---- LP Header (no nav) ------------------------------------ */
.site-header--lp .header-inner {
    justify-content: space-between;
    align-items: center;
}

.lp-header-cta {
    font-size: 12px;
    padding: 12px 24px;
}

/* ---- Header / Navigation ----------------------------------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: transparent;
    transition: background-color var(--transition-fast), backdrop-filter var(--transition-fast);
}

.site-header.is-scrolled {
    background-color: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-logo img {
    height: 140px;
    width: auto;
    margin-left: -24px;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 40px;
}

.nav-link {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-smoke);
    transition: color var(--transition-fast);
}

.nav-link:hover,
.nav-link.is-active {
    color: var(--color-chalk);
}

.nav-link--portal {
    color: var(--color-chalk) !important;
    border: 0.5px solid rgba(240, 240, 240, 0.22);
    padding: 8px 16px;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: border-color 200ms ease-out, color 200ms ease-out, background-color 200ms ease-out;
}
.nav-link--portal:hover {
    color: var(--color-volt) !important;
    border-color: var(--color-volt);
    background-color: rgba(200, 255, 0, 0.05);
}

.nav-overlay-link--portal {
    color: var(--color-chalk) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.nav-cta {
    padding: 10px 20px;
    font-size: 12px;
}

/* Hamburger */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.hamburger-line {
    display: block;
    width: 22px;
    height: 1px;
    background-color: var(--color-chalk);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* Nav overlay (mobile) */
.nav-overlay {
    position: fixed;
    inset: 0;
    background-color: #0A0A0A;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease-out;
}

.nav-overlay.is-open {
    opacity: 1;
    pointer-events: all;
}

.nav-overlay-inner {
    width: 100%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.nav-overlay-close {
    position: absolute;
    top: 24px;
    right: 40px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 4px;
}

.nav-overlay-close .hamburger-line:first-child {
    transform: translateY(1px) rotate(45deg);
    transform-origin: center;
}

.nav-overlay-close .hamburger-line:last-child {
    transform: translateY(-1px) rotate(-45deg);
    transform-origin: center;
}

.nav-overlay-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 40px;
}

.nav-overlay-link {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: clamp(32px, 8vw, 56px);
    color: var(--color-smoke);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color var(--transition-fast);
    line-height: 1.2;
}

.nav-overlay-link:hover {
    color: var(--color-white);
}

.nav-overlay-cta {
    margin-top: 8px;
}

/* ---- Sections ---------------------------------------------- */
section {
    position: relative;
}

.section--void {
    background-color: rgba(10, 10, 10, 0.62);
}

.section--carbon {
    background-color: rgba(20, 20, 20, 0.68);
}

/* ---- Footer ------------------------------------------------ */
.site-footer {
    background-color: var(--color-void);
    border-top: 0.5px solid var(--color-gunmetal);
}

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 56px 40px 40px;
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    padding-bottom: 40px;
    border-bottom: 0.5px solid var(--color-gunmetal);
    gap: 64px;
}

/* Col 1 — Brand */
.footer-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-logo img {
    height: 120px;
    width: auto;
}

.footer-tagline {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-smoke);
    margin: 0;
    padding-left: 12px;
}

.footer-company {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-dark-grey);
    letter-spacing: 0.02em;
    margin: 0;
    padding-left: 12px;
}

/* Nav — horizontal under brand */
.footer-nav {
    display: flex;
    flex-direction: row;
    gap: 32px;
    margin-top: 20px;
    padding-left: 12px;
}

.footer-nav__link {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-smoke);
    transition: color var(--transition-fast);
}

.footer-nav__link:hover {
    color: var(--color-chalk);
}

/* Col 3 — CTA */
.footer-cta-col {
    text-align: right;
}

.footer-cta-col__heading {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: 20px;
}

.footer-cta-col__sub {
    font-size: 12px;
    font-weight: 300;
    color: var(--color-smoke);
    margin-top: 10px;
    margin-bottom: 0;
}

/* Bottom bar */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    gap: 24px;
}

.footer-copy {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-dark-grey);
}


.footer-legal {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-legal a {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-dark-grey);
    transition: color var(--transition-fast);
}

.footer-legal a:hover {
    color: var(--color-smoke);
}

.footer-legal-sep {
    color: var(--color-gunmetal);
}

/* ---- Animation initial states ------------------------------ */
/* GSAP animates these TO opacity:1, y:0 on trigger */
.hero-reveal,
.reveal,
.stagger-children > *,
.hero__result-card__header,
.hero__result-card__main,
.hero__result-card__stats,
.hero__result-card__footer {
    opacity: 0;
    transform: translateY(24px);
}

/* Reduced-motion: skip all animations, show everything */
@media (prefers-reduced-motion: reduce) {
    .hero-reveal,
    .reveal,
    .stagger-children > *,
    .hero__result-card__header,
    .hero__result-card__main,
    .hero__result-card__stats,
    .hero__result-card__footer {
        opacity: 1;
        transform: none;
    }

    .proof-bar__inner {
        animation: none;
    }
}

/* ---- Hero -------------------------------------------------- */
.hero .eyebrow {
    margin-bottom: 12px;
}

.hero {
    min-height: 100vh;
    display: flex;
    overflow: hidden;
    position: relative;
}

.hero__inner {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100vh;
}

/* Left content column — padding-left aligns with container left edge */
.hero__content {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-top: 136px;
    padding-bottom: 64px;
    padding-left: max(40px, calc((100vw - 1280px) / 2 + 40px));
    padding-right: 72px;
}

.hero__heading {
    font-size: clamp(32px, 3.6vw, 58px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.08;
    margin-bottom: 16px;
}

.hero__subline {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-chalk);
    margin-bottom: 16px;
}

.hero__body {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--color-smoke);
    max-width: 480px;
    margin-bottom: 24px;
}

.hero__ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Right image column — bleeds to right viewport edge */
.hero__media {
    flex: 0 0 50%;
    align-self: stretch;
    position: relative;
    overflow: hidden;
}

/* ---- Hero graphic (right panel — client result card) ------- */
.hero__graphic {
    width: 100%;
    height: 100%;
    background: var(--color-void);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 56px 64px 64px;
    position: relative;
    overflow: hidden;
}

/* Subtle grid background — tight, barely visible */
.hero__graphic::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(#1a1a1a 0.5px, transparent 0.5px),
        linear-gradient(90deg, #1a1a1a 0.5px, transparent 0.5px);
    background-size: 48px 48px;
    pointer-events: none;
}

/* Left fade — blends right panel into left content */
.hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right, var(--color-void) 0%, transparent 18%);
    z-index: 2;
}

/* The result card itself */
.hero__result-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    background: var(--color-carbon);
    border: 0.5px solid var(--color-gunmetal);
}

.hero__result-card__header {
    padding: 20px 28px;
    border-bottom: 0.5px solid var(--color-gunmetal);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero__result-card__client {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-chalk);
}

.hero__result-card__tag {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-smoke);
}

.hero__result-card__main {
    padding: 32px 28px 24px;
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.hero__result-card__num {
    font-size: 72px;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1;
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-primary);
}

.hero__result-card__desc {
    font-size: 14px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.5;
}

.hero__result-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.hero__result-card__stat {
    padding: 20px 28px;
}

.hero__result-card__stat:first-child {
    border-right: 0.5px solid var(--color-gunmetal);
}

.hero__result-card__stat-val {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1;
    margin-bottom: 6px;
    font-family: var(--font-primary);
}

.hero__result-card__stat-key {
    display: block;
    font-size: 12px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.4;
}

.hero__result-card__footer {
    padding: 16px 28px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.hero__result-card__badge {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-dark-grey);
    border: 0.5px solid var(--color-gunmetal);
    padding: 4px 10px;
}

.hero__result-card__timeline {
    font-size: 12px;
    font-weight: 300;
    color: var(--color-smoke);
    margin-left: auto;
}

/* ---- Social Proof Bar (marquee ticker) --------------------- */
.proof-bar {
    background: var(--color-carbon);
    border-top: 0.5px solid var(--color-gunmetal);
    border-bottom: 0.5px solid var(--color-gunmetal);
    overflow: hidden;
    white-space: nowrap;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.proof-bar__inner {
    display: inline-flex;
    align-items: center;
    animation: marquee 28s linear infinite;
    will-change: transform;
}

.proof-bar:hover .proof-bar__inner {
    animation-play-state: paused;
}

.proof-bar__item {
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-chalk);
    padding: 22px 48px;
    white-space: nowrap;
    flex-shrink: 0;
}

.proof-bar__item em {
    font-style: normal;
    color: var(--color-smoke);
}

.proof-bar__divider {
    width: 0.5px;
    height: 16px;
    background: var(--color-gunmetal);
    flex-shrink: 0;
}

/* ---- Problem Section --------------------------------------- */
.problem {
    padding: var(--section-padding-top, 120px) 0 var(--section-padding-bottom, 120px);
}

.problem__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.problem__heading {
    font-size: clamp(32px, 3.5vw, 52px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.1;
}

.problem__body {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--color-smoke);
    margin-bottom: 24px;
}

.problem__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 64px;
    border: 0.5px solid var(--color-gunmetal);
}

.problem__card {
    background: var(--color-carbon);
    padding: 32px 36px;
    border-right: 0.5px solid var(--color-gunmetal);
}

.problem__card:last-child {
    border-right: none;
}

.problem__card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.5;
    margin-bottom: 8px;
}

.problem__card-body {
    font-size: 15px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.6;
}

/* ---- Packages Preview -------------------------------------- */
.packages-preview {
    padding: var(--section-padding-top, 120px) 0 var(--section-padding-bottom, 120px);
}

.packages-preview .eyebrow {
    display: block;
    margin-bottom: 24px;
}

.packages-preview__heading {
    font-size: clamp(32px, 3.5vw, 52px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: 40px;
}

.packages-preview__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--color-gunmetal);
    border: 0.5px solid var(--color-gunmetal);
}

.package-card {
    background: var(--color-carbon);
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.package-card--featured {
    background: #181818;
}

.package-card__badge {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-void);
    background: var(--color-volt);
    padding: 4px 10px;
    margin-bottom: 24px;
    align-self: flex-start;
    border-radius: 2px;
}

.package-card__top {
    margin-bottom: 20px;
}

.package-card__name {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-smoke);
    margin-bottom: 12px;
}

.package-card__price {
    font-size: 36px;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1;
    margin-bottom: 6px;
}

.package-card__price span {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-smoke);
}

.package-card__type {
    font-size: 13px;
    font-weight: 300;
    color: var(--color-smoke);
}

.package-card__scope {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    border-top: 0.5px solid var(--color-gunmetal);
    padding-top: 20px;
}

.package-card__scope li {
    font-size: 13px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.5;
    padding: 6px 0;
    padding-left: 16px;
    position: relative;
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.package-card__scope li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--color-dark-grey);
    font-size: 11px;
}

.package-card__tagline {
    font-size: 15px;
    font-weight: 300;
    color: var(--color-chalk);
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 28px;
    flex: 1;
}

.package-card__link {
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-chalk);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.package-card__link:hover {
    color: var(--color-white);
}

.bundle-strip {
    margin-top: 1px;
    background: var(--color-carbon);
    border: 0.5px solid var(--color-gunmetal);
    border-top: none;
    padding: 20px 36px;
    display: flex;
    align-items: center;
}

.bundle-strip__text {
    font-size: 15px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.6;
}

.bundle-strip__text strong {
    color: var(--color-chalk);
    font-weight: 500;
}

/* ---- Why Mode ---------------------------------------------- */
.why-mode {
    padding: var(--section-padding-top, 120px) 0 var(--section-padding-bottom, 120px);
}

.why-mode .eyebrow {
    display: block;
    margin-bottom: 24px;
}

.why-mode__heading {
    font-size: clamp(32px, 3.5vw, 52px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: 24px;
}

.why-mode__intro {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--color-smoke);
    max-width: 640px;
    margin-bottom: 48px;
}

.why-mode__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--color-gunmetal);
    border: 0.5px solid var(--color-gunmetal);
}

.why-mode__grid--three {
    grid-template-columns: repeat(3, 1fr);
}

.why-mode__item {
    background: var(--color-carbon);
    padding: 40px 40px;
}

.why-mode__number {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--color-smoke);
    margin-bottom: 16px;
}

.why-mode__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-chalk);
    margin-bottom: 12px;
}

.why-mode__body {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--color-smoke);
}

/* ---- Final CTA --------------------------------------------- */
.final-cta {
    padding: var(--section-padding-top, 120px) 0 var(--section-padding-bottom, 120px);
}

.final-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.final-cta__heading {
    font-size: clamp(32px, 3.5vw, 52px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: 24px;
}

.final-cta__body {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--color-smoke);
    max-width: 480px;
    margin-bottom: 40px;
}

.final-cta__reassurance {
    margin-top: 20px;
    font-size: 13px;
    font-weight: 300;
    color: var(--color-smoke);
    opacity: 0.7;
}

/* ---- Page Hero (interior pages) --------------------------- */
.page-hero {
    padding: 152px 0 64px;
}

.page-hero .eyebrow {
    display: block;
    margin-bottom: 20px;
}

.page-hero__heading {
    font-size: clamp(32px, 4vw, 64px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.05;
    margin-bottom: 24px;
    max-width: 760px;
}

.page-hero__body {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--color-smoke);
    max-width: 560px;
}

/* ---- Package Sections -------------------------------------- */
.pkg-section {
    padding: 100px 0;
    border-top: 0.5px solid var(--color-gunmetal);
}

.pkg-section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.pkg-section__grid--reverse {
    direction: rtl;
}

.pkg-section__grid--reverse > * {
    direction: ltr;
}

.pkg-section .eyebrow {
    display: block;
    margin-bottom: 20px;
}

.pkg-section__name {
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: 12px;
}

.pkg-section__price {
    font-size: 40px;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1;
    margin-bottom: 28px;
}

.pkg-section__price span {
    font-size: 18px;
    font-weight: 300;
    color: var(--color-smoke);
}

.pkg-section__tagline {
    font-size: 17px;
    font-weight: 300;
    font-style: italic;
    color: var(--color-chalk);
    line-height: 1.6;
    margin-bottom: 20px;
    border-left: 2px solid var(--color-gunmetal);
    padding-left: 16px;
}

.pkg-section__body {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--color-smoke);
    margin-bottom: 20px;
}

.pkg-section__timeline {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-smoke);
    margin-bottom: 32px;
}

/* Deliverables */
.pkg-deliverables {
    background: var(--color-carbon);
    border: 0.5px solid var(--color-gunmetal);
    padding: 36px 40px;
}

.section--carbon .pkg-deliverables {
    background: var(--color-void);
}

.pkg-deliverables__label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-smoke);
    margin-bottom: 24px;
}

.pkg-deliverables__list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pkg-deliverables__list li {
    font-size: 15px;
    font-weight: 300;
    color: var(--color-chalk);
    line-height: 1.6;
    padding: 12px 0;
    border-bottom: 0.5px solid var(--color-gunmetal);
    padding-left: 20px;
    position: relative;
}

.pkg-deliverables__list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--color-smoke);
    font-size: 12px;
}

.pkg-deliverables__list li:last-child {
    border-bottom: none;
}

.pkg-deliverables__note {
    font-size: 12px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.6;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 0.5px solid var(--color-gunmetal);
}

.pkg-deliverables__note a {
    color: var(--color-chalk);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pkg-deliverables__smallprint {
    font-size: 13px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.6;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 0.5px solid var(--color-gunmetal);
}

/* ---- Package Tier Navigation ------------------------------- */
.pkg-tier-nav {
    border-top: 0.5px solid var(--color-gunmetal);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.pkg-tier-nav__inner {
    display: flex;
    align-items: stretch;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 40px;
}

.pkg-tier-nav__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 40px;
    gap: 4px;
    transition: background var(--transition-fast);
    flex: 1;
}

.pkg-tier-nav__item:hover {
    background: rgba(255,255,255,0.03);
}

.pkg-tier-nav__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-chalk);
    letter-spacing: 0.04em;
}

.pkg-tier-nav__sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-smoke);
    letter-spacing: 0.06em;
}

.pkg-tier-nav__divider {
    width: 0.5px;
    background: var(--color-gunmetal);
    flex-shrink: 0;
    align-self: stretch;
}

/* ---- Package Tier Header ----------------------------------- */
.pkg-tier-header {
    padding: 56px 0 40px;
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.pkg-tier-header .eyebrow {
    display: block;
    margin-bottom: 12px;
}

.pkg-tier-header__desc {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-smoke);
    max-width: 560px;
}

/* ---- Price — coming soon variant --------------------------- */
.pkg-section__price--tbc {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-smoke);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 0.5px solid var(--color-gunmetal);
    display: inline-block;
    padding: 6px 14px;
    margin-bottom: 24px;
}

/* ---- Mode Partner ------------------------------------------ */
.mode-partner {
    padding: var(--section-padding-top) 0 var(--section-padding-bottom);
    border-top: 0.5px solid var(--color-gunmetal);
}

.mode-partner__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.mode-partner__heading {
    font-size: clamp(36px, 4vw, 64px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.0;
    margin-bottom: 16px;
}

.mode-partner__price {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-volt);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.mode-partner__tagline {
    font-size: 18px;
    font-weight: 400;
    color: var(--color-chalk);
    font-style: italic;
    margin-bottom: 24px;
    line-height: 1.5;
}

.mode-partner__body {
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    margin-bottom: 16px;
}

.mode-partner__body:last-of-type {
    margin-bottom: 32px;
}

/* ---- Bundle Callout ---------------------------------------- */
.bundle-callout {
    border-top: 0.5px solid var(--color-gunmetal);
    border-bottom: 0.5px solid var(--color-gunmetal);
    padding: 56px 0;
}

.bundle-callout__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    border-left: 2px solid var(--color-volt);
    padding-left: 32px;
}

.bundle-callout__heading {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 10px;
}

.bundle-callout__body {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.6;
}

.bundle-callout__body strong {
    color: var(--color-chalk);
    font-weight: 500;
}

/* ---- FAQ --------------------------------------------------- */
.faq {
    padding: 100px 0 120px;
    border-top: 0.5px solid var(--color-gunmetal);
}

.faq .eyebrow {
    display: block;
    margin-bottom: 20px;
}

.faq__heading {
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: 56px;
}

.faq__list {
    max-width: 800px;
}

.faq__item {
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.faq__question {
    width: 100%;
    background: none;
    border: none;
    padding: 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-chalk);
    text-align: left;
    transition: color var(--transition-fast);
}

.faq__question:hover {
    color: var(--color-white);
}

.faq__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
}

.faq__icon::before,
.faq__icon::after {
    content: '';
    position: absolute;
    background: var(--color-smoke);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.faq__icon::before {
    width: 12px;
    height: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.faq__icon::after {
    width: 1px;
    height: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.faq__question[aria-expanded="true"] .faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.faq__answer {
    padding: 0 40px 24px 0;
}

.faq__answer p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--color-smoke);
}

/* ---- FAQ standalone page ------------------------------------ */
.faq-cat-nav {
    border-top: 0.5px solid var(--color-gunmetal);
    border-bottom: 0.5px solid var(--color-gunmetal);
    padding: 0;
}

.faq-cat-nav__inner {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.faq-cat-nav__item {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-smoke);
    padding: 20px 32px;
    transition: color var(--transition-fast);
    border-right: 0.5px solid var(--color-gunmetal);
}

.faq-cat-nav__item:first-child {
    padding-left: 0;
}

.faq-cat-nav__item:hover {
    color: var(--color-chalk);
}

.faq-cat-nav__sep {
    display: none;
}

.faq-cat {
    padding: 80px 0 100px;
    border-top: 0.5px solid var(--color-gunmetal);
}

.faq-cat__inner {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 64px;
    align-items: start;
}

.faq-cat__label {
    padding-top: 6px;
    position: sticky;
    top: 100px;
}

.faq-cta {
    border-top: 0.5px solid var(--color-gunmetal);
    padding: 100px 0 120px;
    text-align: center;
}

.faq-cta__heading {
    font-size: 40px;
    font-weight: 600;
    color: var(--color-white);
    margin: 0 0 16px;
}

.faq-cta__body {
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    margin: 0 0 40px;
}

@media (max-width: 768px) {
    .faq-cat-nav__inner {
        flex-wrap: wrap;
    }

    .faq-cat-nav__item {
        padding: 16px 20px;
        font-size: 11px;
    }

    .faq-cat__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .faq-cat__label {
        position: static;
    }
}

/* ---- WP Forms — dark theme override ------------------------ */
.wpforms-container,
.wpforms-form {
    font-family: 'Exo', sans-serif !important;
}

/* Force all WPForms fields to full width — consistent alignment */
div.wpforms-container-full .wpforms-form input.wpforms-field-small,
div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form input.wpforms-field-large,
div.wpforms-container-full .wpforms-form select.wpforms-field-small,
div.wpforms-container-full .wpforms-form select.wpforms-field-medium,
div.wpforms-container-full .wpforms-form select.wpforms-field-large,
div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-small,
div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-medium,
div.wpforms-container-full .wpforms-form .wpforms-field-row.wpforms-field-large {
    max-width: 100% !important;
    width: 100% !important;
}

/* Field labels */
.wpforms-form .wpforms-field-label {
    font-family: 'Exo', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--color-smoke) !important;
    margin-bottom: 8px !important;
}

/* All inputs, textareas, selects */
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="url"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="number"],
.wpforms-form input[type="password"],
.wpforms-form textarea,
.wpforms-form select {
    background: var(--color-carbon) !important;
    border: 0.5px solid var(--color-gunmetal) !important;
    border-radius: 2px !important;
    color: var(--color-chalk) !important;
    font-family: 'Exo', sans-serif !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    padding: 14px 16px !important;
    height: auto !important;
    min-height: 50px !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    outline: none !important;
    transition: border-color 200ms ease-out !important;
    width: 100% !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.wpforms-form select option {
    background: var(--color-carbon) !important;
    color: var(--color-chalk) !important;
}

.wpforms-form input:focus,
.wpforms-form textarea:focus,
.wpforms-form select:focus {
    border-color: var(--color-smoke) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Placeholder text */
.wpforms-form input::placeholder,
.wpforms-form textarea::placeholder {
    color: var(--color-dark-grey) !important;
    font-weight: 300 !important;
}

/* Select dropdown arrow */
.wpforms-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    padding-right: 40px !important;
}

/* Phone field flag wrapper */
.wpforms-form .wpforms-smart-phone-field,
.wpforms-form .intl-tel-input,
.wpforms-form .iti {
    width: 100% !important;
}

.wpforms-form .iti__flag-container,
.wpforms-form .iti__selected-flag {
    background: var(--color-carbon) !important;
    border-right: 0.5px solid var(--color-gunmetal) !important;
}

.wpforms-form .iti__selected-flag:hover {
    background: var(--color-gunmetal) !important;
}

/* Push phone input text clear of the flag selector */
.wpforms-form .iti input[type="tel"],
.wpforms-form .iti input[type="text"] {
    padding-left: 56px !important;
}

/* File upload — drag & drop zone */
.wpforms-form .wpforms-field-file-upload input[type="file"] {
    background: var(--color-carbon) !important;
    border: 0.5px dashed var(--color-gunmetal) !important;
    color: var(--color-smoke) !important;
    padding: 20px 16px !important;
    cursor: pointer !important;
    width: 100% !important;
}

.wpforms-form .wpforms-field-file-upload .wpforms-file-upload-container,
.wpforms-form .wpforms-uploader,
.wpforms-form .wp-uploader,
.wpforms-form .plupload-upload-uic,
.wpforms-form .moxie-shim,
.wpforms-form .html5-upload,
.wpforms-form .dz-default,
.wpforms-form .dropzone,
.wpforms-form .wpforms-field-file-upload > div {
    background: var(--color-carbon) !important;
    background-color: var(--color-carbon) !important;
    border: 0.5px dashed var(--color-gunmetal) !important;
    border-radius: 2px !important;
    color: var(--color-smoke) !important;
}

.wpforms-form .wpforms-file-upload-container *,
.wpforms-form .wpforms-uploader * {
    background: transparent !important;
    color: var(--color-smoke) !important;
    font-family: 'Exo', sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    text-align: left !important;
}

.wpforms-form .wpforms-file-upload-container,
.wpforms-form .wpforms-uploader {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 20px 16px !important;
    text-align: left !important;
}

/* Force all inner wrappers flush left */
.wpforms-form .wpforms-field-file-upload .wpforms-file-upload-container > *,
.wpforms-form .wpforms-field-file-upload .wpforms-uploader > *,
.wpforms-form .wpforms-field-file-upload p,
.wpforms-form .wpforms-field-file-upload span,
.wpforms-form .wpforms-field-file-upload div {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    width: auto !important;
}

.wpforms-form .wpforms-field-file-upload svg,
.wpforms-form .wpforms-file-upload-container svg,
.wpforms-form .wpforms-uploader svg {
    display: none !important;
}

.wpforms-form .wpforms-file-upload-container a,
.wpforms-form .wpforms-uploader a {
    color: var(--color-chalk) !important;
    text-decoration: underline !important;
}

.wpforms-form .wpforms-field-file-upload svg,
.wpforms-form .wpforms-file-upload-container svg {
    stroke: var(--color-smoke) !important;
    fill: none !important;
}

/* Submit button */
.wpforms-form .wpforms-submit,
.wpforms-form button[type="submit"] {
    background: var(--color-volt) !important;
    color: var(--color-void) !important;
    border: none !important;
    border-radius: 2px !important;
    font-family: 'Exo', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 16px 40px !important;
    cursor: pointer !important;
    transition: background 200ms ease-out !important;
    box-shadow: none !important;
    width: auto !important;
}

.wpforms-form .wpforms-submit:hover,
.wpforms-form button[type="submit"]:hover {
    background: var(--color-volt-hover) !important;
}

/* Field spacing */
.wpforms-form .wpforms-field {
    padding: 0 0 24px !important;
}

/* Error states */
.wpforms-form .wpforms-field-container input.wpforms-error,
.wpforms-form .wpforms-field-container textarea.wpforms-error,
.wpforms-form .wpforms-field-container select.wpforms-error {
    border-color: #ff4444 !important;
}

.wpforms-form label.wpforms-error {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #ff4444 !important;
    margin-top: 6px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Confirmation message */
.wpforms-confirmation-container-full {
    background: var(--color-carbon) !important;
    border: 0.5px solid var(--color-gunmetal) !important;
    border-radius: 2px !important;
    padding: 32px !important;
    color: var(--color-chalk) !important;
    font-family: 'Exo', sans-serif !important;
    font-size: 16px !important;
    font-weight: 300 !important;
}

/* Remove any WP Forms default background wrappers */
.wpforms-form .wpforms-field-container,
.wpforms-container-full {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Name field — first/last sub-fields side by side */
.wpforms-form .wpforms-field-name .wpforms-field-row {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Remove WPForms clearfix pseudo-elements from flex flow — they become 0px flex items
   that trigger the column-gap and shift the first real block 16px to the right */
.wpforms-form .wpforms-field-name .wpforms-field-row::before,
.wpforms-form .wpforms-field-name .wpforms-field-row::after {
    display: none !important;
}

.wpforms-form .wpforms-field-name .wpforms-field-row-block {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
}

/* Ensure WPForms half-width override doesn't break layout */
.wpforms-form .wpforms-field-name .wpforms-field-row-block.wpforms-one-half,
.wpforms-form .wpforms-field-name .wpforms-field-row-block.wpforms-first,
.wpforms-form .wpforms-field-name .wpforms-field-row-block.wpforms-last {
    flex: 1 1 0% !important;
    width: auto !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Override WPForms' div.wpforms-container-full specificity for name field size */
div.wpforms-container-full .wpforms-form .wpforms-field-name .wpforms-field-row.wpforms-field-medium,
div.wpforms-container-full .wpforms-form .wpforms-field-name .wpforms-field-row.wpforms-field-large,
div.wpforms-container-full .wpforms-form .wpforms-field-name .wpforms-field-row {
    max-width: 100% !important;
    width: 100% !important;
    justify-content: flex-start !important;
}

.wpforms-form .wpforms-field-name .wpforms-field-row-block input[type="text"] {
    width: 100% !important;
    display: block !important;
}

.wpforms-form .wpforms-field-name .wpforms-field-row-block .wpforms-field-label-inline {
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: var(--color-dark-grey) !important;
    margin-top: 6px !important;
    display: block !important;
}

/* Required asterisk — volt */
.wpforms-form .wpforms-field-label .wpforms-required-label,
.wpforms-form .wpforms-field-label-inline .wpforms-required-label {
    color: var(--color-volt) !important;
    font-weight: 500 !important;
    margin-left: 2px !important;
}

/* Checkbox and radio — dark custom styling */
.wpforms-form .wpforms-field-checkbox input[type="checkbox"],
.wpforms-form .wpforms-field-radio input[type="radio"],
.wpforms-form .wpforms-field-gdpr-checkbox input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    background: var(--color-carbon) !important;
    border: 0.5px solid var(--color-gunmetal) !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    position: relative !important;
    top: 2px !important;
    margin-right: 10px !important;
    transition: border-color 200ms ease-out !important;
    flex-shrink: 0 !important;
}

.wpforms-form .wpforms-field-radio input[type="radio"] {
    border-radius: 50% !important;
}

.wpforms-form .wpforms-field-checkbox input[type="checkbox"]:checked,
.wpforms-form .wpforms-field-gdpr-checkbox input[type="checkbox"]:checked {
    background: var(--color-volt) !important;
    border-color: var(--color-volt) !important;
}

.wpforms-form .wpforms-field-checkbox input[type="checkbox"]:checked::after,
.wpforms-form .wpforms-field-gdpr-checkbox input[type="checkbox"]:checked::after {
    content: '' !important;
    display: block !important;
    width: 5px !important;
    height: 9px !important;
    border: 2px solid var(--color-void) !important;
    border-top: none !important;
    border-left: none !important;
    transform: rotate(45deg) !important;
    position: absolute !important;
    top: 2px !important;
    left: 5px !important;
}

.wpforms-form .wpforms-field-radio input[type="radio"]:checked {
    background: var(--color-volt) !important;
    border-color: var(--color-volt) !important;
    box-shadow: inset 0 0 0 3px var(--color-carbon) !important;
}

.wpforms-form .wpforms-field-checkbox li,
.wpforms-form .wpforms-field-radio li,
.wpforms-form .wpforms-field-gdpr-checkbox li {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 12px !important;
    list-style: none !important;
}

.wpforms-form .wpforms-field-checkbox label,
.wpforms-form .wpforms-field-radio label,
.wpforms-form .wpforms-field-gdpr-checkbox label {
    font-size: 15px !important;
    font-weight: 300 !important;
    color: var(--color-chalk) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: pointer !important;
    line-height: 1.5 !important;
}

/* Submit container — left-align, top margin */
.wpforms-form .wpforms-submit-container {
    padding: 8px 0 0 !important;
    background: transparent !important;
    text-align: left !important;
}

/* WPForms notices / alerts */
.wpforms-form .wpforms-notice,
.wpforms-form .wpforms-alert {
    background: var(--color-carbon) !important;
    border: 0.5px solid var(--color-gunmetal) !important;
    border-radius: 2px !important;
    color: var(--color-chalk) !important;
    font-family: 'Exo', sans-serif !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    padding: 16px 20px !important;
    margin-bottom: 24px !important;
}

.wpforms-form .wpforms-notice-error,
.wpforms-form .wpforms-alert-danger {
    border-color: #ff4444 !important;
    color: #ff4444 !important;
}

.wpforms-form .wpforms-notice-success,
.wpforms-form .wpforms-alert-success {
    border-color: var(--color-volt) !important;
}

/* Page break / multi-step indicators */
.wpforms-form .wpforms-page-indicator {
    background: transparent !important;
    border-bottom: 0.5px solid var(--color-gunmetal) !important;
    margin-bottom: 32px !important;
    padding-bottom: 16px !important;
}

.wpforms-form .wpforms-page-indicator-page-title {
    color: var(--color-smoke) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

.wpforms-form .wpforms-page-indicator-steps {
    color: var(--color-dark-grey) !important;
    font-size: 11px !important;
}

/* Mobile — stack name sub-fields */
@media (max-width: 480px) {
    .wpforms-form .wpforms-field-name .wpforms-field-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
}

/* ---- Careers ------------------------------------------------ */
.careers-roles {
    padding: 80px 0 100px;
    border-top: 0.5px solid var(--color-gunmetal);
}

.careers-roles__heading {
    font-size: 40px;
    font-weight: 600;
    color: var(--color-white);
    margin: 12px 0 48px;
}

.careers-roles__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.careers-role {
    background: var(--color-void);
    border: 0.5px solid var(--color-gunmetal);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.careers-role__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.careers-role__title {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-white);
    margin: 0;
}

.careers-role__type {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-smoke);
    white-space: nowrap;
}

.careers-role__body {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--color-smoke);
    margin: 0;
}

.careers-role__requirements {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.careers-role__requirements li {
    font-size: 14px;
    font-weight: 300;
    color: var(--color-chalk);
    padding-left: 16px;
    position: relative;
    line-height: 1.6;
}

.careers-role__requirements li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--color-smoke);
}

.careers-role .btn {
    align-self: flex-start;
    margin-top: auto;
}

/* General application */
.careers-general {
    padding: 80px 0;
    border-top: 0.5px solid var(--color-gunmetal);
}

.careers-general__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.careers-general__text {
    max-width: 580px;
}

.careers-general__heading {
    font-size: 36px;
    font-weight: 600;
    color: var(--color-white);
    margin: 12px 0 16px;
}

.careers-general__body {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--color-smoke);
    margin: 0;
}

/* Application form */
.careers-form {
    padding: 80px 0 120px;
    border-top: 0.5px solid var(--color-gunmetal);
}

.careers-form__inner {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.careers-form__top {
    max-width: 640px;
}

.careers-form__bottom {
    width: 100%;
    max-width: 720px;
}

.careers-form__heading {
    font-size: 36px;
    font-weight: 600;
    color: var(--color-white);
    margin: 12px 0 16px;
}

.careers-form__body {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--color-smoke);
    margin: 0 0 16px;
}

.careers-form__detail {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--color-dark-grey);
    margin: 0;
}

.careers-form__placeholder {
    padding: 32px;
    border: 0.5px solid var(--color-gunmetal);
}

.careers-form__placeholder p {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--color-smoke);
    margin: 0;
}

.careers-form__placeholder a {
    color: var(--color-chalk);
}

@media (max-width: 900px) {
    .careers-roles__grid {
        grid-template-columns: 1fr;
    }

    .careers-form__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

/* ---- Careers — listing page -------------------------------- */
.careers-listing {
    padding: 80px 0 100px;
    border-top: 0.5px solid var(--color-gunmetal);
}

.careers-listing__heading {
    font-size: 40px;
    font-weight: 600;
    color: var(--color-white);
    margin: 12px 0 48px;
}

.careers-listing__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.careers-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px;
    background: var(--color-void);
    border: 0.5px solid var(--color-gunmetal);
    text-decoration: none;
    transition: border-color 200ms ease-out, background 200ms ease-out;
}

.careers-card:hover {
    background: #161616;
    border-color: var(--color-smoke);
}

.careers-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.careers-card__title {
    font-size: 28px;
    font-weight: 600;
    color: var(--color-white);
    margin: 0;
}

.careers-card__type {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-smoke);
    white-space: nowrap;
}

.careers-card__body {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--color-smoke);
    margin: 0;
    flex: 1;
}

.careers-card__cta {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--color-chalk);
    margin-top: auto;
    transition: color 200ms ease-out;
}

.careers-card:hover .careers-card__cta {
    color: var(--color-white);
}

.careers-back a {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-smoke);
    text-decoration: none;
    transition: color 200ms ease-out;
}

.careers-back a:hover {
    color: var(--color-chalk);
}

@media (max-width: 768px) {
    .careers-listing__grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Careers — full role sections -------------------------- */
.careers-role-full {
    padding: 80px 0 100px;
    border-top: 0.5px solid var(--color-gunmetal);
}

.careers-role-full__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 860px;
}

.careers-role-full__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.careers-role-full__title {
    font-size: 48px;
    font-weight: 600;
    color: var(--color-white);
    margin: 10px 0 0;
    line-height: 1.05;
}

.careers-role-full__lead {
    font-size: 22px;
    font-weight: 400;
    color: var(--color-chalk);
    line-height: 1.5;
    margin: 0;
}

.careers-role-full__body {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--color-smoke);
    margin: 0;
}

.careers-role-full__sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    padding-top: 8px;
}

.careers-role-full__section-heading {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-smoke);
    margin: 0 0 20px;
}

.careers-role__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.careers-role__list li {
    font-size: 15px;
    font-weight: 300;
    color: var(--color-chalk);
    padding-left: 18px;
    position: relative;
    line-height: 1.65;
}

.careers-role__list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--color-smoke);
}

/* Fit columns */
.careers-role-full__fit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    border-top: 0.5px solid var(--color-gunmetal);
    padding-top: 40px;
}

.careers-role-full__fit-col {
    padding: 32px;
    background: var(--color-void);
    border: 0.5px solid var(--color-gunmetal);
}

.section--carbon .careers-role-full__fit-col {
    background: var(--color-carbon);
}

.careers-role-full__fit-heading {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-smoke);
    margin: 0 0 20px;
}

.careers-fit__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.careers-fit__list li {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.65;
    padding-left: 18px;
    position: relative;
}

.careers-fit__list--yes li {
    color: var(--color-chalk);
}

.careers-fit__list--yes li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-smoke);
    font-size: 12px;
}

.careers-fit__list--no li {
    color: var(--color-smoke);
    text-decoration: line-through;
    text-decoration-color: var(--color-smoke);
}

.careers-fit__list--no li::before {
    content: '✗';
    position: absolute;
    left: 0;
    color: var(--color-dark-grey);
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
}

.careers-general__action {
    flex-shrink: 0;
    max-width: 640px;
}

@media (max-width: 900px) {
    .careers-role-full__sections,
    .careers-role-full__fit {
        grid-template-columns: 1fr;
    }

    .careers-role-full__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .careers-role-full__title {
        font-size: 36px;
    }
}

/* ---- Web Care — Maintenance + Hosting ---------------------- */
.web-care-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 40px;
}

.web-care-card {
    background: var(--color-carbon);
    border: 0.5px solid var(--color-gunmetal);
    padding: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.web-care-card--featured {
    border-color: var(--color-volt);
}

.web-care-card__badge {
    position: absolute;
    top: -1px;
    right: 32px;
    background: var(--color-volt);
    color: var(--color-void);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
}

.web-care-card__top .pkg-section__price {
    font-size: 32px;
    margin: 8px 0 12px;
}

.web-care-card__top .pkg-section__body {
    font-size: 15px;
    margin-bottom: 16px;
}

.web-care-card__deliverables {
    border-top: 0.5px solid var(--color-gunmetal);
    padding-top: 24px;
    margin-top: 0;
}

/* SLA table */
.web-care-sla {
    border-top: 0.5px solid var(--color-gunmetal);
    padding-top: 24px;
}

.web-care-sla__label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-smoke);
    margin: 0 0 12px;
}

.web-care-sla__row {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 0.5px solid var(--color-gunmetal);
    font-size: 13px;
}

.web-care-sla__row:last-child { border-bottom: none; }

.web-care-sla__tier {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 2px;
    text-align: center;
}

.web-care-sla__tier--critical { background: rgba(255,59,48,0.15); color: #FF3B30; }
.web-care-sla__tier--major    { background: rgba(255,159,10,0.15); color: #FF9F0A; }
.web-care-sla__tier--minor    { background: rgba(102,102,102,0.15); color: var(--color-smoke); }

.web-care-sla__desc { color: var(--color-smoke); }
.web-care-sla__time { color: var(--color-chalk); font-weight: 500; font-size: 12px; white-space: nowrap; }

.web-care-note {
    font-size: 13px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    border-top: 0.5px solid var(--color-gunmetal);
    padding-top: 24px;
    margin: 0;
}

@media (max-width: 900px) {
    .web-care-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .web-care-card { padding: 28px 20px; }
    .web-care-sla__row { grid-template-columns: 64px 1fr; }
    .web-care-sla__time { grid-column: 2; }
}

/* ---- Services Bridge (bottom of packages page) ------------- */
.services-bridge {
    border-top: 0.5px solid var(--color-gunmetal);
    padding: 80px 0;
}

.services-bridge__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.services-bridge__left {
    max-width: 600px;
}

.services-bridge__heading {
    font-size: 32px;
    font-weight: 600;
    color: var(--color-white);
    margin: 12px 0 16px;
    line-height: 1.15;
}

.services-bridge__body {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--color-smoke);
    margin: 0;
}

.services-bridge__right {
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .services-bridge__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }
}

/* ---- About — Story ----------------------------------------- */
.about-story {
    padding: 80px 0;
    border-top: 0.5px solid var(--color-gunmetal);
}

.about-story__inner {
    display: grid;
    grid-template-columns: 55% 1fr;
    gap: 80px;
    align-items: center;
}

.about-story__heading {
    font-size: clamp(20px, 2.2vw, 30px);
    font-weight: 400;
    color: var(--color-chalk);
    line-height: 1.6;
}

.about-story__body p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--color-smoke);
    margin-bottom: 20px;
}

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

.about-story__photo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    position: relative;
}

/* Gradient fade — dissolves top and right crop edges into section bg */
.about-story__photo-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, var(--color-carbon) 0%, transparent 35%);
    pointer-events: none;
    z-index: 1;
}

.about-story__photo {
    width: auto;
    max-width: 100%;
    max-height: 360px;
    height: auto;
    display: block;
    border: 0.5px solid var(--color-gunmetal);
}

.about-story__caption {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-smoke);
    margin: 0;
}

/* ---- About — Process -------------------------------------- */
.about-process {
    padding: 80px 0;
    border-top: 0.5px solid var(--color-gunmetal);
}

.about-process .eyebrow {
    display: block;
    margin-bottom: 16px;
}

.about-process__heading {
    font-size: clamp(24px, 2.8vw, 40px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: 56px;
}

.about-process__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--color-gunmetal);
    border: 0.5px solid var(--color-gunmetal);
}

.about-process__step {
    background: var(--color-void);
    padding: 40px 36px;
}

.about-process__num {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--color-gunmetal);
    margin-bottom: 20px;
}

.about-process__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-chalk);
    margin-bottom: 12px;
}

.about-process__body {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--color-smoke);
}

/* ---- About — Values --------------------------------------- */
.about-values {
    padding: 80px 0 100px;
    border-top: 0.5px solid var(--color-gunmetal);
}

.about-values .eyebrow {
    display: block;
    margin-bottom: 40px;
}

.about-values__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--color-gunmetal);
    border: 0.5px solid var(--color-gunmetal);
}

.about-values__item {
    background: var(--color-carbon);
    padding: 40px 40px;
}

.about-values__title {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 16px;
}

.about-values__body {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--color-smoke);
}

/* ---- Founders Pages --------------------------------------- */

.founders-hero__ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.founders-pain {
    padding: var(--section-padding);
}

.founders-pain__heading {
    font-size: clamp(13px, 1vw, 13px);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-volt);
    margin-bottom: 48px;
}

.founders-pain__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.founders-pain__item {
    padding: 28px 0;
    border-bottom: 0.5px solid var(--color-gunmetal);
    font-size: clamp(20px, 2.5vw, 36px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.2;
    list-style: none;
}

.founders-pain__item:first-child {
    border-top: 0.5px solid var(--color-gunmetal);
}

.founders-pain__quote {
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.2;
    font-style: normal;
}

.founders-diff__body {
    font-size: 20px;
    font-weight: 500;
    line-height: 2;
    color: var(--color-chalk);
    max-width: 640px;
    margin-bottom: 64px;
}

.founders-cta__secondary {
    display: inline-block;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 400;
    color: var(--color-smoke);
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: color var(--transition-fast);
}

.founders-cta__secondary:hover {
    color: var(--color-chalk);
}

/* ---- Contact Section --------------------------------------- */
.contact-section {
    padding: 80px 0 120px;
    border-top: 0.5px solid var(--color-gunmetal);
}

.contact-section__grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 100px;
    align-items: start;
}

/* Form */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-smoke);
}

.form-required {
    color: var(--color-chalk);
}

.form-optional {
    color: var(--color-gunmetal);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 300;
    font-size: 11px;
}

.form-field input,
.form-field textarea,
.form-field select {
    background: var(--color-carbon);
    border: 0.5px solid var(--color-gunmetal);
    border-radius: 0;
    color: var(--color-chalk);
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 300;
    padding: 14px 16px;
    width: 100%;
    transition: border-color var(--transition-fast);
    appearance: none;
    -webkit-appearance: none;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    outline: none;
    border-color: var(--color-chalk);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--color-smoke);
}

.form-field textarea {
    resize: vertical;
    min-height: 120px;
}

.form-select-wrap {
    position: relative;
}

.form-select-wrap::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 5px;
    border-left: 1px solid var(--color-smoke);
    border-bottom: 1px solid var(--color-smoke);
    transform: translateY(-70%) rotate(-45deg);
    pointer-events: none;
}

.form-field select option {
    background: var(--color-carbon);
    color: var(--color-chalk);
}

.form-submit {
    align-self: flex-start;
}

.form-status {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    padding: 0;
}

.form-status.is-success {
    color: #7fff7f;
}

.form-status.is-error {
    color: #ff7f7f;
}

/* Contact details */
.contact-details {
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.contact-details__block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-details__link {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-chalk);
    text-decoration: none;
    transition: color var(--transition-fast);
    display: block;
}

.contact-details__link:hover {
    color: var(--color-white);
}

.contact-details__address {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.7;
}

.contact-details__meet-link {
    display: inline-block;
    margin-top: 16px;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 13px;
    color: var(--color-dark-grey);
    text-decoration: none;
    border-bottom: 0.5px solid var(--color-gunmetal);
    padding-bottom: 1px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.contact-details__meet-link:hover {
    color: var(--color-chalk);
    border-color: var(--color-smoke);
}

/* ── Label above each block ──────────────────────────────── */
.contact-details__label {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-dark-grey);
}

/* ── Phone — large + prominent ───────────────────────────── */
.contact-details__phone {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 22px;
    color: var(--color-chalk);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: color var(--transition-fast);
    display: block;
}

.contact-details__phone:hover {
    color: var(--color-white);
}

/* ── Divider between contact info and access ladder ─────── */
.contact-details__divider {
    height: 0.5px;
    background: var(--color-gunmetal);
    margin: 0;
}

/* ── Access ladder links (chat / talk / meet) ────────────── */
.contact-details__access-link {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 0;
    border-bottom: 0.5px solid var(--color-gunmetal);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.contact-details__access-link:first-of-type {
    border-top: 0.5px solid var(--color-gunmetal);
    margin-top: 4px;
}

.contact-details__access-link:hover {
    opacity: 0.75;
}

.contact-details__access-title {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 14px;
    color: var(--color-chalk);
}

.contact-details__access-meta {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 12px;
    color: var(--color-smoke);
}

/* ── Confirmation state ──────────────────────────────────── */
.contact-confirm {
    padding: 48px 0;
}

.contact-confirm__heading {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 32px;
    color: var(--color-white);
    margin: 16px 0 12px;
}

.contact-confirm__body {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 16px;
    color: var(--color-smoke);
    line-height: 1.7;
    margin: 0;
}

.contact-details__social {
    display: flex;
    gap: 20px;
}

.contact-details__social-link {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--color-smoke);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.contact-details__social-link:hover {
    color: var(--color-chalk);
}

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

/* ---- Responsive -------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --section-padding-top:    64px;
        --section-padding-bottom: 64px;
    }

    .header-inner {
        padding: 16px 24px;
    }

    .site-nav {
        display: none;
    }

    .nav-hamburger {
        display: flex;
    }

    .container {
        padding: 0 24px;
    }

    /* Hero mobile */
    .hero {
        padding: 80px 0 64px;
        align-items: flex-start;
    }

    .hero__inner {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-top: 80px;
    }

    .hero__heading {
        font-size: 40px;
    }

    .hero__body {
        font-size: 16px;
    }

    .hero__ctas {
        flex-direction: column;
        width: 100%;
    }

    .hero__ctas .btn {
        width: 100%;
        justify-content: center;
    }

    .hero__media {
        order: -1;
        min-height: 280px;
    }

    .hero__graphic {
        padding: 40px 24px;
        justify-content: flex-start;
    }

    .hero__result-card {
        max-width: 100%;
    }

    .hero__result-card__num {
        font-size: 56px;
    }

    /* Page hero */
    .page-hero {
        padding: 152px 0 64px;
    }

    /* About */
    .about-story__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-process__steps {
        grid-template-columns: 1fr;
    }

    .about-values__grid {
        grid-template-columns: 1fr;
    }

    .about-values__item {
        padding: 32px 28px;
    }

    /* Contact */
    .contact-section__grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    /* Package sections */
    .pkg-section__grid,
    .pkg-section__grid--reverse {
        grid-template-columns: 1fr;
        direction: ltr;
        gap: 48px;
    }

    /* Package tier nav */
    .pkg-tier-nav__inner {
        flex-direction: column;
        padding: 0;
    }

    .pkg-tier-nav__item {
        padding: 20px 24px;
        border-bottom: 0.5px solid var(--color-gunmetal);
    }

    .pkg-tier-nav__item:last-child {
        border-bottom: none;
    }

    .pkg-tier-nav__divider {
        display: none;
    }

    /* Bundle callout */
    .bundle-callout__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Proof bar — marquee runs same on mobile, just slightly faster */
    .proof-bar__inner {
        animation-duration: 20s;
    }

    .proof-bar__item {
        padding: 20px 32px;
        font-size: 11px;
    }

    /* Problem */
    .problem__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .problem__cards {
        grid-template-columns: 1fr;
    }

    /* Packages preview */
    .packages-preview__grid {
        grid-template-columns: 1fr;
    }

    .packages-preview__heading {
        margin-bottom: 40px;
    }

    /* Why Mode */
    .why-mode__grid {
        grid-template-columns: 1fr;
    }

    /* Final CTA */
    .final-cta__inner {
        align-items: flex-start;
        text-align: left;
    }

    .footer-inner {
        padding: 40px 24px 28px;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .footer-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px 28px;
    }

    .footer-cta-col {
        text-align: left;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .header-inner {
        padding: 14px 20px;
    }

    .container {
        padding: 0 20px;
    }
}

/* ---- Speed Stats Section ----------------------------------- */
.speed-stats {
    border-top: 0.5px solid var(--color-gunmetal);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.speed-stats__inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding: 0 40px;
    max-width: var(--max-width);
    margin: 0 auto;
}

.speed-stat {
    flex: 1;
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.speed-stat__number {
    font-size: clamp(48px, 6vw, 80px);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.0;
    letter-spacing: -0.02em;
}

.speed-stat__times {
    font-size: 0.7em;
    color: var(--color-volt);
}

.speed-stat__unit {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-volt);
    margin-top: 4px;
    margin-bottom: 8px;
}

.speed-stat__label {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-smoke);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.speed-stat__divider {
    width: 0.5px;
    background: var(--color-gunmetal);
    align-self: stretch;
    flex-shrink: 0;
}

/* ---- Case Study Teaser ------------------------------------- */
.case-study-teaser {
    padding: var(--section-padding-top) 0 var(--section-padding-bottom);
    border-top: 0.5px solid var(--color-gunmetal);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.case-study-teaser .eyebrow {
    display: block;
    margin-bottom: 40px;
}

.case-study-teaser__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.case-study-teaser__heading {
    font-size: clamp(24px, 2.8vw, 40px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.15;
    margin-bottom: 20px;
}

.case-study-teaser__body {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    margin-bottom: 32px;
}

.case-study-teaser__stats {
    display: flex;
    gap: 32px;
    margin-bottom: 36px;
}

.cs-mini-stat__num {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.0;
    margin-bottom: 4px;
}

.cs-mini-stat__label {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-smoke);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.case-study-teaser__media {
    aspect-ratio: 4/3;
    background: var(--color-void);
    border: 0.5px solid var(--color-gunmetal);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}

.case-study-teaser__brand {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-chalk);
    letter-spacing: 0.04em;
}

.case-study-teaser__sector {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-smoke);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ---- Work Page --------------------------------------------- */
.work-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--color-gunmetal);
    margin-top: 56px;
}

.case-study-card {
    background: var(--color-carbon);
    padding: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.case-study-card--placeholder {
    display: block;
    padding: 40px 56px;
    text-align: center;
    opacity: 0.4;
}

.case-study-card__eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-volt);
    margin-bottom: 16px;
    display: block;
}

.case-study-card__client {
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: 8px;
}

.case-study-card__sector {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-smoke);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 24px;
}

.case-study-card__body {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    margin-bottom: 24px;
}

.case-study-card__deliverables {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-smoke);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.case-study-card__tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.case-study-card__tag {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-chalk);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 0.5px solid var(--color-gunmetal);
    padding: 4px 10px;
}

.case-study-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--color-gunmetal);
    border: 0.5px solid var(--color-gunmetal);
}

.case-study__stat {
    background: var(--color-void);
    padding: 28px 24px;
}

.case-study__stat-number {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.0;
    margin-bottom: 4px;
}

.case-study__stat-label {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-smoke);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ---- Technology Page --------------------------------------- */
.tech-hero {
    padding: var(--section-padding-top) 0 var(--section-padding-bottom);
}

.tech-section {
    padding: var(--section-padding-top) 0 var(--section-padding-bottom);
    border-top: 0.5px solid var(--color-gunmetal);
}

.tech-section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.tech-section__grid--reverse {
    direction: rtl;
}

.tech-section__grid--reverse > * {
    direction: ltr;
}

.tech-section__label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-smoke);
    margin-bottom: 20px;
    display: block;
}

.tech-section__heading {
    font-size: clamp(24px, 2.8vw, 40px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.15;
    margin-bottom: 20px;
}

.tech-section__body {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
}

.tech-stat-callout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0.5px solid var(--color-gunmetal);
    background: var(--color-carbon);
    padding: 56px 40px;
    text-align: center;
    aspect-ratio: 1;
    max-width: 320px;
    margin: 0 auto;
}

.tech-stat-callout__number {
    font-size: clamp(48px, 7vw, 88px);
    font-weight: 700;
    color: var(--color-volt);
    line-height: 1.0;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.tech-stat-callout__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-smoke);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* ---- Blog Page --------------------------------------------- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(30, 30, 30, 0.25);
    border: 0.5px solid rgba(30, 30, 30, 0.3);
    margin-top: 48px;
}

.blog-card {
    background: rgba(14, 14, 14, 0.50);
    padding: 40px 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 0;
    cursor: pointer;
    position: relative;
    transition: background 200ms ease-out;
    text-decoration: none;
}

.blog-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-volt);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms ease-out;
}

.blog-card:hover {
    background: rgba(8, 8, 8, 0.65);
}

.blog-card:hover::before {
    transform: scaleX(1);
}

.blog-card:hover .blog-card__link {
    color: var(--color-volt);
}

.blog-card:hover .blog-card__title {
    color: var(--color-volt);
}

.blog-card__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.blog-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.blog-card__date {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-smoke);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.blog-card__tag {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-volt);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.blog-card__title {
    font-size: 19px;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.3;
    margin-bottom: 14px;
    flex: 1;
}

.blog-card__excerpt {
    font-size: 14px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.7;
    margin-bottom: 28px;
}

.blog-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    gap: 12px;
    padding-top: 20px;
    border-top: 0.5px solid var(--color-gunmetal);
}

.blog-card__link {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-smoke);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition: color 200ms ease-out;
    text-decoration: none;
}

.blog-card__link:hover {
    color: var(--color-volt);
}

.blog-card__author {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 2px;
    flex-shrink: 0;
}

.blog-card__author--human {
    color: var(--color-chalk);
    border: 0.5px solid var(--color-smoke);
    background: transparent;
}

.blog-card__author--ai {
    color: var(--color-smoke);
    border: 0.5px solid var(--color-gunmetal);
    background: transparent;
}

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

@media (max-width: 600px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-card { padding: 28px 24px; }
}

/* ---- Blog Article Pages ------------------------------------ */
.blog-article {
    padding: var(--section-padding-top) 0 var(--section-padding-bottom);
}

.blog-article__inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 40px;
}

.blog-article__back {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-smoke);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 48px;
    transition: color var(--transition-fast);
}

.blog-article__back:hover {
    color: var(--color-chalk);
}

.blog-article__meta {
    margin-bottom: 16px;
}

.blog-article h1 {
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: 32px;
}

.blog-article h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.2;
    margin-top: 48px;
    margin-bottom: 16px;
}

.blog-article p {
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.8;
    margin-bottom: 20px;
}

.blog-article strong {
    color: var(--color-chalk);
    font-weight: 500;
}

.blog-article__cta-box {
    background: var(--color-carbon);
    border: 0.5px solid var(--color-gunmetal);
    border-left: 2px solid var(--color-volt);
    padding: 32px 36px;
    margin-top: 56px;
}

.blog-article__cta-box p {
    font-size: 16px;
    color: var(--color-chalk);
    font-weight: 400;
    margin-bottom: 20px;
}

/* footer-nav duplicate removed — defined above with footer-top */

/* ---- Mobile responsive additions --------------------------- */
@media (max-width: 768px) {
    .speed-stats__inner {
        flex-wrap: wrap;
        padding: 0 24px;
    }
    .speed-stat {
        flex: 0 0 50%;
        padding: 32px 16px;
    }
    .speed-stat__divider {
        display: none;
    }
    .case-study-teaser__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .case-study-card {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px 24px;
    }
    .blog-grid {
        grid-template-columns: 1fr;
    }
    .tech-section__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .tech-section__grid--reverse {
        direction: ltr;
    }
    .case-study-stats {
        grid-template-columns: 1fr 1fr;
    }
    .footer-nav {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ============================================================
   WORK PAGE — FEATURED CASE STUDY (Create Cuts layout)
   ============================================================ */

.work-featured {
    padding: 80px 0 100px;
    border-top: 0.5px solid var(--color-gunmetal);
}

.case-study-card--featured {
    background: var(--color-carbon);
    border: 0.5px solid var(--color-gunmetal);
}

.case-study-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding: 48px 48px 40px;
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.case-study-card__meta .eyebrow {
    margin-bottom: 12px;
}

.case-study-card__name {
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: 8px;
}

.case-study-card__packages {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: 4px;
}

.case-study-card__package-tag {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-smoke);
    border: 0.5px solid var(--color-gunmetal);
    padding: 6px 12px;
    white-space: nowrap;
}

.case-study-card--featured .case-study-card__body {
    /* override the generic single-col rule — two col layout for featured */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: transparent;
    border-bottom: 0.5px solid var(--color-gunmetal);
    margin-bottom: 0;
}

.case-study-card__situation {
    padding: 40px 48px;
    border-right: 0.5px solid var(--color-gunmetal);
}

.case-study-card__what-we-did {
    padding: 40px 48px;
}

.case-study-card__section-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-smoke);
    margin-bottom: 20px;
    display: block;
}

.case-study-card__situation p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.75;
    color: var(--color-smoke);
    margin-bottom: 16px;
}

.case-study-card__situation p:last-child {
    margin-bottom: 0;
}

.case-study-card__deliveries {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.case-study-card__delivery {
    padding: 20px 0;
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.case-study-card__delivery:first-child {
    padding-top: 0;
}

.case-study-card__delivery:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.case-study-card__delivery-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-chalk);
    margin-bottom: 4px;
}

.case-study-card__delivery-time {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-smoke);
    margin-bottom: 10px;
}

.case-study-card__delivery-detail {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--color-smoke);
}

/* Results stats row — 4 columns */
.case-study-card__results {
    padding: 40px 48px 48px;
}

.case-study-card--featured .work-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--color-gunmetal);
    border: 0.5px solid var(--color-gunmetal);
    margin-top: 24px;
}

.case-study-card--featured .case-study__stat {
    background: var(--color-void);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.case-study-card--featured .case-study__stat-number {
    display: block;
    font-size: clamp(24px, 2.8vw, 40px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1;
}

.case-study-card--featured .case-study__stat-label {
    display: block;
    font-size: 13px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
}

/* Coming soon placeholders */
.work-coming-soon {
    padding: 80px 0 100px;
    border-top: 0.5px solid var(--color-gunmetal);
}

.work-coming-soon__intro {
    font-size: 15px;
    font-weight: 300;
    color: var(--color-smoke);
    margin-bottom: 40px;
    max-width: 520px;
}

.work-placeholder-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--color-gunmetal);
    border: 0.5px solid var(--color-gunmetal);
}

.case-study-card--placeholder-new {
    opacity: 0.45;
    background: var(--color-carbon);
    border: none;
}

.case-study-card__placeholder-inner {
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 200px;
}

.case-study-card__coming-soon-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-smoke);
    border: 0.5px solid var(--color-gunmetal);
    padding: 6px 12px;
    align-self: flex-start;
}

.case-study-card__placeholder-text {
    font-size: 15px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.7;
}

/* ============================================================
   TECHNOLOGY PAGE — ADDITIONAL CLASSES
   ============================================================ */

.tech-section__content h2 {
    font-size: clamp(24px, 2.8vw, 40px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: 24px;
}

.blog-listing {
    padding: 0 0 80px;
}

/* ---- Blog Pagination --------------------------------------- */
.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 56px;
}

.blog-pag__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: transparent;
    border: 0.5px solid var(--color-gunmetal);
    border-radius: 2px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--color-smoke);
    cursor: pointer;
    transition: border-color 200ms ease-out, color 200ms ease-out, background 200ms ease-out;
}

.blog-pag__btn:hover:not(:disabled) {
    border-color: var(--color-chalk);
    color: var(--color-chalk);
}

.blog-pag__btn--active {
    background: var(--color-volt);
    border-color: var(--color-volt);
    color: var(--color-void);
}

.blog-pag__btn--active:hover {
    background: var(--color-volt-hover);
    border-color: var(--color-volt-hover);
    color: var(--color-void);
}

.blog-pag__btn--disabled,
.blog-pag__btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ============================================================
   BLOG ARTICLE PAGES (article-* classes)
   ============================================================ */

.article-page {
    padding: 148px 0 100px;
}

.article-back {
    max-width: 720px;
    margin: 0 auto 56px;
}

.article-back__link {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-smoke);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.article-back__link:hover {
    color: var(--color-chalk);
}

.article-body {
    max-width: 720px;
    margin: 0 auto;
}

.article-header {
    margin-bottom: 56px;
    padding-bottom: 48px;
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.article-header .eyebrow {
    margin-bottom: 20px;
}

.article-header__title {
    font-size: clamp(30px, 4vw, 52px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.08;
    margin-bottom: 24px;
}

.article-header__intro {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--color-chalk);
}

.article-content h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.2;
    margin-top: 48px;
    margin-bottom: 18px;
}

.article-content p {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--color-smoke);
    margin-bottom: 20px;
}

.article-content p:last-child {
    margin-bottom: 0;
}

.article-content p strong {
    font-weight: 600;
    color: var(--color-chalk);
}

.article-cta-box {
    margin-top: 64px;
    padding: 36px 40px;
    border: 0.5px solid var(--color-gunmetal);
    background: var(--color-carbon);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.article-cta-box__text {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-chalk);
    line-height: 1.6;
    flex: 1;
    margin-bottom: 0;
}

/* ============================================================
   RESPONSIVE — NEW PAGE ADDITIONS
   ============================================================ */

@media (max-width: 1024px) {
    .case-study-card--featured .work-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* Work page — featured card */
    .case-study-card__header {
        flex-direction: column;
        padding: 32px 24px;
        gap: 24px;
    }

    .case-study-card--featured .case-study-card__body {
        grid-template-columns: 1fr;
    }

    .case-study-card__situation {
        padding: 32px 24px;
        border-right: none;
        border-bottom: 0.5px solid var(--color-gunmetal);
    }

    .case-study-card__what-we-did {
        padding: 32px 24px;
    }

    .case-study-card__results {
        padding: 32px 24px;
    }

    .case-study-card--featured .work-grid {
        grid-template-columns: 1fr 1fr;
    }

    .work-placeholder-grid {
        grid-template-columns: 1fr;
    }

    /* Blog listing */
    .blog-listing {
        padding: 0 0 64px;
    }

    /* Article pages */
    .article-page {
        padding: 152px 0 80px;
    }

    .article-back {
        margin-bottom: 40px;
    }

    .article-cta-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 28px 24px;
    }

    .article-header__title {
        font-size: 28px;
    }

    .article-header__intro {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .case-study-card--featured .work-grid {
        grid-template-columns: 1fr;
    }

    .case-study-card__packages {
        flex-direction: column;
    }
}

/* ---- Work Page — Case Study -------------------------------- */
.cs-feature {
    padding: var(--section-padding-top) 0 var(--section-padding-bottom);
    border-top: 0.5px solid var(--color-gunmetal);
}

.cs-feature__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 48px;
    border-bottom: 0.5px solid var(--color-gunmetal);
    margin-bottom: 56px;
}

.cs-feature__name {
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.0;
    margin-bottom: 10px;
}

.cs-feature__sector {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-smoke);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.cs-feature__tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;
    padding-top: 8px;
    flex-shrink: 0;
}

.cs-tag {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-chalk);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 0.5px solid var(--color-gunmetal);
    padding: 5px 12px;
}

.cs-feature__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.cs-section-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-volt);
    margin-bottom: 20px;
    display: block;
}

.cs-body {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    margin-bottom: 16px;
}

.cs-deliveries {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 0.5px solid var(--color-gunmetal);
}

.cs-delivery {
    padding: 24px 0;
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.cs-delivery__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.cs-delivery__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-chalk);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cs-delivery__time {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-smoke);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.cs-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--color-gunmetal);
    border: 0.5px solid var(--color-gunmetal);
}

.cs-stat {
    background: var(--color-void);
    padding: 32px 28px;
}

.cs-stat__number {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.0;
    margin-bottom: 8px;
}

.cs-stat__label {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-smoke);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.4;
}

/* ---- Coming Soon Cards ------------------------------------- */
.cs-coming {
    padding: var(--section-padding-top) 0 var(--section-padding-bottom);
    border-top: 0.5px solid var(--color-gunmetal);
}

.cs-coming__intro {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-smoke);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 32px;
}

.cs-coming__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--color-gunmetal);
    border: 0.5px solid var(--color-gunmetal);
}

.cs-coming__card {
    background: var(--color-carbon);
    padding: 40px;
    opacity: 0.5;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cs-coming__label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-smoke);
}

.cs-coming__text {
    font-size: 15px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.65;
}

@media (max-width: 768px) {
    .cs-feature__header {
        flex-direction: column;
        gap: 24px;
    }
    .cs-feature__body {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .cs-coming__grid {
        grid-template-columns: 1fr;
    }
    .cs-delivery__header {
        flex-direction: column;
        gap: 4px;
    }
}

/* ---- Blog Article Pages ------------------------------------ */
.article-page {
    padding: var(--section-padding-top) 0 var(--section-padding-bottom);
}

.article-back {
    margin-bottom: 56px;
}

.article-back__link {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-smoke);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color var(--transition-fast);
}

.article-back__link:hover {
    color: var(--color-chalk);
}

.article-body {
    max-width: 720px;
    margin: 0 auto;
}

.article-header {
    margin-bottom: 56px;
    padding-bottom: 40px;
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.article-header .eyebrow {
    display: block;
    margin-bottom: 20px;
}

.article-header__title {
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: 20px;
}

.article-header__intro {
    font-size: 18px;
    font-weight: 300;
    color: var(--color-chalk);
    line-height: 1.7;
}

.article-content h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.2;
    margin-top: 48px;
    margin-bottom: 16px;
}

.article-content p {
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.8;
    margin-bottom: 20px;
}

.article-content strong {
    color: var(--color-chalk);
    font-weight: 500;
}

.article-cta-box {
    margin-top: 64px;
    background: var(--color-carbon);
    border: 0.5px solid var(--color-gunmetal);
    border-left: 2px solid var(--color-volt);
    padding: 36px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.article-cta-box__text {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-chalk);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .article-body {
        padding: 0;
    }
    .article-cta-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

/* ---- Article page overrides -------------------------------- */
.article-page {
    padding-top: 160px;
}

.article-body h1,
.article-header__title {
    font-size: clamp(24px, 2.8vw, 40px);
    font-weight: 600;
    line-height: 1.15;
    color: var(--color-white);
    margin-bottom: 20px;
}

.article-body h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.2;
    margin-top: 48px;
    margin-bottom: 16px;
}

.article-body p {
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.8;
    margin-bottom: 20px;
}

.article-body strong {
    color: var(--color-chalk);
    font-weight: 500;
}

/* ---- Article content classes ------------------------------- */
.art-body {
    max-width: 720px;
    margin: 0 auto;
}

.art-h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.2;
    margin-top: 48px;
    margin-bottom: 16px;
}

.art-p {
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.8;
    margin-bottom: 20px;
}

.art-p strong {
    color: var(--color-chalk);
    font-weight: 500;
}

.art-cta {
    margin-top: 64px;
    background: var(--color-void);
    border: 0.5px solid var(--color-gunmetal);
    border-left: 2px solid var(--color-volt);
    padding: 32px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.art-cta p {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-chalk);
    line-height: 1.5;
    margin: 0;
}

.page-hero__back {
    display: inline-block;
    margin-top: 32px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-smoke);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color var(--transition-fast);
}

.page-hero__back:hover {
    color: var(--color-chalk);
}

@media (max-width: 768px) {
    .art-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

/* ============================================================
   GENERAL PURPOSE HOMEPAGE — NEW SECTIONS
   ============================================================ */

/* ---- GP Hero ----------------------------------------------- */
.gp-hero {
    height: 100vh;
    min-height: 640px;
    border-bottom: 0.5px solid var(--color-gunmetal);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--color-void);
}

/* Content over canvas */
.gp-hero__content {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 152px 40px 100px 40px;
    margin-left: max(0px, calc((100vw - var(--max-width)) / 2));
    max-width: 680px;
    width: 100%;
}

.gp-hero__heading {
    font-size: clamp(36px, 3.8vw, 56px);
    font-weight: 700;
    line-height: 1.05;
    color: var(--color-white);
    margin: 20px 0 32px;
    letter-spacing: -0.03em;
}

.gp-hero__sub {
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.8;
    max-width: 480px;
    margin-bottom: 40px;
}

/* Final line of sub — "The only question is whether you are." */
.gp-hero__sub br + br {
    display: block;
    content: '';
    margin-top: 8px;
}

.gp-hero__ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Stats strip — removed, proof bar below the hero covers this */

/* ---- GP Pillars (Speed / Clarity / Execution) -------------- */
.gp-pillar {
    padding: 120px 0;
}

.gp-pillar__inner {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 80px;
    align-items: start;
}

.gp-pillar__label {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 100px;
}

.gp-pillar__num {
    font-size: 72px;
    font-weight: 700;
    color: var(--color-gunmetal);
    line-height: 1;
    letter-spacing: -0.03em;
}

.gp-pillar__heading {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.15;
    margin-bottom: 24px;
}

.gp-pillar__text p {
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    margin-bottom: 16px;
}

.gp-pillar__text p:last-child {
    margin-bottom: 0;
}

/* Proof items */
.gp-pillar__proof {
    display: flex;
    gap: 0;
    margin-top: 48px;
    border-top: 0.5px solid var(--color-gunmetal);
}

.gp-proof-item {
    flex: 1;
    padding: 24px 32px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gp-proof-item + .gp-proof-item {
    border-left: 0.5px solid var(--color-gunmetal);
    padding-left: 32px;
}

.gp-proof-item__val {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-chalk);
}

.gp-proof-item__label {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-smoke);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Clarity points */
.gp-pillar__pillars {
    margin-top: 48px;
    border-top: 0.5px solid var(--color-gunmetal);
}

.gp-clarity-point {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.gp-clarity-point__title {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-chalk);
    flex: 0 0 160px;
}

.gp-clarity-point__arrow {
    font-size: 14px;
    color: var(--color-gunmetal);
}

.gp-clarity-point__desc {
    font-size: 14px;
    font-weight: 300;
    color: var(--color-smoke);
}

/* ---- How It Works ------------------------------------------ */
.gp-steps {
    padding: 120px 0;
}

.gp-steps__heading {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    color: var(--color-white);
    margin: 16px 0 64px;
}

.gp-steps__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border-top: 0.5px solid var(--color-gunmetal);
    border-left: 0.5px solid var(--color-gunmetal);
}

.gp-step {
    padding: 32px 28px;
    border-right: 0.5px solid var(--color-gunmetal);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.gp-step__num {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--color-smoke);
    text-transform: uppercase;
    margin-bottom: 20px;
}

.gp-step__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-chalk);
    margin-bottom: 12px;
}

.gp-step__body {
    font-size: 14px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.65;
}

/* ---- Capabilities ------------------------------------------ */
.gp-capabilities {
    padding: 120px 0;
}

.gp-capabilities__heading {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    color: var(--color-white);
    margin: 16px 0 64px;
}

.gp-capabilities__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border-top: 0.5px solid var(--color-gunmetal);
    border-left: 0.5px solid var(--color-gunmetal);
}

.gp-cap {
    padding: 40px 32px;
    border-right: 0.5px solid var(--color-gunmetal);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.gp-cap__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.gp-cap__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gp-cap__list li {
    font-size: 14px;
    font-weight: 300;
    color: var(--color-smoke);
    padding-left: 12px;
    position: relative;
}

.gp-cap__list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--color-gunmetal);
    font-size: 10px;
}

/* ---- Who This Is For --------------------------------------- */
.gp-audience {
    padding: 120px 0;
}

.gp-audience__inner {
    display: grid;
    grid-template-columns: 1fr 0.5px 1fr;
    gap: 80px;
    align-items: start;
}

.gp-audience__divider {
    background: var(--color-gunmetal);
    align-self: stretch;
}

.gp-audience__heading {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 32px;
}

.gp-audience__heading--no {
    color: var(--color-smoke);
}

.gp-audience__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.gp-audience__list li {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    padding: 16px 0;
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.gp-audience__list--yes li {
    color: var(--color-chalk);
    padding-left: 20px;
    position: relative;
}

.gp-audience__list--yes li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-size: 12px;
    color: var(--color-smoke);
}

.gp-audience__list--no li {
    color: var(--color-smoke);
    padding-left: 20px;
    position: relative;
    text-decoration: line-through;
    text-decoration-color: var(--color-smoke);
}

.gp-audience__list--no li::before {
    content: '×';
    position: absolute;
    left: 0;
    font-size: 12px;
    color: var(--color-gunmetal);
    text-decoration: none;
}

/* ---- The Mode Model ---------------------------------------- */
.gp-model {
    padding: 120px 0;
}

.gp-model__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.gp-model__heading {
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 600;
    color: var(--color-white);
    margin: 16px 0 24px;
    line-height: 1.1;
}

.gp-model__body {
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    margin-bottom: 32px;
}

.gp-model__flow {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-chalk);
    padding: 20px 0;
    border-top: 0.5px solid var(--color-gunmetal);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.gp-model__packages {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 0.5px solid var(--color-gunmetal);
}

.gp-model__package {
    padding: 28px 32px;
    border-bottom: 0.5px solid var(--color-gunmetal);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 4px 16px;
    align-items: start;
    position: relative;
    transition: background var(--transition-fast);
}

.gp-model__package:last-child {
    border-bottom: none;
}

.gp-model__package:hover {
    background: var(--color-carbon);
}

.gp-model__package--featured {
    background: var(--color-carbon);
}

.gp-model__package-badge {
    position: absolute;
    top: 28px;
    right: 32px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-void);
    background: var(--color-volt);
    padding: 3px 8px;
}

.gp-model__package-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-chalk);
    grid-column: 1;
}

.gp-model__package-price {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-white);
    grid-column: 1;
}

.gp-model__package-price em {
    font-size: 13px;
    font-weight: 300;
    color: var(--color-smoke);
    font-style: normal;
}

.gp-model__package-detail {
    font-size: 13px;
    font-weight: 300;
    color: var(--color-smoke);
    grid-column: 1;
    grid-row: 3;
    margin-top: 4px;
}

.gp-model__package .package-card__link {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
}

/* ---- Responsive -------------------------------------------- */
@media (max-width: 1024px) {
    .gp-pillar__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .gp-pillar__label {
        flex-direction: row;
        align-items: center;
        position: static;
    }

    .gp-pillar__num {
        font-size: 48px;
    }

    .gp-steps__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .gp-capabilities__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .gp-model__inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .gp-hero__content {
        padding-top: 136px;
    }

    .gp-hero__heading {
        font-size: clamp(36px, 3.8vw, 56px);
    }

    .gp-pillar {
        padding: 80px 0;
    }

    .gp-pillar__proof {
        flex-direction: column;
    }

    .gp-proof-item + .gp-proof-item {
        border-left: none;
        padding-left: 0;
        border-top: 0.5px solid var(--color-gunmetal);
        padding-top: 24px;
    }

    .gp-steps__grid {
        grid-template-columns: 1fr 1fr;
    }

    .gp-capabilities__grid {
        grid-template-columns: 1fr 1fr;
    }

    .gp-audience__inner {
        grid-template-columns: 1fr;
    }

    .gp-audience__divider {
        display: none;
    }

    .gp-model__packages {
        margin-top: 40px;
    }
}

/* ============================================================
   HOW IT WORKS — /how-it-works
   Clarity page. Removes hesitation. Structured, instructional.
   ============================================================ */

/* ---- Section 2: Model strip ------------------------------- */
.hiw-model {
    border-top: 0.5px solid var(--color-gunmetal);
    border-bottom: 0.5px solid var(--color-gunmetal);
    padding: 56px 0;
}

.hiw-model__strip {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.hiw-model__step {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: clamp(22px, 2.5vw, 32px);
    color: var(--color-white);
    letter-spacing: -0.01em;
}

.hiw-model__arrow {
    font-size: 24px;
    color: var(--color-smoke);
    line-height: 1;
}

.hiw-model__sub {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 15px;
    color: var(--color-smoke);
    line-height: 1.6;
    margin: 0;
    max-width: 480px;
}

/* ---- Section 3: Steps ------------------------------------- */
.hiw-steps {
    padding: var(--section-padding);
}

.hiw-step {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 0 40px;
    padding: 48px 0;
    border-top: 0.5px solid var(--color-gunmetal);
    align-items: start;
}

.hiw-step--last {
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.hiw-step__number {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--color-gunmetal);
    padding-top: 6px;
}

.hiw-step__name {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: clamp(20px, 2vw, 28px);
    color: var(--color-white);
    line-height: 1.15;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}

.hiw-step__body {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-smoke);
    margin: 0;
    max-width: 600px;
}

/* ---- Section 4: Different --------------------------------- */
.hiw-different {
    padding: var(--section-padding);
    border-top: 0.5px solid var(--color-gunmetal);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.hiw-different__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.hiw-different__heading {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: clamp(24px, 2.5vw, 36px);
    color: var(--color-white);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
}

.hiw-different__list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.hiw-different__list li {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 16px;
    color: var(--color-chalk);
    line-height: 1.5;
    padding: 14px 0;
    border-bottom: 0.5px solid var(--color-gunmetal);
    display: flex;
    align-items: center;
    gap: 14px;
}

.hiw-different__list li:first-child {
    border-top: 0.5px solid var(--color-gunmetal);
}

.hiw-different__list li::before {
    content: '✕';
    font-size: 10px;
    color: var(--color-dark-grey);
    flex-shrink: 0;
    letter-spacing: 0;
}

.hiw-different__close {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 15px;
    color: var(--color-chalk);
    margin: 0;
    line-height: 1.5;
}

/* ---- Section 5: Close + CTA ------------------------------- */
.hiw-close {
    padding: var(--section-padding);
}

.hiw-close__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    border-top: 0.5px solid var(--color-gunmetal);
    padding-top: 64px;
}

.hiw-close__reassurance {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-smoke);
    margin: 0;
}

.hiw-close__heading {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: clamp(28px, 3vw, 40px);
    color: var(--color-white);
    line-height: 1.1;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}

.hiw-close__sub {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 15px;
    color: var(--color-smoke);
    margin: 0 0 32px;
}

/* ---- Mobile ----------------------------------------------- */
@media (max-width: 960px) {
    .hiw-different__inner,
    .hiw-close__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hiw-close__inner {
        border-top: none;
        padding-top: 0;
    }
}

@media (max-width: 768px) {
    .hiw-step {
        grid-template-columns: 48px 1fr;
        gap: 0 24px;
        padding: 36px 0;
    }

    .hiw-model__strip {
        gap: 16px;
    }

    .hiw-model__arrow {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .hiw-step {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .hiw-step__number {
        padding-top: 0;
    }

    .hiw-close .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ============================================================
   ABOUT PAGE — /about
   Mode as a business entity. Institutional trust layer.
   ============================================================ */

/* ---- Section 2B: Why founders switch ---------------------- */
.about-switch {
    padding: var(--section-padding);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.about-switch__header {
    max-width: 640px;
    margin-bottom: 64px;
}

.about-switch__header .eyebrow {
    display: block;
    margin-bottom: 16px;
}

.about-switch__heading {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: clamp(32px, 4vw, 56px);
    color: var(--color-white);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
}

.about-switch__intro {
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    margin: 0;
}

.about-switch__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--color-gunmetal);
    border: 0.5px solid var(--color-gunmetal);
}

.about-switch__item {
    background: var(--color-void);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.about-switch__complaint {
    font-size: 15px;
    font-weight: 500;
    font-style: italic;
    color: var(--color-smoke);
    line-height: 1.55;
    margin: 0;
    padding-left: 16px;
    border-left: 2px solid var(--color-gunmetal);
}

.about-switch__answer {
    font-size: 14px;
    font-weight: 300;
    color: var(--color-chalk);
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 768px) {
    .about-switch__grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Section 2: Why Mode exists --------------------------- */
.about-entity {
    padding: var(--section-padding);
    border-top: 0.5px solid var(--color-gunmetal);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.about-entity__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.about-entity__left .eyebrow {
    display: block;
    margin-bottom: 20px;
}

.about-entity__heading {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 34px);
    color: var(--color-white);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
}

.about-entity__body {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-smoke);
    margin: 0 0 20px;
}

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

/* ---- Section 3: Beliefs ----------------------------------- */
.about-beliefs {
    padding: var(--section-padding);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.about-beliefs__header {
    margin-bottom: 56px;
}

.about-beliefs__header .eyebrow {
    display: block;
    margin-bottom: 16px;
}

.about-beliefs__heading {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: clamp(24px, 2.8vw, 40px);
    color: var(--color-white);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
}

.about-beliefs__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.about-beliefs__item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 32px 0;
    border-top: 0.5px solid var(--color-gunmetal);
    align-items: baseline;
}

.about-beliefs__item:last-child {
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.about-beliefs__title {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: clamp(16px, 1.5vw, 20px);
    color: var(--color-chalk);
    line-height: 1.3;
    margin: 0;
}

.about-beliefs__body {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-smoke);
    margin: 0;
}

/* ---- Section 4: Model ------------------------------------- */
.about-model {
    padding: var(--section-padding);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.about-model__header {
    margin-bottom: 56px;
}

.about-model__header .eyebrow {
    display: block;
    margin-bottom: 16px;
}

.about-model__heading {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 34px);
    color: var(--color-white);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
    max-width: 640px;
}

.about-model__items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background-color: var(--color-gunmetal);
    border: 0.5px solid var(--color-gunmetal);
}

.about-model__item {
    background-color: var(--color-carbon);
    padding: 36px 40px;
}

.about-model__label {
    display: block;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 15px;
    color: var(--color-chalk);
    margin-bottom: 10px;
    line-height: 1.3;
}

.about-model__desc {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 14px;
    line-height: 1.75;
    color: var(--color-smoke);
    margin: 0;
}

/* ---- Section 5: Who fits Mode ----------------------------- */
.about-fit {
    padding: var(--section-padding);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.about-fit__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.about-fit__left .eyebrow {
    display: block;
    margin-bottom: 20px;
}

.about-fit__heading {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: clamp(24px, 2.8vw, 40px);
    color: var(--color-white);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
}

.about-fit__body {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-smoke);
    margin: 0 0 36px;
}

.about-fit__qualifier {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-smoke);
    margin: 0 0 20px;
    padding-left: 20px;
    border-left: 1px solid var(--color-gunmetal);
}

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

/* ---- Section 6: People ------------------------------------ */
.about-people {
    padding: var(--section-padding);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.about-people__header {
    margin-bottom: 56px;
}

.about-people__header .eyebrow {
    display: block;
    margin-bottom: 16px;
}

.about-people__heading {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 34px);
    color: var(--color-white);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
}

.about-people__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1px;
    background-color: var(--color-gunmetal);
    border: 0.5px solid var(--color-gunmetal);
}

/* Single person — cap width and give the photo more room */
.about-people__grid:has(.about-person:only-child) {
    max-width: 760px;
}

.about-person:only-child {
    grid-template-columns: 180px 1fr;
}

.about-person {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 32px;
    background-color: #1a1a1a;
    padding: 40px;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: background-color 200ms ease-out, border-color 200ms ease-out;
    align-items: start;
}

.about-person:hover {
    background-color: #202020;
    border-left-color: var(--color-volt);
}

.about-person__photo {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: transparent;
    border: none;
}

.about-person__photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
}

.about-person__info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.about-person__info .eyebrow {
    display: block;
}

.about-person__name {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 22px;
    color: var(--color-white);
    margin: 4px 0 0;
    letter-spacing: -0.01em;
}

.about-person__role {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-smoke);
    margin: 8px 0 0;
}

.about-person__link {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--color-chalk);
    margin-top: auto;
    padding-top: 16px;
    display: block;
    transition: color 200ms ease-out;
}

.about-person:hover .about-person__link {
    color: var(--color-white);
}

/* ---- About mobile ----------------------------------------- */
@media (max-width: 960px) {
    .about-entity__inner,
    .about-fit__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .about-beliefs__item {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .about-model__items {
        grid-template-columns: 1fr;
    }

    .about-person {
        grid-template-columns: 120px 1fr;
        gap: 24px;
        padding: 32px;
    }
}

@media (max-width: 600px) {
    .about-people__grid {
        grid-template-columns: 1fr;
    }

    .about-person {
        grid-template-columns: 1fr;
    }

    .about-person__photo {
        max-width: 140px;
    }
}

/* ============================================================
   TEAM / PROFILE PAGES — /team/nicole
   Personal trust layer. Controlled, credible, human.
   ============================================================ */

/* ---- Profile hero ----------------------------------------- */
.profile-hero {
    padding: 152px 0 80px;
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.profile-hero__inner {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 80px;
    align-items: end;
}

.profile-hero__text .eyebrow {
    display: block;
    margin-bottom: 20px;
}

.profile-hero__name {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: clamp(40px, 5vw, 72px);
    color: var(--color-white);
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 0 0 16px;
}

.profile-hero__role {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-smoke);
    margin: 0 0 32px;
}

.profile-hero__intro {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.75;
    color: var(--color-chalk);
    margin: 0;
    max-width: 520px;
}

.profile-hero__photo {
    aspect-ratio: 3 / 2.8;
    background: transparent;
    border: none;
    overflow: hidden;
    align-self: end;
}

.profile-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* ---- Thinking section ------------------------------------- */
.profile-thinking {
    padding: var(--section-padding);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.profile-thinking__inner {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 80px;
    align-items: start;
}

.profile-thinking__label .eyebrow {
    display: block;
    padding-top: 4px;
}

.profile-thinking__body {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.8;
    color: var(--color-smoke);
    margin: 0 0 24px;
}

.profile-thinking__body:last-child {
    margin-bottom: 0;
}

/* ---- Role grid -------------------------------------------- */
.profile-role {
    padding: var(--section-padding);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.profile-role .eyebrow {
    display: block;
    margin-bottom: 40px;
}

.profile-role__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background-color: var(--color-gunmetal);
    border: 0.5px solid var(--color-gunmetal);
}

.profile-role__item {
    background-color: var(--color-void);
    padding: 40px;
}

.profile-role__title {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 18px;
    color: var(--color-white);
    margin: 0 0 12px;
}

.profile-role__body {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-smoke);
    margin: 0;
}

/* ---- Standards -------------------------------------------- */
.profile-standards {
    padding: var(--section-padding);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.profile-standards__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.profile-standards__left .eyebrow {
    display: block;
    margin-bottom: 20px;
}

.profile-standards__heading {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 34px);
    color: var(--color-white);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
}

.profile-standards__body {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-smoke);
    margin: 0 0 20px;
}

.profile-standards__body:last-child {
    margin-bottom: 0;
}

/* ---- Connect --------------------------------------------- */
.profile-connect {
    padding: var(--section-padding);
}

/* Header block */
.profile-connect__header {
    max-width: 640px;
    margin-bottom: 56px;
}

.profile-connect__header .eyebrow {
    display: block;
    margin-bottom: 20px;
}

.profile-connect__heading {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: clamp(24px, 2.8vw, 40px);
    color: var(--color-white);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
}

.profile-connect__body {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-smoke);
    margin: 0;
}

/* Access ladder */
.profile-access {
    display: flex;
    flex-direction: column;
    border-top: 0.5px solid var(--color-gunmetal);
    margin-bottom: 64px;
}

.profile-access__item {
    display: grid;
    grid-template-columns: 160px 1fr 24px;
    align-items: center;
    gap: 32px;
    padding: 28px 0;
    border-bottom: 0.5px solid var(--color-gunmetal);
    text-decoration: none;
    transition: background-color 200ms ease-out;
}

.profile-access__item:hover {
    background-color: var(--color-carbon);
    margin: 0 -32px;
    padding-left: 32px;
    padding-right: 32px;
}

.profile-access__meta {
    flex-shrink: 0;
}

.profile-access__type {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-smoke);
}

.profile-access__title {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 17px;
    color: var(--color-chalk);
    margin: 0 0 6px;
    transition: color 200ms ease-out;
}

.profile-access__item:hover .profile-access__title {
    color: var(--color-white);
}

.profile-access__desc {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-smoke);
    margin: 0;
}

.profile-access__arrow {
    font-size: 16px;
    color: var(--color-smoke);
    transition: color 200ms ease-out, transform 200ms ease-out;
    justify-self: end;
}

.profile-access__item:hover .profile-access__arrow {
    color: var(--color-chalk);
    transform: translateX(4px);
}

/* Footer strip */
.profile-connect__footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
}

.profile-connect__links {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 0.5px solid var(--color-gunmetal);
}

.profile-connect__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 48px;
    padding: 16px 24px;
    border-bottom: 0.5px solid var(--color-gunmetal);
    text-decoration: none;
    transition: background-color 200ms ease-out;
}

.profile-connect__link:last-child {
    border-bottom: none;
}

.profile-connect__link:hover {
    background-color: var(--color-carbon);
}

.profile-connect__link-label {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-smoke);
}

.profile-connect__link-value {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 14px;
    color: var(--color-chalk);
    transition: color 200ms ease-out;
}

.profile-connect__link:hover .profile-connect__link-value {
    color: var(--color-white);
}

.profile-back {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 13px;
    margin: 0;
}

.profile-back a {
    color: var(--color-smoke);
    text-decoration: none;
    transition: color 200ms ease-out;
}

.profile-back a:hover {
    color: var(--color-chalk);
}

/* ---- Profile mobile --------------------------------------- */
@media (max-width: 960px) {
    .profile-hero__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .profile-hero__photo {
        max-width: 300px;
    }

    .profile-thinking__inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .profile-role__grid {
        grid-template-columns: 1fr;
    }

    .profile-standards__inner {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .profile-access__item {
        grid-template-columns: 120px 1fr 24px;
        gap: 20px;
    }

    .profile-connect__footer {
        flex-direction: column;
        gap: 32px;
    }
}

@media (max-width: 600px) {
    .profile-hero {
        padding-top: 136px;
    }

    .profile-role__item {
        padding: 28px 24px;
    }

    .profile-access__item {
        grid-template-columns: 1fr 24px;
        gap: 16px;
    }

    .profile-access__meta {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .profile-access__content {
        grid-column: 1;
        grid-row: 2;
    }

    .profile-access__arrow {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        padding-top: 4px;
    }

    .profile-access__item:hover {
        margin: 0 -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ============================================================
   SERVICE / LOCATION / INDUSTRY PAGES
   Shared 7-section system. .svc-split + .svc-deliverables only.
   All other sections reuse existing classes.
   ============================================================ */

/* ---- Section wrappers ------------------------------------- */
.svc-problem {
    padding: var(--section-padding);
    border-top: 0.5px solid var(--color-gunmetal);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.svc-solution {
    padding: var(--section-padding);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

/* ---- Two-column split (problem + solution) ---------------- */
.svc-split__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.svc-split__left .eyebrow {
    display: block;
    margin-bottom: 20px;
}

.svc-split__heading {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 34px);
    color: var(--color-white);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
}

.svc-split__body {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-smoke);
    margin: 0 0 20px;
}

.svc-split__body:last-child {
    margin-bottom: 0;
}

/* ---- Deliverables (what you get) -------------------------- */
.svc-deliverables {
    padding: var(--section-padding);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.svc-deliverables__header {
    margin-bottom: 48px;
}

.svc-deliverables__header .eyebrow {
    display: block;
    margin-bottom: 16px;
}

.svc-deliverables__heading {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 34px);
    color: var(--color-white);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
}

.svc-deliverables__list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 64px;
}

.svc-deliverables__item {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 15px;
    color: var(--color-chalk);
    line-height: 1.5;
    padding: 16px 0;
    border-bottom: 0.5px solid var(--color-gunmetal);
    display: flex;
    align-items: center;
    gap: 14px;
}

.svc-deliverables__item::before {
    content: '';
    flex-shrink: 0;
    width: 5px;
    height: 9px;
    border: 1.5px solid var(--color-volt);
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

.svc-deliverables__price {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 14px;
    color: var(--color-smoke);
    margin: 0;
    line-height: 1.6;
}

.svc-deliverables__price strong {
    color: var(--color-chalk);
    font-weight: 500;
}

.svc-deliverables__price a {
    color: var(--color-chalk);
    text-decoration: none;
    transition: color 200ms ease-out;
}

.svc-deliverables__price a:hover {
    color: var(--color-white);
}

/* ---- Hero dual CTAs --------------------------------------- */
.page-hero__ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 40px;
}

/* ---- hiw-model link --------------------------------------- */
.hiw-model__sub a {
    color: var(--color-chalk);
    text-decoration: none;
    transition: color 200ms ease-out;
}

.hiw-model__sub a:hover {
    color: var(--color-white);
}

/* ---- Mobile ----------------------------------------------- */
@media (max-width: 960px) {
    .svc-split__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .svc-deliverables__list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .page-hero__ctas .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ============================================================
   LEGAL BODY (Privacy Policy, Terms)
   ============================================================ */
.legal-body {
    padding-bottom: 120px;
}

.legal-body__content {
    max-width: 760px;
}

.legal-body__content h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-white);
    margin: 56px 0 16px;
    letter-spacing: -0.01em;
}

.legal-body__content h2:first-child {
    margin-top: 0;
}

.legal-body__content h3 {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-chalk);
    margin: 32px 0 12px;
}

.legal-body__content p {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.8;
    margin-bottom: 16px;
}

.legal-body__content ul {
    margin: 0 0 20px 0;
    padding-left: 0;
    list-style: none;
}

.legal-body__content ul li {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.8;
    padding: 4px 0 4px 20px;
    position: relative;
}

.legal-body__content ul li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--color-gunmetal);
}

.legal-body__content a {
    color: var(--color-chalk);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 200ms ease-out;
}

.legal-body__content a:hover {
    color: var(--color-white);
}

.legal-body__content strong {
    font-weight: 500;
    color: var(--color-chalk);
}

/* ============================================================
   FOUNDERS HUB (/founders parent page)
   ============================================================ */
.founders-hub__hero {
    padding-bottom: 80px;
}

.founders-hub__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--color-gunmetal);
    border-top: 0.5px solid var(--color-gunmetal);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.founders-hub__card {
    display: block;
    background: var(--color-carbon);
    text-decoration: none;
    transition: background 200ms ease-out;
}

.founders-hub__card:hover {
    background: var(--color-void);
}

.founders-hub__card-inner {
    padding: 64px 56px;
}

.founders-hub__card-heading {
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 20px 0 20px;
}

.founders-hub__card-body {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    margin-bottom: 32px;
}

.founders-hub__card-cta {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--color-chalk);
    text-transform: uppercase;
    transition: color 200ms ease-out;
}

.founders-hub__card:hover .founders-hub__card-cta {
    color: var(--color-white);
}

.founders-hub__packages {
    padding: 56px 0;
    text-align: center;
}

.founders-hub__packages-label {
    font-size: 15px;
    font-weight: 300;
    color: var(--color-smoke);
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .founders-hub__grid {
        grid-template-columns: 1fr;
    }

    .founders-hub__card-inner {
        padding: 48px 32px;
    }
}

@media (max-width: 480px) {
    .founders-hub__card-inner {
        padding: 40px 24px;
    }
}

/* ============================================================
   SERVICES HUB PAGE (/services)
   ============================================================ */
.services-hub {
    padding-bottom: var(--section-padding);
}

.services-hub__category {
    padding: 64px 0;
    border-top: 0.5px solid var(--color-gunmetal);
}

.services-hub__category-header {
    margin-bottom: 40px;
}

.services-hub__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background-color: var(--color-gunmetal);
    border: 0.5px solid var(--color-gunmetal);
}

.services-hub__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 36px 32px;
    background-color: var(--color-carbon);
    text-decoration: none;
    transition: background-color 200ms ease-out;
}

.services-hub__card:hover {
    background-color: #1a1a1a;
}

.services-hub__card-title {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 17px;
    color: var(--color-chalk);
    margin: 0;
    transition: color 200ms ease-out;
}

.services-hub__card:hover .services-hub__card-title {
    color: var(--color-white);
}

.services-hub__card-body {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-smoke);
    margin: 0;
    flex: 1;
}

.services-hub__card-link {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--color-smoke);
    transition: color 200ms ease-out;
    margin-top: auto;
}

.services-hub__card:hover .services-hub__card-link {
    color: var(--color-chalk);
}

@media (max-width: 960px) {
    .services-hub__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .services-hub__grid {
        grid-template-columns: 1fr;
    }

    .services-hub__card {
        padding: 28px 24px;
    }
}

/* ============================================================
   RELATED SERVICES STRIP (internal linking)
   ============================================================ */
.svc-related {
    padding: 48px 0;
    border-top: 0.5px solid var(--color-gunmetal);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.svc-related .eyebrow {
    display: block;
    margin-bottom: 24px;
}

.svc-related__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 40px;
}

.svc-related__link {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-chalk);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: color 200ms ease-out;
}

.svc-related__link:hover {
    color: var(--color-white);
}

@media (max-width: 480px) {
    .svc-related__links {
        flex-direction: column;
        gap: 16px;
    }
}

/* ============================================================
   MISSING CLASS PATCHES
   ============================================================ */

/* ── About entity columns ─────────────────────────────────── */
.about-entity__left {
    display: flex;
    flex-direction: column;
}

.about-entity__right {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── About model wrapper ──────────────────────────────────── */
.about-model__inner {
    display: flex;
    flex-direction: column;
}

/* ── About fit columns ────────────────────────────────────── */
.about-fit__left {
    display: flex;
    flex-direction: column;
}

.about-fit__right {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── How It Works step content ────────────────────────────── */
.hiw-step__content {
    display: flex;
    flex-direction: column;
}

/* ── How It Works different columns ──────────────────────── */
.hiw-different__left {
    display: flex;
    flex-direction: column;
}

.hiw-different__right {
    display: flex;
    flex-direction: column;
}

/* ── How It Works close CTA block ────────────────────────── */
.hiw-close__cta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

/* ── Team grid section ────────────────────────────────────── */
.team-grid {
    padding: var(--section-padding);
}

/* ── Nicole profile — thinking column layout ─────────────── */
.profile-thinking__label {
    padding-top: 2px;
}

.profile-thinking__content {
    display: flex;
    flex-direction: column;
}

/* ── Nicole profile — writing section ───────────────────── */
.profile-writing {
    padding: var(--section-padding);
    border-top: 0.5px solid var(--color-gunmetal);
}

.profile-writing__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.profile-writing__left .eyebrow {
    display: block;
    margin-bottom: 20px;
}

.profile-writing__heading {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: clamp(22px, 2.4vw, 36px);
    color: var(--color-white);
    line-height: 1.15;
    margin: 0 0 16px;
}

.profile-writing__body {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-smoke);
    margin: 0 0 32px;
}

.profile-writing__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 0.5px solid var(--color-gunmetal);
}

.profile-writing__item {
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.profile-writing__link {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    padding: 20px 0;
    text-decoration: none;
    transition: background-color 200ms ease-out;
}

.profile-writing__link:hover .profile-writing__title {
    color: var(--color-white);
}

.profile-writing__title {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 15px;
    color: var(--color-chalk);
    transition: color 200ms ease-out;
    flex: 1;
}

.profile-writing__date {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 12px;
    color: var(--color-smoke);
    white-space: nowrap;
    flex-shrink: 0;
}

.profile-writing__empty {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 14px;
    color: var(--color-smoke);
    margin: 0;
    padding: 24px 0;
    border-top: 0.5px solid var(--color-gunmetal);
}

/* ── Nicole blog — empty state ───────────────────────────── */
.nicole-blog__empty {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 16px;
    color: var(--color-smoke);
    padding: 80px 0;
    text-align: center;
}

@media (max-width: 960px) {
    .profile-writing__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

/* ============================================================
   PORTFOLIO — Grid, Cards, Single, Profile section
   ============================================================ */

/* ── Main grid ──────────────────────────────────────────── */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background-color: var(--color-gunmetal);
    border: 0.5px solid var(--color-gunmetal);
}

.portfolio-card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-carbon);
    text-decoration: none;
    transition: background-color 200ms ease-out;
}

.portfolio-card:hover {
    background-color: #1a1a1a;
}

.portfolio-card__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--color-gunmetal);
}

.portfolio-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 400ms ease-out;
}

.portfolio-card:hover .portfolio-card__image img {
    transform: scale(1.03);
}

.portfolio-card__placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--color-gunmetal);
    aspect-ratio: 16 / 10;
}

.portfolio-card__body {
    padding: 28px 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.portfolio-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.portfolio-card__tag {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-smoke);
}

.portfolio-card__year {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 11px;
    color: var(--color-smoke);
    margin-left: auto;
}

.portfolio-card__title {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 17px;
    color: var(--color-chalk);
    margin: 0;
    line-height: 1.3;
    transition: color 200ms ease-out;
}

.portfolio-card:hover .portfolio-card__title {
    color: var(--color-white);
}

.portfolio-card__outcome {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 13px;
    color: var(--color-smoke);
    margin: 0;
    line-height: 1.5;
}

/* ── Empty state ────────────────────────────────────────── */
.portfolio-empty {
    padding: 80px 0;
    text-align: center;
}

.portfolio-empty p {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 16px;
    color: var(--color-smoke);
    margin: 0 0 16px;
}

.portfolio-empty a {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 13px;
    color: var(--color-chalk);
    text-decoration: none;
}

/* ── Single project page ────────────────────────────────── */
.portfolio-single__outcome {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 20px;
    color: var(--color-chalk);
    margin: 0;
}

.portfolio-single__meta {
    padding: 32px 0;
    border-top: 0.5px solid var(--color-gunmetal);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.portfolio-single__meta-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.portfolio-single__meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.portfolio-single__meta-label {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-smoke);
}

.portfolio-single__meta-value {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 14px;
    color: var(--color-chalk);
}

.portfolio-single__meta-value a {
    color: var(--color-chalk);
    text-decoration: none;
}

.portfolio-single__meta-value a:hover {
    color: var(--color-white);
}

.portfolio-single__image,
.portfolio-single__placeholder {
    padding: 0 0 64px;
}

.portfolio-single__img {
    width: 100%;
    height: auto;
    display: block;
}

.portfolio-single__img-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-carbon);
    border: 0.5px solid var(--color-gunmetal);
}

.portfolio-single__content-inner {
    max-width: 720px;
}

.portfolio-single__content-inner p {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.8;
    color: var(--color-smoke);
    margin: 0 0 24px;
}

.portfolio-single__content-inner h2 {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 24px;
    color: var(--color-white);
    margin: 48px 0 20px;
}

/* ── Nicole profile — portfolio section ─────────────────── */
.profile-portfolio {
    padding: var(--section-padding);
    border-top: 0.5px solid var(--color-gunmetal);
}

.profile-portfolio__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.profile-portfolio__left .eyebrow {
    display: block;
    margin-bottom: 20px;
}

.profile-portfolio__heading {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: clamp(22px, 2.4vw, 36px);
    color: var(--color-white);
    line-height: 1.15;
    margin: 0 0 16px;
}

.profile-portfolio__body {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-smoke);
    margin: 0 0 32px;
}

.profile-portfolio__grid {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background-color: var(--color-gunmetal);
    border: 0.5px solid var(--color-gunmetal);
}

.profile-portfolio__item {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 20px;
    align-items: center;
    padding: 20px;
    background-color: var(--color-carbon);
    text-decoration: none;
    transition: background-color 200ms ease-out;
}

.profile-portfolio__item:hover {
    background-color: #1a1a1a;
}

.profile-portfolio__thumb {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--color-gunmetal);
    flex-shrink: 0;
}

.profile-portfolio__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-portfolio__thumb-placeholder {
    width: 100%;
    height: 100%;
    background-color: var(--color-gunmetal);
}

.profile-portfolio__item-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-portfolio__item-tag {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-smoke);
}

.profile-portfolio__item-title {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 14px;
    color: var(--color-chalk);
    transition: color 200ms ease-out;
}

.profile-portfolio__item:hover .profile-portfolio__item-title {
    color: var(--color-white);
}

.profile-portfolio__item-outcome {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 12px;
    color: var(--color-smoke);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 960px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-portfolio__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

@media (max-width: 600px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Nicole profile — hero text block ────────────────────── */
.profile-hero__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── Homepage / Founders problem columns ─────────────────── */
.problem__left {
    display: flex;
    flex-direction: column;
}

.problem__right {
    display: flex;
    flex-direction: column;
}

/* ── Case study teaser content + placeholder ─────────────── */
.case-study-teaser__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.case-study-teaser__placeholder {
    aspect-ratio: 4 / 3;
    background: var(--color-carbon);
    border: 0.5px solid var(--color-gunmetal);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 32px;
    gap: 8px;
}

/* ── cs-mini-stat wrapper ─────────────────────────────────── */
.cs-mini-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Services Index — editorial list layout ──────────────── */
.svc-index {
    padding-bottom: 120px;
}

.svc-index__group {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0;
    border-top: 0.5px solid var(--color-gunmetal);
    padding: 48px 0 0;
    margin-bottom: 64px;
}

.svc-index__group-label {
    padding-top: 4px;
}

.svc-index__list {
    display: flex;
    flex-direction: column;
}

.svc-index__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 28px 0;
    border-bottom: 0.5px solid var(--color-gunmetal);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.svc-index__row:first-child {
    border-top: 0.5px solid var(--color-gunmetal);
}

.svc-index__row:hover .svc-index__row-title {
    color: var(--color-white);
}

.svc-index__row:hover .svc-index__row-arrow {
    color: var(--color-white);
    transform: translateX(4px);
}

.svc-index__row-main {
    flex: 1;
    min-width: 0;
}

.svc-index__row-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-chalk);
    margin: 0 0 6px;
    transition: color var(--transition-fast);
    line-height: 1.3;
}

.svc-index__row-desc {
    font-size: 14px;
    font-weight: 300;
    color: var(--color-smoke);
    margin: 0;
    line-height: 1.6;
}

.svc-index__row-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    text-align: right;
}

.svc-index__row-price {
    font-size: 17px;
    font-weight: 500;
    color: var(--color-chalk);
    white-space: nowrap;
}

.svc-index__row-freq {
    font-size: 12px;
    font-weight: 300;
    color: var(--color-smoke);
}

.svc-index__row-arrow {
    font-size: 18px;
    color: var(--color-smoke);
    transition: color var(--transition-fast), transform var(--transition-fast);
    display: inline-block;
}

@media (max-width: 900px) {
    .svc-index__group {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media (max-width: 600px) {
    .svc-index__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .svc-index__row-meta {
        width: 100%;
        justify-content: space-between;
    }
}

/* ── Service Checkout — service bar + balance row ────────── */
.svc-checkout__service-bar {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 0 32px;
    border-bottom: 0.5px solid var(--color-gunmetal);
    margin-bottom: 40px;
}

.svc-checkout__service-name {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-white);
}

.svc-checkout__service-price {
    font-size: 15px;
    font-weight: 400;
    color: var(--color-smoke);
    white-space: nowrap;
}

.svc-checkout__invalid {
    padding: 40px 0;
}

.svc-checkout__invalid a {
    color: var(--color-chalk);
}

.svc-checkout__balance-row .start-order-row__label,
.svc-checkout__balance-row .start-order-row__value {
    color: var(--color-smoke);
    font-size: 13px;
    font-weight: 300;
}

@media (max-width: 600px) {
    .svc-checkout__service-bar {
        flex-direction: column;
        gap: 8px;
    }
}

/* ── Service Individual Purchase Section ─────────────────── */
.svc-purchase {
    padding: 80px 0;
    border-top: 0.5px solid var(--color-gunmetal);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.svc-purchase__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.svc-purchase__info .eyebrow {
    margin-bottom: 16px;
    display: block;
}

.svc-purchase__price {
    font-size: 52px;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1;
    margin: 0 0 12px;
}

.svc-purchase__price span {
    font-size: 20px;
    font-weight: 300;
    color: var(--color-smoke);
}

.svc-purchase__meta {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-smoke);
    letter-spacing: 0.05em;
    margin: 0;
}

.svc-purchase__action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.svc-purchase__note {
    font-size: 13px;
    font-weight: 300;
    color: var(--color-smoke);
    margin: 0;
    line-height: 1.6;
}

.svc-purchase__note a {
    color: var(--color-chalk);
    text-decoration: none;
    border-bottom: 0.5px solid var(--color-gunmetal);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.svc-purchase__note a:hover {
    color: var(--color-white);
    border-color: var(--color-chalk);
}

@media (max-width: 768px) {
    .svc-purchase__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .svc-purchase__price {
        font-size: 40px;
    }
}

/* ============================================================
   BLOG — single post (home.php / single.php additions)
   ============================================================ */

.blog-section-header {
    margin-bottom: 0;
    padding-bottom: 40px;
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.blog-section-header__label {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 4px 10px;
    margin-bottom: 12px;
}

.blog-section-header__label--human {
    background: var(--color-chalk);
    color: var(--color-void);
}

.blog-section-header__label--ai {
    background: var(--color-volt);
    color: var(--color-void);
}

.blog-section-header__desc {
    font-size: 14px;
    font-weight: 300;
    color: var(--color-smoke);
    margin: 0;
}

/* ── Single post ────────────────────────────────────────────── */

.blog-article__byline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.blog-article__byline-author {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-chalk);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.blog-article__byline-sep {
    color: var(--color-gunmetal);
}

.blog-article__byline-date,
.blog-article__byline-read {
    font-size: 13px;
    font-weight: 300;
    color: var(--color-smoke);
}

.blog-article__img {
    width: 100%;
    height: auto;
    display: block;
    border: 0.5px solid var(--color-gunmetal);
}

.blog-article__content {
    margin-top: 0;
}

.blog-article__content h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-white);
    margin-top: 48px;
    margin-bottom: 16px;
    line-height: 1.2;
}

.blog-article__content h3 {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-chalk);
    margin-top: 36px;
    margin-bottom: 12px;
}

.blog-article__content p {
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.8;
    margin-bottom: 20px;
}

.blog-article__content ul,
.blog-article__content ol {
    margin: 0 0 20px 24px;
    color: var(--color-smoke);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.8;
}

.blog-article__content li {
    margin-bottom: 8px;
}

.blog-article__content strong {
    color: var(--color-chalk);
    font-weight: 500;
}

.blog-article__content a {
    color: var(--color-chalk);
    text-decoration: underline;
    text-decoration-color: var(--color-gunmetal);
    transition: color var(--transition-fast);
}

.blog-article__content a:hover {
    color: var(--color-white);
}

.blog-article__content blockquote {
    border-left: 2px solid var(--color-volt);
    padding-left: 24px;
    margin: 32px 0;
    font-size: 18px;
    font-weight: 400;
    color: var(--color-chalk);
    font-style: normal;
    line-height: 1.6;
}

.blog-article__ai-note {
    background: var(--color-carbon);
    border: 0.5px solid var(--color-gunmetal);
    border-left: 2px solid var(--color-volt);
    padding: 24px 28px;
    font-size: 14px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.7;
    margin-bottom: 60px;
}

.blog-article__ai-note strong {
    color: var(--color-chalk);
    font-weight: 500;
}

.blog-article__author-card {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 40px 0;
}

.blog-article__author-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: block;
    filter: grayscale(1);
}

.blog-article__author-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: 6px;
}

.blog-article__author-bio {
    font-size: 14px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.65;
    margin-bottom: 12px;
}

.blog-article__author-link {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-chalk);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color var(--transition-fast);
}

.blog-article__author-link:hover {
    color: var(--color-volt);
}

.blog-related {
    padding-top: 80px;
    padding-bottom: 80px;
}

/* ============================================================
   RESULTS PAGE
   ============================================================ */

.results-stats {
    padding: 80px 0;
    border-top: 0.5px solid var(--color-gunmetal);
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.results-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-left: 0.5px solid var(--color-gunmetal);
}

.results-stat {
    padding: 40px 32px;
    border-right: 0.5px solid var(--color-gunmetal);
}

.results-stat__number {
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1;
    margin-bottom: 12px;
}

.results-stat__label {
    font-size: 13px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.6;
}

.results-methodology {
    padding: var(--section-padding-top) 0 var(--section-padding-bottom);
}

.results-by-package {
    padding: var(--section-padding-top) 0 var(--section-padding-bottom);
}

.results-by-package__heading {
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.15;
    margin-top: 16px;
    margin-bottom: 56px;
}

.results-packages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--color-gunmetal);
    border: 0.5px solid var(--color-gunmetal);
}

.results-package {
    background: var(--color-void);
    padding: 40px;
}

.results-package__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 0.5px solid var(--color-gunmetal);
    flex-wrap: wrap;
}

.results-package__name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.results-package__price {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-smoke);
}

.results-package__outcomes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.results-package__outcomes li {
    font-size: 14px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.6;
    padding: 10px 0 10px 20px;
    border-bottom: 0.5px solid var(--color-gunmetal);
    position: relative;
}

.results-package__outcomes li:last-child {
    border-bottom: none;
}

.results-package__outcomes li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--color-volt);
    font-size: 12px;
}

.results-caveat {
    padding: var(--section-padding-top) 0 var(--section-padding-bottom);
}

.results-case-studies {
    padding: var(--section-padding-top) 0 var(--section-padding-bottom);
}

.results-case-studies__heading {
    font-size: clamp(24px, 3vw, 40px);
    font-weight: 600;
    color: var(--color-white);
    margin-top: 16px;
    margin-bottom: 48px;
}

/* ============================================================
   CASE STUDIES — listing + single
   ============================================================ */

.cs-listing {
    padding: var(--section-padding-top) 0 var(--section-padding-bottom);
}

.cs-listing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--color-gunmetal);
    border: 0.5px solid var(--color-gunmetal);
}

.cs-listing-grid--full {
    grid-template-columns: 1fr;
    gap: 0;
    background: none;
    border: none;
}

.cs-listing-card {
    display: block;
    background: var(--color-carbon);
    padding: 36px;
    transition: background var(--transition-fast);
    text-decoration: none;
}

.cs-listing-card:hover {
    background: var(--color-void);
}

.cs-listing-card__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.cs-listing-card__tag {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-void);
    background: var(--color-chalk);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 3px 8px;
}

.cs-listing-card__industry {
    font-size: 11px;
    font-weight: 300;
    color: var(--color-smoke);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cs-listing-card__title {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.25;
    margin-bottom: 20px;
}

.cs-listing-card__stat {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 16px 0;
    border-top: 0.5px solid var(--color-gunmetal);
}

.cs-listing-card__stat-number {
    font-size: 28px;
    font-weight: 600;
    color: var(--color-white);
    flex-shrink: 0;
}

.cs-listing-card__stat-label {
    font-size: 13px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.5;
}

.cs-listing-card__cta {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-smoke);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 20px;
    transition: color var(--transition-fast);
}

.cs-listing-card:hover .cs-listing-card__cta {
    color: var(--color-volt);
}

/* Full-width case study card (listing page) */
.cs-full-card {
    background: var(--color-carbon);
    border: 0.5px solid var(--color-gunmetal);
    padding: 48px;
    margin-bottom: 1px;
    transition: background var(--transition-fast);
}

.cs-full-card:hover {
    background: #181818;
}

.cs-full-card__header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: start;
    margin-bottom: 24px;
}

.cs-full-card__title {
    font-size: clamp(22px, 2.5vw, 32px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.2;
    margin: 10px 0 8px;
}

.cs-full-card__client {
    font-size: 13px;
    font-weight: 300;
    color: var(--color-smoke);
    margin: 0;
}

.cs-full-card__stats {
    display: flex;
    gap: 40px;
    flex-shrink: 0;
}

.cs-full-card__stat {
    text-align: right;
}

.cs-full-card__stat-num {
    display: block;
    font-size: 32px;
    font-weight: 600;
    color: var(--color-white);
    line-height: 1;
    margin-bottom: 6px;
}

.cs-full-card__stat-lab {
    display: block;
    font-size: 12px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.5;
    max-width: 140px;
}

.cs-full-card__outcome {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.7;
    margin-bottom: 28px;
    padding-top: 20px;
    border-top: 0.5px solid var(--color-gunmetal);
}

.cs-full-card__link {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-chalk);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color var(--transition-fast);
}

.cs-full-card:hover .cs-full-card__link {
    color: var(--color-volt);
}

/* ── Single case study ──────────────────────────────────────── */

.cs-single__hero { }

.cs-single__outcome {
    font-size: 20px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.65;
    margin-top: 24px;
    max-width: 680px;
}

.cs-single__back {
    margin-top: 36px;
}

.cs-single__back a {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-smoke);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color var(--transition-fast);
}

.cs-single__back a:hover {
    color: var(--color-chalk);
}

.cs-single__stats {
    padding: 64px 0;
    border-bottom: 0.5px solid var(--color-gunmetal);
}

.cs-single__stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0;
    border-left: 0.5px solid var(--color-gunmetal);
}

.cs-single__stat {
    padding: 32px 28px;
    border-right: 0.5px solid var(--color-gunmetal);
}

.cs-single__stat-number {
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1;
    margin-bottom: 10px;
}

.cs-single__stat-label {
    font-size: 13px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.5;
}

.cs-single__content {
    padding: var(--section-padding-top) 0 var(--section-padding-bottom);
}

.cs-single__content-inner {
    max-width: 760px;
}

.cs-single__section {
    margin-bottom: 56px;
}

/* ============================================================
   FOOTER — responsive override (kept from original)
   ============================================================ */

/* ============================================================
   RESPONSIVE — new sections
   ============================================================ */

@media (max-width: 1024px) {
    .results-stats__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .results-packages {
        grid-template-columns: 1fr;
    }

    .cs-full-card__header {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .cs-full-card__stats {
        flex-direction: row;
        gap: 32px;
    }

    .cs-full-card__stat {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .results-stats__grid {
        grid-template-columns: 1fr 1fr;
    }

    .cs-listing-grid {
        grid-template-columns: 1fr;
    }

    .cs-full-card {
        padding: 32px 24px;
    }

    .cs-full-card__stats {
        flex-wrap: wrap;
        gap: 24px;
    }

    .cs-single__stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-article__author-card {
        flex-direction: column;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ============================================================
   MOBILE RESPONSIVE — Supplemental pass
   All breakpoints consolidated and gap-filled
   ============================================================ */

/* ---- Nav logo — reduce on mobile -------------------------- */
@media (max-width: 768px) {
    .site-logo img {
        height: 110px;
    }

    .header-inner {
        padding: 18px 24px;
    }

    /* Page hero — reduce top padding to match smaller mobile header */
    .page-hero {
        padding: 112px 0 56px;
    }

    /* Reduce h2 bottom margin on mobile */
    .page-hero__heading {
        margin-bottom: 20px;
    }

    /* Footer logo — smaller on mobile */
    .footer-logo img {
        height: 80px;
    }

    /* Footer nav — wrap tightly */
    .footer-nav {
        gap: 10px 20px;
        margin-top: 16px;
    }

    /* Careers general — stack on mobile */
    .careers-general__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

    .careers-general__action {
        width: 100%;
    }

    .careers-general__action .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Careers listing — heading size */
    .careers-listing__heading {
        font-size: 32px;
    }

    /* Careers card padding */
    .careers-card {
        padding: 28px 24px;
    }

    /* Careers role full — reduce padding */
    .careers-role-full {
        padding: 56px 0 72px;
    }

    .careers-role-full__title {
        font-size: 32px;
    }

    /* Careers form section */
    .careers-form__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .careers-form__heading {
        font-size: 28px;
    }

    /* Services bridge */
    .services-bridge {
        padding: 56px 0;
    }

    /* Services index */
    .svc-index {
        padding: 56px 0;
    }

    /* FAQ category nav — stack items */
    .faq-cat-nav__inner {
        gap: 0;
    }

    .faq-cat-nav__item {
        flex: 1 1 auto;
        text-align: center;
        border-right: none;
        border-bottom: 0.5px solid var(--color-gunmetal);
    }

    .faq-cat-nav__item:last-child {
        border-bottom: none;
    }

    /* FAQ sections */
    .faq-cat__inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .faq-cat__label {
        position: static;
    }

    /* Final CTA section */
    .faq-cta {
        padding: 72px 0 80px;
        text-align: left;
    }

    .faq-cta__heading {
        font-size: 28px;
    }

    /* Package hero CTAs */
    .page-hero__ctas {
        flex-direction: column;
        gap: 12px;
    }

    .page-hero__ctas .btn {
        width: 100%;
        justify-content: center;
    }

    /* Final CTA inner — left-align on mobile */
    .final-cta {
        text-align: left;
    }

    .final-cta__inner {
        align-items: flex-start;
    }
}

/* ---- 480px — very small screens --------------------------- */
@media (max-width: 480px) {
    .site-logo img {
        height: 96px;
    }

    .footer-logo img {
        height: 64px;
    }

    .page-hero {
        padding: 100px 0 48px;
    }

    /* Careers role full - extra small */
    .careers-role-full__title {
        font-size: 28px;
    }

    .careers-listing__heading {
        font-size: 28px;
    }

    /* Stack all hero CTAs */
    .hero__ctas .btn,
    .page-hero__ctas .btn {
        width: 100%;
        justify-content: center;
    }

    /* Tighten section padding further */
    :root {
        --section-padding-top:    48px;
        --section-padding-bottom: 48px;
    }
}

/* =============================================================
   DEDICATED PACKAGE PAGES — Brand Launch / Website Launch / Growth Sprint
   ============================================================= */

/* Hero price line */
.pkg-hero__price {
    font-family: var(--font-primary);
    font-size: 36px;
    font-weight: 600;
    color: var(--color-white);
    margin: 0 0 24px;
    line-height: 1;
}
.pkg-hero__price span {
    font-size: 18px;
    font-weight: 300;
    color: var(--color-smoke);
    margin-left: 4px;
}

/* ── pkg-detail ───────────────────────────────────────────── */
.pkg-detail {
    padding: var(--section-padding-top) 0 var(--section-padding-bottom);
}
.pkg-detail__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}
.pkg-detail__left .eyebrow {
    display: block;
    margin-bottom: 24px;
}
.pkg-detail__heading {
    font-family: var(--font-primary);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.15;
    margin: 0 0 28px;
}
.pkg-detail__body {
    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    margin: 0 0 20px;
}
.pkg-detail__body:last-child { margin-bottom: 0; }

/* Timeline block */
.pkg-timeline-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 0.5px solid var(--color-gunmetal);
}
.pkg-timeline-block__label {
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-volt);
}
.pkg-timeline-block__value {
    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: 500;
    color: var(--color-chalk);
}

/* ── pkg-fit ──────────────────────────────────────────────── */
.pkg-fit {
    padding: var(--section-padding-top) 0 var(--section-padding-bottom);
}
.pkg-fit__header {
    margin-bottom: 56px;
}
.pkg-fit__header .eyebrow {
    display: block;
    margin-bottom: 16px;
}
.pkg-fit__heading {
    font-family: var(--font-primary);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.15;
    margin: 0;
}
.pkg-fit__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}
.pkg-fit__col-heading {
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-smoke);
    margin: 0 0 20px;
}
.pkg-fit__col--yes .pkg-fit__col-heading { color: var(--color-volt); }
.pkg-fit__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pkg-fit__list li {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.6;
    padding-left: 20px;
    position: relative;
}
.pkg-fit__col--yes .pkg-fit__list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-volt);
    font-size: 13px;
    top: 2px;
}
.pkg-fit__col--no .pkg-fit__list li::before {
    content: '×';
    position: absolute;
    left: 0;
    color: var(--color-smoke);
    font-size: 15px;
    top: 1px;
}

.pkg-fit__aside {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-smoke);
    margin-top: 20px;
    padding-top: 16px;
    border-top: 0.5px solid var(--color-gunmetal);
}

.pkg-fit__aside a {
    color: var(--color-chalk);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 200ms ease-out;
}

.pkg-fit__aside a:hover {
    color: var(--color-white);
}

/* ── pkg-process ──────────────────────────────────────────── */
.pkg-process {
    padding: var(--section-padding-top) 0 var(--section-padding-bottom);
}
.pkg-process__header {
    margin-bottom: 64px;
}
.pkg-process__header .eyebrow {
    display: block;
    margin-bottom: 16px;
}
.pkg-process__heading {
    font-family: var(--font-primary);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.15;
    margin: 0;
}
.pkg-process__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.pkg-process__step {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 32px;
    align-items: start;
    padding: 40px 0;
    border-top: 0.5px solid var(--color-gunmetal);
}
.pkg-process__step:last-child {
    border-bottom: 0.5px solid var(--color-gunmetal);
}
.pkg-process__num {
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--color-volt);
    padding-top: 4px;
}
.pkg-process__title {
    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 600;
    color: var(--color-white);
    margin: 0 0 12px;
}
.pkg-process__desc {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.7;
    margin: 0;
}

/* ── pkg-cta ──────────────────────────────────────────────── */
.pkg-cta {
    padding: var(--section-padding-top) 0 var(--section-padding-bottom);
}
.pkg-cta__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 80px;
    align-items: center;
}
.pkg-cta__content .eyebrow {
    display: block;
    margin-bottom: 16px;
}
.pkg-cta__heading {
    font-family: var(--font-primary);
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.2;
    margin: 0 0 16px;
}
.pkg-cta__body {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.7;
    margin: 0;
}
.pkg-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex-shrink: 0;
}
.pkg-cta__alt {
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 300;
    color: var(--color-smoke);
    margin: 0;
    white-space: nowrap;
}
.pkg-cta__alt a {
    color: var(--color-chalk);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.pkg-cta__alt a:hover { color: var(--color-white); }

/* ── Mobile responsive — package detail pages ─────────────── */
@media (max-width: 900px) {
    .pkg-detail__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .pkg-fit__cols {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .pkg-cta__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .pkg-cta__actions {
        width: 100%;
    }
    .pkg-cta__actions .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .pkg-cta__alt {
        white-space: normal;
    }
}

@media (max-width: 600px) {
    .pkg-hero__price {
        font-size: 28px;
    }
    .pkg-process__step {
        grid-template-columns: 40px 1fr;
        gap: 20px;
        padding: 28px 0;
    }
}

/* =============================================================
   PKG COMPARE — Scale Sprint vs Growth Sprint
   ============================================================= */
.pkg-compare {
    padding: var(--section-padding-top) 0 var(--section-padding-bottom);
}
.pkg-compare__inner .eyebrow {
    display: block;
    margin-bottom: 16px;
}
.pkg-compare__heading {
    font-family: var(--font-primary);
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.15;
    margin: 0 0 56px;
}
.pkg-compare__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--color-gunmetal);
    border: 0.5px solid var(--color-gunmetal);
}
.pkg-compare__col {
    background: var(--color-void);
    padding: 40px;
}
.pkg-compare__col--highlight {
    background: var(--color-carbon);
}
.pkg-compare__col-heading {
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-smoke);
    margin: 0 0 24px;
}
.pkg-compare__col--highlight .pkg-compare__col-heading {
    color: var(--color-volt);
}
.pkg-compare__list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pkg-compare__list li {
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.5;
    padding-left: 16px;
    position: relative;
}
.pkg-compare__list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--color-gunmetal);
}
.pkg-compare__col--highlight .pkg-compare__list li {
    color: var(--color-chalk);
}
.pkg-compare__col--highlight .pkg-compare__list li::before {
    color: var(--color-volt);
}
.pkg-compare__link {
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-chalk);
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: color 200ms ease-out;
}
.pkg-compare__link:hover { color: var(--color-white); }

@media (max-width: 640px) {
    .pkg-compare__grid {
        grid-template-columns: 1fr;
    }
    .pkg-compare__col {
        padding: 32px 24px;
    }
}

/* =============================================================
   PKG FINAL CTA — bottom of each package page
   ============================================================= */
.pkg-final-cta {
    padding: var(--section-padding-top) 0 var(--section-padding-bottom);
    border-top: 0.5px solid var(--color-gunmetal);
}
.pkg-final-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}
.pkg-final-cta__top .eyebrow {
    display: block;
    margin-bottom: 20px;
}
.pkg-final-cta__heading {
    font-family: var(--font-primary);
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.05;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}
.pkg-final-cta__sub {
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-smoke);
    letter-spacing: 0.04em;
    margin: 0;
}
.pkg-final-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}
.pkg-final-cta__note {
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 300;
    color: var(--color-smoke);
    margin: 0;
}
.pkg-final-cta__note a {
    color: var(--color-chalk);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 200ms ease-out;
}
.pkg-final-cta__note a:hover { color: var(--color-white); }

@media (max-width: 600px) {
    .pkg-final-cta__actions {
        flex-direction: column;
        width: 100%;
    }
    .pkg-final-cta__actions .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* ============================================================
   FOUNDER LANDING PAGES — SHARED COMPONENTS
   ============================================================ */

/* Shared result card */
.fh-result-card {
    background: var(--color-carbon);
    border: var(--border-hairline);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.fh-result-card__label {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-volt);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.fh-result-card__main {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fh-result-card__num {
    font-size: 64px;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1;
}
.fh-result-card__desc {
    font-size: 15px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.5;
}
.fh-result-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--color-gunmetal);
    border: 1px solid var(--color-gunmetal);
}
.fh-result-card__stat {
    background: var(--color-void);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fh-result-card__val {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-white);
}
.fh-result-card__key {
    font-size: 12px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.4;
}
.fh-result-card__client {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-dark-grey);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Shared package card hook line */
.package-card__hook {
    font-size: 14px;
    font-weight: 300;
    font-style: italic;
    color: var(--color-light-grey);
    margin: 0 0 16px;
    line-height: 1.5;
}

/* ============================================================
   FOUNDERS/HIM PAGE
   ============================================================ */

/* Hero */
.fh-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 80px 0;
}
.fh-hero__inner {
    display: block;
}
.fh-hero__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 680px;
}
.fh-hero__heading {
    font-size: clamp(36px, 3.8vw, 56px);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.05;
    margin: 0;
}
.fh-hero__sub {
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    margin: 0;
    max-width: 520px;
}
.fh-hero__ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Competitive reality section */
.fh-reality {
    padding: 96px 0;
}
.fh-reality__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}
.fh-reality__heading {
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.1;
    margin: 16px 0 0;
}
.fh-reality__item {
    display: flex;
    gap: 20px;
    padding: 28px 0;
    border-bottom: var(--border-hairline);
}
.fh-reality__item:first-child {
    border-top: var(--border-hairline);
}
.fh-reality__marker {
    font-size: 17px;
    color: var(--color-volt);
    font-weight: 500;
    flex-shrink: 0;
    padding-top: 2px;
}
.fh-reality__text {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.7;
    margin: 0;
}

/* Unfair advantage section */
.fh-advantage {
    padding: 96px 0;
}
.fh-advantage__heading {
    font-size: clamp(28px, 3.5vw, 52px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.1;
    margin: 16px 0 64px;
}
.fh-advantage__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--color-gunmetal);
    border: 1px solid var(--color-gunmetal);
}
.fh-advantage__item {
    background: var(--color-void);
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fh-advantage__num {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-volt);
    letter-spacing: 0.15em;
}
.fh-advantage__title {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-white);
    margin: 0;
    line-height: 1.3;
}
.fh-advantage__body {
    font-size: 15px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.7;
    margin: 0;
}

/* Exclusivity strip */
.fh-exclusive {
    padding: 80px 0;
    border-top: var(--border-hairline);
    border-bottom: var(--border-hairline);
}
.fh-exclusive__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}
.fh-exclusive__heading {
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: 600;
    color: var(--color-white);
    margin: 0 0 16px;
}
.fh-exclusive__body {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    margin: 0;
    max-width: 580px;
}
.fh-exclusive__avail {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-shrink: 0;
    align-items: flex-start;
    min-width: 260px;
}
.fh-exclusive__avail-eyebrow {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-volt);
}
.fh-exclusive__avail-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 20px;
    color: var(--color-white);
    margin: 0;
}
.fh-exclusive__avail-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-volt);
    flex-shrink: 0;
}
.fh-exclusive__avail-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}
.fh-exclusive__waitlist {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 14px;
    color: var(--color-smoke);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 200ms ease-out;
}
.fh-exclusive__waitlist:hover {
    color: var(--color-chalk);
}

/* Final CTA */
.fh-cta {
    padding: 96px 0;
}
.fh-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
.fh-cta__heading {
    font-size: clamp(36px, 4vw, 64px);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.05;
    margin: 0 0 24px;
}
.fh-cta__body {
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    margin: 0 0 32px;
    max-width: 540px;
}
.fh-cta__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}
.fh-cta__footnote {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-dark-grey);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
}

/* ============================================================
   FOUNDERS/HER PAGE
   ============================================================ */

/* Hero */
.fher-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 80px 0;
}
.fher-hero__inner {
    display: block;
}
.fher-hero__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 680px;
}
.fher-hero__heading {
    font-size: clamp(36px, 3.8vw, 56px);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.05;
    margin: 0;
}
.fher-hero__sub {
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    margin: 0;
    max-width: 520px;
}
.fher-hero__ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* The gap section */
.fher-gap {
    padding: 96px 0;
}
.fher-gap__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}
.fher-gap__heading {
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.1;
    margin: 16px 0 0;
}
.fher-gap__item {
    display: flex;
    gap: 20px;
    padding: 28px 0;
    border-bottom: var(--border-hairline);
}
.fher-gap__item:first-child {
    border-top: var(--border-hairline);
}
.fher-gap__marker {
    font-size: 17px;
    color: var(--color-gunmetal);
    font-weight: 500;
    flex-shrink: 0;
    padding-top: 2px;
}
.fher-gap__text {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.7;
    margin: 0;
}

/* How Mode works */
.fher-how {
    padding: 96px 0;
}
.fher-how__heading {
    font-size: clamp(28px, 3.5vw, 52px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.1;
    margin: 16px 0 20px;
}
.fher-how__intro {
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    margin: 0 0 64px;
    max-width: 640px;
}
.fher-how__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--color-gunmetal);
    border: 1px solid var(--color-gunmetal);
}
.fher-how__item {
    background: var(--color-void);
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fher-how__num {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-light-grey);
    letter-spacing: 0.15em;
}
.fher-how__title {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-white);
    margin: 0;
    line-height: 1.3;
}
.fher-how__body {
    font-size: 15px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.7;
    margin: 0;
}

/* Trust section */
.fher-trust {
    padding: 80px 0;
}
.fher-trust__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.fher-trust__quote {
    margin: 0;
    padding: 0 0 0 32px;
    border-left: 2px solid var(--color-gunmetal);
}
.fher-trust__quote p {
    font-size: 20px;
    font-weight: 300;
    font-style: italic;
    color: var(--color-chalk);
    line-height: 1.6;
    margin: 0;
}
.fher-trust__body {
    font-size: 16px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    margin: 0 0 24px;
}
.fher-trust__link {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-chalk);
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: color 200ms ease-out;
}
.fher-trust__link:hover { color: var(--color-white); }

/* Final CTA */
.fher-cta {
    padding: 96px 0;
}
.fher-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
.fher-cta__heading {
    font-size: clamp(32px, 3.5vw, 56px);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.05;
    margin: 0 0 24px;
}
.fher-cta__body {
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    margin: 0 0 32px;
    max-width: 540px;
}
.fher-cta__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Responsive — both founder pages */
@media (max-width: 960px) {
    .fh-reality__inner,
    .fher-gap__inner,
    .fher-trust__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .fh-advantage__grid,
    .fher-how__grid {
        grid-template-columns: 1fr;
    }
    .fh-exclusive__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .fh-hero,
    .fher-hero {
        padding: 120px 0 64px;
    }
    .fh-hero__ctas,
    .fher-hero__ctas,
    .fh-cta__actions,
    .fher-cta__actions {
        flex-direction: column;
        width: 100%;
    }
    .fh-hero__ctas .btn,
    .fher-hero__ctas .btn,
    .fh-cta__actions .btn,
    .fher-cta__actions .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .fh-advantage__item,
    .fher-how__item {
        padding: 28px 24px;
    }
}

/* ============================================================
   HOMEPAGE — GP PROOFLIST (Pillar 3: What's different)
   ============================================================ */
.gp-pillar__prooflist {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.gp-prooflist__item {
    padding: 28px 0;
    border-bottom: var(--border-hairline);
}

.gp-prooflist__item:first-child {
    border-top: var(--border-hairline);
}

.gp-prooflist__title {
    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: 500;
    color: var(--color-chalk);
    margin: 0 0 8px;
    letter-spacing: 0.01em;
}

.gp-prooflist__body {
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.65;
    margin: 0;
    max-width: 540px;
}

/* ============================================================
   WHY MODE PAGE
   ============================================================ */

/* Section padding for all wm- sections */
.wm-opening,
.wm-refuse,
.wm-instead,
.wm-letdown,
.wm-tenpoints {
    padding: 96px 0;
}

/* Opening argument — two-column layout */
.wm-opening__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.wm-opening__left {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.wm-opening__body {
    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    margin: 0;
}

.wm-opening__right {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.wm-quote {
    border-left: 2px solid var(--color-gunmetal);
    padding: 16px 24px;
    margin: 0;
}

.wm-quote p {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 300;
    font-style: italic;
    color: var(--color-light-grey);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .wm-opening__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

/* What we refuse to do */
.wm-refuse__header {
    margin-bottom: 64px;
}

.wm-refuse__heading {
    font-family: var(--font-primary);
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.1;
    margin: 16px 0 0;
}

.wm-refuse__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wm-refuse__item {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    padding: 40px 0;
    border-bottom: var(--border-hairline);
}

.wm-refuse__item:first-child {
    border-top: var(--border-hairline);
}

.wm-refuse__num {
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-volt);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    flex-shrink: 0;
    width: 32px;
    padding-top: 4px;
}

.wm-refuse__content {
    flex: 1;
}

.wm-refuse__title {
    font-family: var(--font-primary);
    font-size: 22px;
    font-weight: 500;
    color: var(--color-white);
    margin: 0 0 12px;
    letter-spacing: 0.01em;
}

.wm-refuse__body {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    margin: 0;
    max-width: 600px;
}

@media (max-width: 600px) {
    .wm-refuse__item {
        gap: 24px;
        padding: 32px 0;
    }
    .wm-refuse__title {
        font-size: 18px;
    }
}

/* What we do instead */
.wm-instead__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.wm-instead__left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wm-instead__heading {
    font-family: var(--font-primary);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.15;
    margin: 16px 0 0;
}

.wm-instead__right {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 8px;
    align-items: flex-start;
}

.wm-instead__body {
    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    margin: 0;
}

@media (max-width: 768px) {
    .wm-instead__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* Transparency */
.wm-transparency__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.wm-transparency__left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wm-transparency__heading {
    font-family: var(--font-primary);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.15;
    margin: 16px 0 0;
}

.wm-transparency__right {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 8px;
    align-items: flex-start;
}

.wm-transparency__body {
    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    margin: 0;
}

@media (max-width: 768px) {
    .wm-transparency__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* If you've been let down */
.wm-letdown__inner {
    max-width: 760px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.wm-letdown__heading {
    font-family: var(--font-primary);
    font-size: clamp(26px, 3.5vw, 44px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.15;
    margin: 0 0 40px;
}

.wm-letdown__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.wm-letdown__body p {
    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    margin: 0;
}

/* Ten pain points answered */
.wm-tenpoints__header {
    margin-bottom: 64px;
    max-width: 680px;
}

.wm-tenpoints__heading {
    font-family: var(--font-primary);
    font-size: clamp(26px, 3.5vw, 44px);
    font-weight: 600;
    color: var(--color-white);
    line-height: 1.15;
    margin: 16px 0 16px;
}

.wm-tenpoints__intro {
    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.7;
    margin: 0;
}

.wm-tenpoints__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background-color: var(--color-gunmetal);
    border: 1px solid var(--color-gunmetal);
}

.wm-tenpoint {
    background: var(--color-carbon);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wm-tenpoint__complaint {
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 300;
    font-style: italic;
    color: var(--color-light-grey);
    line-height: 1.6;
    margin: 0;
    padding-left: 16px;
    border-left: 2px solid var(--color-gunmetal);
}

.wm-tenpoint__answer {
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 400;
    color: var(--color-chalk);
    line-height: 1.65;
    margin: 0;
}

@media (max-width: 768px) {
    .wm-tenpoints__grid {
        grid-template-columns: 1fr;
    }
    .wm-tenpoint {
        padding: 28px 24px;
    }
}

@media (max-width: 600px) {
    .wm-tenpoints__header {
        margin-bottom: 40px;
    }
    .wm-tenpoint {
        padding: 24px 20px;
    }

/* ============================================================
   BRIEF PAGES — /brief/brand  /brief/website  /brief/growth
   ============================================================ */

.brief-page {
    background-color: var(--color-void);
    min-height: 100vh;
    padding: 120px 0 96px;
}

.brief-container {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Header */
.brief-header {
    margin-bottom: 56px;
    border-bottom: var(--border-hairline);
    padding-bottom: 48px;
}

.brief-heading {
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.05;
    margin: 16px 0 16px;
}

.brief-sub {
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    margin: 0;
}

/* Sections */
.brief-section {
    margin-bottom: 48px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.brief-section__label {
    display: block;
    margin-bottom: -8px;
}

/* Fields */
.start-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.start-label {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 14px;
    color: var(--color-chalk);
    letter-spacing: 0.01em;
}

.start-required {
    color: var(--color-volt);
    margin-left: 2px;
}

.start-optional {
    color: var(--color-smoke);
    font-weight: 300;
}

.start-input,
.start-textarea {
    background-color: var(--color-carbon);
    border: 0.5px solid var(--color-gunmetal);
    color: var(--color-chalk);
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 300;
    padding: 14px 16px;
    width: 100%;
    outline: none;
    transition: border-color 200ms ease-out;
    border-radius: 0;
    -webkit-appearance: none;
    box-sizing: border-box;
}

.start-input:focus,
.start-textarea:focus {
    border-color: var(--color-smoke);
}

.start-input::placeholder,
.start-textarea::placeholder {
    color: var(--color-gunmetal);
    font-weight: 300;
}

.start-textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

/* Radio groups */
.start-radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.start-radio-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 300;
    color: var(--color-smoke);
    transition: color 200ms ease-out;
}

.start-radio-label:hover {
    color: var(--color-chalk);
}

.start-radio {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 0.5px solid var(--color-gunmetal);
    background: var(--color-carbon);
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    transition: border-color 200ms ease-out, background 200ms ease-out;
    position: relative;
}

.start-radio:checked {
    border-color: var(--color-volt);
    background: var(--color-volt);
}

/* Errors */
.brief-errors {
    background-color: var(--color-carbon);
    border-left: 2px solid #ff4444;
    padding: 20px 24px;
    margin-bottom: 32px;
}

.brief-errors p {
    font-size: 14px;
    font-weight: 300;
    color: #ff6666;
    margin: 0 0 6px;
}

.brief-errors p:last-child {
    margin-bottom: 0;
}

/* Submit */
.brief-submit {
    padding-top: 16px;
    border-top: var(--border-hairline);
}

/* Confirmation */
.brief-confirm {
    text-align: left;
    padding: 40px 0;
}

.brief-confirm__icon {
    width: 40px;
    height: 40px;
    border: 0.5px solid var(--color-volt);
    margin-bottom: 32px;
    position: relative;
}

.brief-confirm__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg) translate(0px, -3px);
    width: 6px;
    height: 12px;
    border-right: 2px solid var(--color-volt);
    border-bottom: 2px solid var(--color-volt);
}

.brief-confirm__heading {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.1;
    margin: 16px 0 20px;
}

.brief-confirm__body {
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
}

.brief-confirm__body strong {
    color: var(--color-chalk);
    font-weight: 400;
}

/* Responsive */
@media (max-width: 600px) {
    .brief-page {
        padding: 96px 0 64px;
    }
    .brief-container {
        padding: 0 24px;
    }
    .start-radio-group {
        gap: 16px;
    }
}

/* ── Footer wisdom line ─────────────────────────────────────── */
.footer-wisdom {
    font-size: 11px;
    font-weight: 300;
    color: var(--color-dark-grey);
    margin-top: 4px;
    letter-spacing: 0.02em;
}

/* ── Contact form note ──────────────────────────────────────── */
.form-note {
    font-size: 12px;
    font-weight: 300;
    color: var(--color-smoke);
    margin-top: 12px;
    opacity: 0.6;
}

/* ── About page — standalone statement strip ─────────────────── */
.about-statement {
    padding: 80px 0;
    border-top: var(--border-hairline);
    border-bottom: var(--border-hairline);
    background-color: var(--color-void);
}
.about-statement--carbon {
    background-color: var(--color-carbon);
}
.about-statement__line {
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 300;
    font-style: italic;
    color: var(--color-smoke);
    max-width: 680px;
    line-height: 1.5;
}

/* ── 404 page ────────────────────────────────────────────────── */
.page-404 {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    background-color: var(--color-void);
    padding: 180px 0 80px;
}
.page-404__eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-volt);
    margin-bottom: 24px;
}
.page-404__heading {
    font-size: clamp(48px, 6vw, 96px);
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.0;
    margin-bottom: 24px;
}
.page-404__sub {
    font-size: 17px;
    font-weight: 300;
    color: var(--color-smoke);
    line-height: 1.75;
    max-width: 480px;
    margin-bottom: 48px;
}
.page-404__wisdom {
    font-size: 13px;
    font-weight: 300;
    font-style: italic;
    color: var(--color-dark-grey);
    margin-top: 48px;
    border-top: var(--border-hairline);
    padding-top: 24px;
    max-width: 400px;
}
}

/* ═══════════════════════════════════════════════════════════════
   Complianz GDPR Cookie Banner — Mode Theme Override
   Plugin: "Complianz – GDPR/CCPA Cookie Consent" by Really Simple Plugins
   Approach: override CSS custom properties + structural selectors
   Plugin settings: position → bottom, width → 100%
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. CSS variable overrides — covers banner + preferences modal ── */
:root {
    --cmplz_banner_background_color:          #141414;
    --cmplz_banner_border_color:              #1E1E1E;
    --cmplz_banner_border_width:              0.5px;
    --cmplz_banner_border_radius:             2px;
    --cmplz_banner_width:                     100%;
    --cmplz_banner_margin:                    0;
    --cmplz_text_color:                       #666666;
    --cmplz_text_font_size:                   13px;
    --cmplz_text_line_height:                 1.65;
    --cmplz_title_font_size:                  15px;
    --cmplz_hyperlink_color:                  #F0F0F0;
    --cmplz_link_font_size:                   11px;
    --cmplz_button_accept_background_color:   #C8FF00;
    --cmplz_button_accept_border_color:       #C8FF00;
    --cmplz_button_accept_text_color:         #0A0A0A;
    --cmplz_button_deny_background_color:     transparent;
    --cmplz_button_deny_border_color:         #404041;
    --cmplz_button_deny_text_color:           #666666;
    --cmplz_button_settings_background_color: transparent;
    --cmplz_button_settings_border_color:     #404041;
    --cmplz_button_settings_text_color:       #666666;
    --cmplz_button_border_radius:             2px;
    --cmplz_button_font_size:                 11px;
    --cmplz_slider_active_color:              #C8FF00;
    --cmplz_slider_inactive_color:            #1E1E1E;
    --cmplz_slider_bullet_color:              #0A0A0A;
    --cmplz_category_body_font_size:          13px;
    --cmplz_category_header_title_font_size:  14px;
    --cmplz_category_header_always_active_color: #C8FF00;
}

/* ── 2. Font — Exo throughout ── */
.cmplz-cookiebanner,
.cmplz-cookiebanner *,
.cmplz-preferences-overview,
.cmplz-preferences-overview * {
    font-family: 'Exo', sans-serif !important;
}

/* ── 3. Banner layout — full-width bottom bar ── */
.cmplz-cookiebanner {
    border-radius: 0 !important;
    border-top: 0.5px solid #1E1E1E !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 40px !important;
}

/* ── 4. Button typography — uppercase tracking ── */
.cmplz-btn {
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    padding: 10px 20px !important;
    transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out !important;
}

.cmplz-btn.cmplz-accept:hover { background-color: #DFFF00 !important; }
.cmplz-btn.cmplz-deny:hover,
.cmplz-btn.cmplz-settings:hover { border-color: #666666 !important; color: #F0F0F0 !important; }

/* ── 5. Links ── */
.cmplz-cookiebanner a { color: #F0F0F0 !important; text-decoration: underline !important; }
.cmplz-cookiebanner a:hover { color: #FFFFFF !important; }

/* ── 6. Manage consent button (floating tab) ── */
#cmplz-manage-consent .cmplz-manage-consent {
    background-color: #141414 !important;
    border-color: #1E1E1E !important;
    color: #666666 !important;
    border-radius: 2px 2px 0 0 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
}

/* ── 7. Preferences modal ── */
.cmplz-overlay { background-color: rgba(10,10,10,0.88) !important; }

.cmplz-preferences-overview {
    background-color: #141414 !important;
    border: 0.5px solid #1E1E1E !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.cmplz-preferences-overview .cmplz-title { color: #FFFFFF !important; font-weight: 600 !important; }
.cmplz-preferences-overview p { color: #666666 !important; font-weight: 300 !important; }
.cmplz-preferences-overview label { color: #666666 !important; }
.cmplz-preferences-overview .cmplz-category-header { border-bottom: 0.5px solid #1E1E1E !important; }
.cmplz-preferences-overview .cmplz-category-body { background-color: #0A0A0A !important; border: 0.5px solid #1E1E1E !important; }

/* ── 8. Mobile ── */
@media (max-width: 768px) {
    .cmplz-cookiebanner { padding: 16px 20px !important; }
    .cmplz-buttons { flex-direction: column !important; width: 100% !important; }
    .cmplz-btn { width: 100% !important; text-align: center !important; }
}

/* ============================================================
   BROWSER AUTOFILL OVERRIDE
   Prevents Chrome/Safari from injecting white backgrounds
   on focused or autofilled form fields.
   ============================================================ */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--color-carbon) inset !important;
    box-shadow: 0 0 0 1000px var(--color-carbon) inset !important;
    -webkit-text-fill-color: var(--color-chalk) !important;
    caret-color: var(--color-chalk) !important;
    border: 0.5px solid var(--color-gunmetal) !important;
    border-radius: 2px !important;
    transition: background-color 5000s ease-in-out 0s, border-color 200ms ease-out !important;
}

/* ============================================================
   ULTRAWIDE / HIGH-DPI BREAKPOINTS
   Scales layout and typography for 1920px+ and 2K/4K/34-inch
   curved displays so content fills the viewport properly.
   ============================================================ */

@media (min-width: 1800px) {
    :root {
        --max-width: 1480px;
    }
}

@media (min-width: 2200px) {
    :root {
        --max-width: 1680px;
    }
    h1 {
        font-size: clamp(88px, 4.8vw, 112px);
    }
    h2 {
        font-size: clamp(52px, 3vw, 68px);
    }
    /* Homepage hero */
    .gp-hero__heading {
        font-size: clamp(56px, 3.5vw, 80px);
    }
    .gp-hero__content {
        max-width: 780px;
    }
    .gp-hero__sub {
        font-size: 18px;
        max-width: 580px;
    }
}

@media (min-width: 2800px) {
    :root {
        --max-width: 2000px;
    }
    h1 {
        font-size: clamp(100px, 4.2vw, 140px);
    }
    h2 {
        font-size: clamp(64px, 2.6vw, 88px);
    }
    body, p {
        font-size: 19px;
    }
    .eyebrow {
        font-size: 13px;
    }
    .btn {
        font-size: 14px;
        padding: 18px 36px;
    }
    /* Homepage hero */
    .gp-hero__heading {
        font-size: clamp(80px, 3.8vw, 116px);
    }
    .gp-hero__content {
        max-width: 920px;
    }
    .gp-hero__sub {
        font-size: 20px;
        max-width: 680px;
    }
}