/* =========================================================================
   Foltaazje — main stylesheet
   Rebuild of the live Squarespace design (uitgelezen 19-10-2026).
   Font: Archivo everywhere (expanded width for headings, normal width for
   text). SIL Open Font Licence: free for commercial use, self-hosted.
   ========================================================================= */

@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-latin-wdth-italic.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  --orange: #FF5E1A;
  --orange-dark: #E44E0E;
  --black: #000;
  --dark: #282828;
  --grey: #DAD9D9;
  --white: #fff;

  --font-display: "Archivo", "Arial Black", sans-serif;
  --font-ui: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: max(20px, 4vw);           /* Squarespace site padding: 58px @1440 */
  --header-h: clamp(92px, 10vw, 148px);
  --section-pad: clamp(56px, 6.6vw, 96px);

  --fs-title: clamp(46px, 7.15vw, 103px);   /* page titles (RECORDING) */
  --fs-intro: clamp(40px, 6.5vw, 94px);     /* YOUR MUSIC BROUGHT TO LIFE. */
  --fs-h2: clamp(32px, 4.1vw, 60px);
  --fs-h2-small: clamp(30px, 3.4vw, 49px);
  --fs-h3: clamp(22px, 2.3vw, 33px);
  --fs-body: clamp(16px, 1.23vw, 17.73px);
  --fs-large: clamp(17px, 1.35vw, 19.5px);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--white); color: var(--black); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.2em; }
strong { font-weight: 700; }
h1, h2, h3, h4 { margin: 0 0 .5em; font-family: var(--font-display); font-weight: 700; font-stretch: 112%; text-transform: uppercase; letter-spacing: -0.08em; line-height: 1.2; overflow-wrap: break-word; hyphens: manual; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--orange); color: var(--white); padding: 10px 16px; text-decoration: none; font-family: var(--font-ui); font-weight: 700; }
.skip-link:focus { top: 8px; }

.container { width: 100%; padding-inline: var(--gutter); margin-inline: auto; }
.container--inset { padding-inline: max(20px, 7.85vw); }       /* 113px @1440 */
.container--narrow { max-width: 760px; }
.container--text { max-width: 820px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.col-text { max-width: 38em; }
.text-right.col-text, .text-right .col-text { margin-left: auto; }
.small { font-size: 16px; }
.p-large { font-size: var(--fs-large); }
.label { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1em; }

/* ---------- colour settings (Squarespace section themes) ---------- */
.set-darkest   { background: var(--black); color: var(--white); }
.set-dark      { background: var(--dark);  color: var(--white); }
.set-light     { background: var(--grey);  color: var(--black); }
.set-lightest  { background: var(--white); color: var(--black); }
.set-bright    { background: var(--orange); color: var(--white); }
.set-darkest .h2, .set-dark .h2, .set-darkest .display, .set-dark .display,
.set-darkest .h3, .set-dark .h3 { color: var(--orange); }
.set-bright .h2, .set-bright .display { color: var(--white); }
.h2--orange { color: var(--orange) !important; }

/* ---------- typography helpers ---------- */
.display { font-size: var(--fs-intro); }
.display--title { font-size: var(--fs-title); text-align: center; margin: 0; }
.display--welcome { font-size: clamp(26px, 2.5vw, 36px); text-align: center; }
.display--workshops { font-size: clamp(26px, 8.2vw, 100px); color: var(--white) !important; margin-bottom: .6em; }
.display__sub { display: block; font-size: .463em; margin-top: .3em; }
.h2 { font-size: var(--fs-h2); }
.h2--small { font-size: var(--fs-h2-small); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: 16px; letter-spacing: -0.02em; }
.u-underline { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.rule { display: block; width: clamp(120px, 14.7vw, 212px); height: 2px; background: var(--orange); margin: 1.4em 0; }
.rule--center { margin: 2.2em auto; width: clamp(160px, 45vw, 657px); }

/* ---------- buttons ---------- */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--font-display); font-stretch: 112%; font-weight: 700; font-size: 16px; letter-spacing: -0.02em; text-transform: uppercase; text-decoration: none; line-height: 1.2; padding: 18px 34px; border: 3px solid var(--orange); background: var(--orange); color: var(--white); cursor: pointer; border-radius: 0; transition: color 500ms cubic-bezier(.16,1,.3,1), border-color 500ms cubic-bezier(.16,1,.3,1), transform 200ms cubic-bezier(.2,0,0,1); }
/* fill sweeps up from the bottom on hover */
.btn::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--orange-dark); transform: translateY(101%); transition: transform 600ms cubic-bezier(.16,1,.3,1); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover { border-color: var(--orange-dark); }
.btn:active { transform: translateY(1px); }
.btn--outline { background: transparent; color: var(--orange); }
.btn--outline::before { background: var(--orange); }
.btn--outline:hover, .btn--outline:focus-visible { color: var(--white); border-color: var(--orange); }
.btn--large { min-width: min(323px, 100%); min-height: 68px; }
.btn--small { font-size: 14px; padding: 14px 22px; }

