/* =========================================================
   Tokens
   ========================================================= */
:root {
    --bg: #ebebeb;
    --surface: #ffffff;
    --ink: #101010;
    --dark: #1a1a1a;
    --muted: #8c8c8c;
    --line: #e3e3e3;
    --accent: #7c5cff;

    /* Reference measurements, 1:1 with the design (≈2000px wide) */
    --gutter: 20px;
    --header-h: 94px;
    --hero-gap: 112px;
    --wordmark-lead: 10px;
    --pill-h: var(--nav-h);
    --pill-pad: var(--nav-gap);

    /* Centre navigation: 468 x 42 shell, 3px gaps everywhere, 90 x 36 items */
    --nav-w: 468px;
    --nav-h: 42px;
    --nav-gap: 3px;
    --nav-item-w: 80px;
    --nav-shell: #111111;
    --nav-item-bg: #212121;
    --nav-muted: #9a9a9a;
    --pill-r: 8px;
    --pill-r-inner: 5px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    --font: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --fs-meta: 13px;
    --fs-nav: 12px;
    --fs-lead: 27px;
    --ls-meta: -0.2px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.2px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

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

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 10px 16px;
    background: var(--dark);
    color: #fff;
    font-size: var(--fs-meta);
    letter-spacing: -0.2px;
    text-transform: uppercase;
    z-index: 20;
}
.skip-link:focus { left: 8px; top: 8px; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    height: var(--header-h);
    /* Bottom padding lifts the whole row 5px above the centre line */
    padding: 0 var(--gutter) 10px 45px;
    background: var(--bg);
    transition: transform 240ms ease;
}

.site-header.is-scroll-hidden { transform: translateY(-100%); }
.site-header:focus-within { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .site-header { transition: none; }
}

.logo { color: var(--ink); }
.logo__mark { width: 38px; height: 33px; }

.primary-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Outer capsule 468 x 42: 5 items of 90 + 3px gaps + 3px inner padding */
.primary-nav__list {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: stretch;
    gap: var(--nav-gap);
    width: var(--nav-w);
    height: var(--nav-h);
    padding: var(--nav-gap);
    background: var(--nav-shell);
    border-radius: var(--pill-r);
}

/* List items stretch so links (and the pill) fill the capsule height */
.primary-nav__list > li { display: flex; flex: 1; }

/* White pill that slides between the active and the hovered item */
.slider-pill {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: var(--surface);
    border-radius: var(--pill-r-inner);
    pointer-events: none;
    transition: left 1.4s var(--ease), top 1.4s var(--ease),
                width 1.4s var(--ease), height 1.4s var(--ease);
}
.slider-pill:not(.is-ready) { transition: none; }

/* Each item is a capsule of its own; the sliding pill covers it on hover */
.primary-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: var(--pill-r-inner);
    color: var(--nav-muted);
    font-size: var(--fs-nav);
    font-weight: 400;
    white-space: nowrap;
    transition: color 1.1s var(--ease);
}
.primary-nav__link::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--nav-item-bg);
    border-radius: inherit;
}
.primary-nav__link.is-on { color: var(--ink); }

/* Fallback when the slider has not initialised (no JS) */
.primary-nav__list:not(.is-slider-ready) .primary-nav__link.is-active { color: var(--ink); }
.primary-nav__list:not(.is-slider-ready) .primary-nav__link.is-active::before {
    background: var(--surface);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

/* Language */
.lang {
    position: relative;
    isolation: isolate;
    align-self: center;
    color: var(--nav-muted);
}

/* The shell itself grows downwards, so the capsule stretches open
   instead of a separate panel appearing underneath it. */
.lang::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    height: var(--pill-h);
    background: var(--nav-shell);
    border-radius: var(--pill-r);
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.lang.is-open::before { height: var(--lang-shell-h, var(--pill-h)); }

.lang__button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    height: var(--pill-h);
    padding: 0 14px;
    color: inherit;
    transition: color 0.9s var(--ease);
}

/* White highlight: same inset and radius as the option pills below */
.lang__button::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: var(--nav-gap);
    background: transparent;
    border-radius: var(--pill-r-inner);
    transition: background-color 0.9s var(--ease), border-radius 0.3s var(--ease);
}
.lang:hover .lang__button::before,
.lang.is-open .lang__button::before { background: var(--surface); }
.lang:hover .lang__button,
.lang.is-open .lang__button { color: var(--ink); }
/* Hovering a language in the panel hands the white pill over to it */
.lang:has(.lang__panel:hover) .lang__button::before { background: transparent; }
.lang:has(.lang__panel:hover) .lang__button { color: var(--nav-muted); }
.lang__globe { color: var(--accent); width: 15px; height: 15px; }
.lang__caret { width: 10px; height: 7px; transition: transform 0.25s var(--ease); }
.lang.is-open .lang__caret { transform: rotate(180deg); }

/* Panel drops straight out of the capsule, flush and attached */
.lang__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.35s;
    z-index: 10;
}
.lang.is-open .lang__panel {
    max-height: 200px;
    visibility: visible;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0s;
}

.lang__menu {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: var(--nav-gap);
    padding: 0 var(--nav-gap) var(--nav-gap);
}
.lang__menu > li { display: flex; }

.lang__option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(var(--nav-h) - var(--nav-gap) * 2);
    border-radius: var(--pill-r-inner);
    color: var(--nav-muted);
    font-size: var(--fs-nav);
    letter-spacing: -0.2px;
    transition: color 1.1s var(--ease);
}
.lang__option::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--nav-item-bg);
    border-radius: inherit;
}
.lang__option[aria-current] { color: #fff; }
.lang__option.is-on { color: var(--ink); }

.lang__menu:not(.is-slider-ready) .lang__option.is-active { color: var(--ink); }
.lang__menu:not(.is-slider-ready) .lang__option.is-active::before {
    background: var(--surface);
}

/* CTA */
.cta {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    height: var(--pill-h);
    padding: 0 18px;
    background: var(--accent);
    border-radius: var(--pill-r);
    color: var(--ink);
    font-size: var(--fs-nav);
    font-weight: 400;
    letter-spacing: -0.2px;
    text-transform: uppercase;
    white-space: nowrap;
}

.cta__dot {
    position: absolute;
    top: 50%;
    left: 18px;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--ink);
    transition: transform 1.1s var(--ease);
}
.cta:hover .cta__dot,
.cta:focus-visible .cta__dot { transform: scale(80); }

.cta__label {
    position: relative;
    z-index: 1;
    /* Reserves the dot gap; on hover it closes so the capsule gets compact
       and the language capsule slides right into the freed space. */
    margin-left: 14px;
    transition: color 0.9s var(--ease), margin-left 1.1s var(--ease);
}
.cta:hover .cta__label,
.cta:focus-visible .cta__label {
    margin-left: 0;
    color: #fff;
}

/* Mobile menu button */
.nav-toggle {
    display: none;
    width: var(--pill-h);
    height: var(--pill-h);
    background: var(--dark);
    border-radius: var(--pill-r);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.nav-toggle__bar {
    display: block;
    width: 18px;
    height: 1.5px;
    background: #fff;
}

/* =========================================================
   Main surface
   ========================================================= */
main {
    padding: var(--hero-gap) var(--gutter) var(--gutter);
}

.hero,
.wordmark,
.footer-links,
.page {
    background: var(--surface);
}

/* Row above the wordmark: copyright left, links spread across */
.footer-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: 20px;
    /* Right padding matches the bento column, so the last link ends
       level with the project year above it */
    padding: 36px 20px 16px 40px;
    border-top: 1px solid var(--line);
    font-size: 10px;
    font-weight: 400;
}

.footer-links__link {
    justify-self: start;
    transition: opacity 0.5s var(--ease);
}
.footer-links__link:last-child { justify-self: end; }
.footer-links__link:hover { opacity: 0.55; }

