/* ============================================
   Niki Kova'cs — Portfolio Design System
   Single source of truth for tokens + primitives.
   Homepage, work, about, and case studies all
   consume these shared building blocks.
   ============================================ */

:root {
    /* Color */
    --black: #0a0a0a;
    --white: #FFFEFC;
    --off-white: #f7f7f5;
    --blue: #1658e1;
    --blue-hover: #0f47c4;
    --navy: #231d5d; /* Figma: Product Designer / work title / pager accent */
    --accent: #e6007a;
    --accent-hover: #c40068;
    --gray-100: #f0f0ee;
    --gray-300: #c8c8c4;
    --gray-500: #8a8a86;
    --gray-700: #4a4a48;
    --border: var(--gray-300);

    /* Type — families */
    --font-sans: 'Open Sans', system-ui, sans-serif;
    --font-display: var(--font-sans);
    --font-body: var(--font-sans);
    --font-script: var(--font-sans);
    --font-serif: 'PT Serif', Georgia, serif; /* Figma: Quote serif / Section serif / Display serif */

    /* Type — static scale (mirrors the Figma "Foundations" text styles).
       px values assume a 16px root. */
    --text-micro: 0.65rem;      /* 10.4px */
    --text-caption: 0.7rem;     /* 11.2px */
    --text-label: 0.875rem;     /* 14px   — Figma: Label */
    --text-meta: 0.8rem;        /* 12.8px — Figma: Meta */
    --text-detail: 0.85rem;     /* 13.6px */
    --text-ui: 0.875rem;        /* 14px   */
    --text-services: 0.9rem;    /* 14.4px — Figma: Services */
    --text-nav: 0.95rem;        /* 15.2px — Figma: Nav Link */
    --text-body: 1rem;          /* 16px   — Figma: Body */
    --text-lead: 1.05rem;       /* 16.8px */
    --text-quote-serif: 2rem;   /* 32px   — Figma: Quote serif (PT Serif italic) */
    --text-section-serif: 1.5rem; /* 24px — Figma: Section serif (PT Serif italic) */

    /* Type — fluid scale. Figma styles are fixed px and correspond to the
       clamp() maximum (desktop) end of each ramp. Foundations — Type (13:2). */
    --text-hero-title: clamp(1.1rem, 2vw, 1.35rem);      /* max 21.6px */
    --text-card-title: clamp(1.25rem, 2.5vw, 1.5rem);    /* max 24px — Figma: H4 */
    --text-subsection: clamp(1.5rem, 3vw, 2rem);         /* max 32px — Figma: H3 */
    --text-section-title: clamp(1.75rem, 4vw, 2.75rem);  /* max 44px — Figma: H2 */
    --text-h1: clamp(2rem, 5vw, 3.5rem);                 /* max 56px — Figma: H1 */
    --text-display: clamp(2.75rem, 8vw, 5rem);          /* max 80px — Figma: Display */
    --text-display-serif: clamp(2.75rem, 8vw, 5rem);    /* max 80px — Figma: Display serif */
    --text-body-fluid: clamp(0.95rem, 1.4vw, 1.05rem);

    --lh-body: 1.75;
    --lh-tight: 0.95;
    --tracking-label: 0.014em; /* Figma: 0.2px on 14px Label text */
    --tracking-h1: -1.1px;     /* Figma: H1 */
    --tracking-display: -2px;  /* Figma: Display */
    --lh-display: 1;           /* Figma: Display lineHeight 100% */
    --tracking-hero: -0.03em;

    /* Motion + chrome */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --nav-height: 72px;
    --parallel-sticky-top: calc(var(--nav-height) + 2rem);
    --radius-pill: 9999px;

    /* Layout */
    --container: min(1280px, 100%);
    --container-wide: 1400px;
    --content-column: min(720px, 100%);
    --prose-width: 62ch;
    --section-pad: clamp(2.5rem, 6vw, 4.5rem);
    --page-gutter: clamp(1.5rem, 4vw, 3rem);
    --brand-logo-w: 160px;
    --brand-logo-h: 107px;
    --brand-logo-gap: 1.333rem;
    /* Figma frames: Mobile 375 · Tablet 768 · Desktop 1440 */
    --bp-mobile: 767px;
    --bp-tablet: 1023px;
}

/* ---- Layout shells ---- */
.content-column {
    width: var(--content-column);
    margin-inline: auto;
}

.content-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container-wide {
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

/* ---- Design system primitives ---- */
.ds-label,
.section-label,
.case-study-label {
    font-family: var(--font-display);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 0.75rem;
}

.ds-meta-index,
.meta-index,
.panel-index {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-section-serif);
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--black);
    margin-bottom: 0.5rem;
}

.ds-meta-services,
.meta-services,
.panel-services {
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: 400;
    color: var(--gray-500);
    margin-bottom: 0;
    line-height: 1.75;
}

.ds-prose {
    font-size: var(--text-body);
    line-height: var(--lh-body);
    color: var(--gray-700);
    max-width: var(--prose-width);
}

.ds-display-title {
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: 600;
    letter-spacing: var(--tracking-display);
    line-height: var(--lh-display);
}

.ds-h1 {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: 600;
    letter-spacing: var(--tracking-h1);
    line-height: 1.2;
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    background: var(--white);
}

body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: 1.6;
    color: var(--black);
    background: var(--white);
    overflow-x: hidden;
}

body.loading {
    overflow: hidden;
}

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

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

button {
    font: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

ul { list-style: none; }

.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 10000;
    padding: 0.75rem 1.25rem;
    background: var(--blue);
    color: var(--white);
    border-radius: 0;
}

.skip-link:focus {
    top: 1rem;
}

/* ---- Loading Screen ---- */
.loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    transition: opacity 0.6s var(--ease-out), visibility 0.6s;
}

.loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-text {
    display: flex;
    gap: 0.05em;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: lowercase;
}

.loader-char {
    display: inline-block;
    animation: loaderBounce 0.8s var(--ease-out) infinite;
}

.loader-char:nth-child(1) { animation-delay: 0s; }
.loader-char:nth-child(2) { animation-delay: 0.08s; }
.loader-char:nth-child(3) { animation-delay: 0.16s; }
.loader-char:nth-child(4) { animation-delay: 0.24s; }
.loader-char:nth-child(5) { animation-delay: 0.32s; }
.loader-char:nth-child(6) { animation-delay: 0.4s; }
.loader-char:nth-child(7) { animation-delay: 0.48s; }
.loader-char:nth-child(8) { animation-delay: 0.56s; }
.loader-char:nth-child(9) { animation-delay: 0.64s; }
.loader-char:nth-child(10) { animation-delay: 0.72s; }

@keyframes loaderBounce {
    0%, 100% { transform: translateY(0); opacity: 0.3; }
    50% { transform: translateY(-12px); opacity: 1; }
}

/* ---- Navigation ---- */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--nav-height);
    background: transparent;
    transition: background 0.3s, box-shadow 0.3s;
}

.nav.scrolled {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.nav-logo {
    font-family: var(--font-display);
    font-size: var(--text-card-title);
    font-weight: 600;
    letter-spacing: -0.4px; /* Figma: H4 */
    color: var(--black);
}

.nav-logo-slash {
    font-weight: 600;
}

.nav-menu {
    display: none;
    gap: clamp(1.25rem, 3vw, 3rem);
    align-items: center;
}

.nav-toggle {
    display: none !important;
}

.hero-nav-menu,
.hero-nav-toggle {
    display: none !important;
}

.nav-link {
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--black);
    position: relative;
    padding-bottom: 0.4rem;
    transition: opacity 0.2s;
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--black);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s var(--ease-out);
}

.nav-link:hover {
    opacity: 0.75;
}

.nav-link.active::after {
    transform: scaleX(1);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background: var(--black);
    transition: transform 0.3s, opacity 0.3s;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---- Hero — split layout (visual + info grid) ---- */
.hero--split {
    min-height: auto;
    padding: 0;
    margin: 0;
    display: block;
    background: var(--white);
}

#main-content > .hero--split:first-child {
    margin-top: 0;
}

.hero-visual {
    position: relative;
    width: 100%;
    min-height: clamp(280px, 52vh, 540px);
    background: var(--gray-700);
}

.hero-visual-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-visual-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
    z-index: 1;
}

.hero--split .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(1);
}

.hero--split .hero-video.is-ready {
    z-index: 0;
}

.hero--split .hero-video.is-ready + .hero-video-placeholder {
    opacity: 0;
    visibility: hidden;
}

.hero-video-placeholder {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg, #3a3a3a 0%, #1a1a1a 50%, #2d2d2d 100%);
    z-index: 0;
}

.hero-video-placeholder-label {
    font-family: var(--font-display);
    font-size: var(--text-meta);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.hero-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 3rem);
}

.hero-nav-logo {
    font-family: var(--font-display);
    font-size: var(--text-body-fluid);
    font-weight: 400;
    color: var(--white);
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.hero-nav-logo:hover {
    opacity: 0.75;
}

.hero-nav-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(1.5rem, 4vw, 2.75rem);
    margin-left: auto;
}

.hero-nav-link {
    font-family: var(--font-display);
    font-size: clamp(0.9rem, 1.4vw, 1rem);
    font-weight: 400;
    color: var(--white);
    transition: opacity 0.2s;
}

.hero-nav-link:hover,
.hero-nav-link.active {
    opacity: 0.7;
}

.hero-nav-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    margin-left: auto;
    padding: 4px;
}

.hero-nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--white);
    transition: transform 0.3s, opacity 0.3s;
}

.hero-nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
}

.hero-nav-toggle[aria-expanded="true"] span:nth-child(2) {
    transform: translateY(-4px) rotate(-45deg);
}

.hero-info {
    background: var(--white);
}

/* Hero content row — title + tagline on the left, pill CTA pushed right.
   Mirrors the Figma "Hero Content" frame (space-between, bottom-aligned). */
.hero-info-grid {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 2.75rem);
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    /* Bottom pad ≈ one hero line (Figma: space under copy to stats rule) */
    padding: calc(var(--nav-height) + clamp(1.5rem, 3.5vw, 2.5rem)) var(--page-gutter) clamp(2.75rem, 4.5vw, 3.5rem);
}

.hero-info-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 0.35em;
    max-width: 45rem; /* 720 — Figma Hero Left */
}

.hero-info-cell--role,
.hero-info-cell--bio {
    display: contents;
}

.hero-eyebrow {
    color: var(--gray-500);
}

/* Page hero — Figma Home 19:368 H2 (44 / lh 1.1 / -0.9) */
.hero-role-title {
    font-family: var(--font-display);
    font-size: var(--text-section-title); /* H2 44 */
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.9px;
    color: var(--navy); /* “Product Designer” */
}

.hero-info-cell--bio .hero-tagline {
    font-family: var(--font-display);
    font-size: var(--text-section-title); /* H2 44 */
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.9px;
    color: var(--black);
    max-width: none;
}

/* ---- Hero stats band (Figma Home)
   Same shell as .hero-info-grid: container-wide + page gutters.
   Rules sit on the inner content box so they align with the hero text,
   not the viewport and not under the gutter padding. */
.hero-stats-band {
    border: none;
    background: var(--white);
    padding: 0;
}

.hero-stats-frame {
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.hero-stats-inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    width: 100%;
    margin: 0;
    /* Top rule spans the content column; no divider below (per design pass) */
    border-top: 1px solid var(--border);
    border-bottom: none;
    padding: clamp(1.75rem, 3.5vw, 2.625rem) 0;
}

/* Figma: three equal columns, centered copy — no vertical rules */
.hero-stats-inner .hero-stat {
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.35rem;
    padding-inline: clamp(0.75rem, 2vw, 1.5rem);
}

/* Stats figures — Foundations H1 size (not Display 84) */
.hero-stats-inner .hero-stat-value {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--tracking-h1);
    color: var(--black);
    text-transform: none;
}

/* Foundations Meta — sentence case (yrs experience / brands / sectors) */
.hero-stats-inner .hero-stat-label {
    font-family: var(--font-display);
    font-size: var(--text-meta);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    color: var(--gray-500);
    max-width: none;
}

.hero-name {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--black);
    margin-bottom: 0.75rem;
}

.hero-tagline {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    font-weight: 400;
    line-height: 1.55;
    color: var(--gray-700);
    max-width: 32ch;
}

.hero-info-cell--cta,
.hero-info-cell--stats {
    align-self: end;
}

.hero-consultation {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    width: 100%;
    color: var(--black);
    transition: opacity 0.2s;
}

.hero-consultation:hover {
    opacity: 0.65;
}

.hero-consultation-label {
    font-family: var(--font-display);
    font-size: clamp(0.85rem, 1.2vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.hero-consultation-line {
    flex: 1;
    height: 1px;
    background: var(--black);
    position: relative;
    min-width: 3rem;
}

.hero-consultation-line::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid var(--black);
    border-top: 1.5px solid var(--black);
    transform: translateY(-50%) rotate(45deg);
}

.hero-info-cell--stats {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

.hero-stat {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.hero-stat-value {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--black);
}

.hero-stat-label {
    font-family: var(--font-display);
    font-size: clamp(0.75rem, 1vw, 0.85rem);
    font-weight: 400;
    line-height: 1.35;
    color: var(--gray-500);
    max-width: 10ch;
}

/* ---- Hero (legacy) ---- */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--nav-height) + 2rem) 0 0;
    position: relative;
    overflow: hidden;
}

.hero.hero--split {
    min-height: auto;
    padding: 0;
    margin: 0;
    display: block;
    justify-content: initial;
}

.hero--editorial {
    min-height: auto;
    justify-content: flex-start;
    padding-top: calc(var(--nav-height) + clamp(1.5rem, 4vh, 2.5rem));
    padding-bottom: clamp(3rem, 8vh, 5rem);
    background: var(--white);
    overflow: hidden;
}

.hero--editorial .hero-inner {
    width: var(--content-column);
    margin-inline: auto;
    text-align: center;
}

.hero-watermark {
    font-family: var(--font-display);
    font-size: clamp(4.5rem, 16vw, 15.625rem);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.04em;
    color: var(--black);
    margin-bottom: clamp(1.5rem, 4vw, 3rem);
    white-space: nowrap;
    text-align: center;
}

.hero-copy-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    margin-bottom: clamp(2rem, 5vh, 3.5rem);
}

.hero--editorial .hero-headline {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    max-width: 18ch;
    margin-bottom: 0;
    text-align: center;
}

.hero-lead {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 400;
    line-height: 1.55;
    color: var(--black);
    max-width: 42ch;
    text-align: center;
    margin-inline: auto;
    padding-top: 0;
}

.hero-media {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 1;
    min-height: clamp(220px, 32vw, 400px);
    border-radius: 20px;
    overflow: hidden;
    background: var(--gray-100);
}

.hero-video,
.hero-highlights-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-video {
    object-fit: cover;
    object-position: center;
}

.hero-video[hidden],
.hero-highlights-fallback[hidden] {
    display: none;
}

.hero-highlights-fallback {
    background: var(--gray-100);
}

.hero-highlights-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.1s ease, transform 6s ease;
}

.hero-highlights-slide.active {
    opacity: 1;
    transform: scale(1);
}

.hero--intro {
    min-height: auto;
    justify-content: flex-start;
    padding-top: calc(var(--nav-height) + clamp(2.5rem, 6vh, 4.5rem));
    padding-bottom: 0;
    background: var(--off-white);
}

.hero-inner {
    width: var(--container-wide);
    margin-inline: auto;
}

.hero-headline {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5.5vw, 4.25rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    max-width: 15ch;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.hero-accent {
    color: var(--accent);
}

.hero-byline {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 400;
    line-height: 1.55;
    color: var(--gray-700);
    max-width: 42ch;
}

.hero-byline strong {
    font-weight: 600;
    color: var(--accent);
}

.hero-social-row {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    margin-top: clamp(2rem, 5vh, 3rem);
    margin-bottom: clamp(2.5rem, 6vh, 4rem);
}

.hero-social-line {
    flex: 1;
    max-width: min(52%, 28rem);
    height: 2px;
    background: var(--accent);
}

.hero-social-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hero-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--gray-700);
    transition: color 0.2s, transform 0.2s;
}

.hero-social-link:hover {
    color: var(--accent);
    transform: translateY(-1px);
}

.hero-social-link svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: currentColor;
}

.hero-clients {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1.25rem, 3.5vw, 3rem);
    padding-bottom: clamp(3rem, 8vh, 5rem);
}

.hero-clients li {
    font-family: var(--font-display);
    font-size: clamp(0.8rem, 1.4vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--black);
    opacity: 0.82;
}

.hero--compact {
    min-height: auto;
    justify-content: flex-end;
    padding-top: calc(var(--nav-height) + 3rem);
    padding-bottom: 0;
    background: var(--white);
}

.hero--compact .hero-content {
    width: var(--container-wide);
    margin-inline: auto;
    padding-bottom: 3rem;
}

