/* tokens.css */
@font-face {
font-family: "Geist";
src: url("../fonts/Geist-Latin.woff2") format("woff2");
font-weight: 100 900;
unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
font-display: swap;
}
@font-face {
font-family: "Geist Fallback";
src: local("Arial"), local("ArialMT"), local("Helvetica");
size-adjust: 102%;
ascent-override: 98.5%;
descent-override: 28.9%;
line-gap-override: 0%;
}
:root {
--paper: #ECEAE6;
--ink: #0A0A0A;
--concrete: #BDBAB4;
--signal: #0F6F78;
--night: #101318;
--bg: var(--paper);
--fg: var(--ink);
--rule: color-mix(in srgb, var(--fg) 14%, transparent);
--rule-beat: color-mix(in srgb, var(--fg) 30%, transparent);
--font: "Geist", "Geist Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
--fs-small: 0.875rem;
--fs-body: 1.0625rem;
--lh-body: 1.53;
--fs-lead: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
--fs-title: clamp(3rem, 1.5rem + 7vw, 9rem);
--track-display: -0.045em;
--steps: 16;
--gutter: max(16px, 2vw);
--step: calc((100vw - 2 * var(--gutter)) / var(--steps));
--bpm: 126;
--t16: 119ms;
--t8: 238ms;
--t4: 476ms;
--ease-hit: cubic-bezier(0.16, 1, 0.3, 1);
--player-h: 0px;
}
@media (max-width: 760px) {
:root { --steps: 8; }
}
/* base.css */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: 56px;
overflow-x: clip;
background: var(--bg);
color: var(--fg);
}
body {
font-family: var(--font);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: 400;
font-feature-settings: "ss01";
background: var(--bg);
color: var(--fg);
overflow-x: clip;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
padding-bottom: var(--player-h);
transition: background-color var(--t4) linear, color var(--t4) linear;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.nav a:not(.btn), .hero__next a, .notes-list a h3, .footer a, .pp__kicker a {
text-decoration: none;
background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
transition: background-size 0.2s ease-out;
}
.nav a:not(.btn):hover, .hero__next a:hover, .notes-list a:hover h3, .footer a:hover, .pp__kicker a:hover,
.nav a:not(.btn):focus-visible, .hero__next a:focus-visible { background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible {
outline: 2px solid var(--fg);
outline-offset: 3px;
}
[data-section] :focus-visible { outline-color: var(--sec-fg, var(--fg)); }
.nav :focus-visible { outline-color: var(--fg); }
.skip:focus-visible { outline-color: var(--bg); outline-offset: -4px; }
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap;
}
.skip {
position: fixed; left: var(--gutter); top: 8px; z-index: 200;
padding: 8px 12px; background: var(--fg); color: var(--bg);
transform: translateY(-200%);
}
.skip:focus { transform: none; }
.steps-grid {
position: absolute; inset: 0;
pointer-events: none;
margin-inline: var(--gutter);
background-image:
repeating-linear-gradient(to right,
var(--rule-beat) 0 1px, transparent 1px calc(var(--step) * 4)),
repeating-linear-gradient(to right,
var(--rule) 0 1px, transparent 1px var(--step));
border-right: 1px solid var(--rule-beat);
}
.grain::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
opacity: 0.22; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
display: flex; justify-content: space-between; align-items: baseline;
padding: 14px var(--gutter);
font-size: var(--fs-small); font-weight: 500;
color: var(--fg);
background: var(--bg);
transition: color var(--t4) linear, background-color var(--t4) linear;
}
.nav a { text-decoration: none; }
.nav__logo { font-weight: 800; letter-spacing: -0.02em; }
.nav ul { display: flex; gap: clamp(14px, 2.4vw, 32px); list-style: none; }
.section {
position: relative;
min-height: 100svh;
padding: 96px var(--gutter);
}
.section__title {
font-size: var(--fs-title);
font-weight: 900;
letter-spacing: var(--track-display);
line-height: 0.86;
}
/* sections.css */
[data-section] { background: var(--sec-bg); color: var(--sec-fg); }
[data-section="paper"]    { --sec-bg: var(--paper);    --sec-fg: var(--ink); }
[data-section="concrete"] { --sec-bg: var(--concrete); --sec-fg: var(--ink); }
[data-section="signal"]   { --sec-bg: var(--signal);   --sec-fg: var(--paper); }
[data-section="night"]    { --sec-bg: var(--night);    --sec-fg: var(--paper); }
[data-section="ink"]      { --sec-bg: var(--ink);      --sec-fg: var(--paper); }
[data-section] { --rule: color-mix(in srgb, var(--sec-fg) 16%, transparent); --rule-beat: color-mix(in srgb, var(--sec-fg) 34%, transparent); }
html[data-section="paper"]    { --bg: var(--paper);    --fg: var(--ink); }
html[data-section="concrete"] { --bg: var(--concrete); --fg: var(--ink); }
html[data-section="signal"]   { --bg: var(--signal);   --fg: var(--paper); }
html[data-section="night"]    { --bg: var(--night);    --fg: var(--paper); }
html[data-section="ink"]      { --bg: var(--ink);      --fg: var(--paper); }
html[data-section] { --rule: color-mix(in srgb, var(--fg) 14%, transparent); --rule-beat: color-mix(in srgb, var(--fg) 30%, transparent); }
.duo { position: relative; overflow: hidden; background: var(--sec-fg); }
.duo img { width: 100%; height: 100%; object-fit: cover; }
[data-section="signal"] :is(.r-store, .note, .credit, .r-meta, dt, .nl-promise, .dates__next span, .booking__facts dt, .proof__facts dt),
html[data-section="signal"] .nav__lang a { opacity: 1; }
/* hero.css */
.hero {
position: relative;
min-height: 100svh;
display: grid;
align-items: end;
overflow: hidden;
color: var(--paper);
background: var(--night);
}
.hero__media { position: absolute; inset: 0; }
.hero__media picture,
.hero__media video { position: absolute; inset: 0; }
.hero__media img,
.hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.hero__media::before {
content: ""; position: absolute; inset: 0; z-index: 1;
background: color-mix(in srgb, var(--night) 28%, transparent);
}
.hero__media.grain::after { z-index: 2; mix-blend-mode: overlay; opacity: 0.35; }
.hero__media video { opacity: 0; transition: opacity 0.4s linear; }
.hero__media.has-video video { opacity: 1; }
.hero__content {
position: relative; z-index: 3;
container-type: inline-size;
padding: 0 var(--gutter) 6px;
}
.hero__row {
display: grid;
grid-template-columns: repeat(16, minmax(0, 1fr));
align-items: end;
row-gap: 16px;
padding-bottom: clamp(12px, 2vh, 24px);
font-size: var(--fs-lead);
font-weight: 500;
line-height: 1.12;
letter-spacing: -0.02em;
}
.hero__sub { grid-column: 1 / span 5; max-width: 22ch; }
.hero__ctas { grid-column: 7 / span 6; display: flex; flex-wrap: wrap; gap: 10px; }
.hero__ctas .btn { font-size: 1rem; min-height: 52px; padding: 0 22px; }
.hero__next { grid-column: 13 / span 4; justify-self: end; text-align: right; }
.hero__next span { display: block; opacity: 0.65; }
.hero__next a { text-decoration: none; }
.hero__title {
font-size: 23.4vw;
font-size: 23.87cqi;
font-weight: 900;
letter-spacing: var(--track-display);
line-height: 0.78;
white-space: nowrap;
width: max-content;
margin-left: -0.035em;
}
.js .hero__title { clip-path: inset(0 0 0 0); animation: hero-in 0.4s cubic-bezier(0.2, 0.7, 0, 1) both 0.1s; }
.js .hero__row { animation: hero-fade 0.4s linear both 0.3s; }
@keyframes hero-in { from { clip-path: inset(100% 0 0 0); transform: translateY(12%); } to { clip-path: inset(0); transform: none; } }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 760px) {
.hero__row { grid-template-columns: 1fr; font-size: 1.125rem; }
.hero__sub, .hero__ctas, .hero__next { grid-column: 1; justify-self: start; text-align: left; }
.hero__ctas .btn { min-height: 48px; flex: 1 1 auto; }
.hero__next { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
.js .hero__title, .js .hero__row { animation: none; }
.hero__media video { display: none; }
}
.hero { grid-template-columns: minmax(0, 1fr); }
.hero__content { min-width: 0; }
.hero--veil .hero__content { isolation: isolate; }
.hero--veil .hero__content::before {
content: ""; position: absolute; z-index: -1;
left: 0; right: 0; top: -180px; bottom: 0;
background: linear-gradient(to bottom,
transparent 0,
color-mix(in srgb, var(--night) 50%, transparent) 180px);
}
.hero__lead { grid-column: 1 / span 8; display: grid; row-gap: 18px; }
.hero__lead .hero__sub, .hero__lead .hero__ctas { grid-column: auto; }
.hero__ctas { align-items: center; }
.hero__release {
display: inline-flex; align-items: center; gap: 0.4em;
min-height: 52px; padding: 0 20px;
border: 1.5px solid currentColor;
font-size: 1rem; font-weight: 500; text-decoration: none;
transition: background-color 0.2s linear, color 0.2s linear;
}
.hero__release span { font-weight: 700; }
.hero__release:hover { background: var(--paper); color: var(--night); }
a.hero__next {
grid-column: 13 / span 4; justify-self: end; text-align: right;
font-size: var(--fs-lead); font-weight: 500; line-height: 1.12; letter-spacing: -0.02em;
text-decoration: none;
}
a.hero__next span { display: block; font-weight: 600; opacity: 1; }
a.hero__next { color: var(--paper); }
@media (max-width: 760px) {
.hero__lead { grid-column: 1; }
a.hero__next { grid-column: 1; justify-self: start; text-align: left; order: -1; font-size: 1.125rem; }
.hero__release { min-height: 48px; flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 760px) {
.hero__release { display: block; padding: 12px 16px; text-align: center; line-height: 1.3; }
}
/* home.css */
.btn {
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px;
padding: 0 18px;
border: 1.5px solid currentColor;
font-size: var(--fs-small);
font-weight: 600;
letter-spacing: -0.005em;
text-decoration: none;
white-space: nowrap;
transition: background-color var(--t16) linear, color var(--t16) linear;
}
.btn:not(.btn--solid):hover { background: var(--sec-fg, var(--fg)); color: var(--sec-bg, var(--bg)); border-color: var(--sec-fg, var(--fg)); }
.btn--solid { background: var(--sec-fg, var(--fg)); color: var(--sec-bg, var(--bg)); border-color: var(--sec-fg, var(--fg)); }
.btn--solid:hover { background: transparent; color: var(--sec-fg, var(--fg)); }
main > section { position: relative; padding: clamp(72px, 10vh, 120px) var(--gutter); }
.sec-head {
display: grid; grid-template-columns: repeat(16, minmax(0, 1fr));
align-items: end; row-gap: 16px;
margin-bottom: clamp(32px, 5vh, 56px);
}
.sec-title {
grid-column: 1 / span 9;
font-size: var(--fs-title);
font-weight: 900;
letter-spacing: var(--track-display);
line-height: 0.86;
}
.sec-title--xl { font-size: clamp(4rem, 1rem + 14vw, 16rem); }
.sec-lead {
grid-column: 11 / span 6;
font-size: var(--fs-lead);
font-weight: 500;
line-height: 1.18;
letter-spacing: -0.015em;
max-width: 30ch;
}
.nav { align-items: center; gap: 20px; padding-block: 10px; }
.nav__menu { margin-left: auto; }
.nav__menu ul { display: flex; gap: clamp(14px, 2vw, 28px); list-style: none; }
.nav__cta { min-height: 36px; padding: 0 14px; }
.nav__toggle { display: none; font-weight: 600; min-height: 36px; padding: 0 4px; }
@media (max-width: 760px) {
.nav__toggle { display: inline-flex; align-items: center; }
.nav__cta { margin-left: auto; }
.nav__menu {
position: fixed; inset: 0; z-index: -1;
margin: 0;
padding: 88px var(--gutter) calc(var(--player-h) + 24px);
background: var(--bg);
visibility: hidden;
clip-path: inset(0 0 100% 0);
transition: clip-path var(--t4) var(--ease-hit), visibility 0s linear var(--t4);
}
.nav.is-open .nav__menu {
visibility: visible; clip-path: inset(0);
transition: clip-path var(--t4) var(--ease-hit);
}
.nav__menu ul { flex-direction: column; gap: 4px; }
.nav__menu a {
font-size: clamp(2.75rem, 14vw, 4.5rem);
font-weight: 900; letter-spacing: var(--track-display); line-height: 1;
}
}
.nav__bar {
list-style: none;
display: grid; grid-template-columns: repeat(16, 5px); gap: 5px;
align-items: center;
margin-left: 4px;
}
.nav__bar li {
width: 5px; height: 5px; border-radius: 50%;
background: color-mix(in srgb, var(--fg) 25%, transparent);
transition: background-color 0.2s linear;
}
.nav__bar li:nth-child(4n + 1) { width: 7px; height: 7px; margin: -1px; }
.nav__bar li.is-on { background: var(--fg); }
@media (max-width: 520px) { .nav__bar { display: none; } }
.releases {
list-style: none;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(28px, 4vw, 56px) var(--step);
}
.release img {
width: 100%; aspect-ratio: 1; object-fit: cover;
border-radius: 0;
transition: border-radius 0.3s var(--ease-hit);
}
.release:hover img,
.release:focus-within img,
.release.is-playing img {
border-radius: 50%;
-webkit-mask: radial-gradient(circle, transparent 0 4%, #000 4.4%);
mask: radial-gradient(circle, transparent 0 4%, #000 4.4%);
}
.release h3 { margin-top: 14px; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.release .r-meta { margin-top: 4px; font-size: var(--fs-small); opacity: 0.7; }
.release .r-line { margin-top: 8px; font-size: var(--fs-small); line-height: 1.4; }
.release .r-links { margin-top: 12px; display: flex; gap: 8px; }
.release .r-links a {
display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
border: 1.5px solid currentColor; font-size: var(--fs-small); font-weight: 600; text-decoration: none;
}
.release .r-links a:hover { background: var(--sec-fg); color: var(--sec-bg); }
.music__all { margin-top: clamp(40px, 6vh, 72px); }
@media (max-width: 960px) { .releases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dates__table {
width: 100%;
border-collapse: collapse;
font-size: clamp(1.125rem, 0.8rem + 1.2vw, 2rem);
font-weight: 600;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.dates__table th {
text-align: left; font-size: var(--fs-small); font-weight: 500; letter-spacing: 0;
padding: 0 0 10px; border-bottom: 1.5px solid currentColor;
}
.dates__table td { padding: 14px 0; border-bottom: 1px solid var(--rule-beat); vertical-align: baseline; }
.dates__table th:nth-child(1), .dates__table td:nth-child(1) { width: 25%; }
.dates__table th:nth-child(2), .dates__table td:nth-child(2) { width: 43.75%; }
.dates__table tbody tr { transition: background-color var(--t16) linear, color var(--t16) linear; }
.dates__table tbody tr:hover { background: var(--paper); color: var(--signal); }
.dates__table tbody tr:hover td:first-child { padding-left: 12px; }
.bit-follow { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.bit-follow a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1.5px solid currentColor; font-weight: 600; text-decoration: none; }
.bit-follow .note { font-size: var(--fs-small); }
@media (max-width: 760px) {
.dates__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.dates__table tr { display: grid; grid-template-columns: 7.5em 1fr; border-bottom: 1px solid var(--rule-beat); padding: 12px 0; }
.dates__table td { border: 0; padding: 0; width: auto !important; }
.dates__table td.c { grid-column: 2; font-weight: 500; font-size: 0.85em; }
.dates__table td.d { grid-row: span 2; }
}
.notes-list { list-style: none; border-top: 1.5px solid currentColor; }
.notes-list li { border-bottom: 1px solid var(--rule-beat); }
.notes-list a {
display: grid; grid-template-columns: repeat(16, minmax(0, 1fr));
align-items: baseline; padding: 22px 0; text-decoration: none;
}
.notes-list h3 {
grid-column: 1 / span 9;
font-size: clamp(1.75rem, 1rem + 2.6vw, 3.5rem);
font-weight: 800; letter-spacing: -0.035em; line-height: 1;
}
.notes-list p { grid-column: 11 / span 6; font-size: var(--fs-small); line-height: 1.45; }
.learn__cta { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; max-width: 70ch; }
@media (max-width: 760px) {
.notes-list a { grid-template-columns: 1fr; row-gap: 8px; }
.notes-list h3, .notes-list p { grid-column: 1; }
}
.proof__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px var(--step); }
.proof__facts dt { font-size: var(--fs-small); font-weight: 500; opacity: 0.7; padding-bottom: 8px; border-bottom: 1px solid var(--rule-beat); margin-bottom: 10px; }
.proof__facts dd { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.proof__photos { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); margin-top: clamp(48px, 8vh, 96px); }
.proof__photos .duo { aspect-ratio: 2 / 3; }
.proof__photo { margin: 0; }
.proof__photos .proof__photo:nth-child(1) { grid-column: 1 / span 4; }
.proof__photos .proof__photo:nth-child(2) { grid-column: 7 / span 4; margin-top: 12vh; }
.proof__photos .proof__photo:nth-child(3) { grid-column: 13 / span 4; margin-top: 4vh; }
@media (max-width: 760px) {
.proof__facts { grid-template-columns: 1fr; }
.proof__photos { grid-template-columns: repeat(8, minmax(0, 1fr)); row-gap: 16px; }
.proof__photos { column-gap: 12px; }
.proof__photos .proof__photo:nth-child(1) { grid-column: 1 / span 4; }
.proof__photos .proof__photo:nth-child(2) { grid-column: 5 / span 4; margin-top: 0; }
.proof__photos .proof__photo:nth-child(3) { display: none; }
}
.newsletter__body { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); margin-top: clamp(28px, 4vh, 48px); row-gap: 24px; }
.newsletter__body .sec-lead { grid-column: 1 / span 6; }
.nl-form { grid-column: 9 / span 8; display: grid; gap: 14px; }
.nl-form > label:first-child { font-size: var(--fs-small); font-weight: 500; }
.nl-form .form-row { display: flex; gap: 0; border-bottom: 2px solid currentColor; }
.nl-form input[type="email"] {
flex: 1; min-width: 0; min-height: 64px;
background: transparent; border: 0; color: inherit;
font: inherit; font-size: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem); font-weight: 600; letter-spacing: -0.02em;
}
.nl-form input[type="email"]::placeholder { color: inherit; opacity: 0.4; }
.nl-form .form-row:focus-within { border-bottom-width: 4px; }
.nl-form button {
align-self: center; min-height: 48px; padding: 0 22px;
background: var(--sec-fg); color: var(--sec-bg); font-weight: 700;
}
.nl-form button:hover { opacity: 0.85; }
.nl-form .consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-small); line-height: 1.45; }
.nl-form .consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--paper); flex: none; }
.nl-form .hp { position: absolute; left: -9999px; }
.nl-form .nl-promise { font-size: var(--fs-small); opacity: 0.7; }
.nl-form[data-state="off"] button, .nl-form[aria-disabled="true"] button { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 760px) {
.newsletter__body .sec-lead, .nl-form { grid-column: 1 / -1; }
}
.booking__grid { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); row-gap: 28px; margin-top: clamp(28px, 4vh, 48px); }
.booking__grid .sec-lead { grid-column: 1 / span 6; }
.booking__mail { grid-column: 9 / span 8; font-size: clamp(1.5rem, 0.6rem + 3.2vw, 4rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; word-break: break-word; }
.booking__mail a { text-decoration-thickness: 2px; }
.booking__facts { grid-column: 9 / span 8; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; font-size: var(--fs-small); }
.booking__facts dt { opacity: 0.7; margin-bottom: 4px; }
.booking__facts dd { font-weight: 600; }
@media (max-width: 760px) {
.booking__grid > * { grid-column: 1 / -1 !important; }
.booking__facts { grid-template-columns: 1fr; }
}
.footer {
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
padding: 28px var(--gutter) calc(var(--player-h) + 28px);
font-size: var(--fs-small); font-weight: 500;
}
.footer__links { display: flex; gap: 20px; }
.proof__lists { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); row-gap: 40px; }
.proof__lists > div:first-child { grid-column: 1 / span 10; }
.proof__lists > div:last-child { grid-column: 12 / span 5; }
.proof__label { font-size: var(--fs-small); font-weight: 500; padding-bottom: 8px; border-bottom: 1px solid var(--rule-beat); margin-bottom: 14px; }
.venues, .labels { list-style: none; font-weight: 800; letter-spacing: -0.04em; line-height: 1.02; }
.venues { font-size: clamp(2rem, 1rem + 3.4vw, 4.75rem); }
.labels { font-size: clamp(1.375rem, 1rem + 1.2vw, 2.25rem); }
.venues li, .labels li { display: inline; }
.venues li:not(:last-child)::after, .labels li:not(:last-child)::after { content: ", "; }
@media (max-width: 760px) {
.proof__lists > div:first-child, .proof__lists > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
.sec-head, .shop__head { grid-template-columns: 1fr; }
.sec-title, .sec-lead { grid-column: 1 / -1; }
.shop__head .sec-lead { margin-top: 16px; }
}
.nl-form { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.nl-form .form-row { min-width: 0; }
.listen {
display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); align-items: baseline;
margin-top: clamp(40px, 6vh, 72px); padding-top: 16px; border-top: 1.5px solid currentColor;
}
.listen__label { grid-column: 1 / span 4; font-size: var(--fs-small); font-weight: 500; }
.listen ul { grid-column: 5 / -1; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 28px; }
.listen a {
font-size: clamp(1.5rem, 1rem + 1.8vw, 2.75rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1;
text-decoration: none;
background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
transition: background-size 0.2s ease-out;
}
.listen a:hover, .listen a:focus-visible { background-size: 100% 2px; }
.listen a[href=""] { display: none; }
@media (max-width: 760px) {
.listen { grid-template-columns: 1fr; row-gap: 10px; }
.listen__label, .listen ul { grid-column: 1; }
}
.release .r-links a.r-buy { background: var(--sec-fg); color: var(--sec-bg); border-color: var(--sec-fg); }
.release .r-links a.r-buy:hover { background: transparent; color: var(--sec-fg); }
.featured {
position: relative;
display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); align-items: end; column-gap: 0; row-gap: 24px;
padding: clamp(56px, 9vh, 104px) var(--gutter);
}
.featured__cover { grid-column: 1 / span 6; width: 100%; aspect-ratio: 1; object-fit: cover; }
.featured__body { grid-column: 8 / span 9; }
.featured__kicker { font-size: var(--fs-small); font-weight: 600; }
.featured__title { margin-top: 10px; font-size: clamp(2.75rem, 1rem + 5.5vw, 7rem); font-weight: 900; letter-spacing: var(--track-display); line-height: 0.88; }
.featured__meta { margin-top: 14px; font-size: var(--fs-lead); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.featured__line { margin-top: 10px; max-width: 46ch; }
.featured__links { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.featured__links .btn { min-height: 52px; padding: 0 22px; font-size: 1rem; }
.featured:empty { display: none; }
@media (max-width: 760px) {
.featured { grid-template-columns: 1fr; }
.featured__cover, .featured__body { grid-column: 1; }
}
.duo { margin: 0; }
.credit { margin-top: 6px; font-size: 0.75rem; font-weight: 500; opacity: 0.7; letter-spacing: 0; }
.release .r-links { flex-wrap: wrap; }
.release .r-store { margin-left: 0.3em; font-weight: 500; opacity: 0.75; }
.dates__head { margin-bottom: clamp(32px, 5vh, 56px); }
.dates__label, .booking__label { font-size: var(--fs-lead); font-weight: 600; letter-spacing: -0.02em; }
.dates__next {
margin-top: 8px;
font-size: clamp(3rem, 0.5rem + 9vw, 11rem);
font-weight: 900; letter-spacing: var(--track-display); line-height: 0.86;
font-variant-numeric: tabular-nums;
}
.dates__next span { display: block; font-size: var(--fs-lead); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 8px; opacity: 0.75; }
.booking .booking__mail {
margin-top: 8px;
font-size: clamp(2.25rem, 0.2rem + 7.4vw, 9rem);
font-weight: 900; letter-spacing: var(--track-display); line-height: 0.9;
overflow-wrap: anywhere;
}
.booking .booking__mail a { text-decoration-thickness: 0.06em; text-underline-offset: 0.08em; }
.booking .booking__grid .sec-lead { grid-column: 1 / span 6; }
.booking .booking__facts { grid-column: 9 / span 8; }
@media (max-width: 760px) { .sec-title--xl { font-size: 17.5vw; } }
.nl-form[data-pending] button, .nl-form[data-state="off"] button {
opacity: 1; background: transparent; color: var(--sec-fg, var(--fg));
border: 1.5px dashed currentColor; cursor: not-allowed;
}
@media (max-width: 760px) {
.booking .booking__mail { font-size: 7.4vw; white-space: nowrap; overflow-wrap: normal; }
}
:root { --section-pad: clamp(80px, 11vh, 128px); --card-gap: 24px; }
main > section:not(.pulse):not(.featured) { padding-block: var(--section-pad); }
.sec-head, .shop__head, .dates__head { margin-bottom: clamp(36px, 5vh, 56px); }
.products, .releases { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--card-gap); }
.releases { row-gap: 56px; }
.product { border-right: 0; }
.product__link, .product:first-child .product__link { padding: 16px 0 24px; }
.products { border-top: 1.5px solid currentColor; }
@media (max-width: 960px) {
.products, .releases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product:nth-child(odd) .product__link { padding-left: 0; }
}
@media (max-width: 560px) {
.products { grid-template-columns: 1fr; }
.product__link, .product:first-child .product__link { padding: 16px 0; }
}
.dates__label, .booking__label, .listen__label, .proof__label, .dates__next span {
font-size: var(--fs-small); font-weight: 600; letter-spacing: 0; line-height: 1.3; opacity: 1;
}
.proof__label { padding-bottom: 10px; }
.dates__next span { margin-bottom: 6px; }
.listen__label { align-self: center; }
.proof__photos .proof__photo:nth-child(2) { margin-top: calc(var(--step) * 2); }
.proof__photos .proof__photo:nth-child(3) { margin-top: var(--step); }
@media (max-width: 760px) { .proof__photos .proof__photo:nth-child(2) { margin-top: 0; } }
.release h3 { margin-top: 16px; }
.release .r-meta { margin-top: 4px; }
.release .r-line { margin-top: 8px; max-width: 34ch; }
.release .r-links { margin-top: 14px; gap: 6px; }
.release .r-links a { min-height: 34px; padding: 0 10px; }
.releases > .release:first-child { grid-column: span 2; grid-row: span 2; }
.releases > .release:first-child h3 { font-size: clamp(1.75rem, 1rem + 1.6vw, 2.75rem); letter-spacing: -0.04em; }
.releases > .release:first-child .r-meta, .releases > .release:first-child .r-line { font-size: 1rem; }
@media (max-width: 960px) { .releases > .release:first-child { grid-column: 1 / -1; grid-row: auto; } }
.release img { transition: border-radius 0.4s var(--ease-hit), transform 0.4s var(--ease-hit); }
.release:hover img, .release:focus-within img, .release.is-playing img { border-radius: 0; -webkit-mask: none; mask: none; }
@media (hover: hover) {
.release:hover img {
border-radius: 50%; transform: rotate(90deg);
-webkit-mask: radial-gradient(circle, transparent 0 4%, #000 4.4%);
mask: radial-gradient(circle, transparent 0 4%, #000 4.4%);
}
}
@media (prefers-reduced-motion: reduce) { .release:hover img { transform: none; } }
.music__labels {
display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); align-items: baseline;
margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule-beat);
}
.music__label { grid-column: 1 / span 4; font-size: var(--fs-small); font-weight: 600; }
.music__labels .labels { grid-column: 5 / -1; font-size: clamp(1.25rem, 0.9rem + 1vw, 1.875rem); }
@media (max-width: 760px) { .music__labels { grid-template-columns: 1fr; row-gap: 8px; } .music__label, .music__labels .labels { grid-column: 1; } }
.dates__table th:nth-child(1), .dates__table td:nth-child(1) { width: 18.75%; }
.dates__table th:nth-child(2), .dates__table td:nth-child(2) { width: 43.75%; }
.dates__past { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); align-items: baseline; margin-top: 48px; }
.dates__past .dates__label { grid-column: 1 / span 3; }
.dates__past .venues { grid-column: 4 / -1; font-size: clamp(1.5rem, 1rem + 1.8vw, 2.75rem); }
@media (max-width: 760px) { .dates__past { grid-template-columns: 1fr; row-gap: 8px; } .dates__past > * { grid-column: 1 !important; } }
.booking-facts { grid-column: 9 / span 8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; font-size: var(--fs-small); }
.booking-facts dt { font-weight: 600; margin-bottom: 4px; }
.booking-facts dd { line-height: 1.45; }
.booking-cta { grid-column: 9 / span 8; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; }
.booking-cta .btn { min-height: 52px; padding: 0 22px; font-size: 1rem; }
@media (max-width: 760px) { .booking-facts { grid-template-columns: 1fr; } .booking-facts, .booking-cta { grid-column: 1 / -1; } }
.shopline { padding: 28px var(--gutter); border-top: 1px solid var(--rule-beat); }
.shopline p { font-size: var(--fs-lead); font-weight: 500; letter-spacing: -0.015em; }
.shopline a { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.release picture, .featured picture, .product__link picture { display: contents; }
@media (max-width: 760px) {
.releases > .release:nth-child(n + 6) { display: none; }
}
.shop-line { font-size: var(--fs-lead); font-weight: 500; letter-spacing: -0.015em; }
.shop-line a { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.shop-line__link { margin-left: 0.4em; }
.dates__table td.v a:not(.tickets) { text-decoration: none; }
.dates__table a.tickets {
display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; margin-left: 16px; vertical-align: middle;
border: 1.5px solid currentColor; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0; text-decoration: none;
}
@media (max-width: 760px) { .dates__table a.tickets { margin: 6px 0 0; } }
.dates__table a.tickets:hover { background: var(--paper); color: var(--signal); }
.dates__table tbody tr:hover a.tickets { border-color: currentColor; }
/* shop.css */
.shop__head { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); align-items: end; margin-bottom: clamp(32px, 5vh, 56px); }
.products {
list-style: none;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--rule-beat);
}
.product { border-right: 1px solid var(--rule); }
.product:last-child { border-right: 0; }
.product__link {
display: grid; grid-template-rows: auto auto 1fr auto auto;
height: 100%;
padding: 16px 16px 20px;
text-decoration: none;
}
.product:first-child .product__link { padding-left: 0; }
.product__img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 16px; }
.product__name { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.product__line { margin-top: 8px; font-size: var(--fs-small); line-height: 1.4; max-width: 34ch; }
.product__price { margin-top: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.product__cta { margin-top: 12px; justify-self: start; }
.product__link:hover .product__cta:not(.btn--solid) { background: var(--sec-fg); color: var(--sec-bg); }
.product__link:hover .product__cta.btn--solid { background: transparent; color: var(--sec-fg); }
.product__link:focus-visible { outline-offset: -2px; }
.shop__note { margin-top: 32px; font-size: var(--fs-small); max-width: 60ch; }
@media (max-width: 960px) {
.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product:nth-child(2n) { border-right: 0; }
.product:nth-child(odd) .product__link { padding-left: 0; }
}
@media (max-width: 560px) {
.products { grid-template-columns: 1fr; }
.product { border-right: 0; border-bottom: 1px solid var(--rule); }
.product__link { padding-left: 0; padding-right: 0; grid-template-columns: 38% 1fr; grid-template-rows: none; column-gap: 16px; }
.product__img { grid-row: 1 / span 5; margin: 0; }
.product__name, .product__line, .product__price, .product__cta { grid-column: 2; }
.product__price { margin-top: 8px; }
}
.product__cta {
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px; padding: 0 18px;
border: 1.5px solid currentColor;
font-size: var(--fs-small); font-weight: 600; white-space: nowrap;
transition: background-color var(--t16) linear, color var(--t16) linear;
}
.product[data-status="free"] .product__cta,
.product[data-status="paid"] .product__cta { background: var(--sec-fg); color: var(--sec-bg); border-color: var(--sec-fg); }
.product__link:hover .product__cta { background: var(--sec-fg); color: var(--sec-bg); }
.product[data-status="free"] .product__link:hover .product__cta,
.product[data-status="paid"] .product__link:hover .product__cta { background: transparent; color: var(--sec-fg); }
.products { column-gap: var(--card-gap, 24px); border-top: 1.5px solid currentColor; }
.product, .product:nth-child(2n) { border-right: 0; }
.product__link, .product:first-child .product__link, .product:nth-child(odd) .product__link { padding: 16px 0 24px; }
@media (max-width: 560px) { .product { border-bottom: 1px solid var(--rule); } .product__link { padding: 16px 0; } }
/* v4.css */
.nav__cta { min-height: 38px; padding: 0 18px; font-weight: 700; }
.hero { min-height: 92svh; }
.js .hero__title, .js .hero__row { animation: none; }
.js .hero__media::before { animation: v4-light 1s cubic-bezier(0.3, 0.6, 0.2, 1) both; }
@keyframes v4-light { from { background-color: var(--night); } }
.js .nav__bar li { animation: v4-beat 0.24s linear both; }
@keyframes v4-beat { 0%, 100% { background: color-mix(in srgb, var(--fg) 25%, transparent); } 30% { background: var(--fg); } }
.nav__bar li:nth-child(2) { animation-delay: 0.06s; }   .nav__bar li:nth-child(3) { animation-delay: 0.12s; }
.nav__bar li:nth-child(4) { animation-delay: 0.18s; }   .nav__bar li:nth-child(5) { animation-delay: 0.24s; }
.nav__bar li:nth-child(6) { animation-delay: 0.3s; }    .nav__bar li:nth-child(7) { animation-delay: 0.36s; }
.nav__bar li:nth-child(8) { animation-delay: 0.42s; }   .nav__bar li:nth-child(9) { animation-delay: 0.48s; }
.nav__bar li:nth-child(10) { animation-delay: 0.54s; }  .nav__bar li:nth-child(11) { animation-delay: 0.6s; }
.nav__bar li:nth-child(12) { animation-delay: 0.66s; }  .nav__bar li:nth-child(13) { animation-delay: 0.72s; }
.nav__bar li:nth-child(14) { animation-delay: 0.78s; }  .nav__bar li:nth-child(15) { animation-delay: 0.84s; }
.nav__bar li:nth-child(16) { animation-delay: 0.9s; }
.nav__bar li.is-on { animation: none; }
@media (prefers-reduced-motion: reduce) {
.js .hero__media::before, .js .nav__bar li { animation: none; }
}
.hero__ctas { gap: 10px; }
.hero__ctas .btn { min-height: 56px; padding: 0 26px; font-size: 1.0625rem; }
.hero__ctas .btn--solid { padding: 0 34px; font-weight: 800; }
@media (max-width: 760px) {
.hero__lead, .hero__ctas { justify-self: stretch; }
.hero__ctas { display: grid; grid-template-columns: 1fr 1fr; }
.hero__ctas .btn { min-height: 52px; padding: 0 12px; }
.hero__ctas .btn--solid { grid-column: 1 / -1; }
}
main > #shop { padding-block: clamp(56px, 8vh, 96px); }
.shop__head .sec-title { font-size: clamp(2.5rem, 1rem + 5vw, 6rem); grid-column: 1 / span 10; }
.shop__head .sec-lead { grid-column: 11 / span 6; font-size: 1.25rem; }
.shop--home .product__name { font-size: 1.5rem; }
@media (min-width: 561px) {
.products .product__link { display: flex; flex-direction: column; }
.products .product__name { min-height: 2.1em; }
.products .product__price { margin-top: auto; padding-top: 16px; }
.products .product__cta { align-self: stretch; }
}
.product__cta { min-height: 52px; font-size: 1rem; font-weight: 700; width: 100%; margin-top: 14px; }
.product__price { font-size: 1.125rem; font-weight: 700; }
.shop__all { margin-top: clamp(28px, 4vh, 44px); }
.shop__all .btn { min-height: 56px; padding: 0 30px; font-size: 1.0625rem; font-weight: 700; }
@media (max-width: 760px) {
.shop__head { row-gap: 12px; }
.shop__head .sec-title, .shop__head .sec-lead { grid-column: 1 / -1; }
.shop__all .btn { width: 100%; }
}
@media (max-width: 560px) {
.product__cta { width: auto; justify-self: stretch; }
}
main > #music { padding-block: clamp(36px, 5vh, 56px); }
.listen-row .listen { margin-top: 0; padding-top: 0; border-top: 0; align-items: center; }
.listen-row .listen__label { font-size: var(--fs-lead); font-weight: 800; letter-spacing: -0.02em; }
.listen-row .listen ul { gap: 10px; }
.listen-row .listen a {
display: inline-flex; align-items: center; min-height: 56px; padding: 0 24px;
border: 1.5px solid currentColor; background: none;
font-size: clamp(1.0625rem, 0.9rem + 0.5vw, 1.375rem); font-weight: 700; letter-spacing: -0.015em;
transition: background-color var(--t16) linear, color var(--t16) linear;
}
.listen-row .listen a:hover { background: var(--sec-fg); color: var(--sec-bg); }
.listen-row__labels {
display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); align-items: baseline;
margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--rule-beat); font-size: var(--fs-small);
}
.listen-row__label { grid-column: 1 / span 4; font-weight: 600; }
.listen-row__labels .labels { grid-column: 5 / -1; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
@media (max-width: 760px) {
.listen-row .listen ul { display: grid; grid-template-columns: 1fr 1fr; }
.listen-row .listen li { display: flex; }
.listen-row .listen a { flex: 1; justify-content: center; padding: 0 10px; }
.listen-row__labels { grid-template-columns: 1fr; row-gap: 6px; }
.listen-row__label, .listen-row__labels .labels { grid-column: 1; }
}
main > #dates { padding-block: clamp(48px, 7vh, 80px); }
.dates--compact .dates__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-bottom: 20px; }
.dates__title { font-size: clamp(2rem, 1rem + 3vw, 3.5rem); font-weight: 900; letter-spacing: var(--track-display); line-height: 0.9; }
.dates--compact .bit-follow { margin-top: 0; }
.dates--compact .bit-follow .note { display: none; }
.dates--compact .dates__table { font-size: 1rem; font-weight: 500; letter-spacing: 0; }
.dates--compact .dates__table td { padding: 10px 0; vertical-align: middle; }
.dates--compact .dates__table td.d { font-weight: 700; }
.dates--compact .dates__table tbody tr:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: inherit; }
.dates--compact .dates__table tbody tr:hover td:first-child { padding-left: 0; }
.dates--compact .dates__table a.tickets { min-height: 40px; background: var(--ink); color: var(--paper); border-color: var(--ink); margin-left: 12px; }
.dates--compact .dates__table a.tickets:hover { background: transparent; color: var(--ink); }
.dates--compact .dates__past { margin-top: 24px; font-size: var(--fs-small); }
.dates--compact .dates__past .venues { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
@media (max-width: 760px) {
.dates--compact .dates__table tr { padding: 10px 0; }
.dates--compact .dates__table a.tickets { margin: 0 0 0 10px; min-height: 44px; padding: 0 14px; }
.dates--compact .dates__table tr { grid-template-columns: 6.5em 1fr; align-items: center; row-gap: 2px; }
.dates--compact .dates__table td { padding: 0; }
.dates--compact .dates__table td.d { grid-row: auto; font-size: 0.875rem; }
.dates--compact .dates__table td.c { grid-column: 2; font-size: 0.8125rem; opacity: 1; }
}
main > #booking {
display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); align-items: center; column-gap: var(--card-gap, 24px); row-gap: 14px;
padding-block: clamp(36px, 5vh, 56px);
}
.booking__title { grid-column: 1 / span 3; font-size: clamp(2rem, 1rem + 3vw, 3.5rem); font-weight: 900; letter-spacing: var(--track-display); line-height: 0.9; }
.booking__lead { grid-column: 4 / span 7; font-size: 1.125rem; font-weight: 500; line-height: 1.4; }
.booking--strip .booking__mail { display: block; margin-top: 2px; font-size: inherit; font-weight: 800; letter-spacing: -0.01em; text-decoration-thickness: 1.5px; }
.booking__ctas { grid-column: 11 / -1; justify-self: end; display: flex; flex-wrap: wrap; gap: 10px; }
.booking__ctas .btn { min-height: 52px; padding: 0 22px; font-size: 1rem; }
@media (max-width: 960px) {
.booking__title, .booking__lead, .booking__ctas { grid-column: 1 / -1; justify-self: start; }
}
main > #newsletter {
display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--card-gap, 24px); row-gap: 20px; align-items: start;
padding-block: clamp(40px, 6vh, 64px);
}
.newsletter__intro { grid-column: 1 / span 6; }
.newsletter__title { font-size: clamp(2rem, 1rem + 3vw, 3.5rem); font-weight: 900; letter-spacing: var(--track-display); line-height: 0.9; }
.newsletter__intro p { margin-top: 10px; font-size: 1.125rem; font-weight: 500; }
.newsletter--compact .nl-form { grid-column: 8 / -1; }
.newsletter--compact .nl-form input[type="email"] { min-height: 52px; font-size: 1.25rem; }
@media (max-width: 760px) {
.newsletter__intro, .newsletter--compact .nl-form { grid-column: 1 / -1; }
}
.nl-form input[type="email"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 2px solid var(--sec-fg, var(--fg)); outline-offset: 3px;
}
.nl-form .form-row:focus-within { border-bottom-width: 2px; }
.nl-form .consent input:focus-visible { outline-offset: 2px; }
.press-zip { margin: 28px 0 48px; }
.page-press main .press-zip .btn { min-height: 52px; padding: 0 24px; font-size: 1rem; font-weight: 700; text-decoration: none; }
.page-about main { padding: 0; max-width: none; }
.about { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); padding: 72px var(--gutter) clamp(48px, 8vh, 96px); }
.about__media { grid-column: 1 / -1; position: relative; aspect-ratio: 16 / 9; max-height: 78svh; width: 100%; overflow: hidden; background: var(--night); }
.about__media picture, .about__media video { position: absolute; inset: 0; }
.about__media img, .about__media video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.about__media video { opacity: 0; transition: opacity 0.6s linear; }
.about__media.has-video video { opacity: 1; }
.about__content {
grid-column: 1 / span 10; position: relative; z-index: 1;
margin-top: clamp(28px, 4vw, 56px);
background: var(--signal);
display: grid; row-gap: 24px;
}
.about__title { font-size: clamp(3.5rem, 1rem + 9vw, 11rem); font-weight: 900; letter-spacing: var(--track-display); line-height: 0.82; margin-left: -0.04em; }
.about__text { font-size: clamp(1.25rem, 0.9rem + 1.1vw, 2rem); font-weight: 500; line-height: 1.28; letter-spacing: -0.015em; max-width: 40ch; }
.about__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.about__ctas .btn { min-height: 56px; padding: 0 26px; font-size: 1.0625rem; }
@media (max-width: 760px) {
.about { padding-top: 60px; }
.about__media { aspect-ratio: 4 / 5; }
.about__media img, .about__media video { object-position: 50% 50%; }
.about__content { grid-column: 1 / -1; margin-top: 24px; }
.about__ctas .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .about__media video { display: none; } }
.press-quote { margin: 28px 0 0; }
.press-quote blockquote { margin: 0; }
.press-quote blockquote p { font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; max-width: 22ch; }
.press-quote figcaption { margin-top: 10px; font-size: var(--fs-small); }
.press-quote a, .about__quote a { text-decoration: underline; text-underline-offset: 3px; }
.about__quote { margin-top: 14px; font-weight: 700; }
@media (min-width: 761px) {
.nav { padding-block: 14px; }
.nav__logo { font-size: 1.25rem; }
.nav__menu ul { gap: clamp(18px, 2.4vw, 36px); }
.nav__menu a { font-size: 1.0625rem; font-weight: 600; }
.nav__cta { min-height: 44px; padding: 0 22px; font-size: 1.0625rem; }
}
@media (max-width: 760px) {
.nav__logo { font-size: 1.125rem; }
.nav__cta, .nav__toggle { min-height: 44px; font-size: 1rem; }
}
.product--service .product__badge {
display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
background: var(--signal); color: #fff;
font-size: clamp(3.5rem, 2rem + 5vw, 7rem); font-weight: 900; letter-spacing: var(--track-display); line-height: 1;
}
.product__price small { font-weight: 500; font-size: 0.8em; }
.svc { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--col-gap, 16px);
padding-block: clamp(40px, 6vh, 72px); border-top: 1px solid var(--rule, currentColor); }
.svc__title { grid-column: 1 / span 5; font-size: clamp(2rem, 1rem + 3vw, 3.5rem); font-weight: 900; letter-spacing: var(--track-display); line-height: 0.95; }
.svc__body { grid-column: 7 / -1; max-width: 62ch; }
.svc__lead { font-size: var(--fs-lead, 1.25rem); line-height: 1.3; }
.svc__steps { margin: 18px 0 0; padding-left: 1.4em; display: grid; gap: 8px; }
.svc__ctas { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 760px) {
.svc { grid-template-columns: 1fr; row-gap: 14px; }
.svc__title, .svc__body { grid-column: 1; }
}