/* Home page fills exactly one viewport, so nothing scrolls */
@media (min-width: 1025px) and (min-height: 640px) {
    body.is-home {
        height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    body.is-home main {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    body.is-home .hero {
        flex: 1;
        min-height: 0;
    }
    body.is-home .site-footer { flex: none; }

    /* The bento fills the hero instead of forcing it taller */
    body.is-home .work-cards { min-height: 0; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 620px;
}

.hero__col--text {
    display: flex;
    flex-direction: column;
    padding: 43px 50px 43px 40px;
}

.hero__lead,
.hero__body {
    font-size: var(--fs-lead);
    font-weight: 300;
    line-height: 1.28;
    letter-spacing: -0.2px;
    max-width: 20ch;
}
.hero__body {
    margin-top: 32px;
    max-width: none;
}
.hero__body span { display: block; }

.hero__col--work {
    display: flex;
    min-height: 0;
    overflow: hidden;
    padding: 24px 20px;
    border-left: 1px solid var(--line);
}

/* Bento: one tall card on the left, two stacked on the right */
.work-cards {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
    width: 100%;
    /* Keeps the bento visible when the hero is not height-locked */
    min-height: 340px;
}

.work-card {
    display: flex;
    min-height: 0;
    /* Each project sits in its own framed box */
    border: 1px solid var(--line);
    border-radius: var(--pill-r);
    overflow: hidden;
}
.work-card:first-child { grid-row: span 2; }

.work-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
}

.work-card__media {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.work-card__media img,
.work-card__media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s var(--ease);
}
.work-card__link:hover .work-card__media img { opacity: 0.8; }

/* Name and year share the first row; the tags run underneath, so a long
   list never pushes the year out of line */
.work-card__meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 12px;
    row-gap: 8px;
    padding: 14px;
    border-top: 1px solid var(--line);
}

.work-card__title {
    grid-column: 1;
    grid-row: 1;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.work-card__category,
.work-card__year {
    color: var(--muted);
    font-size: 11px;
    letter-spacing: -0.2px;
}
.work-card__category {
    grid-column: 1 / -1;
    grid-row: 2;
    line-height: 1.6;
    text-transform: lowercase;
}
.work-card__year {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
}

/* =========================================================
   Wordmark
   ========================================================= */
.wordmark {
    /* The type is cropped at its own half height and sits flush
       on the bottom edge; JS sets the exact height and offset. */
    line-height: 0;
    /* Lead keeps the hero at its original height; the cropped type
       still sits flush on the bottom edge. */
    padding: var(--wordmark-lead) var(--gutter) 0;
    overflow: hidden;
}

.wordmark__text {
    /* inline-block so its measured width is the text width, not the column */
    display: inline-block;
    vertical-align: top;
    /* Negative tracking also trails the last glyph; pull it back flush */
    margin-right: -0.03em;
    font-size: 11.6vw;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

/* =========================================================
   Inner pages
   ========================================================= */
.page {
    min-height: 620px;
    padding: 56px 40px 70px;
}

.page__title {
    font-size: var(--fs-lead);
    font-weight: 400;
    letter-spacing: -0.2px;
}

.page__body {
    max-width: 46ch;
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
    font-size: 17px;
    line-height: 1.6;
}
.page__lead {
    margin-bottom: 16px;
    font-size: 24px;
    letter-spacing: -0.2px;
}

/* =========================================================
   Works page
   ========================================================= */
.works-explore {
    display: grid;
    grid-template-columns: 1fr 3fr;
    align-items: start;
    gap: 32px;
    padding: 24px 40px 80px;
    min-height: 300px;
}
.works-filter {
    display: flex;
    align-items: baseline;
    gap: 14px;
    text-align: left;
    font-size: clamp(16px, 1.4vw, 24px);
    line-height: 1.4;
}
.works-filter__current { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.works-explore__heading h1 {
    font-size: clamp(32px, 2.5vw, 48px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -1.5px;
}
.works-explore__heading h1 span { display: block; }
.works-explore__arrow { display: inline-block; width: 56px; height: 56px; margin-top: 16px; }
.works-explore__arrow svg { width: 100%; height: 100%; }
.works-filter__arrow { width: 22px; height: 22px; flex: none; align-self: center; }
.works-filter-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--bg);
    color: var(--ink);
}
.works-filter-dialog::backdrop { background: var(--bg); }
.works-filter-dialog__close { position: absolute; top: 24px; right: 40px; font-size: 40px; line-height: 1; padding: 8px; }
.works-filter-dialog__layout {
    display: flex;
    align-items: baseline;
    gap: 24px;
    padding: clamp(100px, 25vh, 290px) 60px 60px;
    font-size: clamp(20px, 1.6vw, 28px);
    line-height: 1.4;
}
.works-filter-dialog__list button { text-align: left; line-height: 1.4; }
.works-filter-dialog__list button:hover,
.works-filter-dialog__list button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 5px; }
.work-tile[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 860px) {
    .works-explore { grid-template-columns: 1fr 2fr; padding: 12px var(--gutter) 40px; gap: 24px; min-height: 250px; }
    .works-filter { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 620px) {
    .works-explore { grid-template-columns: 1fr; gap: 36px; }
    .works-explore__heading h1 { font-size: 36px; }
    .works-filter-dialog__layout { padding: 110px var(--gutter) 40px; gap: 18px; font-size: 20px; }
    .works-filter-dialog__close { right: var(--gutter); }
}
.works-intro {
    /* main already carries the hero gap, so the headline starts
       level with the home page hero */
    padding: 0 var(--gutter);
    text-align: center;
}

.works-headline {
    font-size: 72px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.5px;
    word-spacing: -0.9px;
}
.works-headline span { display: block; }

.works-intro__text {
    margin-top: 26px;
    margin-bottom: 0;
    font-size: 16px;
    line-height: 1.5;
}
.works-intro__text span { display: block; }

.works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 60px var(--gutter) var(--gutter);
}

.work-tile {
    /* Portrait card; the artwork floats inside it with white around */
    aspect-ratio: 3 / 4;
    background: var(--surface);
    border-radius: var(--pill-r);
    overflow: hidden;
}

.work-tile__link {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.work-tile__head {
    padding: 32px 24px 26px;
    text-align: center;
}

.work-tile__title {
    color: var(--ink);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.work-tile__tagline,
.work-tile__sector {
    color: #4f4f4f;
    font-size: 13px;
    letter-spacing: -0.2px;
    text-transform: uppercase;
}

/* The discipline label sits a step below the tagline */
.work-tile__sector { font-size: 11px; }
.work-tile__tagline { margin-top: 9px; }

/* Hover darkens every line under the title */
.work-tile__tagline,
.work-tile__sector { transition: color 0.4s var(--ease); }
.work-tile__link:hover .work-tile__tagline,
.work-tile__link:hover .work-tile__sector { color: var(--ink); }

/* Hover state: the call to action unfolds */
.work-tile__cta {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.45s var(--ease), opacity 0.35s var(--ease),
                margin-top 0.45s var(--ease);
}

/* The capsule stays put and is revealed top to bottom */
.work-tile__cta {
    opacity: 1;
    clip-path: inset(0 0 100% 0);
    transition: max-height 1.3s var(--ease), margin-top 1.3s var(--ease),
                clip-path 1.3s var(--ease);
}

/* Its label and dot fade in a beat later */
.work-tile__cta-label,
.work-tile__cta-dot {
    opacity: 0;
    transition: opacity 0.6s var(--ease) 0.22s;
}
.work-tile__link:hover .work-tile__cta-label,
.work-tile__link:hover .work-tile__cta-dot { opacity: 1; }
.work-tile__link:hover .work-tile__cta {
    max-height: 60px;
    margin-top: 18px;
    clip-path: inset(0 0 0 0);
}

.work-tile__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    background: var(--dark);
    border-radius: var(--pill-r);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -0.2px;
}
.work-tile__link:hover .work-tile__cta { padding: 9px 16px; }

.work-tile__cta-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.work-tile__dot {
    display: block;
    width: 3px;
    height: 3px;
    margin: 9px auto;
    border-radius: 50%;
    background: #9b9b9b;
}

/* Half the card tall, with the same gap left, right and below; both the
   artwork and the hover mockup share this one box */
.work-tile__media {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: var(--pill-r);
    /* Rises into place from below */
    transform: translateY(26px);
    transition: transform 0.55s var(--ease);
}
.work-tile__link:hover .work-tile__media { transform: translateY(0); }
.work-tile__art,
video.work-tile__art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Cut-out artwork floats on the card, like the reference */
    object-fit: contain;
    transition: opacity 0.4s var(--ease);
}
/* It clears out as the mockup takes over */
.work-tile__link:hover .work-tile__art { opacity: 0; }

/* Hover: the mockup rises into the very box the artwork sits in */
.work-tile__hover,
video.work-tile__hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: var(--pill-r-inner);
    transform: translateY(calc(100% + 28px));
    transition: transform 0.7s var(--ease);
}
.work-tile__link:hover .work-tile__hover { transform: translateY(0); }

/* Works (legacy grid) */
.project-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 40px;
    padding-top: 34px;
    border-top: 1px solid var(--line);
}

.project__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.project__meta {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding-top: 14px;
}
.project__title {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.2px;
}
.project__category,
.project__year {
    color: var(--muted);
    font-size: var(--fs-meta);
    letter-spacing: -0.2px;
    text-transform: uppercase;
}
.project__year { margin-left: auto; }

/* Services */
.service-list {
    margin-top: 40px;
    border-top: 1px solid var(--line);
}
.service {
    display: flex;
    align-items: baseline;
    gap: 24px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}
.service__index {
    color: var(--muted);
    font-size: var(--fs-meta);
    letter-spacing: -0.2px;
}
.service__name {
    font-size: 32px;
    font-weight: 400;
    letter-spacing: -0.2px;
}

/* Contact */
.contact-list {
    margin-top: 40px;
    border-top: 1px solid var(--line);
}
.contact-list__row {
    display: flex;
    gap: 24px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}
.contact-list__row dt {
    width: 140px;
    flex: none;
    color: var(--muted);
    font-size: var(--fs-meta);
    letter-spacing: -0.2px;
}
.contact-list__row dd {
    font-size: 17px;
    letter-spacing: -0.2px;
}

/* =========================================================
   Responsive
   ========================================================= */
/* Narrower desktops: same proportions, scaled down */
@media (max-width: 1500px) {
    :root {
        --header-h: 84px;
        --hero-gap: 92px;
        --fs-meta: 12px;
    }

    .site-header { padding-left: 32px; }
    .logo__mark { width: 33px; height: 29px; }

    .hero { min-height: 540px; }
    .hero__col--text { padding: 37px 40px 37px 34px; }
    .hero__col--work { padding: 22px 20px; }
    .work-cards { gap: 16px; }

    .page { min-height: 540px; padding: 48px 34px 60px; }
    .works-headline { font-size: 60px; }
}

@media (max-width: 1024px) {
    :root { --hero-gap: 56px; }

    .site-header { padding-left: 24px; }

    .hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .hero__col--text { padding: 40px 24px 36px; }

    .hero__col--work {
        padding: 32px 24px 36px;
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .page { padding: 40px 24px 48px; }

    .works-headline { font-size: 46px; }
    .works-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .nav-toggle { display: flex; order: 3; margin-left: 10px; }

    .primary-nav {
        position: absolute;
        top: calc(100% - 12px);
        right: var(--gutter);
        left: auto;
        transform: none;
        display: none;
        z-index: 10;
    }
    .primary-nav.is-open { display: block; }

    .primary-nav__list {
        width: auto;
        height: auto;
        flex-direction: column;
        align-items: stretch;
        gap: var(--nav-gap);
        border-radius: var(--pill-r);
    }
    .primary-nav__link {
        width: auto;
        min-width: var(--nav-item-w);
        height: auto;
        padding: 12px 22px;
        justify-content: flex-start;
    }

    .header-actions { order: 2; }

    .project-grid { grid-template-columns: 1fr; }
    .works-headline { font-size: 38px; }
}

@media (max-width: 620px) {
    :root { --hero-gap: 40px; }

    .site-header { padding: 0 12px; }
    .cta { padding: 0 14px; font-size: 10.5px; }
    .lang__button { padding: 0 11px; }

    .hero__col--text { padding: 32px 18px 30px; }
    .hero__col--work { padding: 26px 18px 30px; }
    .work-cards {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 24px;
        min-height: 0;
    }
    .work-card:first-child { grid-row: auto; }
    .work-card__media img {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .hero__lead, .hero__body { max-width: none; }

    .wordmark { --wordmark-lead: 40px; padding: var(--wordmark-lead) 12px 0; }
    .page { padding: 32px 18px 40px; }
    .service__name { font-size: 20px; }
    .contact-list__row { flex-direction: column; gap: 6px; }
    .contact-list__row dt { width: auto; }

    .works-headline { font-size: 30px; }
    .works-grid { grid-template-columns: 1fr; padding-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* Inner pages: the footer runs flush to the page edges and
   sits on the bottom even when the page is short */
body:not(.is-home) {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body:not(.is-home) main {
    flex: 1;
    display: flex;
    flex-direction: column;
}
body:not(.is-home) .site-footer--full {
    margin: auto calc(var(--gutter) * -1) calc(var(--gutter) * -1);
}

/* =========================================================
   Works page FAQ
   ========================================================= */
.faq {
    display: grid;
    grid-template-columns: 1fr 1.55fr;
    gap: 40px;
    padding: 90px var(--gutter) 50px 40px;
}

.faq__title {
    font-size: 40px;
    font-weight: 400;
    letter-spacing: -0.2px;
}

.faq__intro p {
    max-width: 34ch;
    margin-top: 22px;
    font-size: 15px;
    line-height: 1.5;
}

.faq__item {
    border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}

.faq__question {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    padding: 26px 0;
    color: var(--muted);
    font-size: 22px;
    line-height: 1.28;
    letter-spacing: -0.2px;
    cursor: pointer;
    list-style: none;
    transition: color 0.4s var(--ease);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question:hover { color: var(--ink); }

.faq__item[open] .faq__question {
    color: var(--ink);
    font-weight: 700;
}

/* Plus that becomes a minus when the item opens */
.faq__icon {
    position: relative;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface);
    color: var(--accent);
}
.faq__icon::before,
.faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
}
.faq__icon::before { width: 12px; height: 1.6px; }
.faq__icon::after {
    width: 1.6px;
    height: 12px;
    transition: transform 0.35s var(--ease);
}
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); }

.faq__answer {
    padding-bottom: 30px;
}
.faq__answer p {
    max-width: 78ch;
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.55;
}
.faq__answer p:first-child { margin-top: 0; }


@media (max-width: 1024px) {
    .faq {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 60px 24px 20px;
    }
    .faq__title { font-size: 32px; }
    .faq__question { font-size: 19px; }
}

@media (max-width: 620px) {
    .faq { padding: 44px 18px 20px; }
    .faq__question { font-size: 17px; gap: 18px; }
}


/* =========================================================
   Full-screen footer (inner pages) — built from the reference
   ========================================================= */
.site-footer--full {
    --f-bg: var(--bg);
    --f-ink: #12121a;
    --f-muted: #5f5f6b;
    --f-line: rgba(17, 17, 17, 0.2);
    --f-accent: var(--accent);

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--f-bg);
    color: var(--f-ink);
}

/* Body with the left rail */
.footer-body {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    /* opens on the same left edge as the page titles above */
    padding: 130px 40px 40px 40px;
}


/* Dotted field with the headline and the pill */
.footer-field {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 74px 0;
}

/* The dot grid is drawn on canvas so it can react to the pointer */
.footer-field__dots {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.footer-field__cursor {
    position: absolute;
    top: 0;
    left: 0;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--f-accent);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s var(--ease);
}
.footer-field.is-live .footer-field__cursor { opacity: 1; }

.footer-field__headline {
    position: relative;
    font-size: 96px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.03em;
    /* Drifts a little towards the pointer */
    transition: transform 0.6s var(--ease);
    will-change: transform;
}

.footer-field__cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    flex: none;
    padding: 33px 52px;
    background: var(--f-ink);
    border-radius: 999px;
    color: #fff;
    font-size: 34px;
    transition: background-color 0.45s var(--ease);
}
.footer-field__cta:hover { background: var(--f-accent); }

