:root {
  --black: #080a0c;
  --ink: #111315;
  --paper: #f3f0e9;
  --white: #fcfbf7;
  --blue: #3fa9f5;
  --blue-deep: #0057ff;
  --acid: #bcff2e;
  --peach: #f6cda7;
  --line: rgba(17, 19, 21, 0.2);
  --pad: clamp(1.25rem, 4.2vw, 4.8rem);
  --section-y: clamp(7rem, 12vw, 12.5rem);
  --display: "Anton", Impact, sans-serif;
  --body: "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); letter-spacing: -0.008em; overflow-x: hidden; }
body.menu-open,
body.dialog-open { overflow: hidden; }
button,
a { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
button { border: 0; }
a { text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { color: var(--black); background: var(--acid); }

.sr-only,
.skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; z-index: 300; top: 1rem; left: 1rem; border-radius: 999px; padding: 0.8rem 1rem; color: var(--black); background: var(--white); }
.grain { position: fixed; z-index: 250; inset: 0; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.page-progress { position: fixed; z-index: 210; top: 0; left: 0; width: 100%; height: 3px; background: transparent; }
.page-progress span { display: block; width: 100%; height: 100%; background: var(--acid); transform: scaleX(0); transform-origin: left center; }
.section-pad { padding: var(--section-y) var(--pad); }

.site-header { position: fixed; z-index: 200; top: 0; left: 0; right: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); align-items: center; gap: clamp(1rem, 2vw, 2.25rem); padding: 0.75rem var(--pad); color: var(--white); transition: padding 250ms ease, background 250ms ease, color 250ms ease, box-shadow 250ms ease; }
.site-header.scrolled { padding-block: 0.45rem; color: var(--ink); background: rgba(243, 240, 233, 0.88); box-shadow: 0 1px rgba(17,19,21,0.1); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; width: fit-content; }
.brand img { width: clamp(7.7rem, 10vw, 9rem); height: 3.25rem; object-fit: contain; object-position: left center; }
.desktop-nav { display: flex; gap: clamp(1.75rem, 3vw, 3.25rem); align-items: center; justify-content: center; font-size: 0.84rem; font-weight: 600; }
.desktop-nav a { position: relative; padding-block: 0.6rem; }
.desktop-nav a::after { content: ""; position: absolute; right: 100%; bottom: 0.4rem; left: 0; height: 1px; background: currentColor; transition: right 220ms ease; }
.desktop-nav a:hover::after { right: 0; }
.language-switch { display: inline-flex; align-items: center; gap: 0.12rem; justify-self: center; border: 1px solid rgba(255,255,255,0.42); border-radius: 999px; padding: 0.2rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; }
.language-switch > span { opacity: 0.35; }
.language-switch button { display: grid; min-width: 2rem; min-height: 2rem; place-items: center; border-radius: 999px; padding: 0.2rem; color: inherit; background: transparent; cursor: pointer; transition: color 180ms ease, background 180ms ease; }
.language-switch button[aria-pressed="true"] { color: var(--black); background: var(--acid); }
.language-switch button:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
.site-header.scrolled .language-switch { border-color: rgba(17,19,21,0.3); }
.header-cta { justify-self: end; display: inline-flex; align-items: center; gap: 1rem; border: 1px solid rgba(255,255,255,0.55); border-radius: 999px; padding: 0.7rem 0.85rem 0.7rem 1rem; font-size: 0.82rem; font-weight: 600; transition: color 220ms ease, background 220ms ease, border-color 220ms ease, transform 180ms ease; }
.site-header.scrolled .header-cta { border-color: rgba(17,19,21,0.35); }
.header-cta:hover { color: var(--black); border-color: var(--acid); background: var(--acid); }
.menu-toggle,
.mobile-nav { display: none; }

.hero { --mx: 72%; --my: 35%; position: relative; isolation: isolate; display: flex; min-height: 100svh; flex-direction: column; overflow: hidden; padding: 7.3rem var(--pad) 0; color: var(--white); background: linear-gradient(145deg, #041b35 0%, #063b77 54%, #087fc2 100%); }
.hero-spotlight { position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle 38rem at var(--mx) var(--my), rgba(104,202,255,0.48), transparent 68%); }
.hero::before { content: ""; position: absolute; z-index: -1; top: -35%; right: -12%; width: 46rem; height: 46rem; border: 1px solid rgba(63,169,245,0.4); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(63,169,245,0.025), 0 0 0 10rem rgba(63,169,245,0.018); }
.hero-topline { position: relative; z-index: 4; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,0.22); padding-top: 0.9rem; font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase; }
.hero-copy { position: relative; z-index: 3; margin-top: clamp(3rem, 6vh, 5.25rem); }
.hero-kicker { margin: 0 0 1.65rem; color: var(--blue); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.hero-title { margin: 0; font: 400 clamp(5.5rem, 13.8vw, 13.5rem)/0.82 var(--display); letter-spacing: -0.02em; }
.hero-title span { display: block; width: fit-content; }
.hero-title .outline { color: transparent; -webkit-text-stroke: 1.5px var(--blue); transform: translateX(8vw); }
.hero-title span:last-child { margin-left: 1.5vw; color: var(--acid); }
html[lang="en"] .hero-title { font-size: clamp(5rem, 12.5vw, 12rem); }
.hero-art { --rx: 0deg; --ry: 0deg; --tx: 0px; --ty: 0px; position: absolute; z-index: 2; right: 5vw; top: 29%; width: clamp(18rem, 32vw, 34rem); transform: perspective(900px) translate3d(var(--tx), var(--ty), 0) rotateX(var(--rx)) rotateY(var(--ry)) rotate(4deg); transform-style: preserve-3d; transition: transform 240ms cubic-bezier(.2,.75,.2,1); }
.hero-art-frame { aspect-ratio: 3 / 2; overflow: hidden; border: 0.35rem solid var(--white); box-shadow: 1.3rem 1.3rem 0 var(--blue); }
.hero-art-frame img { display: block; width: 100%; height: 100%; object-fit: contain; filter: saturate(0.9) contrast(1.04); }
.art-label { position: absolute; z-index: 3; border: 1px solid var(--black); padding: 0.65rem; color: var(--black); background: var(--acid); font: 400 1.1rem/0.9 var(--display); letter-spacing: 0.02em; box-shadow: 0.35rem 0.35rem 0 var(--black); }
.label-a { top: 10%; left: -13%; transform: rotate(-8deg) translateZ(35px); }
.label-b { right: -14%; bottom: 12%; transform: rotate(8deg) translateZ(45px); font-size: 0.9rem; }
.art-star { position: absolute; top: -3rem; right: 0; color: var(--blue); font-size: 4.5rem; line-height: 1; transform: translateZ(55px); }
.hero-footer { position: relative; z-index: 5; display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem; margin-top: auto; padding: 4rem 0 2.5rem; }
.hero-footer > p { max-width: 35rem; margin: 0; color: rgba(255,255,255,0.72); font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.65; }
.circle-link { display: flex; width: 7.7rem; aspect-ratio: 1; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,0.45); border-radius: 50%; padding: 1.1rem; font-size: 0.8rem; line-height: 1.05; transition: color 220ms ease, background 220ms ease, transform 180ms ease; }
.circle-link b { font-size: 1.4rem; font-weight: 400; }
.circle-link:hover { color: var(--black); background: var(--acid); }
.hero-ticker { position: relative; z-index: 6; width: calc(100% + 2 * var(--pad)); margin-left: calc(-1 * var(--pad)); overflow: hidden; border-block: 1px solid rgba(255,255,255,0.18); color: var(--black); background: var(--blue); }
.hero-ticker div { display: flex; width: max-content; align-items: center; gap: 1.1rem; padding: 0.55rem 0; animation: ticker 24s linear infinite; }
.hero-ticker span { font: 400 1.6rem/1 var(--display); letter-spacing: 0.03em; }
.hero-ticker i { font-style: normal; }
@keyframes ticker { to { transform: translateX(-50%); } }

.section-tag { display: flex; gap: 1rem; align-items: center; margin-bottom: clamp(4rem, 7.5vw, 7.5rem); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.section-tag::after { content: ""; width: 4rem; height: 1px; background: currentColor; opacity: 0.35; }
.section-tag span { display: grid; width: 2rem; aspect-ratio: 1; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 0.68rem; }
.section-tag.light { color: var(--white); }
.section-tag.dark { color: var(--black); }

.manifesto { color: var(--ink); background: var(--paper); }
.manifesto-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 0.65fr); gap: clamp(3rem, 8vw, 10rem); align-items: end; }
.manifesto h2 { margin: 0; font: 400 clamp(3.6rem, 8.7vw, 9.2rem)/0.92 var(--display); letter-spacing: -0.02em; }
.manifesto h2 em { color: #0068b8; font-style: normal; }
.manifesto h2 mark { position: relative; color: var(--paper); background: var(--ink); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding-inline: 0.15em; }
.manifesto-side > p { margin: 0 0 3.75rem; font-size: clamp(1.05rem, 1.45vw, 1.3rem); line-height: 1.68; }
.manifesto-note { display: grid; grid-template-columns: 3.8rem 1fr; gap: 1.2rem; align-items: center; border-top: 1px solid var(--line); padding-top: 1rem; }
.manifesto-note > span { display: grid; width: 3.5rem; aspect-ratio: 1; place-items: center; border-radius: 50%; color: var(--white); background: var(--blue-deep); font-size: 1.3rem; }
.manifesto-note p { margin: 0; font-size: 0.82rem; font-weight: 600; line-height: 1.45; text-transform: uppercase; }

.collaborations { color: var(--ink); background: #dff3ff; border-top: 1px solid rgba(17,19,21,0.12); }
.collaborations-intro { padding-bottom: clamp(4rem, 6vw, 6rem); }
.collaborations-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.34fr); gap: 4rem; align-items: end; }
.collaborations-copy h2 { margin: 0; font: 400 clamp(4.5rem, 10vw, 10rem)/0.86 var(--display); letter-spacing: -0.025em; }
.collaborations-copy h2 span { color: var(--blue-deep); }
.collaborations-copy > p { margin: 0 0 0.8rem; font-size: 1.05rem; line-height: 1.68; }
.logo-rail { overflow: hidden; border-block: 1px solid rgba(17,19,21,0.24); background: var(--white); }
.logo-track { display: flex; width: max-content; animation: logo-flow 34s linear infinite; }
.logo-rail:hover .logo-track { animation-play-state: paused; }
.logo-set { display: flex; align-items: stretch; }
.logo-set > span { display: grid; min-width: clamp(12rem, 17vw, 18rem); min-height: 8.5rem; place-items: center; border-right: 1px solid rgba(17,19,21,0.18); padding: 1.5rem; text-align: center; white-space: nowrap; transition: color 220ms ease, background 220ms ease, transform 220ms ease; }
.logo-set > span:hover { color: var(--white); background: var(--blue-deep); transform: translateY(-0.25rem); }
.logo-daam { color: #e3b400; font: 400 2.2rem/1 var(--body); letter-spacing: -0.08em; }
.logo-nextnest { font: 600 1.65rem/1 var(--body); letter-spacing: 0.13em; }
.logo-beyond { font: 600 1.25rem/1 var(--body); font-style: italic; letter-spacing: -0.04em; }
.logo-wow { font: 400 2rem/1 var(--display); letter-spacing: 0.02em; }
.logo-zampy { font: 600 2.5rem/1 Georgia, serif; font-style: italic; }
.logo-pasinetti { font: 500 1.05rem/1 var(--body); letter-spacing: 0.15em; }
.logo-research { max-width: 18rem; font: 400 1.45rem/0.9 var(--display); white-space: normal !important; }
@keyframes logo-flow { to { transform: translateX(-50%); } }

.studio-numbers { color: var(--ink); background: var(--paper); }
.numbers-head { display: grid; grid-template-columns: minmax(16rem, 0.4fr) minmax(0, 1fr); gap: 4rem; align-items: end; margin-bottom: clamp(3rem, 5vw, 5rem); }
.numbers-head .section-tag { margin: 0; }
.numbers-head > p { justify-self: end; max-width: 43rem; margin: 0; font-size: clamp(1.3rem, 2.4vw, 2.2rem); font-weight: 500; line-height: 1.28; text-align: right; }
.number-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.number-card { position: relative; display: flex; min-height: 23rem; flex-direction: column; border: 1px solid rgba(17,19,21,0.18); border-radius: 1.1rem; padding: clamp(1.35rem, 2.2vw, 2.2rem); overflow: hidden; background: var(--white); box-shadow: 0 0.5rem 1.6rem rgba(21,69,216,0.06); transition: color 280ms ease, background 280ms ease, transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease; }
.number-card::after { content: "↗"; position: absolute; top: 1.5rem; right: 1.5rem; display: grid; width: 2.4rem; aspect-ratio: 1; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 0.8rem; opacity: 0.5; }
.number-card:hover { color: var(--white); border-color: var(--blue-deep); background: var(--blue-deep); box-shadow: 0 1.3rem 2.8rem rgba(0,87,255,0.2); transform: translateY(-0.55rem); }
.number-card strong { margin-bottom: auto; color: var(--blue-deep); font: 400 clamp(4.5rem, 6.3vw, 7rem)/0.9 var(--display); transition: color 280ms ease; }
.number-card h3 { margin: 3.2rem 0 0.85rem; font-size: 0.84rem; letter-spacing: 0.06em; text-transform: uppercase; }
.number-card p { margin: 0; color: rgba(17,19,21,0.62); font-size: 0.88rem; line-height: 1.55; transition: color 280ms ease; }
.number-card:hover strong { color: var(--acid); }
.number-card:hover p { color: rgba(255,255,255,0.82); }

.work { color: var(--ink); background: #dff3ff; }
.work-heading { padding-bottom: clamp(4rem, 7vw, 7rem); }
.work-heading-row { display: grid; grid-template-columns: 1fr minmax(18rem, 0.38fr); gap: 4rem; align-items: end; }
.work-heading h2 { margin: 0; font: 400 clamp(5rem, 13vw, 13rem)/0.82 var(--display); letter-spacing: -0.025em; }
.work-heading h2 span { color: transparent; -webkit-text-stroke: 1.5px var(--blue-deep); }
.work-heading-row > p { max-width: 29rem; margin: 0 0 1rem; color: rgba(17,19,21,0.68); font-size: 1.05rem; line-height: 1.68; }

.case { position: relative; display: grid; min-height: 46rem; grid-template-columns: minmax(17rem, 0.42fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; padding: clamp(5rem, 8vw, 8rem) var(--pad); overflow: hidden; color: var(--ink); border-top: 1px solid rgba(17,19,21,0.2); }
.case.is-reverse { grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.42fr); }
.case.is-reverse .case-meta { order: 2; }
.case.is-reverse .case-collage { order: 1; }
.case-daam { background: #ffd829; }
.case-nextnest { color: var(--white); background: #182936; }
.case-pasinetti { background: #e9e4db; }
.case-beyond { background: var(--acid); }
.case::after { content: ""; position: absolute; right: -8vw; bottom: -18vw; width: 36vw; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; opacity: 0.12; box-shadow: 0 0 0 5vw currentColor, 0 0 0 10vw currentColor; pointer-events: none; }
.case-meta { position: relative; z-index: 3; }
.case-meta > p:first-child { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid currentColor; padding-bottom: 0.75rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.case-meta h3 { margin: 2.4rem 0; font: 400 clamp(4.5rem, 8vw, 8rem)/0.86 var(--display); letter-spacing: -0.018em; }
.case-copy { max-width: 28rem; margin: 0 0 2.6rem; font-size: 1.05rem; line-height: 1.68; }
.case-open { display: inline-flex; align-items: center; gap: 1.8rem; border: 1px solid currentColor; border-radius: 999px; padding: 0.85rem 1rem; color: inherit; background: transparent; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: gap 220ms ease, color 220ms ease, background 220ms ease; }
.case-open:hover { gap: 2.4rem; color: var(--white); background: var(--ink); }
.case-nextnest .case-open:hover { color: var(--ink); background: var(--white); }
.case-collage { --rx: 0deg; --ry: 0deg; --tx: 0px; --ty: 0px; position: relative; z-index: 2; isolation: isolate; min-height: clamp(30rem, 50vw, 47rem); padding: 0; color: inherit; background: transparent; cursor: pointer; transform: perspective(1200px) translate3d(var(--tx), var(--ty), 0) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform 250ms cubic-bezier(.2,.75,.2,1); }
.case-collage::before { content: ""; position: absolute; z-index: -1; inset: 7% 4% 5% 2%; border: 1px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.12); box-shadow: 0 2rem 4rem rgba(0,0,0,0.12); transform: rotate(-2.4deg) translateZ(-20px); }
.case-collage:focus-visible { outline: 3px solid var(--white); outline-offset: 0.55rem; }
.shot { position: absolute; object-fit: cover; object-position: center; border: clamp(0.3rem, 0.5vw, 0.5rem) solid var(--white); border-radius: 0.15rem; box-shadow: 0 1.8rem 4rem rgba(0,0,0,0.24); filter: saturate(0.98) contrast(1.02); transition: transform 420ms cubic-bezier(.2,.75,.2,1), filter 350ms ease, box-shadow 350ms ease; }
.shot-main { z-index: 2; top: 7%; left: 3%; width: 70%; height: 76%; transform: rotate(-2.5deg) translateZ(32px); }
.shot-top { z-index: 1; top: 0; right: 0; width: 43%; height: 43%; transform: rotate(4deg) translateZ(12px); }
.shot-bottom { z-index: 3; right: 3%; bottom: 0; width: 46%; height: 44%; transform: rotate(2deg) translateZ(55px); }
.case-collage:hover .shot { filter: saturate(1.05) contrast(1.03); box-shadow: 0 2.2rem 4.5rem rgba(0,0,0,0.28); }
.case-collage:hover .shot-main { transform: rotate(-4deg) translate3d(-0.55rem,-0.5rem,32px) scale(1.015); }
.case-collage:hover .shot-top { transform: rotate(6deg) translate3d(0.55rem,-0.4rem,12px); }
.case-collage:hover .shot-bottom { transform: rotate(-0.5deg) translate3d(0.45rem,0.65rem,55px); }

.side-projects { background: var(--paper); color: var(--ink); }
.side-projects-head { display: flex; justify-content: space-between; gap: 2rem; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.side-projects-head p { margin: 0; font: 400 clamp(3.8rem, 8vw, 8rem)/1 var(--display); text-transform: uppercase; }
.side-projects-head span { font-size: 0.8rem; text-transform: uppercase; }
.side-project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.35rem; margin-top: 1.35rem; }
.mini-project { --rx: 0deg; --ry: 0deg; --tx: 0px; --ty: 0px; display: flex; min-height: 36rem; flex-direction: column; border: 1px solid var(--ink); padding: 1rem; transform: perspective(1000px) translate3d(var(--tx), var(--ty), 0) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform 230ms ease, box-shadow 230ms ease; }
.mini-project:hover { box-shadow: 0.75rem 0.75rem 0 var(--blue); }
.mini-project:focus-visible { outline: 3px solid var(--blue); outline-offset: 0.45rem; }
.mini-index { font-size: 0.75rem; font-weight: 600; }
.mini-art { position: relative; display: grid; min-height: 16rem; flex: 1; place-items: center; margin-block: 1rem; overflow: hidden; border: 1px solid currentColor; }
.mini-copy { border-top: 1px solid currentColor; padding-top: 1.25rem; }
.mini-copy p { margin: 0 0 1rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
.mini-copy h3 { margin: 0 0 0.9rem; font: 400 clamp(2rem, 3vw, 3rem)/1 var(--display); }
.mini-copy > span { display: block; max-width: 28rem; font-size: 0.9rem; line-height: 1.62; }
.mini-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; border-top: 1px solid rgba(255,255,255,0.42); padding-top: 1rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.mini-link span { font-size: 1.05rem; transition: transform 200ms ease; }
.mini-wow:hover .mini-link span { transform: translate(0.2rem, -0.2rem); }
.mini-wow { color: white; background: #1545d8; }
.mini-wow .mini-art span { position: absolute; top: 12%; left: 7%; font: 400 clamp(4rem, 7vw, 7rem)/1 var(--display); }
.mini-wow .mini-art b { position: absolute; right: 7%; bottom: 8%; font: 400 clamp(3rem, 6vw, 6rem)/1 var(--display); }
.mini-wow .mini-art i { color: var(--acid); font-size: 6rem; font-style: normal; }
.mini-zampy { color: #3d3026; background: #ffae4d; }
.mini-zampy .mini-art span { display: grid; width: 7rem; aspect-ratio: 1; place-items: center; border-radius: 43% 57% 38% 62%; color: #ffae4d; background: #3d3026; font: 400 5.5rem/1 var(--display); transform: rotate(-8deg); }
.mini-zampy .mini-art b { position: absolute; bottom: 8%; font: 400 4rem/1 var(--display); letter-spacing: -0.03em; }
.mini-zampy .mini-art i { position: absolute; top: 8%; right: 8%; font-size: 2rem; font-style: normal; }
.mini-research { color: var(--white); background: var(--ink); }
.mini-research .mini-art span { position: absolute; top: 7%; left: 7%; color: var(--blue); font: 400 4rem/1 Georgia, serif; }
.mini-research .mini-art b { position: absolute; bottom: 10%; left: 7%; font: 400 3.2rem/0.82 var(--display); }
.mini-research .mini-art i { position: absolute; top: 8%; right: 7%; font-size: 0.8rem; font-style: normal; writing-mode: vertical-rl; }

.services { color: var(--white); background: linear-gradient(145deg, #0057ff 0%, #087fc2 100%); }
.services-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.35fr); gap: 4rem; align-items: end; }
.services-head h2 { margin: 0; font: 400 clamp(4.4rem, 10vw, 10rem)/0.87 var(--display); letter-spacing: -0.025em; }
.services-head h2 span { color: var(--acid); }
.services-head > p { margin: 0 0 0.8rem; font-size: 1.05rem; line-height: 1.68; }
.service-list { margin-top: clamp(4rem, 8vw, 8rem); border-top: 1px solid rgba(255,255,255,0.45); }
.service-item { border-bottom: 1px solid rgba(255,255,255,0.45); }
.service-item > button { display: grid; width: 100%; grid-template-columns: 3.5rem 1fr 3rem; align-items: center; padding: clamp(1.4rem, 2.4vw, 2rem) 0; text-align: left; color: inherit; background: transparent; cursor: pointer; }
.service-item > button > span { font-size: 0.75rem; }
.service-item h3 { margin: 0; font: 400 clamp(2.8rem, 6vw, 6rem)/1 var(--display); letter-spacing: -0.02em; }
.service-item > button i { display: grid; width: 2.7rem; aspect-ratio: 1; place-items: center; justify-self: end; border: 1px solid currentColor; border-radius: 50%; font: 400 1.5rem/1 var(--body); font-style: normal; transition: transform 300ms ease, color 220ms ease, background 220ms ease; }
.service-item > button:hover i,
.service-item.is-open > button i { color: var(--black); background: var(--acid); transform: rotate(90deg); }
.service-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 0.4rem 3rem 3.25rem 3.5rem; overflow: hidden; }
.service-detail[hidden] { display: none; }
.service-detail p { max-width: 34rem; margin: 0; color: rgba(255,255,255,0.8); font-size: 1.05rem; line-height: 1.7; }
.service-detail ul { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.service-detail li { border: 1px solid rgba(255,255,255,0.55); border-radius: 999px; padding: 0.55rem 0.8rem; font-size: 0.78rem; }

.method { background: var(--paper); }
.method-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.34fr); gap: 4rem; align-items: end; }
.method-intro h2 { margin: 0; font: 400 clamp(4.5rem, 10vw, 10rem)/0.88 var(--display); letter-spacing: -0.025em; }
.method-intro h2 span { color: transparent; -webkit-text-stroke: 1.5px var(--blue); }
.method-intro > p { margin: 0 0 0.8rem; font-size: 1.05rem; line-height: 1.68; }
.method-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: clamp(4rem, 8vw, 8rem) 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.method-steps li { min-height: 22rem; padding: 1rem; border-right: 1px solid var(--line); }
.method-steps li:first-child { padding-left: 0; }
.method-steps li:last-child { border-right: 0; }
.method-steps li > span { color: var(--blue); font-size: 0.75rem; font-weight: 600; }
.method-steps h3 { margin: 6rem 0 1rem; font: 400 clamp(3rem, 5vw, 5rem)/1 var(--display); }
.method-steps p { max-width: 18rem; margin: 0; line-height: 1.65; }
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ink); }
.trust-strip span { padding: 1rem; border-right: 1px solid var(--ink); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; }
.trust-strip span:last-child { border-right: 0; }

.contact { position: relative; isolation: isolate; min-height: 100svh; overflow: hidden; padding: clamp(6rem, 10vw, 10rem) var(--pad) 0; color: var(--black); background: var(--blue); }
.contact-orbit { position: absolute; z-index: -1; border: 1px solid rgba(8,10,12,0.3); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 58vw; aspect-ratio: 1; top: -18vw; right: -10vw; box-shadow: 0 0 0 8vw rgba(8,10,12,0.025), 0 0 0 16vw rgba(8,10,12,0.018); }
.orbit-two { width: 28vw; aspect-ratio: 1; left: -8vw; bottom: 8rem; }
.contact-inner { display: flex; min-height: 65vh; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.contact-inner > p:first-child { margin: 0 0 1.5rem; font-weight: 600; }
.contact h2 { margin: 0; font: 400 clamp(5.2rem, 14vw, 14rem)/0.82 var(--display); letter-spacing: -0.025em; }
.contact h2 span { color: var(--acid); }
.contact-copy { max-width: 42rem; margin: 2.6rem auto 3rem; font-size: 1.08rem; line-height: 1.7; }
.contact-button { display: inline-flex; align-items: center; gap: 2.5rem; border: 1px solid var(--black); border-radius: 999px; padding: 1rem 1.2rem 1rem 1.5rem; color: var(--white); background: var(--black); font-weight: 600; transition: color 220ms ease, background 220ms ease, transform 180ms ease; }
.contact-button:hover { color: var(--black); background: var(--acid); }
footer { display: grid; grid-template-columns: 1.1fr 0.8fr 1.3fr auto; gap: 2.5rem; align-items: end; border-top: 1px solid rgba(8,10,12,0.45); padding: 2.5rem 0; font-size: 0.78rem; }
footer p { margin: 0; line-height: 1.5; }
footer > div:nth-child(3) { text-align: right; }
.footer-logo img { width: 9rem; }

.project-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; padding: 0; color: var(--white); background: var(--black); }
.project-dialog::backdrop { background: rgba(0,0,0,0.8); backdrop-filter: blur(12px); }
.project-dialog[open] { animation: dialog-in 420ms cubic-bezier(.2,.75,.2,1); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(2rem); } }
.dialog-shell { display: flex; min-height: 100%; flex-direction: column; padding: 1.5rem var(--pad); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom: 1rem; }
.dialog-header > div { display: flex; gap: 1rem; align-items: center; }
.dialog-header span,
.dialog-header p { margin: 0; font-size: 0.75rem; text-transform: uppercase; }
.dialog-header button { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--white); background: transparent; cursor: pointer; }
.dialog-header button span { display: grid; width: 2.6rem; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,0.5); border-radius: 50%; font-size: 1.25rem; }
.dialog-body { display: grid; flex: 1; grid-template-columns: minmax(17rem, 0.36fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; padding-block: 2rem; }
.dialog-copy h2 { margin: 0 0 1.5rem; font: 400 clamp(4.5rem, 9vw, 9rem)/0.82 var(--display); }
.dialog-copy p { max-width: 30rem; margin: 0; color: rgba(255,255,255,0.7); line-height: 1.55; }
.dialog-gallery { position: relative; height: min(68vh, 48rem); overflow: hidden; border: 1px solid rgba(255,255,255,0.22); background: #15181b; }
.dialog-gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(0.97); transition: opacity 350ms ease, transform 500ms ease; }
.dialog-gallery img.is-active { opacity: 1; transform: scale(1); }
.dialog-controls { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding-top: 1rem; }
.dialog-controls > button { display: grid; width: 2.8rem; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,0.45); border-radius: 50%; color: var(--white); background: transparent; cursor: pointer; }
.dialog-controls > button:hover { color: var(--black); background: var(--acid); }
.dialog-controls > div { display: flex; gap: 0.45rem; }
.dialog-controls > div button { width: 2.2rem; height: 0.3rem; border-radius: 999px; padding: 0; background: rgba(255,255,255,0.3); cursor: pointer; }
.dialog-controls > div button.is-active { background: var(--acid); }

.cursor { position: fixed; z-index: 500; top: 0; left: 0; display: grid; width: 4.8rem; aspect-ratio: 1; place-items: center; border-radius: 50%; color: var(--black); background: var(--acid); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; opacity: 0; pointer-events: none; transform: translate3d(-100px,-100px,0) scale(0.35); transition: opacity 180ms ease, scale 180ms ease; }
.cursor.is-active { scale: 1; }
.reveal { opacity: 0; translate: 0 2rem; transition: opacity 750ms ease, translate 750ms cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity: 1; translate: 0; }

@media (max-width: 1000px) {
  .site-header { grid-template-columns: minmax(0, 1fr) auto auto; }
  .desktop-nav { display: none; }
  .hero-art { right: 2vw; width: clamp(14rem, 31vw, 21rem); }
  .hero-title { font-size: clamp(5rem, 14vw, 9rem); }
  .number-grid { grid-template-columns: 1fr 1fr; }
  .number-card { min-height: 20rem; }
  .case { min-height: 38rem; grid-template-columns: minmax(15rem, 0.45fr) minmax(0, 1fr); }
  .case.is-reverse { grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.45fr); }
  .case-collage { min-height: 30rem; }
  .side-project-grid { grid-template-columns: 1fr; }
  .mini-project { min-height: 30rem; }
  .mini-art { min-height: 18rem; }
}

@media (max-width: 760px) {
  :root { --pad: 1.15rem; --section-y: 6.25rem; }
  .site-header { grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.65rem; }
  .brand img { width: 7rem; height: 2.9rem; }
  .header-cta { display: none; }
  .language-switch { position: relative; z-index: 202; font-size: 0.62rem; }
  .language-switch button { min-width: 1.8rem; min-height: 1.8rem; }
  .menu-toggle { position: relative; z-index: 202; display: grid; width: 2.8rem; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,0.45); border-radius: 50%; padding: 0; background: transparent; }
  .site-header.scrolled .menu-toggle { border-color: rgba(17,19,21,0.35); }
  .menu-toggle span:not(.sr-only) { position: absolute; width: 1.1rem; height: 1px; background: currentColor; transition: transform 240ms ease; }
  .menu-toggle span:first-child { transform: translateY(-0.2rem); }
  .menu-toggle span:nth-child(2) { transform: translateY(0.2rem); }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }
  .mobile-nav { position: fixed; z-index: 201; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 6rem var(--pad) 2rem; color: var(--white); background: var(--black); visibility: hidden; opacity: 0; transform: translateY(-1.5rem); transition: visibility 300ms ease, opacity 300ms ease, transform 300ms ease; }
  .mobile-nav.is-open { visibility: visible; opacity: 1; transform: none; }
  .mobile-nav a { display: flex; gap: 1rem; align-items: baseline; border-bottom: 1px solid rgba(255,255,255,0.25); padding-block: 0.65rem; font: 400 3.8rem/1 var(--display); }
  .mobile-nav small { color: var(--blue); font: 600 0.7rem/1 var(--body); }
  .site-header:has(.mobile-nav.is-open) { color: var(--white); background: transparent; }
  .site-header:has(.mobile-nav.is-open) .language-switch { border-color: rgba(255,255,255,0.42); }

  .hero { min-height: auto; padding-top: 6.8rem; }
  .hero::before { top: -10rem; right: -18rem; }
  .hero-topline span:last-child { display: none; }
  .hero-copy { margin-top: 3.15rem; }
  .hero-kicker { font-size: 0.7rem; }
  .hero-title { font-size: clamp(4.55rem, 24vw, 7.5rem); line-height: 0.84; }
  html[lang="en"] .hero-title { font-size: clamp(4rem, 21.5vw, 6.7rem); }
  .hero-title .outline { transform: none; }
  .hero-title span:last-child { margin-left: 0; }
  .hero-art { position: relative; right: auto; top: auto; width: min(78vw, 22rem); align-self: flex-end; margin: 3.5rem 0 1rem; }
  .hero-footer { align-items: center; gap: 1.5rem; padding-top: 2.75rem; }
  .hero-footer > p { max-width: 18rem; font-size: 0.95rem; line-height: 1.62; }
  .circle-link { width: 6.3rem; flex: 0 0 auto; padding: 0.85rem; font-size: 0.68rem; }

  .section-tag { margin-bottom: 4rem; }
  .manifesto-grid,
  .collaborations-copy,
  .work-heading-row,
  .services-head,
  .method-intro { grid-template-columns: 1fr; gap: 2.5rem; }
  .manifesto h2 { font-size: clamp(2.7rem, 12.8vw, 4.5rem); }
  .manifesto-side > p { font-size: 1rem; }
  .collaborations-copy h2 { font-size: clamp(3.3rem, 15vw, 5.8rem); }
  .collaborations-copy > p { font-size: 1rem; }
  .logo-set > span { min-width: 12rem; min-height: 7rem; }
  .numbers-head { grid-template-columns: 1fr; gap: 2rem; }
  .numbers-head > p { justify-self: start; font-size: 1.35rem; text-align: left; }
  .number-grid { grid-template-columns: 1fr; }
  .number-card { min-height: 17rem; }
  .number-card strong { font-size: 5.2rem; }

  .work-heading h2 { font-size: clamp(2.8rem, 14vw, 5.3rem); }
  .work-heading-row > p { font-size: 1rem; }
  .case,
  .case.is-reverse { display: flex; min-height: 0; flex-direction: column; gap: 3.5rem; padding-block: 5.75rem; }
  .case.is-reverse .case-meta,
  .case.is-reverse .case-collage { order: initial; }
  .case-meta { width: 100%; }
  .case-meta h3 { font-size: clamp(4rem, 20vw, 6.5rem); }
  .case-collage { width: 100%; min-height: 25rem; }
  .shot-main { left: 1%; width: 70%; }
  .shot-top { width: 44%; }
  .shot-bottom { right: 1%; width: 48%; }
  .side-projects-head { align-items: flex-end; }
  .side-projects-head p { font-size: 4rem; line-height: 0.85; }
  .side-projects-head span { max-width: 8rem; text-align: right; }
  .mini-project { min-height: 32rem; }
  .mini-research .mini-art b { font-size: 2.8rem; }

  .services-head h2,
  .method-intro h2 { font-size: clamp(3rem, 14vw, 5.3rem); }
  .service-item > button { grid-template-columns: 2rem 1fr 2.6rem; }
  .service-item h3 { font-size: clamp(2.5rem, 12vw, 4rem); }
  .service-detail { grid-template-columns: 1fr; gap: 2rem; padding: 0.25rem 0 2.75rem 2rem; }
  .service-detail p { font-size: 1rem; }
  .method-steps { grid-template-columns: 1fr; }
  .method-steps li { min-height: 15rem; border-right: 0; border-bottom: 1px solid var(--line); padding: 1rem 0; }
  .method-steps h3 { margin-top: 3.5rem; }
  .trust-strip { grid-template-columns: 1fr 1fr; }
  .trust-strip span:nth-child(2) { border-right: 0; }
  .trust-strip span:nth-child(-n+2) { border-bottom: 1px solid var(--ink); }

  .contact { min-height: 100svh; padding-top: 5.5rem; }
  .contact h2 { font-size: clamp(3.2rem, 16vw, 6rem); }
  .contact-copy { font-size: 1rem; }
  footer { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 5rem; }
  footer > div:nth-child(3) { text-align: left; }
  footer > p { margin-top: 1rem; }

  .dialog-shell { padding: 1rem; }
  .dialog-header > div p { display: none; }
  .dialog-body { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
  .dialog-copy h2 { margin: 0 0 0.75rem; font-size: 4rem; }
  .dialog-gallery { height: 52vh; }
  .dialog-controls { justify-content: space-between; }
  .cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; translate: 0; }
  .cursor { display: none; }
  .logo-track { animation: none; }
}

