/*
 * James June Media — story-first refresh
 * This layer intentionally follows the legacy stylesheet so the homepage can
 * become the design-system reference without destabilizing unmigrated pages.
 */

:root {
    /* A quiet editorial base lets the signature logo carry the brand color. */
    --refresh-ink: #181817;
    --refresh-paper: #ffffff;
    --refresh-paper-deep: #f2f2f0;
    --refresh-white: #ffffff;
    --refresh-mint: #a5d5cf;
    --refresh-teal-dark: #477873;
    --refresh-gold: #eec860;
    --refresh-line: rgba(24, 24, 23, 0.16);
    --refresh-shell: min(100% - 3rem, 1320px);
    --refresh-section-space: clamp(7rem, 12vw, 12rem);
}

html {
    scroll-padding-top: 88px;
}

body {
    background: var(--refresh-white);
    color: var(--refresh-ink);
    line-height: 1.65;
}

::selection {
    color: var(--refresh-ink);
    background: var(--refresh-mint);
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2000;
    padding: 0.75rem 1rem;
    color: var(--refresh-ink);
    background: var(--refresh-white);
    transform: translateY(-150%);
    transition: transform 160ms ease;
}

.skip-link:focus {
    color: var(--refresh-ink);
    transform: translateY(0);
}

.home-shell {
    width: var(--refresh-shell);
    margin-inline: auto;
}

.home-main {
    overflow: clip;
}

.home-section {
    padding-block: var(--refresh-section-space);
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 1.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.eyebrow::before {
    width: 2.5rem;
    height: 1px;
    flex: 0 0 auto;
    background: linear-gradient(90deg, var(--refresh-mint), var(--refresh-gold));
    content: "";
}

/* Signature accents: direct color on dark media, color beneath dark text on white. */
.brand-emphasis {
    position: static;
    display: inline;
    margin: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.brand-emphasis::after {
    display: none;
    content: none;
}

.brand-emphasis--hero {
    display: inline-block;
    padding-inline-end: 0.04em;
    margin-inline-end: -0.04em;
    color: var(--refresh-mint);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .brand-emphasis--hero {
        background: linear-gradient(90deg, var(--refresh-mint), var(--refresh-gold));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.brand-emphasis--underline {
    padding-inline: 0.02em;
    background-image: linear-gradient(90deg, var(--refresh-mint), var(--refresh-gold));
    background-position: 0 92%;
    background-repeat: no-repeat;
    background-size: 100% 0.12em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.refresh-button,
.refresh-button:visited,
.refresh-button:hover,
.refresh-button:focus,
.refresh-button:active,
button.refresh-button {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.35rem;
    border: 1px solid currentColor;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.14em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.refresh-button--light,
.refresh-button--light:visited {
    color: var(--refresh-ink);
    border-color: var(--refresh-white);
    background: var(--refresh-white);
}

.refresh-button--light:hover,
.refresh-button--light:focus {
    color: var(--refresh-white);
    border-color: var(--refresh-white);
    background: transparent;
}

.refresh-button--dark,
.refresh-button--dark:visited,
button.refresh-button--dark {
    color: var(--refresh-white);
    border-color: var(--refresh-ink);
    background: var(--refresh-ink);
}

.refresh-button--dark:hover,
.refresh-button--dark:focus,
button.refresh-button--dark:hover,
button.refresh-button--dark:focus {
    color: var(--refresh-ink);
    border-color: var(--refresh-ink);
    background: transparent;
}

.refresh-text-link,
.refresh-text-link:visited {
    display: inline-flex;
    align-items: baseline;
    gap: 0.65rem;
    width: max-content;
    padding-block: 0.25rem 0.4rem;
    color: var(--refresh-ink);
    border-bottom: 1px solid currentColor;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
}

.refresh-text-link span {
    transition: transform 180ms ease;
}

.refresh-text-link:hover,
.refresh-text-link:focus {
    color: var(--refresh-teal-dark);
}

.refresh-text-link:hover span,
.refresh-text-link:focus span {
    transform: translate(0.15rem, -0.15rem);
}

.refresh-text-link--light,
.refresh-text-link--light:visited,
.refresh-text-link--light:hover,
.refresh-text-link--light:focus {
    color: var(--refresh-white);
}

/* Navigation */

.site-nav.navbar {
    min-height: 84px;
    padding: 0;
    border-bottom: 1px solid rgba(24, 24, 23, 0.1);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: none;
    transition: min-height 220ms ease, background-color 220ms ease, border-color 220ms ease;
}

.site-nav--overlay.navbar {
    color: var(--refresh-white);
    border-bottom-color: rgba(255, 255, 255, 0.18);
    background: linear-gradient(180deg, rgba(12, 12, 12, 0.58), rgba(12, 12, 12, 0));
}

.site-nav--overlay.navbar.fixed,
.site-nav--overlay.navbar.scrolled {
    min-height: 72px;
    border-bottom-color: rgba(24, 24, 23, 0.1);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
}

.site-nav__inner {
    min-height: inherit;
}

.site-nav .navbar-brand {
    position: static;
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    color: var(--refresh-ink);
    transform: none;
    text-decoration: none;
}

.site-nav.navbar .navbar-brand .site-brand__logo {
    display: block;
    width: clamp(10.75rem, 14vw, 12.5rem);
    max-width: none;
    max-height: none;
    height: auto;
    margin: 0;
    transition: width 220ms ease, filter 220ms ease;
}

.site-nav--overlay .site-brand__logo {
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.24));
}

.site-nav--overlay.fixed .site-brand__logo,
.site-nav--overlay.scrolled .site-brand__logo {
    filter: none;
}

.site-nav--overlay .navbar-brand {
    color: var(--refresh-white);
}

.site-nav .navbar-nav {
    gap: clamp(0.25rem, 1vw, 0.9rem);
}

.site-nav.navbar .nav-item {
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: 1;
}

.site-nav.navbar .nav-link {
    position: relative;
    padding: 0.75rem 0.55rem;
    color: rgba(24, 24, 23, 0.72);
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-nav--overlay.navbar .nav-link {
    color: rgba(255, 255, 255, 0.78);
}

.site-nav--overlay.navbar.fixed .nav-link,
.site-nav--overlay.navbar.scrolled .nav-link {
    color: rgba(24, 24, 23, 0.72);
}

.site-nav.navbar .nav-link:not(.site-nav__cta)::after {
    position: absolute;
    right: 0.55rem;
    bottom: 0.38rem;
    left: 0.55rem;
    height: 1px;
    background: currentColor;
    content: "";
    opacity: 0;
    transform: scaleX(0.4);
    transition: opacity 180ms ease, transform 180ms ease;
}

.site-nav.navbar .nav-link:hover,
.site-nav.navbar .nav-link:focus,
.site-nav.navbar .nav-link.active {
    color: var(--refresh-ink);
}

.site-nav--overlay.navbar .nav-link:hover,
.site-nav--overlay.navbar .nav-link:focus,
.site-nav--overlay.navbar .nav-link.active {
    color: var(--refresh-white);
}

.site-nav--overlay.navbar.fixed .nav-link:hover,
.site-nav--overlay.navbar.fixed .nav-link:focus,
.site-nav--overlay.navbar.fixed .nav-link.active,
.site-nav--overlay.navbar.scrolled .nav-link:hover,
.site-nav--overlay.navbar.scrolled .nav-link:focus,
.site-nav--overlay.navbar.scrolled .nav-link.active {
    color: var(--refresh-ink);
}

.site-nav.navbar .nav-link:hover::after,
.site-nav.navbar .nav-link:focus::after,
.site-nav.navbar .nav-link.active::after {
    opacity: 1;
    transform: scaleX(1);
}

.site-nav.navbar .site-nav__cta {
    margin-left: 0.4rem;
    padding: 0.85rem 1rem;
    color: var(--refresh-white);
    border: 1px solid var(--refresh-ink);
    background: var(--refresh-ink);
}

.site-nav--overlay.navbar .site-nav__cta {
    color: var(--refresh-ink);
    border-color: var(--refresh-white);
    background: var(--refresh-white);
}

.site-nav--overlay.navbar.fixed .site-nav__cta,
.site-nav--overlay.navbar.scrolled .site-nav__cta {
    color: var(--refresh-white);
    border-color: var(--refresh-ink);
    background: var(--refresh-ink);
}

.site-nav.navbar .site-nav__cta:hover,
.site-nav.navbar .site-nav__cta:focus {
    color: var(--refresh-ink);
    border-color: var(--refresh-ink);
    background: transparent;
}

.site-nav--overlay.navbar .site-nav__cta:hover,
.site-nav--overlay.navbar .site-nav__cta:focus {
    color: var(--refresh-white);
    border-color: var(--refresh-white);
    background: transparent;
}

.site-nav--overlay.navbar.fixed .site-nav__cta:hover,
.site-nav--overlay.navbar.fixed .site-nav__cta:focus,
.site-nav--overlay.navbar.scrolled .site-nav__cta:hover,
.site-nav--overlay.navbar.scrolled .site-nav__cta:focus {
    color: var(--refresh-ink);
    border-color: var(--refresh-ink);
    background: transparent;
}

.site-nav__toggle {
    position: relative;
    z-index: 1060;
    width: 48px;
    height: 48px;
    padding: 0;
}

.site-nav__toggle span {
    position: absolute;
    right: 8px;
    left: 8px;
    height: 1px;
    background: currentColor;
    transition: transform 180ms ease, top 180ms ease;
}

.site-nav__toggle span:first-child {
    top: 19px;
}

.site-nav__toggle span:last-child {
    top: 28px;
}

.site-nav__toggle[aria-expanded="true"] span:first-child {
    top: 24px;
    transform: rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] span:last-child {
    top: 24px;
    transform: rotate(-45deg);
}

/* Hero */

.home-hero {
    position: relative;
    display: grid;
    min-height: max(720px, 100svh);
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    color: var(--refresh-white);
    background: #202020 url('/public/images/credits/francis-av-cayuga-health-gala-tiny.jpg') center / cover no-repeat;
}

.home-hero__media,
.home-hero__shade {
    position: absolute;
    inset: 0;
}

.home-hero__media {
    z-index: -2;
}

.home-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(45%) saturate(60%) contrast(0.96);
}

.home-hero__shade {
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(12, 12, 12, 0.74) 0%, rgba(12, 12, 12, 0.32) 54%, rgba(12, 12, 12, 0.08) 100%),
        linear-gradient(0deg, rgba(12, 12, 12, 0.65) 0%, rgba(12, 12, 12, 0) 54%),
        linear-gradient(180deg, rgba(12, 12, 12, 0.24), transparent 31%);
}

.home-hero__content {
    padding-block: clamp(8rem, 14vh, 10rem) clamp(3rem, 6vh, 4.5rem);
}

.home-hero__eyebrow {
    color: rgba(255, 255, 255, 0.72);
}

.home-hero h1 {
    width: max-content;
    max-width: 100%;
    margin: 0;
    color: var(--refresh-white);
    font-family: var(--font-display);
    font-size: clamp(3.6rem, 7.5vw, 7.6rem);
    font-weight: 400;
    line-height: 0.9;
    letter-spacing: -0.065em;
    white-space: nowrap;
    text-transform: uppercase;
}

.home-hero__lede {
    max-width: 610px;
    margin: 2.4rem 0 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: clamp(1.05rem, 1.6vw, 1.28rem);
    line-height: 1.55;
}

.home-actions {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-top: 2.3rem;
}

.home-reel-modal {
    --bs-modal-margin: 1rem;
}

.home-reel-modal .modal-dialog {
    width: min(1140px, calc(100vw - 2rem), calc(200vh - 4rem));
    width: min(1140px, calc(100vw - 2rem), calc(200dvh - 4rem));
    max-width: none;
    margin: 1rem auto;
}

.home-reel-modal .modal-content {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #000;
    box-shadow: none;
}

.home-reel-modal__close {
    position: absolute;
    z-index: 2;
    top: 0.75rem;
    right: 0.75rem;
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, 0.76);
    cursor: pointer;
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1;
    transition: opacity 160ms ease, background-color 160ms ease;
}

.home-reel-modal__close:hover,
.home-reel-modal__close:focus-visible {
    background: #000;
}

@media (hover: hover) {
    .home-reel-modal__close {
        opacity: 0;
        pointer-events: none;
    }

    .home-reel-modal .modal-content:hover .home-reel-modal__close,
    .home-reel-modal .modal-content:focus-within .home-reel-modal__close {
        opacity: 1;
        pointer-events: auto;
    }
}

.home-reel-modal__video {
    width: 100%;
    aspect-ratio: 2 / 1;
    background: #000;
}

.home-reel-modal__video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.home-hero__scroll {
    position: absolute;
    right: max(1.5rem, calc((100vw - 1320px) / 2));
    bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-decoration: none;
    text-transform: uppercase;
}

.home-hero__scroll:hover,
.home-hero__scroll:focus {
    color: var(--refresh-white);
}

.home-hero__scroll-line {
    width: 56px;
    height: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.35);
}

.home-hero__scroll-line::after {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--refresh-white);
    content: "";
    transform: translateX(-100%);
    animation: scroll-line 2.4s ease-in-out infinite;
}