.hero-role {
    font-family: var(--font-display);
    font-size: var(--text-section-title);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
    max-width: 16ch;
}

.hero-intro {
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: 1.65;
    color: var(--gray-700);
    max-width: 52ch;
}

/* Section header row — Adrian layout */
.section-header-row {
    display: block;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--gray-300);
    margin-bottom: 1.75rem;
}

.section-header-row .section-title {
    margin-bottom: 0;
    font-size: var(--text-section-title);
    font-weight: 700;
}

.section-next-btn {
    position: fixed;
    right: clamp(1rem, 3vw, 1.5rem);
    bottom: clamp(1rem, 3vw, 1.5rem);
    z-index: 900;
    min-width: 48px;
    min-height: 48px;
    white-space: nowrap;
}

.section-next-btn.pill-btn {
    background: var(--white);
    border: 1px solid var(--gray-300);
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.section-next-btn--hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}

section[id] {
    scroll-margin-top: var(--nav-height);
}

/* ---- Section parallax (scroll between page sections) ---- */
.section-parallax-layer {
    transform: translate3d(0, var(--section-layer-y, 0), 0);
    will-change: transform;
}

#home .hero-visual.section-parallax-layer {
    transform: translate3d(0, var(--section-layer-y, 0), 0) scale(var(--section-layer-scale, 1));
}

/* Refined single marquee */
.marquee-refined {
    border-top: 1px solid var(--gray-300);
    padding: 1rem 0;
    overflow: hidden;
    background: var(--white);
}

.marquee-refined-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: marquee 40s linear infinite;
    font-family: var(--font-display);
    font-size: var(--text-meta);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--gray-500);
    text-transform: lowercase;
}

.marquee-refined:hover .marquee-refined-track {
    animation-play-state: paused;
}

.marquee-refined-track span:not(.marquee-dot) {
    padding: 0 1.25rem;
    white-space: nowrap;
}

.marquee-dot {
    color: var(--gray-300);
    font-size: 1.2rem;
    line-height: 1;
    user-select: none;
}

.hero-parallax {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.hero-parallax-layer {
    position: absolute;
    will-change: transform;
}

.hero-parallax-layer--slow { top: 8%; left: -5%; }
.hero-parallax-layer--mid { top: 35%; right: -8%; }
.hero-parallax-layer--fast { bottom: 18%; left: 10%; }

.hero-bg-text {
    font-family: var(--font-display);
    font-size: clamp(5rem, 18vw, 14rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: rgba(22, 88, 225, 0.06);
    line-height: 0.85;
    white-space: nowrap;
    user-select: none;
}

.hero-bg-text--outline {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(10, 10, 10, 0.07);
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: orbFloat 12s ease-in-out infinite;
}

.hero-orb--1 {
    width: clamp(200px, 30vw, 400px);
    height: clamp(200px, 30vw, 400px);
    background: radial-gradient(circle, rgba(22, 88, 225, 0.25) 0%, transparent 70%);
    top: 10%;
    right: 5%;
}

.hero-orb--2 {
    width: clamp(150px, 22vw, 300px);
    height: clamp(150px, 22vw, 300px);
    background: radial-gradient(circle, rgba(196, 18, 48, 0.15) 0%, transparent 70%);
    bottom: 25%;
    left: -5%;
    animation-delay: -6s;
}

@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, -30px) scale(1.05); }
    66% { transform: translate(-15px, 20px) scale(0.95); }
}

.hero-grain {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

.hero-content {
    position: relative;
    z-index: 1;
    width: var(--container);
    margin-inline: auto;
    padding-bottom: 5rem;
}


.hero-name-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(2rem, 5vw, 4rem);
}

.hero-name {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 10vw, 7rem);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    text-shadow: 0 0 80px rgba(22, 88, 225, 0.08);
}

.hero-name-accent { display: block; }

.scroll-hint {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border: 1.5px solid var(--black);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: scrollPulse 2s ease-in-out infinite;
    margin-bottom: 0.5rem;
}

.scroll-hint svg {
    width: 18px;
    height: 18px;
}

@keyframes scrollPulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

.hero-stats {
    display: flex;
    flex-direction: column;
}

.stat-item {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--black);
}

.stat-item:first-child { border-top: 1px solid var(--black); }

.stat-number {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--black) 40%, var(--blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size: var(--text-ui);
    color: var(--gray-700);
    margin-top: 0.25rem;
}

.hero-bio {
    padding-top: 0.5rem;
}

.hero-title {
    font-family: var(--font-display);
    font-size: var(--text-hero-title);
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 1rem;
    text-transform: lowercase;
}

.hero-tagline,
.hero-tagline-secondary {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: var(--gray-700);
    line-height: 1.7;
    max-width: 52ch;
}

.hero-tagline-secondary { margin-top: 0.75rem; }

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
    padding: 0.875rem 1.75rem;
    border: 1.5px solid var(--black);
    border-radius: 0;
    font-family: var(--font-display);
    font-size: var(--text-services);
    font-weight: 500;
    transition: background 0.25s, color 0.25s;
}

.hero-cta:hover {
    background: var(--black);
    color: var(--white);
}

.hero-cta-dot {
    width: 8px;
    height: 8px;
    border-radius: 0;
    background: var(--blue);
}

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

/* ---- Section Titles ---- */
.section-title {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: 600;
    letter-spacing: var(--tracking-h1);
    margin-bottom: 2.5rem;
}

/* .section-label → design system primitive (.ds-label) */

/* ---- Horizontal Scroll Gallery ---- */
.h-scroll-section {
    height: 350vh;
    position: relative;
    background: var(--black);
}

.h-scroll-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.h-scroll-header {
    position: absolute;
    top: calc(var(--nav-height) + 1.5rem);
    left: 4vw;
    z-index: 2;
}

.section-title--light { color: var(--white); }

.h-scroll-hint {
    font-family: var(--font-display);
    font-size: var(--text-meta);
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.08em;
    margin-top: 0.5rem;
    animation: hintPulse 2s ease-in-out infinite;
}

@keyframes hintPulse {
    0%, 100% { opacity: 0.45; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(6px); }
}

.h-scroll-viewport {
    width: 100%;
    overflow: visible;
    padding: 0 4vw;
}

.h-scroll-track {
    display: flex;
    gap: 2rem;
    will-change: transform;
}

.h-scroll-card {
    flex: 0 0 clamp(300px, 72vw, 680px);
    height: clamp(380px, 62vh, 560px);
}

.h-scroll-card-visual {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--card-gradient);
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s var(--ease-out);
}

.h-scroll-card:hover .h-scroll-card-visual {
    transform: scale(1.02) translateY(-8px);
}

.h-scroll-card-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
}

.h-scroll-card-number {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.15);
    line-height: 1;
    z-index: 1;
}

.h-scroll-card-label {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
    width: 90%;
}

.h-scroll-label-primary {
    display: block;
    background: var(--white);
    color: var(--black);
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.5vw, 1.75rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.85rem 1.75rem;
}

.h-scroll-label-secondary {
    display: inline-block;
    background: var(--black);
    color: var(--white);
    font-family: var(--font-display);
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.45rem 1.25rem;
}

.h-scroll-progress {
    position: absolute;
    bottom: 2rem;
    left: 4vw;
    right: 4vw;
    height: 3px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 0;
    overflow: hidden;
}

.h-scroll-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--blue);
    border-radius: 0;
    transition: width 0.05s linear;
}

/* Skills horizontal gallery — Adrian-inspired light */
.h-scroll-section--skills,
.h-scroll-section--process {
    height: 240vh;
    background: var(--white);
    border-top: 1px solid var(--gray-300);
}

.h-scroll-section--process {
    height: 230vh;
}

.h-scroll-section--skills .h-scroll-sticky,
.h-scroll-section--process .h-scroll-sticky {
    justify-content: flex-start;
    padding-top: calc(var(--nav-height) + 2rem);
}

.h-scroll-section--skills .h-scroll-header,
.h-scroll-section--process .h-scroll-header {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: none;
    margin: 0 0 3rem;
    padding-inline: clamp(1.5rem, 4vw, 3rem);
}

.h-scroll-header-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--gray-300);
    padding-bottom: 2rem;
}

.h-scroll-header-desc {
    font-size: var(--text-nav);
    color: var(--gray-700);
    max-width: 62ch;
    margin-top: 0.85rem;
}

.h-scroll-section--skills .h-scroll-viewport,
.h-scroll-section--process .h-scroll-viewport {
    padding: 0 clamp(1.5rem, 4vw, 3rem);
}

.h-scroll-section--skills .h-scroll-progress,
.h-scroll-section--process .h-scroll-progress {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    width: calc(100% - clamp(3rem, 8vw, 6rem));
    max-width: none;
    margin: 3rem clamp(1.5rem, 4vw, 3rem) 0;
    background: var(--gray-100);
}

.h-scroll-section--skills .h-scroll-progress-bar,
.h-scroll-section--process .h-scroll-progress-bar {
    background: var(--black);
}

.skill-card {
    flex: 0 0 clamp(280px, 65vw, 340px);
    padding: 0 2.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-right: 1px solid var(--gray-300);
}

.skill-card-visual {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--gray-500);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-100);
}

.skill-diagram {
    width: 100%;
    height: 72px;
    display: block;
}

.skill-framework {
    font-family: var(--font-display);
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.skill-card-label {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2vw, 1.2rem);
    font-weight: 700;
    color: var(--black);
    line-height: 1.3;
}

.skill-card-desc {
    font-size: var(--text-ui);
    line-height: 1.6;
    color: var(--gray-700);
}

/* ---- Full-width sections ---- */
.section-full {
    width: 100%;
}

.section-full .parallel-scroll-inner,
.section-full .section-header-row,
.section-full .work-more-cta {
    width: 100%;
    max-width: none;
    padding-inline: clamp(1.5rem, 4vw, 3rem);
}

.section-full .parallel-scroll-inner {
    grid-template-columns: minmax(88px, 110px) 1fr;
}

/* ---- Parallel Scroll Case Studies ---- */
.parallel-scroll {
    --parallel-slide-height: calc(100dvh - var(--parallel-sticky-top));
    --parallel-slide-overlap: clamp(8rem, 18vh, 14rem);
    --parallel-slide-exit: var(--parallel-slide-height);
    background: var(--white);
    position: relative;
    isolation: isolate;
    padding: var(--section-pad) 0 0;
}

#work.parallel-scroll {
    background: var(--off-white);
}

.work-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-inline: var(--page-gutter);
    margin-bottom: 1.75rem;
}

/* Figma Foundations — Label (14px / Open Sans / gray-500) */
.work-header-label {
    font-family: var(--font-display);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--gray-500);
    margin: 0;
}

/* Figma Home node 19-417 — H4 size (24px), uppercase, gray-700 */
h4.work-header-label {
    font-size: var(--text-card-title);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.4px;
    text-transform: uppercase;
    color: var(--gray-700);
}

.tertiary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.5rem;
    border: 1px solid var(--black);
    border-radius: var(--radius-pill);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 400;
    color: var(--black);
    transition: opacity 0.2s;
}

.tertiary-btn:hover {
    opacity: 0.65;
}

/* ---- Work section v2 (index.html) — static sidebar + single panel,
   matching Figma's "Work Row" exactly (no parallax/scroll mechanics). ---- */
.work2-more-header {
    display: none;
}

.work2-more-mobile {
    display: none;
}

.work2-section {
    display: flex;
    flex-direction: column;
    gap: 3rem; /* 48 */
    background: #cadee6; /* Figma Work 19:416 */
    padding: 4rem 0; /* 64 */
}

.work2-section .work-header-row {
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
    margin-bottom: 0;
    justify-content: flex-start;
}

.work2-row {
    display: flex;
    gap: 2rem;
    align-items: flex-start; /* shared top axis across slides */
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.work2-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* 20 — Figma Sidebar */
    flex: 0 0 auto;
    min-width: 8.5rem;
    padding-right: 1.5rem; /* 24 */
    margin: 0;
}

/* Beats the shared .parallel-nav mobile-breakpoint override (tuned for the
   old carousel) — this sidebar always stacks vertically regardless of
   viewport, per Figma. */
.work2-sidebar.parallel-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1.25rem; /* 20 — beat .parallel-nav gap 0 */
    margin: 0;
}

/* Keep Figma left-rail active state even when global .parallel-nav goes horizontal.
   Specificity must beat the 1024px .parallel-nav-item.active override. */
.work2-sidebar.parallel-nav .parallel-nav-item {
    border-left: 4px solid transparent;
    border-bottom: none;
    padding: 1rem 0 2rem 1rem; /* pt 16, pb 32, pl 16 — Figma Sidebar Item */
    gap: 0.25rem; /* 4 */
}

.work2-sidebar.parallel-nav .parallel-nav-item.active {
    border-left-color: var(--navy);
    border-bottom-color: transparent;
}

.work2-sidebar.parallel-nav .parallel-nav-item:not(.active) {
    padding-top: 0;
    padding-bottom: 0;
}

.work2-panels {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    align-self: flex-start; /* top axis shared; don’t stretch with taller slides */
}

.work2-image-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    /* Shared frame so title stays on one vertical axis across slides */
    aspect-ratio: 600 / 400; /* Figma Gousto / Eurostar ~3:2 */
    width: 100%;
    padding: 3rem; /* 48 — Figma Work Image Panel */
    background: transparent;
    overflow: hidden;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    box-sizing: border-box;
}

/* Section bg follows active slide */
.work2-section:has(#work2-case-0.is-active) { background: #cadee6; }
.work2-section:has(#work2-case-1.is-active) { background: #dbf2fe; }
.work2-section:has(#work2-case-2.is-active) { background: #e4dede; }

.work2-image-panel[hidden] {
    display: none;
}

/* Figma Work Row overlay (Card title): bottom-left inside panel pad */
.work2-image-panel .parallel-panel-header {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 1.5rem 0; /* py 24 — panel already has 48 inset */
    transform: none;
    will-change: auto;
    pointer-events: none;
}

.work2-image-panel .panel-index {
    margin: 0;
    font-size: var(--text-section-serif); /* 24 — Section serif */
    line-height: 1.3;
    letter-spacing: 0.2px;
    color: var(--black);
}

/* Figma Display (33:963): 80px, lineHeight 100%, navy */
.work2-image-panel .spotlight-title {
    display: block;
    font-size: var(--text-display); /* 80 */
    font-weight: 600;
    letter-spacing: var(--tracking-display);
    line-height: var(--lh-display);
    margin: 0;
    padding: 0;
    height: auto;
    color: var(--navy);
}

.work2-image-panel .panel-services {
    margin: 0;
    font-size: var(--text-body);
    line-height: 1.75; /* Body 175% */
    color: var(--black);
    white-space: nowrap;
}

.work2-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.work2-panel-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: inherit;
}

/* Per-slide crops — Figma Work Image Panel absolute img offsets */
#work2-case-0 .work2-panel-img {
    width: 165.49%;
    height: 100%;
    left: -49.05%;
    top: 0;
    right: auto;
    bottom: auto;
}

#work2-case-1 .work2-panel-img {
    width: 108.2%;
    height: 114.51%;
    left: -0.29%;
    top: -0.45%;
    right: auto;
    bottom: auto;
}

#work2-case-2 .work2-panel-img {
    width: 176.63%;
    height: 119.38%;
    left: -43.86%;
    top: -19.02%;
    right: auto;
    bottom: auto;
}

.work2-image-panel picture {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.work-more-cta {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.5rem, 4vw, 3rem) var(--section-pad);
    border-top: 1px solid var(--gray-300);
    margin-top: clamp(1.25rem, 3vw, 2rem);
}

/* ---- Pill button (Figma: Button-Pill) — label + circular icon badge ---- */
.pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.375rem;
    border-radius: var(--radius-pill);
    color: var(--black);
    transition: opacity 0.25s var(--ease-out);
}

.pill-btn:hover {
    opacity: 0.7;
}

.pill-btn:focus-visible {
    outline: 2px solid var(--black);
    outline-offset: 2px;
}

.pill-btn-label {
    font-family: var(--font-display);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
}

.pill-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-pill);
    background: var(--off-white);
    color: var(--black);
    line-height: 0;
    position: relative;
    isolation: isolate;
}

.pill-btn-icon svg {
    width: 16px;
    height: 16px;
    display: block;
    position: relative;
    z-index: 1;
}

/* Legacy black fade for non-hero pills (e.g. floating section-next). */
.pill-btn-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--radius-pill);
    background: var(--black);
    opacity: var(--pill-reveal, 0);
    transition: opacity 0.05s linear;
    pointer-events: none;
}

.hero-info-cell--cta {
    position: relative;
    z-index: 3;
    overflow: visible;
}

.hero-info-cell--cta .pill-btn {
    overflow: visible;
    position: relative;
}

.hero-info-cell--cta .pill-btn-icon {
    overflow: visible;
    --pill-reveal: 0;
    --pill-expand-color: #cadee6;
    background: var(--off-white);
    color: var(--black);
}

