:root {
  --bg: #171316;
  --bg-soft: #21191d;
  --text: #f3eeee;
  --muted: #b8aaae;
  --line: rgba(255, 121, 132, 0.20);
  --panel: rgba(184, 30, 47, 0.10);
  --accent: #d7192d;
  --accent-2: #7f1220;
  --accent-hot: #ff4050;
  --accent-deep: #4b1119;
  --header-bg: rgba(23, 19, 22, 0.88);
  --shadow: 0 30px 90px rgba(45, 6, 13, 0.38);
  --display: "Manrope", system-ui, sans-serif;
  --serif: "Playfair Display", Georgia, serif;
  --mono: "DM Mono", monospace;
  --pad: clamp(1.15rem, 4vw, 4.5rem);
}

html[data-theme="light"] {
  --bg: #d7d7d7;
  --bg-soft: #c2c2c2;
  --text: #111111;
  --muted: #555555;
  --line: rgba(17, 17, 17, 0.2);
  --panel: rgba(17, 17, 17, 0.06);
  --accent: #c51628;
  --accent-2: #72101d;
  --accent-hot: #e92739;
  --accent-deep: #4b1119;
  --header-bg: rgba(215, 215, 215, 0.88);
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  transition: background-color .45s ease, color .45s ease;
}
body.menu-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #ffffff; }

.noise {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .045;
  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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.scroll-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 10001; }