/* ---------- header (fixed, dark, translucent — shrinks after scrolling) ---------- */
:root { --header-h-compact: 78px; --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-expo: cubic-bezier(.16, 1, .3, 1); --ease: cubic-bezier(.2, 0, 0, 1); }
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; color: var(--white); background: rgba(16, 16, 16, .62); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255, 255, 255, .08); transition: background-color 500ms var(--ease), border-color 500ms var(--ease), transform 700ms var(--ease-expo); view-transition-name: site-header; }
.site-header.is-hidden { transform: translateY(-100%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: rgba(16, 16, 16, .94); } }
.site-header.is-scrolled { background: rgba(12, 12, 12, .74); border-bottom-color: rgba(255, 255, 255, .1); }
.site-header__inner { position: relative; z-index: 45; display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); height: var(--header-h); padding-inline: var(--gutter); transition: height 600ms var(--ease-expo); }
.site-header.is-scrolled .site-header__inner { height: var(--header-h-compact); }
.site-header__logo { flex: 0 0 auto; width: clamp(150px, 19vw, 272px); transition: width 600ms var(--ease-expo), opacity 300ms var(--ease); }
.site-header__logo:hover { opacity: .8; }
.site-header.is-scrolled .site-header__logo { width: clamp(130px, 13vw, 190px); }
.site-header__logo img { width: 100%; height: auto; }
.site-nav { margin-left: auto; }
.site-nav__list { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 26px; list-style: none; margin: 0; padding: 0; }
.site-nav__item { position: relative; }
.site-nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-weight: 700; font-size: 14.4px; letter-spacing: .02em; color: var(--grey); text-decoration: none; background: none; border: 0; padding: 8px 0; cursor: pointer; text-transform: uppercase; transition: color 200ms var(--ease); }
.site-nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--ease-out); }
.site-nav__link:hover, .site-nav__link[aria-current="page"], .site-nav__item.is-open > .site-nav__link { color: var(--white); }
.site-nav__link:hover::after, .site-nav__link[aria-current="page"]::after, .site-nav__item.is-open > .site-nav__link::after { transform: scaleX(1); }
.site-nav__caret { width: 9px; height: 9px; transition: transform 300ms var(--ease-out); }
.site-nav__item.is-open .site-nav__caret { transform: rotate(180deg); }
/* dropdown: invisible bridge (::before) closes the gap so the pointer never "falls out"; close is delayed */
.site-nav__sub { position: absolute; top: calc(100% + 14px); left: 50%; min-width: 230px; list-style: none; margin: 0; padding: 12px; background: rgba(26, 26, 26, .97); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); z-index: 60;
  opacity: 0; visibility: hidden; transform: translate(-50%, -10px) scale(.96); transform-origin: top center; filter: blur(6px);
  transition: opacity 250ms var(--ease), transform 450ms var(--ease-expo), filter 300ms var(--ease), visibility 0s linear 250ms; }
.site-nav__sub::before { content: ""; position: absolute; left: -20px; right: -20px; top: -22px; height: 22px; }
.site-nav__item.is-open .site-nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); filter: blur(0); transition: opacity 350ms var(--ease), transform 700ms var(--ease-expo), filter 450ms var(--ease), visibility 0s; }
.site-nav__sub li { opacity: 0; transform: translateY(-6px); transition: opacity 200ms var(--ease), transform 300ms var(--ease-expo); }
.site-nav__item.is-open .site-nav__sub li { opacity: 1; transform: none; transition: opacity 450ms var(--ease), transform 650ms var(--ease-expo); }
.site-nav__item.is-open .site-nav__sub li:nth-child(1) { transition-delay: 60ms; }
.site-nav__item.is-open .site-nav__sub li:nth-child(2) { transition-delay: 110ms; }
.site-nav__item.is-open .site-nav__sub li:nth-child(3) { transition-delay: 160ms; }
.site-nav__item.is-open .site-nav__sub li:nth-child(4) { transition-delay: 210ms; }
.site-nav__sub a { position: relative; display: block; padding: 11px 14px; font-family: var(--font-ui); font-weight: 700; font-size: 13.5px; letter-spacing: .02em; color: var(--grey); text-decoration: none; white-space: nowrap; transition: color 200ms var(--ease), background-color 200ms var(--ease); }
.site-nav__sub a:hover, .site-nav__sub a:focus-visible { color: var(--white); background: rgba(255, 255, 255, .06); }
.site-nav__sub a[aria-current="page"] { color: var(--orange); }
.site-header__actions { display: flex; align-items: center; gap: 14px; }