/* Hide the grey badge while the SVG circle covers it (shows through to the
   expand layer underneath — same colour, no double-ring). */
.hero-info-cell--cta .pill-btn-icon.is-pill-expanding {
    background: transparent;
}

/* Hero CTA uses the SVG layer instead of a scaled ::after (avoids pixelation). */
.hero-info-cell--cta .pill-btn-icon::after {
    content: none;
}

/* Below the CTA (z-index 3) so label + chevron stay on top; above page fill
   so the circle can merge into the work section background. */
.pill-expand-layer {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}

.pill-expand-layer circle {
    shape-rendering: geometricPrecision;
}

/* Light variant — sits on the dark Featured work section */
.pill-btn--light {
    color: var(--white);
}

.pill-btn--light .pill-btn-icon {
    background: var(--white);
    color: var(--black);
}

.pill-btn--light:focus-visible {
    outline-color: var(--white);
}

.work-more-cta--end {
    display: flex;
    justify-content: flex-end;
}

.work-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 0 1.5rem;
    font-family: var(--font-display);
    font-size: var(--text-nav);
    font-weight: 400;
    color: var(--black);
    white-space: nowrap;
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-pill);
    transition: opacity 0.25s var(--ease-out);
}

.work-more-btn:hover {
    opacity: 0.7;
}

.work-more-btn:focus-visible {
    outline: 2px solid var(--black);
    outline-offset: 2px;
}

.projects-page {
    padding-top: calc(var(--nav-height) + 3rem);
    border-top: none;
}

.projects-back {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: 2rem;
    border-top: 1px solid var(--gray-300);
}

.project-index-link--static {
    cursor: default;
}

.project-index-link--static:hover {
    opacity: 1;
}

.parallel-scroll .section-header-row {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: clamp(1.5rem, 4vw, 3rem);
}

.section-header-row--centered,
.parallel-scroll .section-header-row--centered {
    border-bottom: none;
    text-align: center;
    padding-bottom: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.parallel-scroll .section-header-row--centered .section-title {
    width: 100%;
}

.parallel-scroll-inner {
    display: grid;
    grid-template-columns: minmax(88px, 110px) 1fr;
    gap: clamp(1.25rem, 2.5vw, 2rem);
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: clamp(1.5rem, 4vw, 3rem);
}

.parallel-sidebar {
    position: sticky;
    top: var(--parallel-sticky-top);
    align-self: start;
    height: fit-content;
}

.parallel-sidebar .section-title {
    font-size: var(--text-card-title);
    margin-bottom: 1rem;
}

.parallel-sidebar .section-label {
    font-size: var(--text-micro);
    margin-bottom: 0.5rem;
}

.parallel-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 1.25rem 0;
}

.parallel-nav-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 0.65rem 0;
    border-left: 2px solid transparent;
    padding-left: 0.5rem;
    transition: color 0.3s, border-color 0.3s;
}

.parallel-nav-num {
    font-family: var(--font-display);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 0.15rem;
}

.parallel-nav-name {
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--black);
}

.parallel-nav-item.active {
    border-left-color: var(--black);
}

.parallel-nav-item.active .parallel-nav-num { color: var(--gray-500); }
.parallel-nav-item.active .parallel-nav-name { color: var(--black); }

.parallel-counter {
    font-family: var(--font-display);
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--gray-500);
    letter-spacing: 0.05em;
}

.parallel-panels {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.parallel-sticky-top {
    grid-column: 1 / -1;
    position: sticky;
    top: var(--parallel-sticky-top);
    height: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    pointer-events: none;
    z-index: 0;
}

.parallel-panel-segment {
    height: var(--parallel-slide-height);
    margin-top: calc(-1 * var(--parallel-slide-height) + var(--parallel-slide-overlap));
}

.parallel-panel-segment:first-child {
    margin-top: 0;
}

.parallel-panel-segment:last-child {
    margin-bottom: calc(var(--parallel-slide-overlap) + var(--parallel-slide-exit));
}

.parallel-scroll.is-exiting-down .parallel-sidebar {
    position: relative;
    top: auto;
}

.parallel-scroll.is-exiting-down .parallel-panel-segment:last-child .parallel-panel {
    position: relative;
    top: auto;
    transform: none;
}

.parallel-scroll.is-exiting-down .parallel-panel-segment:last-child .parallel-panel-img,
.parallel-scroll.is-exiting-down .parallel-panel-segment:last-child .parallel-panel-header {
    transform: none;
}

.parallel-scroll-anchor {
    display: block;
    height: 0;
    width: 0;
    pointer-events: none;
}

.parallel-panel {
    position: sticky;
    top: var(--parallel-sticky-top);
    width: 100%;
    min-height: var(--parallel-slide-height);
    background: var(--gray-300);
    border: none;
    border-radius: 0;
    outline: none;
    padding: 0;
    scroll-margin-top: var(--parallel-sticky-top);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    overflow-anchor: none;
    will-change: transform;
    transform: translate3d(0, var(--panel-parallax-y, 0), 0);
    z-index: var(--panel-z, 1);
}

.parallel-panel.is-front {
    z-index: 20 !important;
}

.parallel-panel.is-under {
    pointer-events: none;
    z-index: 19 !important;
}

.parallel-panel.is-away {
    pointer-events: none;
    z-index: 1 !important;
}

.parallel-panel-link {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0;
    min-height: var(--parallel-slide-height);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border-radius: 0;
    outline: none;
}

.parallel-panel-link:focus,
.parallel-panel-link:focus-visible {
    outline: none;
}

#case-2 .parallel-panel-link {
    cursor: default;
}

.parallel-panel-link::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 50%,
        rgba(255, 255, 255, 0.35) 72%,
        rgba(255, 255, 255, 0.92) 100%
    );
}

.parallel-panel-link:hover .parallel-panel-img {
    transform: none;
}

.parallel-panel-header {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    padding-top: 0;
    padding-bottom: 10%;
    transform: translate3d(0, var(--panel-header-y, 0), 0);
    will-change: transform;
}

.parallel-panel-visual {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--gray-100);
    border-radius: 0;
    outline: none;
}

.parallel-panel-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none;
    border-radius: 0;
    outline: none;
}

.parallel-panel-content {
    padding: 0.5rem 0;
}

/* .panel-index / .panel-services → design system primitives */

.parallel-panel .spotlight-title {
    font-size: var(--text-subsection);
    margin-bottom: 0.5rem;
}

.spotlight-label-box { display: none; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.spotlight-label-box {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 90%;
}

.spotlight-label-primary {
    display: block;
    background: var(--white);
    color: var(--black);
    font-family: var(--font-display);
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.75rem 1.5rem;
    margin-bottom: 0;
}

.spotlight-label-secondary {
    display: inline-block;
    background: var(--black);
    color: var(--white);
    font-family: var(--font-display);
    font-size: var(--text-meta);
    font-weight: 500;
    letter-spacing: 0.06em;
    padding: 0.5rem 1.25rem;
}

.spotlight-content { padding: 1rem 0; }

.spotlight-tag {
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 1rem;
}

.spotlight-title {
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: 600;
    letter-spacing: var(--tracking-display);
    margin-bottom: 1.25rem;
    line-height: 1;
}

.spotlight-desc {
    font-size: var(--text-lead);
    color: var(--gray-700);
    line-height: 1.75;
    max-width: 48ch;
}

.spotlight-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
}

.spotlight-btn {
    width: 48px;
    height: 48px;
    border: 1.5px solid var(--black);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.spotlight-btn:hover {
    background: var(--black);
    color: var(--white);
}

.spotlight-dots {
    display: flex;
    gap: 0.5rem;
    margin-left: 0.5rem;
}

.spotlight-dot {
    width: 10px;
    height: 10px;
    border-radius: 0;
    border: 1.5px solid var(--black);
    transition: background 0.2s;
}

.spotlight-dot.active { background: var(--black); }

/* ---- Projects Index ---- */
.projects {
    padding: var(--section-pad) 0;
    background: var(--white);
    border-top: 1px solid var(--gray-300);
}

.projects-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}

.filter-btn {
    padding: 0.6rem 1.25rem;
    border: 1.5px solid var(--gray-300);
    border-radius: 0;
    font-family: var(--font-display);
    font-size: var(--text-meta);
    font-weight: 500;
    color: var(--gray-700);
    transition: all 0.25s;
}

.filter-btn:hover {
    border-color: var(--black);
    color: var(--black);
}

.filter-btn.active {
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
}

.projects-index {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 4rem;
}

.project-item.hidden {
    display: none;
}

.project-index-link {
    display: block;
    padding: 0.5rem 0 1.5rem;
    border-bottom: 1px solid var(--gray-100);
    transition: opacity 0.2s;
}

.project-index-link:hover { opacity: 0.5; }

.project-index-num {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-meta);
    font-weight: 400;
    color: var(--gray-300);
    margin-bottom: 0.35rem;
}

.project-index-name {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 700;
    color: var(--black);
    margin-bottom: 0.35rem;
    letter-spacing: -0.01em;
}

.project-index-tags {
    font-family: var(--font-display);
    font-size: var(--text-detail);
    font-weight: 400;
    color: var(--gray-500);
    line-height: 1.5;
}

/* About — services + bio layout */
.about-section {
    padding: var(--section-pad) 0;
    border-top: 1px solid var(--gray-300);
    width: 100%;
}

#services2.about-section {
    border-top: none;
}

/* ---- Expertise (Figma 19:441) ---- */
.expertise-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: var(--white);
    padding: 4rem clamp(1.5rem, 6vw, 6rem); /* py 64 / px 96 */
    border-top: none;
}

.expertise-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem; /* 32 */
    width: 100%;
    max-width: 38.75rem; /* 620 */
}

.expertise-label {
    font-family: var(--font-display);
    font-size: var(--text-card-title); /* H4 24 */
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.4px;
    text-transform: uppercase;
    color: var(--gray-500);
    margin: 0;
}

.expertise-section .services-accordion {
    width: 100%;
    max-width: none;
    flex: none;
}

.content-section > .content-column {
    width: var(--content-column);
}

.section-title--centered {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    font-size: var(--text-section-title);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.services-section .content-column {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(2rem, 5vw, 4rem);
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.expertise-label-col {
    flex: 0 0 auto;
    width: min(280px, 30%);
}

.expertise-label-col .work-header-label {
    margin: 0;
}

.services-section .services-accordion {
    flex: 1 1 auto;
    width: min(600px, 58%);
    max-width: 40rem;
}

.about-home .about-bio {
    text-align: center;
}

.about-home .about-bio p {
    margin-inline: auto;
}

.about-home-cta {
    margin-top: 2rem;
    text-align: center;
}

.about-grid {
    display: grid;
    grid-template-columns: minmax(100px, 180px) 1fr;
    gap: 2rem 4rem;
    margin-bottom: 0;
}

.about-grid--bio {
    margin-bottom: 0;
    padding-top: 4rem;
    border-top: 1px solid var(--gray-300);
}

.about-side-label {
    font-family: var(--font-display);
    font-size: var(--text-nav);
    font-weight: 400;
    color: var(--black);
}

.about-services-list p {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--black);
}

.about-bio p {
    font-size: var(--text-body);
    line-height: 1.75;
    color: var(--gray-700);
    margin-bottom: 1.25rem;
    max-width: 62ch;
}

.about-lead {
    font-size: var(--text-lead) !important;
    color: var(--black) !important;
    font-weight: 600;
}

.about-cta-text {
    margin-top: 1.5rem;
    font-weight: 600;
    color: var(--black) !important;
}

.services-about-link {
    padding-top: 2rem;
    border-top: 1px solid var(--gray-300);
}

.services-accordion,
.case-study-accordion {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--gray-300);
}

#services-accordion,
#services2-accordion {
    border-top: none;
}

/* Figma Accordion Item: first = no top pad; others py-24; open body gap 12 + pb 24 */
#services2-accordion .accordion-trigger {
    padding: 1.5rem 1rem 1.5rem 0;
}

#services2-accordion .accordion-item:first-child .accordion-trigger {
    padding-top: 0;
}

#services2-accordion .accordion-item:first-child .accordion-trigger[aria-expanded="true"] {
    padding-bottom: 0;
}

#services2-accordion .accordion-title {
    font-size: var(--text-subsection); /* H3 32 */
    font-weight: 600;
    line-height: 1.1;
}

#services2-accordion .accordion-panel-text {
    font-size: var(--text-body); /* 16 */
    font-weight: 400;
    line-height: var(--lh-body); /* 1.75 */
    color: var(--gray-700);
    max-width: none;
    padding-top: 0.75rem; /* 12 gap under head */
    padding-bottom: 1.5rem; /* 24 */
}

#services2-accordion .accordion-panel-text p {
    margin: 0;
}

#services2-accordion .accordion-panel-text p + p {
    margin-top: 1rem; /* Figma blank line between skills + sentence */
}

.accordion-item {
    border-bottom: 1px solid var(--gray-300);
}

.accordion-heading {
    margin: 0;
}

.accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    padding: clamp(1rem, 2.5vw, 1.35rem) 0;
    text-align: left;
    color: var(--black);
    transition: opacity 0.2s;
}

.accordion-trigger:hover {
    opacity: 0.65;
}

.accordion-title {
    font-family: var(--font-display);
    font-size: var(--text-subsection);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: normal;
}

.accordion-icon {
    position: relative;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

.accordion-icon::before,
.accordion-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 1.5px;
    background: var(--black);
    transform: translate(-50%, -50%);
    transition: transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}

.accordion-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

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

.accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s var(--ease-out);
}

.accordion-panel.is-open {
    grid-template-rows: 1fr;
}

.accordion-panel-inner {
    overflow: hidden;
}

.accordion-panel-text {
    font-family: var(--font-display);
    font-size: var(--text-body-fluid);
    font-weight: 400;
    line-height: 1.65;
    color: var(--gray-700);
    padding-bottom: clamp(1rem, 2.5vw, 1.35rem);
    max-width: 52ch;
}

.accordion-trigger[aria-expanded="true"] .accordion-title {
    color: var(--black);
}

.about-page {
    padding-top: calc(var(--nav-height) + 3rem);
}

.about-page-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

/* What interests me */
.interests-section {
    padding: var(--section-pad) 0;
    background: var(--off-white);
    border-top: 1px solid var(--gray-300);
    width: 100%;
}

.interests-section .section-header-row {
    border-bottom: none;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    padding-bottom: 0;
    text-align: center;
}

.interests-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.interest-item {
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    background: var(--white);
    border: 1px solid var(--gray-300);
    text-align: left;
}

.interest-label {
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: 700;
    color: var(--black);
    margin-bottom: 0.5rem;
}

.interest-desc {
    font-size: var(--text-services);
    line-height: 1.65;
    color: var(--gray-700);
}

.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;
}

/* Case study pages — aligned to homepage type + spacing */
.case-study {
    padding: calc(var(--nav-height) + clamp(1.5rem, 4vw, 2.5rem)) 0 0;
}

.case-study-header {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    max-width: var(--content-column);
}

.case-study-header--wide {
    max-width: none;
}

.case-study-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-hero);
    margin-bottom: 0.75rem;
}

.case-study-title-sep {
    color: var(--gray-300);
    font-weight: 400;
    margin: 0 0.15em;
}

.case-study-live-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--text-detail);
    font-weight: 600;
    color: var(--blue);
    margin-bottom: 1.5rem;
}

.case-study-live-link:hover { color: var(--blue-hover); }

/* Overview — three short summaries under the hero, stacked vertically */
.overview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.overview-item {
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--gray-300);
}

.overview-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.overview-eyebrow {
    font-family: var(--font-display);
    font-size: var(--text-label);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 0.6rem;
}

.overview-item p:not(.overview-eyebrow) {
    line-height: 1.65;
    color: var(--gray-700);
}

/* Copy column — centres prose/lists/accordion in the middle of the screen,
   left-aligned within that column. Image-paired content (the artifact grids)
   is left inside .case-study-block and can still run the full column width,
   which is now the same measure as body text rather than the old wide
   label+content split. */
.case-study-copy {
    width: var(--content-column);
    margin-inline: auto;
}

/* Process, reframed as a "How I work"-style diagram strip — reuses the
   exact skill-card / skill-diagram components from the homepage's
   "How I work" section for visual consistency, as a lightweight
   horizontally-scrollable row instead of the homepage's pinned scroll. */
.case-study-diagram-row {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 0.5rem;
    margin-top: 1.5rem;
}

.case-study-diagram-row .skill-card {
    scroll-snap-align: start;
}

.case-study-diagram-row .skill-card:last-child {
    border-right: none;
}

/* Hero — parallax visual with a second, smaller inset image for depth.
   Video sits above a photo fallback (same image as poster), so the hero
   still reads correctly before the video loads or if it's ever missing. */