.scroll-progress span { display: block; height: 100%; width: 0; background: var(--accent); }
.section-pad { padding-left: var(--pad); padding-right: var(--pad); }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 1000; height: 84px; padding: 0 var(--pad);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  background: linear-gradient(to bottom, var(--header-bg), transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.brand { display: inline-flex; align-items: start; gap: .8rem; width: max-content; }
.brand-mark { width: 40px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--line); font: 500 .78rem var(--mono); }
.brand-copy { font-size: .72rem; line-height: 1.05; letter-spacing: .12em; font-weight: 700; }
.brand-copy small { font: 300 .62rem var(--mono); letter-spacing: .04em; color: var(--muted); }
.desktop-nav { align-self: center; display: flex; gap: clamp(1.3rem, 3vw, 3rem); font: 400 .72rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.desktop-nav a { position: relative; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.45rem; height: 1px; background: currentColor; transition: right .25s; }
.desktop-nav a:hover::after { right: 0; }
.header-actions { align-self: center; justify-self: end; display: flex; align-items: center; gap: .6rem; }
.theme-toggle, .menu-toggle { border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
.theme-toggle { width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; overflow: hidden; position: relative; }
.theme-toggle span { position: absolute; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.theme-toggle .moon { transform: translateY(30px) rotate(90deg); opacity: 0; }
html[data-theme="light"] .theme-toggle .sun { transform: translateY(-30px) rotate(-90deg); opacity: 0; }
html[data-theme="light"] .theme-toggle .moon { transform: none; opacity: 1; }
.pill { min-height: 42px; padding: 0 1.15rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 1rem; background: var(--text); color: var(--bg); font: 500 .72rem var(--mono); text-transform: uppercase; }
.menu-toggle { width: 44px; height: 42px; border-radius: 999px; display: none; place-items: center; position: relative; }
.menu-toggle span { position: absolute; width: 18px; height: 1px; background: currentColor; transition: transform .35s, top .35s; top: 17px; }
.menu-toggle span:last-child { top: 24px; }
.menu-open .menu-toggle span:first-child { top: 21px; transform: rotate(45deg); }
.menu-open .menu-toggle span:last-child { top: 21px; transform: rotate(-45deg); }

.mobile-menu { position: fixed; inset: 0; z-index: 900; background: var(--bg); padding: 120px var(--pad) 2rem; display: flex; flex-direction: column; justify-content: space-between; transform: translateY(-105%); transition: transform .65s cubic-bezier(.76,0,.24,1); }
.menu-open .mobile-menu { transform: none; }
.mobile-menu nav { display: grid; }
.mobile-menu nav a { display: flex; gap: 1rem; align-items: baseline; border-bottom: 1px solid var(--line); padding: .5rem 0 1rem; font-size: clamp(2.6rem, 12vw, 5rem); letter-spacing: -.06em; }
.mobile-menu nav small { font: .65rem var(--mono); color: var(--muted); letter-spacing: 0; }
.mobile-menu p { font: .75rem/1.8 var(--mono); color: var(--muted); }

.hero { min-height: 100svh; position: relative; display: grid; align-items: end; padding-top: 110px; padding-bottom: clamp(2rem, 5vw, 4rem); overflow: clip; }
.hero-kicker { position: absolute; top: 104px; left: var(--pad); right: var(--pad); z-index: 3; display: flex; justify-content: space-between; font: .63rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media img, .hero-media video { width: 100%; height: 120%; object-fit: cover; object-position: 50% 35%; filter: grayscale(.82) contrast(1.08) brightness(.94); transform: scale(1.03); }
.hero-video-stack { position: absolute; inset: 0; overflow: hidden; }
.hero-video-stack .hero-bg-video { position: absolute; inset: 0; width: 100%; height: 120%; opacity: 0; transition: opacity 1.35s linear; will-change: opacity, transform; pointer-events: none; }
.hero-video-stack .hero-bg-video.is-active { opacity: 1; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(200,16,30,.26), transparent 48%, rgba(90,10,16,.16)); mix-blend-mode: color; pointer-events: none; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(23,19,22,.68) 5%, rgba(23,19,22,.16) 55%, rgba(88,12,24,.34)), linear-gradient(to top, rgba(32,18,22,.68), transparent 62%); }
html[data-theme="light"] .hero-scrim { background: linear-gradient(100deg, rgba(215,215,215,.78), rgba(215,215,215,.08) 56%, rgba(180,13,25,.18)), linear-gradient(to top, rgba(17,17,17,.42), transparent 65%); }
.frame-corners i { position: absolute; width: 28px; height: 28px; border-color: rgba(255,255,255,.65); border-style: solid; }
.frame-corners i:nth-child(1) { top: 110px; left: var(--pad); border-width: 1px 0 0 1px; }
.frame-corners i:nth-child(2) { top: 110px; right: var(--pad); border-width: 1px 1px 0 0; }
.frame-corners i:nth-child(3) { bottom: 42px; left: var(--pad); border-width: 0 0 1px 1px; }
.frame-corners i:nth-child(4) { bottom: 42px; right: var(--pad); border-width: 0 1px 1px 0; }
.hero-copy { position: relative; z-index: 2; width: 100%; }
.eyebrow { font: 400 .7rem var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.display { margin: .8rem 0 1.4rem; font-size: clamp(3.4rem, 9.4vw, 10.5rem); line-height: .83; letter-spacing: -.075em; font-weight: 600; }
.display span { display: block; }
.display span:last-child { text-align: right; }
em { font-family: var(--serif); font-weight: 600; }
.hero-bottom { display: flex; justify-content: flex-end; align-items: flex-end; gap: clamp(2rem, 8vw, 9rem); }
.hero-bottom > p { margin: 0; max-width: 39rem; font-size: clamp(.95rem, 1.35vw, 1.25rem); }
.showreel { flex: 0 0 auto; width: 118px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); background: rgba(0,0,0,.25); color: white; backdrop-filter: blur(12px); display: grid; place-items: center; cursor: pointer; font: .6rem/1.4 var(--mono); text-align: center; transition: background .3s, color .3s, transform .3s; }
.showreel:hover { background: var(--accent); color: #ffffff; }
.showreel .play { font-size: .9rem; }
.scroll-cue { position: absolute; z-index: 3; left: var(--pad); bottom: 2.7rem; display: grid; gap: .4rem; font: .58rem var(--mono); text-transform: uppercase; writing-mode: vertical-rl; }
.scroll-cue i { font-style: normal; animation: bounce 1.6s infinite; }
@keyframes bounce { 50% { transform: translateY(7px); } }

.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--bg); }
.marquee-track { width: max-content; display: flex; align-items: start; gap: 1.2rem; padding: 1rem 0; animation: marquee 28s linear infinite; font-size: clamp(1rem, 2vw, 1.45rem); text-transform: uppercase; letter-spacing: .08em; }
.marquee-track b { color: var(--accent); font-weight: 400; }
@keyframes marquee { to { transform: translateX(-50%); } }

.manifesto, .services, .work, .process { padding-top: clamp(6rem, 12vw, 11rem); padding-bottom: clamp(6rem, 12vw, 11rem); }
.section-label { display: flex; gap: 1rem; font: .68rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: clamp(3rem, 8vw, 7rem); }
.section-label span:first-child { color: var(--accent); }
.manifesto-grid { display: grid; grid-template-columns: 1.5fr .65fr; gap: clamp(2rem, 7vw, 9rem); align-items: end; }
.section-title { margin: 0; font-size: clamp(2.7rem, 6.4vw, 7rem); line-height: .95; letter-spacing: -.06em; font-weight: 500; }
.section-title em { color: var(--muted); }
.manifesto-copy { max-width: 34rem; font-size: clamp(1rem, 1.35vw, 1.25rem); color: var(--muted); }
.stats { margin-top: clamp(5rem, 10vw, 9rem); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.stats div { padding: 2rem 1.1rem 1rem 0; border-right: 1px solid var(--line); }
.stats div:last-child { border-right: 0; padding-left: 1.5rem; }
.stats strong { display: block; font-size: clamp(2.8rem, 5vw, 5.5rem); font-weight: 400; letter-spacing: -.07em; }
.stats span { font: .68rem var(--mono); color: var(--muted); text-transform: uppercase; }

.services { background: var(--bg-soft); }
.services-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(3rem, 8vw, 10rem); align-items: start; }
.services-intro { position: sticky; top: 130px; }
.services-intro .section-title { font-size: clamp(2.8rem, 5.2vw, 5.6rem); margin: 1rem 0 2rem; }
.services-intro > p:last-child { max-width: 29rem; color: var(--muted); }
.service-list { border-top: 1px solid var(--line); }
.service-card { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 1.5rem; padding: clamp(1.8rem, 4vw, 3.4rem) 0; border-bottom: 1px solid var(--line); transition: padding .35s, background .35s; }
.service-card:hover { padding-left: 1.3rem; padding-right: 1.3rem; background: var(--panel); }
.service-no { font: .65rem var(--mono); color: var(--accent); }
.service-card h3 { margin: 0 0 .7rem; font-size: clamp(1.55rem, 2.7vw, 2.7rem); letter-spacing: -.04em; }
.service-card p { margin: 0; max-width: 42rem; color: var(--muted); }
.service-arrow { font-size: 1.5rem; }

.work-heading { display: grid; grid-template-columns: 1.2fr .55fr; gap: 3rem; align-items: end; margin-bottom: clamp(4rem, 9vw, 8rem); }
.work-heading > p { margin: 0; color: var(--muted); max-width: 30rem; }
.project-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(2.5rem, 6vw, 7rem) clamp(1rem, 2.8vw, 3rem); }
.project-card { display: block; }
.project-card:nth-child(3) { align-self: end; }
.project-image { overflow: hidden; background: var(--bg-soft); }
.project-image img { width: 100%; height: 115%; object-fit: cover; transition: filter .5s; filter: grayscale(1) contrast(1.06) brightness(.88); }
.project-card:hover .project-image img { filter: grayscale(1) contrast(1.12) brightness(1); }
.project-wide .project-image { aspect-ratio: 16 / 9; }
.project-tall .project-image { aspect-ratio: 3 / 4; }
.project-meta { padding-top: 1.1rem; display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; align-items: start; }
.project-meta span { font: .62rem var(--mono); color: var(--muted); text-transform: uppercase; }
.project-meta span:first-child { grid-column: 1 / -1; }
.project-meta h3 { margin: 0; font-size: clamp(1.5rem, 2.3vw, 2.5rem); letter-spacing: -.04em; }
.project-poster { margin-top: 2rem; }
.poster-art { aspect-ratio: 4 / 5; background: linear-gradient(145deg, var(--accent-hot) 0%, var(--accent) 48%, var(--accent-deep) 100%); color: #ffffff; position: relative; overflow: hidden; padding: clamp(1rem, 3vw, 3rem); display: flex; flex-direction: column; justify-content: center; font-size: clamp(4rem, 10vw, 9rem); line-height: .75; letter-spacing: -.09em; font-weight: 700; }
.poster-art span:last-of-type { font-family: var(--serif); font-style: italic; margin-left: 9%; }
.poster-art i { position: absolute; width: 45%; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; right: -8%; top: 7%; }
.poster-art b { position: absolute; bottom: 1.5rem; right: 1.5rem; font: 500 .7rem var(--mono); letter-spacing: .1em; }
.project-card.reverse { grid-column: 1 / -1; width: 72%; margin-left: auto; }
.project-card.reverse .project-image { aspect-ratio: 16 / 8; }

.quote-band { min-height: 58svh; padding: 7rem var(--pad); display: grid; place-items: center; background: linear-gradient(125deg, var(--accent-deep) 0%, var(--accent) 48%, #a21424 100%); color: #ffffff; text-align: center; }
.quote-band p { max-width: 1200px; margin: 0; font-size: clamp(2.6rem, 7vw, 7.5rem); line-height: .92; letter-spacing: -.065em; }

.process-heading { margin-bottom: 5rem; }
.process-list { border-top: 1px solid var(--line); }
.process-row { display: grid; grid-template-columns: 7rem minmax(220px, .7fr) 1fr; gap: 2rem; align-items: baseline; padding: clamp(1.8rem, 4vw, 3rem) 0; border-bottom: 1px solid var(--line); }
.process-row > span { font: .65rem var(--mono); color: var(--accent); }
.process-row h3 { margin: 0; font-size: clamp(1.7rem, 3vw, 3rem); font-weight: 500; letter-spacing: -.04em; }
.process-row p { margin: 0; color: var(--muted); max-width: 40rem; }

.contact { position: relative; overflow: hidden; min-height: 85svh; padding-top: clamp(6rem, 10vw, 9rem); padding-bottom: clamp(4rem, 7vw, 6rem); background: var(--bg-soft); display: flex; flex-direction: column; }
.contact-orb { position: absolute; width: min(60vw, 850px); aspect-ratio: 1; border-radius: 50%; right: -18%; top: -30%; background: radial-gradient(circle at 35% 35%, var(--accent), transparent 62%), radial-gradient(circle at 65% 65%, var(--accent-2), transparent 56%); filter: blur(12px); opacity: .55; }
.contact .section-label, .contact-inner { position: relative; z-index: 1; }
.contact-inner { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.contact-title { margin: 1rem 0 4rem; font-size: clamp(4rem, 11vw, 12rem); line-height: .78; letter-spacing: -.085em; font-weight: 600; }
.contact-title em { display: inline-block; transform: translateX(8vw); }
.contact-bottom { display: grid; grid-template-columns: .5fr 1fr; gap: 4rem; align-items: end; }
.contact-bottom > p { margin: 0; max-width: 30rem; color: var(--muted); }
.contact-link { justify-self: end; font-size: clamp(1.35rem, 3.7vw, 4rem); letter-spacing: -.045em; border-bottom: 1px solid currentColor; display: flex; gap: 2rem; }

.site-footer { padding-top: 2.5rem; padding-bottom: 2.5rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 2rem; border-top: 1px solid var(--line); font: .67rem var(--mono); text-transform: uppercase; }
.site-footer > div { display: flex; gap: 1.2rem; }
.site-footer > div:first-child { flex-direction: column; gap: .2rem; }
.site-footer > div:last-child { justify-content: flex-end; }
.site-footer span { color: var(--muted); }
.site-footer .footer-legal {
  display: flex;
  flex-direction: column;
  gap: .28rem;
  max-width: 42rem;
  line-height: 1.45;
  text-transform: none;
}
.site-footer .footer-legal span { color: var(--caps-muted, var(--muted)); }

.site-footer .footer-legal-link {
  width: fit-content;
  margin-top: .3rem;
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .25s ease, opacity .25s ease;
}
.site-footer .footer-legal-link:hover { color: var(--accent-hot); }

.site-footer .footer-actions { justify-content: flex-end; align-self: center; }


.reel-modal { width: min(900px, calc(100% - 2rem)); border: 1px solid var(--line); padding: 0; background: var(--bg); color: var(--text); box-shadow: var(--shadow); }
.reel-modal::backdrop { background: rgba(0,0,0,.75); backdrop-filter: blur(10px); }
.modal-close { position: absolute; z-index: 2; right: 1rem; top: 1rem; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-size: 1.5rem; }
.reel-placeholder { min-height: 56vh; display: grid; place-content: center; text-align: center; padding: 4rem; background: radial-gradient(circle at 20% 20%, rgba(200,16,30,.34), transparent 35%), radial-gradient(circle at 80% 80%, rgba(90,10,16,.28), transparent 32%); }
.reel-placeholder > span { font: .7rem var(--mono); color: var(--accent); }
.reel-placeholder h2 { max-width: 650px; font-size: clamp(2rem, 5vw, 4rem); line-height: 1; letter-spacing: -.05em; }
.reel-placeholder p { color: var(--muted); }

.reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }

.cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; z-index: 10002; pointer-events: none; border-radius: 50%; opacity: 0; }
.cursor-dot { width: 5px; height: 5px; background: var(--text); }
.cursor-ring { width: 38px; height: 38px; border: 1px solid var(--text); transition: width .2s, height .2s, background .2s; display: grid; place-items: center; font: .55rem var(--mono); }
.cursor-ring.active { width: 86px; height: 86px; background: var(--accent); border-color: var(--accent); color: #ffffff; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .desktop-nav, .desktop-cta { display: none; }
  .menu-toggle { display: grid; }
  .hero-bottom { justify-content: space-between; }
  .manifesto-grid, .services-layout, .work-heading { grid-template-columns: 1fr; }
  .services-intro { position: static; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats div:nth-child(2) { border-right: 0; }
  .stats div:nth-child(3), .stats div:nth-child(4) { border-top: 1px solid var(--line); }
  .project-grid { gap: 4rem 1rem; }
  .project-card.reverse { width: 85%; }
  .process-row { grid-template-columns: 4rem .65fr 1fr; }
  .contact-bottom { grid-template-columns: 1fr; }
  .contact-link { justify-self: start; }
}

@media (max-width: 700px) {
  :root { --pad: 1rem; }
  .site-header { height: 72px; }
  .brand-copy { display: none; }
  .hero { min-height: 900px; padding-top: 90px; padding-bottom: 2rem; }
  .hero-kicker { top: 86px; }
  .hero-kicker span:last-child { display: none; }
  .hero-media { inset: 0; }
  .hero-media img, .hero-media video { object-position: 55% center; }
  .frame-corners i:nth-child(1), .frame-corners i:nth-child(2) { top: 88px; }
  .frame-corners i:nth-child(3), .frame-corners i:nth-child(4) { bottom: 20px; }
  .display { font-size: clamp(3.6rem, 18vw, 6rem); line-height: .85; }
  .display span:last-child { text-align: left; }
  .hero-bottom { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .showreel { width: 96px; }
  .scroll-cue { display: none; }
  .section-label { margin-bottom: 3rem; }
  .manifesto, .services, .work, .process { padding-top: 6rem; padding-bottom: 6rem; }
  .stats { margin-top: 4rem; }
  .stats div { padding: 1.4rem .5rem 1.2rem 0; }
  .stats div:last-child { padding-left: .7rem; }
  .stats strong { font-size: 2.8rem; }
  .service-card { grid-template-columns: 2rem 1fr auto; gap: .75rem; }
  .service-card p { font-size: .9rem; }
  .project-grid { grid-template-columns: 1fr; }
  .project-card.reverse { grid-column: auto; width: 100%; }
  .project-card.reverse .project-image { aspect-ratio: 4 / 3; }
  .project-poster { margin-top: 0; }
  .quote-band { min-height: 48svh; }
  .process-row { grid-template-columns: 2rem 1fr; gap: .8rem; }
  .process-row p { grid-column: 2; }
  .contact { min-height: 740px; }
  .contact-title { font-size: clamp(3.9rem, 18vw, 7rem); }
  .contact-title em { transform: none; }
  .contact-link { font-size: 1.35rem; gap: 1rem; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer > div:last-child { justify-content: flex-start; }
  .reel-placeholder { padding: 2rem 1.2rem; }
}

@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}


/* FRAMEWORKS. — warmer dark mode + richer red theme */
body {
  background:
    radial-gradient(circle at 82% 8%, rgba(215, 25, 45, .12), transparent 28rem),
    radial-gradient(circle at 12% 56%, rgba(127, 18, 32, .08), transparent 32rem),
    var(--bg);
}

.site-header {
  border-bottom: 1px solid rgba(215, 25, 45, .08);
  background: linear-gradient(to bottom, var(--header-bg) 0%, rgba(71, 15, 24, .22) 62%, transparent 100%);
}
.brand-mark {
  border-color: rgba(255, 64, 80, .45);
  background: linear-gradient(145deg, rgba(215,25,45,.18), rgba(255,255,255,.02));
  box-shadow: inset 0 0 22px rgba(215,25,45,.08);
}
.desktop-nav a:hover { color: var(--accent-hot); }
.theme-toggle, .menu-toggle { border-color: rgba(255, 90, 104, .28); }
.pill {
  background: linear-gradient(110deg, var(--accent-hot), var(--accent) 55%, var(--accent-2));
  color: #fff;
  box-shadow: 0 8px 28px rgba(215,25,45,.24);
}
.pill:hover { transform: translateY(-1px); box-shadow: 0 12px 36px rgba(215,25,45,.32); }

.mobile-menu {
  background:
    radial-gradient(circle at 100% 0%, rgba(215,25,45,.22), transparent 42%),
    linear-gradient(145deg, var(--bg) 0%, #24171c 100%);
}
.mobile-menu nav a:hover { color: var(--accent-hot); }

.hero-media::after {
  background:
    linear-gradient(118deg, rgba(255,64,80,.30), transparent 38%, rgba(127,18,32,.20) 70%, rgba(215,25,45,.24)),
    radial-gradient(circle at 78% 28%, rgba(255,50,68,.20), transparent 27%);
  mix-blend-mode: color;
}
.frame-corners i { border-color: rgba(255, 92, 105, .78); }
.showreel {
  border-color: rgba(255, 92, 105, .55);
  background: rgba(61, 16, 24, .35);
}

.marquee {
  background: linear-gradient(90deg, #25171c 0%, #35141c 48%, #25171c 100%);
  border-block-color: rgba(255, 80, 96, .20);
}
.marquee-track b { color: var(--accent-hot); }

.manifesto {
  background:
    radial-gradient(circle at 4% 18%, rgba(215,25,45,.13), transparent 27rem),
    linear-gradient(180deg, rgba(78,16,27,.10), transparent 55%);
}
.stats strong { text-shadow: 0 0 34px rgba(215,25,45,.14); }
.stats div:hover strong { color: var(--accent-hot); }

.services {
  background:
    radial-gradient(circle at 88% 14%, rgba(215,25,45,.18), transparent 26rem),
    radial-gradient(circle at 18% 92%, rgba(127,18,32,.16), transparent 30rem),
    linear-gradient(135deg, var(--bg-soft) 0%, #2a181e 52%, #21191d 100%);
}
.service-card { border-color: rgba(255, 103, 116, .18); }
.service-card:hover {
  background: linear-gradient(90deg, rgba(215,25,45,.16), rgba(127,18,32,.06));
  box-shadow: inset 3px 0 0 var(--accent-hot);
}
.service-arrow { color: var(--accent-hot); }

.work {
  background:
    radial-gradient(circle at 100% 38%, rgba(215,25,45,.12), transparent 34rem),
    linear-gradient(180deg, transparent, rgba(86,14,25,.07) 72%, transparent);
}
.project-image { position: relative; }
.project-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(215,25,45,.16), transparent 46%, rgba(127,18,32,.12));
  mix-blend-mode: color;
  opacity: .58;
  transition: opacity .45s ease;
}
.project-card:hover .project-image::after { opacity: .95; }
.project-card:hover .project-meta h3 { color: var(--accent-hot); }
.project-meta h3 { transition: color .3s ease; }
.poster-art { box-shadow: inset 0 0 90px rgba(70,0,12,.25), 0 24px 70px rgba(92,8,22,.18); }

.quote-band {
  box-shadow: inset 0 1px rgba(255,255,255,.08), inset 0 -1px rgba(58,0,10,.35);
}

.process {
  background:
    radial-gradient(circle at 12% 70%, rgba(215,25,45,.10), transparent 29rem),
    linear-gradient(135deg, rgba(66,16,24,.08), transparent 55%);
}
.process-row { transition: background .3s ease, padding .3s ease; }
.process-row:hover {
  background: linear-gradient(90deg, rgba(215,25,45,.11), transparent 72%);
  padding-left: 1rem;
  padding-right: 1rem;
}
.process-row:hover h3 { color: var(--accent-hot); }

.contact {
  background:
    radial-gradient(circle at 84% 18%, rgba(255,64,80,.16), transparent 30rem),
    radial-gradient(circle at 30% 90%, rgba(127,18,32,.18), transparent 32rem),
    linear-gradient(135deg, #26171c 0%, var(--bg-soft) 45%, #31151e 100%);
}
.contact-orb {
  background:
    radial-gradient(circle at 34% 34%, var(--accent-hot), transparent 48%),
    radial-gradient(circle at 63% 62%, var(--accent), transparent 51%),
    radial-gradient(circle at 48% 50%, var(--accent-2), transparent 68%);
  opacity: .67;
}
.contact-link { color: #fff; text-shadow: 0 0 26px rgba(255,64,80,.15); }
.contact-link:hover { color: var(--accent-hot); }

.site-footer {
  background: linear-gradient(90deg, rgba(69,15,24,.22), rgba(23,19,22,.4), rgba(69,15,24,.16));
  border-top-color: rgba(255, 86, 101, .22);
}

.reel-modal { border-color: rgba(255, 86, 101, .28); }
.reel-placeholder {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,64,80,.38), transparent 38%),
    radial-gradient(circle at 80% 80%, rgba(127,18,32,.34), transparent 38%),
    linear-gradient(145deg, #26171c, var(--bg));
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 82% 8%, rgba(197,22,40,.10), transparent 28rem),
    var(--bg);
}
html[data-theme="light"] .site-header {
  background: linear-gradient(to bottom, var(--header-bg), rgba(197,22,40,.06), transparent);
}
html[data-theme="light"] .mobile-menu {
  background: linear-gradient(145deg, #dedede 0%, #d7d7d7 58%, #e7c9ce 100%);
}
html[data-theme="light"] .marquee {
  background: linear-gradient(90deg, #d0c6c8, #e1bfc5 50%, #d0c6c8);
}
html[data-theme="light"] .services,
html[data-theme="light"] .contact {
  background:
    radial-gradient(circle at 88% 14%, rgba(197,22,40,.13), transparent 26rem),
    linear-gradient(135deg, var(--bg-soft), #d7c1c5 100%);
}

/* FRAMEWORKS. — uppercase contrast pass */
:root {
  --caps-strong: #fff7f8;
  --caps-muted: #e5dadd;
  --media-caps: #fffafb;
  --media-shadow: 0 3px 18px rgba(0, 0, 0, .72), 0 1px 2px rgba(0, 0, 0, .88);
}

html[data-theme="light"] {
  --caps-strong: #171214;
  --caps-muted: #30272a;
  --media-caps: #fffafb;
  --media-shadow: 0 3px 20px rgba(0, 0, 0, .78), 0 1px 2px rgba(0, 0, 0, .92);
}

/* Small uppercase UI copy gets a little more weight and contrast. */
.desktop-nav,
.eyebrow,
.section-label,
.stats span,
.project-meta span,
.scroll-cue,
.site-footer,
.showreel,
.pill,
.hero-kicker {
  font-weight: 500;
}

.desktop-nav,
.site-footer {
  color: var(--caps-strong);
}

.section-label,
.stats span,
.project-meta span {
  color: var(--caps-muted);
}

/* Text placed directly over photography always uses a protected light treatment. */
.hero-kicker,
.hero .eyebrow,
.hero-bottom > p,
.scroll-cue {
  color: var(--media-caps);
  text-shadow: var(--media-shadow);
}

.hero .display {
  color: var(--media-caps);
  text-shadow: var(--media-shadow);
  -webkit-text-stroke: .7px rgba(45, 7, 14, .78);
  paint-order: stroke fill;
}

.hero .display em {
  color: #ff6572;
  -webkit-text-stroke: .7px rgba(49, 5, 13, .9);
  text-shadow: 0 3px 20px rgba(0, 0, 0, .82), 0 0 20px rgba(215, 25, 45, .25);
}

/* In light mode the photo remains cinematic instead of fighting black type. */
html[data-theme="light"] .hero-scrim {
  background:
    linear-gradient(100deg, rgba(28, 17, 21, .58) 4%, rgba(28, 17, 21, .18) 58%, rgba(105, 14, 29, .34)),
    linear-gradient(to top, rgba(22, 13, 16, .76), rgba(22, 13, 16, .08) 70%);
}

html[data-theme="light"] .hero-media img,
html[data-theme="light"] .hero-media video {
  filter: grayscale(.76) contrast(1.08) brightness(.96);
}

/* The other oversized all-caps statement gets dedicated theme contrast. */
.contact-title {
  color: #fff7f8;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .32);
}

.contact-title em {
  color: #ff6572;
  text-shadow: 0 2px 22px rgba(57, 4, 14, .42);
}

html[data-theme="light"] .contact-title {
  color: #171214;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .72), 0 0 28px rgba(255, 255, 255, .48);
}

html[data-theme="light"] .contact-title em {
  color: #a90f22;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 0 22px rgba(255, 255, 255, .4);
}

/* Preserve high contrast on intentionally red/dark display blocks. */
.poster-art,
.quote-band,
.marquee {
  --caps-strong: #fff7f8;
}

.poster-art,
.quote-band {
  text-shadow: 0 2px 14px rgba(52, 0, 10, .26);
}

html[data-theme="light"] .marquee-track {
  color: #171214;
  font-weight: 500;
}

@media (max-width: 700px) {
  .hero .display {
    -webkit-text-stroke-width: .55px;
  }
}

/* FRAMEWORKS. — light mode header glare fix */
html[data-theme="light"] .site-header {
  background:
    linear-gradient(to bottom,
      rgba(22, 16, 19, .88) 0%,
      rgba(58, 16, 28, .70) 52%,
      rgba(22, 16, 19, .16) 82%,
      transparent 100%);
  color: #fff7f8;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: blur(8px) saturate(118%);
  -webkit-backdrop-filter: blur(8px) saturate(118%);
}

html[data-theme="light"] .site-header .brand-copy,
html[data-theme="light"] .site-header .desktop-nav,
html[data-theme="light"] .site-header .header-actions {
  color: #fff7f8;
}

html[data-theme="light"] .site-header .brand-copy small {
  color: rgba(255, 247, 248, .72);
}

html[data-theme="light"] .site-header .brand-mark,
html[data-theme="light"] .site-header .theme-toggle,
html[data-theme="light"] .site-header .menu-toggle {
  border-color: rgba(255, 255, 255, .18);
}

html[data-theme="light"] .site-header .theme-toggle,
html[data-theme="light"] .site-header .menu-toggle {
  background: rgba(255, 255, 255, .07);
}


/* FRAMEWORKS. — hero title refinement */
:root {
  --hero-display: "Space Grotesk", "Manrope", system-ui, sans-serif;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-title-single {
  display: inline-block;
  max-width: 100%;
  margin: .7rem 0 1.35rem;
  font-family: var(--hero-display);
  font-size: clamp(3.6rem, 7.2vw, 7.25rem);
  line-height: .94;
  letter-spacing: -.055em;
  font-weight: 700;
  text-wrap: nowrap;
  white-space: nowrap;
}

.hero-title-single em {
  font-family: inherit;
  font-style: normal;
}

.hero-bottom {
  width: 100%;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(1.5rem, 5vw, 4rem);
}

.hero-bottom > p {
  max-width: 42rem;
}

@media (max-width: 1100px) {
  .hero-title-single {
    font-size: clamp(3.2rem, 6.6vw, 5.9rem);
  }
}

@media (max-width: 900px) {
  .hero-title-single {
    white-space: normal;
    text-wrap: balance;
    font-size: clamp(3rem, 10vw, 5rem);
    line-height: 1.02;
  }
}


/* FRAMEWORKS. — showreel embed */
.reel-embed-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.reel-embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}


/* FRAMEWORKS. — stronger red custom cursor */
.cursor-dot {
  background: var(--accent-hot);
  box-shadow:
    0 0 8px rgba(255, 64, 80, .95),
    0 0 18px rgba(215, 25, 45, .55);
}

.cursor-ring {
  border-color: var(--accent-hot);
  box-shadow:
    0 0 0 1px rgba(215, 25, 45, .18),
    0 0 14px rgba(255, 64, 80, .52),
    inset 0 0 10px rgba(215, 25, 45, .10);
}

.cursor-ring.active {
  background: rgba(215, 25, 45, .92);
  border-color: var(--accent-hot);
  box-shadow:
    0 0 18px rgba(255, 64, 80, .65),
    0 0 34px rgba(215, 25, 45, .34);
  color: #fff;
}

html[data-theme="light"] .cursor-dot {
  background: #d7192d;
  box-shadow:
    0 0 7px rgba(215, 25, 45, .88),
    0 0 15px rgba(127, 18, 32, .35);
}

html[data-theme="light"] .cursor-ring {
  border-color: #d7192d;
  box-shadow:
    0 0 0 1px rgba(127, 18, 32, .16),
    0 0 12px rgba(215, 25, 45, .40),
    inset 0 0 8px rgba(215, 25, 45, .08);
}


/* FRAMEWORKS. — play button label alignment */
.showreel {
  gap: .15rem;
}

.showreel .play {
  transform: translateY(2px);
}

.showreel-label {
  display: block;
  line-height: 1.1;
  transform: translateY(-5px);
}


/* FRAMEWORKS. — hero quote refinement */
:root {
  --hero-script: "Cormorant Garamond", "Playfair Display", Georgia, serif;
}

.hero-bottom {
  margin-top: -.2rem;
  gap: clamp(1.2rem, 4vw, 3rem);
}

.hero-tagline {
  margin: 0;
  max-width: 34rem;
  font-family: var(--hero-script);
  font-style: italic;
  font-size: clamp(1.65rem, 2.25vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--media-caps);
  text-shadow: var(--media-shadow);
  transform: translateY(-10px);
}

@media (max-width: 900px) {
  .hero-tagline {
    max-width: 100%;
    font-size: clamp(1.4rem, 5.6vw, 2.15rem);
    transform: translateY(-4px);
  }
}


/* FRAMEWORKS. — hero quote size/position hard override */
.hero-bottom > .hero-tagline {
  margin: 0;
  max-width: 44rem;
  font-family: var(--hero-script);
  font-style: italic;
  font-size: clamp(2.35rem, 3.35vw, 4.15rem);
  line-height: 1;
  letter-spacing: -.018em;
  color: var(--media-caps);
  text-shadow: var(--media-shadow);
  transform: translateY(-32px);
}

.hero-bottom {
  margin-top: -1rem;
}

@media (max-width: 900px) {
  .hero-bottom > .hero-tagline {
    max-width: 100%;
    font-size: clamp(1.95rem, 7vw, 3rem);
    line-height: 1.04;
    transform: translateY(-14px);
  }

  .hero-bottom {
    margin-top: -.35rem;
  }
}

/* FRAMEWORKS. — hero quote single-line final tuning */
.hero-bottom > .hero-tagline {
  max-width: none;
  width: auto;
  white-space: nowrap;
  font-size: clamp(2.05rem, 2.75vw, 3.35rem);
  line-height: 1;
  transform: translateY(-30px);
}

@media (max-width: 900px) {
  .hero-bottom > .hero-tagline {
    white-space: normal;
    max-width: 100%;
    font-size: clamp(1.8rem, 6.2vw, 2.6rem);
    transform: translateY(-12px);
  }
}


/* FRAMEWORKS. — mobile hero responsiveness fix */
@media (max-width: 900px) {
  .hero {
    min-height: auto;
    padding-bottom: 5.5rem;
  }

  .hero-copy {
    padding-bottom: .5rem;
  }

  .hero-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
    margin-top: .15rem;
  }

  .hero-bottom > .hero-tagline {
    white-space: normal;
    max-width: min(100%, 18ch);
    font-size: clamp(1.55rem, 6vw, 2.2rem);
    line-height: 1.06;
    transform: translateY(-4px);
  }

  .showreel {
    width: 94px;
    margin-top: .15rem;
  }

  .showreel-label {
    transform: translateY(-3px);
  }

  .scroll-cue {
    display: none !important;
  }
}

@media (max-width: 700px) {
  .hero {
    min-height: 100svh;
    padding-bottom: 2.25rem;
  }

  .hero-bottom > .hero-tagline {
    max-width: 14ch;
    font-size: clamp(1.45rem, 7.2vw, 2rem);
  }
}


/* FRAMEWORKS. — robust mobile hero cleanup */
@media (max-width: 1100px) {
  .scroll-cue {
    display: none !important;
  }
}

@media (max-width: 900px) {
  .hero {
    align-items: end;
    min-height: 100svh;
    padding-top: 98px;
    padding-bottom: 2.5rem;
  }

  .hero-copy {
    width: 100%;
  }

  .hero-title-single {
    white-space: normal;
    text-wrap: balance;
    margin-bottom: .85rem;
  }

  .hero-bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: .8rem;
    margin-top: 0 !important;
  }

  .hero-bottom > .hero-tagline {
    max-width: 13ch;
    white-space: normal;
    font-size: clamp(1.35rem, 6.4vw, 1.95rem);
    line-height: 1.08;
    transform: none !important;
  }

  .showreel {
    width: 92px;
    margin-top: 0;
  }
}

@media (max-width: 700px) {
  .hero {
    padding-bottom: 2rem;
  }

  .hero-bottom > .hero-tagline {
    max-width: 12ch;
    font-size: clamp(1.3rem, 6.8vw, 1.8rem);
  }
}


/* FRAMEWORKS. — looping hero background video */
.hero-bg-video {
  display: block;
  position: absolute;
  inset: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  pointer-events: none;
}


/* FRAMEWORKS. — desktop hero content nudge for video logo clearance */
@media (min-width: 901px) {
  .hero-copy {
    transform: translateY(52px);
  }

  .scroll-cue {
    bottom: 1.9rem;
  }
}


/* FRAMEWORKS. — desktop hero alignment fine-tune */
@media (min-width: 901px) {
  .hero-title-single {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  .hero-bottom {
    position: relative;
    display: block;
    width: 100%;
    min-height: 118px;
    margin-top: -.55rem;
  }

  .hero-bottom > .hero-tagline {
    display: block;
    max-width: none;
    width: auto;
    padding-right: 12rem;
    transform: translateY(-44px);
  }

  .showreel {
    position: absolute;
    right: 0;
    top: calc(50% - 59px);
    margin-top: 0;
  }
}


/* FRAMEWORKS. — hero vertical raise pass */
@media (min-width: 901px) {
  .hero-bg-video {
    object-position: 50% 38%;
  }

  .hero-copy {
    transform: translateY(28px);
  }

  .hero-title-single {
    margin-top: .55rem;
    margin-bottom: .8rem;
  }

  .hero-bottom {
    min-height: 104px;
    margin-top: -1rem;
  }

  .hero-bottom > .hero-tagline {
    transform: translateY(-56px);
  }

  .showreel {
    top: calc(50% - 78px);
  }
}


/* FRAMEWORKS. — hero video crop up + quote down */
@media (min-width: 901px) {
  .hero-bg-video {
    object-position: 50% 28%;
  }

  .hero-bottom > .hero-tagline {
    transform: translateY(-36px);
  }
}


/* FRAMEWORKS. — precise hero correction */
@media (min-width: 901px) {
  .hero-bg-video {
    object-position: 50% 24%;
    transform: translateY(-42px);
  }

  .hero-bottom > .hero-tagline {
    transform: translateY(-4px) !important;
  }
}


/* FRAMEWORKS. — actual crop raise + tagline +8px */
@media (min-width: 901px) {
  .hero-media {
    overflow: hidden;
  }

  .hero-bg-video {
    top: -72px;
    bottom: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100% + 72px);
    min-width: 100%;
    min-height: calc(100% + 72px);
    object-fit: cover;
    object-position: 50% 22%;
  }

  .hero-bottom > .hero-tagline {
    transform: translateY(4px) !important;
  }
}


/* FRAMEWORKS. — header logo */
.brand {
  display: inline-flex;
  align-items: start;
  width: max-content;
}

.brand-logo {
  display: block;
  width: auto;
  height: 34px;
  max-width: 160px;
  object-fit: contain;
}

@media (max-width: 700px) {
  .brand-logo {
    height: 28px;
    max-width: 132px;
  }
}


/* FRAMEWORKS. — exact uploaded header logo placement */
.brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start;
  width: max-content;
  height: 52px;
  padding: 0;
  overflow: visible;
}

.brand-logo {
  display: block !important;
  width: clamp(118px, 8vw, 145px) !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain;
  object-position: left center;
  margin: 0;
}

@media (max-width: 700px) {
  .brand {
    height: 44px;
  }

  .brand-logo {
    width: 112px !important;
    height: auto !important;
    max-width: none !important;
  }
}


/* FRAMEWORKS. — exact uploaded red logo, final header placement */
.brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: max-content !important;
  height: 84px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

.brand-logo {
  display: block !important;
  width: 164px !important;
  height: auto !important;
  max-width: none !important;
  max-height: 42px !important;
  object-fit: contain !important;
  object-position: left center !important;
  margin: 0 !important;
}

@media (max-width: 700px) {
  .brand { height: 72px !important; }
  .brand-logo { width: 128px !important; max-height: 34px !important; }
}


/* FRAMEWORKS. — compact physical header logo */
.brand-logo {
  width: 120px !important;
  height: auto !important;
  max-height: 31px !important;
}

@media (max-width: 700px) {
  .brand-logo {
    width: 96px !important;
    max-height: 25px !important;
  }
}

/* FRAMEWORKS. — navbar logo size 125x125 */
.brand-logo {
  width: 125px !important;
  height: 125px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

@media (max-width: 700px) {
  .brand-logo {
    width: 125px !important;
    height: 125px !important;
    max-width: none !important;
    max-height: none !important;
  }
}


/* FRAMEWORKS. — final header/kicker placement */
.hero-kicker {
  justify-content: flex-end;
}

.brand-logo {
  position: relative !important;
  top: 32px !important;
}

@media (max-width: 700px) {
  .brand-logo {
    top: 26px !important;
  }
}


/* FRAMEWORKS. — navbar logo horizontal adjustment */
.brand-logo {
  left: 32px !important;
}


/* FRAMEWORKS. — navbar disappears after the hero */
.site-header {
  transition:
    transform .72s cubic-bezier(.22, 1, .36, 1),
    opacity .48s ease,
    filter .62s ease,
    background-color .45s ease;
  will-change: transform, opacity, filter;
}

.site-header.is-past-hero {
  transform: translate3d(0, -125%, 0) scale(.985);
  opacity: 0;
  filter: blur(10px);
  pointer-events: none;
}

body.menu-open .site-header {
  transform: none;
  opacity: 1;
  filter: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: opacity .2s ease;
  }
  .site-header.is-past-hero {
    transform: none;
    filter: none;
  }
}

/* FRAMEWORKS. — keep navbar identical to dark mode while page theme changes */
html[data-theme="light"] .site-header {
  --text: #f3eeee;
  --muted: #b8aaae;
  --line: rgba(255, 121, 132, 0.20);
  --panel: rgba(184, 30, 47, 0.10);
  --accent: #d7192d;
  --accent-2: #7f1220;
  --accent-hot: #ff4050;
  --accent-deep: #4b1119;
  --header-bg: rgba(23, 19, 22, 0.88);

  background: linear-gradient(to bottom, var(--header-bg) 0%, rgba(71, 15, 24, .22) 62%, transparent 100%);
  color: #fff7f8;
  border-bottom: 1px solid rgba(215, 25, 45, .08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html[data-theme="light"] .site-header .brand-copy,
html[data-theme="light"] .site-header .desktop-nav,
html[data-theme="light"] .site-header .header-actions {
  color: #fff7f8;
}

html[data-theme="light"] .site-header .brand-copy small {
  color: #b8aaae;
}

html[data-theme="light"] .site-header .brand-mark {
  border-color: rgba(255, 64, 80, .45);
  background: linear-gradient(145deg, rgba(215,25,45,.18), rgba(255,255,255,.02));
  box-shadow: inset 0 0 22px rgba(215,25,45,.08);
}

html[data-theme="light"] .site-header .theme-toggle,
html[data-theme="light"] .site-header .menu-toggle {
  border-color: rgba(255, 90, 104, .28);
  background: rgba(184, 30, 47, 0.10);
}


/* =========================================================
   REFERENCES — continuous single-image parallax stories
   One image per project. Opaque content panels move over a
   sticky visual, so the image continues between the windows.
   ========================================================= */
.references-showcase {
  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--text);
}

.references-intro-stage {
  position: relative;
  min-height: clamp(560px, 82svh, 880px);
  overflow: hidden;
  background: #090709;
  isolation: isolate;
}

.references-heading {
  position: relative;
  z-index: 3;
  min-height: clamp(560px, 82svh, 880px);
  padding-top: clamp(7rem, 12vw, 11rem);
  padding-bottom: clamp(5rem, 9vw, 8rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: transparent;
}

.references-heading-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .5fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: end;
}

.references-heading-grid > p {
  margin: 0;
  max-width: 36rem;
  color: rgba(255, 246, 247, .9);
  font-size: clamp(1rem, 1.3vw, 1.22rem);
  line-height: 1.65;
  text-shadow: 0 4px 24px rgba(0,0,0,.34);
}

.references-heading-band {
  width: calc(100% + (var(--pad) * 2));
  margin-inline: calc(var(--pad) * -1);
  margin-top: auto;
  padding: clamp(1.35rem, 2.4vw, 2rem) var(--pad) clamp(1.6rem, 2.8vw, 2.35rem);
  background:
    linear-gradient(90deg, rgba(37, 8, 14, .78), rgba(11, 7, 10, .72) 18%, rgba(11, 7, 10, .64) 82%, rgba(37, 8, 14, .78)),
    linear-gradient(90deg, rgba(215,25,45,.16), transparent 24%, transparent 76%, rgba(215,25,45,.16));
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 60px rgba(0,0,0,.24);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.references-heading .section-title,
.references-heading .section-label {
  position: relative;
  z-index: 3;
  text-shadow: 0 8px 32px rgba(0,0,0,.34);
}

.references-intro-card {
  --parallax-y: 0px;
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #090709;
}

.references-intro-card .reference-parallax-image {
  height: 135%;
  object-position: center var(--focus-y, 50%);
  filter: saturate(.92) contrast(1.04) brightness(.9);
}

.references-intro-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,3,4,.58) 0%, rgba(5,3,4,.34) 24%, rgba(5,3,4,.18) 48%, rgba(5,3,4,.24) 100%),
    linear-gradient(115deg, rgba(215,25,45,.18), transparent 38%, rgba(127,18,32,.14));
  pointer-events: none;
}

.reference-story {
  position: relative;
  border-top: 1px solid var(--line);
  background: var(--bg);
  isolation: isolate;
}


.reference-visual-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(25,5,10,.24), transparent 32%, transparent 68%, rgba(25,5,10,.2)),
    linear-gradient(180deg, rgba(5,3,4,.08), transparent 45%, rgba(5,3,4,.16));
}

.reference-flow {
  position: relative;
  z-index: 2;
}

.reference-panel {
  position: relative;
  z-index: 3;
  background: var(--bg);
}

.reference-panel--intro {
  min-height: 0;
  padding-top: clamp(1.35rem, 2vw, 2rem);
  padding-bottom: clamp(1.6rem, 2.4vw, 2.4rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.reference-story-meta {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: 500 .64rem/1.4 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.reference-story-meta span:first-child { color: var(--accent-hot); }

.reference-story-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .52fr);
  gap: clamp(2rem, 7vw, 8rem);
  align-items: end;
  padding-top: clamp(1.1rem, 1.8vw, 1.6rem);
}

.reference-story-title-row h3 {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(3.6rem, 8.4vw, 9.4rem);
  line-height: .84;
  letter-spacing: -.075em;
  font-weight: 600;
}

.reference-story-title-row p {
  margin: 0;
  max-width: 38rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.38vw, 1.26rem);
  line-height: 1.68;
}

/* Transparent windows: the SAME sticky image is visible through both. */
.reference-image-window {
  --parallax-y: 0px;
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(220px, 36svh, 420px);
  overflow: hidden;
  background: #090709;
}

.reference-image-window--first {
  border-top: 1px solid rgba(255,255,255,.12);
}

.reference-parallax-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 135%;
  max-width: none;
  object-fit: cover;
  object-position: center var(--focus-y, 50%);
  transform: translate3d(0, var(--parallax-y), 0) scale(1.015);
  filter: saturate(.9) contrast(1.05) brightness(.88);
  will-change: transform;
  pointer-events: none;
}


.reference-window-index,
.reference-window-caption {
  position: absolute;
  z-index: 2;
  color: rgba(255,255,255,.86);
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
  font: 500 .62rem/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.reference-window-index {
  left: var(--pad);
  bottom: 1.5rem;
}

.reference-window-caption {
  right: var(--pad);
  bottom: 1.5rem;
  text-align: right;
}

.reference-ribbon {
  position: relative;
  z-index: 4;
  min-height: clamp(96px, 9vw, 140px);
  padding: clamp(1rem, 2.2vw, 1.8rem) var(--pad);
  display: grid;
  grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr);
  align-items: center;
  gap: 2rem;
  color: #fff7f8;
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 24%),
    linear-gradient(90deg, var(--accent-deep), var(--accent) 25%, var(--accent) 75%, var(--accent-deep));
  box-shadow: 0 18px 55px rgba(54,5,14,.22);
}