.socials { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.socials__btn { display: grid; place-items: center; width: 34px; height: 34px; background: var(--orange); color: var(--white); transition: background-color 200ms var(--ease), transform 200ms var(--ease); }
.socials__btn:hover { background: var(--orange-dark); }
.socials__btn:active { transform: translateY(1px); }
.socials__btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.socials__btn svg .fill { fill: currentColor; stroke: none; }

.menu-toggle { display: none; margin-left: auto; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; position: relative; }
.menu-toggle span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--white); border-radius: 1px; transition: transform 600ms var(--ease-expo), top 450ms var(--ease-expo); }
.menu-toggle[aria-expanded="true"] span { transition: top 300ms var(--ease-expo), transform 600ms var(--ease-expo) 150ms; }
.menu-toggle span:first-child { top: 17px; }
.menu-toggle span:last-child { top: 26px; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

/* mobile menu: opens as a circle growing out of the menu button; items drift up out of a blur */
.mobile-menu { position: fixed; inset: 0; z-index: 40; background: #141414; padding: calc(var(--header-h-compact) + 44px) var(--gutter) 40px; overflow-y: auto; display: flex; flex-direction: column;
  clip-path: circle(0 at calc(100% - var(--gutter) - 22px) 36px); visibility: hidden;
  transition: clip-path 650ms var(--ease-expo), visibility 0s linear 650ms; }
.mobile-menu.is-open { clip-path: circle(150% at calc(100% - var(--gutter) - 22px) 36px); visibility: visible; transition: clip-path 1000ms var(--ease-expo), visibility 0s; }
.mobile-menu__list { list-style: none; margin: 0; padding: 0; text-align: right; }
.mobile-menu__list > li { margin-bottom: 6px; }
.mobile-menu__link { display: inline-block; font-family: var(--font-ui); font-weight: 700; font-size: clamp(30px, 8.6vw, 42px); line-height: 1.2; color: var(--white); text-decoration: none; text-transform: uppercase; transition: color 200ms var(--ease); }
.mobile-menu__link:hover, .mobile-menu__link[aria-current="page"] { color: var(--orange); }
.mobile-menu__sub { list-style: none; margin: 4px 0 10px; padding: 0; text-align: right; }
.mobile-menu__sub a { display: inline-block; padding: 5px 0; font-family: var(--font-ui); font-weight: 700; font-size: 15px; letter-spacing: .04em; color: var(--grey); text-decoration: none; text-transform: uppercase; transition: color 200ms var(--ease); }
.mobile-menu__sub a:hover, .mobile-menu__sub a[aria-current="page"] { color: var(--orange); }
.mobile-menu__footer { display: flex; flex-direction: column; align-items: flex-end; gap: 24px; margin-top: auto; padding-top: 40px; }
.mobile-menu__footer .btn { min-width: 220px; }
.mobile-menu [data-stagger] { opacity: 0; transform: translateY(28px); filter: blur(8px); transition: opacity 300ms var(--ease), transform 400ms var(--ease-expo), filter 300ms var(--ease); }
.mobile-menu.is-open [data-stagger] { transition: opacity 700ms var(--ease), transform 1000ms var(--ease-expo), filter 700ms var(--ease); transition-delay: calc(var(--i, 0) * 70ms + 180ms); }
.mobile-menu.is-open [data-stagger] { opacity: 1; transform: none; filter: blur(0); }
body.menu-open { overflow: hidden; }
body.menu-open .site-header { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

@media (max-width: 899px) {
  :root { --header-h: 80px; --header-h-compact: 66px; }
  .site-nav, .site-header__actions { display: none; }
  .menu-toggle { display: block; }
}

/* pages without a dark hero start below the fixed header */
.has-solid-header main { padding-top: var(--header-h); }

/* ---------- sections ---------- */
.section { padding-block: var(--section-pad); }
.section--tight { padding-block: calc(var(--section-pad) * .6); }
.section--first { padding-top: calc(var(--header-h) + var(--section-pad) * .9); }

.grid { display: grid; gap: clamp(28px, 4vw, 66px); }
@media (min-width: 900px) {
  .grid--split { grid-template-columns: 1fr 1fr; align-items: start; }
  .grid--wide-text { grid-template-columns: 1.18fr 1fr; }
  .grid--media-left > .media { order: 0; }
  .grid--intro { grid-template-columns: 768fr 556fr; align-items: center; }
  .grid--about-intro { grid-template-columns: 1fr 1fr; align-items: start; padding-inline: max(20px, 7.85vw) var(--gutter); }
  .grid--studio1 { grid-template-columns: 323fr 546fr 379fr; grid-template-rows: auto 1fr; grid-template-areas: "a b c" "a b d"; }
  .grid--studio1 .g-a { grid-area: a; } .grid--studio1 .g-b { grid-area: b; } .grid--studio1 .g-c { grid-area: c; } .grid--studio1 .g-d { grid-area: d; }
  .grid--studio2 { grid-template-columns: 824fr 379fr; align-items: start; }
  .grid--brands-hero { grid-template-columns: 657fr 546fr; align-items: start; }
  .grid--offer { grid-template-columns: 768fr 434fr; align-items: start; }
  .grid--case { grid-template-columns: 601fr 657fr; align-items: start; }
  .grid--composition { grid-template-columns: 1fr 1fr; align-items: start; }
  .grid--address { grid-template-columns: 434fr 824fr; align-items: start; }
}
.grid--studio2 .h2 { margin-top: 0; }

.media img { width: 100%; height: 100%; object-fit: cover; }
.grid--studio1 .media img { aspect-ratio: auto; height: 100%; }
.grid--studio1 .g-b img { aspect-ratio: 546 / 350; }
.grid--studio1 .g-c img { aspect-ratio: 379 / 107; }
.grid--studio1 .g-d img { aspect-ratio: 379 / 232; }
.media--tall img { aspect-ratio: 601 / 600; }
.media--fill { height: 100%; }
.media--fill img { min-height: 100%; aspect-ratio: 657 / 623; }

/* hero */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.hero__bg--dim { filter: brightness(.55); }
.hero--full { min-height: max(620px, calc(93svh + 60px)); }
.hero__arrow { position: absolute; left: 50%; bottom: clamp(24px, 3.4vw, 48px); transform: translateX(-50%); width: clamp(48px, 7.6vw, 110px); display: grid; place-items: center; padding: 10px; }
.hero__arrow img { width: 55%; }
.hero--band { min-height: clamp(380px, 40vw, 575px); display: grid; place-items: center; text-align: center; }
.hero__center { display: grid; justify-items: center; gap: 28px; padding: var(--section-pad) var(--gutter); }
.hero__arrow-static { width: clamp(40px, 4vw, 60px); }
.hero--text { padding-top: calc(var(--header-h) + clamp(40px, 7vw, 100px)); padding-bottom: clamp(40px, 3.4vw, 48px); }
.hero--text .hero__bg { filter: brightness(.45); }
.hero--text .h2 { color: var(--orange); }
.hero--brands { padding-top: calc(var(--header-h) + clamp(60px, 12.5vw, 180px)); padding-bottom: clamp(80px, 14vw, 200px); }
.hero--brands .display { color: var(--white) !important; }
.hero--cta { padding-block: clamp(64px, 8vw, 118px); }
.hero__content > * + * { margin-top: 1em; }

/* page title band (service pages) */
.page-title { min-height: clamp(320px, 36vw, 542px); display: grid; place-items: center; padding: var(--header-h) var(--gutter) 40px; }

/* service intro: text left on grey, image flush right */
.service-intro { display: grid; }
.service-intro__text { padding: clamp(40px, 4.8vw, 69px) var(--gutter) clamp(48px, 6.5vw, 94px); }
.service-intro__text .display { color: var(--black); max-width: 7.2em; margin-bottom: clamp(32px, 7.9vw, 114px); }
.service-intro__text .col-text { max-width: 442px; }
.service-intro__text .btn { min-width: min(331px, 100%); margin-top: 1em; }
.service-intro__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .service-intro { grid-template-columns: 1fr 1fr; padding-top: clamp(40px, 4.8vw, 69px); padding-bottom: clamp(48px, 6.8vw, 98px); }
  .service-intro__text { padding-top: 0; padding-bottom: 0; }
}

/* logo bar */
.logo-bar { padding-block: clamp(24px, 2.85vw, 41px); }
.logo-bar__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: clamp(16px, 5vw, 80px); max-width: 1100px; list-style: none; margin: 0 auto; }
.logo-bar__list li { display: flex; justify-content: center; }
@media (max-width: 599px) { .logo-bar__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; } }
.logo-bar__list img { width: 100%; max-width: 170px; height: clamp(64px, 7vw, 100px); object-fit: contain; }
.logo-strip { padding-block: 28px; }
.logo-strip__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 56px; }
.logo-strip__inner .label { margin: 0; flex: 0 0 auto; }
.logo-strip__list { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 54px; list-style: none; margin: 0; padding: 0; }
.logo-strip__list img { height: 57px; width: auto; max-width: 170px; object-fit: contain; }