@keyframes scroll-line {
    0%, 20% { transform: translateX(-100%); }
    70%, 100% { transform: translateX(100%); }
}

/* Philosophy */

.home-philosophy {
    color: var(--refresh-ink);
    background: var(--refresh-paper);
}

.home-philosophy .home-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.72fr);
    gap: clamp(4rem, 9vw, 9rem);
    align-items: end;
}

.home-philosophy__sequence p {
    margin: 0;
    padding-block: 0.4em;
    border-bottom: 1px solid var(--refresh-line);
    color: rgba(24, 24, 23, 0.34);
    font-family: var(--font-display);
    font-size: clamp(2.7rem, 6vw, 6.6rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
    text-transform: uppercase;
}

.home-philosophy__sequence p:nth-child(2) {
    color: rgba(24, 24, 23, 0.58);
}

.home-philosophy__sequence p:nth-child(3) {
    color: var(--refresh-ink);
}

.home-philosophy__statement h2,
.home-work h2,
.home-approach h2,
.home-sound h2,
.home-beyond h2,
.home-capabilities h2,
.home-proof h2,
.project-contact h2 {
    margin: 0;
    color: inherit;
    font-family: var(--font-body);
    font-size: clamp(2.35rem, 4.6vw, 5.2rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.06em;
    text-wrap: balance;
}

.home-philosophy__statement > p:not(.eyebrow) {
    max-width: 560px;
    margin: 1.5rem 0 0;
    color: rgba(24, 24, 23, 0.72);
    font-size: 1.04rem;
}

.home-philosophy__statement > p:nth-of-type(2) {
    color: var(--refresh-ink);
    font-size: 1.18rem;
}

/* Featured work */

.home-work {
    background: var(--refresh-white);
}

.home-section-heading {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    align-items: end;
    margin-bottom: clamp(3.5rem, 7vw, 6.5rem);
}

.home-section-heading h2 {
    max-width: 850px;
}

.home-work__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(3rem, 7vw, 7rem) clamp(1.25rem, 3vw, 3rem);
}

.home-project {
    grid-column: span 6;
}

.home-project--1 {
    grid-column: 1 / span 8;
}

.home-project--2 {
    grid-column: 9 / span 4;
    padding-top: clamp(5rem, 12vw, 12rem);
}

.home-project--3 {
    grid-column: 1 / span 5;
}

.home-project--4 {
    grid-column: 7 / span 6;
    padding-top: clamp(4rem, 9vw, 8rem);
}

.home-project__link,
.home-project__link:visited {
    display: block;
    color: var(--refresh-ink);
    text-decoration: none;
}

.home-project__image-wrap {
    position: relative;
    overflow: hidden;
    background: var(--refresh-paper-deep);
}

.home-project--1 .home-project__image-wrap {
    aspect-ratio: 16 / 9;
}

.home-project--2 .home-project__image-wrap,
.home-project--3 .home-project__image-wrap {
    aspect-ratio: 4 / 5;
}

.home-project--poster .home-project__image-wrap {
    aspect-ratio: 2 / 3;
}

.home-project--4 .home-project__image-wrap {
    aspect-ratio: 3 / 2;
}

.home-project--widescreen .home-project__image-wrap {
    aspect-ratio: 16 / 9;
}

.home-project__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.home-project--2 .home-project__image,
.home-project--3 .home-project__image {
    object-position: center;
}

.home-project__link:hover .home-project__image,
.home-project__link:focus .home-project__image {
    transform: scale(1.025);
}

.home-project__number {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    color: var(--refresh-ink);
    background: var(--refresh-white);
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.home-project__content {
    position: relative;
    padding: 1.35rem 3.5rem 0 0;
}

.home-project__meta {
    display: flex;
    gap: 0.7rem;
    margin: 0 0 0.65rem;
    color: rgba(24, 24, 23, 0.62);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.home-project h3 {
    margin: 0;
    font-size: clamp(1.55rem, 2.7vw, 2.6rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.home-project__content > p:last-of-type {
    max-width: 600px;
    margin: 0.75rem 0 0;
    color: rgba(24, 24, 23, 0.66);
    font-size: 0.96rem;
    line-height: 1.55;
}

.home-project__arrow {
    position: absolute;
    top: 1.6rem;
    right: 0;
    font-size: 1.3rem;
    transition: transform 180ms ease;
}

.home-project__link:hover .home-project__arrow,
.home-project__link:focus .home-project__arrow {
    transform: translate(0.2rem, -0.2rem);
}

/* Approach */

.home-approach {
    color: var(--refresh-ink);
    border-block: 1px solid var(--refresh-line);
    background: var(--refresh-paper);
}

.home-approach__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.72fr);
    gap: clamp(4rem, 11vw, 11rem);
    align-items: start;
}

.home-approach h2 {
    max-width: 780px;
    font-family: var(--font-body);
    font-size: clamp(2.8rem, 4.3vw, 4.35rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.06em;
    text-transform: none;
}

.home-approach__copy {
    padding-top: 3.3rem;
}

.home-approach__copy p {
    color: rgba(24, 24, 23, 0.7);
}

.home-approach__copy .home-approach__lead {
    margin-top: 0;
    color: var(--refresh-ink);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    line-height: 1.42;
}

.home-approach__copy .refresh-text-link {
    margin-top: 1.5rem;
}

.home-approach .refresh-text-link--light,
.home-approach .refresh-text-link--light:visited,
.home-approach .refresh-text-link--light:hover,
.home-approach .refresh-text-link--light:focus {
    color: var(--refresh-ink);
}

/* Sound */

.home-sound {
    background: var(--refresh-white);
}

.home-sound__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.75fr);
    gap: clamp(4rem, 9vw, 9rem);
    align-items: center;
}

.home-sound__image-wrap {
    position: relative;
}

.home-sound__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.home-sound__caption {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0.75rem 1rem;
    color: var(--refresh-white);
    background: var(--refresh-ink);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.home-sound__copy h2 {
    max-width: 650px;
}

.home-sound__copy > p:not(.eyebrow):not(.home-sound__credential) {
    margin: 1.35rem 0 0;
    color: rgba(24, 24, 23, 0.68);
}

.home-sound__copy .home-sound__lead {
    color: var(--refresh-ink) !important;
    font-size: 1.22rem;
}

.home-sound__credential {
    margin: 2rem 0;
    padding-block: 1rem;
    border-block: 1px solid var(--refresh-line);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.home-sound__credential span {
    margin-inline: 0.5rem;
    color: var(--refresh-gold);
}

/* Beyond the film */

.home-beyond {
    color: var(--refresh-white);
    background: var(--refresh-ink);
}

.home-beyond__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1fr);
    gap: clamp(4rem, 10vw, 10rem);
    align-items: start;
}

.home-beyond__intro {
    position: sticky;
    top: 120px;
}

.home-beyond__intro h2 {
    max-width: 660px;
}

.home-beyond__intro > p:not(.eyebrow) {
    max-width: 600px;
    margin: 1.6rem 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.08rem;
}

.home-beyond__intro .refresh-text-link {
    margin-top: 2rem;
}

.home-beyond__extensions {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.home-beyond__extensions article {
    display: grid;
    grid-template-columns: 48px minmax(170px, 0.72fr) minmax(240px, 1fr);
    gap: 1.5rem;
    align-items: baseline;
    padding-block: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.home-beyond__extensions article > span {
    color: var(--refresh-mint);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.15em;
}

.home-beyond__extensions h3 {
    margin: 0;
    color: var(--refresh-white);
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.home-beyond__extensions article p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
}

.home-beyond__principle {
    margin: 3rem 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Capabilities */

.home-capabilities {
    color: var(--refresh-ink);
    border-block: 1px solid var(--refresh-line);
    background: var(--refresh-paper);
}

.home-capabilities__heading > p {
    max-width: 460px;
    margin: 0;
    color: rgba(24, 24, 23, 0.7);
}

.home-capabilities__primary {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.15fr);
    gap: clamp(3rem, 8vw, 8rem);
    padding-block: clamp(2.8rem, 5vw, 5rem);
    border-block: 1px solid var(--refresh-ink);
}

.home-capabilities__primary-heading h3 {
    max-width: 600px;
    margin: 0.8rem 0 0;
    color: var(--refresh-ink);
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.06em;
}

.home-capabilities__primary-copy {
    align-self: end;
}

.home-capabilities__primary-copy p {
    max-width: 680px;
    margin: 0;
    color: rgba(24, 24, 23, 0.72);
    font-size: clamp(1.08rem, 1.65vw, 1.35rem);
}

.home-capabilities__primary-copy .refresh-text-link {
    margin-top: 1.8rem;
}

.home-capabilities__supporting-label {
    margin: clamp(4rem, 7vw, 7rem) 0 1rem;
    color: rgba(24, 24, 23, 0.54);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.home-capabilities__list {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--refresh-line);
    list-style: none;
}

.home-capability {
    display: grid;
    grid-template-columns: 70px minmax(230px, 0.8fr) minmax(320px, 1.15fr) 240px;
    gap: 1.5rem;
    align-items: baseline;
    padding-block: 2.1rem;
    border-bottom: 1px solid var(--refresh-line);
}

.home-capability__number {
    color: var(--refresh-teal-dark);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.15em;
}

.home-capability h3 {
    margin: 0;
    color: var(--refresh-ink);
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.home-capability p {
    margin: 0;
    color: rgba(24, 24, 23, 0.72);
}

.home-capability a {
    justify-self: end;
    color: var(--refresh-ink);
    border-bottom: 1px solid rgba(24, 24, 23, 0.42);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
}

.home-capability a:hover,
.home-capability a:focus {
    color: var(--refresh-teal-dark);
}

.home-process {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(4rem, 7vw, 7rem);
    color: rgba(24, 24, 23, 0.46);
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.5vw, 2.75rem);
    line-height: 1;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.home-process span:nth-child(4n + 2) {
    color: var(--refresh-mint);
}

.home-process span:nth-child(4n) {
    color: var(--refresh-gold);
}

/* Proof */

.home-proof {
    background: var(--refresh-white);
}

.home-proof__intro {
    display: grid;
    grid-template-columns: 0.55fr 1.45fr;
    gap: 3rem;
    align-items: start;
}

.home-proof__intro h2 {
    max-width: 870px;
}

.home-proof__logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: clamp(4rem, 8vw, 8rem);
    border-top: 1px solid var(--refresh-line);
    border-left: 1px solid var(--refresh-line);
}

.home-proof__logo {
    display: grid;
    min-height: 150px;
    padding: 2rem;
    place-items: center;
    border-right: 1px solid var(--refresh-line);
    border-bottom: 1px solid var(--refresh-line);
}

.home-proof__logo img {
    max-width: 150px;
    max-height: 68px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.9;
}

/* Contact */

.project-contact {
    padding-block: var(--refresh-section-space);
    color: var(--refresh-ink);
    border-top: 1px solid var(--refresh-line);
    background: var(--refresh-paper);
}

.project-contact__layout {
    display: grid;
    grid-template-columns: minmax(300px, 0.76fr) minmax(480px, 1.1fr);
    gap: clamp(4rem, 10vw, 10rem);
}

.project-contact__intro {
    position: sticky;
    top: 120px;
    align-self: start;
}

.project-contact__intro > p:not(.eyebrow) {
    max-width: 520px;
    margin: 1.8rem 0 0;
    font-size: 1.08rem;
}

.project-contact__direct {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(24, 24, 23, 0.28);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.project-contact__direct a {
    width: max-content;
    color: var(--refresh-ink);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-decoration: none;
    text-transform: none;
}

.project-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.project-form__field {
    margin-bottom: 1.6rem;
}

.project-form label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.project-form input,
.project-form select,
.project-form textarea {
    width: 100%;
    padding: 0.85rem 0;
    color: var(--refresh-ink);
    border: 0;
    border-bottom: 1px solid rgba(24, 24, 23, 0.38);
    border-radius: 0;
    outline: none;
    background: transparent;
    font: inherit;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.project-form select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 10px) 50%, calc(100% - 5px) 50%;
    background-repeat: no-repeat;
    background-size: 5px 5px, 5px 5px;
}

.project-form textarea {
    min-height: 125px;
    resize: vertical;
}

.project-form input::placeholder,
.project-form textarea::placeholder {
    color: rgba(24, 24, 23, 0.62);
}

.project-form input:focus,
.project-form select:focus,
.project-form textarea:focus {
    border-color: var(--refresh-ink);
    box-shadow: 0 2px 0 var(--refresh-ink);
}

.project-form .refresh-button {
    margin-top: 1rem;
}

.form-response-container {
    margin-top: 1.5rem;
    color: var(--refresh-ink);
    background: transparent;
    font-weight: 500;
}

/* Work index */

.work-index-hero {
    padding-block: clamp(7rem, 11vw, 11rem) clamp(5rem, 9vw, 9rem);
    color: var(--refresh-ink);
    border-bottom: 1px solid var(--refresh-line);
    background: var(--refresh-white);
}

.work-index-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.62fr);
    gap: clamp(3rem, 9vw, 9rem);
    align-items: end;
}

.work-index-hero h1 {
    max-width: 980px;
    margin: 0;
    color: var(--refresh-ink);
    font-family: var(--font-body);
    font-size: clamp(3.4rem, 7.2vw, 7.6rem);
    font-weight: 500;
    line-height: 0.94;
    letter-spacing: -0.07em;
    text-wrap: balance;
}

.work-index-hero__aside p {
    max-width: 520px;
    margin: 0;
    color: rgba(24, 24, 23, 0.7);
    font-size: clamp(1.05rem, 1.55vw, 1.25rem);
}

.work-index-hero__aside .refresh-text-link {
    margin-top: 1.75rem;
}

.work-section-heading {
    margin-bottom: clamp(3.5rem, 7vw, 6.5rem);
}

.work-section-heading h2,
.work-archive__header h2,
.work-case__section-heading h2,
.work-case__details h2,
.work-related__heading h2 {
    max-width: 850px;
    margin: 0;
    color: var(--refresh-ink);
    font-family: var(--font-body);
    font-size: clamp(2.5rem, 4.8vw, 5.25rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.06em;
    text-wrap: balance;
}

.work-featured {
    background: var(--refresh-white);
}

.work-featured__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(3.5rem, 7vw, 7rem) clamp(1.25rem, 3vw, 3rem);
}

.work-feature--1 {
    grid-column: 1 / span 8;
}

.work-feature--2 {
    grid-column: 9 / span 4;
    padding-top: clamp(4rem, 10vw, 10rem);
}

.work-feature--3 {
    grid-column: 1 / span 5;
}

.work-feature--4 {
    grid-column: 7 / span 6;
    padding-top: clamp(3rem, 8vw, 7rem);
}

.work-feature__link,
.work-feature__link:visited,
.work-card__link,
.work-card__link:visited {
    display: block;
    color: var(--refresh-ink);
    text-decoration: none;
}

.work-feature__media,
.work-card__media {
    position: relative;
    overflow: hidden;
    background: var(--refresh-paper-deep);
}

.work-feature__media {
    aspect-ratio: 4 / 3;
}

.work-feature--1 .work-feature__media {
    aspect-ratio: 16 / 9;
}

.work-feature--2 .work-feature__media {
    aspect-ratio: 4 / 5;
}

.work-feature--widescreen .work-feature__media {
    aspect-ratio: 16 / 9;
}

.work-feature--poster .work-feature__media {
    aspect-ratio: 2 / 3;
}

.work-feature__media img,
.work-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.work-feature--poster .work-feature__media img {
    object-fit: contain;
}

.work-card--poster .work-card__media {
    display: grid;
    padding: clamp(0.65rem, 1.2vw, 1rem);
    place-items: center;
    background: var(--refresh-ink);
}

.work-card--poster .work-card__media img {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.32);
}

.work-feature__link:hover img,
.work-feature__link:focus img,
.work-card__link:hover img,
.work-card__link:focus img {
    transform: scale(1.025);
}

.work-feature__media > span {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    color: var(--refresh-ink);
    background: var(--refresh-white);
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.work-feature__copy,
.work-card__copy {
    position: relative;
    padding: 1.25rem 2.5rem 0 0;
}

.work-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin: 0 0 0.65rem;
    color: rgba(24, 24, 23, 0.58);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.work-feature h3,
.work-card h3 {
    margin: 0;
    color: var(--refresh-ink);
    font-size: clamp(1.45rem, 2.6vw, 2.5rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.work-feature__copy > p:not(.work-card__meta) {
    display: -webkit-box;
    max-width: 640px;
    margin: 0.8rem 0 0;
    overflow: hidden;
    color: rgba(24, 24, 23, 0.68);
    font-size: 0.96rem;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.work-card__arrow {
    position: absolute;
    top: 1.45rem;
    right: 0;
    font-size: 1.2rem;
    transition: transform 180ms ease;
}

.work-feature__link:hover .work-card__arrow,
.work-feature__link:focus .work-card__arrow,
.work-card__link:hover .work-card__arrow,
.work-card__link:focus .work-card__arrow {
    transform: translate(0.2rem, -0.2rem);
}

.work-archive {
    border-block: 1px solid var(--refresh-line);
    background: var(--refresh-white);
}

.work-archive__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.55fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: end;
}

.work-archive__header > p {
    max-width: 520px;
    margin: 0;
    color: rgba(24, 24, 23, 0.68);
}

.work-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-block: clamp(3rem, 6vw, 5rem);
}

.work-filter {
    padding: 0.7rem 0.95rem;
    color: rgba(24, 24, 23, 0.72);
    border: 1px solid rgba(24, 24, 23, 0.24);
    border-radius: 0;
    background: transparent;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.work-filter:hover,
.work-filter:focus,
.work-filter.is-active {
    color: var(--refresh-white);
    border-color: var(--refresh-ink);
    background: var(--refresh-ink);
}

.work-filter:focus-visible {
    outline: 2px solid var(--refresh-teal-dark);
    outline-offset: 3px;
}

.work-archive__grid,
.work-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 3vw, 3rem);
}

.work-card[hidden] {
    display: none;
}

.work-card__media {
    aspect-ratio: 16 / 9;
}

.work-card__copy {
    padding-right: 2rem;
}

.work-card h3 {
    font-size: clamp(1.3rem, 1.9vw, 1.8rem);
}

.work-card__role {
    margin: 0.75rem 0 0;
    color: rgba(24, 24, 23, 0.62);
    font-size: 0.88rem;
    line-height: 1.5;
}

/* Work case studies */

.work-case {
    color: var(--refresh-ink);
    background: var(--refresh-white);
}

.work-case__intro {
    padding-block: clamp(4.5rem, 8vw, 8rem) var(--refresh-section-space);
    border-bottom: 1px solid var(--refresh-line);
}

.work-case__back,
.work-case__back:visited {
    display: inline-flex;
    gap: 0.65rem;
    align-items: center;
    margin-bottom: clamp(3.5rem, 7vw, 6.5rem);
    color: rgba(24, 24, 23, 0.68);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
}

.work-case__back:hover,
.work-case__back:focus {
    color: var(--refresh-teal-dark);
}

.work-case__intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.55fr);
    gap: clamp(4rem, 10vw, 10rem);
    align-items: end;
}

