/* ==========================================================================
   Loudlab — loudlab.agency
   Palette: change colours ONLY in the :root block below.
   Sections pick a theme (.t-pink / .t-white / .t-black) that remaps
   --bg, --fg, --mute, --line, --hi from these four tokens.
   ========================================================================== */

:root {
  --accent: #ff007a;  /* primary pink: backgrounds and the loudest moments */
  --violet: #ff57a7;  /* secondary pink: small accents on black, hover fills */
  --black:  #000000;
  --white:  #ffffff;
  --blush:  #ffc9df;  /* light pink: calmer sections */

  --font-display: "Clash Display", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(16px, 3vw, 40px);
  --maxw: 1680px;
}

.t-pink  { --bg: var(--accent); --fg: var(--black); --mute: rgb(0 0 0 / .66); --line: var(--black); --hi: var(--white); --lab: var(--black); --pill-bg: var(--black); --pill-fg: var(--white); --roll: var(--white); }
.t-blush { --bg: var(--blush); --fg: var(--black); --mute: rgb(0 0 0 / .6); --line: var(--black); --hi: var(--accent); --lab: var(--black); --pill-bg: var(--black); --pill-fg: var(--white); --roll: var(--accent); }
.t-white { --bg: var(--white);  --fg: var(--black); --mute: rgb(0 0 0 / .55); --line: var(--black); --hi: var(--accent); --lab: var(--black); --pill-bg: var(--black); --pill-fg: var(--white); --roll: var(--accent); }
.t-black { --bg: var(--black);  --fg: var(--white); --mute: rgb(255 255 255 / .66); --line: rgb(255 255 255 / .3); --hi: var(--accent); --lab: var(--violet); --pill-bg: var(--accent); --pill-fg: var(--black); --roll: var(--accent); }