.case-study-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 0;
    background: var(--gray-100);
    border: 1px solid var(--border);
}

.case-study-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-study-visual-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.case-study-visual-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.case-study-visual.section-parallax-layer {
    transform: translate3d(0, var(--section-layer-y, 0), 0) scale(var(--section-layer-scale, 1));
}

.case-study-visual-accent {
    position: absolute;
    right: clamp(1rem, 4vw, 2.5rem);
    bottom: clamp(1rem, 4vw, 2.5rem);
    width: clamp(120px, 22vw, 220px);
    aspect-ratio: 554 / 318;
    border: 4px solid var(--white);
    box-shadow: 0 16px 40px rgba(10, 10, 10, 0.35);
    overflow: hidden;
    z-index: 2;
}

.case-study-visual-accent img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.case-study-body {
    max-width: var(--prose-width);
}

.case-study-body p {
    font-size: var(--text-body);
    line-height: var(--lh-body);
    color: var(--gray-700);
    margin-bottom: 1.25rem;
}

.case-study-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--section-pad);
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

/* Prev / next between featured cases */
.case-study-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: clamp(1.5rem, 3vw, 2rem);
    border-top: 1px solid var(--border);
}

.case-study-pager-link {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 48px;
    padding: 1rem 0;
    transition: opacity 0.2s;
}

.case-study-pager-link:hover {
    opacity: 0.65;
}

.case-study-pager-link--next {
    text-align: right;
    align-items: flex-end;
}

.case-study-pager-dir {
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--gray-500);
}

.case-study-pager-name {
    font-family: var(--font-display);
    font-size: var(--text-hero-title);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--black);
}

/* ---- Brands ---- */
.brands {
    padding: var(--section-pad) 0;
    background: var(--off-white);
    text-align: center;
}

.brands-intro {
    font-size: var(--text-lead);
    color: var(--gray-700);
    max-width: 50ch;
    margin: 0 auto 2.5rem;
}

.brands-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    max-height: 120px;
    overflow: hidden;
    transition: max-height 0.6s var(--ease-out);
}

.brands-grid.expanded {
    max-height: 2000px;
}

.brand-pill {
    padding: 0.6rem 1.25rem;
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: 0;
    font-family: var(--font-display);
    font-size: var(--text-meta);
    font-weight: 500;
    color: var(--gray-700);
    transition: border-color 0.2s, color 0.2s;
}

.brand-pill:hover {
    border-color: var(--black);
    color: var(--black);
}

.brands-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 2rem;
    padding: 0.75rem 1.5rem;
    border: 1.5px solid var(--black);
    border-radius: 0;
    font-family: var(--font-display);
    font-size: var(--text-detail);
    font-weight: 500;
    transition: background 0.25s, color 0.25s;
}

.brands-toggle:hover {
    background: var(--black);
    color: var(--white);
}

/* ---- Testimonials ---- */
.testimonials {
    padding: var(--section-pad) 0;
    background: var(--black);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.testimonials::before {
    content: '"';
    position: absolute;
    top: -0.1em;
    left: 4vw;
    font-family: var(--font-display);
    font-size: clamp(12rem, 25vw, 22rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.03);
    line-height: 1;
    pointer-events: none;
}

.testimonials .section-title { color: var(--white); }

.testimonials-carousel {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.testimonial-slide {
    display: none;
    text-align: center;
    animation: fadeIn 0.5s var(--ease-out);
}

.testimonial-slide.active { display: block; }

.testimonial-text {
    font-size: var(--text-hero-title);
    line-height: 1.75;
    font-weight: 300;
    margin-bottom: 2rem;
}

.testimonial-text p::before { content: '\201C'; }
.testimonial-text p::after { content: '\201D'; }

.testimonial-author cite {
    font-style: normal;
}

.testimonial-author strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.testimonial-author span {
    font-size: var(--text-ui);
    color: rgba(255,255,255,0.6);
}

.testimonial-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
}

.testimonial-btn {
    width: 44px;
    height: 44px;
    border: 1.5px solid rgba(255,255,255,0.4);
    border-radius: 0;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s;
}

.testimonial-btn:hover {
    border-color: var(--white);
    background: rgba(255,255,255,0.1);
}

.testimonial-counter {
    font-family: var(--font-display);
    font-size: var(--text-detail);
    color: rgba(255,255,255,0.5);
    min-width: 3rem;
    text-align: center;
}

/* ---- Connect CTA ---- */
.connect-cta {
    padding: var(--section-pad) 0;
    text-align: center;
}

.connect-cta-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 5.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--black) 30%, var(--blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.connect-cta-sub {
    font-size: 1.15rem;
    color: var(--gray-700);
    margin-bottom: 2.5rem;
}

.connect-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    background: var(--blue);
    color: var(--white);
    border-radius: 0;
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: 600;
    transition: background 0.25s, transform 0.25s;
}

.connect-cta-btn:hover {
    background: var(--blue-hover);
    transform: translateY(-2px);
}

/* ---- About Page ---- */
.page-hero {
    padding: calc(var(--nav-height) + 4rem) 0 3rem;
}

.page-hero .section-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
}

.about-content {
    max-width: 720px;
}

.about-bio-label {
    font-family: var(--font-display);
    font-size: var(--text-detail);
    font-weight: 600;
    color: var(--blue);
    margin-bottom: 1.5rem;
}

.about-description {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--gray-700);
    margin-bottom: 1.5rem;
}

.about-full {
    padding: var(--section-pad) 0;
    background: var(--off-white);
}

.about-full p {
    font-size: var(--text-lead);
    line-height: 1.8;
    color: var(--gray-700);
    margin-bottom: 1.25rem;
    max-width: 720px;
}

.about-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 3rem;
}

.about-skill-card {
    padding: 1.5rem;
    background: var(--white);
    border-radius: 0;
    border: 1px solid var(--gray-100);
}

.about-skill-card h3 {
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.about-skill-card p {
    font-size: var(--text-services);
    margin-bottom: 0;
}

/* ---- Contact Page ---- */
.connect {
    padding: var(--section-pad) 0;
    background: var(--white);
    border-top: 1px solid var(--gray-300);
    width: 100%;
}

.connect .content-column {
    text-align: center;
}

.connect .section-title {
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.connect-intro {
    font-size: var(--text-body);
    color: var(--gray-700);
    margin-bottom: 2rem;
    max-width: 42ch;
    margin-inline: auto;
}

.connect-location {
    margin-top: 2rem;
    font-family: var(--font-display);
    font-size: var(--text-nav);
    color: var(--gray-500);
}

.connect-methods {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.connect-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--gray-300);
    transition: padding-left 0.3s var(--ease-out);
    text-align: left;
}

.connect-link:first-child { border-top: 1px solid var(--gray-300); }

.connect-link:hover { padding-left: 1rem; }

.connect-label {
    font-family: var(--font-display);
    font-size: var(--text-detail);
    font-weight: 400;
    color: var(--gray-500);
}

.connect-value {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 500;
}

/* ---- Footer ---- */
.footer {
    padding: 2rem 0 2.5rem;
    border-top: 1px solid var(--gray-300);
    background: var(--white);
}

/* ---- Footer, display variant (Figma: Footer 20:273 + divider 51:1077) ----
   Top rule is content-width (same edges as Contact / meta), then 48px to links. */
.footer--display {
    padding: 0 0 2rem;
    border-top: none;
}

.footer-display-inner {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* Figma Footer gap 32 */
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-top: 0;
}

/* Figma 51:1077 — 1px black, aligned to container content box (page gutters). */
.footer-display-inner::before {
    content: "";
    display: block;
    height: 1px;
    background: var(--black);
    /* flex gap 32 + 16 = 48px to Contact (Figma Footer pt-48) */
    margin-bottom: 1rem;
}

.footer-display-top {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.footer-display-links {
    display: flex;
    align-items: center;
    gap: 3rem; /* 48 — Figma Footer */
}

.footer-display-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: 600;
    line-height: 1.3;
    color: var(--black);
    transition: opacity 0.2s;
}

.footer-display-links a:hover {
    opacity: 0.65;
}

/* Hide footer Contact link sitewide; keep LinkedIn and other items */
.footer-display-links a[href$="contact.html"] {
    display: none;
}

.footer-link-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
}

.footer-link-icon--linkedin {
    color: var(--black);
}

.footer-display-divider {
    height: 1px;
    /* Figma Footer inner Divider — gray-100 */
    background: var(--gray-100);
}

.footer-display-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--gray-500);
}

.footer-display-bottom .footer-copy {
    grid-column: unset;
    font-size: var(--text-services);
    padding-top: 0;
    border-top: none;
}

.footer-display-location {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: var(--font-display);
    font-size: var(--text-body);
    line-height: 1.75;
    color: var(--gray-500);
}

/* ---- Featured work, dark variant (Figma: Work section) ----
   Black frame around a white content band. */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    gap: 2rem 3rem;
    align-items: start;
}

.footer-name {
    font-family: var(--font-display);
    font-size: var(--text-nav);
    font-weight: 400;
    margin-bottom: 0.25rem;
}

.footer-role {
    font-size: var(--text-detail);
    color: var(--gray-500);
}

.footer-nav,
.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.footer-nav a,
.footer-links a {
    font-size: var(--text-services);
    color: var(--black);
    transition: opacity 0.2s;
}

.footer-nav a:hover,
.footer-links a:hover { opacity: 0.5; }

.footer-copy {
    grid-column: 1 / -1;
    font-size: var(--text-meta);
    color: var(--gray-500);
    padding-top: 2rem;
    border-top: 1px solid var(--gray-100);
}

/* ---- Reveal Animations ---- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .interests-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .work2-image-panel .parallel-panel-header {
        padding: 1.5rem 1.75rem;
    }

    .work2-image-panel .spotlight-title {
        line-height: 1.15;
    }

    .work2-image-panel .panel-services {
        white-space: normal;
    }

    .services-section .content-column {
        flex-direction: column;
        gap: 1.5rem;
    }

    .expertise-label-col,
    .services-section .services-accordion {
        width: 100%;
        max-width: none;
    }

    .expertise-section {
        padding: 3rem var(--page-gutter);
    }

    .parallel-scroll-inner {
        grid-template-columns: 1fr;
    }

    .parallel-sidebar {
        position: relative;
        top: 0;
    }

    .parallel-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .parallel-nav-item {
        border-left: none;
        border-bottom: 2px solid transparent;
        padding: 0.5rem 0.75rem;
        font-size: var(--text-detail);
    }

    .parallel-nav-item.active {
        border-left-color: transparent;
        border-bottom-color: var(--black);
    }

    .parallel-panel-segment {
        height: auto;
        margin-top: 0;
        margin-bottom: 3rem;
    }

    .parallel-panel-segment:last-child {
        margin-bottom: 0;
    }

    .parallel-panel {
        position: relative;
        min-height: auto;
        transform: none !important;
    }

    .parallel-panel-link {
        min-height: 100dvh;
    }

    .parallel-panel-img,
    .parallel-panel-header {
        transform: none !important;
    }

    .parallel-panel-visual {
        min-height: 0;
    }

    .project-item:nth-child(even) {
        margin-top: 0;
    }

    .h-scroll-section {
        height: 280vh;
    }
}

@media (max-width: 767px) {
    /* Homepage work/hero layout: see Figma tablet/mobile blocks at file end */

    .hero-info-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero-info-cell--bio {
        order: 2;
    }

    .hero-info-cell--cta {
        order: 3;
    }

    .hero-info-cell--stats {
        order: 4;
    }

    .hero-tagline {
        max-width: none;
    }

    .hero-nav-toggle {
        display: none !important;
    }

    .hero-nav {
        flex-wrap: wrap;
        align-items: center;
    }

    .hero-nav-menu {
        display: none !important;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        order: 3;
        gap: 0.75rem;
        padding-top: 0.75rem;
    }

    .hero-nav.open .hero-nav-menu {
        display: none !important;
    }

    .hero-nav-link {
        padding-top: 0.25rem;
    }

    /* Nav collapse: ≤767 (Figma Mobile 125:359). Tablet keeps desktop links. */

    .hero-watermark {
        font-size: clamp(3.25rem, 18vw, 5.5rem);
        white-space: normal;
    }

    .hero-copy-grid {
        gap: 1.25rem;
        margin-bottom: 1.75rem;
    }

    .hero--editorial .hero-headline,
    .hero-lead {
        max-width: none;
    }

    .hero-media {
        aspect-ratio: 16 / 10;
        min-height: 220px;
        border-radius: 16px;
    }

    .hero-headline {
        max-width: none;
    }

    .hero-social-line {
        max-width: 35%;
    }

    .hero-clients {
        gap: 1rem 1.75rem;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero-name-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .scroll-hint { display: none; }

    .projects-index {
        grid-template-columns: 1fr;
    }

    .section-header-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

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

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

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

    .connect-link {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .section-parallax-layer {
        transform: none !important;
        will-change: auto;
    }

    .skills-marquee-track { animation: none; }

    .h-scroll-section { height: auto; }

    .h-scroll-sticky { position: relative; height: auto; padding: 4rem 0; }

    .h-scroll-track { flex-direction: column; transform: none !important; gap: 1.5rem; }

    .parallel-panel-segment {
        height: auto;
        margin-top: 0;
        margin-bottom: 3rem;
    }

    .parallel-panel-segment:last-child {
        margin-bottom: 0;
    }

    .parallel-panel {
        position: relative;
        transform: none !important;
    }

    .parallel-panel-img,
    .parallel-panel-header {
        transform: none !important;
    }

    .accordion-panel {
        transition: none;
    }

    .marquee-refined-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
}

/* ---- Work — scroll-driven vertical carousel ---- */
body.work-page {
    overflow-x: hidden;
    scroll-snap-type: y proximity;
}

.nav--work {
    background: transparent;
    box-shadow: none;
}

.nav--work .nav-logo,
.nav--work .nav-link {
    color: var(--white);
}

.nav--work .nav-link::after {
    background: var(--white);
}

.nav--work .nav-link.active::after {
    transform: scaleX(1);
}

.nav-toggle--light span {
    background: var(--white);
}

.work-carousel {
    --work-slide-height: 100dvh;
    --work-slide-overlap: clamp(7rem, 14vh, 11rem);
    position: relative;
    background: transparent;
    color: var(--white);
    outline: none;
    padding-bottom: clamp(4rem, 10vh, 8rem);
}

.work-carousel-ui {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
}

.work-carousel-anchor {
    display: block;
    height: 0;
    width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.work-carousel-segment {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    margin-bottom: calc(-1 * var(--work-slide-height) + var(--work-slide-overlap));
    padding-bottom: var(--work-slide-height);
}

.work-carousel-segment:last-child {
    margin-bottom: 0;
    padding-bottom: var(--work-slide-height);
}

.work-carousel-slide {
    position: sticky;
    top: 0;
    width: 100%;
    height: var(--work-slide-height);
    overflow: hidden;
    background: transparent;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    transform: translate3d(0, var(--slide-parallax-y, 0), 0);
}

.work-carousel-slide.is-front {
    z-index: 10 !important;
}

.work-carousel-slide.is-under {
    pointer-events: none;
    opacity: var(--slide-under-opacity, 0.94);
}

.work-carousel-segment:nth-child(2) .work-carousel-slide { z-index: 1; }
.work-carousel-segment:nth-child(3) .work-carousel-slide { z-index: 2; }
.work-carousel-segment:nth-child(4) .work-carousel-slide { z-index: 3; }
.work-carousel-segment:nth-child(5) .work-carousel-slide { z-index: 4; }
.work-carousel-segment:nth-child(6) .work-carousel-slide { z-index: 5; }
.work-carousel-segment:nth-child(7) .work-carousel-slide { z-index: 6; }
.work-carousel-segment:nth-child(8) .work-carousel-slide { z-index: 7; }

.work-carousel.is-scrolling-down .work-carousel-segment:nth-child(2) .work-carousel-slide { z-index: 1; }
.work-carousel.is-scrolling-down .work-carousel-segment:nth-child(3) .work-carousel-slide { z-index: 2; }
.work-carousel.is-scrolling-down .work-carousel-segment:nth-child(4) .work-carousel-slide { z-index: 3; }
.work-carousel.is-scrolling-down .work-carousel-segment:nth-child(5) .work-carousel-slide { z-index: 4; }
.work-carousel.is-scrolling-down .work-carousel-segment:nth-child(6) .work-carousel-slide { z-index: 5; }
.work-carousel.is-scrolling-down .work-carousel-segment:nth-child(7) .work-carousel-slide { z-index: 6; }
.work-carousel.is-scrolling-down .work-carousel-segment:nth-child(8) .work-carousel-slide { z-index: 7; }

.work-carousel.is-scrolling-up .work-carousel-segment:nth-child(2) .work-carousel-slide { z-index: 7; }
.work-carousel.is-scrolling-up .work-carousel-segment:nth-child(3) .work-carousel-slide { z-index: 6; }
.work-carousel.is-scrolling-up .work-carousel-segment:nth-child(4) .work-carousel-slide { z-index: 5; }
.work-carousel.is-scrolling-up .work-carousel-segment:nth-child(5) .work-carousel-slide { z-index: 4; }
.work-carousel.is-scrolling-up .work-carousel-segment:nth-child(6) .work-carousel-slide { z-index: 3; }
.work-carousel.is-scrolling-up .work-carousel-segment:nth-child(7) .work-carousel-slide { z-index: 2; }
.work-carousel.is-scrolling-up .work-carousel-segment:nth-child(8) .work-carousel-slide { z-index: 1; }

.work-carousel-counter {
    position: absolute;
    top: calc(var(--nav-height) + 1.25rem);
    left: clamp(1.5rem, 4vw, 3rem);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-section-serif);
    font-weight: 400;
    letter-spacing: 0.01em;
    margin: 0;
}

.work-carousel-hint {
    position: absolute;
    left: 50%;
    bottom: clamp(1.5rem, 4vh, 2.5rem);
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: var(--text-micro);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

.work-carousel-progress {
    position: absolute;
    left: clamp(1.5rem, 4vw, 3rem);
    right: clamp(1.5rem, 4vw, 3rem);
    bottom: 0;
    height: 2px;
    background: rgba(255, 255, 255, 0.18);
}

.work-carousel-progress-bar {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--white);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.45s var(--ease-out);
}

.work-carousel-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.work-carousel-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(var(--slide-media-scale, 1.12)) translate3d(0, var(--slide-media-parallax-y, 0), 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.work-carousel-slide.is-active .work-carousel-media img {
    transform: scale(var(--slide-media-scale, 1.05)) translate3d(0, var(--slide-media-parallax-y, 0), 0);
}

.work-carousel-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10, 10, 10, 0.35) 0%, rgba(10, 10, 10, 0.08) 32%, rgba(10, 10, 10, 0.55) 100%),
        linear-gradient(90deg, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.18) 42%, rgba(10, 10, 10, 0.45) 100%);
}