/* Avatars and the message line */
.footer-message {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    margin-top: 44px;
    font-size: 17px;
    line-height: 1.5;
}
.footer-message a {
    color: var(--f-accent);
    transition: opacity 0.4s var(--ease);
}
.footer-message a:hover { opacity: 0.7; }

.footer-message__avatars { display: flex; }
.footer-message__avatars span {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-left: -14px;
    border: 3px solid var(--f-bg);
    border-radius: 50%;
    background: #d7d2e6;
    color: var(--ink);
    transition: transform 0.5s var(--ease), background 0.5s var(--ease);
}
.footer-message__mark svg {
    width: 21px;
    height: 21px;
}

/* Each mark tilts up a little as the row is passed over */
.footer-message:hover .footer-message__mark { transform: translateY(-3px); }
.footer-message:hover .footer-message__mark:nth-child(2) { transition-delay: 0.06s; }
.footer-message:hover .footer-message__mark:nth-child(3) { transition-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
    .footer-message__mark { transition: none; }
}
.footer-message__avatars span:first-child { margin-left: 0; }

/* Six-cell social grid */
.footer-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin-top: 46px;
    border: 1px solid var(--f-line);
    border-radius: 8px;
    overflow: hidden;
}

.footer-cell {
    cursor: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 300px;
    padding: 44px;
    border-left: 1px solid var(--f-line);
    font-size: 15px;
}
.footer-cell:first-child { border-left: 0; }

/* The icon gives way to a short title on hover */
.footer-cell__top {
    position: relative;
    min-height: 40px;
}
.footer-cell__icon {
    display: flex;
    transition: opacity 0.7s var(--ease);
}
.footer-cell__title {
    position: absolute;
    top: -4px;
    left: 0;
    font-size: 26px;
    letter-spacing: -0.2px;
    white-space: nowrap;
}

/* Letters drop in one after another */
.footer-cell__title span {
    display: inline-block;
    opacity: 0;
    transform: translateY(-0.55em);
    transition: opacity 0.45s var(--ease) calc(var(--i) * 32ms),
                transform 0.6s var(--ease) calc(var(--i) * 32ms);
}
.footer-cell:hover .footer-cell__icon { opacity: 0; }
.footer-cell:hover .footer-cell__title span {
    opacity: 1;
    transform: translateY(0);
}

/* Purple blob that carries the cell icon under the pointer */
.footer-grid__cursor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.6);
    transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
}
.footer-grid__cursor svg { width: 34px; height: auto; }
.footer-grid.is-live .footer-grid__cursor {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* The bottom row reuses the home page link row */
/* The links and the icons close the page on the right */
.site-footer--full .footer-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 34px;
    margin-top: auto;
    padding: 56px 0 0;
    background: transparent;
    border-top: 0;
}
.site-footer--full .footer-links__link { justify-self: auto; }

@media (max-width: 1240px) {
    .footer-body { padding: 90px 32px 32px 80px; }
    .footer-field__headline { font-size: 68px; }
    .footer-field__cta { font-size: 26px; padding: 26px 40px; }
    .footer-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-cell { min-height: 220px; padding: 32px; }
    .footer-cell:nth-child(4) { border-left: 0; }
    .footer-cell:nth-child(n + 4) { border-top: 1px solid var(--f-line); }
}

@media (max-width: 860px) {
    .footer-body { padding: 56px 20px 28px 48px; }
    .footer-field {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        padding: 40px 0;
    }
    .footer-field__headline { font-size: 44px; }
    .footer-field__cta { font-size: 20px; padding: 20px 30px; }
    .footer-message { justify-content: flex-start; flex-wrap: wrap; font-size: 15px; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-cell { min-height: 170px; padding: 24px; }
    .footer-cell:nth-child(odd) { border-left: 0; }
    .footer-cell:nth-child(n + 3) { border-top: 1px solid var(--f-line); }
}

/* =========================================================
   Services page
   ========================================================= */
.services-intro {
    /* Same opening as the works page: the headline sits on the page
       background, and the white surface starts with the panels below */
    padding: 0 var(--gutter) 60px;
    text-align: center;
}

.services-headline span { display: block; }
.services-headline {
    font-size: 72px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.2px;
}

.services-intro__text {
    margin-top: 26px;
    font-size: 16px;
    line-height: 1.5;
}
.services-intro__text span { display: block; }

.services-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    background: var(--surface);
    border-top: 1px solid var(--line);
}

.services-nav {
    position: sticky;
    top: 30px;
    align-self: start;
    padding: 90px 30px 90px 40px;
    font-size: 13px;
    text-transform: uppercase;
}
.services-nav__label { color: var(--ink); }
.services-nav ul { margin-top: 26px; }

.services-nav__link {
    display: block;
    padding: 2px 0;
    color: var(--muted);
    font-weight: 400;
    transition: color 0.4s var(--ease), font-weight 0.4s var(--ease);
}
.services-nav__link:hover { color: var(--ink); }

/* The section the reader is in reads bold and takes the accent colour */
.services-nav__link.is-active {
    color: var(--accent);
    font-weight: 700;
}
.services-nav__link.is-active::before {
    content: "\2022";
    margin-right: 6px;
}

.services-panels { border-left: 1px solid var(--line); }

.services-panel {
    padding: 90px 40px 110px 80px;
}
.services-panel + .services-panel { border-top: 1px solid var(--line); }

.services-panel__head {
    display: flex;
    align-items: baseline;
    gap: 100px;
}

.services-panel__number {
    color: var(--accent);
    font-size: 15px;
}

.services-panel__title {
    font-size: 40px;
    font-weight: 400;
    letter-spacing: -0.2px;
}

.services-panel__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-top: 90px;
}

.services-scope {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 30px;
    align-content: start;
}
.services-scope__label {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
}
.services-scope li {
    font-size: 16px;
    line-height: 1.6;
}
.services-scope li::before {
    content: "\2013";
    margin-right: 10px;
}

.services-copy__question {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.45;
}

.services-copy__rule {
    display: block;
    width: 46px;
    height: 2px;
    margin: 34px 0 46px;
    background: var(--accent);
}

.services-copy p + p { margin-top: 22px; }
.services-copy p:not(.services-copy__question) {
    font-size: 16px;
    line-height: 1.6;
}

@media (max-width: 1240px) {
    .services-headline { font-size: 54px; }
    .services-panel { padding: 70px 30px 80px 50px; }
    .services-panel__head { gap: 60px; }
    .services-panel__body { gap: 40px; margin-top: 60px; }
    .services-scope { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 1024px) {
    .services-headline { font-size: 40px; }
    .services-layout { grid-template-columns: 1fr; }
    .services-nav { padding: 40px 24px 0; }
    .services-panel {
        padding: 50px 24px 70px;
        border-left: 0;
        border-top: 1px solid var(--line);
        margin-top: 40px;
    }
    .services-panel__body { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .services-intro { padding-bottom: 44px; }
    .services-headline { font-size: 30px; }
    .services-panel__head { flex-direction: column; gap: 12px; }
    .services-panel__title { font-size: 30px; }
}

/* Brand strategy diagram tiles */
.service-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
        "pyramid archetypes axis"
        "circle  sliders    pair";
    gap: 16px;
    margin-top: 90px;
}
.service-tile--pyramid { grid-area: pyramid; }
.service-tile--archetypes { grid-area: archetypes; }
.service-tile--axis { grid-area: axis; }
.service-tile--circle { grid-area: circle; }
.service-tile--sliders { grid-area: sliders; }
.service-tile-pair {
    grid-area: pair;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 16px;
}
.service-tile-pair .service-tile { padding: 14px; }

.service-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: #ececec;
    border-radius: 12px;
}
.service-tile svg { width: 100%; height: auto; }

.service-tile--archetypes { background: #6f707a; }
.service-tile--circle,
.service-tile--sliders { background: #fafafa; }
.service-tile--tags { background: var(--accent); }
.service-tile--funnel { background: #f2f2f2; }

@media (max-width: 1240px) {
    .service-tiles {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "pyramid archetypes"
            "circle  sliders"
            "axis    pair";
        margin-top: 60px;
        /* stacked layouts keep the tall tile's own proportions */
    }
}

@media (max-width: 620px) {
    .service-tiles {
        grid-template-columns: 1fr;
        grid-template-areas:
            "pyramid"
            "archetypes"
            "axis"
            "circle"
            "sliders"
            "pair";
    }
    .service-tile-pair { grid-template-columns: 1fr; }
}

/* Before / after cards under the rebranding service */
.rebrand-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 80px;
}

.rebrand-card__stage {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
}

/* The two states stack; hover wipes one into the other */
.rebrand-card__face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: clip-path 0.9s var(--ease);
}
.rebrand-card__face svg { width: 42%; height: auto; }

.rebrand-card__face--before {
    background: #e3e3e3;
    clip-path: inset(0 0 0 0);
}
.rebrand-card__face--after {
    background: #fafafa;
    clip-path: inset(0 0 0 100%);
}

.rebrand-card a:hover .rebrand-card__face--before { clip-path: inset(0 100% 0 0); }
.rebrand-card a:hover .rebrand-card__face--after { clip-path: inset(0 0 0 0); }

/* Accent seam that travels with the wipe */
.rebrand-card__wipe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 2px;
    background: var(--accent);
    opacity: 0;
    transition: left 0.9s var(--ease), opacity 0.4s var(--ease);
}
.rebrand-card a:hover .rebrand-card__wipe {
    left: 0;
    opacity: 1;
}

@media (max-width: 900px) {
    .rebrand-grid { grid-template-columns: 1fr; margin-top: 60px; }
}

/* Numbered stages inside the service copy */
.services-copy__steps {
    margin-top: 26px;
    padding-left: 34px;
    list-style: decimal;
    color: var(--ink);
}
.services-copy__steps li { margin-bottom: 18px; }
.services-copy__steps li::marker { color: var(--muted); }

/* Screen carousel under the web / app design service */
.web-carousel { margin-top: 90px; }

.web-carousel__stage {
    position: relative;
    overflow: hidden;
    padding: 40px 0 74px;
    background: #f4f4f4;
    border-radius: 12px;
}

.web-carousel__track {
    display: flex;
    align-items: center;
    gap: 24px;
    transition: transform 1s var(--ease);
}