/* quote */
.section--quote { text-align: center; }
.quote { margin: 0 auto; max-width: 340px; }
.quote footer { font-size: var(--fs-body); }
.quote--large { max-width: 1100px; text-align: center; }
.quote--large p { font-family: var(--font-display); font-stretch: 112%; font-weight: 700; text-transform: uppercase; letter-spacing: -0.06em; line-height: 1.2; font-size: clamp(22px, 2.6vw, 38px); }

/* price list */
.pricelist { list-style: none; margin: 1.5em 0 2em; padding: 0; }
.pricelist__item { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.25); }
.set-light .pricelist__item, .set-lightest .pricelist__item { border-bottom-color: rgba(0,0,0,.2); }
.pricelist__name { font-size: clamp(16px, 1.4vw, 20px); letter-spacing: -0.04em; margin: 0 0 .2em; color: inherit; }
.pricelist__desc { margin: 0; opacity: .85; }
.pricelist__price { margin: 0; font-family: var(--font-display); font-stretch: 112%; font-weight: 700; white-space: nowrap; color: var(--orange); letter-spacing: -0.04em; }

/* tabs */
.tabs__list { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; }
.tabs__tab { font-family: var(--font-display); font-stretch: 112%; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: -0.02em; padding: 12px 22px; background: transparent; color: var(--orange); border: 3px solid var(--orange); cursor: pointer; }
.tabs__tab[aria-selected="true"] { background: var(--orange); color: var(--white); }
.tabs__heading { font-size: clamp(20px, 1.8vw, 26px); color: var(--white); margin-top: 1.4em; }
.tabs__subheading { font-size: 16px; color: var(--orange); margin-top: 1.6em; }
.tabs__intro { opacity: .85; }
.js .tabs__panel[hidden] { display: none; }