.work-carousel-content {
    position: absolute;
    left: clamp(1.5rem, 4vw, 3rem);
    bottom: clamp(5rem, 12vh, 7rem);
    z-index: 2;
    max-width: min(34rem, 72vw);
    pointer-events: auto;
    transform: translate3d(0, var(--slide-content-parallax-y, 0), 0);
    will-change: transform;
}

.work-carousel-category {
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 0.85rem;
}

.work-carousel-title {
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: 600;
    line-height: 1;
    letter-spacing: var(--tracking-display);
    margin: 0 0 1.25rem;
    writing-mode: horizontal-tb;
}

.work-carousel-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-display);
    font-size: var(--text-nav);
    font-weight: 500;
    color: var(--white);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    padding-bottom: 0.15rem;
    transition: border-color 0.3s, opacity 0.3s;
}

.work-carousel-cta:hover {
    border-bottom-color: var(--white);
    opacity: 0.88;
}

.work-carousel-nav {
    position: absolute;
    right: clamp(1.5rem, 4vw, 3rem);
    bottom: clamp(5rem, 12vh, 7rem);
    z-index: 5;
    display: flex;
    gap: 0.75rem;
    pointer-events: auto;
}

.work-carousel-nav-btn {
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(10, 10, 10, 0.25);
    color: var(--white);
    font-size: var(--text-body);
    line-height: 1;
    transition: background 0.3s, border-color 0.3s, transform 0.3s;
    backdrop-filter: blur(8px);
}

.work-carousel-nav-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.65);
    transform: translateY(-1px);
}

.work-carousel-more {
    position: absolute;
    top: calc(var(--nav-height) + 1.25rem);
    right: clamp(1.5rem, 4vw, 3rem);
    z-index: 5;
    pointer-events: auto;
    font-family: var(--font-display);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    padding-bottom: 0.15rem;
    transition: color 0.3s, border-color 0.3s;
}

.work-carousel-more:hover {
    color: var(--white);
    border-bottom-color: var(--white);
}

@media (max-width: 768px) {
    .work-carousel-content {
        bottom: clamp(4.5rem, 10vh, 6rem);
        max-width: 88vw;
    }

    .work-carousel-nav {
        bottom: auto;
        top: calc(var(--nav-height) + 3.5rem);
    }

    .work-carousel-more {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.work-page {
        scroll-snap-type: none;
    }

    .work-carousel-media img {
        transform: none;
    }

    .work-carousel-slide {
        transform: none;
        opacity: 1;
    }

    .work-carousel-content {
        transform: none;
    }

    .work-carousel-progress-bar {
        transition: none;
    }
}

/* ============================================
   Case study — extended narrative components
   Built for cases/hotels-com.html, reusable
   across the other case studies in /cases.
   Uses only existing design tokens (colors,
   font, ease, container, section-pad).
   ============================================ */

.case-study-subhead {
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--gray-700);
    max-width: 62ch;
    margin-top: -0.5rem;
    margin-bottom: 2.5rem;
}

/* Snapshot stat strip — full-bleed band under the hero */
.case-study-stats {
    background: var(--off-white);
    padding: 2rem var(--page-gutter);
    margin: 0 0 clamp(2rem, 5vw, 3.5rem);
    width: 100%;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.case-study-stats-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.case-study-stat {
    flex: 1 1 160px;
    padding: 0.5rem 1.5rem;
    border-left: 1px solid var(--gray-300);
}

.case-study-stat:first-child { border-left: none; }

.case-study-stat-value {
    font-family: var(--font-display);
    font-size: var(--text-subsection);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--black);
    display: block;
    margin-bottom: 0.25rem;
}

/* Dark variant — icon-led stat band, matching the reference screenshot */
.case-study-stats--dark {
    background: var(--black);
}

.case-study-stats--dark .case-study-stat {
    border-left-color: rgba(255, 255, 255, 0.18);
}

.case-study-stat-icon {
    width: 2rem;
    height: 2rem;
    color: var(--white);
    display: block;
    margin-bottom: 0.85rem;
}

.case-study-stats--dark .case-study-stat-value {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    color: var(--white);
    margin-bottom: 0.3rem;
}

.case-study-stats--dark .case-study-stat-label {
    color: rgba(255, 255, 255, 0.55);
}

.case-study-stat-label {
    font-size: var(--text-meta);
    color: var(--gray-500);
    line-height: 1.35;
}

/* Section rhythm — matches homepage content sections */
.case-study-section {
    padding-top: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--border);
}

.case-study-section--flush {
    border-top: none;
    padding-top: 0;
}

.case-study-section--continued {
    border-top: none;
}

/* .case-study-label → design system primitive (.ds-label) */

.case-study-block-title {
    font-size: var(--text-subsection);
    font-weight: 600;
    letter-spacing: 0; /* Figma: H3 */
    margin-bottom: 1rem;
    max-width: 22ch;
}

.case-study-subheading {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-top: 3rem;
    margin-bottom: 1rem;
}

.case-study-subheading--flush {
    margin-top: 0;
}

.case-study-artifact--spaced {
    margin-top: 3rem;
}

.case-study-artifact--lead {
    margin-bottom: 2.5rem;
}

.case-study-artifact--narrow {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.contribution-card-cta {
    margin-top: 0.75rem;
    font-size: var(--text-meta);
    font-weight: 600;
    color: var(--blue);
}

/* Tools used — square icon tiles */
.tools-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

.tools-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 96px;
    height: 96px;
    background: var(--gray-100);
    padding: 1rem;
}

.tools-tile-icon {
    width: 2rem;
    height: 2rem;
    color: var(--black);
}

.tools-tile-label {
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--gray-700);
    text-align: center;
}

.case-study-block p {
    font-size: var(--text-body);
    line-height: 1.75;
    color: var(--gray-700);
    margin-bottom: 1.25rem;
    max-width: 62ch;
}

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

/* Constraint / contribution cards — shared card-grid look */
.constraint-grid,
.contribution-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--gray-300);
    border: 1px solid var(--gray-300);
    margin-top: 2rem;
}

.contribution-grid { grid-template-columns: repeat(3, 1fr); }
.contribution-grid--pair { grid-template-columns: repeat(2, 1fr); }

.constraint-card,
.contribution-card {
    background: var(--white);
    padding: 1.75rem;
    position: relative;
    transition: background 0.25s var(--ease-out);
}

.constraint-card:hover,
.contribution-card:hover { background: var(--off-white); }

.constraint-tag {
    display: inline-block;
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.75rem;
}

.contribution-num {
    font-size: var(--text-meta);
    color: var(--gray-300);
    margin-bottom: 0.75rem;
}

.constraint-card h4,
.contribution-card h4 {
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.constraint-card p,
.contribution-card p {
    font-size: var(--text-services);
    line-height: 1.55;
    color: var(--gray-700);
    margin: 0;
}

/* Service blueprint table */
.blueprint-table-wrap {
    margin-top: 2rem;
    overflow-x: auto;
    border: 1px solid var(--gray-300);
}

table.blueprint-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

.blueprint-table th {
    text-align: left;
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500);
    background: var(--off-white);
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-300);
}

.blueprint-table td {
    padding: 1.1rem 1.25rem;
    font-size: var(--text-services);
    line-height: 1.5;
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-300);
    vertical-align: top;
}

.blueprint-table tr:last-child td { border-bottom: none; }

.blueprint-table td:first-child {
    font-weight: 600;
    color: var(--black);
    white-space: nowrap;
}

/* Process timeline */
.process-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 2.5rem;
}

.process-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--black);
    color: var(--white);
    font-family: var(--font-display);
    font-size: var(--text-detail);
    font-weight: 600;
    margin-bottom: 1rem;
}

.process-step h4 {
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.process-step p {
    font-size: var(--text-services);
    line-height: 1.55;
    color: var(--gray-700);
    margin: 0;
}

/* Toolkit / methods strip */
.toolkit-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gray-300);
}

.toolkit-group h5 {
    font-family: var(--font-display);
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 0.6rem;
}

.toolkit-group.highlight h5 { color: var(--accent); }

.toolkit-group ul {
    font-size: var(--text-detail);
    color: var(--gray-700);
}

.toolkit-group li { padding: 0.15rem 0; }

/* Process / value artifact photography */
.case-study-artifact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
}

.case-study-artifact {
    border: 1px solid var(--gray-300);
    background: var(--white);
    overflow: hidden;
    transition: box-shadow 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

/* Caps single (non-grid) photography at a contained width so it can't
   upscale past its native resolution and start looking soft/stretched.
   Grid pairs stay full-width since each half is already narrow. */
.case-study-artifact--contained {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.case-study-artifact:hover {
    box-shadow: 0 16px 32px rgba(10, 10, 10, 0.1);
    transform: translateY(-3px);
}

.case-study-artifact img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s var(--ease-out);
}

.case-study-artifact:hover img { transform: scale(1.02); }

.case-study-artifact figcaption {
    padding: 0.85rem 1.1rem;
    font-size: var(--text-meta);
    color: var(--gray-500);
    border-top: 1px solid var(--gray-300);
    background: var(--off-white);
}

/* Pull quote */
.case-study-pull-quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-quote-serif);
    font-weight: 400;
    line-height: 1.5;
    color: var(--navy); /* #231d5d — pull-quote body */
    max-width: 60ch;
    margin: 2.5rem 0 0;
    padding-left: 1.5rem;
    border-left: 3px solid var(--blue);
}

.case-study-pull-quote span {
    display: block;
    font-family: var(--font-display);
    font-style: normal;
    font-size: var(--text-services);
    font-weight: 400;
    color: var(--gray-500);
    margin-top: 0.75rem;
}

/* Outcomes grid */
.outcome-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--gray-300);
    border: 1px solid var(--gray-300);
    margin-top: 2rem;
}

.outcome-item {
    background: var(--white);
    padding: 1.75rem;
    transition: background 0.25s var(--ease-out);
}

.outcome-item:hover { background: var(--off-white); }

.outcome-icon {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--black);
    display: block;
    margin-bottom: 1rem;
}

.outcome-value {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--black);
    display: block;
    margin-bottom: 0.5rem;
}

.outcome-item p {
    font-size: var(--text-meta);
    line-height: 1.4;
    color: var(--gray-700);
    margin: 0;
}

/* Value list */
.case-study-value-list {
    margin-top: 2rem;
    max-width: 62ch;
}

.case-study-value-list li {
    display: flex;
    gap: 1rem;
    font-size: var(--text-nav);
    line-height: 1.55;
    color: var(--gray-700);
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--gray-300);
}

.case-study-value-list li:first-child { border-top: 1px solid var(--gray-300); }

.case-study-value-list li::before {
    content: '';
    flex: 0 0 6px;
    height: 6px;
    margin-top: 0.55rem;
    background: var(--blue);
}

/* Closing reflection — full-bleed dark band */
.case-study-reflection {
    background: var(--black);
    color: var(--white);
    padding: clamp(4rem, 8vw, 6rem) 0;
    margin-top: clamp(3rem, 6vw, 5rem);
    width: 100%;
    text-align: center;
}

.case-study-reflection .case-study-label { color: rgba(255, 255, 255, 0.5); }

.case-study-reflection p.reflect {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.4vw, 1.55rem);
    font-weight: 500;
    line-height: 1.55;
    max-width: 56ch;
    margin: 1.25rem auto 2rem;
}

.case-study-reflection .work-more-btn {
    background: var(--white);
    border-color: var(--white);
}

.case-study-reflection .work-more-btn:hover { opacity: 0.75; }

@media (max-width: 1024px) {
    .contribution-grid { grid-template-columns: repeat(2, 1fr); }
    .process-timeline,
    .process-timeline--half { grid-template-columns: repeat(2, 1fr); }
    .toolkit-strip { grid-template-columns: repeat(2, 1fr); }
    .outcome-grid { grid-template-columns: repeat(2, 1fr); }
    .case-study-artifact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .case-study-section,
    .case-study-section .about-grid {
        grid-template-columns: 1fr;
    }
    .constraint-grid,
    .contribution-grid,
    .process-timeline,
    .process-timeline--half,
    .toolkit-strip,
    .outcome-grid,
    .overview-grid {
        grid-template-columns: 1fr;
    }
    .case-study-stats { padding: 1.5rem var(--page-gutter); }
    .case-study-stat { flex: 1 1 45%; border-left: none; border-top: 1px solid var(--gray-300); padding-top: 1rem; }
    .case-study-stat:first-child { border-top: none; }
    .case-study-pager { grid-template-columns: 1fr; }
    .case-study-pager-link--next {
        text-align: left;
        align-items: flex-start;
    }
}

/* ---- Brand logos (Figma: How I Work) ---- */
.brand-logos-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem; /* 32 */
    background: var(--off-white);
    padding: 5rem 0 3.75rem; /* 80 / 60 — Figma 36:1021 */
}

.brand-logos-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--brand-logo-gap);
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
    overflow: hidden;
    /* Default: exactly 3 rows (logo height × 3 + gap × 2) */
    max-height: calc(3 * var(--brand-logo-h) + 2 * var(--brand-logo-gap));
    transition: max-height 0.4s var(--ease-out);
}

.brand-logos-grid.is-expanded {
    max-height: 200rem;
}

.brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--brand-logo-w);
    height: var(--brand-logo-h);
    flex-shrink: 0;
}

.brand-logo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
}

.brand-logos-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    color: var(--black);
    transition: opacity 0.2s;
}

.brand-logos-more:hover {
    opacity: 0.65;
}

.brand-logos-more-icon {
    display: inline-flex;
    order: 2;
    width: 16px;
    height: 10px;
    transition: transform 0.3s var(--ease-out);
}

.brand-logos-more-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.brand-logos-more[aria-expanded="true"] .brand-logos-more-icon {
    order: 0;
    transform: rotate(180deg);
}

.brand-logos-more-label {
    order: 1;
    font-family: var(--font-display);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

/* ---- Testimonial pull quote (Figma: Expertise / Pull Quote) ---- */
.testimonial-quote-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem; /* 48 — Figma 46:1048 */
    background: var(--white);
    padding: 4rem var(--page-gutter); /* 64 */
}

.testimonial-pull-quote {
    display: flex;
    flex-direction: column;
    gap: 3rem; /* 48 */
    width: 100%;
    max-width: 38.75rem; /* 620 — Figma Pull Quote */
    margin: 0;
    padding-left: 1.5rem; /* 24 */
    border-left: 3px solid var(--navy);
}

.testimonial-pull-quote p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.5rem; /* 24 — Quote serif desktop */
    font-weight: 400;
    line-height: 1.5;
    color: var(--navy); /* #231d5d — pull-quote body */
    margin: 0;
}

.testimonial-pull-quote-author {
    font-family: var(--font-display);
    font-style: normal;
    font-size: var(--text-services);
    font-weight: 400;
    line-height: 1.5;
    color: var(--gray-500);
}

.testimonial-pull-quote-author,
.testimonial-pull-quote-author cite {
    color: var(--gray-500);
    font-weight: 400;
}