/* Portfolio assets and project stories */
.logo-wow img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; }
.logo-ikaros img { width: 10rem; max-height: 4rem; object-fit: contain; }
.logo-logos { color: #1d1d1b; font: 700 2.15rem/1 var(--body); letter-spacing: -.09em; }

.side-project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 1.5vw, 1.5rem); }
.mini-project { width: 100%; min-width: 0; min-height: 27rem; padding: .9rem; font: inherit; text-align: left; cursor: pointer; border: 1px solid rgba(17,19,21,.16); background: var(--white); box-shadow: 0 0 0 transparent; transition: transform 300ms cubic-bezier(.16,1,.3,1), box-shadow 300ms ease, border-color 300ms ease; }
.mini-project:hover { box-shadow: .45rem .55rem 0 rgba(0,87,255,.2); }
.mini-project:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: .3rem; }
.mini-index { display: flex; justify-content: space-between; align-items: center; min-height: 1.4rem; font-size: .72rem; font-weight: 600; letter-spacing: .08em; }
.mini-index span:last-child { font-size: 1.1rem; line-height: 1; transition: transform 300ms ease; }
.mini-project:hover .mini-index span:last-child { transform: translate(.2rem,-.2rem); }
.mini-art { position: relative; display: block; flex: none; height: clamp(11.5rem, 16vw, 14.5rem); min-height: 0; width: calc(100% + 1.8rem); margin: .8rem -.9rem 1rem; overflow: hidden; border: 0; isolation: isolate; }
.mini-art::after { content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.12) 50%, transparent 62%); transform: translateX(-120%); transition: transform 850ms cubic-bezier(.16,1,.3,1); }
.mini-project:hover .mini-art::after { transform: translateX(120%); }
.mini-copy { display: flex; flex: 1; flex-direction: column; padding-top: .9rem; }
.mini-copy p { margin-bottom: .7rem; font-size: .75rem; }
.mini-copy h3 { margin-bottom: .7rem; font-size: clamp(1.9rem, 2.5vw, 2.75rem); }
.mini-copy > span { font-size: .92rem; line-height: 1.48; }
.mini-link { margin-top: auto; padding-top: .85rem; border-color: rgba(17,19,21,.25); font-size: .76rem; }
.mini-link span { transition: transform 250ms ease; }
.mini-project:hover .mini-link span { transform: translate(.25rem,-.25rem); }
.mini-project .mini-art .art-stamp { display: block; width: auto; aspect-ratio: auto; top: auto; left: auto; right: .8rem; bottom: .8rem; border-radius: 0; transform: none; font: 700 .64rem/1.1 var(--body); letter-spacing: .1em; position: absolute; z-index: 3; padding: .45rem .6rem; }