/* forms */
.section--book .display { margin-bottom: clamp(32px, 3.3vw, 48px); padding-left: max(0px, calc(7.98vw - var(--gutter))); }
.form-wrap { max-width: 701px; margin-inline: auto; }
.form { display: grid; gap: 22px; }
.form__group { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.form__label { font-size: 15px; font-weight: 600; }
.form .req { font-weight: 400; opacity: .7; font-size: .9em; }
.form__row { display: grid; gap: 16px; }
@media (min-width: 600px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__sub { display: grid; gap: 6px; font-size: 14px; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form textarea { width: 100%; font: inherit; font-size: 16px; padding: 14px 16px; border: 1px solid var(--grey); background: #fafafa; color: var(--black); border-radius: 0; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--orange); outline-offset: 0; border-color: var(--orange); }
.form__check { display: flex; gap: 10px; align-items: center; font-size: 15px; cursor: pointer; }
.form__check input { width: 18px; height: 18px; accent-color: var(--orange); }
.form .btn { justify-self: start; min-width: 160px; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { margin: 0; font-weight: 600; }
.form__status.is-error { color: var(--orange); }

/* accordion */
.accordion details { border-bottom: 1px solid currentColor; }
.accordion details:first-child { border-top: 1px solid currentColor; }
.accordion summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-family: var(--font-body); font-size: 28px; line-height: 1; color: var(--orange); transition: transform 200ms; }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion__title { font-size: 16px; letter-spacing: -0.02em; margin: 0; color: inherit; }
.accordion--plain .accordion__title { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: var(--fs-large); font-weight: 600; }
.accordion details > p { padding-bottom: 8px; }

/* coaching */
.banner { position: relative; display: grid; place-items: center; margin-bottom: clamp(32px, 2.8vw, 40px); }
.banner__img { width: 100%; height: clamp(160px, 15.7vw, 226px); object-fit: cover; }
.banner::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45); pointer-events: none; }
.banner__title { position: absolute; z-index: 1; color: var(--white) !important; margin: 0; }
.planning { display: grid; gap: 40px 32px; }
@media (min-width: 700px) { .planning { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .planning { grid-template-columns: repeat(4, 1fr); } }
.planning .h3 { color: var(--black); }
.planning p { font-size: 16px; }
.planning .rule { margin: .6em 0 1.6em; }

/* portfolio */
.work { display: grid; gap: 24px; align-items: center; margin-top: clamp(24px, 3.3vw, 48px); }
@media (min-width: 900px) { .work { grid-template-columns: 546fr 601fr; gap: clamp(32px, 4.6vw, 66px); } .work--reverse { grid-template-columns: 601fr 546fr; } .work--reverse .col-text { order: 2; } }
.embed iframe { width: 100%; border: 0; display: block; }
.embed--video { aspect-ratio: 16 / 9; }
.embed--video iframe { height: 100%; }
.embed:empty { display: none; }
.composition__media { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.composition__media .composition__main { grid-column: 1 / -1; aspect-ratio: 546 / 300; object-fit: cover; width: 100%; }
.composition__media img { aspect-ratio: 267 / 147; object-fit: cover; width: 100%; }

/* brands */
.case__media { display: grid; gap: 20px; }
.case__media img { width: 100%; object-fit: cover; }
.case__grid { display: grid; gap: 28px 32px; margin-top: 2em; }
@media (min-width: 700px) { .case__grid { grid-template-columns: 1fr 1fr; } }
.case__grid .h4 { color: var(--black); }

/* home + workshops */
.lead-text p { font-size: var(--fs-body); }
.col-cta { display: flex; align-items: center; justify-content: flex-end; gap: 0; }
.col-cta .rule { margin: 0; flex: 0 0 auto; width: clamp(80px, 14.7vw, 212px); }
.cta-row { display: flex; align-items: center; gap: 0; margin-top: 1.5em; }
.cta-row .rule { margin: 0; }
.plain-list { list-style: none; padding: 0; }
.plain-list li { margin-bottom: .6em; }
.workshops-hero { padding-bottom: clamp(80px, 12vw, 174px); }
.workshops-hero .container--inset { padding-top: clamp(40px, 12vw, 170px); }

/* contact */
.address .h3 { color: var(--black); }
.map { min-height: 340px; height: 100%; background: var(--grey); }
.map__placeholder { display: grid; place-content: center; justify-items: center; gap: 18px; height: 100%; min-height: 340px; text-decoration: none; color: var(--black); }
.map iframe { width: 100%; height: 100%; min-height: 480px; border: 0; display: block; }

/* blog */
.blog-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 56px 32px; }
@media (min-width: 640px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card { text-align: center; }
.blog-card__img { display: block; margin-bottom: 16px; overflow: hidden; }
.blog-card__img img { width: 100%; aspect-ratio: 370 / 248; object-fit: cover; transition: transform 400ms cubic-bezier(.2,0,0,1); }
.blog-card:hover .blog-card__img img { transform: scale(1.02); }
.blog-card__date { display: block; font-size: 16px; margin-bottom: 8px; }
.blog-card__title { font-size: 16px; margin: 0 0 1em; }
.blog-card__title a { text-decoration: none; }
.blog-card__more { color: var(--orange); text-decoration: underline; text-underline-offset: 4px; }

.post__inner { width: min(100% - 2 * var(--gutter), 760px); margin: 0 auto; padding-block: var(--section-pad); }
.post__meta { font-size: 16px; margin-bottom: 1em; }
.post__title { font-size: clamp(30px, 3vw, 44px); }
.prose img { width: 100%; margin: 1.8em 0; }
.prose h2, .prose h3 { font-size: clamp(20px, 1.8vw, 26px); margin-top: 1.6em; }
.prose a { text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 3px solid var(--orange); }
.prose .embed-link a { display: inline-block; padding: 12px 18px; border: 3px solid var(--orange); color: var(--orange); text-decoration: none; font-weight: 600; }
.post__footer { margin-top: 3em; border-top: 1px solid var(--grey); padding-top: 1.5em; }
.post__author { font-weight: 600; }
.post__pager { display: flex; justify-content: space-between; gap: 24px; margin-top: 2em; }
.post__pager-link { display: grid; gap: 4px; text-decoration: none; max-width: 45%; }
.post__pager-link--next { text-align: right; margin-left: auto; }
.post__pager-link .label { margin: 0; color: var(--orange); }
.post__pager-link .t { font-family: var(--font-display); font-stretch: 112%; font-weight: 700; text-transform: uppercase; letter-spacing: -0.06em; font-size: 15px; line-height: 1.25; }

/* footer */
.site-footer { padding-block: clamp(48px, 5.5vw, 80px); }
.site-footer__inner { display: grid; gap: 36px; align-items: start; }
@media (min-width: 900px) { .site-footer__inner { grid-template-columns: 1fr auto auto; } }
.site-footer__brand img { width: 240px; margin-bottom: 20px; }
.site-footer__brand address { color: var(--grey); font-size: 15px; }
.site-footer__brand a { text-decoration: none; }
.site-footer__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer__nav a { font-family: var(--font-ui); font-weight: 700; font-size: 14.4px; letter-spacing: .02em; text-decoration: none; color: var(--grey); }
.site-footer__nav a:hover { color: var(--orange); }

/* ---------- mobile tuning ---------- */
@media (max-width: 899px) {
  .grid--intro .col-cta { justify-content: flex-start; }
  .col-cta .rule { display: none; }
  .text-right { text-align: left; }
  .grid--studio2 .media { order: 2; }
  .grid--composition .composition__media { order: 2; }
  .service-intro__media img { aspect-ratio: 4 / 3; }
}

/* =========================================================================
   Motion — calm and expensive-feeling: long expo ease-outs, masks and blurs,
   never bouncy. Everything is off for people who ask their system for less motion.
   ========================================================================= */
html { scroll-padding-top: calc(var(--header-h-compact) + 16px); }

/* page-to-page: old page sinks away, new page drifts up (Chrome/Edge/Safari) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 380ms var(--ease) both vt-out; }
::view-transition-new(root) { animation: 900ms var(--ease-expo) 80ms both vt-in; }
::view-transition-group(site-header) { animation-duration: 0s; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); filter: blur(4px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(24px); } }
/* fallback for browsers without cross-document view transitions (Firefox) */
.js-fallback-transitions main { animation: page-in 900ms var(--ease-expo) both; }
.js-fallback-transitions.is-leaving main { opacity: 0; transform: translateY(-8px); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
@keyframes page-in { from { opacity: 0; transform: translateY(24px); } }

/* reveal: headings drift up a little out of a soft blur; images simply fade in. Nothing else moves. */
.js [data-reveal="heading"] { opacity: 0; transform: translate3d(0, 14px, 0); filter: blur(6px); transition: opacity 1100ms var(--ease), transform 1300ms var(--ease-expo), filter 1100ms var(--ease); }
.js [data-reveal="heading"].is-revealed { opacity: 1; transform: none; filter: none; }
.js [data-reveal="image"] { opacity: 0; transition: opacity 1400ms var(--ease); }
.js [data-reveal="image"].is-revealed { opacity: 1; }

/* hero: image settles from a zoom, video fades up once it actually plays */
.js .hero__bg { transform: scale(1.08); opacity: 0; transition: transform 2400ms var(--ease-expo), opacity 1200ms var(--ease); }
.js .hero__bg.is-loaded { transform: scale(1); opacity: 1; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; background: #000; }
.js .hero__video { opacity: 0; transform: scale(1.04); transition: opacity 1600ms var(--ease), transform 3000ms var(--ease-expo); }
.js .hero__video.is-playing, .js .hero__video.is-poster { opacity: 1; transform: none; }
.hero--full::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.55) 100%); }
.hero__arrow { opacity: 0; animation: fade-in 1200ms var(--ease) 1400ms forwards; }
.hero__arrow img { animation: arrow-float 2.8s var(--ease) 2.6s infinite; }
@keyframes arrow-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes fade-in { to { opacity: 1; } }

/* framed images scale a touch on hover (brand book: 1.02, 400ms) */
.media, .service-intro__media, .blog-card__img, .case__media, .banner { overflow: hidden; }
@media (hover: hover) {
  .media img, .blog-card__img img, .service-intro__media img { transition: transform 900ms var(--ease-expo); }
  .media:hover img, .blog-card:hover .blog-card__img img { transform: scale(1.03); }
}

/* underlined text links: underline draws in from the left */
.prose a, .col-text a, .address a { text-decoration: none; background-image: linear-gradient(var(--orange), var(--orange)); background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 600ms var(--ease-expo); }
@media (hover: hover) { .prose a:hover, .col-text a:hover, .address a:hover { background-size: 0% 2px; background-position: 100% 100%; } }
.blog-card__more { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 2px; transition: background-size 600ms var(--ease-expo); }
.blog-card:hover .blog-card__more { background-size: 0 1px; background-position: 100% 100%; }

/* accordion opens smoothly where the browser can animate to auto height */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .accordion details::details-content { height: 0; overflow: clip; transition: height 700ms var(--ease-expo), content-visibility 700ms allow-discrete; }
  .accordion details[open]::details-content { height: auto; }
}
.accordion summary::after { transition: transform 600ms var(--ease-expo); }
.accordion details[open] > p { animation: fade-up 700ms var(--ease-expo) both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } }

/* tabs */
.tabs__tab { position: relative; overflow: hidden; isolation: isolate; transition: color 500ms var(--ease-expo); }
.tabs__panel.tab-in { animation: fade-up 700ms var(--ease-expo) both; }

/* forms */
.form input, .form textarea { transition: border-color 300ms var(--ease), box-shadow 400ms var(--ease-expo), background-color 300ms var(--ease); }
.form input:focus, .form textarea:focus { background: #fff; box-shadow: 0 0 0 4px rgba(255, 94, 26, .18); outline: none; }
.form__status:not([hidden]) { animation: fade-up 600ms var(--ease-expo) both; }

/* socials */
.socials__btn { transition: background-color 400ms var(--ease-expo), transform 400ms var(--ease-expo); }
@media (hover: hover) { .socials__btn:hover { transform: translateY(-2px); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .js [data-reveal], .js .hero__bg, .js .hero__video { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .hero__arrow { opacity: 1; animation: none; }
  .hero__arrow img { animation: none; }
  .site-header.is-hidden { transform: none; }
}

/* ---------- language switch: small segmented control, the orange thumb glides ---------- */
.lang-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; isolation: isolate; }
.lang-switch__opt { position: relative; z-index: 1; display: grid; place-items: center; min-width: 38px; height: 28px; padding: 0 10px; font-family: var(--font-ui); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; color: var(--grey); text-decoration: none; border-radius: 999px; transition: color 500ms var(--ease-expo); }
.lang-switch__opt.is-active { color: var(--white); }
a.lang-switch__opt:hover { color: var(--white); }
.lang-switch__thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--orange); transition: transform 650ms var(--ease-expo), background-color 300ms var(--ease); }
.lang-switch[data-active="nl"] .lang-switch__thumb { transform: translateX(100%); }
.lang-switch[data-active="en"].is-switching .lang-switch__thumb { transform: translateX(100%); }
.lang-switch[data-active="nl"].is-switching .lang-switch__thumb { transform: translateX(0); }
.lang-switch.is-switching .lang-switch__opt.is-active { color: var(--grey); }
.lang-switch.is-switching a.lang-switch__opt { color: var(--white); }
.lang-switch--mobile { display: none; margin-left: auto; }
@media (max-width: 899px) {
  .lang-switch--mobile { display: inline-grid; }
  .lang-switch--mobile + .menu-toggle { margin-left: 8px; }
}
body.menu-open .lang-switch--mobile { opacity: 1; }

/* ---------- events ---------- */
.events-hero .display { margin-bottom: .3em; }
.events-hero__intro { max-width: 34em; margin: 0; }
.event-card { padding-block: clamp(24px, 3vw, 40px); border-top: 1px solid rgba(0,0,0,.15); }
.event-card:first-of-type { border-top: 0; padding-top: 0; }
.event-card__media { display: block; overflow: hidden; }
.event-card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.event-card .h2 a, a.plain { color: inherit; text-decoration: none; }
.event-card__when { font-weight: 600; }
.set-lightest .event-card .h2 { color: var(--black); }
.event-date { display: inline-flex; margin: 0 0 1em; }
.event-date time { display: inline-flex; align-items: baseline; gap: .3em; font-family: var(--font-display); font-stretch: 112%; font-weight: 700; text-transform: uppercase; letter-spacing: -0.04em; color: var(--orange); }
.event-date__d { font-size: clamp(40px, 4vw, 60px); line-height: 1; }
.event-date__m { font-size: clamp(40px, 4vw, 60px); line-height: 1; }
.label--orange { color: var(--orange); }
.weekly-dates { margin: 1.6em 0 2em; }
.weekly-dates .label { margin-bottom: .6em; opacity: .7; }
.weekly-dates__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.weekly-dates__list li { padding: 6px 12px; border: 1px solid currentColor; font-size: 14px; font-weight: 600; opacity: .9; }
.weekly-dates__list li:first-child { background: var(--orange); border-color: var(--orange); color: var(--white); opacity: 1; }
.event-facts { display: grid; gap: 10px; margin: 1.6em 0 0; }
.event-facts div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.15); }
.event-facts dt { font-weight: 600; opacity: .7; }
.event-facts dd { margin: 0; }
.event-ended { display: inline-block; padding: 6px 12px; background: var(--white); color: var(--black); font-weight: 600; font-size: 14px; }
.events-past { list-style: none; padding: 0; display: grid; gap: 8px; }
.events-past span { opacity: .6; margin-left: .5em; }
.events-none { font-size: var(--fs-large); max-width: 34em; }
[hidden] { display: none !important; }
.case__more { margin-top: 2em; }
.planning p a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }

/* events overview: image runs exactly as tall as the text block (label → bottom of the button) */
.col-text a.plain, .event-card .h2 a { background-image: none; }
.event-card__media img, .events-row__media img { aspect-ratio: 3 / 2; }
@media (min-width: 900px) {
  .event-card, .events-row { align-items: stretch; }
  .event-card__body > :last-child, .events-row .col-text > :last-child { margin-bottom: 0; }
  .event-card__media, .events-row__media { position: relative; height: 100%; min-height: 280px; }
  .event-card__media img, .events-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
}

/* ---------- music coaching: week schedule ---------- */
.week { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 700px) { .week { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .week { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1300px) { .week { grid-template-columns: repeat(5, 1fr); } }
.week__day { background: #f3f2f2; padding: 24px 22px 26px; border-top: 4px solid var(--orange); display: flex; flex-direction: column; gap: 22px; }
.week__name { font-size: var(--fs-h3); color: var(--black); margin: 0; }
.week__item + .week__item { border-top: 1px solid rgba(0,0,0,.12); padding-top: 22px; }
.week__time { display: inline-block; margin: 0 0 .7em; padding: 4px 10px; background: var(--black); color: var(--white); font-size: 14px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.week__title { font-size: clamp(17px, 1.3vw, 20px); letter-spacing: -0.04em; margin: 0 0 .2em; color: var(--black); }
.week__who { font-size: 14px; font-weight: 600; color: var(--orange-dark); margin: 0 0 .6em; }
.week__text { font-size: 15px; margin: 0; }
.week__link { display: inline-block; margin-top: .8em; font-weight: 600; font-size: 15px; color: var(--orange-dark); text-decoration: none; }
.week__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- about: spaces, gallery, portfolio ---------- */
.spaces { display: grid; gap: 28px 40px; margin: 1.6em 0 clamp(36px, 4vw, 56px); }
@media (min-width: 900px) { .spaces { grid-template-columns: repeat(3, 1fr); } }
.spaces__item .h3 { margin-bottom: .4em; }
.spaces__item p { margin: 0; max-width: 34em; }

.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(120px, 34vw, 220px); grid-auto-flow: dense; gap: 8px; }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 15vw, 240px); gap: 12px; } }
.gallery__item { overflow: hidden; background: #1c1c1c; }
.gallery__item a { display: block; height: 100%; cursor: zoom-in; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-expo), opacity 400ms var(--ease); }
@media (hover: hover) { .gallery__item a:hover img { transform: scale(1.04); } }
.gallery__item--1 { grid-column: span 2; grid-row: span 2; }  /* 1 big + 4 small = exactly 2 rows (desktop) or 4 rows (mobile) */