.testimonial-pull-quote-author cite {
    display: block;
    font-style: normal;
}

.testimonial-pull-quote-author span {
    display: block;
}

.testimonial-carousel {
    width: 100%;
    max-width: 38.75rem; /* 620 — Figma Pull Quote */
}

.testimonial-carousel .testimonial-pull-quote {
    max-width: none;
}

.testimonial-carousel .testimonial-pull-quote[hidden] {
    display: none;
}

/* Figma carousel dots (58:1714): active pill 64×12, inactive 12×12, gap 16 */
.testimonial-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem; /* 16px */
}

.testimonial-pager-dot {
    box-sizing: border-box;
    width: 1.5rem; /* 24 hit area */
    height: 1.5rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: width 0.25s var(--ease-out), background 0.2s;
}

.testimonial-pager-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.75rem; /* 12 */
    height: 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--gray-300);
    transform: translate(-50%, -50%);
    transition: width 0.25s var(--ease-out), background 0.2s;
}

.testimonial-pager-dot.is-active {
    width: 4.5rem; /* 72 hit area for active */
    cursor: default;
}

.testimonial-pager-dot.is-active::after {
    width: 4rem; /* 64 pill */
    height: 0.75rem; /* 12 */
    background: var(--navy);
}

.testimonial-pager-dot:focus-visible {
    outline: 2px solid var(--black);
    outline-offset: 3px;
}

/* ---- Case Study — Gousto (Figma 21:413) ---- */
.case-study--gousto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem; /* 48 */
    padding: calc(var(--nav-height) + 3.5rem) 0 0; /* 56 below nav */
    background: var(--white);
}

.cs-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 3rem);
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: clamp(1.5rem, 6vw, 6rem); /* → 96 */
}

.cs-intro-title {
    display: flex;
    flex-direction: column;
    gap: 0.375rem; /* 6 — Figma Header title → services */
    flex: 1 1 0;
    min-width: 0; /* let title column shrink so glyphs don’t paint over overview */
    max-width: 100%;
}

.cs-display-title {
    font-family: var(--font-display);
    /* Prefer Display 80; scales down only when the intro column is tight */
    font-size: clamp(2.75rem, 1rem + 5vw, 5rem); /* 44 → 80 */
    font-weight: 600;
    line-height: var(--lh-display); /* 1 — Figma Display */
    letter-spacing: var(--tracking-display);
    color: var(--black);
    margin: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.cs-services-label {
    font-family: var(--font-display);
    font-size: var(--text-label);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--gray-500);
    margin: 0;
}

.cs-intro-overview {
    flex: 0 1 37.5rem; /* 600 */
    min-width: 0;
    max-width: min(37.5rem, 52%);
}

.cs-intro-overview p {
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: var(--lh-body);
    color: var(--gray-700);
    margin: 0 0 1rem;
}

.cs-intro-overview p:last-child {
    margin-bottom: 0;
}

.cs-hero-block {
    width: 100%;
}

.cs-hero-media {
    width: 100%;
    aspect-ratio: 4096 / 1650;
    overflow: hidden;
    background: var(--off-white);
}

.case-study--eurostar .cs-hero-media {
    aspect-ratio: 1440 / 500;
}

.case-study--eurostar .cs-hero-stats--navy {
    background: var(--navy);
    padding: 2.625rem 1rem; /* 42 / 16 */
}

.case-study--eurostar .cs-hero-stats--navy .cs-stat-value,
.case-study--eurostar .cs-hero-stats--navy .cs-stat-label {
    color: var(--white);
}

.case-study--eurostar .cs-hero-stats-inner {
    justify-content: center;
    gap: 6rem; /* 96 */
    max-width: none;
    width: auto;
}

/* Figma 286:4904 — accordion column 620 */
.case-study--eurostar .cs-accordion {
    max-width: 38.75rem; /* 620 */
}

/* Figma 308:6727 — Casestudy teaser row */
.case-study--eurostar .cs-related--casestudy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem; /* 40 */
    padding-block: 3.5rem; /* 56 */
}

.case-study--eurostar .cs-related-inner {
    display: flex;
    flex-direction: column;
    gap: 2.5rem; /* 40 */
    width: 100%;
    max-width: 38.75rem; /* 620 */
}

.case-study--eurostar .cs-related-heading {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-section-title); /* max 44 — Figma H2 */
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.9px;
    color: var(--black);
}

.case-study--eurostar .cs-related--casestudy .cs-related-card--row .cs-related-media {
    flex: 0 0 18.25rem; /* 292 */
    width: 18.25rem;
    aspect-ratio: 292 / 174;
}

.case-study--eurostar-login .cs-solve,
.case-study--eurostar-login .cs-gallery,
.case-study--eurostar-login .cs-section {
    width: 100%;
}

.case-study--eurostar-login .cs-section {
    max-width: 38.75rem; /* 620 */
    margin-inline: auto;
    padding-inline: clamp(1.5rem, 6vw, 6rem);
}

/* Figma 308:6441 — intro pair: 570×340, gap 40, caption 12, px 96 / py 24 */
.case-study--eurostar-login .cs-login-hero-block {
    display: flex;
    flex-direction: column;
    gap: 0; /* gallery py + stats sit flush like Figma 308:7084 (gap 24 is gallery padding) */
    width: 100%;
}

.case-study--eurostar-login .cs-gallery--pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 35.625rem)); /* 570 — shrink together, stay side-by-side */
    column-gap: 2.5rem; /* 40 */
    row-gap: 2.5rem;
    justify-content: center;
    align-items: start;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 1.5rem clamp(1.5rem, 6.67vw, 6rem); /* 24 / →96 */
    box-sizing: border-box;
}

.case-study--eurostar-login .cs-gallery--pair .cs-figure {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* 12 — Figma img → caption */
    width: 100%;
    max-width: 35.625rem; /* 570 */
    margin: 0;
}

.case-study--eurostar-login .cs-gallery--pair .cs-figure figcaption {
    margin-top: 0;
    font-size: var(--text-services); /* 14.4 */
    line-height: normal;
    color: var(--black);
}

.case-study--eurostar-login .cs-gallery--pair .cs-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 570 / 340;
    object-fit: cover;
    object-position: center;
    background: var(--white);
}

.case-study--eurostar-login .cs-gallery:not(.cs-gallery--pair):not(.cs-gallery--stack) .cs-figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 570 / 340;
    object-fit: cover;
    background: var(--white);
}

/* Figma 308:6458 — bordered frame on Synthesising data (gallery-c) only */
.case-study--eurostar-login .cs-figure--bordered img {
    border: 1px solid var(--gray-300);
    box-sizing: border-box;
}

.case-study--eurostar-login .cs-hero-stats-inner--icons {
    max-width: 45rem; /* 720 */
    gap: 0;
    justify-content: space-between;
}

.case-study--eurostar-login .cs-stat--icon {
    gap: 0;
    width: auto;
    min-width: 5.75rem;
}

.case-study--eurostar-login .cs-stat-icon {
    display: block;
    width: 4rem; /* 64 */
    height: 4rem;
    object-fit: contain;
    color: var(--black);
}

.case-study--eurostar-login .cs-stat--icon .cs-stat-label {
    color: var(--black);
    margin-top: 0;
}

.case-study--eurostar-login .cs-gallery--stack {
    display: flex;
    flex-direction: column;
    gap: 2.5rem; /* 40 */
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding: 1.5rem clamp(1.5rem, 6vw, 6rem) 3.5rem;
}

.case-study--eurostar-login .cs-gallery--stack .cs-figure {
    max-width: none;
    width: 100%;
    margin: 0;
}

.case-study--eurostar-login .cs-gallery--stack .cs-figure:first-child img {
    width: 100%;
    height: auto;
    aspect-ratio: 1170 / 612;
    object-fit: contain;
    background: var(--white);
}

.case-study--eurostar-login .cs-gallery--stack .cs-figure:last-child img {
    width: 100%;
    height: auto;
    aspect-ratio: 570 / 380;
    object-fit: contain;
    background: var(--white);
}

@media (max-width: 900px) {
    .case-study--eurostar .cs-hero-stats-inner {
        gap: 2rem;
        flex-wrap: wrap;
    }

    .case-study--eurostar .cs-related--casestudy .cs-related-card--row {
        flex-direction: column;
    }

    .case-study--eurostar .cs-related--casestudy .cs-related-card--row .cs-related-media {
        width: 100%;
        flex-basis: auto;
    }

    .case-study--eurostar-login .cs-gallery--pair {
        grid-template-columns: minmax(0, 35.625rem);
    }

    .case-study--eurostar-login .cs-hero-stats-inner--icons {
        gap: 1.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }
}

.cs-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-hero-stats {
    display: flex;
    justify-content: center;
    background: var(--off-white);
    padding: 2.625rem 1rem; /* 42 / 16 */
}

.cs-hero-stats-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 45rem; /* 720 */
}

.cs-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem; /* 6 */
    text-align: center;
}

.cs-stat-value {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--tracking-h1);
    color: var(--black);
    margin: 0;
}

.cs-stat-label {
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: var(--lh-body);
    color: var(--gray-500);
    margin: 0;
}

.case-study--gousto .cs-accordion {
    width: 100%;
    max-width: 45rem; /* 720 */
    margin-inline: auto;
    border-top: none;
    padding-inline: var(--page-gutter);
}

.case-study--gousto .cs-accordion .accordion-item {
    border-bottom: 1px solid var(--gray-300);
}

.case-study--gousto .cs-accordion .accordion-trigger {
    padding: 1.5rem 1rem 1.5rem 0; /* py 24, pr 16 */
}

.case-study--gousto .cs-accordion .accordion-title {
    font-size: var(--text-subsection); /* H3 32 */
    font-weight: 600;
    line-height: 1.5;
}

.case-study--gousto .cs-accordion-body {
    max-width: none;
    color: var(--black);
    font-size: var(--text-body);
    line-height: var(--lh-body);
    padding-bottom: 1.5rem;
}

.case-study--gousto .cs-accordion-body p {
    margin: 0 0 1rem;
}

.case-study--gousto .cs-accordion-body p:last-child {
    margin-bottom: 0;
}

.case-study--gousto .cs-accordion-body strong {
    font-weight: 700;
}

.cs-figure {
    margin: 0;
    width: 100%;
}

.cs-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.cs-figure figcaption {
    margin-top: 0.75rem; /* 12 */
    font-family: var(--font-display);
    font-size: var(--text-services);
    font-weight: 400;
    line-height: 1.5;
    color: var(--black);
}

.cs-figure--process {
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: clamp(1.5rem, 6vw, 6rem);
}

.cs-media-carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem; /* 24 — match testimonial pager spacing rhythm */
    width: min(38.75rem, calc(100% - (2 * var(--page-gutter)))); /* 620 */
    margin-inline: auto;
    padding-inline: 0;
    box-sizing: border-box;
}

.cs-media-carousel-stage {
    width: 100%;
}

.cs-media-carousel .cs-figure--process {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

.cs-media-carousel [data-media-slide][hidden] {
    display: none;
}

.cs-media-carousel .testimonial-pager {
    padding-inline: 0;
}

.cs-section {
    width: 100%;
    max-width: 45rem;
    margin-inline: auto;
    padding-inline: var(--page-gutter);
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 16 */
}

.cs-section--callouts {
    gap: 1.5rem; /* 24 — Figma process callouts */
}

.cs-section-label {
    font-family: var(--font-display);
    font-size: var(--text-label);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--gray-500);
    margin: 0;
}

.cs-rich-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cs-rich-list p {
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: var(--lh-body);
    color: var(--black);
    margin: 0;
}

.cs-rich-list strong {
    font-weight: 700;
}

.cs-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem; /* 40 */
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: clamp(1.5rem, 6vw, 6rem);
}

.cs-gallery .cs-figure {
    flex: 1 1 18rem;
    max-width: 35.625rem; /* 570 */
}


.cs-pull-quote p {
    color: var(--navy); /* #231d5d — case-study pull-quote body */
}

.case-study--gousto .cs-pull-quote {
    width: 100%;
    max-width: 45rem;
    margin-inline: auto;
}

.cs-pager {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    max-width: min(78rem, 100%); /* ~1248 */
    margin-inline: auto;
    padding: 2rem clamp(1.5rem, 6vw, 6rem) 5rem; /* pt 32, pb 80 */
    border-top: 1px solid var(--gray-300);
}

.cs-pager-link {
    display: flex;
    flex-direction: column;
    gap: 0.375rem; /* 6 */
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s;
}

.cs-pager-link:hover {
    opacity: 0.65;
}

.cs-pager-link--next {
    align-items: flex-end;
    text-align: right;
    margin-left: auto;
}

.cs-pager-dir {
    font-family: var(--font-display);
    font-size: 0.75rem; /* 12 */
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gray-500);
}

.cs-pager-name {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.3125rem); /* ~21 */
    font-weight: 700;
    color: var(--black);
}

/* Tablet — side-by-side intro: shrink title further so it stays clear of overview */
@media (max-width: 1023px) and (min-width: 801px) {
    .cs-intro {
        gap: 1.5rem;
        align-items: flex-start;
    }

    .cs-intro-title {
        flex: 1 1 40%;
    }

    .cs-intro-overview {
        flex: 1 1 55%;
        max-width: none;
    }

    .cs-display-title {
        font-size: clamp(2.25rem, 4.5vw, 3.25rem); /* ~36–52 */
        letter-spacing: -1px;
    }
}

/* Mobile / stacked intro — Figma Header 136:483 */
@media (max-width: 800px) {
    .cs-intro {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem; /* 12 — between title block and overview */
        padding-inline: 1.5rem; /* 24 */
        padding-bottom: 1.5rem; /* 24 */
        max-width: none;
    }

    .cs-intro-title {
        display: flex;
        flex-direction: column;
        gap: 0.5rem; /* 8 — title → services */
        padding-bottom: 1rem; /* 16 — + parent gap 12 ≈ 28 to overview */
        flex: 0 0 auto;
        max-width: none;
        width: 100%;
    }

    .cs-intro-overview {
        max-width: none;
        flex: 0 0 auto;
        width: 100%;
    }

    /* Figma mobile Header 136:483 — H2 (not Display 80) */
    .case-study .cs-display-title {
        margin: 0;
        font-size: 2.75rem; /* 44px — Foundations H2 */
        font-weight: 600;
        line-height: 1.1;
        letter-spacing: -0.9px;
    }

    .cs-intro-overview p {
        margin: 0 0 1.75rem; /* blank-line rhythm at body lh 1.75 */
    }

    .cs-intro-overview p:last-child {
        margin-bottom: 0;
    }

    .cs-hero-stats-inner {
        gap: 1.5rem;
    }

    .cs-gallery {
        flex-direction: column;
        align-items: stretch;
    }

    .cs-gallery .cs-figure {
        max-width: none;
    }
}

/* ---- Case Study — Hotels.com (Figma 152:2802) ---- */
.case-study--hotels {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.5rem; /* 56 */
    padding: calc(var(--nav-height) + 3.5rem) 0 0;
    background: var(--white);
}

.case-study--hotels .cs-hero-media--hotels {
    aspect-ratio: 1920 / 600;
    max-height: 37.5rem; /* 600 */
}

.case-study--hotels .cs-hero-stats--navy {
    background: var(--navy);
    padding: 2.625rem 1rem; /* 42 / 16 */
}

.case-study--hotels .cs-hero-stats-inner--icons {
    max-width: 45rem; /* 720 */
    gap: 0;
}

.case-study--hotels .cs-stat--icon {
    gap: 0;
    width: auto;
    min-width: 5.75rem;
}

.case-study--hotels .cs-stat-icon {
    display: block;
    width: 4rem; /* 64 */
    height: 4rem;
    object-fit: cover;
}

.case-study--hotels .cs-stat--icon .cs-stat-label {
    color: var(--white);
    margin-top: 0;
}

.case-study--hotels .cs-accordion {
    width: 100%;
    max-width: 38.75rem; /* 620 */
    margin-inline: auto;
    border-top: none;
    padding-inline: var(--page-gutter);
}

.case-study--hotels .cs-accordion .accordion-item {
    border-bottom: 1px solid var(--gray-300);
}

.case-study--hotels .cs-accordion .accordion-trigger {
    padding: 1.5rem 1rem 1.5rem 0;
}

.case-study--hotels .cs-accordion .accordion-title {
    font-size: var(--text-subsection); /* 32 — Figma H3 */
    font-weight: 600;
    line-height: 1.2;
}

.case-study--hotels .cs-accordion-body {
    max-width: none;
    color: var(--black);
    font-size: var(--text-body);
    line-height: var(--lh-body);
    padding-bottom: 1.5rem; /* 24 — Figma accordion item py */
}

.case-study--hotels .cs-accordion-body p {
    margin: 0 0 1rem;
}

.case-study--hotels .cs-accordion-body p:last-child {
    margin-bottom: 0;
}