@font-face { font-family: "Clash Display"; src: url("../fonts/ClashDisplay-Variable.woff2") format("woff2"); font-weight: 200 700; font-display: swap; }
@font-face { font-family: "Clash Outline"; src: url("../fonts/ClashDisplay-600-static.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../fonts/Satoshi-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-400.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--black); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
h1, h2, h3, .fw__lead { word-spacing: .08em; }
body {
  margin: 0; background: var(--black); color: var(--fg, var(--white));
  font: 400 clamp(17px, 1.05vw + 12px, 18px)/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }
.t-pink :focus-visible { outline-color: var(--white); }
.t-blush :focus-visible { outline-color: var(--black); }
.t-black :focus-visible, .t-white :focus-visible { outline-color: var(--accent); }
::selection { background: var(--black); color: var(--white); }

section, footer, .themed { background: var(--bg); color: var(--fg); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only, .sr-only-keep { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 400; background: var(--white); color: var(--black); padding: 10px 16px; border-radius: 99px; transition: top .2s; }
.skip:focus { top: 12px; }

.mono, .label { font: 400 12px/1.35 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.label { color: var(--lab); }
@media (min-width: 640px) { .mono, .label { font-size: 13px; } }

.vert { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }

.section { position: relative; padding: clamp(88px, 16vh, 220px) var(--gutter); }
.section > * { max-width: var(--maxw); margin-inline: auto; }
.h-xl { font: 600 clamp(40px, 7vw, 124px)/.9 var(--font-display); letter-spacing: -.04em; text-transform: uppercase; }

/* underline link */
.link { position: relative; display: inline-block; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform-origin: left; transition: transform .5s var(--ease); }
.link:hover::after { animation: underl .7s var(--ease); }
@keyframes underl { 0% { transform: scaleX(1); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: right; } 51% { transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }

/* paper grain, ~4% */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 350; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

/* split-word reveal helpers */
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.swi { display: inline-block; }
html.motion [data-split] .swi { transform: translateY(112%); }

/* ---------- roll-over letters ---------- */
.ro { display: inline-block; overflow: hidden; vertical-align: top; height: 1.12em; line-height: 1.12; }
.ro i { display: block; font-style: normal; transition: transform .6s var(--ease); transition-delay: calc(var(--n) * 18ms); white-space: pre; }
.ro i + i { color: var(--roll, var(--hi)); }
[data-roll]:hover .ro i, [data-roll]:focus-visible .ro i { transform: translateY(-100%); }
.pill .ro i + i { color: var(--pill-fg); }

/* ---------- header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 16px var(--gutter); transition: transform .6s var(--ease); background: transparent; color: var(--fg);
}
.header.is-hidden { transform: translateY(-120%); }
.logo-fixed { position: fixed; left: var(--gutter); top: 16px; z-index: 125; display: block; color: var(--fg); }
.header__logo img { height: 26px; width: auto; }
.wm-light { display: none; }
.logo-fixed.t-black .wm-light { display: block; }
.logo-fixed.t-black .wm-dark { display: none; }
.header__clock { display: none; justify-self: end; white-space: nowrap; }
.header__nav { grid-column: 2; display: none; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--fg); border-radius: 99px; font: 500 13px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.header__nav a { padding: 10px 16px; border-radius: 99px; transition: background .3s, color .3s; }
.header__nav a:hover { background: var(--fg); color: var(--bg); }
.header__right { display: flex; justify-content: flex-end; align-items: center; gap: 18px; }
.pill { display: inline-block; white-space: nowrap; background: var(--pill-bg); color: var(--pill-fg); padding: 11px 20px; border-radius: 99px; font: 500 13px/1.12 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.header__menu { grid-column: 3; justify-self: end; padding: 10px 16px; border: 1px solid var(--fg); border-radius: 99px; }
@media (min-width: 1024px) {
  .header__nav { display: flex; }
  .header__clock { display: block; }
  .header__menu { display: none; }
}
@media (max-width: 1023px) { .header__right { display: none; } .header { grid-template-columns: 1fr auto; } .header__menu { grid-column: 2; } }
@media (min-width: 1024px) { .header__right { grid-column: 3; } .header__clock { order: -1; } }

.menu { position: fixed; inset: 0; z-index: 120; padding: 96px var(--gutter) 32px; display: flex; flex-direction: column; justify-content: space-between; }
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a { font: 600 clamp(44px, 13.5vw, 130px)/.95 var(--font-display); letter-spacing: -.04em; text-transform: uppercase; }
.header.menu-open { z-index: 130; }

/* ---------- preloader ---------- */
.preloader { display: none; position: fixed; inset: 0; z-index: 500; place-items: center; }
html.preload .preloader { display: grid; }
.preloader__inner { display: grid; justify-items: center; gap: 18px; }
.preloader__flask { width: clamp(120px, 22vw, 190px); overflow: visible; color: var(--white); }
.pl-ring { stroke-dasharray: 100; stroke-dashoffset: 100; }

/* ---------- cursor ---------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.motion .cursor {
    display: grid; position: fixed; left: 0; top: 0; z-index: 450; pointer-events: none; width: 12px; height: 12px; margin: -6px 0 0 -6px;
    border-radius: 50%; background: var(--white); mix-blend-mode: difference; place-items: center; color: var(--black); opacity: 0;
    transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), opacity .3s;
  }
  html.motion .cursor.is-on { opacity: 1; }
  html.motion .cursor.is-big { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
  .cursor__label { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: 0; transition: opacity .2s; }
  .cursor.is-big .cursor__label { opacity: 1; }
  html.motion.has-cursor, html.motion.has-cursor a, html.motion.has-cursor button { cursor: none; }
}
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 460; transform: translate(-50%, 24px); opacity: 0; pointer-events: none; background: var(--white); color: var(--black); padding: 10px 20px; border-radius: 99px; font-weight: 500; transition: transform .5s var(--ease), opacity .3s; }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 92px var(--gutter) 22px; overflow: hidden; --wave-idle: #000000; --wave-mid: #000000; --wave-hot: #ffffff; }
.hero__wave, .hero__wave-static { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__wave-static { background: url("../wave-static.svg") center / 100% 100% no-repeat; display: none; }
html:not(.js) .hero__wave-static { display: block; }
html:not(.js) .hero__wave { display: none; }
.hero__blocks { position: absolute; inset: 0; overflow: hidden; --px: 0; --py: 0; }
.hero__blocks::after { content: ""; position: absolute; inset: -50%; opacity: .16; mix-blend-mode: multiply; pointer-events: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.2 -.1'/></filter><rect width='260' height='260' filter='url(%23n)'/></svg>"); animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); } }
.blk { position: absolute; background: var(--blush); translate: calc(var(--px) * var(--k, 1) * 1px) calc(var(--py) * var(--k, 1) * 1px); transition: translate .9s var(--ease); will-change: transform; }
.blk--1 { right: 5vw; top: 11vh; width: 34vw; height: 44vh; --k: -26; animation: drift1 14s ease-in-out infinite; background: radial-gradient(circle, rgb(255 0 122 / .22) 1.4px, transparent 2px) 0 0 / 12px 12px, var(--blush); opacity: .8; }
.blk--2 { left: 36vw; top: 30vh; width: 12vw; height: 58vh; --k: 18; background: var(--blush); opacity: .75; animation: drift2 18s ease-in-out infinite; }
.blk--3 { right: 30vw; bottom: 7vh; width: 22vw; height: 20vh; --k: -40; background: repeating-linear-gradient(135deg, var(--blush) 0 14px, transparent 14px 28px); animation: drift3 16s ease-in-out infinite; }
.blk--4 { right: 2vw; bottom: 30vh; width: 11vw; height: 17vh; --k: 30; background: var(--violet); opacity: .85; animation: drift2 20s ease-in-out -6s infinite; }
.blk--5 { left: -4vw; top: 38vh; width: 14vw; height: 20vh; --k: 22; background: var(--blush); opacity: .55; animation: drift3 22s ease-in-out -9s infinite; }
@keyframes drift1 { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3.5vh) rotate(-1.2deg); } }
@keyframes drift2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4vh); } }
@keyframes drift3 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3vw); } }
@media (max-width: 1023px) { .blk--2, .blk--5 { display: none; } .blk--1 { width: 56vw; height: 30vh; top: 9vh; } .blk--3 { width: 40vw; right: 4vw; } .blk--4 { width: 24vw; height: 22vh; } }
html.motion .hero__blocks .blk { opacity: 0; transform: scaleY(.2); transform-origin: bottom; }
html.motion.is-ready .hero__blocks .blk { opacity: 1; transform: none; }
html.motion.is-ready .blk--2 { opacity: .75; } html.motion.is-ready .blk--4 { opacity: .85; } html.motion.is-ready .blk--5 { opacity: .55; }
.hero__vert { position: absolute; top: 50%; translate: 0 -50%; color: var(--fg); display: none; }
.hero__vert--l { left: calc(var(--gutter) * .45); }
.hero__vert--r { right: calc(var(--gutter) * .45); }
@media (min-width: 1024px) { .hero__vert { display: block; } }
.hero__meta { position: absolute; top: 96px; right: var(--gutter); display: none; text-align: right; }
@media (min-width: 1024px) { .hero__meta { display: block; top: auto; bottom: 22px; right: calc(var(--gutter) + 90px); } }
.hero__body { position: relative; display: grid; gap: 24px; align-items: end; padding-bottom: 26px; }
.hero__rot { margin-bottom: clamp(12px, 2vh, 22px); display: flex; flex-wrap: wrap; gap: 0 .6em; color: var(--fg); }
.rot__pre { opacity: .7; margin-right: .2em; }
.rot__w { opacity: .5; transition: opacity .3s, background .3s, color .3s; padding: 0 .35em; border-radius: 99px; margin: 0 -.35em; }
.rot__w.is-on { opacity: 1; background: var(--black); color: var(--white); }
.hero__h { font: 600 clamp(54px, min(12vw, 14vh), 250px)/.84 var(--font-display); letter-spacing: -.045em; text-transform: uppercase; }
.hero__h .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; padding-left: var(--ind, 0); }
.hero__h .line:nth-child(2) { --ind: 14vw; }
.hero__h .line:nth-child(4) { --ind: 7vw; }
.hero__h .w { display: inline-block; white-space: nowrap; }
.hero__h .ch { display: inline-block; font-variation-settings: "wght" 600; transition: font-variation-settings .45s var(--ease); }
.hero__h .line--obj { font-size: .6em; line-height: 1; margin-top: .1em; padding-left: 22vw; display: flex; align-items: center; gap: .1em; overflow: visible; }
.hero__h .line--obj .w { font-family: "Clash Outline", var(--font-display); color: transparent; -webkit-text-stroke: .03em var(--fg); letter-spacing: -.02em; min-width: 1ch; }
.caret { display: inline-block; width: .07em; height: .7em; background: var(--fg); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero__h .line--loud { font-size: .46em; color: var(--hi); margin-top: .3em; padding: .3em .5em .3em 0; margin-bottom: -.2em; letter-spacing: -.005em; word-spacing: .12em; overflow: visible; }
.hero__h .line--loud .w { line-height: 1; }
.oval { position: relative; display: inline-block; margin-left: .12em; }
.oval { isolation: isolate; }
.oval::after { content: ""; position: absolute; inset: -.18em -.34em; border: .055em solid currentColor; border-radius: 50%; rotate: -3deg; pointer-events: none; clip-path: inset(0 var(--oc, 0%) 0 0); }
.oval--fill { color: var(--white); }
.oval--fill::after { z-index: -1; background: var(--black); border-color: var(--black); }
html.motion .oval { --oc: 100%; }
html.motion .oval.is-drawn { --oc: 0%; transition: --oc 1.2s var(--ease); }
@property --oc { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
.hero__sub { max-width: 42ch; font: 500 clamp(17px, 1.3vw, 20px)/1.35 var(--font-body); }
@media (min-width: 1024px) {
  .hero__sub { position: absolute; right: 0; bottom: 26px; width: min(330px, 26vw); }
}
@media (max-width: 639px) { .hero__h .line--loud { font-size: .56em; } .hero__h .line:nth-child(2) { --ind: 8vw; } }
.hero__foot { position: relative; display: flex; justify-content: space-between; align-items: end; }
.hero__scroll { display: flex; align-items: center; gap: 12px; }
.bubble { width: 12px; height: 12px; border-radius: 50%; background: var(--fg); animation: pulse 1.6s var(--ease) infinite; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .5; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(.6); opacity: .5; } }
.hero__mark { width: clamp(44px, 5vw, 70px); height: auto; color: var(--fg); overflow: visible; }
.hero__mark .arc { animation: arc 1.333s ease-in-out infinite; }
.hero__mark .arc--2 { animation-delay: .22s; }
@keyframes arc { 0%, 100% { opacity: .25; transform: translateX(-6px); } 35% { opacity: 1; transform: translateX(0); } }

html.motion .hero__h .w:not(.is-split) { transform: translateY(118%); opacity: 0; }
html.motion .hero__h .ch { opacity: 0; transform: translateY(105%) rotate(7deg); }
html.motion .hero__sub, html.motion .hero__rot, html.motion .hero__foot, html.motion .hero__vert, html.motion .hero__meta { opacity: 0; }
html.motion.is-ready .hero__h .w:not(.is-split) { transform: none; opacity: 1; transition: transform 1.1s var(--ease), opacity .5s linear; transition-delay: calc(var(--i) * 900ms + 100ms); }
html.motion.is-ready .hero__h .ch { opacity: 1; transform: none; transition: transform 1s var(--ease) calc(var(--d) * 1ms + 150ms), opacity .5s linear calc(var(--d) * 1ms + 150ms), font-variation-settings .45s var(--ease) 0s; }
html.motion.is-ready .hero__sub { transition-delay: 5.4s !important; }
html.motion.is-ready .hero__sub, html.motion.is-ready .hero__rot, html.motion.is-ready .hero__foot, html.motion.is-ready .hero__vert, html.motion.is-ready .hero__meta { opacity: 1; transition: opacity 1s var(--ease) .8s; }

/* ---------- about ---------- */
.about { padding-block: clamp(100px, 20vh, 260px); }
.about .label { margin-bottom: clamp(28px, 5vh, 56px); display: block; }
.about__text { font: 600 clamp(30px, 6.1vw, 112px)/.98 var(--font-display); letter-spacing: -.025em; word-spacing: .1em; text-transform: uppercase; }
.about__text p + p { margin-top: .55em; font-size: .62em; line-height: 1.04; letter-spacing: -.012em; max-width: 24em; margin-left: auto; }
.about__text .oval { color: var(--hi); }
html.motion .about__text .rw { opacity: .16; }

/* ---------- framework ---------- */
.fw { max-width: none; padding-block: clamp(64px, 11vh, 140px) clamp(48px, 8vh, 96px); }
.fw__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: clamp(32px, 6vh, 72px); position: relative; }
.fw__head .label { writing-mode: vertical-rl; rotate: 180deg; align-self: stretch; }
@media (max-width: 639px) { .fw__head .label { writing-mode: horizontal-tb; rotate: 0deg; } .fw__head { flex-wrap: wrap; } }
.fw__intro { max-width: 62ch; display: grid; gap: 1.1em; color: var(--mute); margin-bottom: 0; margin-inline: auto; width: 100%; }
.fw__intro > * { max-width: 60ch; }
.fw__lead { color: var(--fg); font: 600 clamp(26px, 3vw, 44px)/1.05 var(--font-display); letter-spacing: -.025em; text-transform: uppercase; }

/* ---------- work ---------- */
.work { display: grid; gap: clamp(88px, 16vh, 200px); }
.work .fw__head { margin-bottom: 0; }
.case { display: grid; gap: 28px; align-items: center; position: relative; }
.case__media { position: relative; min-width: 0; }
.carousel { position: relative; overflow: hidden; background: var(--black); border-radius: 2px; }
.carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track li { flex: 0 0 100%; scroll-snap-align: start; }
.carousel__track img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .9s var(--ease); user-select: none; }
.carousel:hover img { transform: scale(1.03); }
.carousel.is-dragging .carousel__track { scroll-snap-type: none; }
.carousel__ctrl { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.carousel__ctrl button { font: 400 20px/1 var(--font-mono); padding: 6px 12px; border: 1px solid var(--fg); border-radius: 99px; transition: background .3s, color .3s; }
.carousel__ctrl button:hover { background: var(--fg); color: var(--bg); }
.carousel__count b { font-weight: 400; }
.case__credits { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.case__info { min-width: 0; position: relative; }
.case__no { margin-bottom: 18px; }
.case__title { font: 600 clamp(42px, 5.6vw, 104px)/.9 var(--font-display); letter-spacing: -.045em; text-transform: uppercase; margin-bottom: 22px; overflow-wrap: break-word; hyphens: none; }
.case__text { max-width: 44ch; font-weight: 500; }
.stats { display: flex; flex-wrap: wrap; gap: 20px 44px; margin-top: 32px; }
.stats div { display: flex; flex-direction: column-reverse; }
.stats dd { font: 600 clamp(36px, 4.2vw, 64px)/1 var(--font-display); letter-spacing: -.04em; color: var(--hi); text-transform: uppercase; }
.stats dt { margin-top: 6px; font: 400 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
@media (min-width: 1024px) {
  .case { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .case__media { grid-column: 1 / span 7; }
  .case__info { grid-column: 8 / span 5; }
  .case--flip .case__media { grid-column: 6 / span 7; grid-row: 1; }
  .case--flip .case__info { grid-column: 1 / span 5; grid-row: 1; }
  .case__no { position: absolute; right: 0; top: 0; writing-mode: vertical-rl; rotate: 180deg; margin: 0; }
  .case--flip .case__no { right: auto; left: auto; right: 0; }
}
html.motion .case__media { clip-path: inset(0 100% 0 0); }

/* ---------- also worked with ---------- */
.also { max-width: none; padding-inline: 0; }
.also > .label { padding-inline: var(--gutter); margin-bottom: clamp(24px, 4vh, 48px); display: block; }
.marquees { display: grid; gap: 6px; overflow: hidden; }
.marquee { overflow: hidden; display: flex; max-width: none; }
.marquee__track { display: flex; flex: none; gap: clamp(24px, 4vw, 64px); padding-right: clamp(24px, 4vw, 64px); animation: mq 60s linear infinite; will-change: transform; }
.marquee--rev .marquee__track { animation-direction: reverse; animation-duration: 70s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }
.marquee span { font: 600 clamp(56px, 10vw, 160px)/1.05 "Clash Outline", var(--font-display); paint-order: stroke fill; letter-spacing: -.045em; white-space: nowrap; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px var(--fg); transition: color .35s var(--ease), -webkit-text-stroke-color .35s; }
.marquee span:hover { color: var(--hi); -webkit-text-stroke-color: var(--hi); }

/* ---------- contact ---------- */
.contact { padding-bottom: clamp(60px, 10vh, 120px); }
.contact__h { font: 600 clamp(60px, 15vw, 300px)/.82 var(--font-display); letter-spacing: -.05em; text-transform: uppercase; }
.contact__h a { display: inline-block; }
.contact__h .ro { height: .86em; line-height: .86; }
.contact__h .sw { padding-bottom: 0; margin-bottom: 0; }
.contact__body { display: grid; gap: 28px; margin-top: clamp(32px, 6vh, 72px); }
.contact__body > p { max-width: 50ch; font: 500 clamp(18px, 1.7vw, 24px)/1.35 var(--font-body); }
.contact__links { display: flex; flex-wrap: wrap; gap: 14px 36px; font: 500 14px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
@media (min-width: 1024px) { .contact__body { grid-template-columns: 1.2fr 1fr; align-items: start; } .contact__links { flex-direction: column; } }

/* ---------- footer ---------- */
.footer { padding: clamp(56px, 10vh, 120px) var(--gutter) 22px; }
.footer > * { max-width: var(--maxw); margin-inline: auto; }
.footer__cols { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 28px 0 clamp(36px, 6vh, 64px); border-top: 1px solid var(--line); }
.footer__cols h2 { margin-bottom: 14px; }
.footer__cols p, .footer__cols li { color: var(--mute); max-width: 36ch; }
.footer__cols p + p { margin-top: 10px; }
.footer__cols li + li { margin-top: 4px; }
.footer__cols a { color: var(--fg); }
@media (min-width: 768px) { .footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } }
.footer__mark { position: relative; width: 100%; max-width: var(--maxw); margin-inline: auto; animation: bob 5s ease-in-out infinite; }
.footer__mark img { width: 100%; height: auto; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.fb { position: absolute; left: 74.6%; top: 36%; border-radius: 50%; background: var(--white); opacity: 0; animation: fbup 4.2s ease-out infinite; }
.fb--1 { width: 1.1%; aspect-ratio: 1; } .fb--2 { width: 1.5%; aspect-ratio: 1; animation-delay: 1.4s; left: 74%; } .fb--3 { width: .8%; aspect-ratio: 1; animation-delay: 2.8s; left: 75.2%; }
@keyframes fbup { 0% { transform: translateY(0) scale(.5); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-9vw) scale(1); opacity: 0; } }
.footer__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 auto; max-width: var(--maxw); padding-top: 18px; border-top: 1px solid var(--line); color: var(--mute); }
.footer__bar a { color: var(--fg); }
.totop { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: var(--black); display: grid; place-items: center; font-size: 22px; transition: transform .5s var(--ease), background .3s; }
.totop:hover { transform: translateY(-6px); background: var(--white); }

/* ---------- reduced motion / no JS ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__wave { display: none; }
  .hero__wave-static { display: block; }
  .marquees { display: none; }
  .also__list { position: static; width: auto; height: auto; margin: 0 auto; clip: auto; overflow: visible; white-space: normal; display: flex; flex-wrap: wrap; gap: 8px 36px; padding: 0 var(--gutter); max-width: var(--maxw); font: 600 clamp(32px, 6vw, 80px)/1.05 var(--font-display); letter-spacing: -.04em; text-transform: uppercase; }
  .bubble, .hero__mark .arc, .footer__mark, .fb, .fw__flask .wave, .fw__flask .lb { animation: none; }
  .fb { display: none; }
  .blk, .hero__blocks::after { animation: none !important; }
  * { transition-duration: .01ms !important; }
}

/* case links, contact heading */
.case__link { margin-top: 28px; display: inline-block; font-weight: 500; }
.contact__h a { display: flex; flex-wrap: wrap; }
.contact__h .brk { flex-basis: 100%; height: 0; }
.contact__h .roll-last { margin-left: auto; }

/* alignment fixes */
.fw__head { width: 100%; }
.section > .fw__intro { margin-left: max(0px, calc((100% - var(--maxw)) / 2)); margin-right: auto; }