/* One screen per slide; the centred one is shown at full size */
.web-shot {
    position: relative;
    flex: 0 0 46%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #ececec;
    border-radius: 8px;
    opacity: 0.45;
    transform: scale(0.88);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.web-shot svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.web-shot.is-current {
    opacity: 1;
    transform: scale(1);
}

/* Counter sits on the floor of the stage */
.web-carousel__bar {
    position: absolute;
    left: 40px;
    right: 40px;
    bottom: 26px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.web-carousel__count {
    color: var(--muted);
    font-size: var(--fs-meta);
    letter-spacing: var(--ls-meta);
}

/* Larger pair centred below the stage */
.web-carousel__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}

.web-carousel__round {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    /* the trailing arrow keeps its ring but sits back in a muted tone */
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.web-carousel__round--lead {
    color: var(--ink);
    border-color: var(--ink);
}
.web-carousel__round:hover {
    color: var(--accent);
    border-color: var(--accent);
}

@media (max-width: 1240px) {
    .web-carousel { margin-top: 60px; }
    .web-shot { flex-basis: 60%; }
}

@media (max-width: 620px) {
    .web-carousel__stage { padding: 24px 0 66px; }
    .web-carousel__bar { left: 20px; right: 20px; }
    .web-shot { flex-basis: 76%; }
}

/* =========================================================
   Contact page
   ========================================================= */
.contact-intro {
    /* opens level with the works and services pages */
    padding: 0 var(--gutter) 90px;
    text-align: center;
}

.contact-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    background: var(--surface);
    border-radius: 999px;
    font-size: var(--fs-meta);
    font-weight: 700;
    letter-spacing: var(--ls-meta);
}
.contact-status__dot {
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 50%;
}

.contact-headline {
    margin-top: 30px;
    font-size: 72px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.5px;
    word-spacing: -0.9px;
}
.contact-headline span { display: block; }

.contact-intro__text {
    margin-top: 26px;
    font-size: 16px;
    line-height: 1.5;
}
.contact-intro__text span { display: block; }

/* Person on the left, form on the right, split by a hairline */
.contact-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--surface);
    border-top: 1px solid var(--line);
}

.contact-person {
    display: flex;
    flex-direction: column;
    padding: 70px 60px 90px 45px;
}

.contact-person__head {
    display: flex;
    align-items: center;
    gap: 22px;
}

.contact-person__avatar {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    overflow: hidden;
    border-radius: 50%;
}

.contact-person__id { display: block; }
.contact-person__name {
    display: block;
    font-size: 22px;
    font-weight: 700;
}
.contact-person__role {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 16px;
}

.contact-details {
    margin-top: auto;
    padding-top: 90px;
}
.contact-details__row {
    display: grid;
    grid-template-columns: 130px 1fr;
    align-items: baseline;
    padding: 14px 0;
}
.contact-details__row dt {
    color: var(--muted);
    font-size: var(--fs-meta);
    letter-spacing: var(--ls-meta);
    text-transform: uppercase;
}
.contact-details__row dd {
    margin: 0;
    font-size: 20px;
}
.contact-details__row a { transition: color 0.5s var(--ease); }
.contact-details__row a:hover { color: var(--accent); }

.contact-form-panel {
    padding: 70px 45px 90px 60px;
    border-left: 1px solid var(--line);
}

.contact-form__title {
    font-size: 26px;
    font-weight: 400;
    letter-spacing: -0.2px;
}

.contact-form { margin-top: 40px; }

.contact-field {
    display: block;
    margin: 0 0 34px;
}

.contact-field__label {
    display: block;
    margin-bottom: 12px;
    font-size: var(--fs-meta);
    font-weight: 700;
    letter-spacing: var(--ls-meta);
}

.contact-field__input {
    display: block;
    width: 100%;
    padding: 12px 0;
    font: inherit;
    letter-spacing: inherit;
    color: var(--ink);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    resize: vertical;
    transition: border-color 0.5s var(--ease);
}
.contact-field__input::placeholder { color: var(--muted); }
.contact-field__input:focus {
    outline: none;
    border-bottom-color: var(--accent);
}
.contact-field__input[aria-invalid="true"] { border-bottom-color: #c2453f; }

.contact-field__error {
    display: block;
    margin-top: 8px;
    color: #c2453f;
    font-size: var(--fs-meta);
}

/* Honeypot: off-screen but reachable for bots only */
.contact-field--trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px;
    height: 46px;
    color: var(--surface);
    background: var(--ink);
    border-radius: var(--pill-r);
    font-size: var(--fs-meta);
    letter-spacing: var(--ls-meta);
    text-transform: uppercase;
    transition: background-color 1.1s var(--ease);
}
.contact-submit__dot {
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    transition: transform 1.1s var(--ease);
}
.contact-submit:hover { background: var(--accent); }
.contact-submit:hover .contact-submit__dot { transform: scale(1.6); }

.contact-form__success {
    margin-top: 40px;
    font-size: var(--fs-lead);
    line-height: 1.35;
}

@media (max-width: 1024px) {
    .contact-headline { font-size: 48px; }
    .contact-body { grid-template-columns: 1fr; }
    .contact-person { padding: 50px 24px 40px; }
    .contact-details { padding-top: 50px; }
    .contact-form-panel {
        padding: 50px 24px 70px;
        border-left: 0;
        border-top: 1px solid var(--line);
    }
}

@media (max-width: 620px) {
    .contact-intro { padding-bottom: 60px; }
    .contact-headline { font-size: 34px; }
    .contact-details__row { grid-template-columns: 92px 1fr; }
    .contact-details__row dd { font-size: 17px; }
}

/* Consent line above the send button */
.contact-consent {
    margin: 0 0 26px;
    color: var(--muted);
    font-size: var(--fs-meta);
    line-height: 1.5;
}

.contact-consent__link {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.5s var(--ease);
}
.contact-consent__link:hover,
.contact-consent__link:focus-visible { color: var(--accent); }

/* Locked until the box is ticked */
.contact-submit[disabled] {
    background: var(--line);
    color: var(--muted);
    cursor: not-allowed;
}
.contact-submit[disabled] .contact-submit__dot { background: var(--muted); }
.contact-submit[disabled]:hover { background: var(--line); }
.contact-submit[disabled]:hover .contact-submit__dot { transform: none; }

/* Studio location, clock and dotted world map */
.contact-place {
    padding: 70px 45px 90px;
    background: var(--surface);
    border-top: 1px solid var(--line);
}

.contact-place__head {
    display: grid;
    grid-template-columns: 260px 1fr 1fr;
    gap: 40px;
}

.contact-place__photo {
    display: block;
    overflow: hidden;
    border-radius: 8px;
}

/* The column beside the photo stays inside the photo's height */
.contact-place__address {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 150px;
}

.contact-place__studio {
    font-size: 18px;
    font-weight: 700;
}

.contact-place__lines {
    font-size: 18px;
    line-height: 1.5;
}
.contact-place__lines span { display: block; }

.contact-place__map { font-size: 18px; }
.contact-place__map a {
    color: var(--muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.5s var(--ease);
}
.contact-place__map a:hover { color: var(--accent); }

.contact-place__clock {
    display: flex;
    gap: 14px;
    color: var(--muted);
    font-size: 18px;
}
.contact-place__clock time {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Same height as the photo column, so the headline ends level with
   the "See on Google Maps" line beside it */
.contact-place__now {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 150px;
}

.contact-place__title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.2px;
}
.contact-place__title span { display: block; }

.contact-map {
    margin: 60px auto 0;
    max-width: 1200px;
}
.contact-map svg { width: 100%; height: auto; }

@media (max-width: 1024px) {
    .contact-place { padding: 50px 24px 70px; }
    .contact-place__head {
        grid-template-columns: 200px 1fr;
        gap: 28px;
    }
    .contact-place__now {
        grid-column: 1 / -1;
        height: auto;
        gap: 26px;
    }
    .contact-place__title { font-size: 22px; }
    .contact-place__address { height: 115px; }
}

@media (max-width: 620px) {
    .contact-place__head { grid-template-columns: 1fr; }
    .contact-place__address { height: auto; gap: 18px; }
    .contact-place__lines,
    .contact-place__map,
    .contact-place__studio,
    .contact-place__clock { font-size: 16px; }
}

/* Marks placed over the dotted map from their coordinates */
.contact-map { position: relative; }
.contact-map__dots {
    width: 100%;
    height: auto;
}

.contact-map__mark {
    position: absolute;
    transform: translate(-50%, -50%);
}

.contact-map__pin {
    position: relative;
    display: block;
    width: 9px;
    height: 9px;
    background: var(--accent);
    border-radius: 50%;
}
.contact-map__pin--lead {
    width: 18px;
    height: 18px;
    border-radius: 5px;
}

/* The mark keeps pinging so it reads as something to click */
.contact-map__ping {
    position: absolute;
    inset: 0;
    background: var(--accent);
    border-radius: inherit;
    animation: map-ping 2.4s var(--ease) infinite;
}
@keyframes map-ping {
    0%   { transform: scale(1);   opacity: 0.45; }
    70%  { transform: scale(2.8); opacity: 0; }
    100% { transform: scale(2.8); opacity: 0; }
}

.contact-map__label {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink);
    font-size: 15px;
    letter-spacing: var(--ls-meta);
    white-space: nowrap;
}
.contact-map__mark--left .contact-map__label {
    left: auto;
    right: calc(100% + 10px);
}

/* Card that fades open under the mark */
.contact-map__card {
    position: absolute;
    top: calc(100% + 16px);
    left: -14px;
    z-index: 3;
    width: 250px;
    padding: 22px 24px 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--pill-r);
    box-shadow: 0 18px 40px rgba(16, 16, 16, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease),
                visibility 0s linear 0.7s;
}
.contact-map__mark--left .contact-map__card {
    left: auto;
    right: -14px;
}
.contact-map__mark.is-open .contact-map__card {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease),
                visibility 0s linear 0s;
}

.contact-map__card-title {
    font-size: var(--fs-meta);
    font-weight: 700;
    letter-spacing: var(--ls-meta);
}

.contact-map__card-address {
    margin-top: 14px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
}
.contact-map__card-address span { display: block; }

.contact-map__card-phone {
    margin-top: 14px;
    font-size: 15px;
}
.contact-map__card-phone a { transition: color 0.5s var(--ease); }
.contact-map__card-phone a:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
    .contact-map__ping { animation: none; opacity: 0.35; }
}

@media (max-width: 620px) {
    .contact-map__pin--lead { width: 12px; height: 12px; border-radius: 3px; }
    .contact-map__label { font-size: 12px; left: calc(100% + 6px); }
    .contact-map__card { width: 200px; padding: 16px 18px 18px; }
}

/* =========================================================
   Project detail
   ========================================================= */
.pd-intro {
    padding: 60px var(--gutter) 90px;
    background: var(--surface);
    text-align: center;
}

.pd-intro__tag {
    font-size: var(--fs-meta);
    font-weight: 300;
    letter-spacing: -0.2px;
}

.pd-intro__title {
    margin-top: 26px;
    font-size: 96px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.5px;
}

.pd-intro__lead {
    margin-top: 30px;
    font-size: var(--fs-meta);
    font-weight: 300;
    letter-spacing: -0.2px;
    text-transform: uppercase;
}

/* Scroll stage: tall track, sticky frame */
.pd-stage {
    position: relative;
    height: 180vh;
    /* Past the page gutter on both sides, so the frame opens to the very
       edges of the screen rather than to the edges of the page */
    margin-inline: calc(var(--gutter) * -1);
    background: var(--surface);
}