.mini-wow { color: var(--ink); background: var(--white); }
.mini-wow .mini-index { color: #8b3c16; }
.mini-wow:hover { border-color: #a74f25; }
.mini-wow .mini-art { background: #32180e; }
.mini-wow .wow-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.2) contrast(1.1); opacity: .75; transform: scale(1.1); transition: transform 700ms cubic-bezier(.16,1,.3,1), opacity 700ms ease; }
.wow-cover { position: absolute; z-index: 2; left: 11%; top: 50%; width: min(36%, 7rem); aspect-ratio: 1; overflow: hidden; border: .25rem solid #f6b15d; box-shadow: .75rem .9rem 0 rgba(6,3,2,.5); transform: translateY(-50%) rotate(-7deg); transition: transform 650ms cubic-bezier(.16,1,.3,1); }
.wow-cover img { width: 100%; height: 100%; object-fit: cover; }
.mini-wow .mini-art .art-stamp { color: #20110e; background: #f4ab51; }
.mini-wow:hover .wow-banner { transform: scale(1.16); opacity: .95; }
.mini-wow:hover .wow-cover { transform: translateY(-52%) rotate(-3deg) scale(1.04); }

.mini-zampy { color: var(--ink); background: var(--white); }
.mini-zampy .mini-index { color: #3e6248; }
.mini-zampy:hover { border-color: #3e6248; }
.mini-zampy .mini-art { background: #7e8257; background-image: repeating-linear-gradient(0deg, transparent 0 1.9rem, rgba(255,255,255,.1) 1.9rem 1.96rem); }
.mini-zampy .zampy-card { position: absolute; left: 16%; top: 50%; width: 68%; height: auto; max-height: none; object-fit: contain; box-shadow: 1rem 1.3rem 2rem rgba(5,16,10,.3); transform: translateY(-50%) rotate(-6deg); transition: transform 650ms cubic-bezier(.16,1,.3,1); }
.mini-zampy .mini-art .art-stamp { color: #1d2922; background: #f1ead5; }
.mini-zampy:hover .zampy-card { transform: translateY(-53%) rotate(-2deg) scale(1.04); }

.mini-research { color: var(--ink); background: var(--white); }
.mini-research .mini-index { color: #235b9a; }
.mini-research:hover { border-color: #235b9a; }
.mini-research .mini-art { background: #9ed0ef; background-image: radial-gradient(#2a79bd 1px, transparent 1px); background-size: 1.25rem 1.25rem; }
.mini-research .research-poster { position: absolute; top: -9%; left: 50%; width: 47%; height: 125%; max-height: none; object-fit: cover; object-position: top; border: .25rem solid #fff; box-shadow: .8rem 1.1rem 1.8rem rgba(20,73,124,.24); transform: translateX(-50%) rotate(5deg); transition: transform 650ms cubic-bezier(.16,1,.3,1); }
.mini-research .mini-art .art-stamp { color: #fff; background: #203474; }
.mini-research:hover .research-poster { transform: translateX(-50%) rotate(1deg) scale(1.04); }

/* The four featured projects assemble as they enter the viewport. */
.case-collage.visible .shot { animation: shot-enter 850ms cubic-bezier(.16,1,.3,1) both; }
.case-collage.visible .shot-top { animation-delay: 130ms; }
.case-collage.visible .shot-bottom { animation-delay: 260ms; }
@keyframes shot-enter { from { opacity: 0; translate: 0 2rem; scale: .92; } to { opacity: 1; translate: 0; scale: 1; } }
.project-dialog { overflow-y: auto; }
.dialog-body { grid-template-columns: minmax(18rem, .42fr) minmax(0, 1fr); align-items: start; }
.dialog-copy h2 { font-size: clamp(3.2rem, 6vw, 6rem); overflow-wrap: anywhere; }
.dialog-story { display: grid; gap: 1.1rem; margin-top: 2rem; }
.dialog-story > div { border-top: 1px solid rgba(255,255,255,.28); padding-top: .75rem; }
.dialog-story small { display: block; margin-bottom: .55rem; color: #8fcfff; font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.dialog-story p { color: #e5edf2; font-size: .95rem; line-height: 1.55; }
.dialog-external { display: inline-flex; margin-top: 1.75rem; border: 1px solid #8fcfff; border-radius: 999px; padding: .8rem 1.1rem; color: #fff; font-size: .85rem; font-weight: 600; }
.dialog-external[hidden] { display: none; }
.dialog-external:hover { color: #071a2c; background: #8fcfff; }
.dialog-gallery { height: min(72vh, 50rem); background: #e7e9e7; }
.project-dialog[data-project="wowfactory"] .dialog-gallery { background: radial-gradient(circle at 55% 42%, #78300e, #24120d 70%); }
.project-dialog[data-project="giovani"] .dialog-gallery { background: #dfefff; }
.project-dialog:is([data-project="wowfactory"], [data-project="giovani"]) .dialog-copy h2 { font-size: clamp(3rem, 5.2vw, 5.7rem); line-height: .94; }
.dialog-full-image { margin-right: auto; border-bottom: 1px solid rgba(255,255,255,.55); padding-block: .45rem; color: #b8dfff; font-size: .82rem; font-weight: 600; }
.dialog-full-image:hover { color: var(--acid); border-color: var(--acid); }
@media (max-width: 850px) {
  .side-project-grid { grid-template-columns: 1fr; }
  .mini-project { min-height: 0; }
  .mini-art { height: clamp(13rem, 42vw, 18rem); }
  .mini-copy h3 { font-size: clamp(2.1rem, 6vw, 3.4rem); }
  .dialog-body { grid-template-columns: 1fr; }
  .dialog-gallery { height: 52vh; min-height: 18rem; }
  .dialog-controls { flex-wrap: wrap; }
  .dialog-full-image { flex-basis: 100%; width: fit-content; margin-bottom: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .case-collage.visible .shot { animation: none; }
  .mini-art::after { display: none; }
}

/* A quieter bridge from the featured work to three compact project stories. */
.side-projects { position: relative; background: #dff3ff; border-top: 1px solid rgba(17,19,21,.2); }
.side-projects-head { align-items: end; border-bottom-color: rgba(17,19,21,.25); padding-bottom: 1.65rem; }
.side-projects-head small { display: block; margin-bottom: 1.4rem; color: #0057ff; font-size: .7rem; font-weight: 600; letter-spacing: .12em; }
.side-projects-head p { font-size: clamp(3.5rem, 7vw, 7rem); line-height: .9; }
.side-projects-head > span { max-width: 16rem; font-size: .9rem; line-height: 1.5; text-transform: none; }
.side-project-grid { gap: clamp(1rem, 1.6vw, 1.5rem); margin-top: 1.5rem; }
.mini-project { min-height: 25rem; padding: .9rem; border-color: rgba(17,19,21,.24); border-radius: .7rem; color: var(--ink); background: rgba(252,251,247,.78); box-shadow: 0 .5rem 1.5rem rgba(15,55,96,.06); overflow: hidden; }
.mini-project:hover { border-color: var(--blue-deep); box-shadow: 0 1.1rem 2.3rem rgba(0,65,145,.14); }
.mini-index { padding-inline: .25rem; color: var(--blue-deep) !important; }
.mini-art { width: 100%; height: clamp(10.5rem, 15vw, 13rem); margin: .7rem 0 1.1rem; border-radius: .35rem; }
.mini-copy { padding: .95rem .25rem .15rem; border-top-color: rgba(17,19,21,.24); }
.mini-copy p { margin-bottom: .55rem; color: #235785; font-size: .69rem; letter-spacing: .07em; }
.mini-copy h3 { margin-bottom: .55rem; font-size: clamp(1.7rem, 2.4vw, 2.45rem); line-height: 1.06; }
.mini-copy > span { max-width: 23rem; font-size: .87rem; line-height: 1.48; }
.mini-link { margin-top: 1.25rem; padding-top: .75rem; color: var(--blue-deep); border-color: rgba(17,19,21,.24); }
.mini-wow .mini-art { background: #32180e; }
.mini-zampy .mini-art { background-color: #718467; }
.mini-research .mini-art { background-color: #9ed0ef; }
.mini-project .mini-art .art-stamp { right: .6rem; bottom: .6rem; font-size: .58rem; }
.mini-project:hover .mini-art::after { transform: translateX(120%); }

/* The collaborator ribbon is part of the same visual rhythm as the studio section. */
.logo-rail { background: #dff3ff; border-color: rgba(17,19,21,.17); }
.logo-set > span { min-height: 7.5rem; border-color: rgba(17,19,21,.12); }
.logo-set > span:hover { transform: none; }

@media (max-width: 1000px) {
  .side-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-project { min-height: 24rem; }
  .mini-art { height: 12rem; }
}
@media (max-width: 650px) {
  .side-projects-head { display: block; }
  .side-projects-head small { margin-bottom: 1rem; }
  .side-projects-head p { font-size: clamp(3.2rem, 13vw, 5rem); }
  .side-projects-head > span { display: block; max-width: 19rem; margin-top: 1.2rem; text-align: left; }
  .side-project-grid { grid-template-columns: 1fr; }
  .mini-project { min-height: 0; }
  .mini-art { height: clamp(12rem, 51vw, 17rem); }
}