/* ---- Hotels modularising deep-dive (Figma 197:3391) ---- */
.case-study--modular {
    gap: 3.5rem; /* 56 */
    padding-top: calc(var(--nav-height) + 0.5rem);
}

.cs-back {
    display: inline-flex;
    align-items: center;
    gap: 1rem; /* 16 */
    align-self: flex-start;
    margin-inline: clamp(1.5rem, 6vw, 6rem);
    padding: 0.5rem 0;
    font-family: var(--font-display);
    font-size: var(--text-label);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: var(--black);
    text-decoration: none;
}

.cs-back img {
    display: block;
    width: 0.65rem;
    height: 1rem;
    transform: scaleX(-1);
}

.cs-back:hover {
    opacity: 0.6;
}

.cs-modular-title {
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: clamp(1.5rem, 6vw, 6rem);
}

.cs-modular-h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-h1); /* 56 */
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--tracking-h1);
    color: var(--black);
}

.cs-solve {
    display: grid;
    grid-template-columns: minmax(0, 37.5rem) minmax(0, 1fr);
    gap: 3rem; /* 48 */
    align-items: center;
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: clamp(1.5rem, 6vw, 6rem);
}

.cs-solve-copy {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* 32 */
    max-width: 37.5rem; /* 600 */
}

.cs-solve-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cs-solve-body p {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: var(--lh-body);
    color: var(--black);
}

.cs-hmw {
    margin: 0;
    max-width: 28.125rem; /* 450 */
    justify-self: center;
    padding-left: 1.5rem; /* 24 */
    border-left: 3px solid var(--navy);
}

.cs-hmw p {
    margin: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.5rem; /* 24 */
    font-weight: 400;
    line-height: 1.5;
    color: var(--navy); /* #231d5d — HMW / quote body */
}

.cs-modular-hero-block {
    width: 100%;
}

.cs-modular-collage {
    position: relative;
    width: 100%;
    aspect-ratio: 1440 / 600; /* matches landing-pages-hero.jpg 2880×1200 */
    max-height: 37.5rem; /* 600 */
    height: auto;
    overflow: hidden;
    background: #ebe4f7;
}

.cs-modular-collage-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.cs-hero-stats-inner--four {
    max-width: none;
    justify-content: center;
    gap: clamp(2rem, 6vw, 6rem); /* → 96 */
}

.case-study--modular .cs-section {
    max-width: 38.75rem; /* 620 — Figma RESULTS / OUTPUT / PROCESS */
}

.case-study--modular .cs-section-label--h4 {
    text-align: left;
}

@media (max-width: 1023px) {
    .cs-solve {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .cs-hmw {
        justify-self: stretch;
        max-width: none;
    }
}

@media (max-width: 800px) {
    .case-study--modular {
        gap: 2.5rem;
        padding-top: calc(var(--nav-height) + 0.25rem);
    }

    .cs-back {
        margin-inline: 1.5rem;
    }

    .cs-modular-h1 {
        font-size: 2.75rem; /* match mobile H2 rhythm */
        letter-spacing: -0.9px;
    }

    .cs-modular-collage {
        aspect-ratio: auto;
        height: 20rem;
        max-height: none;
    }

    .cs-hero-stats-inner--four {
        flex-wrap: wrap;
        gap: 1.5rem 2rem;
    }

    .cs-hmw p {
        font-size: 1.25rem;
    }
}

.cs-related {
    width: 100%;
    background: var(--off-white);
    padding: 3.5rem clamp(1.5rem, 6vw, 6rem); /* 56 / →96 */
}

.cs-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem; /* 40 */
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
}

/* Figma 152:2802 — two horizontal project rows */
.cs-related-grid--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem; /* 40 */
}

.cs-related-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8 */
    min-width: 0;
}

.cs-related-card--row {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.5rem; /* 24 */
}

.cs-related-card--row .cs-related-media {
    flex: 0 0 16.125rem; /* 258 */
    width: 16.125rem;
    aspect-ratio: 258 / 148;
}

.cs-related-card--row .cs-related-body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 0;
    gap: 0.25rem;
}

.cs-related-card--row .cs-related-title {
    margin-bottom: 0;
    line-height: 1.2;
}

.cs-related-card--row .cs-related-desc {
    margin: 0 0 1.5rem; /* 24 before link — Figma pb on title block */
}

.cs-related-media {
    display: block;
    aspect-ratio: 870 / 500;
    overflow: hidden;
    background: var(--gray-300);
}

.cs-related-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-related-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding-top: 1rem; /* 16 */
}

.cs-related-title {
    font-family: var(--font-display);
    font-size: var(--text-subsection); /* 32 */
    font-weight: 600;
    line-height: 1.1;
    color: var(--navy);
    margin: 0 0 0.5rem;
}

.cs-related-title a {
    color: inherit;
    text-decoration: none;
}

.cs-related-title a:hover {
    opacity: 0.75;
}

.cs-related-desc {
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: var(--lh-body);
    color: var(--black);
    margin: 0 0 1.5rem; /* 24 before link */
}

.cs-live-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: var(--lh-body);
    color: var(--navy);
    text-decoration: none;
}

.cs-live-link span {
    font-weight: 600;
    line-height: 1.3;
}

.cs-live-link:hover {
    opacity: 0.7;
}

.cs-output {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2.5rem; /* 40 */
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding: 0 clamp(1.5rem, 6vw, 6rem) 3.5rem;
}

.cs-output-copy {
    flex: 0 1 38.75rem; /* 620 */
    max-width: 38.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* 24 */
}

.cs-section-label--h4 {
    font-size: var(--text-card-title); /* H4 24 */
    line-height: 1.2;
    letter-spacing: -0.4px;
    text-transform: uppercase;
}

.cs-output-figure {
    flex: 0 1 35.625rem; /* 570 */
    max-width: 35.625rem;
}

.cs-pager.cs-pager--thumbs {
    --cs-pager-gutter: clamp(1.5rem, 6.67vw, 6rem); /* up to 96 — matches Figma px */
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem; /* 16 — Figma Pager Row itemSpacing */
    padding: 3.5rem var(--cs-pager-gutter); /* 56 / up to 96 */
    max-width: none;
    width: 100%;
    /* Inset top divider (Figma 308:7079) — not full-bleed */
    border-top: none;
    background-image: linear-gradient(var(--gray-500), var(--gray-500));
    background-size: calc(100% - (2 * var(--cs-pager-gutter))) 1px;
    background-position: center top;
    background-repeat: no-repeat;
}

.cs-pager.cs-pager--thumbs .cs-pager-link {
    /* Figma Prev/Next: gap 24 dir→thumb group; gap 12 thumb→name */
    gap: 0;
    max-width: 16.125rem; /* 258 */
    width: 16.125rem;
}

.cs-pager.cs-pager--thumbs .cs-pager-link--next {
    align-items: stretch;
    text-align: left;
}

.cs-pager.cs-pager--thumbs .cs-pager-link--next .cs-pager-dir {
    align-self: flex-end;
    text-align: right;
}

.cs-pager.cs-pager--thumbs .cs-pager-dir {
    display: block;
    margin: 0 0 1.5rem; /* 24 — Figma gap dir → thumb */
    font-size: var(--text-label); /* 14 — Figma Label */
    font-weight: 600;
    letter-spacing: 0.2px; /* Figma: 0.2px on whole ← PREVIOUS / NEXT → string */
    line-height: 1.3; /* Figma ~130% */
    text-transform: uppercase;
    white-space: nowrap;
}

.cs-pager.cs-pager--thumbs .cs-pager-thumb {
    margin-bottom: 0.75rem; /* 12 — Figma gap thumb → name */
}

.cs-pager-thumb {
    display: block;
    width: 16.125rem; /* 258 */
    height: 9.25rem; /* 148 */
    border-radius: 4px;
    overflow: hidden;
    background: var(--off-white);
    flex-shrink: 0;
}

.cs-pager-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-pager--thumbs .cs-pager-name {
    font-size: var(--text-card-title); /* H4 24 */
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.4px;
}

@media (max-width: 1023px) {
    .cs-related-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .cs-related-grid--pair {
        grid-template-columns: 1fr;
    }

    .cs-related-card--row {
        flex-direction: column;
    }

    .cs-related-card--row .cs-related-media {
        flex: 0 0 auto;
        width: 100%;
        max-width: 22rem;
        aspect-ratio: 258 / 148;
    }

    .cs-output {
        flex-direction: column;
        padding-bottom: 2.5rem;
    }

    .cs-output-copy,
    .cs-output-figure {
        max-width: none;
        flex: 1 1 auto;
        width: 100%;
    }
}

@media (max-width: 800px) {
    .case-study--hotels {
        gap: 2.5rem;
    }

    .case-study--hotels .cs-hero-stats-inner--icons {
        gap: 1.25rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .cs-pager.cs-pager--thumbs {
        flex-direction: column;
        gap: 2rem;
        padding-block: 2.5rem;
    }

    .cs-pager.cs-pager--thumbs .cs-pager-link--next {
        align-items: flex-start;
        text-align: left;
        margin-left: 0;
    }
}


/* ============================================================
   Responsive — Figma Home Mobile (125:359 / 375) & Tablet (125:360 / 768)
   Desktop ≥1024: Home 19:368 @ 1440 · Tablet: 768–1023 · Mobile: ≤767
   ============================================================ */

/* ---- Desktop (≥1024) — Figma 19:368 content gutters 96 ---- */
@media (min-width: 1024px) {
    :root {
        --page-gutter: 6rem; /* 96 — hero / work / logos content */
    }

    .nav-container {
        padding-inline: 3rem; /* 48 — Nav Bar stays tighter */
    }

    .hero-info-grid {
        gap: 4rem; /* 64 */
        max-width: none;
        width: 100%;
        padding: calc(var(--nav-height) + 3.5rem) var(--page-gutter) 3.5rem; /* py 56 */
    }

    .hero-stats-frame {
        max-width: none;
        width: 100%;
        padding-inline: var(--page-gutter); /* match .hero-info-grid above */
    }

    .hero-stats-inner {
        max-width: none;
        width: 100%;
        margin-inline: 0;
        padding: 2.625rem 0; /* 42 */
    }

    .hero-stats-inner .hero-stat-label {
        font-size: var(--text-body); /* 16 */
        line-height: 1.75;
    }

    .work2-section .work-header-row,
    .work2-row {
        max-width: none;
        padding-inline: var(--page-gutter);
    }

    .expertise-section {
        padding: 4rem var(--page-gutter); /* 64 / 96 */
    }

    .brand-logos-grid {
        max-width: none;
        padding-inline: var(--page-gutter);
        justify-content: flex-start;
    }

    .testimonial-quote-section {
        padding-inline: 0;
    }

    .footer--display .footer-display-inner {
        max-width: none;
        padding-inline: 3rem; /* 48 */
    }

    .footer--display .footer-display-inner::before {
        /* Figma divider 51:1077 at 48 gutter */
        margin-inline: 0;
    }
}

/* ---- Tablet (768–1023) — Figma 125:360 ---- */
@media (max-width: 1023px) and (min-width: 768px) {
    :root {
        --page-gutter: 3rem; /* 48 */
        --brand-logo-w: 9.75rem; /* 156 */
        --brand-logo-h: 5rem; /* 80 */
        --brand-logo-gap: 1rem; /* 16 */
    }

    /* Full nav links (no hamburger) — menu hidden sitewide */
    .nav-toggle {
        display: none !important;
    }

    .nav-menu {
        display: none !important;
    }

    /* Hero — title + CTA side-by-side, bottom-aligned */
    .hero-info-grid {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1.5rem; /* 24 */
        padding: calc(var(--nav-height) + 3rem) var(--page-gutter) 2.5rem; /* pt 48, pb 40 */
    }

    .hero-role-title,
    .hero-info-cell--bio .hero-tagline {
        font-size: 2rem; /* 32 */
        line-height: 1.1;
        letter-spacing: 0;
    }

    .hero-stats-inner {
        gap: 4rem; /* 64 */
        padding: 2rem 0; /* 32 */
    }

    .hero-stats-inner .hero-stat-value {
        font-size: 2rem; /* 32 */
        line-height: 1.1;
        letter-spacing: 0;
    }

    .hero-stats-inner .hero-stat-label {
        font-size: var(--text-services); /* 14.4 */
        line-height: 1.5;
    }

    .work2-section {
        gap: 1.75rem; /* 28 */
        padding: 3rem 0; /* 48 */
    }

    .work2-row {
        gap: 1.5rem; /* 24 */
    }

    .work2-sidebar {
        width: 6.875rem; /* 110 */
        min-width: 6.875rem;
        padding-right: 0;
    }

    .work2-sidebar.parallel-nav .parallel-nav-item {
        border-left-width: 4px;
        padding: 1rem 0 2rem 1rem; /* pt 16, pb 32, pl 16 */
    }

    .work2-sidebar.parallel-nav .parallel-nav-item.active {
        border-left-color: var(--black);
    }

    .work2-image-panel {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        overflow: visible;
        background: transparent;
        border-radius: 0;
        padding: 0;
    }

    .work2-media {
        position: relative;
        inset: auto;
        width: 100%;
        height: 22.5rem; /* 360 */
        border-radius: 0;
        overflow: hidden;
    }

    .work2-media picture {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
    }

    .work2-panel-img,
    #work2-case-0 .work2-panel-img,
    #work2-case-1 .work2-panel-img,
    #work2-case-2 .work2-panel-img {
        position: absolute;
        inset: 0;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
        border-radius: 6px;
    }

    .work2-image-panel .parallel-panel-header {
        position: static;
        max-width: none;
        width: 100%;
        padding: 1.25rem 0 0; /* 20 */
        gap: 0.375rem; /* 6 */
        pointer-events: auto;
    }

    .work2-image-panel .panel-index {
        display: none;
    }

    .work2-image-panel .spotlight-title {
        font-size: 2.75rem; /* H2 44 — Figma tablet */
        line-height: 1.1;
        letter-spacing: -0.9px;
    }

    .work2-image-panel .panel-services {
        white-space: normal;
        color: var(--gray-700);
    }

    .work2-more-header {
        display: none;
    }

    .work2-more-mobile {
        display: none;
    }

    /* Expertise — full width between 48 gutters */
    .expertise-section {
        padding: 3rem var(--page-gutter); /* 48 */
    }

    .expertise-inner {
        max-width: none;
        width: 100%;
        gap: 1.5rem; /* 24 */
    }

    #services2-accordion .accordion-title {
        font-size: 2rem; /* 32 H3 */
        line-height: 1.1;
    }

    /* Logos — 4 columns (156×80, gap 16) */
    .brand-logos-grid {
        justify-content: flex-start;
        max-height: calc(3 * var(--brand-logo-h) + 2 * var(--brand-logo-gap));
    }

    .testimonial-quote-section {
        padding: 3rem var(--page-gutter);
    }

    .testimonial-carousel,
    .testimonial-pull-quote {
        max-width: none;
    }

    .testimonial-pull-quote p {
        font-size: 1.5rem; /* 24 Quote serif */
        line-height: 1.5;
    }
}