.pd-stage__frame {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

.pd-stage__media {
    width: 100%;
    height: 100%;
    /* JS drives these while the stage is in view */
    clip-path: inset(var(--pd-y, 6%) var(--pd-x, 12%) var(--pd-y, 6%) var(--pd-x, 12%));
    background: #f2f2f2;
}
.pd-stage__media img,
.pd-stage__media video {
    width: 100%;
    height: 100%;
    padding: 40px;
    object-fit: contain;
}

/* A photograph fills the frame as it opens out */
.pd-stage__media--photo img,
.pd-stage__media--photo video {
    padding: 0;
    object-fit: cover;
}

/* A Vimeo / YouTube film fills the frame the way a cover picture would:
   sized to the larger side and centred, its edges cut by the frame */
.pd-stage__media--embed {
    position: relative;
    overflow: hidden;
    container-type: size;
    background: #0d0d0d;
}
.pd-stage__media--embed iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 100cqh * 16 / 9);
    height: max(100%, 100cqw * 9 / 16);
    border: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}


/* Brief band under the image, in the site palette */
.pd-brief {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding: 90px 45px 110px;
    background: var(--surface);
    color: var(--ink);
}

/* Sized so the opening sentence settles into three lines */
.pd-brief__statement {
    max-width: 100%;
    font-size: clamp(30px, 2.6vw, 40px);
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: -0.6px;
}

/* Live preview: a pill that opens the finished work in a new tab */
.pd-live {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 44px;
    padding: 13px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: var(--fs-meta);
    font-weight: 700;
    letter-spacing: var(--ls-meta);
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.45s var(--ease), border-color 0.45s var(--ease),
                color 0.45s var(--ease), transform 0.45s var(--ease);
}
.pd-live__dot {
    width: 9px;
    height: 9px;
    background: var(--accent);
    border-radius: 50%;
    transition: background 0.45s var(--ease), transform 0.45s var(--ease);
}
.pd-live__arrow {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    transition: transform 0.45s var(--ease);
}
.pd-live__arrow svg { width: 16px; height: 16px; }

.pd-live:hover,
.pd-live:focus-visible {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    transform: translateY(-2px);
}
.pd-live:hover .pd-live__dot,
.pd-live:focus-visible .pd-live__dot {
    background: #fff;
    transform: scale(1.15);
}
.pd-live:hover .pd-live__arrow,
.pd-live:focus-visible .pd-live__arrow { transform: translate(3px, -3px); }

.pd-brief__summary {
    max-width: 620px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.6;
}

/* The right column ends level with the team photos on the left */
.pd-brief__detail {
    display: flex;
    flex-direction: column;
}
.pd-meta {
    /* Four labels on one line: stakeholder, sector, year and town */
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: auto;
    padding-top: 60px;
}
.pd-meta__item dt {
    color: var(--muted);
    font-size: 16px;
    letter-spacing: var(--ls-meta);
}
.pd-meta__item dd span { display: block; }
.pd-meta__item dd {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: -0.2px;
}

@media (max-width: 1024px) {
    .pd-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pd-intro__title { font-size: 58px; }
    .pd-brief {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 60px 24px 70px;
    }
    .pd-brief__statement { font-size: 32px; }
    .pd-meta { margin-top: 40px; }
}

@media (max-width: 620px) {
    .pd-intro { padding: 30px var(--gutter) 60px; }
    .pd-intro__title { font-size: 38px; }
    .pd-stage { height: 150vh; }
}

/* Without JS, or with motion turned down, the frame just shows the image */
@media (prefers-reduced-motion: reduce) {
    .pd-stage { height: auto; }
    .pd-stage__frame { position: static; height: auto; }
    .pd-stage__media { clip-path: none; height: 70vh; }
}

@media (max-width: 620px) {
    .pd-brief__statement { font-size: 26px; }
    .pd-meta { grid-template-columns: 1fr; gap: 18px; }
}

/* =========================================================
   Project case study sections
   ========================================================= */
.pj-gallery,
.pj-compare,
.pj-construction,
.pj-pair,
.pj-strategy,
.pj-posters {
    background: var(--surface);
}

/* 01 mockup grid */
.pj-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px;
    gap: 8px;
    padding: 0 45px 90px;
    grid-template-areas:
        "stationery phone shirt billboard"
        "scatter    phone shirt billboard"
        "spread     spread strap billboard"
        "spread     spread screen cards";
}
.pj-cell {
    overflow: hidden;
    background: #f1f1f1;
}
.pj-cell svg { width: 100%; height: 100%; }


.pj-cell--stationery { grid-area: stationery; }
.pj-cell--scatter    { grid-area: scatter; }
.pj-cell--phone      { grid-area: phone; }
.pj-cell--shirt      { grid-area: shirt; }
.pj-cell--billboard  { grid-area: billboard; }
.pj-cell--spread     { grid-area: spread; }
.pj-cell--strap      { grid-area: strap; }
.pj-cell--screen     { grid-area: screen; }
.pj-cell--cards      { grid-area: cards; }

/* 02 before / after */
.pj-compare {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 30px;
    padding: 60px 45px 90px;
}

.pj-compare__label {
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 1.4px;
}
.pj-compare__label--on-dark { color: #8f8f8f; }

.pj-compare__old,
.pj-compare__new {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 300px;
}

.pj-compare__mark { width: 62px; }
.pj-compare__mark svg { width: 100%; height: auto; }

.pj-compare__word {
    color: #adadad;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.4px;
}
.pj-compare__word--new {
    color: #f4f4f4;
    font-size: 46px;
    font-weight: 400;
    letter-spacing: -0.6px;
}
.pj-compare__word sup { font-size: 0.34em; }

.pj-compare__arrow { color: var(--line); }

.pj-compare__panel {
    padding: 22px 26px 26px;
    background: var(--dark);
}


/* 03 construction: the lockup on its own grid, with the measurements */
.pj-construction {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 45px 110px;
}

.pj-lock {
    /* Every measurement is a multiple of one grid square: 26 of them tall */
    --h: clamp(64px, 8.2vw, 120px);
    --u: calc(var(--h) / 26);
    --line: #dcdcdc;
    position: relative;
    width: max-content;
    height: var(--h);
    margin: 0;
    color: #9a9a9a;
    font-size: 9px;
    letter-spacing: 0.3px;
}

.pj-lock i {
    position: absolute;
    font-style: normal;
    white-space: nowrap;
}

.pj-lock__box {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--u) * 15.5);
    height: 100%;
    padding: 0 calc(var(--u) * 4) 0 calc(var(--u) * 5);
}
.pj-lock__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, #e8e8e8 1px, transparent 1px),
        linear-gradient(to bottom, #e8e8e8 1px, transparent 1px);
    background-size: var(--u) var(--u);
}
.pj-lock__grid::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--u);
    height: var(--u);
    background: #f4531f;
}

.pj-lock__mark {
    position: relative;
    flex: 0 0 auto;
    width: calc(var(--u) * 16);
    height: calc(var(--u) * 16);
}
.pj-lock__mark svg { width: 100%; height: 100%; display: block; }

.pj-lock__word {
    position: relative;
    color: #101010;
    font-size: calc(var(--u) * 19);
    line-height: 1;
    letter-spacing: calc(var(--u) * -0.4);
}
.pj-lock__word sup {
    font-size: 0.3em;
    vertical-align: super;
    letter-spacing: 0;
}

/* Guide lines dropped from the lockup edges */
.pj-lock__drop {
    position: absolute;
    top: calc(var(--u) * -9);
    bottom: calc(var(--u) * -20);
    width: 1px;
    background: var(--line);
    opacity: 0.55;
}

/* Horizontal dimensions above and below */
.pj-lock__rule--top,
.pj-lock__rule--word {
    position: absolute;
    height: 1px;
    background: var(--line);
}
.pj-lock__rule--top {
    top: calc(var(--u) * -9);
    left: 0;
    right: 0;
}
.pj-lock__rule--word {
    top: calc(100% + var(--u) * 5);
    left: calc(var(--u) * 36.5);
    right: calc(var(--u) * 4);
}
.pj-lock__rule--top i,
.pj-lock__rule--word i {
    left: 50%;
    top: -13px;
    transform: translateX(-50%);
}

/* Vertical dimensions on the left */
.pj-lock__rule--h26,
.pj-lock__rule--h16 {
    position: absolute;
    width: 1px;
    background: var(--line);
}
.pj-lock__rule--h26 {
    top: 0;
    height: 100%;
    left: calc(var(--u) * -18);
}
.pj-lock__rule--h16 {
    top: calc(var(--u) * 5);
    height: calc(var(--u) * 16);
    left: calc(var(--u) * -12);
}
.pj-lock__rule--h26 i,
.pj-lock__rule--h16 i {
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
}

/* Small ticks at the four left corners */
.pj-lock__tick {
    position: absolute;
    width: calc(var(--u) * 8);
    height: 1px;
    background: var(--line);
}
.pj-lock__tick i { right: calc(100% + 4px); top: -6px; }
.pj-lock__tick--tl3 { left: calc(var(--u) * -8); top: calc(var(--u) * 3); }
.pj-lock__tick--tl2 { left: calc(var(--u) * -6); top: calc(var(--u) * 5); }
.pj-lock__tick--bl2 { left: calc(var(--u) * -6); top: calc(var(--u) * 21); }
.pj-lock__tick--bl3 { left: calc(var(--u) * -8); top: calc(var(--u) * 23); }

/* Cap and clearance readings on the right */
.pj-lock__side {
    position: absolute;
    left: 100%;
    width: calc(var(--u) * 10);
    height: 1px;
    background: var(--line);
}
.pj-lock__side i { left: calc(100% + 6px); top: -6px; }
.pj-lock__side--a { top: 0; }
.pj-lock__side--b { top: calc(var(--u) * 5.5); }
.pj-lock__side--c { top: calc(var(--u) * 19.5); }
.pj-lock__side--d { top: 100%; }

/* Readings under the mark, the gap and the trademark */
.pj-lock__foot { position: absolute; }
.pj-lock__foot i { transform: translateX(-50%); }
.pj-lock__foot--m3l  { top: calc(100% + var(--u) * 7);  left: calc(var(--u) * 1.5); }
.pj-lock__foot--m2l  { top: calc(100% + var(--u) * 12); left: calc(var(--u) * 4); }
.pj-lock__foot--m16  { top: calc(100% + var(--u) * 17); left: calc(var(--u) * 13); }
.pj-lock__foot--m2r  { top: calc(100% + var(--u) * 12); left: calc(var(--u) * 22); }
.pj-lock__foot--m3r  { top: calc(100% + var(--u) * 7);  left: calc(var(--u) * 24.5); }
.pj-lock__foot--gap  { top: calc(100% + var(--u) * 12); left: calc(var(--u) * 31); }
.pj-lock__foot--tm8  { top: calc(100% + var(--u) * 7);  right: calc(var(--u) * 8); }
.pj-lock__foot--tm35 { top: calc(100% + var(--u) * 12); right: calc(var(--u) * 14); }

/* 04 two-up */
.pj-pair {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    padding: 0 45px 90px;
}
.pj-pair__cell {
    grid-column: span 2;
    overflow: hidden;
    aspect-ratio: 7 / 6;
}
.pj-pair__cell--wide { grid-column: span 3; }
.pj-pair__cell svg { width: 100%; height: 100%; }

/* 05 strategy */
.pj-strategy {
    display: grid;
    grid-template-columns: 1fr 0.7fr 1fr;
    gap: 40px;
    padding: 0 45px 100px;
}
.pj-strategy__media {
    grid-row: span 2;
    overflow: hidden;
    aspect-ratio: 7 / 6;
}
.pj-strategy__media svg { width: 100%; height: 100%; }

.pj-strategy__title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -0.2px;
}
.pj-strategy__dot {
    width: 11px;
    height: 11px;
    background: var(--accent);
    border-radius: 50%;
}