.work-case__heading h1 {
    max-width: 980px;
    margin: 0;
    color: var(--refresh-ink);
    font-family: var(--font-body);
    font-size: clamp(3.2rem, 6.8vw, 7rem);
    font-weight: 500;
    line-height: 0.94;
    letter-spacing: -0.07em;
    text-wrap: balance;
}

.work-case__summary {
    max-width: 800px;
    margin: 2rem 0 0;
    color: rgba(24, 24, 23, 0.72);
    font-size: clamp(1.08rem, 1.7vw, 1.35rem);
    line-height: 1.6;
}

.work-case__facts {
    margin: 0;
    border-top: 1px solid var(--refresh-line);
}

.work-case__facts div {
    padding-block: 1rem;
    border-bottom: 1px solid var(--refresh-line);
}

.work-case__facts dt {
    margin-bottom: 0.25rem;
    color: rgba(24, 24, 23, 0.5);
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.work-case__facts dd {
    margin: 0;
    color: var(--refresh-ink);
    font-size: 0.96rem;
    line-height: 1.45;
}

.work-case__media {
    position: relative;
    margin-top: clamp(4rem, 8vw, 8rem);
    overflow: hidden;
    background: var(--refresh-ink);
}

.work-case__media iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

.work-case__media img {
    display: block;
    width: 100%;
    height: auto;
}

/* Vertical films sit beside the case study rather than inside a wide video stage. */
.work-case__intro--short .home-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    column-gap: clamp(3rem, 7vw, 7rem);
    align-items: center;
}

.work-case__intro--short .work-case__back {
    grid-column: 1 / -1;
}

.work-case__intro--short .work-case__intro-grid {
    display: block;
    grid-column: 1;
    grid-row: 2;
}

.work-case__intro--short .work-case__heading h1 {
    font-size: clamp(3.2rem, 5.4vw, 5.8rem);
}

.work-case__intro--short .work-case__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.work-case__intro--short .work-case__facts div:nth-child(odd) {
    padding-right: 1.5rem;
}

.work-case__intro--short .work-case__facts div:nth-child(even) {
    padding-left: 1.5rem;
    border-left: 1px solid var(--refresh-line);
}

.work-case__intro--short .work-case__media--short {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    width: 100%;
    max-width: 420px;
    margin-top: 0;
    padding: 0;
    background: transparent;
}

.work-case__media--short iframe {
    width: 100%;
    aspect-ratio: 9 / 16;
}

.work-case__solution {
    border-top: 1px solid var(--refresh-line);
    background: var(--refresh-white);
}