/* ---- Mobile (≤767 / Figma 125:359 @ 375) ---- */
@media (max-width: 767px) {
    :root {
        --page-gutter: 1.5rem; /* 24 */
        --brand-logo-w: calc((100% - 0.5rem) / 2); /* 2-col, 8px gap — Figma 130:446 */
        --brand-logo-h: 3.5625rem; /* 57 */
        --brand-logo-gap: 0.5rem; /* 8 */
    }

    .nav-container {
        padding-inline: 3rem; /* 48 — Figma Nav Bar mobile */
    }

    .nav-logo {
        font-size: 1.5rem; /* H4 24 */
        letter-spacing: -0.4px;
        line-height: 1.2;
    }

    .nav-toggle {
        display: none !important;
    }

    .nav-menu {
        display: none !important;
    }

    .nav-menu.open {
        display: none !important;
    }

    /* Hero — stacked title then CTA */
    .hero-info-grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem; /* 24 */
        padding: calc(var(--nav-height) + 2rem) var(--page-gutter) 2rem; /* py 32 under nav */
    }

    .hero-info-main {
        max-width: none;
    }

    .hero-role-title,
    .hero-info-cell--bio .hero-tagline {
        font-size: 2rem; /* 32 */
        line-height: 1.1;
        letter-spacing: 0;
    }

    /* Figma 137:2325 — “Product Designer” navy; eyebrow stays gray-500 */
    .hero-role-title {
        color: var(--navy);
    }

    .hero-info-cell--cta {
        align-self: flex-start;
    }

    .hero-info-cell--cta .pill-btn {
        gap: 0.5rem; /* 8 */
        padding-inline: 0;
    }

    .hero-info-cell--cta .pill-btn-icon {
        width: 2rem; /* 32 — Figma mobile */
        height: 2rem;
    }

    .hero-stats-frame {
        padding-inline: 0.75rem; /* 12 — Figma Stats */
    }

    .hero-stats-inner {
        gap: 0.75rem; /* 12 */
        padding: 1.5rem 0; /* 24 */
    }

    .hero-stats-inner .hero-stat {
        padding-inline: 0;
    }

    .hero-stats-inner .hero-stat-value {
        font-size: 2rem; /* 32 */
        line-height: 1.1;
        letter-spacing: 0;
    }

    .hero-stats-inner .hero-stat-label {
        font-size: var(--text-services);
        line-height: 1.5;
    }

    /* Work — Figma 128:384 */
    .work2-section {
        gap: 0;
        padding: 2.5rem 0; /* 40 */
        background: #cadee6; /* Figma Work mobile fill */
    }

    .work2-section .work-header-row {
        margin-bottom: 2rem; /* 32 — section gap to tabs */
    }

    .work2-section h4.work-header-label {
        font-size: 1.5rem; /* H4 24 — not fluid clamp */
        letter-spacing: -0.4px;
        line-height: 1.2;
        color: var(--gray-700); /* Figma 128:386 */
    }

    .work2-more-header {
        display: none;
    }

    .work2-more-mobile {
        display: none;
    }

    .work2-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-inline: 0;
    }

    .work2-sidebar {
        min-width: 0;
        width: 100%;
        margin: 0; /* kill shared parallel-nav vertical margin */
        padding: 0;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0;
    }

    .work2-sidebar.parallel-nav {
        flex-direction: row;
        display: flex;
        margin: 0;
        gap: 0;
    }

    .work2-sidebar.parallel-nav .parallel-nav-item {
        flex: 1 1 0;
        border-left: none;
        border-bottom: 4px solid transparent;
        padding: 0 var(--page-gutter) 1rem; /* pb 16 */
        text-align: left;
        gap: 0.25rem; /* 4 */
    }

    .work2-sidebar.parallel-nav .parallel-nav-item.active {
        border-left-color: transparent;
        border-bottom-color: var(--navy); /* Figma 137:2398 */
    }

    .work2-sidebar .parallel-nav-num {
        font-size: var(--text-label);
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
        color: var(--gray-500);
    }

    .work2-sidebar .parallel-nav-name {
        font-size: var(--text-body);
        font-weight: 600;
        color: var(--black);
    }

    .work2-panels {
        width: 100%;
    }

    .work2-image-panel {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        overflow: visible;
        background: transparent;
        padding: 0;
        border-radius: 0;
    }

    /* Shared media frame — identical on every slide */
    .work2-media {
        position: relative;
        inset: auto;
        flex: 0 0 13.75rem; /* 220 */
        width: 100%;
        height: 13.75rem;
        border-radius: 0;
        overflow: hidden;
    }

    .work2-media picture {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .work2-panel-img,
    #work2-case-0 .work2-panel-img,
    #work2-case-1 .work2-panel-img,
    #work2-case-2 .work2-panel-img {
        position: absolute;
        inset: 0;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        aspect-ratio: auto;
        object-fit: cover;
        object-position: center;
        border-radius: 0;
    }

    .work2-image-panel .parallel-panel-header {
        position: static;
        max-width: none;
        width: 100%;
        padding: 1rem var(--page-gutter) 1.5rem; /* pt 16, pb 24 */
        pointer-events: auto;
        gap: 0;
    }

    .work2-image-panel .panel-index {
        display: block;
        font-family: var(--font-serif);
        font-style: italic;
        font-size: 0.9375rem; /* 15 */
        line-height: normal;
        letter-spacing: 0;
        color: var(--black);
        margin: 0 0 1rem; /* 16 under index */
    }

    .work2-image-panel .spotlight-title {
        font-size: 2.75rem; /* H2 44 — Figma mobile */
        line-height: 1.1;
        letter-spacing: -0.9px;
        margin: 0 0 0.25rem; /* 4 to services */
        color: var(--navy); /* Figma 128:403 */
    }

    .work2-image-panel .panel-services {
        white-space: normal;
        color: var(--black); /* Figma 128:404 */
        margin: 0;
    }

    /* Expertise — Figma 130:398 */
    .expertise-section {
        padding: 2.5rem var(--page-gutter); /* 40 / 24 */
    }

    .expertise-inner {
        max-width: none;
        width: 100%;
        gap: 1.25rem; /* 20 — label to accordion */
    }

    .expertise-label {
        font-size: 1.5rem; /* H4 24 */
        letter-spacing: -0.4px;
        line-height: 1.2;
    }

    /* Frame 130:400: item / divider / item with 20 gap each side of rule */
    #services2-accordion .accordion-item {
        border-bottom: none;
    }

    #services2-accordion .accordion-item:not(:last-child) {
        border-bottom: 1px solid var(--gray-100);
        padding-bottom: 1.25rem; /* 20 above divider */
        margin-bottom: 1.25rem; /* 20 below divider */
    }

    /* Trigger py 8 on all items (incl. open first) — Figma 130:403 */
    #services2-accordion .accordion-trigger,
    #services2-accordion .accordion-item:first-child .accordion-trigger,
    #services2-accordion .accordion-item:first-child .accordion-trigger[aria-expanded="true"],
    #services2-accordion .accordion-item:not(:first-child) .accordion-trigger {
        padding: 0.5rem 0; /* 8 */
    }

    #services2-accordion .accordion-title {
        font-size: 1.5rem; /* H4 24 — fixed, not clamp */
        line-height: 1.2;
        letter-spacing: -0.4px;
        white-space: normal;
    }

    /* Open item: gap 8 under trigger (title→body = pb8 + 8 = 16) */
    #services2-accordion .accordion-panel-text {
        padding-top: 0.5rem; /* 8 */
        padding-bottom: 0;
    }

    #services2-accordion .accordion-icon::before,
    #services2-accordion .accordion-icon::after {
        background: var(--gray-500); /* Figma − / + */
    }

    /* Logos — Figma 130:446: 164×57 cells, gap 8, logos optically scaled ~1.3 */
    .brand-logos-section {
        padding: 2.5rem 1.1875rem; /* 40 / 19 */
        background: var(--off-white);
        gap: 0; /* More btn sits flush under grid */
    }

    .brand-logos-grid {
        justify-content: flex-start;
        padding-inline: 0;
        gap: var(--brand-logo-gap);
        max-height: calc(3 * var(--brand-logo-h) + 2 * var(--brand-logo-gap));
    }

    .brand-logo {
        width: calc((100% - var(--brand-logo-gap)) / 2);
        height: var(--brand-logo-h);
        overflow: hidden;
    }

    /* Figma: artboard 213×74 inside 164×57 clip (≈1.3×) */
    .brand-logo img {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: contain;
        object-position: center;
        transform: scale(1.3);
        transform-origin: center center;
    }

    .brand-logos-more {
        height: 4.5rem; /* 72 */
        justify-content: center;
    }

    /* Figma Testimonial 130:548 — px 16, py 40, gap 24 to pager */
    .testimonial-quote-section {
        background: var(--white);
        padding: 2.5rem 1rem; /* 40 / 16 */
        gap: 1.5rem; /* 24 */
        align-items: center;
    }

    .testimonial-carousel {
        width: 100%;
        margin: 0;
    }

    .testimonial-carousel,
    .testimonial-pull-quote {
        max-width: none;
        width: 100%;
    }

    .testimonial-pull-quote {
        gap: 3rem; /* 48 — quote to author */
        padding-left: 1.5rem; /* 24 */
        border-left: 3px solid var(--navy); /* Figma 130:549 */
        box-sizing: border-box;
        margin: 0;
    }

    /* Figma Quote serif mobile: 16 / italic / lh 1.5 */
    .testimonial-quote-section .testimonial-pull-quote > p {
        font-size: 1rem; /* 16 */
        line-height: 1.5;
        letter-spacing: 0;
    }

    /* Figma author: 14.4 / gray-500 / stacked lh 1.5, no extra gap */
    .testimonial-quote-section .testimonial-pull-quote-author {
        display: flex;
        flex-direction: column;
        gap: 0;
        font-size: var(--text-services); /* 14.4 */
        line-height: 1.5;
        color: var(--gray-500);
        font-weight: 400;
    }

    .testimonial-quote-section .testimonial-pull-quote-author cite,
    .testimonial-quote-section .testimonial-pull-quote-author span {
        display: block;
        font-size: inherit;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5;
        color: var(--gray-500);
        margin: 0;
    }

    /* Figma carousel dots mobile (148:2767): gap 12, inactive 16, active 64×12 */
    .testimonial-pager {
        gap: 0.75rem; /* 12 */
        justify-content: center;
        height: 1rem; /* 16 */
    }

    .testimonial-pager-dot {
        width: 1rem; /* 16 */
        height: 1rem;
    }

    .testimonial-pager-dot::after {
        width: 0.75rem; /* 12 visual */
        height: 0.75rem;
    }

    .testimonial-pager-dot.is-active {
        width: 4.5rem; /* 72 */
    }

    .testimonial-pager-dot.is-active::after {
        width: 4rem; /* 64 */
        height: 0.75rem; /* 12 */
        background: var(--navy); /* Figma 148:2769 */
    }

    .footer--display {
        padding: 0 0 2rem; /* pb 32 */
    }

    /* Figma Footer (130:567 / 137:2448): pt 40, px 16, pb 32, gap 32 */
    .footer--display .footer-display-inner {
        gap: 2rem; /* 32 */
        padding-inline: 1rem; /* 16 */
        padding-top: 0;
    }

    .footer--display .footer-display-inner::before {
        background: var(--gray-100);
        /* page divider at 24 gutter; footer content at 16 → inset 8 */
        margin-inline: 0.5rem;
        /* 8 + flex gap 32 = 40 to Contact (Figma Footer pt-40) */
        margin-bottom: 0.5rem;
    }

    .footer-display-top {
        width: 100%;
    }

    .footer-display-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        gap: 1rem; /* 16 — Figma Frame 137:2451 (Contact y0→21, LinkedIn y37) */
        flex-wrap: nowrap;
    }

    .footer-display-links a {
        gap: 0.25rem; /* 4 — icon to label */
        font-size: 1rem; /* H5 16 */
        font-weight: 600;
        line-height: 1.3;
    }

    .footer-display-divider {
        width: 100%;
        background: var(--gray-300); /* Figma Footer inner divider */
    }

    .footer-display-bottom {
        width: 100%;
        justify-content: space-between;
        gap: 1rem;
    }

    .footer-display-bottom .footer-copy {
        font-size: var(--text-services); /* 14.4 */
        line-height: 1.5;
        color: var(--gray-500);
    }

    .footer-display-location {
        font-size: 1rem; /* 16 Body */
        line-height: 1.75;
        color: var(--gray-500);
        gap: 0.25rem;
    }

    .footer-link-icon {
        width: 16px;
        height: 16px;
    }
}

/* ---- Branding case studies — imagery-led ---- */
.case-study--brand {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--white);
    padding-top: 0;
    overflow: clip;
}

.brand-hero {
    position: relative;
    min-height: min(92vh, 56rem);
    display: flex;
    align-items: flex-end;
    color: var(--white);
    isolation: isolate;
}

.brand-hero-media {
    position: absolute;
    inset: -8% 0 -8%;
    z-index: 0;
    overflow: hidden;
}

.brand-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: translate3d(0, var(--brand-parallax-y, 0), 0) scale(1.12);
    will-change: transform;
}

.brand-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(10, 10, 10, 0.18) 0%, rgba(10, 10, 10, 0.08) 35%, rgba(10, 10, 10, 0.72) 100%);
    pointer-events: none;
}

.brand-hero-copy {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding: 0 clamp(1.5rem, 6vw, 6rem) clamp(2.5rem, 6vw, 4.5rem);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.brand-hero-copy .cs-services-label {
    color: rgba(255, 255, 255, 0.78);
}

.brand-hero-copy .cs-display-title {
    color: var(--white);
    margin: 0;
    font-size: clamp(3rem, 2rem + 6vw, 5rem);
}

.brand-lede {
    max-width: 34rem;
    margin: 0.25rem 0 0;
    font-family: var(--font-display);
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.125rem);
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
}

.brand-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 2rem;
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding: 1.75rem clamp(1.5rem, 6vw, 6rem);
    border-bottom: 1px solid var(--gray-100);
}

.brand-strip p {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-detail);
    line-height: 1.5;
    color: var(--gray-500);
}

.brand-strip strong {
    display: block;
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--black);
    margin-bottom: 0.25rem;
}

.brand-gallery {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    width: 100%;
    max-width: var(--container-wide);
    margin: clamp(2.5rem, 6vw, 5rem) auto;
    padding-inline: clamp(1.5rem, 6vw, 6rem);
}

.brand-shot {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 0.25rem;
    opacity: 0;
    transform: translate3d(0, 2.5rem, 0);
    transition:
        opacity 0.9s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        transform 0.9s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.brand-shot.is-inview {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.brand-shot img {
    display: block;
    width: 100%;
    height: auto;
    transform: translate3d(0, var(--brand-parallax-y, 0), 0) scale(1.04);
    will-change: transform;
}

.brand-shot--full {
    width: 100%;
}

.brand-pair {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: start;
}

.brand-pair .brand-shot:nth-child(2) {
    margin-top: clamp(2rem, 6vw, 5rem);
}

.brand-shot--tall img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.brand-note {
    width: 100%;
    max-width: 38.75rem; /* 620 */
    margin: 0 auto clamp(3rem, 7vw, 5.5rem);
    padding-inline: clamp(1.5rem, 6vw, 6rem);
    text-align: center;
}

.brand-note p {
    margin: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    line-height: 1.5;
    color: var(--black);
}

.case-study--brand .cs-pager {
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding: 2rem clamp(1.5rem, 6vw, 6rem) 4rem;
}

/* Projects index — thumbnail cards */
.project-index-link--thumb {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 1rem 1.25rem;
    align-items: center;
    padding-top: 0.75rem;
}

.project-index-thumb {
    display: block;
    width: 7.5rem;
    aspect-ratio: 16 / 10;
    border-radius: 0.25rem;
    overflow: hidden;
    background: var(--gray-100);
}

.project-index-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.project-index-link--thumb:hover .project-index-thumb img {
    transform: scale(1.06);
}

.project-index-link--thumb .project-index-num {
    grid-column: 2;
    margin-bottom: 0.2rem;
}

.project-index-link--thumb .project-index-body {
    grid-column: 2;
}

.project-index-link--thumb .project-index-thumb {
    grid-row: 1 / span 2;
    grid-column: 1;
}

@media (max-width: 800px) {
    .brand-hero {
        min-height: 78vh;
    }

    .brand-pair {
        grid-template-columns: 1fr;
    }

    .brand-pair .brand-shot:nth-child(2) {
        margin-top: 0;
    }

    .project-index-link--thumb {
        grid-template-columns: 5.5rem 1fr;
        gap: 0.75rem 1rem;
    }

    .project-index-thumb {
        width: 5.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand-hero-media img,
    .brand-shot img {
        transform: none;
        will-change: auto;
    }

    .brand-shot {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---- Site access gate (server-side password module) ---- */
.site-gate-body {
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(35, 29, 93, 0.12), transparent),
        var(--white);
    font-family: var(--font-sans);
    color: var(--black);
}

.site-gate {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
}

.site-gate-card {
    width: 100%;
    max-width: 26rem;
    padding: 2.5rem 2rem;
    background: var(--white);
    border: 1px solid var(--gray-300);
    box-shadow: 0 12px 40px rgba(10, 10, 10, 0.06);
}

.site-gate-brand {
    margin: 0 0 1.5rem;
    font-size: var(--text-card-title);
    font-weight: 600;
    letter-spacing: -0.4px;
    color: var(--black);
}

.site-gate-title {
    margin: 0 0 0.75rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.4px;
    color: var(--navy);
}

.site-gate-copy {
    margin: 0 0 1.75rem;
    font-size: var(--text-body);
    line-height: var(--lh-body);
    color: var(--gray-700);
}

.site-gate-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.site-gate-label {
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: var(--gray-500);
}

.site-gate-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.85rem 1rem;
    border: 1px solid var(--gray-300);
    border-radius: 0;
    background: var(--white);
    font-family: inherit;
    font-size: var(--text-body);
    color: var(--black);
}

.site-gate-input:focus {
    outline: 2px solid var(--navy);
    outline-offset: 2px;
}

.site-gate-submit {
    margin-top: 0.5rem;
    padding: 0.9rem 1.25rem;
    border: none;
    background: var(--navy);
    color: var(--white);
    font-family: inherit;
    font-size: var(--text-body);
    font-weight: 600;
    cursor: pointer;
}

.site-gate-submit:hover:not(:disabled) {
    opacity: 0.88;
}

.site-gate-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.site-gate-error {
    margin: 0.25rem 0 0;
    font-size: var(--text-services);
    line-height: 1.5;
    color: #9b1c1c;
}