.pj-strategy__body {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: 480px;
    line-height: 1.55;
}
.pj-strategy__rule {
    width: 100%;
    height: 1px;
    background: var(--line);
}

/* 06 typography */
/* 06 palette against a night scene */
.pj-palette {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 45px;
    padding: 45px;
    background: #0b0b0b;
}

.pj-palette__scene {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 3 / 4;
}
.pj-palette__scene svg { width: 100%; height: 100%; display: block; }

.pj-palette__card {
    position: relative;
    align-self: end;
    display: flex;
    flex-direction: column;
    padding: 26px 30px 30px;
    background: #f1f1f1;
    aspect-ratio: 5 / 4;
}

.pj-palette__swatches {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin: auto 0;
}
.pj-palette__swatches li {
    width: 44px;
    height: 44px;
    background: var(--swatch);
    border-radius: 50%;
}


/* 07 posters */
.pj-posters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 0 45px 110px;
}

.pj-poster {
    position: relative;
    display: flex;
    flex-direction: column;
    aspect-ratio: 3 / 4;
    padding: 26px;
    overflow: hidden;
}
.pj-poster--light { background: #f1f1f1; }
.pj-poster--dark { background: var(--dark); color: #e8e8e8; }

.pj-poster__display {
    position: relative;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -0.6px;
    text-align: right;
}
.pj-poster__display span { display: block; }
.pj-poster__display--foot { margin-top: auto; text-align: right; }
.pj-poster__display--split {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    text-align: left;
}
.pj-poster__index { color: #dcdcdc; font-size: 46px; }

.pj-poster__orbit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.pj-poster__orbit--wire { padding: 12%; }

.pj-poster__object {
    position: relative;
    margin: auto 0;
    width: 100%;
    height: auto;
}

.pj-poster__copy {
    position: relative;
    margin-top: auto;
    max-width: 62%;
    align-self: flex-end;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}
.pj-poster--dark .pj-poster__copy { color: #9a9a9a; }

.pj-poster__brand {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    font-size: 15px;
}
.pj-poster__brand--top { margin: 0 0 auto; }
.pj-poster__brand sup { font-size: 0.5em; }
.pj-poster__mark { width: 18px; }
.pj-poster__mark svg { width: 100%; height: auto; }

.pj-poster__pill {
    position: relative;
    align-self: flex-start;
    margin-top: auto;
    padding: 3px 9px;
    background: var(--accent);
    border-radius: 999px;
    color: #fff;
    font-size: 9px;
}

@media (max-width: 1024px) {
    .pj-gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
        grid-template-areas:
            "stationery phone"
            "scatter    phone"
            "shirt      billboard"
            "spread     spread"
            "strap      screen"
            "cards      cards";
        padding: 0 24px 60px;
    }
    .pj-compare {
        grid-template-columns: 1fr;
        padding: 40px 24px 60px;
    }
    .pj-compare__arrow { display: none; }
    .pj-construction { padding: 20px 24px 70px; }
    .pj-pair,
    .pj-posters { grid-template-columns: 1fr; padding: 0 24px 60px; }
    .pj-strategy {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 0 24px 70px;
    }
    .pj-strategy__media { grid-row: auto; }
}

/* 09 packaging: the flat dieline beside the finished box */
.pj-pack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--surface);
}
.pj-pack__flat,
.pj-pack__box {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.pj-pack__box { background: #050505; }
.pj-pack svg { width: 100%; height: 100%; display: block; }

/* 10 the mark on a garment, on a product, and at five sizes */
.pj-scale {
    /* an 8px band of the page colour separates it from the packaging above */
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.42fr 1fr;
    gap: 8px;
    background: var(--surface);
}
.pj-scale__wear {
    grid-row: span 2;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 3 / 4;
}
.pj-scale__wear svg { width: 100%; height: 100%; display: block; }

.pj-scale__product,
.pj-scale__steps {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 30px 40px;
    background: #f4f4f4;
}
.pj-scale__product svg { width: 100%; height: auto; }

.pj-scale__steps ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    width: 100%;
}
.pj-scale__steps li {
    display: flex;
    align-items: center;
    gap: calc(var(--step) * 0.42);
    font-size: var(--step);
}
.pj-scale__mark {
    width: calc(var(--step) * 1.35);
    flex: 0 0 auto;
}
.pj-scale__mark svg { width: 100%; height: auto; display: block; }
.pj-scale__word {
    color: #8f8f8f;
    letter-spacing: -0.02em;
    line-height: 1;
}
.pj-scale__word sup { font-size: 0.32em; vertical-align: super; }

/* Closing call to action: purple glows in the dark, under moving grain */
.pj-cta {
    /* an 8px band of the page colour separates it from the block above */
    margin-top: 8px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 150px 45px 160px;
    background: var(--surface);
    color: var(--ink);
    text-align: center;
}


.pj-cta__inner {
    position: relative;
    z-index: 1;
}

.pj-cta__inner {
    max-width: 1020px;
    margin: 0 auto;
}

.pj-cta__title {
    font-size: clamp(28px, 3.4vw, 52px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.6px;
    text-transform: uppercase;
}

.pj-cta__body {
    margin-top: 26px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.5;
}

.pj-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    min-width: 330px;
    margin-top: 46px;
    padding: 20px 20px 20px 34px;
    background: var(--accent);
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.5s var(--ease);
}
.pj-cta__button:hover { background: #8f74ff; }

.pj-cta__arrow {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    color: #fff;
    transition: transform 0.5s var(--ease);
}
.pj-cta__arrow svg { width: 20px; height: 20px; }
.pj-cta__button:hover .pj-cta__arrow { transform: translateX(4px); }

/* More projects: white cards on the dark closing panel */
.pj-more {
    /* three across, two down: the intro, three cards, the link, one gap */
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 15px 16px;
    background: #1c1c1c;
    color: #fff;
}

.pj-more__intro {
    display: flex;
    flex-direction: column;
    padding: 14px 18px 18px;
}
.pj-more__title {
    font-size: 42px;
    font-weight: 400;
    letter-spacing: -0.6px;
    text-transform: uppercase;
}
.pj-more__subtitle {
    margin-top: 12px;
    color: #9a9a9a;
    font-size: 17px;
}
.pj-more__stat {
    display: flex;
    flex: 1;
    width: 76%;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 40px;
    padding: 30px 28px 34px;
    border: 1px solid #303030;
    border-radius: 10px;
}
.pj-more__stat span {
    display: block;
    color: #7a7a7a;
    font-size: 76px;
    line-height: 1;
    letter-spacing: -2px;
}
.pj-more__stat p {
    margin-top: 30px;
    color: #8f8f8f;
    font-size: var(--fs-meta);
    line-height: 1.5;
    letter-spacing: var(--ls-meta);
    text-transform: uppercase;
}

/* The fourth tile: a ring with the link to every project */
.work-tile--more .work-tile__link {
    align-items: center;
    justify-content: center;
}
.pj-seemore {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    width: 74%;
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink);
    font-size: 20px;
    transition: background 0.5s var(--ease), border-color 0.5s var(--ease),
                color 0.5s var(--ease);
}
.work-tile--more .work-tile__link:hover .pj-seemore {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.pj-seemore__arrow {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--accent);
    transition: transform 0.5s var(--ease), color 0.5s var(--ease);
}
.pj-seemore__arrow svg { width: 22px; height: 22px; }
.work-tile--more .work-tile__link:hover .pj-seemore__arrow {
    transform: translateX(4px);
    color: #fff;
}

/* the cards sit straight in the section grid */
.pj-more__grid { display: contents; }

/* These closing cards are short, so nothing travels on hover: the box stays
   put and only the mockup slides into it */
.pj-more .work-tile__media,
.pj-more .work-tile__link:hover .work-tile__media { transform: none; }

/* Every case-study block: one full screen, on the same 45px gutter as the brief */
@media (min-width: 1025px) {
    .pj-compare,
    .pj-construction,
    .pj-pair,
    .pj-strategy,
    .pj-palette,
    .pj-posters,
    .pj-cta {
        height: 100vh;
        padding: 45px;
    }

    /* The grid sits centred, 150px clear at the sides and 75px top and bottom */
    .pj-gallery {
        height: 100vh;
        padding: 75px 150px;
        grid-auto-rows: 1fr;
        grid-template-rows: repeat(4, 1fr);
    }

    .pj-compare { align-items: stretch; }
    .pj-compare__side,
    .pj-compare__panel {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .pj-compare__old,
    .pj-compare__new { flex: 1; }
    .pj-compare__arrow { align-self: center; }

    .pj-construction {
        display: flex;
        align-items: center;
    }
    .pj-construction__plate {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .pj-pair {
        /* the two frames on top carry more weight than the three below */
        grid-template-rows: 1.4fr 1fr;
    }
    .pj-pair__cell {
        aspect-ratio: auto;
        height: 100%;
    }

    .pj-strategy {
        grid-template-rows: auto 1fr;
        align-content: start;
        /* the image takes the left half of the screen */
        grid-template-columns: calc(50vw - 45px) 0.8fr 1fr;
        /* As tall as its picture and copy need, not a full screen */
        height: auto;
    }
    /* A landscape picture with its own proportions, so it reads as an image
       beside the copy rather than a tall column down the page */
    .pj-strategy__media {
        aspect-ratio: 3 / 2;
        height: auto;
        margin: 0;
    }

    /* the scene fills the screen rather than keeping its own ratio */
    .pj-palette__scene {
        aspect-ratio: auto;
        height: 100%;
    }
    .pj-palette__card { max-height: 100%; }

    /* posters keep the 300 x 500 ratio and sit in the middle of the screen */
    .pj-posters {
        /* columns hug the posters so the gap between them really is 15px */
        grid-template-columns: repeat(3, minmax(0, 300px));
        align-content: center;
        justify-content: center;
    }
    .pj-poster {
        aspect-ratio: 3 / 5;
        width: 100%;
        max-width: 300px;
        max-height: 100%;
        height: auto;
    }

    .pj-cta {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* the packaging and the scale study run edge to edge */
    .pj-pack,
    .pj-scale {
        height: 100vh;
        padding: 0;
    }
    .pj-scale__wear { aspect-ratio: auto; height: 100%; }
}

@media (max-width: 1024px) {
    .pj-cta { padding: 90px 24px 100px; }
    .pj-cta__button { min-width: 0; width: 100%; max-width: 330px; }
    .pj-more {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px;
    }
    .pj-more__intro { padding: 18px 20px 24px; }
    .pj-more__title { font-size: 32px; }
    .pj-more__stat { margin-top: 26px; }
    .pj-more__stat p { margin-top: 40px; }
}

/* The mosaic: nine places of different sizes */
.pj-show {
    /* Six columns and six half-rows: the wide blocks span two of each, the
       short ones take a single half-row */
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    grid-template-areas:
        "a b c c d e"
        "a b c c d f"
        "g i j j k k"
        "h i j j k k"
        "l m n o p q"
        "l m n o p q";
    gap: 14px;
    height: 100vh;
    padding: 45px;
    background: var(--surface);
}
.pj-show__cell {
    overflow: hidden;
    background: #f1f1f1;
}
.pj-show__cell img,
.pj-show__cell video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pj-show__cell--a { grid-area: a; }
.pj-show__cell--b { grid-area: b; }
.pj-show__cell--c { grid-area: c; }
.pj-show__cell--d { grid-area: d; }
.pj-show__cell--e { grid-area: e; }
.pj-show__cell--f { grid-area: f; }
.pj-show__cell--g { grid-area: g; }
.pj-show__cell--h { grid-area: h; }
.pj-show__cell--i { grid-area: i; }
.pj-show__cell--j { grid-area: j; }
.pj-show__cell--k { grid-area: k; }
.pj-show__cell--l { grid-area: l; }
.pj-show__cell--m { grid-area: m; }
.pj-show__cell--n { grid-area: n; }
.pj-show__cell--o { grid-area: o; }
.pj-show__cell--p { grid-area: p; }
.pj-show__cell--q { grid-area: q; }

@media (max-width: 1024px) {
    .pj-show {
        height: auto;
        grid-auto-rows: 22vw;
        gap: 10px;
        padding: 24px;
    }
}

@media (max-width: 720px) {
    .pj-show {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 34vw;
        grid-template-areas:
            "a c"
            "a c"
            "b d"
            "e f"
            "g i"
            "h i"
            "j j"
            "k k"
            "l m"
            "n o"
            "p q";
    }
}

/* =========================================================
   Uploaded images (admin panel) sit in the drawn placeholders
   ========================================================= */
.pj-cell img, .pj-cell video,
.pj-pair__cell img, .pj-pair__cell video,
.pj-poster--photo img, .pj-poster--photo video,
.pj-pack__flat img, .pj-pack__flat video,
.pj-pack__box img, .pj-pack__box video,
.pj-scale__wear img, .pj-scale__wear video,
.pj-scale__product img, .pj-scale__product video,
.pj-palette__scene img, .pj-palette__scene video,
.pj-strategy__media img, .pj-strategy__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pj-poster--photo {
    padding: 0;
    overflow: hidden;
}
/* Whatever its own size, a logo fills the drawn mark's box */
.pj-compare__mark img,
.pj-compare__mark video {
    width: 100%;
    height: 62px;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Images added to a service block */
.services-shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
    margin-top: 30px;
}
.services-shots li {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #f1f1f1;
}
.services-shots img,
.services-shots video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------------------------------------------------------------
   Side panels: the start form slides in, the texts open centred
   --------------------------------------------------------------- */
.start {
    position: fixed;
    inset: 0;
    z-index: 90;
}
.start[hidden] { display: none; }

.start__veil {
    position: absolute;
    inset: 0;
    background: rgba(16, 16, 16, 0.28);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    opacity: 0;
    transition: opacity 0.6s var(--ease);
}
.start.is-open .start__veil { opacity: 1; }

.start__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(760px, 100%);
    padding: 56px clamp(24px, 4vw, 64px) 48px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface);
    transform: translateX(100%);
    transition: transform 0.7s var(--ease);
}
.start.is-open .start__panel { transform: translateX(0); }

/* A text panel sits in the middle of the page instead */
.start--center {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vh, 48px) clamp(16px, 4vw, 48px);
}
.start--center .start__panel {
    position: relative;
    z-index: 1;
    top: auto;
    right: auto;
    bottom: auto;
    width: min(720px, 100%);
    max-height: 100%;
    padding: 52px clamp(24px, 4vw, 56px) 44px;
    opacity: 0;
    transform: translateY(18px) scale(0.985);
    transition: transform 0.6s var(--ease), opacity 0.45s var(--ease);
}
.start--center.is-open .start__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.start__close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: var(--accent);
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background 0.4s var(--ease);
}
.start__close svg { width: 15px; height: 15px; }
.start__close:hover { background: var(--ink); }

.start__title {
    margin: 0 44px 32px 0;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 500;
    letter-spacing: -0.6px;
}

.start__lead {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 44px;
}
.start__intro p {
    margin: 0 0 18px;
    font-size: var(--fs-body);
    line-height: 1.5;
}
.start__intro p:last-child { margin-bottom: 0; }

.start__steps {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--line);
}
.start__steps li {
    position: relative;
    padding: 0 0 22px 24px;
    color: var(--muted);
    font-size: var(--fs-body);
    line-height: 1.45;
}
.start__steps li:last-child { padding-bottom: 0; }
.start__steps li::before {
    content: "";
    position: absolute;
    top: 8px;
    left: -3px;
    width: 5px;
    height: 5px;
    background: var(--accent);
    border-radius: 50%;
}

