/* Omni Productions redux: one stylesheet, written for the work to lead.
   Type: Fraunces for headlines, Source Sans 3 for everything else.
   Colour: the brand palette on warm paper, film shown clean, never tinted. */

:root {
    --paper: #FBF8F6;
    --paper-2: #F1ECE8;
    --line: #E3DBD6;
    --ink: #221A20;
    --ink-2: #5A4F56;
    --plum: #2B0225;
    --berry: #4F033A;
    --pink: #9B0167;
    --pink-hot: #ff24ab;
    --green: #019B82;
    --green-light: #2DCBAA;
    --blue: #01669B;
    --blue-light: #4FB4E6;
    --display: "Fraunces", "Source Serif Pro", Georgia, serif;
    --body: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
    --gutter: clamp(20px, 4vw, 56px);
    --section: clamp(64px, 9vw, 128px);
    --max: 1360px;
    --measure: 40rem;
    --radius: 2px;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 1.125rem/1.6 var(--body);
    font-feature-settings: "kern", "liga";
}
img, video, iframe { max-width: 100%; display: block; }
a { color: var(--pink); text-decoration: none; transition: color 200ms var(--ease), text-decoration-color 200ms var(--ease); }
a:hover, a:focus-visible { color: var(--pink-hot); }
/* Links inside running text are underlined so they read as links; navigation, tiles and buttons carry their own cues. */
p a, li a, address a, figcaption a, label a, .lead a { text-decoration: underline; text-decoration-color: rgba(155, 1, 103, 0.45); text-decoration-thickness: 1.5px; text-underline-offset: 0.15em; }
p a:hover, li a:hover, address a:hover, figcaption a:hover, label a:hover, .lead a:hover { text-decoration-color: currentColor; }
.nav a, .footer li a, .chips a, .tile, .btn, .service, .office .links a { text-decoration: none; }
::selection { background: var(--pink); color: #fff; }
.dark ::selection, .hero ::selection, .footer ::selection { background: #fff; color: var(--plum); }
.hero__panel ::selection { background: var(--pink); color: #fff; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.dark :focus-visible { outline-color: #fff; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.5vw, 5rem); line-height: 1.02; font-variation-settings: "opsz" 144; }
h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.1; font-variation-settings: "opsz" 96; }
h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.25; }
h4 { font-family: var(--body); font-weight: 600; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.08em; }
p { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.2em; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding-block: var(--section); }
.dark { background: var(--plum); color: #F5EDF2; }
.dark a { color: #fff; }
.dark a:hover { color: var(--pink-hot); }
.stone { background: var(--paper-2); }
.eyebrow { font: 600 0.85rem/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink); margin: 0 0 1rem; }
.dark .eyebrow { color: var(--pink-hot); }
.lead { font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.45; color: var(--ink-2); max-width: var(--measure); }
.dark .lead { color: #E8D9E3; }
.measure { max-width: var(--measure); }
.lead--after { margin-top: clamp(32px, 4vw, 56px); }
.skip { position: absolute; top: -100px; left: 16px; z-index: 1000; padding: 12px 20px; background: var(--pink); color: #fff; font-weight: 600; }
.skip:focus { top: 16px; color: #fff; }

/* ------------------------------------------------------------- buttons */
.btn {
    display: inline-flex; align-items: center; gap: 0.6em;
    padding: 0.95em 1.6em; border: 2px solid var(--pink); border-radius: var(--radius);
    background: var(--pink); color: #fff; font: 600 1rem/1 var(--body); cursor: pointer;
    transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--berry); border-color: var(--berry); color: #fff; transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: currentColor; }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; }
.dark .btn--ghost { color: #fff; }
.dark .btn--ghost:hover { background: #fff; color: var(--plum); border-color: #fff; }
.btn svg { width: 1em; height: 1em; }

/* -------------------------------------------------------------- header */
.header {
    position: fixed; inset: 0 0 auto 0; z-index: 100;
    transition: background 300ms var(--ease), box-shadow 300ms var(--ease);
}
.header.is-solid, .header.is-open { background: rgba(43, 2, 37, 0.96); box-shadow: 0 1px 0 rgba(255,255,255,0.06); }
.header__bar { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: 76px; }
.header__logo { display: inline-flex; color: #fff; }
.header__logo svg { height: 34px; width: auto; }
.header__logo:hover { color: #fff; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); }
.nav a { color: #fff; font-weight: 600; font-size: 1rem; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px; background: var(--pink-hot); transition: right 250ms var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; }
.nav .btn { padding: 0.7em 1.2em; }
.nav .btn::after { display: none; }
.burger { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 10px; }
.burger span { display: block; height: 2px; background: #fff; margin: 6px 0; transition: transform 250ms var(--ease), opacity 250ms; }
.is-open .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.is-open .burger span:nth-child(2) { opacity: 0; }
.is-open .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 900px) {
    .burger { display: block; }
    .nav { position: fixed; inset: 76px 0 0 0; background: var(--plum); flex-direction: column; justify-content: center; gap: 2rem; transform: translateY(-110%); transition: transform 350ms var(--ease); }
    .is-open .nav { transform: none; }
    .nav a { font-family: var(--display); font-size: 2rem; font-weight: 400; }
    .nav a::after { display: none; }
}

/* ---------------------------------------------------------------- hero
   The film is the hero. It fills the first screen and the words sit on it,
   held legible by a gradient that rises from the bottom edge only. */
.hero { position: relative; display: grid; align-items: end; min-height: 92vh; background: var(--plum); color: #fff; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(43, 2, 37, 0.95) 0%, rgba(43, 2, 37, 0.55) 38%, rgba(43, 2, 37, 0) 72%); }
.hero__content { position: relative; padding: calc(76px + 12vh) 0 clamp(40px, 6vw, 88px); }
.hero__content h1 { max-width: 16ch; margin-bottom: 1rem; text-shadow: 0 2px 30px rgba(43, 2, 37, 0.4); }
.hero .lead { color: #F1E4EC; max-width: 44rem; }
.hero .eyebrow { color: var(--pink-hot); }
.hero .chip { border-color: rgba(255,255,255,0.55); color: #fff; }
.hero .chip:hover, .hero .chip[aria-current="page"] { background: #fff; border-color: #fff; color: var(--plum); }
.hero .btn--ghost { color: #fff; }
.hero .btn--ghost:hover, .hero .btn--ghost:focus-visible { background: #fff; border-color: #fff; color: var(--plum); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; margin-top: 1.8rem; align-items: center; }
.hero--page { min-height: 74vh; }
.hero--page .hero__content h1 { font-size: clamp(2.2rem, 4.4vw, 4rem); max-width: 20ch; }
.hero--text { min-height: 0; padding: calc(76px + clamp(48px, 7vw, 96px)) 0 clamp(40px, 5vw, 64px); }
/* A text header hands over to its content quickly; the big section gap is for between sections. */
.hero--text + .section { padding-top: clamp(40px, 5vw, 64px); }
.hero--text h1 { max-width: 20ch; margin-bottom: 1rem; }
@media (max-width: 700px) { .hero { min-height: 82vh; } .hero--page { min-height: 70vh; } .hero--text { min-height: 0; } }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.chip { display: inline-block; padding: 0.35em 0.85em; border: 1.5px solid var(--pink); border-radius: 999px; color: var(--pink); font: 600 0.85rem/1.2 var(--body); }
.chip:hover, .chip[aria-current="page"] { background: var(--pink); color: #fff; }

/* Animation category header: thin strokes sketch themselves in and fade, one dot bouncing. */
.hero--drawn { overflow: hidden; }
.hero--drawn .wrap { position: relative; z-index: 1; }
.lines { position: absolute; top: 76px; right: 2vw; width: clamp(300px, 40vw, 640px); height: auto; aspect-ratio: 680 / 480; overflow: visible; }
.lines .draw { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 8s ease-in-out infinite; }
.lines .draw:nth-child(2) { animation-delay: -2s; } .lines .draw:nth-child(3) { animation-delay: -4s; } .lines .draw:nth-child(4) { animation-delay: -6s; }
@keyframes draw { 0% { stroke-dashoffset: 600; opacity: 0; } 15% { opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.lines .dot { animation: bounce 2.4s cubic-bezier(0.3, 0, 0.2, 1) infinite alternate; }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-60px); } }
@media (max-width: 700px) { .lines { top: 84px; right: 4vw; width: 62vw; opacity: 0.85; } .hero--drawn { padding-top: calc(76px + 40vw); } }
@media (prefers-reduced-motion: reduce) { .lines .draw, .lines .dot { animation: none; } .lines .draw { stroke-dashoffset: 0; opacity: 0.6; } }

/* Live search over the work grid, for finding a film quickly in a meeting. */
.work-search { display: flex; align-items: center; gap: 1rem; margin: 2rem 0 1.5rem; max-width: 34rem; }
.work-search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.work-search input { flex: 1; padding: 0.9em 1.1em 0.9em 2.9em; border: 1.5px solid rgba(255,255,255,0.35); border-radius: 999px; background: rgba(255,255,255,0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 1.1em center / 1.1em; color: #fff; font: inherit; }
.work-search input::placeholder { color: rgba(255,255,255,0.6); }
.work-search input:focus { outline: none; border-color: var(--pink-hot); background-color: rgba(255,255,255,0.14); }
.work-search input::-webkit-search-cancel-button { filter: invert(1); cursor: pointer; }
.work-search__count { font: 600 0.85rem/1 var(--body); color: #E8D9E3; white-space: nowrap; }
.work-search__empty { color: var(--ink-2); font-size: 1.1rem; }
.tile[hidden] { display: none; }
.grid.is-filtered .tile--wide { grid-column: span 1; }

/* ---------------------------------------------------------------- grids */
.grid { display: grid; gap: clamp(20px, 2.5vw, 36px) clamp(20px, 2vw, 28px); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr; } }
.section__head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); }
.section__head p { margin: 0; }

/* ---------------------------------------------------------------- tiles */
.tile { display: block; }
.tile__link { display: block; color: inherit; }
.tile__link:hover, .tile__link:focus-visible { color: inherit; }
.tile__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.tile__media img, .tile__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.tile__link:hover .tile__media img { transform: scale(1.03); }
.tile__client { display: block; margin-top: 1rem; font: 600 0.8rem/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pink); }
.tile h3 { margin: 1rem 0 0.35rem; transition: color 200ms var(--ease); }
.tile__client + h3 { margin-top: 0.5rem; }
.tile__link:hover h3 { color: var(--pink); }
.tile p { margin: 0; color: var(--ink-2); font-size: 1rem; }
.tile .chip { display: inline-block; margin-top: 0.8rem; }
.dark .tile p { color: #D9C8D3; }
.dark .tile__link:hover h3 { color: var(--pink-hot); }
.tile--wide { grid-column: span 2; }
@media (max-width: 720px) { .tile--wide { grid-column: span 1; } }

/* ------------------------------------------------------------ services */
.services { counter-reset: service; }
.service { padding: 1.6rem 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; color: inherit; }
.service::before { counter-increment: service; content: counter(service, decimal-leading-zero); font: 400 1.1rem/1.6 var(--display); color: var(--pink); }
.service h3 { margin: 0 0 0.3rem; transition: color 200ms var(--ease); }
.service:hover h3 { color: var(--pink); }
.service p { margin: 0; color: var(--ink-2); }
.service:last-child { border-bottom: 1px solid var(--line); }
.services--narrow { max-width: 900px; }
.group + .group { margin-top: var(--section); }
.services--grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; border-bottom: 1px solid var(--line); }
.services--grid .service:last-child { border-bottom: 0; }
@media (max-width: 800px) { .services--grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- philosophy
   The centrepiece: three words set very large, each in its own colour,
   each with one line of belief and a short explanation. */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; gap: 3rem; } }
.pillar h3 { font: italic 300 clamp(4.5rem, 10vw, 9.5rem)/0.9 var(--display); font-variation-settings: "opsz" 144; letter-spacing: -0.03em; margin: 0 0 1rem -0.04em; }
.pillar--feel h3 { color: var(--pink-hot); }
.pillar--think h3 { color: var(--blue-light); }
.pillar--act h3 { color: var(--green-light); }
.pillar h4 { font-family: var(--display); font-weight: 500; text-transform: none; letter-spacing: -0.01em; font-size: clamp(1.4rem, 2vw, 1.9rem); color: #fff; margin: 0 0 0.8rem; }
.pillar p { color: #E8D9E3; max-width: 32ch; }
.pillars__lead { font: italic 400 clamp(1.5rem, 2.6vw, 2.4rem)/1.25 var(--display); color: #fff; max-width: 30ch; margin: 0 0 clamp(40px, 6vw, 96px); }
.pillars__lead em { font-style: normal; color: var(--pink-hot); }

/* ---------------------------------------------------------------- proof */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 2rem; }
.stat b { display: block; font: 500 clamp(2.6rem, 4.5vw, 4rem)/1 var(--display); color: var(--green); font-variation-settings: "opsz" 96; }
.dark .stat b, .stats-block .stat b { color: var(--green); }
.stat b small { font-size: 0.45em; margin-left: 0.1em; }
.stat b span { display: inline; }
.stat > span { display: block; margin-top: 0.5rem; color: var(--ink-2); max-width: 24ch; }
.dark .stat > span { color: #E8D9E3; }
/* Client marks on the same grid as the figures above: six across, scaled to the column. */
.logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(28px, 4vw, 56px) clamp(24px, 3vw, 48px); align-items: center; margin-top: clamp(48px, 6vw, 88px); }
.logos a { display: flex; justify-content: center; color: var(--ink); transition: color 200ms var(--ease), transform 200ms var(--ease); }
.logos a:hover, .logos a:focus-visible { color: var(--pink); transform: translateY(-2px); }
.logos img, .logos svg, .logos__mark { width: 100%; max-width: 150px; height: auto; aspect-ratio: 1; object-fit: contain; display: block; }
/* Raster marks are alpha masks painted with the current colour, so they match the SVGs and take the hover colour. */
.logos__mark { background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
@media (max-width: 900px) { .logos { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .logos { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

/* --------------------------------------------------------------- quotes */
.quote { background: #fff; padding: clamp(24px, 3vw, 40px); border-top: 4px solid var(--pink); display: flex; flex-direction: column; gap: 1.2rem; height: 100%; }
.quote blockquote { margin: 0; font: 400 clamp(1.15rem, 1.5vw, 1.4rem)/1.45 var(--display); font-style: italic; }
.quote footer { margin-top: auto; display: flex; align-items: center; gap: 1rem; font-size: 0.95rem; color: var(--ink-2); }
.quote__logo { display: flex; align-items: center; justify-content: center; flex: none; height: 80px; min-width: 80px; max-width: 220px; padding: 8px 12px; background: #fff; border: 1px solid var(--line); }
.quote__logo img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.quote footer b { color: var(--ink); display: block; }
.quote--inline { max-width: 900px; margin: 3rem auto; border-top: 0; border-left: 4px solid var(--pink); background: transparent; padding: 0 0 0 1.6rem; }

/* ------------------------------------------------------------- features */
.feature { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); align-items: center; gap: clamp(24px, 4vw, 64px); }
.feature--flip > *:first-child { order: 2; }
.feature--top { align-items: start; }
.feature__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
/* Every feature image sits in the same 4:3 frame. Photographs fill it;
   logos and certificates are trimmed of their own white space and shown
   whole on white with a little room around them. */
.feature__media--logo { background: #fff; padding: clamp(24px, 10%, 64px); }
.feature__media--logo img { object-fit: contain; }
.feature h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin-bottom: 0.8rem; }
.band { padding: clamp(28px, 4vw, 56px); color: #fff; }
.band--fresh-eggplant { background: var(--pink); } .band--persian-green { background: var(--green); }
.band--bahama-blue { background: var(--blue); } .band--blackberry { background: var(--berry); } .band--jacaranda { background: var(--plum); }
.band a { color: #fff; text-decoration: underline; }

/* ------------------------------------------------------------- article */
.article { padding-block: clamp(40px, 6vw, 80px); }
.article > * { max-width: var(--measure); margin-inline: auto; }
.article > .embed, .article > .images, .article > .feature, .article > .stats-block, .article > .timeline, .article > .film { max-width: 1100px; }
/* Quotes sit with the text column, a little wider so the larger italic still gets a full line. */
.article > .quote--inline { max-width: 46rem; }
.article h2 { margin-block: 2.4rem 0.8rem; font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.article h3 { margin-block: 2rem 0.6rem; }
.article h4 { margin-block: 1.6rem 0.4rem; }
.article > :first-child { margin-top: 0; }
.article a { text-decoration: underline; text-decoration-color: rgba(155, 1, 103, 0.4); text-underline-offset: 0.15em; }
.embed { position: relative; margin: 2.4rem auto; background: #000; aspect-ratio: var(--ratio, 1.7778); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.images { display: grid; gap: 1rem; margin: 2.4rem auto; }
.images--2 { grid-template-columns: 1fr 1fr; } .images--3 { grid-template-columns: repeat(3, 1fr); }
.images figcaption { grid-column: 1 / -1; font-size: 0.95rem; color: var(--ink-2); }
.images--1 img { max-height: 75vh; width: auto; max-width: 100%; margin-inline: auto; }
.images--1 figcaption { text-align: center; }
@media (max-width: 640px) { .images--2, .images--3 { grid-template-columns: 1fr; } }
.stats-block { margin: 3rem auto; padding: clamp(24px, 3vw, 40px); background: #fff; border-top: 4px solid var(--pink); }
.article .feature { margin: 3rem auto; }

/* ----------------------------------------------------------------- film
   Omni's own video player: a still with one invitation to play, then a thin
   control bar that hides itself while the film runs. */
.film { position: relative; margin: 2.4rem auto; aspect-ratio: 16 / 9; background: #000; overflow: hidden; color: #fff; }
.film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.film__video::cue { background: rgba(43, 2, 37, 0.85); color: #fff; font: 500 1.1rem/1.4 var(--body); }
.film__start { position: absolute; inset: 0; width: 100%; border: 0; background: linear-gradient(to top, rgba(43, 2, 37, 0.85), rgba(43, 2, 37, 0) 55%); color: #fff; cursor: pointer; display: flex; align-items: flex-end; gap: 1.2rem; padding: clamp(18px, 3vw, 36px); text-align: left; transition: background 300ms var(--ease); }
.film__start:hover { background: linear-gradient(to top, rgba(43, 2, 37, 0.95), rgba(43, 2, 37, 0.1) 55%); }
.film__start-icon { flex: none; width: clamp(56px, 7vw, 84px); height: clamp(56px, 7vw, 84px); border-radius: 50%; background: var(--pink); display: grid; place-items: center; transition: background 200ms var(--ease), transform 200ms var(--ease); }
.film__start:hover .film__start-icon, .film__start:focus-visible .film__start-icon { background: var(--pink-hot); transform: scale(1.06); }
.film__start-icon svg { width: 40%; height: 40%; margin-left: 6%; }
.film__start-title { font: 500 clamp(1.2rem, 2.2vw, 1.8rem)/1.15 var(--display); }
.film__start-title small { display: block; font: 600 0.75rem/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink-hot); margin-bottom: 0.4rem; }
.film.is-started .film__start { display: none; }
.film__controls { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent); opacity: 0; transition: opacity 250ms var(--ease); }
.film.is-started:hover .film__controls, .film.is-started:focus-within .film__controls, .film.is-started.is-paused .film__controls, .film.is-started.is-idle-off .film__controls { opacity: 1; }
.film__btn { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; }
.film__btn:hover, .film__btn:focus-visible { background: rgba(255, 255, 255, 0.15); }
.film__btn svg { width: 22px; height: 22px; }
.film__toggle .film__ic-play, .film.is-paused .film__toggle .film__ic-pause { display: none; }
.film.is-paused .film__toggle .film__ic-play { display: block; }
.film__cc[aria-pressed="true"] { color: var(--green-light); }
.film.is-muted .film__ic-wave { display: none; }
.film__time { font: 500 0.85rem/1 var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.film__seek { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; background: linear-gradient(to right, var(--green-light) var(--played, 0%), rgba(255, 255, 255, 0.3) var(--played, 0%)); border-radius: 2px; cursor: pointer; margin: 0 0.4rem; }
.film__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; }
.film__seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; }
.film__seek:focus-visible { outline-offset: 6px; }
.modal__frame .film { margin: 0; width: 100%; height: 100%; }
@media (max-width: 640px) { .film__time .film__sep, .film__time .film__length { display: none; } }

/* ---------------------------------------------------------------- radio
   Omni's own player for radio ads; the audio streams from SoundCloud through
   a hidden widget, the controls are ours. */
.radio { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(16px, 2.5vw, 32px); margin: 1.5rem auto; padding: clamp(18px, 2.5vw, 28px) clamp(18px, 3vw, 36px); background: var(--plum); color: #fff; overflow: hidden; }
.article > .radio { max-width: 1100px; }
.radio + .radio { margin-top: 0; }
.radio__play { width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--pink); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background 200ms var(--ease), transform 200ms var(--ease); }
.radio__play:hover, .radio__play:focus-visible { background: var(--pink-hot); transform: scale(1.05); }
.radio__play svg { width: 28px; height: 28px; }
.radio__play .radio__icon-pause, .radio.is-playing .radio__icon-play { display: none; }
.radio.is-playing .radio__icon-pause { display: block; }
.radio.is-loading .radio__play { animation: radio-pulse 900ms ease-in-out infinite; }
@keyframes radio-pulse { 50% { opacity: 0.6; } }
.radio__client { margin: 0; font: 600 0.8rem/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pink-hot); display: flex; align-items: center; gap: 0.7rem; }
.radio__tag { font-size: 0.65rem; letter-spacing: 0.12em; padding: 0.3em 0.6em; border: 1px solid rgba(255,255,255,0.35); border-radius: 999px; color: #E8D9E3; }
.radio__title { margin: 0.35rem 0 0.9rem; font: 500 clamp(1.2rem, 1.8vw, 1.5rem)/1.2 var(--display); }
.radio__bar { position: relative; height: 6px; background: rgba(255,255,255,0.18); border-radius: 3px; cursor: pointer; }
.radio__bar:focus-visible { outline-offset: 6px; }
.radio__fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--green-light); border-radius: 3px; transition: width 250ms linear; }
.radio__time { margin: 0.6rem 0 0; font-size: 0.85rem; color: #D9C8D3; font-variant-numeric: tabular-nums; }
.radio__source { color: #D9C8D3; margin-left: 0.8rem; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); }
.radio__source:hover { color: #fff; }
.radio__wave { display: flex; align-items: center; gap: 3px; height: 48px; opacity: 0.35; }
.radio__wave i { display: block; width: 3px; height: 30%; background: var(--green-light); border-radius: 2px; }
.radio__wave i:nth-child(3n) { height: 70%; } .radio__wave i:nth-child(4n) { height: 50%; } .radio__wave i:nth-child(5n) { height: 90%; } .radio__wave i:nth-child(7n) { height: 40%; }
.radio.is-playing .radio__wave { opacity: 1; }
.radio.is-playing .radio__wave i { animation: radio-wave 900ms ease-in-out infinite alternate; }
.radio.is-playing .radio__wave i:nth-child(2n) { animation-duration: 700ms; } .radio.is-playing .radio__wave i:nth-child(3n) { animation-duration: 1100ms; }
@keyframes radio-wave { from { transform: scaleY(0.4); } to { transform: scaleY(1.2); } }
.radio__frame { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .radio { grid-template-columns: auto 1fr; } .radio__wave { display: none; } }
@media (prefers-reduced-motion: reduce) { .radio.is-playing .radio__wave i, .radio.is-loading .radio__play { animation: none; } }

/* ------------------------------------------------------------------ faq
   Questions and answers as native disclosure widgets: readable closed, no script. */
/* History timeline: a rule down the middle, entries alternating left and right, the year on the
   other side of the rule from its entry. On narrow screens the rule moves to the left edge. */
.timeline { list-style: none; margin: 2.5rem 0 3rem; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 50%; top: 0.5rem; bottom: 0; width: 2px; margin-left: -1px; background: var(--line); }
.timeline__item { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; padding: 0 0 3.5rem; position: relative; }
.timeline__item::before { content: ""; position: absolute; left: 50%; top: 0.7rem; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--pink); }
.timeline__year { grid-row: 1; font-family: var(--display); font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.1; display: flex; flex-direction: column; gap: 0.6rem; }
.timeline__body { grid-row: 1; }
.timeline__item:nth-child(odd) .timeline__body { grid-column: 1; text-align: right; }
.timeline__item:nth-child(odd) .timeline__year { grid-column: 2; align-items: flex-start; }
.timeline__item:nth-child(even) .timeline__body { grid-column: 2; }
.timeline__item:nth-child(even) .timeline__year { grid-column: 1; align-items: flex-end; text-align: right; }
.timeline__tag { font: 600 0.72rem/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink); border: 1px solid currentColor; border-radius: 999px; padding: 0.35rem 0.6rem; }
.timeline__body h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); margin: 0 0 0.5rem; }
.timeline__body p { color: var(--ink-2); max-width: var(--measure); margin: 0 0 0.6rem; }
.timeline__item:nth-child(odd) .timeline__body p { margin-left: auto; }
.timeline__image { display: block; max-width: 100%; max-height: 34rem; width: auto; height: auto; border-radius: var(--radius); margin: 0 0 1.1rem; }
.timeline__item:nth-child(odd) .timeline__image { margin-left: auto; }
.timeline__zoom { display: block; cursor: zoom-in; }
.gallery a { cursor: zoom-in; }
.timeline__player .film { margin: 0 0 1.1rem; }
.timeline__film { display: grid; place-content: center; text-align: center; gap: 0.3rem; aspect-ratio: 16 / 9; border-radius: var(--radius); background: var(--plum); color: #fff; margin: 0 0 1.1rem; padding: 1rem; }
.timeline__film span { font-family: var(--display); font-size: clamp(1.3rem, 2vw, 1.7rem); }
.timeline__film small { color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; }

/* Festival laurels: a row of small marks in the page's ink, no boxes. */
/* One laurel sits large; several share the row, so five still fit on one line. */
.laurels { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin: 0.6rem 0 0.4rem; padding: 0; }
.laurels li { margin: 0; flex: 1 1 0; max-width: 9.5rem; }
.laurels img { display: block; width: 100%; height: auto; opacity: 0.85; }
.timeline__item:nth-child(odd) .timeline__body .laurels { justify-content: flex-end; }
@media (max-width: 760px) { .laurels li { max-width: 7rem; } .timeline__item:nth-child(odd) .timeline__body .laurels { justify-content: flex-start; } }

/* On set: a run of shoots, each a heading and a wall of thumbnails in justified rows. */
.article > .shoot { max-width: 1100px; margin-top: clamp(2.5rem, 5vw, 4rem); }
.shoot__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1.5rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.shoot__head h2 { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.shoot__meta { margin: 0; color: var(--ink-2); font-size: 0.95rem; }
/* The wall is masonry: three columns, every photograph at its own shape and a decent size. */
.gallery.gallery--wall { --u: 12cqw; display: grid; container-type: inline-size; grid-template-columns: repeat(3, 1fr); grid-auto-rows: var(--u); grid-auto-flow: dense; gap: 0.6cqw; margin-top: 1rem; }
.gallery.gallery--wall a, .gallery.gallery--wall a:first-child { display: block; flex: none; max-width: none; margin: 0; grid-row: span var(--rows, 2); }
.gallery.gallery--wall img { width: 100%; height: 100%; object-fit: cover; }
.wall__film { grid-column: span 2; grid-row: span var(--rows, 3); margin: 0; }
.wall__film .film { margin: 0; height: 100%; aspect-ratio: auto; }
.wall__film .film video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .gallery.gallery--wall { --u: 18cqw; grid-template-columns: repeat(2, 1fr); }
}
.wall__yt { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; border-radius: calc(var(--radius) / 2); }
.wall__yt-start { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; color: #fff; cursor: pointer; position: relative; }
.wall__yt-start img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 300ms var(--ease); }
.wall__yt-start:hover img { opacity: 1; }
.wall__yt-start .film__start-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.wall__yt-title { position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.7rem; text-align: left; font: 600 0.85rem/1.3 var(--body); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
.wall__yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Staging-only picker (onset-picker.js). */
.picker { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; border-radius: 999px; background: var(--plum); color: #fff; font-size: 0.9rem; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); }
.picker button { border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; background: transparent; color: #fff; padding: 0.35rem 0.8rem; cursor: pointer; }
.picker button:hover { background: rgba(255, 255, 255, 0.15); }
.is-picking .gallery--wall a { cursor: cell; }
.gallery--wall a.is-dropped { position: relative; }
.gallery--wall a.is-dropped img { opacity: 0.25; filter: grayscale(1); }
.gallery--wall a.is-dropped::after { content: "\00d7"; position: absolute; inset: 0; display: grid; place-items: center; font: 500 3rem/1 var(--display); color: var(--pink); }

/* Photo montage, nothing cropped: the first picture is shown large at its own shape, the rest as a
   row of thumbnails of equal height and natural width, like a contact sheet. Each opens full size
   in the lightbox dialog. */
.gallery { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.8rem 0 0.4rem; }
/* Thumbnails share out each row in proportion to their shapes (--w and --h come from the file), so
   rows run edge to edge; a thumbnail alone on the last row is held to two thirds of the width. */
.gallery a { display: block; flex: calc(var(--w, 4) / var(--h, 3) * 100) 1 calc(var(--w, 4) / var(--h, 3) * 6.5rem); max-width: 66%; overflow: hidden; border-radius: calc(var(--radius) / 2); background: var(--paper-2); }
.gallery a:first-child { flex: 0 0 100%; max-width: 100%; }
.gallery img { display: block; width: 100%; height: auto; transition: transform 300ms var(--ease); }
.timeline__item:nth-child(odd) .timeline__body .gallery { justify-content: flex-end; }
/* Side layout: the lead picture takes most of the width and the rest stand beside it, whole. */
.gallery--side { flex-wrap: nowrap; align-items: flex-start; }
.gallery--side a:first-child { flex: 0 0 68%; }
.gallery--side a:not(:first-child) { flex: 1 1 0; }
.gallery a:hover img, .gallery a:focus-visible img { transform: scale(1.04); }
/* The dialog fills the viewport so its buttons can be placed against its edges the same way in every
   browser (fixed-position descendants of a top-layer dialog are not handled consistently). */
.lightbox { border: 0; padding: 0; margin: 0; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: transparent; overflow: hidden; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(20, 8, 20, 0.92); }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 0.6rem; max-width: min(96vw, 1400px); }
.lightbox img { max-width: min(96vw, 1400px); max-height: 86vh; width: auto; height: auto; border-radius: var(--radius); }
.lightbox figcaption { color: rgba(255, 255, 255, 0.8); font-size: 0.95rem; text-align: center; }
.lightbox button { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; padding: 12px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; }
.lightbox button svg { display: block; width: 24px; height: 24px; }
.lightbox button:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox .lightbox__prev { left: 1rem; } .lightbox .lightbox__next { right: 1rem; }
.lightbox .lightbox__close { top: 1rem; right: 1rem; transform: none; }
@media (max-width: 760px) {
  .gallery a { flex-basis: calc(var(--w, 4) / var(--h, 3) * 5rem); }
  .gallery--side { flex-wrap: wrap; }
  .gallery--side a:first-child { flex: 0 0 100%; }
  .gallery--side a:not(:first-child) { flex: calc(var(--w, 4) / var(--h, 3) * 100) 1 calc(var(--w, 4) / var(--h, 3) * 5rem); }
  .timeline__item:nth-child(odd) .timeline__body .gallery { justify-content: flex-start; }
  .timeline::before { left: 0; margin-left: 0; }
  .timeline__item { grid-template-columns: 1fr; padding: 0 0 3rem 1.4rem; }
  .timeline__item::before { left: -5px; margin-left: 0; }
  .timeline__year, .timeline__item:nth-child(odd) .timeline__year, .timeline__item:nth-child(even) .timeline__year { grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; gap: 0.8rem; text-align: left; margin-bottom: 0.6rem; }
  .timeline__body, .timeline__item:nth-child(odd) .timeline__body, .timeline__item:nth-child(even) .timeline__body { grid-column: 1; grid-row: auto; text-align: left; }
  .timeline__item:nth-child(odd) .timeline__body p { margin-left: 0; }
}

.faq { border-top: 1px solid var(--line); margin: 1.5rem 0 2.5rem; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; cursor: pointer; padding: 1.1rem 2.4rem 1.1rem 0; position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
.faq__item summary::after { content: ""; position: absolute; right: 0.4rem; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--pink); border-bottom: 2px solid var(--pink); transform: translateY(-70%) rotate(45deg); transition: transform 200ms var(--ease); }
.faq__item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq__item summary:hover h3 { color: var(--pink); }
.faq__answer { padding: 0 0 1.4rem; color: var(--ink-2); max-width: 60ch; }
.faq__answer p:last-child { margin-bottom: 0; }
.chooser { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; margin: 2rem 0 0; }
.chooser a { display: block; padding: 1.2rem 1.3rem; background: #fff; border-top: 4px solid var(--pink); color: inherit; }
.chooser a:hover { background: var(--plum); color: #fff; }
.chooser a:hover h3, .chooser a:hover p { color: inherit; }
.chooser h3 { font-size: 1.15rem; margin: 0 0 0.3rem; }
.chooser p { margin: 0; font-size: 0.95rem; color: var(--ink-2); }

/* --------------------------------------------------------------- forms */
.form label { display: block; font-weight: 600; margin: 1.2rem 0 0.4rem; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="url"], .form input[type="file"], .form select, .form textarea {
    width: 100%; padding: 0.9em 1em; border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; font: inherit; color: var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--pink); outline: none; box-shadow: 0 0 0 3px rgba(155, 1, 103, 0.15); }
.form .check { display: flex; gap: 0.7rem; align-items: flex-start; font-weight: 400; margin-top: 1.4rem; }
.form .check input { margin-top: 0.3em; width: 20px; height: 20px; flex: none; accent-color: var(--pink); }
.form .note { font-size: 0.95rem; color: var(--ink-2); margin: 0.6rem 0 1.4rem; }
.form .trap { position: absolute; left: -10000px; }
.form .status { display: none; margin-top: 1.2rem; padding: 0.9rem 1.1rem; border: 2px solid var(--pink); font-weight: 600; }
.form .status.is-error { display: block; }
/* Once sent, the fields go and a solid green panel takes their place, so there is no doubt it worked. */
.form .status.is-sent { display: block; margin: 0; padding: clamp(1.6rem, 3vw, 2.4rem); border: 0; background: var(--green); color: #fff; font: 500 clamp(1.25rem, 1.8vw, 1.5rem)/1.4 var(--display); text-align: center; }
.form.is-sent > :not(.status) { display: none; }
.offices { display: grid; gap: 2rem; }
.office { background: #fff; padding: 1.6rem; border-top: 4px solid var(--pink); }
.office address { font-style: normal; margin: 0.6rem 0 1rem; color: var(--ink-2); }
.office .links a { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; margin-bottom: 0.5rem; }
.office .links svg { width: 20px; height: 20px; }
.office .tel { font: 500 1.5rem/1.2 var(--display); display: block; margin-top: 1rem; color: var(--ink); }
.map { aspect-ratio: 16 / 10; margin-top: 2rem; background: var(--paper-2); }
.map .mapboxgl-ctrl-group { border-radius: var(--radius); box-shadow: 0 1px 4px rgba(43, 2, 37, 0.2); }
.map .mapboxgl-popup-content { font: 400 0.95rem/1.45 var(--body); color: var(--ink); padding: 0.8rem 1rem; border-radius: var(--radius); box-shadow: 0 8px 24px -8px rgba(43, 2, 37, 0.35); }
.map .mapboxgl-popup-content a { font-weight: 600; }

/* ---------------------------------------------------------------- CTA */
.cta { text-align: center; }
.cta h2 { max-width: 18ch; margin-inline: auto; }
.cta .hero__actions { justify-content: center; }
.cta .contact-line { margin-top: 1.6rem; color: #E8D9E3; }
.cta .contact-line a { font-weight: 600; }

/* -------------------------------------------------------------- footer */
/* A shade darker than the call to action above it, with a hairline, so the two read as separate. */
.footer { background: #1C0118; border-top: 1px solid rgba(255, 255, 255, 0.08); color: #E8D9E3; padding: var(--section) 0 2rem; font-size: 1rem; }
.footer a { color: #fff; }
.footer a:hover { color: var(--pink-hot); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h4 { color: #fff; margin-bottom: 1rem; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 0.5rem; }
.footer__logo svg { height: 34px; width: auto; color: #fff; margin-bottom: 1.2rem; }
.footer address { font-style: normal; }
.social { display: flex; gap: 0.8rem; margin-top: 1.2rem; }
.social a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); border-radius: var(--radius); }
.social a:hover { background: var(--pink); color: #fff; }
.social svg { width: 20px; height: 20px; fill: currentColor; }
.badges { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: center; margin: 3rem 0 2rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.12); }
.badges img, .badges svg { height: 64px; width: auto; }
.badges a { display: inline-flex; }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 0.9rem; color: #B9A5B2; }
.legal ul { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* -------------------------------------------------------------- modal */
.modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(34, 26, 32, 0.92); padding: var(--gutter); }
.modal.is-open { display: flex; }
.modal__frame { width: min(100%, 1280px); aspect-ratio: 16 / 9; background: #000; }
.modal__frame iframe { width: 100%; height: 100%; border: 0; }
.modal__close { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--pink); color: #fff; cursor: pointer; font-size: 1.4rem; }
.modal__close:hover { background: var(--pink-hot); }
body.has-modal { overflow: hidden; }

/* -------------------------------------------------------------- motion */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

.form label small { font-weight: 400; color: var(--ink-2); }
.form--crew { max-width: 40rem; }