.reference-ribbon::before,
.reference-ribbon::after {
  content: "";
  position: absolute;
  top: 0;
  width: clamp(45px, 8vw, 145px);
  height: 100%;
  opacity: .34;
  background: #490814;
}

.reference-ribbon::before {
  left: 0;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.reference-ribbon::after {
  right: 0;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.reference-ribbon span {
  position: relative;
  z-index: 1;
  font: 500 .62rem/1.45 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .78;
}

.reference-ribbon span:last-child { text-align: right; }

.reference-ribbon strong {
  position: relative;
  z-index: 1;
  font-size: clamp(1.55rem, 3vw, 3rem);
  letter-spacing: -.045em;
  text-align: center;
  font-weight: 650;
  white-space: nowrap;
}

.reference-panel--copy {
  min-height: 0;
  padding-top: clamp(2.4rem, 4vw, 3.6rem);
  padding-bottom: clamp(2.4rem, 4vw, 3.6rem);
  display: grid;
  grid-template-columns: .24fr 1.36fr;
  gap: clamp(1.4rem, 3vw, 3.2rem);
  align-items: start;
  background:
    radial-gradient(circle at 12% 22%, rgba(215,25,45,.08), transparent 24rem),
    var(--bg);
}

.reference-copy-kicker {
  align-self: start;
  padding-top: .5rem;
  color: var(--accent-hot);
  font: 500 .64rem/1.5 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.reference-panel--copy p {
  grid-column: 2;
  margin: 0;
  max-width: 54rem;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.6;
  letter-spacing: -.012em;
}

html[data-theme="light"] .reference-parallax-image {
  filter: saturate(.94) contrast(1.02) brightness(.98);
}

html[data-theme="light"] .reference-visual-shade {
  background:
    linear-gradient(90deg, rgba(70,15,23,.08), transparent 32%, transparent 68%, rgba(70,15,23,.06)),
    linear-gradient(180deg, rgba(20,10,12,.03), transparent 45%, rgba(20,10,12,.07));
}


html[data-theme="light"] .references-heading-band {
  background:
    linear-gradient(90deg, rgba(18, 12, 14, .88), rgba(18, 12, 14, .82) 18%, rgba(18, 12, 14, .78) 82%, rgba(18, 12, 14, .88)),
    linear-gradient(90deg, rgba(215,25,45,.18), transparent 24%, transparent 76%, rgba(215,25,45,.18));
  border-top-color: rgba(255,255,255,.14);
  border-bottom-color: rgba(255,255,255,.14);
  box-shadow: 0 24px 72px rgba(0,0,0,.28);
}

html[data-theme="light"] .references-heading .section-title {
  color: #fffafb;
  text-shadow: 0 8px 36px rgba(0,0,0,.52);
}

html[data-theme="light"] .references-heading .section-title em {
  color: #eadde0;
}

html[data-theme="light"] .references-heading-grid > p {
  color: rgba(255, 247, 248, .94);
  text-shadow: 0 4px 24px rgba(0,0,0,.5);
}

html[data-theme="light"] .references-heading .section-label {
  color: rgba(255, 237, 240, .72);
}

html[data-theme="light"] .references-heading .section-label span:first-child {
  color: #ff5968;
}

@media (max-width: 980px) {
  .references-heading-grid,
  .reference-story-title-row {
    grid-template-columns: 1fr;
  }

  .references-heading {
    min-height: clamp(620px, 88svh, 920px);
  }

  .reference-story-title-row p { max-width: 48rem; }
  .reference-panel--copy { grid-template-columns: .2fr 1.8fr; }
  .reference-panel--copy p { grid-column: 2; }
}

@media (max-width: 700px) {
  .references-heading {
    padding-top: 6rem;
    padding-bottom: 4rem;
  }

  .references-heading-band {
    width: calc(100% + (var(--pad) * 2));
    margin-inline: calc(var(--pad) * -1);
    padding-top: 1.2rem;
    padding-bottom: 1.4rem;
  }

  .reference-story {
  }

  .reference-panel--intro {
    min-height: 0;
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
  }

  .reference-story-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
  }

  .reference-story-title-row {
    gap: 1.4rem;
    padding-top: 1rem;
  }

  .reference-story-title-row h3 {
    font-size: clamp(3.1rem, 15vw, 5.5rem);
    line-height: .87;
  }

  .reference-image-window {
    height: 34svh;
    min-height: 220px;
  }

  .reference-image-window--second {
    height: 62svh;
  }

  .reference-ribbon {
    min-height: 104px;
    grid-template-columns: auto 1fr;
    gap: .55rem 1rem;
    padding-inline: var(--pad);
  }

  .reference-ribbon strong {
    text-align: right;
    white-space: normal;
    font-size: clamp(1.35rem, 6.2vw, 2.1rem);
  }

  .reference-ribbon span:last-child {
    grid-column: 1 / -1;
    text-align: right;
  }

  .reference-ribbon::before,
  .reference-ribbon::after {
    width: 46px;
  }

  .reference-panel--copy {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 1.4rem;
    padding-top: 4.5rem;
    padding-bottom: 4rem;
  }

  .reference-panel--copy p { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
}


@media (max-width: 700px) {
  .references-intro-stage {
    min-height: 620px;
  }

  .references-heading {
    min-height: 620px;
    padding-top: 6rem;
    padding-bottom: 3rem;
  }

  .references-heading-grid > p {
    max-width: 100%;
  }

  .references-intro-card {
    height: 100%;
  }

  .reference-panel--copy {
    grid-template-columns: 1fr;
    gap: .9rem;
  }

  .reference-copy-kicker,
  .reference-panel--copy p {
    grid-column: auto;
  }

  .reference-panel--copy p {
    max-width: 100%;
  }
}


/* =========================================================
   GALLERY — hidden-entry mosaic page
   ========================================================= */
.gallery-page {
  background:
    radial-gradient(circle at 92% 8%, rgba(215,25,45,.14), transparent 28rem),
    radial-gradient(circle at 10% 72%, rgba(127,18,32,.12), transparent 32rem),
    var(--bg);
}

.gallery-main { padding-top: 88px; }

.gallery-hero {
  min-height: 64svh;
  display: flex;
  align-items: flex-end;
  padding-top: clamp(7rem, 12vw, 11rem);
  padding-bottom: clamp(4rem, 7vw, 6rem);
  border-bottom: 1px solid var(--line);
}

.gallery-hero-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .45fr);
  gap: clamp(2rem, 8vw, 10rem);
  align-items: end;
}

.gallery-title {
  margin: .8rem 0 0;
  max-width: 11ch;
  font-size: clamp(4rem, 9.5vw, 10rem);
  line-height: .82;
  letter-spacing: -.075em;
  font-weight: 600;
}

.gallery-title em { color: var(--muted); }

.gallery-hero-copy {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.gallery-hero-copy > span,
.gallery-back-link {
  font: 500 .64rem/1.5 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.gallery-hero-copy > span { color: var(--accent-hot); }
.gallery-hero-copy p { color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.65; }
.gallery-back-link { display: inline-block; margin-top: 1.2rem; border-bottom: 1px solid currentColor; }

.gallery-mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 8px;
  grid-auto-flow: dense;
  gap: 5px;
  padding-top: clamp(2.2rem, 4vw, 3.6rem);
  padding-bottom: clamp(4.5rem, 8vw, 7rem);
}

.gallery-tile {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-soft);
}

.gallery-tile--video {
  min-height: 0;
  aspect-ratio: auto !important;
}

/* Dense masonry-like layout: mixed sizes, tightly packed, no dead zones. */
.gallery-mosaic > .gallery-tile--video:nth-child(1)  { grid-column: span 7; grid-row: span 46; }
.gallery-mosaic > .gallery-tile--video:nth-child(2)  { grid-column: span 5; grid-row: span 46; }
.gallery-mosaic > .gallery-tile--video:nth-child(3)  { grid-column: span 4; grid-row: span 38; }
.gallery-mosaic > .gallery-tile--video:nth-child(4)  { grid-column: span 8; grid-row: span 38; }
.gallery-mosaic > .gallery-tile--video:nth-child(5)  { grid-column: span 5; grid-row: span 42; }
.gallery-mosaic > .gallery-tile--video:nth-child(6)  { grid-column: span 7; grid-row: span 42; }
.gallery-mosaic > .gallery-tile--video:nth-child(7)  { grid-column: span 8; grid-row: span 44; }
.gallery-mosaic > .gallery-tile--video:nth-child(8)  { grid-column: span 4; grid-row: span 44; }
.gallery-mosaic > .gallery-tile--video:nth-child(9)  { grid-column: span 6; grid-row: span 40; }
.gallery-mosaic > .gallery-tile--video:nth-child(10) { grid-column: span 6; grid-row: span 40; }
.gallery-mosaic > .gallery-tile--video:nth-child(11) { grid-column: span 4; grid-row: span 36; }
.gallery-mosaic > .gallery-tile--video:nth-child(12) { grid-column: span 8; grid-row: span 36; }
.gallery-mosaic > .gallery-tile--video:nth-child(13) { grid-column: span 7; grid-row: span 43; }
.gallery-mosaic > .gallery-tile--video:nth-child(14) { grid-column: span 5; grid-row: span 43; }
.gallery-mosaic > .gallery-tile--video:nth-child(15) { grid-column: span 8; grid-row: span 39; }
.gallery-mosaic > .gallery-tile--video:nth-child(16) { grid-column: span 4; grid-row: span 39; }
.gallery-tile--statement { grid-column: span 4; min-height: 330px; padding: clamp(1.5rem, 3vw, 3rem); display: flex; flex-direction: column; justify-content: space-between; }
.gallery-tile--statement-small { grid-column: span 4; min-height: 280px; }
.gallery-tile--red { grid-column: span 2; min-height: 260px; padding: 1.4rem; color: #fff; background: linear-gradient(145deg, var(--accent-hot), var(--accent) 52%, var(--accent-deep)); display: grid; align-content: space-between; }
.gallery-tile--note { grid-column: span 2; min-height: 260px; padding: 1.4rem; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(145deg, var(--panel), var(--bg-soft)); }

.gallery-video-card { display: block; position: absolute; inset: 0; color: #fff; }
.gallery-video-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.08) brightness(.82); transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .5s ease; }
.gallery-video-card:hover img { transform: scale(1.035); filter: saturate(.98) contrast(1.08) brightness(.92); }

.gallery-platform-poster {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .45rem;
  text-align: center;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 72% 22%, rgba(255,255,255,.15), transparent 26%),
    linear-gradient(145deg, #17080d, #5e0d1a 58%, #17080d);
  transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}
.gallery-platform-poster::before {
  content: "";
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  right: -8%;
  top: -18%;
}
.gallery-platform-poster--facebook { background: radial-gradient(circle at 18% 20%, rgba(255,255,255,.14), transparent 28%), linear-gradient(145deg, #0b1426, #163f77 60%, #0a1325); }
.gallery-platform-poster--instagram { background: radial-gradient(circle at 22% 20%, rgba(255,222,111,.28), transparent 26%), linear-gradient(145deg, #42105e, #b21b66 48%, #e56131 100%); }
.gallery-platform-poster span { position: relative; z-index: 1; font: 500 .66rem var(--mono); letter-spacing: .12em; }
.gallery-platform-poster b { position: relative; z-index: 1; font-size: clamp(3rem, 7vw, 7.5rem); line-height: .82; letter-spacing: -.07em; }
.gallery-platform-poster i { position: relative; z-index: 1; font: 500 .62rem var(--mono); letter-spacing: .12em; font-style: normal; opacity: .68; }
.gallery-video-card:hover .gallery-platform-poster { transform: scale(1.035); filter: brightness(1.08); }
.gallery-video-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,4,5,.06), rgba(8,4,5,.08) 45%, rgba(8,4,5,.78)), linear-gradient(115deg, rgba(215,25,45,.2), transparent 45%, rgba(127,18,32,.16)); }

.gallery-play-badge { position: absolute; z-index: 3; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: clamp(104px, 9vw, 150px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,255,255,.72); background: rgba(20,8,11,.38); box-shadow: 0 14px 48px rgba(0,0,0,.28); backdrop-filter: blur(10px); display: grid; place-items: center; transition: transform .35s ease, background .35s ease, border-color .35s ease; }
.gallery-video-card:hover .gallery-play-badge { transform: translate(-50%, -50%) scale(1.08); background: var(--accent); border-color: rgba(255,255,255,.92); }
.gallery-play-badge i { font-style: normal; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1; transform: translateX(.12em); }

.gallery-video-meta { position: absolute; left: clamp(1rem, 2vw, 2rem); right: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem); z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: .45rem 1rem; align-items: end; }
.gallery-video-meta span { font: 500 .62rem var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .82; }
.gallery-video-meta span:first-child { grid-column: 1 / -1; }
.gallery-video-meta strong { font-size: clamp(2.2rem, 5vw, 5.5rem); line-height: .88; letter-spacing: -.065em; }

.gallery-tile--statement > span,
.gallery-tile--note > span { color: var(--accent-hot); font: 500 .62rem var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.gallery-tile--statement strong { font-size: clamp(3rem, 5vw, 5.8rem); line-height: .76; letter-spacing: -.07em; }
.gallery-tile--statement p,
.gallery-tile--note p { margin: 0; color: var(--muted); }
.gallery-tile--red span { font: 500 .7rem var(--mono); letter-spacing: .1em; }
.gallery-tile--red i { justify-self: end; font-size: 2rem; font-style: normal; }
.gallery-tile--red b { font-size: clamp(1.3rem, 2vw, 2.2rem); letter-spacing: -.04em; }

.gallery-video-modal { width: min(1180px, calc(100% - 2rem)); max-width: 1180px; padding: 0; border: 1px solid rgba(255,90,104,.28); background: #080708; color: #fff; box-shadow: 0 34px 100px rgba(0,0,0,.6); }
.gallery-video-modal::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(12px); }
.gallery-video-panel { position: relative; }
.gallery-modal-close { color: #fff; background: rgba(18,9,11,.78); border-color: rgba(255,255,255,.2); }
.gallery-video-embed-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.gallery-video-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gallery-video-embed[src*="facebook.com/plugins/video.php"] { background: #000; }
.gallery-video-modal.is-instagram { width: min(620px, calc(100% - 2rem)); max-width: 620px; }
.gallery-instagram-embed { min-height: 680px; padding: 4rem 1rem 2rem; display: grid; place-items: start center; background: #080708; overflow: auto; }
.gallery-instagram-embed[hidden], .gallery-video-embed-wrap[hidden] { display: none !important; }
.gallery-instagram-embed .instagram-media { margin: 0 auto !important; min-width: 0 !important; width: min(100%, 540px) !important; }
@media (max-width: 700px) {
  .gallery-video-modal.is-instagram { width: calc(100% - 1rem); }
  .gallery-instagram-embed { min-height: 620px; padding: 3.5rem .5rem 1rem; }
}

html[data-theme="light"] .gallery-page {
  background:
    radial-gradient(circle at 92% 8%, rgba(197,22,40,.1), transparent 28rem),
    var(--bg);
}
html[data-theme="light"] .gallery-tile--statement,
html[data-theme="light"] .gallery-tile--note { background: #ece7e8; }
html[data-theme="light"] .gallery-video-card { color: #fff; }

@media (max-width: 980px) {
  .gallery-hero-grid { grid-template-columns: 1fr; }
  .gallery-mosaic {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 8px;
    gap: 5px;
  }
  .gallery-mosaic > .gallery-tile--video:nth-child(odd)  { grid-column: span 4; grid-row: span 38; }
  .gallery-mosaic > .gallery-tile--video:nth-child(even) { grid-column: span 2; grid-row: span 38; }
  .gallery-mosaic > .gallery-tile--video:nth-child(3n)   { grid-column: span 3; grid-row: span 34; }
  .gallery-mosaic > .gallery-tile--video:nth-child(5n)   { grid-column: span 6; grid-row: span 36; }
}

@media (max-width: 700px) {
  .gallery-main { padding-top: 72px; }
  .gallery-hero { min-height: 72svh; padding-top: 5rem; }
  .gallery-title { font-size: clamp(3.7rem, 18vw, 6.2rem); }
  .gallery-mosaic {
    grid-template-columns: 1fr;
    gap: .85rem;
  }
  .gallery-tile--video.gallery-tile--wide,
  .gallery-tile--video.gallery-tile--medium,
  .gallery-tile--video.gallery-tile--small {
    grid-column: 1;
    aspect-ratio: 4 / 5;
  }
  .gallery-play-badge { width: 104px; }
}


/* Final dense-gallery responsive overrides */
@media (max-width: 700px) {
  .gallery-main { padding-top: 70px; }
  .gallery-hero {
    min-height: auto;
    padding-top: 4.5rem;
    padding-bottom: 2.5rem;
  }
  .gallery-hero-grid {
    gap: 1.5rem;
  }
  .gallery-hero-copy {
    gap: .85rem;
  }
  .gallery-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 7px;
    grid-auto-flow: dense;
    gap: 5px;
    padding-top: 1.5rem;
    padding-bottom: 4.5rem;
  }
  .gallery-mosaic > .gallery-tile--video:nth-child(n) {
    grid-column: span 1;
    grid-row: span 28;
  }
  .gallery-mosaic > .gallery-tile--video:nth-child(3n),
  .gallery-mosaic > .gallery-tile--video:nth-child(7n),
  .gallery-mosaic > .gallery-tile--video:nth-child(11n) {
    grid-column: span 2;
    grid-row: span 34;
  }
  .gallery-play-badge {
    width: 84px;
    border-width: 1px;
  }
  .gallery-play-badge i {
    font-size: 1.45rem;
  }
}

@media (max-width: 430px) {
  .gallery-title {
    font-size: clamp(3.1rem, 16vw, 4.6rem);
  }
  .gallery-mosaic {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: .7rem;
  }
  .gallery-mosaic > .gallery-tile--video:nth-child(n),
  .gallery-mosaic > .gallery-tile--video:nth-child(3n),
  .gallery-mosaic > .gallery-tile--video:nth-child(7n),
  .gallery-mosaic > .gallery-tile--video:nth-child(11n) {
    grid-column: 1;
    grid-row: auto;
    /* Override the base .gallery-tile--video aspect-ratio:auto !important.
       Without this, absolutely positioned cards collapse to zero height on phones. */
    aspect-ratio: 4 / 5 !important;
    min-height: 0;
  }
  .gallery-play-badge {
    width: 76px;
  }
}

/* FRAMEWORKS. — remove navbar bottom strip on every page/theme */
.site-header,
html[data-theme="dark"] .site-header,
html[data-theme="light"] .site-header,
.gallery-site-header {
  border-bottom: 0 !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}


/* Footer legal information */
.site-footer {
  grid-template-columns: minmax(140px, .65fr) minmax(360px, 1.7fr) minmax(120px, .65fr);
  align-items: center;
}
.site-footer > .footer-legal {
  justify-self: center;
  width: 100%;
}
.site-footer > .footer-actions {
  justify-self: end;
}
@media (max-width: 980px) {
  .site-footer {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  .site-footer > .footer-legal {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
    margin-top: .7rem;
  }
  .site-footer > .footer-actions {
    grid-column: 2;
    grid-row: 1;
  }
}
@media (max-width: 700px) {
  .site-footer {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .site-footer > .footer-legal,
  .site-footer > .footer-actions {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
  .site-footer > .footer-actions {
    justify-content: flex-start;
  }
}

#p_tortenet{
	font-size: 32px;
}

/* === Mobile gallery hard fix v2 ===
   Keep the gallery cards in normal document flow on phones/tablets.
   This avoids zero-height grid items when the only child is absolutely positioned. */
@media (max-width: 700px) {
  .gallery-mosaic {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
    gap: .7rem !important;
  }

  .gallery-mosaic > .gallery-tile--video:nth-child(n),
  .gallery-mosaic > .gallery-tile--video:nth-child(3n),
  .gallery-mosaic > .gallery-tile--video:nth-child(5n),
  .gallery-mosaic > .gallery-tile--video:nth-child(7n),
  .gallery-mosaic > .gallery-tile--video:nth-child(11n) {
    grid-column: span 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: hidden;
  }

  .gallery-mosaic .gallery-video-card {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 5 !important;
    overflow: hidden;
  }

  .gallery-mosaic .gallery-video-card > img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

@media (max-width: 430px) {
  .gallery-mosaic {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .gallery-mosaic > .gallery-tile--video:nth-child(n),
  .gallery-mosaic > .gallery-tile--video:nth-child(3n),
  .gallery-mosaic > .gallery-tile--video:nth-child(5n),
  .gallery-mosaic > .gallery-tile--video:nth-child(7n),
  .gallery-mosaic > .gallery-tile--video:nth-child(11n) {
    grid-column: 1 !important;
  }

  .gallery-mosaic .gallery-video-card {
    aspect-ratio: 4 / 5 !important;
  }
}

/* === Contact headline spacing + responsive mobile fix v2 === */
.contact-title {
  display: grid;
  row-gap: clamp(2rem, 3vw, 4.5rem);
  line-height: .84;
}

.contact-title-line,
.contact-title em {
  display: block;
  line-height: .84;
}

.contact-title em {
  margin-top: 0;
  transform: translateX(8vw);
}

@media (max-width: 700px) {
  .contact {
    min-height: auto;
  }

  .contact-title {
    margin: 1rem 0 clamp(2.75rem, 10vw, 4rem);
    font-size: clamp(2.75rem, 13.8vw, 5.6rem);
    line-height: .9;
    letter-spacing: -.07em;
    row-gap: clamp(1.15rem, 4.5vw, 1.65rem);
    width: 100%;
    max-width: 100%;
  }

  .contact-title-line {
    line-height: .9;
  }

  .contact-title em {
    margin-top: 0;
    transform: none;
    font-size: .92em;
    line-height: .92;
    white-space: nowrap;
  }

  #p_tortenet {
    font-size: clamp(1.15rem, 6vw, 2rem);
  }

  .contact-bottom {
    gap: 2rem;
  }

  .contact-link {
    max-width: 100%;
    font-size: clamp(1rem, 5.2vw, 1.35rem);
    gap: .75rem;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 380px) {
  .contact-title {
    font-size: clamp(2.5rem, 13.2vw, 3.25rem);
    line-height: .92;
    letter-spacing: -.06em;
    row-gap: clamp(1rem, 4.2vw, 1.35rem);
  }

  .contact-title em {
    font-size: .9em;
  }
}

/* === Mobile navbar logo: exactly half size === */
@media (max-width: 700px) {
  .site-header .brand-logo,
  .gallery-site-header .brand-logo {
    width: 62.5px !important;
    height: 62.5px !important;
    max-width: 62.5px !important;
    max-height: 62.5px !important;
    object-fit: contain !important;
  }
}

/* === Mobile hero: lower text block + gallery button aligned right === */
@media (max-width: 900px) {
  .hero {
    /* Smaller bottom inset moves the hero content naturally lower. */
    padding-bottom: 1.1rem !important;
  }

  .hero-bottom {
    width: 100% !important;
    align-items: flex-start !important;
  }

  .hero-bottom .showreel {
    align-self: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 700px) {
  .hero {
    /* Phones: bring title + tagline a little closer to the bottom edge. */
    padding-bottom: .55rem !important;
  }

  .hero-title-single {
    margin-bottom: 1rem !important;
  }

  .hero-bottom {
    gap: .9rem !important;
  }
}

/* === Mobile hero fine-tuning v2: lower copy + breathing room for gallery CTA === */
@media (max-width: 700px) {
  /* Mobile only: move the whole hero copy noticeably lower than v1. */
  .hero-copy {
    position: relative !important;
    top: clamp(2.75rem, 9vw, 4.25rem) !important;
  }

  /* Keep the circular gallery button right-aligned, but away from the edge. */
  .hero-bottom .showreel {
    margin-left: auto !important;
    margin-right: 1rem !important;
  }
}

@media (max-width: 380px) {
  .hero-copy {
    top: 2.5rem !important;
  }

  .hero-bottom .showreel {
    margin-right: .75rem !important;
  }
}


/* === Mobile hero fine-tuning v3: slightly lower copy, gallery CTA ~64px higher === */
@media (max-width: 700px) {
  .hero-copy {
    top: clamp(3.25rem, 10vw, 4.75rem) !important;
  }

  .hero-bottom .showreel {
    margin-left: auto !important;
    margin-right: 1rem !important;
    transform: translateY(-64px) !important;
  }
}

@media (max-width: 380px) {
  .hero-copy {
    top: 3rem !important;
  }

  .hero-bottom .showreel {
    margin-right: .75rem !important;
    transform: translateY(-64px) !important;
  }
}
\n\n

/* === Mobile theme toggle restoration ===
   Keep the legacy light/dark CSS appearance, but guarantee that the header
   theme control remains the topmost touch target on phones/tablets. */
@media (max-width: 900px) {
  .site-header .header-actions,
  .gallery-site-header .header-actions {
    position: relative;
    z-index: 20;
    pointer-events: auto;
  }

  .site-header .theme-toggle,
  .gallery-site-header .theme-toggle {
    position: relative;
    z-index: 21;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .site-header .theme-toggle > span,
  .gallery-site-header .theme-toggle > span {
    pointer-events: none;
  }

  /* Explicitly preserve the old sun/moon states on mobile. */
  html[data-theme="dark"] .theme-toggle .sun {
    transform: none;
    opacity: 1;
  }

  html[data-theme="dark"] .theme-toggle .moon {
    transform: translateY(30px) rotate(90deg);
    opacity: 0;
  }

  html[data-theme="light"] .theme-toggle .sun {
    transform: translateY(-30px) rotate(-90deg);
    opacity: 0;
  }

  html[data-theme="light"] .theme-toggle .moon {
    transform: none;
    opacity: 1;
  }
}