.start__form .contact-field { margin: 0 0 26px; }

/* A panel that only carries text keeps a comfortable measure */

.legal__body p {
    margin: 0 0 18px;
    max-width: 60ch;
    font-size: var(--fs-body);
    line-height: 1.6;
}
.legal__body p:last-child { margin-bottom: 0; }

.start__send {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 8px;
}

@media (max-width: 720px) {
    .start--center { padding: 0; }
    .start__panel { padding: 52px 20px 36px; }
    .start__lead { grid-template-columns: 1fr; gap: 24px; }
    .start__steps { border-left: 0; padding-left: 0; }
    .start__steps li { padding-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .start__veil,
    .start__panel { transition: none; }
}

/* =========================================================
   Dark project sections: mosaic, mark, drifting strip
   ========================================================= */
.pj-dark {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    grid-template-areas:
        "a b b c"
        "a b b c"
        "d d e c"
        "d d e f";
    gap: 8px;
    height: 100vh;
    padding: 20px;
    background: #050505;
}
.pj-dark__cell {
    overflow: hidden;
    background: #141414;
}
.pj-dark__cell img,
.pj-dark__cell video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.pj-dark__cell--a { grid-area: a; }
.pj-dark__cell--b { grid-area: b; }
.pj-dark__cell--c { grid-area: c; }
.pj-dark__cell--d { grid-area: d; }
.pj-dark__cell--e { grid-area: e; }
.pj-dark__cell--f { grid-area: f; }

/* The mark before and after, centred on black */
.pj-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 100vh;
    padding: 90px 45px;
    background: #050505;
    text-align: center;
}
.pj-mark__old,
.pj-mark__new {
    display: grid;
    place-items: center;
    width: min(520px, 70vw);
    min-height: 90px;
    margin: 0;
}
.pj-mark__old img,
.pj-mark__new img,
.pj-mark__old video,
.pj-mark__new video {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
.pj-mark__label {
    color: #8a8a8a;
    font-size: 11px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}
.pj-mark__arrow svg { width: 12px; height: 60px; }

/* A strip of portraits drifting from left to right */
.pj-strip {
    overflow: hidden;
    padding: 90px 0;
    background: #050505;
}
.pj-strip__track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: pj-drift 46s linear infinite;
}
.pj-strip__cell {
    flex: 0 0 auto;
    width: 325px;
    height: 375px;
    overflow: hidden;
    background: #141414;
}
.pj-strip__cell img,
.pj-strip__cell video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Half the track is a copy, so -50% lands on the same frame */
@keyframes pj-drift {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

@media (max-width: 1024px) {
    .pj-dark {
        height: auto;
        grid-auto-rows: 30vw;
        padding: 16px;
    }
    .pj-strip { padding: 60px 0; }
    .pj-strip__cell { width: 230px; height: 270px; }
}

@media (max-width: 720px) {
    .pj-dark {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 40vw;
        grid-template-areas:
            "a b"
            "c b"
            "d d"
            "e f";
    }
    .pj-mark { min-height: 70vh; padding: 60px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .pj-strip__track { animation: none; }
}

/* The website on black, inside a thin frame */
.pj-screens {
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding: 90px clamp(24px, 8vw, 150px);
    background: #050505;
}
.pj-screens__frame {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #0b0b0b;
    border: 1px solid #232323;
    border-radius: 10px;
}
.pj-screens__frame img,
.pj-screens__frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 720px) {
    .pj-screens { gap: 28px; padding: 50px 20px; }
}

/* Catalogue pages in a row that scrolls sideways, on black */
.pj-pages {
    overflow: hidden;
    padding: 90px 0;
    background: #050505;
}
/* The sheets travel on their own, so there is no bar to drag */
.pj-pages__row {
    display: flex;
    gap: 28px;
    width: max-content;
    animation: pj-drift 60s linear infinite;
}
.pj-pages__sheet {
    flex: 0 0 auto;
    width: clamp(260px, 30vw, 470px);
    margin: 0;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: #111;
}
.pj-pages__sheet img,
.pj-pages__sheet video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 720px) {
    .pj-pages { padding: 50px 0; }
    .pj-pages__row { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .pj-pages__row { animation: none; }
}

/* Two long page views, staggered on black */
.pj-long {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(24px, 5vw, 90px);
    align-items: start;
    padding: 90px clamp(20px, 6vw, 120px);
    background: #050505;
}
.pj-long__sheet {
    margin: 0;
    overflow: hidden;
    background: #0b0b0b;
    border: 1px solid #1e1e1e;
    border-radius: 14px;
}
.pj-long__sheet--right { margin-top: clamp(40px, 9vw, 150px); }
.pj-long__sheet img,
.pj-long__sheet video {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 720px) {
    .pj-long {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 50px 20px;
    }
    .pj-long__sheet--right { margin-top: 0; }
}

/* Four quarters on black */
.pj-quad {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    gap: 6px;
    height: 100vh;
    padding: 6px;
    background: #050505;
}
.pj-quad__cell {
    overflow: hidden;
    background: #101010;
}
.pj-quad__cell img,
.pj-quad__cell video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 720px) {
    .pj-quad { height: auto; grid-auto-rows: 56vw; }
}

/* V3: one banner across the full width */
.pj-banner {
    background: #f4f5f7;
}
.pj-banner img,
.pj-banner video {
    display: block;
    width: 100%;
    height: auto;
}

/* V3: one screen shot on a light ground */
.pj-desk {
    padding: 80px 0;
    background: #f4f5f7;
}
.pj-desk__shot {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}
.pj-desk__shot img,
.pj-desk__shot video {
    display: block;
    width: 100%;
    height: auto;
}

/* V3: three columns of cards */
.pj-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 80px 24px;
}
.pj-trio__col {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
}
.pj-trio__col--tall {
    grid-template-rows: 1fr;
}
.pj-trio__cell {
    overflow: hidden;
    background: #e9eaee;
    aspect-ratio: 4 / 3;
}
.pj-trio__col--tall .pj-trio__cell {
    aspect-ratio: auto;
    height: 100%;
}
.pj-trio__cell img,
.pj-trio__cell video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* V3: two shots side by side */
.pj-split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.pj-split__cell {
    overflow: hidden;
    background: #e9eaee;
    aspect-ratio: 1 / 1;
}
.pj-split__cell img,
.pj-split__cell video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* V3: a row of cards that runs past both edges */
.pj-cards {
    overflow: hidden;
    padding: 80px 0;
    background: #f4f5f7;
}
/* The cards travel on their own; no bar to drag */
.pj-cards__row {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: pj-drift 55s linear infinite;
}
.pj-cards__cell {
    flex: 0 0 320px;
    overflow: hidden;
    background: #e9eaee;
    aspect-ratio: 3 / 4;
}
.pj-cards__cell img,
.pj-cards__cell video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
    .pj-cards__row { animation: none; }
}