/* hover a space → its photos light up, the rest steps back */
.spaces__item { transition: opacity 500ms var(--ease); }
.gallery__item img { transition: transform 900ms var(--ease-expo), opacity 600ms var(--ease), filter 600ms var(--ease); }
@media (hover: hover) {
  .spaces__item { cursor: default; }
  #studios:has(.spaces__item:hover) .spaces__item:not(:hover) { opacity: .45; }
  #studios:has(.spaces__item[data-space="studio1"]:hover) .gallery__item:not([data-space="studio1"]) img,
  #studios:has(.spaces__item[data-space="studio2"]:hover) .gallery__item:not([data-space="studio2"]) img,
  #studios:has(.spaces__item[data-space="liverooms"]:hover) .gallery__item:not([data-space="liverooms"]) img { opacity: .18; filter: grayscale(1); }
  #studios:has(.spaces__item[data-space="studio1"]:hover) .gallery__item[data-space="studio1"] img,
  #studios:has(.spaces__item[data-space="studio2"]:hover) .gallery__item[data-space="studio2"] img,
  #studios:has(.spaces__item[data-space="liverooms"]:hover) .gallery__item[data-space="liverooms"] img { transform: scale(1.04); }
  #studios:has(.spaces__item[data-space="studio1"]:hover) .gallery__item[data-space="studio1"],
  #studios:has(.spaces__item[data-space="studio2"]:hover) .gallery__item[data-space="studio2"],
  #studios:has(.spaces__item[data-space="liverooms"]:hover) .gallery__item[data-space="liverooms"] { outline: 2px solid var(--orange); outline-offset: -2px; }
}