.work-case__solution-heading,
.work-case__solution-step-copy {
    display: grid;
    grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
    gap: clamp(3rem, 8vw, 8rem);
}

.work-case__solution-heading h2 {
    max-width: 900px;
    margin: 0;
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.065em;
}

.work-case__solution-heading p:not(.eyebrow) {
    max-width: 720px;
    margin: 1.5rem 0 0;
    color: rgba(24, 24, 23, 0.68);
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    line-height: 1.55;
}

.work-case__solution-step {
    margin-top: clamp(4rem, 8vw, 7rem);
    padding-top: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--refresh-line);
}

.work-case__solution-step-copy h3 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.75rem);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.055em;
}

.work-case__solution-step-copy p:not(.eyebrow) {
    max-width: 780px;
    margin: 1.25rem 0 0;
    color: rgba(24, 24, 23, 0.7);
    font-size: 1.06rem;
    line-height: 1.65;
}

.work-case__screens {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
    margin-top: clamp(2rem, 4vw, 3.5rem);
}

.work-case__screens--single {
    grid-template-columns: minmax(0, 1fr);
}

.work-case__screen {
    min-width: 0;
    margin: 0;
}

.work-case__screen img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--refresh-line);
}

.work-case__screen figcaption {
    margin-top: 0.9rem;
    color: rgba(24, 24, 23, 0.64);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-align: left;
    text-transform: uppercase;
}

.work-case__image-trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.work-case__image-trigger:focus-visible {
    outline: 3px solid var(--refresh-teal-dark);
    outline-offset: -4px;
}

.work-case__image-modal .modal-dialog {
    width: max-content;
    max-width: calc(100vw - 2rem);
    margin: 1rem auto;
}

.work-case__image-modal .modal-content {
    position: relative;
    width: auto;
    max-width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.work-case__image-modal img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(1400px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    object-fit: contain;
}

.work-case__image-modal-close {
    position: absolute;
    z-index: 2;
    top: 0.75rem;
    right: 0.75rem;
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, 0.76);
    cursor: pointer;
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 1;
    transition: opacity 160ms ease, background-color 160ms ease;
}

.work-case__image-modal-close:hover,
.work-case__image-modal-close:focus-visible {
    background: #000;
}

@media (hover: hover) {
    .work-case__image-modal-close {
        opacity: 0;
        pointer-events: none;
    }

    .work-case__image-modal .modal-content:hover .work-case__image-modal-close,
    .work-case__image-modal .modal-content:focus-within .work-case__image-modal-close {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (max-width: 900px) {
    .work-case__solution-heading,
    .work-case__solution-step-copy {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

@media (max-width: 700px) {
    .work-case__screens {
        grid-template-columns: 1fr;
    }
}

.work-case__process {
    margin-top: clamp(3rem, 6vw, 6rem);
    margin-bottom: clamp(3rem, 6vw, 6rem);
}

.work-case__process img {
    display: block;
    width: 100%;
    height: auto;
}

.work-case__process-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.55fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: end;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
    padding-top: clamp(2rem, 4vw, 3.5rem);
    border-top: 1px solid var(--refresh-line);
}

.work-case__process-heading h2 {
    margin: 1rem 0 0;
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.065em;
}

.work-case__process-heading > p {
    max-width: 26rem;
    margin: 0;
    color: rgba(24, 24, 23, 0.68);
    font-size: 1rem;
    line-height: 1.6;
}

.work-case__storyboard figure {
    margin: 0;
}

.work-case__storyboard img {
    aspect-ratio: 16 / 9;
    object-fit: contain;
}

.work-case__storyboard figcaption {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.work-case__storyboard-controls {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    border-top: 1px solid var(--refresh-line);
}

.work-case__storyboard-controls button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0.5rem;
    border: 0;
    color: var(--refresh-ink);
    background: transparent;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.work-case__storyboard-controls button:hover,
.work-case__storyboard-controls button:focus-visible {
    color: var(--refresh-teal-dark);
}

@media (max-width: 700px) {
    .work-case__process-heading {
        grid-template-columns: 1fr;
    }
}

.work-case__process figcaption {
    margin-top: 0.85rem;
    color: rgba(24, 24, 23, 0.62);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.work-case__companion {
    border-top: 1px solid var(--refresh-line);
    background: var(--refresh-paper-deep);
}

.work-case__companion-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
    gap: clamp(3rem, 9vw, 9rem);
    align-items: center;
}

.work-case__companion-copy h2 {
    max-width: 10ch;
    margin: 1.5rem 0 0;
    font-size: clamp(3rem, 5.5vw, 6rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.065em;
}

.work-case__companion-copy > p:last-child {
    max-width: 35rem;
    margin: 2rem 0 0;
    color: rgba(24, 24, 23, 0.72);
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    line-height: 1.65;
}

.work-case__companion-art {
    width: min(100%, 480px);
    margin: 0;
    justify-self: end;
}

.work-case__companion-art img {
    display: block;
    width: 100%;
    height: auto;
}

.work-case__companion-art figcaption {
    margin-top: 0.85rem;
    color: rgba(24, 24, 23, 0.62);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-align: left;
    text-transform: uppercase;
}

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

    .work-case__companion-art {
        justify-self: start;
    }
}

.work-case__connection {
    padding: clamp(4rem, 8vw, 7rem) 0;
    border-block: 1px solid var(--refresh-line);
    background: var(--refresh-paper-deep);
}

.work-case__connection-grid {
    display: grid;
    grid-template-columns: minmax(12rem, 0.5fr) minmax(0, 1fr);
    gap: clamp(2rem, 7vw, 7rem);
}

.work-case__connection h2 {
    margin: 0;
    font-size: clamp(2.4rem, 5vw, 5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.06em;
}

.work-case__connection p:not(.eyebrow) {
    max-width: 42rem;
    margin: 1.3rem 0 1.8rem;
    color: rgba(24, 24, 23, 0.7);
    font-size: 1.1rem;
    line-height: 1.55;
}

@media (max-width: 700px) {
    .work-case__connection-grid {
        grid-template-columns: 1fr;
    }
}

.work-case__media--poster {
    display: grid;
    padding: clamp(2rem, 6vw, 6rem);
    place-items: center;
    background: var(--refresh-paper-deep);
}

.work-case__media--poster img {
    width: min(100%, 560px);
    box-shadow: 0 1.5rem 4rem rgba(24, 24, 23, 0.14);
}

/* Film projects with vertical key art use an editorial split hero rather than
   presenting the poster inside a full-width landscape stage. */
.work-case__intro--poster .home-shell {
    display: grid;
    grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
    column-gap: clamp(3.5rem, 7vw, 7rem);
    align-items: start;
}

.work-case__intro--poster .work-case__back {
    grid-column: 1 / -1;
}

.work-case__intro--poster .work-case__intro-grid {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 0.5fr);
    gap: clamp(2.5rem, 4vw, 4.5rem);
    align-self: center;
}

.work-case__intro--poster .work-case__heading h1 {
    font-size: clamp(3.2rem, 5.6vw, 6rem);
}

.work-case__intro--poster .work-case__media--poster {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-top: 0;
    padding: clamp(1rem, 2vw, 1.75rem);
}

.work-case__intro--poster .work-case__media--poster img {
    width: 100%;
    box-shadow: 0 1rem 3rem rgba(24, 24, 23, 0.12);
}

.work-case__story {
    background: var(--refresh-white);
}

.work-case__section-heading {
    display: grid;
    grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: start;
    margin-bottom: clamp(4rem, 8vw, 7rem);
}

.work-case__section-heading .eyebrow {
    margin-top: 0.65rem;
}

.work-case__chapters {
    border-top: 1px solid var(--refresh-line);
}

.work-case__chapter {
    display: grid;
    grid-template-columns: minmax(220px, 0.48fr) minmax(0, 1fr);
    gap: clamp(3rem, 8vw, 8rem);
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
    border-bottom: 1px solid var(--refresh-line);
}

.work-case__chapter:last-child {
    border-bottom: 0;
}

.work-case__chapter-heading {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 1rem;
    align-items: baseline;
}

.work-case__chapter-heading span {
    color: var(--refresh-teal-dark);
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.14em;
}

.work-case__chapter-heading h3 {
    margin: 0;
    color: var(--refresh-ink);
    font-size: clamp(1.45rem, 2.4vw, 2.2rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.work-case__chapter-body {
    max-width: 760px;
}

.work-case__chapter-body p {
    margin: 0;
    color: rgba(24, 24, 23, 0.72);
    font-size: clamp(1.02rem, 1.4vw, 1.18rem);
    line-height: 1.75;
}

.work-case__details {
    border-block: 1px solid var(--refresh-line);
    background: var(--refresh-white);
}

.work-case__details-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.58fr) minmax(0, 1fr);
    gap: clamp(4rem, 10vw, 10rem);
    align-items: start;
}

.work-case__services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--refresh-line);
    list-style: none;
}

.work-case__services li {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--refresh-line);
    color: rgba(24, 24, 23, 0.76);
    font-size: 0.92rem;
}

.work-case__services li:nth-child(odd) {
    padding-right: 1.5rem;
}

.work-case__services li:nth-child(even) {
    padding-left: 1.5rem;
    border-left: 1px solid var(--refresh-line);
}

.work-case__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    margin-top: 2.5rem;
}

.work-case__share {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-top: 3rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--refresh-line);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.work-case__share span {
    color: rgba(24, 24, 23, 0.46);
}

.work-case__share a,
.work-case__share a:visited {
    color: var(--refresh-ink);
    text-decoration: none;
}

.work-case__share a:hover,
.work-case__share a:focus {
    color: var(--refresh-teal-dark);
}

.work-related {
    background: var(--refresh-white);
}