/* V3: one wide shot with two beneath it */
.pj-stack {
    display: grid;
    gap: 6px;
    background: #f4f5f7;
}
.pj-stack__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.pj-stack__wide {
    overflow: hidden;
    background: #e9eaee;
    aspect-ratio: 16 / 9;
}
.pj-stack__cell {
    overflow: hidden;
    background: #e9eaee;
    aspect-ratio: 1 / 1;
}
.pj-stack img,
.pj-stack video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 720px) {
    .pj-trio { grid-template-columns: 1fr; padding: 48px 20px; }
    .pj-desk { padding: 48px 0; }
    .pj-cards { padding: 48px 0; }
    .pj-cards__cell { flex-basis: 240px; }
    .pj-split { grid-template-columns: 1fr; }
    .pj-stack__row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Services: the opening statement and the three service groups
   --------------------------------------------------------------- */
.svc-lead {
    position: relative;
    padding: 0 var(--gutter);
    text-align: center;
}
.svc-lead__text { margin: 0 auto; }

.svc-lead__headline {
    margin: 0 0 26px;
    font-size: 72px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.5px;
    word-spacing: -0.9px;
}
.svc-lead__headline span { display: block; }

.svc-lead__intro {
    max-width: 1120px;
    margin: 0 auto 22px;
    color: var(--muted);
    font-size: var(--fs-body);
    line-height: 1.65;
}
.svc-lead__intro span { display: block; }

.svc-lead__note {
    max-width: 620px;
    margin: 0 auto;
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: 1.6;
}

/* The picture sits under the centred text, with the cards over it */
.svc-lead__shot {
    max-width: 620px;
    margin: 30px auto 0;
}
.svc-lead__shot img,
.svc-lead__shot video {
    display: block;
    width: 100%;
    height: auto;
}

.svc-groups {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin-top: clamp(-220px, -14vw, -120px);
    padding: 0 clamp(20px, 6vw, 96px) 90px;
}
.svc-group {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* Reads only to a screen reader: the arrow needs a name */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.svc-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 250px;
    padding: 26px 26px 22px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.58));
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 18px 40px rgba(16, 16, 16, 0.07);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.svc-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 44px;
}
.svc-card__badge {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink);
}
.svc-card__mark { width: 30px; height: 30px; }
.svc-card__number {
    color: var(--muted);
    font-size: var(--fs-meta);
}
.svc-card__title {
    margin: 0 0 12px;
    font-size: 21px;
    font-weight: 400;
    letter-spacing: -0.2px;
}
.svc-card__text {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-meta);
    line-height: 1.6;
}

/* The list of services under each card */
.svc-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Plain rows: names only, with room to breathe */
.svc-list__row {
    padding: 17px 0;
    color: var(--ink);
    font-size: var(--fs-meta);
    line-height: 1.4;
}
.svc-list__row + .svc-list__row { border-top: 1px solid var(--line); }

@media (max-width: 1460px) { .svc-lead__headline { font-size: 60px; } }
@media (max-width: 1180px) { .svc-lead__headline { font-size: 46px; } }
@media (max-width: 860px)  { .svc-lead__headline { font-size: 38px; } }
@media (max-width: 620px)  { .svc-lead__headline { font-size: 30px; } }

@media (max-width: 1024px) {
    .svc-lead {
        grid-template-columns: 1fr;
        padding-top: 60px;
    }
    .svc-lead__shot { margin-right: 0; }
    .svc-groups { grid-template-columns: 1fr; margin-top: -60px; }
    .svc-card { flex: 0 0 auto; min-height: 0; }
}

/* ---------------------------------------------------------------
   404: the page that is not there, with a small run on it
   --------------------------------------------------------------- */
.nf {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--gutter) 90px;
    text-align: center;
}
.nf__code {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: var(--fs-meta);
    letter-spacing: 0.24em;
}
.nf__title {
    margin: 0 0 22px;
    font-size: 60px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.5px;
}
.nf__title span { display: block; }
.nf__note {
    max-width: 620px;
    margin: 0 0 40px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
}

/* The playfield */
.nf-game {
    position: relative;
    width: 100%;
    max-width: 960px;
    padding: 18px 18px 12px;
    background: var(--surface);
    cursor: pointer;
    touch-action: manipulation;
}
.nf-game__score {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: var(--fs-meta);
    letter-spacing: var(--ls-meta);
    text-transform: uppercase;
}
.nf-game__score b {
    color: var(--ink);
    font-weight: 700;
}
.nf-game__stage {
    display: block;
    width: 100%;
    height: auto;
}
.nf-game__over {
    position: absolute;
    left: 50%;
    top: 54%;
    margin: 0;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    font-size: var(--fs-meta);
    transform: translate(-50%, -50%);
}

.nf__hint {
    margin: 18px 0 34px;
    color: var(--muted);
    font-size: var(--fs-meta);
    letter-spacing: var(--ls-meta);
}

.nf__action {
    display: inline-flex;
    align-items: center;
    padding: 14px 26px;
    background: var(--ink);
    color: #fff;
    font-size: var(--fs-meta);
    letter-spacing: var(--ls-meta);
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.5s var(--ease);
}
.nf__action:hover,
.nf__action:focus-visible { background: var(--accent); }

@media (max-width: 860px) {
    .nf__title { font-size: 38px; }
    .nf-game { padding: 14px 12px 8px; }
}
@media (max-width: 620px) {
    .nf__title { font-size: 30px; }
}

/* An uploaded picture standing in for the drawn mark construction */
.pj-construction__shot {
    max-width: 1180px;
    margin: 0 auto;
}
.pj-construction__shot img,
.pj-construction__shot video {
    display: block;
    width: 100%;
    height: auto;
}

/* A Vimeo / YouTube film in the construction block: a 16:9 screen */
.pj-construction__shot--embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0d0d0d;
}
.pj-construction__shot--embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
}

/* An uploaded logo takes the height of each step; the file keeps its ratio */
.pj-scale__logo {
    height: var(--step);
    width: auto;
    max-width: 100%;
    display: block;
}

/* An uploaded picture standing in for the drawn type specimen */
.pj-type--shot {
    display: block;
    padding: 0;
    background: #f4f4f4;
}
.pj-type--shot img,
.pj-type--shot video {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------
   Back to top: appears once the page has been scrolled
   --------------------------------------------------------------- */
.to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 40;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    background: var(--ink);
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease),
                background 0.4s var(--ease);
}
.to-top.is-shown {
    opacity: 1;
    transform: translateY(0);
}
.to-top:hover,
.to-top:focus-visible { background: var(--accent); }
.to-top svg { width: 20px; height: 20px; }

@media (max-width: 620px) {
    .to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}

/* ---------------------------------------------------------------
   Footer: the contact block that replaced the social grid
   --------------------------------------------------------------- */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 26px;
    /* no inset of its own: it lines up with the headline above it */
    padding: 30px 0 34px;
}

.footer-contact__status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin: 0;
    padding: 10px 18px;
    background: var(--surface);
    border-radius: 999px;
    font-size: var(--fs-meta);
    font-weight: 700;
    letter-spacing: var(--ls-meta);
}
.footer-contact__dot {
    width: 9px;
    height: 9px;
    background: var(--accent);
    border-radius: 50%;
}

.footer-contact__list {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-contact__list li {
    display: grid;
    gap: 6px;
}
.footer-contact__label {
    color: var(--muted);
    font-size: var(--fs-meta);
    letter-spacing: var(--ls-meta);
}
.footer-contact__list a,
.footer-contact__list span:not(.footer-contact__label) {
    color: var(--ink);
    font-size: 20px;
    letter-spacing: -0.2px;
    text-decoration: none;
    transition: color 0.4s var(--ease);
}
.footer-contact__list a:hover,
.footer-contact__list a:focus-visible { color: var(--accent); }

/* The accounts stay, small, on the closing line */
.footer-socials {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    /* the round back-to-top button sits in this corner */
    padding-right: 58px;
}
.footer-socials__link {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: var(--muted);
    transition: color 0.4s var(--ease);
}
.footer-socials__link svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
}
.footer-socials__link:hover,
.footer-socials__link:focus-visible { color: var(--ink); }

@media (max-width: 860px) {
    .footer-contact { padding: 24px 0 28px; }
    .footer-contact__list a,
    .footer-contact__list span:not(.footer-contact__label) { font-size: 17px; }
}

/* The start panel: the consent sits on the button's line, with its tick box */
.start__send .contact-consent {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 420px;
    margin: 0;
    cursor: pointer;
}
.start__send .contact-consent__box {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}
.start__send .contact-consent__text { line-height: 1.5; }

/* Locked until the box is ticked */
.contact-submit[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* The contact page consent: the same tick box as the start panel */
.contact-form .contact-consent {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 26px;
    cursor: pointer;
}
.contact-form .contact-consent__box {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}
.contact-form .contact-consent__text { line-height: 1.5; }

/* ---------------------------------------------------------------
   Services: the flat project register — name on the left, date right
   --------------------------------------------------------------- */
.svc-ledger {
    padding: 20px clamp(20px, 6vw, 96px) 100px;
}
.svc-ledger__head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.svc-ledger__title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.2px;
}
.svc-ledger__note {
    flex: 1;
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-meta);
}
.svc-ledger__count {
    color: var(--muted);
    font-size: var(--fs-meta);
    letter-spacing: var(--ls-meta);
}

/* Two columns on a wide screen, one on a narrow one */
.svc-ledger__list {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 64px;
}
.svc-ledger__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    break-inside: avoid;
    font-size: var(--fs-meta);
}
.svc-ledger__name {
    color: var(--ink);
    line-height: 1.4;
}
.svc-ledger__date {
    flex: 0 0 auto;
    color: var(--muted);
}

@media (max-width: 860px) {
    .svc-ledger { padding-bottom: 60px; }
    .svc-ledger__list { columns: 1; }
}

/* A real map in place of the dotted one */
.contact-map--live {
    position: relative;
    overflow: hidden;
    aspect-ratio: 694 / 304;
    background: var(--surface);
}
.contact-map__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(1) contrast(1.05);
}

/* An uploaded portrait fills the round avatar */
.contact-person__avatar img,
.contact-person__avatar video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The studio box showing a small map of the marked address */
.contact-place__photo--map {
    position: relative;
    aspect-ratio: 260 / 150;
    background: var(--surface);
}
.contact-place__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(1) contrast(1.05);
}
.contact-place__photo img,
.contact-place__photo video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------------
   Service marks: each one keeps a slow movement of its own, and
   leans into it while the pointer is over its card
   --------------------------------------------------------------- */
.svc-card__mark { overflow: visible; }
.svc-card__mark * { transform-origin: 15px 15px; }

/* 01 — the upright turns like a needle */
.svc-mark__spin { animation: svc-spin 9s linear infinite; }
@keyframes svc-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* 02 — the ring breathes beside its bar */
.svc-mark__ring {
    transform-origin: 20px 15px;
    animation: svc-breathe 3.6s var(--ease) infinite;
}
@keyframes svc-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(0.72); }
}

/* 03 — the two slats slide inside their box */
.svc-mark__slat--one { animation: svc-slide-a 4.2s var(--ease) infinite; }
.svc-mark__slat--two { animation: svc-slide-b 4.2s var(--ease) infinite; }
@keyframes svc-slide-a {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(2.6px); }
}
@keyframes svc-slide-b {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-2.6px); }
}

/* The card under the pointer speeds its mark up */
.svc-card:hover .svc-mark__spin { animation-duration: 2.4s; }
.svc-card:hover .svc-mark__ring { animation-duration: 1.4s; }
.svc-card:hover .svc-mark__slat--one,
.svc-card:hover .svc-mark__slat--two { animation-duration: 1.6s; }

/* The badge itself lifts a touch with the card */
.svc-card__badge { transition: border-color 0.5s var(--ease), transform 0.5s var(--ease); }
.svc-card:hover .svc-card__badge {
    border-color: var(--ink);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .svc-mark__spin,
    .svc-mark__ring,
    .svc-mark__slat--one,
    .svc-mark__slat--two { animation: none; }
}

/* The uploaded wordmark in the header */
.logo__image {
    display: block;
    width: auto;
    height: 28px;
    object-fit: contain;
}

/* Without JavaScript the footer links still reach the text they point at */
.start[hidden]:target {
    display: flex !important;
}
.start:target .start__panel {
    transform: none;
    opacity: 1;
}