.portfolio { align-items: start; }
.portfolio .h2 { color: var(--black); }
.credits { list-style: none; padding: 0; margin: 0; }
.credits li { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,.15); }
.credits li:first-child { border-top: 1px solid rgba(0,0,0,.15); }
.credits strong { font-weight: 700; }
.credits span { font-size: 15px; opacity: .75; }
.credits a { color: inherit; }
.embed--playlist iframe { display: block; width: 100%; border: 0; border-radius: 12px; }
@media (max-width: 899px) { .embed--playlist iframe { height: 452px; } }

/* lightbox */
.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8,8,8,.94); color: var(--white); display: none; place-items: center; opacity: 0; transition: opacity 350ms var(--ease), display 350ms allow-discrete, overlay 350ms allow-discrete; }
.lightbox[open] { display: grid; opacity: 1; }
@starting-style { .lightbox[open] { opacity: 0; } }
.lightbox::backdrop { background: transparent; }
.lightbox__fig { margin: 0; display: grid; gap: 12px; justify-items: center; max-width: min(92vw, 1600px); }
.lightbox__img { max-width: 100%; max-height: 82vh; width: auto; height: auto; object-fit: contain; transition: opacity 250ms var(--ease); }
.lightbox__img.is-loading { opacity: .25; }
.lightbox__cap { font-size: 14px; opacity: .75; text-align: center; padding-inline: 16px; }
.lightbox__btn { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border: 0; background: rgba(255,255,255,.08); color: var(--white); font-size: 24px; line-height: 1; cursor: pointer; border-radius: 50%; transition: background 300ms var(--ease); }
.lightbox__btn:hover, .lightbox__btn:focus-visible { background: var(--orange); }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 16px; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 16px; top: 50%; translate: 0 -50%; }
@media (max-width: 599px) { .lightbox__prev, .lightbox__next { top: auto; bottom: 16px; translate: none; } }
body.lightbox-open { overflow: hidden; }

/* ---------- about: sync, commercials & composition ---------- */
.work-grid { list-style: none; margin: 1.6em 0 0; padding: 0; display: grid; gap: 40px 32px; }
@media (min-width: 800px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
.work-card__media { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #111; overflow: hidden; aspect-ratio: 16 / 9; margin-bottom: 18px; }
.work-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-expo); }
.work-card__media--video { cursor: pointer; }
.work-card__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (hover: hover) { .work-card__media:hover img { transform: scale(1.04); } }
.work-card__play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; translate: -50% -50%; border-radius: 50%; background: var(--orange); transition: scale 400ms var(--ease-expo); }
.work-card__play::after { content: ""; position: absolute; left: 31px; top: 24px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--white); }
.work-card__media--video:hover .work-card__play, .work-card__media--video:focus-visible .work-card__play { scale: 1.1; }
.work-card__title { font-size: clamp(20px, 1.8vw, 26px); color: var(--white); margin: 0 0 .25em; letter-spacing: -0.05em; }
.work-card__role { color: var(--orange); font-weight: 600; font-size: 15px; margin: 0 0 .6em; }
.work-card__text { margin: 0; max-width: 36em; opacity: .85; }
.work-card__link { display: inline-block; margin-top: .8em; color: var(--white); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--orange); }

/* posters (square, with text) are shown whole on black instead of cropped */
.media--poster { background: #000; }
.media--poster img, .event-card__media.media--poster img, .events-row__media.media--poster img { object-fit: contain !important; }
.event-detail .media--poster img { aspect-ratio: 1 / 1; height: auto; }