.work-related__heading {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    align-items: end;
    margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

/* Footer */

.site-footer {
    padding: clamp(4rem, 8vw, 7rem) 0 2rem;
    color: var(--refresh-ink);
    border: 0;
    border-top: 1px solid var(--refresh-line);
    background: var(--refresh-white);
    text-align: left;
}

.site-footer__top {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(4rem, 10vw, 10rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
}

.site-brand--footer,
.site-brand--footer:visited {
    display: inline-flex;
    align-items: baseline;
    gap: 0.65rem;
    color: var(--refresh-ink);
    text-decoration: none;
}

.site-brand--footer .site-brand__logo {
    display: block;
    width: min(100%, 18rem);
    height: auto;
    filter: none;
}

.site-footer__statement p {
    max-width: 600px;
    margin: 2rem 0 0;
    color: var(--refresh-ink);
    font-family: var(--font-body);
    font-size: clamp(2.3rem, 5vw, 4.8rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.065em;
}

.site-footer__nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

.site-footer h2 {
    margin: 0 0 1.3rem;
    color: rgba(24, 24, 23, 0.62);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.site-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer li + li {
    margin-top: 0.7rem;
}

.site-footer a,
.site-footer a:visited {
    color: rgba(24, 24, 23, 0.72);
    text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--refresh-teal-dark);
}

.site-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--refresh-line);
    color: rgba(24, 24, 23, 0.62);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.site-footer__bottom p {
    margin: 0;
}

.site-footer__social {
    display: flex;
    gap: 1.5rem;
}

/* Reel */

.reel-page {
    overflow: clip;
}

.reel-page__hero {
    padding-block: clamp(7rem, 11vw, 11rem) clamp(3.5rem, 6vw, 6rem);
    background: var(--refresh-white);
}

.reel-page__hero h1 {
    max-width: 1100px;
    margin: 0;
    color: var(--refresh-ink);
    font-size: clamp(3.5rem, 7vw, 7rem);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.07em;
    text-wrap: balance;
}

.reel-page__hero p:not(.eyebrow) {
    max-width: 720px;
    margin: 2rem 0 0;
    color: rgba(24, 24, 23, 0.7);
    font-size: clamp(1.05rem, 1.55vw, 1.25rem);
}

.reel-page__screen {
    padding-block: clamp(2rem, 4vw, 4rem);
    background: var(--refresh-ink);
}

.reel-page__entry + .reel-page__entry {
    margin-top: clamp(4rem, 7vw, 7rem);
    padding-top: clamp(3rem, 5vw, 5rem);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.reel-page__heading {
    width: min(100%, 1200px);
    margin: 0 auto clamp(1.75rem, 3vw, 3rem);
    color: var(--refresh-white);
}

.reel-page__heading .eyebrow {
    margin-bottom: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.reel-page__heading h2 {
    margin: 0;
    font-size: clamp(1.7rem, 3vw, 3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.reel-page__heading-lead {
    max-width: 760px;
    margin: 1.5rem 0 0;
    color: var(--refresh-white);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.35;
}

.reel-page__heading-copy {
    max-width: 760px;
    margin: 0.6rem 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(1rem, 1.2vw, 1.12rem);
    line-height: 1.6;
}

.reel-page__frame {
    width: min(100%, 1200px);
    margin-inline: auto;
    aspect-ratio: 2 / 1;
    background: #000;
}

.reel-page__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.reel-page__next {
    background: var(--refresh-paper-deep);
}

.reel-page__next-layout {
    display: grid;
    grid-template-columns: minmax(180px, 0.4fr) minmax(0, 1fr);
    gap: clamp(3rem, 8vw, 8rem);
}

.reel-page__next h2 {
    max-width: 850px;
    margin: 0;
    font-size: clamp(2.5rem, 4.8vw, 5.25rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.06em;
    text-wrap: balance;
}

.reel-page__next-layout > div > p {
    max-width: 650px;
    margin: 1.7rem 0 0;
    color: rgba(24, 24, 23, 0.7);
    font-size: 1.08rem;
}

.reel-page__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin-top: 2rem;
}

/* Services */

.services-page {
    overflow: clip;
}

.services-hero {
    padding-block: clamp(7rem, 11vw, 11rem) clamp(5rem, 9vw, 9rem);
    border-bottom: 1px solid var(--refresh-line);
    background: var(--refresh-white);
}

.services-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(290px, 0.58fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: end;
}

.services-hero h1 {
    max-width: 970px;
    margin: 0;
    color: var(--refresh-ink);
    font-family: var(--font-body);
    font-size: clamp(3.5rem, 6.8vw, 7rem);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.07em;
    text-wrap: balance;
}

.services-hero__layout > div > p:not(.eyebrow) {
    max-width: 720px;
    margin: 2rem 0 0;
    color: rgba(24, 24, 23, 0.7);
    font-size: clamp(1.05rem, 1.55vw, 1.25rem);
}

.services-hero__nav {
    border-top: 1px solid var(--refresh-line);
}

.services-hero__nav a,
.services-hero__nav a:visited {
    display: grid;
    grid-template-columns: 2.3rem minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: baseline;
    padding-block: 1.2rem;
    color: var(--refresh-ink);
    border-bottom: 1px solid var(--refresh-line);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.services-hero__nav a:hover,
.services-hero__nav a:focus {
    color: var(--refresh-teal-dark);
}

.services-hero__nav a span:first-child {
    color: var(--refresh-teal-dark);
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.14em;
}

.services-section-heading {
    display: grid;
    grid-template-columns: minmax(180px, 0.4fr) minmax(0, 1fr);
    gap: clamp(3rem, 8vw, 8rem);
}

.services-section-heading > .eyebrow {
    margin-top: 0.65rem;
}

.services-section-heading h2,
.services-service-copy h2 {
    max-width: 820px;
    margin: 0;
    color: inherit;
    font-family: var(--font-body);
    font-size: clamp(2.5rem, 4.8vw, 5.25rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.06em;
    text-wrap: balance;
}

.services-section-heading > div > p {
    max-width: 690px;
    margin: 1.7rem 0 0;
    color: rgba(24, 24, 23, 0.7);
    font-size: 1.08rem;
}

.services-production {
    background: var(--refresh-white);
}

.services-production__feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: center;
    margin-top: clamp(4rem, 7vw, 7rem);
}

.services-production__feature figure,
.services-service-media {
    margin: 0;
}

.services-production__feature figure {
    width: min(100%, 650px);
}

.services-production__feature img,
.services-service-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.services-production__feature figcaption,
.services-service-media figcaption {
    padding-top: 0.8rem;
    color: rgba(24, 24, 23, 0.56);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.services-production__feature > div > p {
    max-width: 540px;
    margin: 1.2rem 0 0;
    color: rgba(24, 24, 23, 0.7);
}

.services-production__feature > div > .services-feature__lead {
    margin-top: 0;
    color: var(--refresh-ink);
    font-size: clamp(1.5rem, 2.4vw, 2.2rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.04em;
}

.services-production__feature .refresh-text-link {
    margin-top: 1.8rem;
}

.services-production__stages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(6rem, 10vw, 10rem);
    border-top: 1px solid var(--refresh-line);
    border-bottom: 1px solid var(--refresh-line);
}

.services-production__stages article {
    padding: clamp(2rem, 3vw, 3rem);
}

.services-production__stages article:first-child {
    padding-left: 0;
}

.services-production__stages article:last-child {
    padding-right: 0;
}

.services-production__stages article + article {
    border-left: 1px solid var(--refresh-line);
}

.services-stage__number {
    color: var(--refresh-teal-dark);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.services-production__stages h3 {
    margin: 1.4rem 0 0;
    color: var(--refresh-ink);
    font-size: clamp(1.6rem, 2.4vw, 2.3rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.services-production__stages p {
    min-height: 3.5rem;
    margin: 1rem 0 2rem;
    color: rgba(24, 24, 23, 0.68);
}

.services-production__stages ul,
.services-service-scope {
    margin: 0;
    padding: 0;
    list-style: none;
}

.services-production__stages li {
    padding-block: 0.7rem;
    border-top: 1px solid var(--refresh-line);
    color: var(--refresh-ink);
    font-size: 0.9rem;
}

.services-sound {
    color: var(--refresh-white);
    background: var(--refresh-ink);
}

.services-planning {
    color: var(--refresh-ink);
    background: var(--refresh-paper-deep);
}

.services-camera {
    color: var(--refresh-ink);
    background: var(--refresh-white);
}

.services-post {
    color: var(--refresh-ink);
    border-bottom: 1px solid var(--refresh-line);
    background: var(--refresh-white);
}

.services-service-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: clamp(4rem, 10vw, 10rem);
    align-items: center;
}

.services-service-layout--post {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
}

.services-service-layout--camera {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
}

.services-service-copy > p:not(.eyebrow) {
    max-width: 650px;
    margin: 1.35rem 0 0;
    color: rgba(24, 24, 23, 0.7);
}

.services-sound .services-service-copy > p:not(.eyebrow) {
    color: rgba(255, 255, 255, 0.72);
}

.services-service-copy > p.services-service-copy__lead,
.services-sound .services-service-copy > p.services-service-copy__lead {
    margin-top: 2rem;
    color: inherit;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.4;
}

.services-service-scope {
    max-width: 650px;
    margin-top: 2.5rem;
    border-top: 1px solid var(--refresh-line);
}

.services-service-scope li {
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--refresh-line);
    font-size: 0.92rem;
}

.services-service-scope--detailed li {
    padding-block: 1rem;
}

.services-service-scope--detailed strong,
.services-service-scope--detailed li > span {
    display: block;
}

.services-service-scope--detailed strong {
    color: var(--refresh-ink);
    font-weight: 600;
}

.services-service-scope--detailed li > span {
    margin-top: 0.35rem;
    color: rgba(24, 24, 23, 0.66);
    line-height: 1.5;
}

.services-sound .services-service-scope,
.services-sound .services-service-scope li {
    border-color: rgba(255, 255, 255, 0.23);
}

.services-service-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}

.services-service-copy > .refresh-text-link,
.services-service-links {
    margin-top: 2.2rem;
}

.services-sound .services-service-media figcaption {
    color: rgba(255, 255, 255, 0.7);
}

.services-beyond {
    padding-block: clamp(5rem, 9vw, 9rem);
    color: var(--refresh-white);
    background: var(--refresh-ink);
}

.services-beyond__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
    gap: clamp(4rem, 10vw, 10rem);
    align-items: start;
}

.services-beyond__intro h2 {
    max-width: 620px;
    margin: 0;
    font-size: clamp(2.25rem, 3.8vw, 4rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.06em;
    text-wrap: balance;
}

.services-beyond__intro > p:not(.eyebrow) {
    max-width: 580px;
    margin: 1.6rem 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.08rem;
}

.services-beyond__work {
    border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.services-beyond__work article {
    padding-block: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

.services-beyond__label {
    margin: 0 0 0.8rem;
    color: var(--refresh-mint);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.services-beyond__work h3 {
    margin: 0;
    color: var(--refresh-white);
    font-size: clamp(1.65rem, 2.5vw, 2.4rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.services-beyond__work article > p:not(.services-beyond__label) {
    max-width: 630px;
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, 0.72);
}

.services-beyond__work article > .refresh-text-link,
.services-beyond__links {
    margin-top: 1.5rem;
}

.services-beyond__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}

.services-throughline {
    color: var(--refresh-ink);
    background: var(--refresh-paper-deep);
}

.services-throughline__layout {
    display: grid;
    grid-template-columns: minmax(180px, 0.4fr) minmax(0, 1fr);
    gap: clamp(3rem, 8vw, 8rem);
}

.services-throughline h2 {
    max-width: 900px;
    margin: 0;
    font-size: clamp(2.5rem, 4.8vw, 5.25rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.06em;
    text-wrap: balance;
}

.services-throughline__layout > div > p {
    max-width: 690px;
    margin: 1.7rem 0 0;
    color: rgba(24, 24, 23, 0.7);
    font-size: 1.08rem;
}

.services-throughline .refresh-text-link {
    margin-top: 2rem;
}

/* About */

.about-page {
    overflow: clip;
}

.about-hero {
    padding-block: clamp(7rem, 11vw, 11rem) clamp(5rem, 9vw, 9rem);
    border-bottom: 1px solid var(--refresh-line);
    background: var(--refresh-white);
}

.about-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: end;
}

.about-hero h1 {
    max-width: 800px;
    margin: 0;
    color: var(--refresh-ink);
    font-family: var(--font-body);
    font-size: clamp(3.5rem, 6.2vw, 6.5rem);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.07em;
    text-wrap: balance;
}

.about-hero__copy > p:not(.eyebrow) {
    max-width: 620px;
    margin: 2rem 0 0;
    color: rgba(24, 24, 23, 0.72);
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}

.about-hero__copy .refresh-text-link {
    margin-top: 2rem;
}

.about-hero__figure,
.about-founder__figure {
    margin: 0;
}

.about-hero__figure img {
    display: block;
    width: 100%;
    aspect-ratio: 8 / 7;
    object-fit: cover;
    object-position: 33% center;
}

.about-hero__figure figcaption,
.about-founder__figure figcaption {
    display: flex;
    justify-content: flex-start;
    gap: 0.7rem;
    padding-top: 0.8rem;
    color: rgba(24, 24, 23, 0.6);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.about-hero__figure figcaption span + span::before,
.about-founder__figure figcaption span + span::before,
.about-practice__images figcaption span + span::before {
    content: "/";
    margin-right: 0.7rem;
    opacity: 0.6;
}

.about-point-of-view {
    background: var(--refresh-paper);
}

.about-point-of-view__layout {
    display: grid;
    grid-template-columns: minmax(180px, 0.45fr) minmax(0, 1fr);
    gap: clamp(3rem, 8vw, 8rem);
}

.about-point-of-view__layout > .eyebrow {
    margin-top: 0.7rem;
}

.about-point-of-view h2,
.about-practice h2,
.about-founder h2,
.about-collaborators h2 {
    max-width: 850px;
    margin: 0;
    color: inherit;
    font-family: var(--font-body);
    font-size: clamp(2.5rem, 4.8vw, 5.25rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.06em;
    text-wrap: balance;
}

.about-point-of-view__layout > div > p {
    max-width: 700px;
    margin: 1.35rem 0 0;
    color: rgba(24, 24, 23, 0.7);
    font-size: 1.05rem;
}

.about-point-of-view__layout > div > .about-point-of-view__lead {
    margin-top: 2.1rem;
    color: var(--refresh-ink);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    line-height: 1.42;
}

.about-practice {
    color: var(--refresh-white);
    background: var(--refresh-ink);
}

.about-practice__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.05fr);
    gap: clamp(4rem, 10vw, 10rem);
    align-items: start;
}

.about-practice__intro > p:not(.eyebrow) {
    max-width: 540px;
    margin: 1.8rem 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.06rem;
}

.about-practice__intro .refresh-text-link {
    margin-top: 2rem;
}

.about-practice__list {
    border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.about-practice__list article {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 1.5rem;
    padding-block: 2.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

.about-practice__list article > span {
    padding-top: 0.35rem;
    color: var(--refresh-mint);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
}

.about-practice__list h3 {
    margin: 0;
    color: var(--refresh-white);
    font-size: clamp(1.5rem, 2.3vw, 2.25rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.about-practice__list p {
    max-width: 500px;
    margin: 0.8rem 0 0;
    color: rgba(255, 255, 255, 0.7);
}

.about-practice__images {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 3rem);
    margin-top: clamp(4rem, 7vw, 7rem);
}

.about-practice__images figure {
    margin: 0;
}

.about-practice__images img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.about-practice__images figcaption {
    display: flex;
    justify-content: flex-start;
    gap: 0.7rem;
    padding-top: 0.8rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.about-founder {
    background: var(--refresh-white);
}

.about-founder__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    gap: clamp(4rem, 10vw, 10rem);
    align-items: center;
}

.about-founder__figure {
    width: min(100%, 488px);
}

.about-founder__figure img {
    display: block;
    width: 100%;
    height: auto;
}

.about-founder__copy > p:not(.eyebrow) {
    max-width: 650px;
    margin: 1.5rem 0 0;
    color: rgba(24, 24, 23, 0.7);
    font-size: 1.02rem;
}

.about-founder__copy > .about-founder__recognition {
    margin-top: 2.2rem;
    padding-block: 1.2rem;
    border-block: 1px solid var(--refresh-line);
    color: var(--refresh-ink);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.about-founder__recognition span {
    padding-inline: 0.55rem;
    color: var(--refresh-teal-dark);
}

.about-founder__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem 2rem;
    margin-top: 2rem;
}

.about-collaborators {
    border-top: 1px solid var(--refresh-line);
    background: var(--refresh-white);
}

.about-collaborators__heading {
    display: grid;
    grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
    gap: 1.5rem clamp(3rem, 8vw, 8rem);
    align-items: start;
}

.about-collaborators__heading .eyebrow {
    grid-row: span 2;
    margin-top: 0.7rem;
}

.about-collaborators__heading > p:not(.eyebrow) {
    max-width: 570px;
    margin: 0;
    color: rgba(24, 24, 23, 0.7);
    font-size: 1.04rem;
}

.about-collaborators__logos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: clamp(3.5rem, 7vw, 6rem) 0 0;
    padding: 0;
    border-top: 1px solid var(--refresh-line);
    list-style: none;
}

.about-collaborators__logos li {
    display: grid;
    min-height: 145px;
    padding: 2rem;
    place-items: center;
    border-bottom: 1px solid var(--refresh-line);
}

.about-collaborators__logos li:not(:nth-child(4n)) {
    border-right: 1px solid var(--refresh-line);
}

.about-collaborators__logos img {
    display: block;
    width: auto;
    max-width: 150px;
    height: auto;
    max-height: 65px;
    object-fit: contain;
    filter: grayscale(1);
}

/* Responsive */

@media (max-width: 1199.98px) {
    .home-capability {
        grid-template-columns: 52px minmax(210px, 0.8fr) minmax(280px, 1.15fr);
    }

    .home-capability a {
        grid-column: 2 / -1;
        justify-self: start;
    }

    .work-archive__grid,
    .work-related__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    :root {
        --refresh-shell: min(100% - 2.5rem, 1320px);
    }

    .services-hero__layout,
    .reel-page__next-layout,
    .services-section-heading,
    .services-production__feature,
    .services-service-layout,
    .services-service-layout--post,
    .services-service-layout--camera,
    .services-beyond__layout,
    .services-throughline__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 3.5rem;
    }

    .services-service-layout--camera .services-service-copy,
    .services-service-layout--post .services-service-copy {
        order: -1;
    }

    .services-hero__nav {
        max-width: 680px;
    }

    .services-production__stages {
        grid-template-columns: minmax(0, 1fr);
    }

    .services-production__stages article,
    .services-production__stages article:first-child,
    .services-production__stages article:last-child {
        padding: 2.5rem 0;
    }

    .services-production__stages article + article {
        border-top: 1px solid var(--refresh-line);
        border-left: 0;
    }

    .services-production__stages p {
        min-height: 0;
    }

    .services-service-media {
        max-width: 680px;
    }

    .about-hero__layout,
    .about-point-of-view__layout,
    .about-practice__layout,
    .about-founder__layout,
    .about-collaborators__heading {
        grid-template-columns: minmax(0, 1fr);
    }

    .about-hero__figure {
        max-width: 760px;
    }

    .about-hero__figure img {
        aspect-ratio: 16 / 9;
    }

    .about-point-of-view__layout,
    .about-practice__layout,
    .about-founder__layout {
        gap: 3.5rem;
    }

    .about-collaborators__heading .eyebrow {
        grid-row: auto;
    }

    .site-nav.navbar,
    .site-nav--overlay.navbar.fixed,
    .site-nav--overlay.navbar.scrolled {
        min-height: 72px;
    }

    .site-nav__toggle {
        color: var(--refresh-ink);
    }

    .site-nav--overlay .site-nav__toggle {
        color: var(--refresh-white);
    }

    .site-nav--overlay.fixed .site-nav__toggle,
    .site-nav--overlay.scrolled .site-nav__toggle,
    .site-nav__toggle[aria-expanded="true"] {
        color: var(--refresh-ink);
    }

    .site-nav .navbar-collapse {
        position: fixed !important;
        inset: 0;
        display: flex;
        align-items: center;
        width: 100vw;
        height: 100svh;
        padding: 5.5rem 1.5rem 2rem;
        color: var(--refresh-ink);
        border-top: 1px solid var(--refresh-line);
        background: var(--refresh-white);
        z-index: 1050;
    }

    .site-nav .navbar-collapse:not(.show) {
        display: none;
    }

    .site-nav .navbar-nav {
        width: 100%;
        height: auto;
        align-items: stretch;
        justify-content: center;
        gap: 0;
    }

    .site-nav.navbar .nav-link,
    .site-nav--overlay.navbar .nav-link {
        padding: 0.72rem 0;
        color: var(--refresh-ink);
        font-size: clamp(1.65rem, 6vw, 3rem);
        font-weight: 500;
        letter-spacing: -0.04em;
        text-transform: none;
    }

    .site-nav.navbar .nav-link:not(.site-nav__cta)::after {
        display: none;
    }

    .site-nav.navbar .site-nav__cta,
    .site-nav--overlay.navbar .site-nav__cta {
        width: 100%;
        margin: 1.3rem 0 0;
        padding: 1rem;
        color: var(--refresh-white);
        border-color: var(--refresh-ink);
        background: var(--refresh-ink);
        font-size: 0.75rem;
        letter-spacing: 0.13em;
        text-align: center;
        text-transform: uppercase;
    }

    .home-philosophy .home-shell,
    .home-approach__layout,
    .home-sound__layout,
    .home-beyond__layout,
    .home-capabilities__primary,
    .project-contact__layout {
        grid-template-columns: 1fr;
    }

    .home-philosophy .home-shell,
    .home-sound__layout {
        gap: 4.5rem;
    }

    .home-approach__layout,
    .home-beyond__layout,
    .home-capabilities__primary,
    .project-contact__layout {
        gap: 3.5rem;
    }

    .home-approach__copy {
        max-width: 620px;
        padding-top: 0;
    }

    .home-sound__image-wrap {
        width: 80%;
    }

    .home-beyond__intro {
        position: static;
    }

    .home-capabilities__primary-copy {
        max-width: 720px;
    }

    .home-capability {
        grid-template-columns: 45px 1fr;
    }

    .home-capability p,
    .home-capability a {
        grid-column: 2;
    }

    .home-process {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .home-proof__intro {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .home-proof__logos {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-contact__intro {
        position: static;
    }

    .work-index-hero__layout,
    .work-archive__header,
    .work-case__intro-grid,
    .work-case__section-heading,
    .work-case__details-grid {
        grid-template-columns: 1fr;
    }

    .work-index-hero__layout,
    .work-archive__header,
    .work-case__intro-grid {
        gap: 3rem;
    }

    .work-case__section-heading,
    .work-case__details-grid {
        gap: 3.5rem;
    }

    .work-index-hero__aside p,
    .work-archive__header > p {
        max-width: 680px;
    }

    .work-case__facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .work-case__facts div:nth-child(odd) {
        padding-right: 1.5rem;
    }

    .work-case__facts div:nth-child(even) {
        padding-left: 1.5rem;
        border-left: 1px solid var(--refresh-line);
    }

    .work-case__intro--short .home-shell {
        grid-template-columns: 1fr;
    }

    .work-case__intro--short .work-case__intro-grid,
    .work-case__intro--short .work-case__media--short {
        grid-column: 1;
        grid-row: auto;
    }

    .work-case__intro--short .work-case__media--short {
        justify-self: center;
        width: min(100%, 420px);
        margin-top: clamp(3rem, 6vw, 4rem);
    }

    .work-case__intro--poster .home-shell {
        display: block;
    }

    .work-case__intro--poster .work-case__intro-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .work-case__intro--poster .work-case__media--poster {
        width: min(100%, 520px);
        margin: 4rem auto 0;
    }
}

@media (max-width: 767.98px) {
    :root {
        --refresh-shell: min(100% - 2rem, 1320px);
        --refresh-section-space: 6.25rem;
    }

    .services-hero {
        padding-block: 5rem 6rem;
    }

    .reel-page__hero {
        padding-block: 5rem 3.5rem;
    }

    .reel-page__hero h1 {
        font-size: clamp(2.8rem, 13vw, 5rem);
        line-height: 0.97;
    }

    .reel-page__next h2 {
        font-size: clamp(2.35rem, 11vw, 4rem);
    }

    .services-hero h1 {
        font-size: clamp(2.8rem, 13vw, 5rem);
        line-height: 0.97;
    }

    .services-section-heading h2,
    .services-service-copy h2,
    .services-throughline h2 {
        font-size: clamp(2.35rem, 11vw, 4rem);
    }

    .services-beyond__intro h2 {
        font-size: clamp(2.2rem, 9vw, 3.5rem);
    }

    .services-hero__nav a {
        grid-template-columns: 1.75rem minmax(0, 1fr) auto;
        gap: 0.7rem;
    }

    .about-hero {
        padding-block: 5rem 6rem;
    }

    .about-hero h1 {
        font-size: clamp(2.8rem, 13vw, 5rem);
        line-height: 0.97;
    }

    .about-hero__layout {
        gap: 3.5rem;
    }

    .about-hero__figure img {
        aspect-ratio: 4 / 3;
    }

    .about-point-of-view h2,
    .about-practice h2,
    .about-founder h2,
    .about-collaborators h2 {
        font-size: clamp(2.35rem, 11vw, 4rem);
    }

    .about-collaborators__logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-practice__images {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .about-collaborators__logos li {
        min-height: 115px;
        padding: 1.3rem;
    }

    .about-collaborators__logos li:nth-child(even) {
        border-right: 0;
    }

    .about-collaborators__logos li:nth-child(odd) {
        border-right: 1px solid var(--refresh-line);
    }

    .about-collaborators__logos img {
        max-width: 115px;
        max-height: 45px;
    }

    .home-hero {
        min-height: max(650px, 100svh);
        background-position: 58% center;
    }

    .site-nav.navbar .navbar-brand .site-brand__logo {
        width: 9.75rem;
    }

    .home-hero__content {
        padding-block: 7rem 2rem;
    }

    .home-hero h1 {
        font-size: clamp(2.35rem, 11.4vw, 4.3rem);
        line-height: 0.92;
    }

    .home-hero__lede {
        max-width: 480px;
        margin-top: 1.6rem;
        font-size: 1rem;
    }

    .home-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
        margin-top: 1.8rem;
    }

    .home-hero__scroll {
        display: none;
    }

    .home-philosophy__sequence p {
        font-size: clamp(2.45rem, 12vw, 4rem);
    }

    .home-philosophy__statement h2,
    .home-work h2,
    .home-sound h2,
    .home-beyond h2,
    .home-capabilities h2,
    .home-proof h2,
    .project-contact h2 {
        font-size: clamp(2.4rem, 11vw, 4rem);
    }

    .home-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 1.5rem;
        margin-bottom: 3.5rem;
    }

    .home-work__grid {
        display: block;
    }

    .home-project,
    .home-project--2,
    .home-project--4 {
        padding-top: 0;
    }

    .home-project + .home-project {
        margin-top: 3.8rem;
    }

    .home-project--1 .home-project__image-wrap,
    .home-project--2 .home-project__image-wrap,
    .home-project--3 .home-project__image-wrap,
    .home-project--4 .home-project__image-wrap {
        aspect-ratio: 4 / 3;
    }

    .home-project--poster .home-project__image-wrap {
        aspect-ratio: 2 / 3;
    }

    .home-project--widescreen .home-project__image-wrap {
        aspect-ratio: 16 / 9;
    }

    .home-project__content {
        padding-right: 2rem;
    }

    .home-project h3 {
        font-size: 1.7rem;
    }

    .home-approach h2 {
        font-size: clamp(2.5rem, 10.5vw, 4rem);
        line-height: 1;
    }

    .home-sound__image-wrap {
        width: 100%;
    }

    .home-beyond__extensions article {
        grid-template-columns: 34px 1fr;
        gap: 0.85rem;
    }

    .home-beyond__extensions article p {
        grid-column: 2;
    }

    .home-capabilities__primary {
        padding-block: 2.5rem;
    }

    .home-capabilities__primary-heading h3 {
        font-size: clamp(3rem, 16vw, 5rem);
    }

    .home-capabilities__heading > p {
        max-width: none;
    }

    .home-capability {
        grid-template-columns: 34px 1fr;
        gap: 0.9rem;
        padding-block: 1.75rem;
    }

    .home-capability p {
        font-size: 0.92rem;
    }

    .home-process {
        gap: 0.65rem;
        font-size: 1.1rem;
    }

    .home-proof__logo {
        min-height: 110px;
        padding: 1.3rem;
    }

    .home-proof__logo img {
        max-width: 110px;
        max-height: 36px;
    }

    .project-form__row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .work-index-hero {
        padding-block: 5rem 6rem;
    }

    .work-index-hero h1,
    .work-case__heading h1 {
        font-size: clamp(2.8rem, 14vw, 5rem);
        line-height: 0.97;
    }

    .work-section-heading h2,
    .work-archive__header h2,
    .work-case__section-heading h2,
    .work-case__details h2,
    .work-related__heading h2 {
        font-size: clamp(2.35rem, 11vw, 4rem);
    }

    .work-featured__grid,
    .work-archive__grid,
    .work-related__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 3.8rem;
    }

    .work-feature,
    .work-feature--2,
    .work-feature--4 {
        grid-column: auto;
        padding-top: 0;
    }

    .work-feature--1 .work-feature__media,
    .work-feature--2 .work-feature__media,
    .work-feature--3 .work-feature__media,
    .work-feature--4 .work-feature__media {
        aspect-ratio: 4 / 3;
    }

    .work-feature--poster .work-feature__media {
        aspect-ratio: 2 / 3;
    }

    .work-feature--widescreen .work-feature__media {
        aspect-ratio: 16 / 9;
    }

    .work-feature__copy {
        padding-right: 2rem;
    }

    .work-filters {
        flex-wrap: nowrap;
        margin-inline: -1rem;
        padding-inline: 1rem;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .work-filter {
        flex: 0 0 auto;
    }

    .work-case__intro {
        padding-block: 3.5rem 6.25rem;
    }

    .work-case__back {
        margin-bottom: 3rem;
    }

    .work-case__facts,
    .work-case__intro--short .work-case__facts {
        display: block;
    }

    .work-case__intro--short .work-case__facts div:nth-child(odd),
    .work-case__intro--short .work-case__facts div:nth-child(even) {
        padding-inline: 0;
        border-left: 0;
    }

    .work-case__facts div:nth-child(odd),
    .work-case__facts div:nth-child(even) {
        padding-inline: 0;
        border-left: 0;
    }

    .work-case__chapter {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

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

    .work-case__services li:nth-child(odd),
    .work-case__services li:nth-child(even) {
        padding-inline: 0;
        border-left: 0;
    }

    .work-related__heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-footer__top {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .site-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Gear and rental inquiries */

.gear-page [hidden] {
    display: none !important;
}

.gear-hero {
    padding-block: clamp(7rem, 11vw, 11rem) clamp(5rem, 9vw, 9rem);
    border-bottom: 1px solid var(--refresh-line);
    background: var(--refresh-white);
}

.gear-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    align-items: end;
    gap: clamp(3rem, 7vw, 7rem);
}

.gear-hero h1 {
    max-width: 790px;
    margin: 0;
    color: var(--refresh-ink);
    font-family: var(--font-body);
    font-size: clamp(3.5rem, 6.2vw, 6.5rem);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.07em;
    text-wrap: balance;
}

.gear-hero__copy > p:not(.eyebrow) {
    max-width: 630px;
    margin: 2rem 0 0;
    color: rgba(24, 24, 23, 0.72);
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}

.gear-hero__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin-top: 2rem;
}

.gear-hero__figure {
    margin: 0;
}

.gear-hero__figure img {
    display: block;
    width: 100%;
    aspect-ratio: 8 / 7;
    object-fit: cover;
    object-position: center;
}

.gear-hero__figure figcaption {
    padding-top: 0.8rem;
    color: rgba(24, 24, 23, 0.6);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.gear-catalog {
    background: var(--refresh-white);
}

.gear-catalog__heading {
    display: grid;
    grid-template-columns: minmax(180px, 0.5fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 6rem);
    align-items: start;
}

.gear-catalog__heading h2 {
    max-width: 830px;
    margin: 0;
    color: var(--refresh-ink);
    font-size: clamp(2.8rem, 5vw, 5.4rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.065em;
    text-wrap: balance;
}

.gear-catalog__heading div > p {
    max-width: 710px;
    margin: 1.6rem 0 0;
    color: rgba(24, 24, 23, 0.72);
    font-size: clamp(1rem, 1.4vw, 1.18rem);
}

.gear-catalog__controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: end;
    gap: 2rem;
    margin-top: clamp(4rem, 7vw, 7rem);
    padding-block: 1.2rem;
    border-top: 1px solid var(--refresh-line);
    border-bottom: 1px solid var(--refresh-line);
}

.gear-catalog__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.gear-catalog__filter {
    padding: 0.58rem 0.8rem;
    color: var(--refresh-ink);
    border: 1px solid transparent;
    background: transparent;
    font: inherit;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1.3;
    text-transform: uppercase;
    cursor: pointer;
}

.gear-catalog__filter:hover,
.gear-catalog__filter:focus-visible,
.gear-catalog__filter[aria-pressed="true"] {
    border-color: var(--refresh-ink);
}

.gear-catalog__filter[aria-pressed="true"] {
    color: var(--refresh-white);
    background: var(--refresh-ink);
}

.gear-catalog__search {
    min-width: min(100%, 250px);
}

.gear-catalog__search label {
    display: block;
    color: var(--refresh-ink);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.gear-catalog__search input {
    display: block;
    width: 100%;
    padding: 0.55rem 0;
    color: var(--refresh-ink);
    border: 0;
    border-bottom: 1px solid var(--refresh-ink);
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-size: 0.9rem;
}

.gear-catalog__search input:focus-visible,
.gear-catalog__filter:focus-visible {
    outline: 2px solid var(--refresh-teal-dark);
    outline-offset: 3px;
}

.gear-catalog__categories {
    margin-top: 2rem;
}

.gear-catalog__category {
    display: grid;
    grid-template-columns: minmax(180px, 0.5fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 6rem);
    padding-block: clamp(3rem, 6vw, 6rem);
    border-bottom: 1px solid var(--refresh-line);
}

.gear-catalog__category-intro h3 {
    max-width: 400px;
    margin: 0;
    color: var(--refresh-ink);
    font-size: clamp(2rem, 3vw, 3.2rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.055em;
}

.gear-catalog__category-intro > p:last-child {
    max-width: 340px;
    margin: 1.3rem 0 0;
    color: rgba(24, 24, 23, 0.7);
}

.gear-catalog__groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 3rem;
}

.gear-catalog__group h4 {
    margin: 0 0 0.7rem;
    color: var(--refresh-teal-dark);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.gear-catalog__items {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gear-catalog__items li {
    padding: 0.65rem 0;
    border-top: 1px solid var(--refresh-line);
    color: var(--refresh-ink);
    font-size: 0.93rem;
    line-height: 1.45;
}

.gear-catalog__empty {
    margin: 3rem 0 0;
    font-size: 1.1rem;
}

.gear-catalog__empty a {
    color: var(--refresh-teal-dark);
}

.gear-rentals {
    padding-block: clamp(5rem, 9vw, 9rem);
    color: var(--refresh-white);
    background: var(--refresh-ink);
}

.gear-rentals__layout {
    display: grid;
    grid-template-columns: minmax(180px, 0.5fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 6rem);
}

.gear-rentals h2 {
    max-width: 850px;
    margin: 0;
    font-size: clamp(2.8rem, 5vw, 5.4rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.065em;
    text-wrap: balance;
}

.gear-rentals__layout > div > p {
    max-width: 700px;
    margin: 1.5rem 0 2rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: clamp(1rem, 1.4vw, 1.18rem);
}

@media (max-width: 991.98px) {
    .gear-hero__layout,
    .gear-catalog__heading,
    .gear-catalog__category,
    .gear-rentals__layout {
        grid-template-columns: 1fr;
    }

    .gear-hero__figure {
        max-width: 760px;
    }

    .gear-catalog__heading,
    .gear-catalog__category,
    .gear-rentals__layout {
        gap: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .gear-catalog__groups {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .gear-catalog__search {
        width: 100%;
    }

    .gear-hero__links {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Privacy policy and Production Notes */

.privacy-page__hero,
.notes-archive__hero,
.notes-article__hero {
    padding-block: clamp(7rem, 11vw, 11rem) clamp(4rem, 7vw, 7rem);
    border-bottom: 1px solid var(--refresh-line);
    background: var(--refresh-white);
}

.privacy-page__hero-layout,
.notes-archive__hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.75fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: end;
}

.privacy-page__hero h1,
.notes-archive__hero h1,
.notes-article__hero h1 {
    max-width: 940px;
    margin: 0;
    color: var(--refresh-ink);
    font-family: var(--font-body);
    font-size: clamp(3.5rem, 6.8vw, 7rem);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.07em;
    text-wrap: balance;
}

.privacy-page__hero-copy > p,
.notes-archive__hero-layout > p {
    max-width: 620px;
    margin: 0;
    color: rgba(24, 24, 23, 0.72);
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}

.privacy-page__date p {
    margin: 0 0 1.4rem;
    color: var(--refresh-teal-dark);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.privacy-page__layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.38fr) minmax(0, 1fr);
    gap: clamp(4rem, 9vw, 9rem);
    padding-block: clamp(5rem, 9vw, 9rem);
}

.privacy-page__nav {
    position: sticky;
    top: 120px;
    align-self: start;
}

.privacy-page__nav > p {
    margin: 0 0 1.3rem;
    color: var(--refresh-teal-dark);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.privacy-page__nav ol {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--refresh-line);
    list-style: none;
}

.privacy-page__nav li {
    border-bottom: 1px solid var(--refresh-line);
}

.privacy-page__nav a,
.privacy-page__nav a:visited {
    display: grid;
    grid-template-columns: 2.3rem minmax(0, 1fr);
    gap: 0.5rem;
    padding-block: 0.7rem;
    color: var(--refresh-ink);
    font-size: 0.83rem;
    text-decoration: none;
}

.privacy-page__nav a:hover,
.privacy-page__nav a:focus {
    color: var(--refresh-teal-dark);
}

.privacy-page__nav a span {
    color: var(--refresh-teal-dark);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.privacy-page__section {
    padding-block: 2.5rem 3rem;
    border-top: 1px solid var(--refresh-line);
    scroll-margin-top: 110px;
}

.privacy-page__section:first-child {
    padding-top: 0;
    border-top: 0;
}

.privacy-page__section h2 {
    max-width: 760px;
    margin: 0 0 1.5rem;
    color: var(--refresh-ink);
    font-size: clamp(1.7rem, 2.8vw, 2.65rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.045em;
}

.privacy-page__section p,
.privacy-page__section li {
    max-width: 760px;
    color: rgba(24, 24, 23, 0.74);
    font-size: 1.02rem;
    line-height: 1.75;
}

.privacy-page__section p:last-child,
.privacy-page__section ul:last-child {
    margin-bottom: 0;
}

.privacy-page__section li + li {
    margin-top: 0.6rem;
}

.privacy-page__section a,
.privacy-page__section a:visited {
    color: var(--refresh-teal-dark);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.notes-archive__section-heading {
    display: grid;
    grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
    gap: clamp(3rem, 8vw, 8rem);
    margin-bottom: clamp(4rem, 8vw, 7rem);
}

.notes-archive__section-heading h2 {
    max-width: 850px;
    margin: 0;
    color: var(--refresh-ink);
    font-size: clamp(2.5rem, 4.8vw, 5.25rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.06em;
    text-wrap: balance;
}

.notes-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: center;
    padding-block: clamp(3rem, 6vw, 6rem);
    border-top: 1px solid var(--refresh-line);
}

.notes-card:last-child {
    border-bottom: 1px solid var(--refresh-line);
}

.notes-card__image {
    display: block;
    overflow: hidden;
    background: var(--refresh-paper-deep);
}

.notes-card__image img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.notes-card__image:hover img,
.notes-card__image:focus-visible img {
    transform: scale(1.025);
}

.notes-card__copy h3 {
    max-width: 650px;
    margin: 0;
    font-size: clamp(2.4rem, 4.5vw, 5rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.065em;
}

.notes-card__copy h3 a,
.notes-card__copy h3 a:visited {
    color: var(--refresh-ink);
    text-decoration: none;
}

.notes-card__copy h3 a:hover,
.notes-card__copy h3 a:focus {
    color: var(--refresh-teal-dark);
}

.notes-card__subtitle {
    margin: 0.9rem 0 0;
    color: var(--refresh-ink);
    font-size: clamp(1.1rem, 1.7vw, 1.35rem);
}

.notes-card__description {
    max-width: 570px;
    margin: 1.6rem 0 2rem;
    color: rgba(24, 24, 23, 0.72);
    font-size: 1.02rem;
}

.notes-archive__empty {
    padding-top: 2rem;
    border-top: 1px solid var(--refresh-line);
    font-size: 1.1rem;
}

.notes-article__hero {
    border-bottom: 0;
}

.notes-article__hero .home-shell {
    max-width: 1100px;
}

.notes-article__back,
.notes-article__back:visited {
    display: inline-block;
    margin-bottom: clamp(4rem, 7vw, 7rem);
    color: var(--refresh-ink);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-decoration: none;
    text-transform: uppercase;
}

.notes-article__back:hover,
.notes-article__back:focus {
    color: var(--refresh-teal-dark);
}

.notes-article__hero h1 {
    max-width: 1050px;
}

.notes-article__subtitle {
    max-width: 850px;
    margin: 2rem 0 0;
    color: rgba(24, 24, 23, 0.73);
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
}

.notes-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.5rem;
    margin: 2.5rem 0 0;
    color: var(--refresh-teal-dark);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.notes-article__lead-image {
    max-width: 1100px;
    margin-block: 0;
}

.notes-article__lead-image img {
    display: block;
    width: 100%;
    height: auto;
}

.notes-article__layout {
    display: grid;
    grid-template-columns: minmax(190px, 0.38fr) minmax(0, 1fr);
    gap: clamp(3rem, 8vw, 8rem);
    padding-block: clamp(5rem, 9vw, 9rem);
}

.notes-article__aside {
    position: sticky;
    top: 120px;
    align-self: start;
}

.notes-article__aside > p:not(.eyebrow) {
    max-width: 320px;
    margin: 0 0 1.5rem;
    color: rgba(24, 24, 23, 0.68);
    font-size: 1.02rem;
}

.notes-article__body {
    max-width: 780px;
    color: rgba(24, 24, 23, 0.8);
    font-size: 1.05rem;
    line-height: 1.8;
}

.notes-article__body > :first-child {
    margin-top: 0;
}

.notes-article__body p {
    margin: 0 0 1.65rem;
}

.notes-article__body .lead {
    color: var(--refresh-ink);
    font-size: clamp(1.18rem, 1.8vw, 1.45rem);
    line-height: 1.6;
}

.notes-article__body h2,
.notes-article__body h3 {
    color: var(--refresh-ink);
    font-weight: 500;
    letter-spacing: -0.045em;
}

.notes-article__body h2 {
    margin: 3.5rem 0 1.2rem;
    font-size: clamp(1.85rem, 2.8vw, 2.7rem);
    line-height: 1.12;
}

.notes-article__body h3 {
    margin: 2.5rem 0 0.9rem;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.25;
}

.notes-article__body blockquote {
    margin: 3rem 0;
    padding: 1.5rem 2rem;
    border-left: 2px solid var(--refresh-teal-dark);
    background: var(--refresh-paper-deep);
}

.notes-article__body blockquote p {
    margin: 0;
    color: var(--refresh-ink);
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
    font-weight: 500;
    line-height: 1.5;
}

.notes-article__body figure {
    margin: 3rem 0;
}

.notes-article__body figure img {
    display: block;
    width: 100%;
    height: auto;
    float: none;
    margin: 0;
}

.notes-article__body figcaption {
    margin-top: 0.8rem;
    color: rgba(24, 24, 23, 0.62);
    font-size: 0.78rem;
    line-height: 1.5;
    text-align: left;
}

.notes-article__body figcaption p {
    margin: 0;
}

.notes-article__body ul {
    margin: 0 0 2rem;
    padding-left: 1.4rem;
}

.notes-article__body li + li {
    margin-top: 0.4rem;
}

.notes-article__body hr {
    margin-block: 3rem;
    border-color: var(--refresh-line);
    opacity: 1;
}

.notes-article__footer {
    padding-block: clamp(3rem, 6vw, 6rem);
    border-top: 1px solid var(--refresh-line);
    background: var(--refresh-paper-deep);
}

.notes-article__footer-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: end;
    gap: 2.5rem;
}

.notes-article__share {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 2rem;
}

.notes-article__share a,
.notes-article__share a:visited {
    color: var(--refresh-ink);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.notes-article__share a:hover,
.notes-article__share a:focus {
    color: var(--refresh-teal-dark);
}

@media (max-width: 991.98px) {
    .privacy-page__hero-layout,
    .notes-archive__hero-layout,
    .privacy-page__layout,
    .notes-archive__section-heading,
    .notes-card,
    .notes-article__layout {
        grid-template-columns: 1fr;
    }

    .privacy-page__nav,
    .notes-article__aside {
        position: static;
    }

    .privacy-page__nav ol {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2rem;
    }

    .notes-card {
        align-items: start;
    }

    .notes-card__copy {
        max-width: 700px;
    }
}

@media (max-width: 575.98px) {
    .privacy-page__hero,
    .notes-archive__hero,
    .notes-article__hero {
        padding-block: 5rem 4rem;
    }

    .privacy-page__nav ol {
        grid-template-columns: 1fr;
    }

    .privacy-page__section {
        padding-block: 2.2rem;
    }

    .notes-article__body blockquote {
        padding: 1.3rem 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .home-hero__video {
        display: none;
    }
}

/* Hosted videos wait for a visitor's click before loading the player. */
.video-load {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111;
    color: #fff;
    text-align: center;
    text-decoration: none;
}

.video-load:visited,
.video-load:hover,
.video-load:focus-visible {
    color: #fff;
    text-decoration: none;
}

.video-load img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.75;
}

.video-load::after {
    position: absolute;
    inset: 0;
    content: '';
    background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.6));
    pointer-events: none;
}

.video-load__button,
.video-load__label {
    position: relative;
    z-index: 1;
    grid-area: 1 / 1;
}

.video-load__button {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    font-size: 1.45rem;
    transition: transform 180ms ease, background 180ms ease;
}

.video-load:hover .video-load__button,
.video-load:focus-visible .video-load__button {
    transform: scale(1.08);
    background: rgba(0, 0, 0, 0.8);
}

.video-load__label {
    align-self: end;
    padding-bottom: 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.work-case__media--short .video-load {
    aspect-ratio: 9 / 16;
}

.reel-page__frame .video-load,
.reel-page__frame iframe {
    height: 100%;
    aspect-ratio: 2 / 1;
}

.reel-page__frame--sound,
.reel-page__frame--sound .video-load,
.reel-page__frame--sound iframe {
    aspect-ratio: 16 / 9;
}

/* Keep the supplied logo poster unobscured until the visual reel starts. */
.reel-page__frame--visual .video-load img {
    opacity: 1;
}

.reel-page__frame--visual .video-load__button {
    align-self: end;
    justify-self: start;
    margin: 0 0 1.25rem 1.25rem;
}

.reel-page__frame--visual .video-load__label {
    justify-self: end;
    padding-right: 1.5rem;
}

.project-form__privacy {
    margin: 1rem 0 0;
    color: rgba(24, 24, 23, 0.65);
    font-size: 0.78rem;
    line-height: 1.5;
}

.project-form__privacy a {
    color: inherit;
    text-decoration: underline;
}