:root {
  --ink: #050505;
  --paper: #f5f3ee;
  --soft: #a6a3ad;
  --line: rgba(245, 243, 238, 0.18);
  --violet: #a85cff;
  --amber: #ffc251;
  --cyan: #57e5ec;
  --scroll-drive: 0;
  --light-drive: 0.56;
  --hero-image: url("assets/party-frames/party-01.jpg");
}

* { box-sizing: border-box; }

html {
  background: var(--ink);
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--ink);
  color: var(--paper);
  font-family: "DM Sans", Arial, sans-serif;
  overflow-x: hidden;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 30;
  padding: 10px 14px;
  background: var(--paper);
  color: var(--ink);
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr minmax(330px, 560px) 1fr;
  align-items: center;
  width: 100%;
  height: 116px;
  padding: 0 clamp(22px, 4vw, 64px);
}
.site-header::before { position: absolute; z-index: -1; inset: 0 0 -46px; background: linear-gradient(180deg, rgba(5,5,5,.82), rgba(5,5,5,.34) 65%, transparent); content: ""; }

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: .52em;
  width: fit-content;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}
.brand small { color: rgba(245,243,238,.62); font-size: .64em; font-weight: 500; letter-spacing: .17em; }
.brand-dot { color: var(--violet); }

.carousel-shell {
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.category-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.5vw, 40px);
  overflow-x: auto;
  padding: 16px 8%;
  scrollbar-width: none;
}
.category-track::-webkit-scrollbar { display: none; }
.category-button {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 7px;
  border: 0;
  padding: 4px 0 8px;
  background: transparent;
  color: rgba(245, 243, 238, 0.46);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  transition: color 0.25s ease;
}
.category-button i { color: inherit; font-family: "DM Mono", monospace; font-size: 0.55rem; font-style: normal; opacity: 0.75; }
.category-button::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--paper);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.category-button:hover, .category-button:focus-visible, .category-button.is-selected { color: var(--paper); }
.category-button.is-selected::after { transform: scaleX(1); }

.header-cta {
  justify-self: end;
  border: 1px solid rgba(245, 243, 238, 0.65);
  padding: 10px 15px;
  background: transparent;
  color: var(--paper);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease;
}
.header-cta:hover, .header-cta:focus-visible { background: var(--paper); color: var(--ink); }
.header-cta span { margin-left: 12px; }

.hero {
  position: relative;
  min-height: 190svh;
  padding: 0;
  overflow: visible;
  overflow-anchor: none;
}
.hero-frame {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
.hero-kicker, .section-label {
  position: relative;
  z-index: 3;
  margin: 0;
  color: rgba(245, 243, 238, 0.64);
  font-family: "DM Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.hero-kicker { display: none; }

.photo-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #15121a;
  isolation: isolate;
}
.hero-visual, .hero-photo, .placeholder-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-visual { background: #09070b; transform: scale(calc(1 + var(--hero-lift, 0) * .035)); transform-origin: center; transition: transform .18s ease-out; }
.hero-visual::before { position: absolute; inset: -36px; background: var(--hero-image) center / cover no-repeat; content: ""; filter: blur(26px) saturate(1.2); opacity: .38; transform: scale(1.08); }
.hero-photo {
  z-index: 1;
  display: block;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  filter: saturate(1.14) contrast(1.04);
  transition: opacity 0.5s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.hero-photo.is-missing { opacity: 0; pointer-events: none; }
.hero-photo.is-changing { opacity: 0; }
.hero-photo--overlay { z-index: 2; pointer-events: none; opacity: 0; transition: opacity .38s cubic-bezier(.2,.7,.2,1); }.hero-photo--overlay.is-visible { opacity: 1; }
.placeholder-scene {
  z-index: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(3,3,6,0.2) 0%, rgba(3,3,6,0.02) 44%, rgba(3,3,6,0.88) 100%),
    radial-gradient(ellipse at 46% 30%, rgba(252,128,54,.28), transparent 34%),
    radial-gradient(ellipse at 68% 25%, rgba(132,53,255,.28), transparent 33%),
    #130f18;
}
.placeholder-scene::before, .placeholder-scene::after {
  position: absolute;
  content: "";
  border-radius: 100%;
  filter: blur(3px);
}
.placeholder-scene::before {
  top: 3%; left: 7%; width: 16vw; height: 16vw; max-width: 250px; max-height: 250px;
  background: rgba(255, 204, 82, 0.65); box-shadow: 30vw 8vw 80px rgba(130, 50, 255, 0.7), 58vw 4vw 70px rgba(82, 210, 255, 0.55);
}
.placeholder-scene::after {
  right: -5%; bottom: -22%; width: 40vw; height: 40vw; max-width: 550px; max-height: 550px;
  background: rgba(155, 55, 255, 0.36);
}
.placeholder-light { position: absolute; border-radius: 50%; mix-blend-mode: screen; filter: blur(8px); }
.light-one { top: 9%; left: 26%; width: 18px; height: 18px; background: #ffe597; box-shadow: 0 0 25px 13px rgba(255,188,74,.58); }
.light-two { top: 22%; right: 20%; width: 25px; height: 25px; background: #c490ff; box-shadow: 0 0 38px 16px rgba(161,76,255,.65); }
.light-three { top: 37%; left: 65%; width: 13px; height: 13px; background: #a9fcff; box-shadow: 0 0 32px 14px rgba(70,221,237,.65); }
.placeholder-crowd { position: absolute; right: -4%; bottom: -11%; left: -2%; display: flex; align-items: flex-end; justify-content: space-around; height: 48%; opacity: .9; }
.placeholder-crowd i { display: block; width: clamp(36px, 8vw, 118px); height: clamp(150px, 28vw, 340px); border-radius: 46% 54% 0 0; background: linear-gradient(90deg, #060509, #211b26 60%, #08070a); box-shadow: inset 10px 0 24px rgba(163,64,255,.13); transform: rotate(var(--tilt, 0deg)); }
.placeholder-crowd i:nth-child(1) { --tilt: -12deg; height: 63%; }.placeholder-crowd i:nth-child(2) { --tilt: 11deg; height: 90%; }.placeholder-crowd i:nth-child(3) { --tilt: -4deg; height: 72%; }.placeholder-crowd i:nth-child(4) { --tilt: 13deg; height: 96%; }.placeholder-crowd i:nth-child(5) { --tilt: -7deg; height: 80%; }.placeholder-crowd i:nth-child(6) { --tilt: 11deg; height: 105%; }.placeholder-crowd i:nth-child(7) { --tilt: -10deg; height: 78%; }.placeholder-crowd i:nth-child(8) { --tilt: 5deg; height: 95%; }.placeholder-crowd i:nth-child(9) { --tilt: -11deg; height: 68%; }
.placeholder-note { position: absolute; z-index: 2; top: 26px; left: 28px; padding: 7px 9px; border: 1px solid rgba(245,243,238,.35); background: rgba(5,5,5,.32); color: rgba(245,243,238,.8); font-family: "DM Mono", monospace; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.placeholder-copy { position: absolute; z-index: 2; right: 28px; bottom: 25px; margin: 0; color: rgba(245,243,238,.65); font-family: "DM Mono", monospace; font-size: .62rem; letter-spacing: .04em; line-height: 1.55; text-align: right; }.placeholder-copy strong { color: var(--paper); font-weight: 500; }

.lighting, .light-sweep, .film-grain, .shutter-lines { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.lighting { opacity: calc(var(--light-drive) * 0.46); mix-blend-mode: screen; transition: opacity .4s ease; }
.lighting-amber { background: radial-gradient(ellipse 45% 70% at calc(18% + var(--scroll-drive) * 28%) 25%, rgba(255,183,60,.62), transparent 70%); animation: amber-drift 6s ease-in-out infinite alternate; }
.lighting-purple { background: radial-gradient(ellipse 44% 74% at calc(80% - var(--scroll-drive) * 30%) 52%, rgba(139,56,255,.69), transparent 66%); animation: purple-drift 8s ease-in-out infinite alternate; }
.lighting-cyan { background: radial-gradient(ellipse 26% 38% at 53% calc(15% + var(--scroll-drive) * 65%), rgba(67,226,240,.4), transparent 68%); animation: cyan-flicker 2.7s steps(4,end) infinite; }
.light-sweep { z-index: 3; background: linear-gradient(110deg, transparent 28%, rgba(255,240,178,.12) 42%, rgba(255,255,255,.19) 48%, transparent 56%); mix-blend-mode: screen; opacity: calc(0.12 + var(--scroll-drive) * .65); transform: translateX(calc(-85% + var(--scroll-drive) * 170%)); }
.film-grain { z-index: 4; opacity: .09; 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; animation: grain .27s steps(2,end) infinite; }
.shutter-lines { z-index: 5; opacity: calc(var(--scroll-drive) * .1); background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(240,216,255,.21) 8px, transparent 9px 14px); mix-blend-mode: overlay; animation: shutter .68s steps(2,end) infinite; }
.photo-stage::after { position: absolute; z-index: 6; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.52), transparent 22%, transparent 78%, rgba(0,0,0,.52)), linear-gradient(180deg, rgba(0,0,0,.36), transparent 24%, transparent 70%, rgba(0,0,0,.48)), radial-gradient(ellipse at center, transparent 37%, rgba(0,0,0,.23) 100%); content: ""; pointer-events: none; }
.photo-meta { display: none; }
.live-mark { display: flex; align-items: center; gap: 8px; }.live-mark i { width: 6px; height: 6px; border-radius: 100%; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
#visual-caption { text-align: right; }

.hero-title { position: absolute; z-index: 4; top: 58%; left: clamp(24px, 5.2vw, 86px); display: flex; align-items: baseline; gap: 0; width: max-content; max-width: calc(100% - 48px); margin: 0; transform: translateY(-38%); color: var(--paper); font-size: clamp(3.5rem, 7.4vw, 8.25rem); font-weight: 400; letter-spacing: -.052em; line-height: .98; }
.hero-title span, .hero-title em { display: inline-block; white-space: nowrap; }.hero-title em { margin-left: -.045em; color: var(--violet); font-family: "Playwrite IN", "Iowan Old Style", cursive; font-size: .8em; font-style: italic; font-weight: 300; letter-spacing: -.07em; line-height: .9; transform: rotate(-3deg); text-shadow: 0 0 34px rgba(168,92,255,.2); }
.hero-bottom { position: absolute; z-index: 5; right: clamp(22px, 4vw, 66px); bottom: 54px; left: clamp(22px, 4vw, 66px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 20px; }.hero-description { max-width: none; margin: 0; color: rgba(245,243,238,.72); font-family: "DM Mono", monospace; font-size: .6rem; letter-spacing: .14em; line-height: 1.42; text-transform: uppercase; }.scroll-cue { display: inline-grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgba(245,243,238,.8); border-radius: 100%; background: none; color: var(--paper); }.scroll-cue span { display: none; }.scroll-cue b { font-size: 1.75rem; font-weight: 300; line-height: 1; animation: float 1.7s ease-in-out infinite; }.hero-index { position: relative; justify-self: end; margin: 0; padding-right: 128px; color: rgba(245,243,238,.55); font-family: "DM Mono", monospace; font-size: .61rem; letter-spacing: .12em; }.hero-index::after { position: absolute; top: 50%; right: 0; width: 100px; height: 1px; background: linear-gradient(90deg, var(--violet) 0 30%, rgba(245,243,238,.28) 30%); content: ""; }.hero-index span { color: var(--paper); }

.about { position: relative; z-index: 2; padding: clamp(100px, 14vw, 180px) clamp(22px, 8.1vw, 126px) clamp(90px, 11vw, 145px); background: var(--ink); }.about-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(250px, .54fr); gap: 12vw; align-items: end; margin-top: clamp(42px, 7vw, 88px); }.about h2, .contact h2 { max-width: 800px; margin: 0; font-size: clamp(2.8rem, 6.5vw, 7.4rem); font-weight: 500; letter-spacing: -.07em; line-height: .91; }.about h2 em, .contact h2 em { color: var(--violet); font-family: "Playwrite IN", "Iowan Old Style", cursive; font-size: .75em; font-style: italic; font-weight: 300; letter-spacing: -.1em; }.about-copy { padding-bottom: 4px; }.about-copy p, .contact-intro > p:last-child { margin: 0 0 18px; color: rgba(245,243,238,.7); font-size: 1rem; line-height: 1.6; }.text-link { position: relative; border: 0; border-bottom: 1px solid var(--paper); padding: 0 0 8px; background: none; color: var(--paper); font-size: .78rem; font-weight: 600; letter-spacing: .01em; }.text-link span { padding-left: 20px; color: var(--violet); font-size: 1.1rem; }.experience-strip { display: grid; grid-template-columns: 1fr 2.1fr 1.2fr auto; gap: 25px; align-items: center; margin-top: clamp(80px, 11vw, 150px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 19px 0; }.strip-label, .strip-copy { color: rgba(245,243,238,.48); font-family: "DM Mono", monospace; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }.experience-strip strong { font-size: 1rem; font-weight: 500; }.strip-arrow { color: var(--violet); font-size: 1.1rem; }

.contact { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(430px, 1fr); gap: clamp(55px, 12vw, 220px); padding: clamp(95px, 12vw, 165px) clamp(22px, 8.1vw, 126px); background: #f0ede7; color: var(--ink); }.contact .section-label { color: rgba(5,5,5,.52); }.contact h2 { margin-top: clamp(42px, 6vw, 70px); }.contact h2 em { color: #782dca; }.contact-intro > p:last-child { max-width: 330px; margin-top: 42px; color: rgba(5,5,5,.65); }.contact-form { align-self: start; padding-top: 5px; }.form-row { margin-bottom: 28px; }.form-row > label, .split-row label { display: block; margin-bottom: 9px; color: rgba(5,5,5,.72); font-family: "DM Mono", monospace; font-size: .61rem; letter-spacing: .07em; text-transform: uppercase; }.form-row label span { opacity: .65; text-transform: none; }.split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } input, select, textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(5,5,5,.3); border-radius: 0; padding: 8px 0 11px; outline: none; background: transparent; color: var(--ink); font-size: .95rem; transition: border-color .2s ease; } input::placeholder, textarea::placeholder { color: rgba(5,5,5,.38); } input:focus, select:focus, textarea:focus { border-color: #782dca; } textarea { min-height: 94px; resize: vertical; line-height: 1.45; } select { cursor: pointer; }.form-action { display: flex; align-items: center; gap: 18px; margin-top: 36px; }.submit-button { border: 1px solid var(--ink); padding: 15px 21px; background: var(--ink); color: var(--paper); font-size: .73rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; transition: background .25s ease, color .25s ease; }.submit-button:hover, .submit-button:focus-visible { background: transparent; color: var(--ink); }.submit-button span { margin-left: 15px; color: var(--violet); font-size: 1rem; }.form-action p, .form-message { margin: 0; color: rgba(5,5,5,.52); font-size: .68rem; line-height: 1.45; }.form-message { min-height: 22px; margin-top: 14px; color: #5a1e9b; }.form-message.is-error { color: #a11313; }

.site-footer { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 20px; padding: 29px clamp(22px, 5.7vw, 88px); background: var(--ink); }.site-footer p, .site-footer > a:last-child { margin: 0; color: rgba(245,243,238,.5); font-size: .68rem; }.site-footer > a:last-child { justify-self: end; border-bottom: 1px solid rgba(245,243,238,.4); padding-bottom: 4px; }.site-footer > a:last-child span { margin-left: 10px; color: var(--violet); }

.submit-button:disabled { cursor: wait; opacity: .62; }.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

body[data-category="concert"] .hero-visual { background: linear-gradient(120deg, #06060a, #11122a 42%, #250e31); }body[data-category="concert"] .placeholder-scene { background: radial-gradient(ellipse at 16% 18%, rgba(86,221,248,.75), transparent 24%), radial-gradient(ellipse at 80% 19%, rgba(255,64,169,.5), transparent 32%), linear-gradient(180deg,#151326,#030307 72%); }body[data-category="concert"] .placeholder-scene::before { left: 43%; width: 5vw; height: 5vw; background: #e7fbff; box-shadow: -29vw 7vw 90px 35px rgba(92,230,255,.7), 30vw 9vw 90px 30px rgba(255,65,185,.6); }body[data-category="concert"] .placeholder-crowd { height: 53%; }
body[data-category="wedding"] .hero-visual { background: #302217; }body[data-category="wedding"] .placeholder-scene { background: radial-gradient(ellipse at 50% 15%, rgba(255,221,167,.82), transparent 33%), radial-gradient(ellipse at 75% 53%, rgba(248,129,190,.38), transparent 38%), linear-gradient(180deg, #504231, #201b1e 76%); }body[data-category="wedding"] .placeholder-scene::before { top: 20%; left: 25%; background: rgba(255,246,218,.9); box-shadow: 22vw 2vw 90px 37px rgba(255,172,207,.54); }body[data-category="wedding"] .placeholder-crowd i { background: linear-gradient(90deg,#1b1212,#4a3132 60%,#180f10); }
body[data-category="movie"] .hero-visual { background: #070b14; }body[data-category="movie"] .placeholder-scene { background: linear-gradient(180deg, #101a2b 0%, #050609 58%), radial-gradient(ellipse at 50% 5%,rgba(110,220,255,.4),transparent 34%); }body[data-category="movie"] .placeholder-scene::before { top: 7%; left: 15%; width: 70%; height: 46%; max-width: none; max-height: none; border-radius: 0; background: linear-gradient(135deg,rgba(110,235,255,.95),rgba(130,96,255,.58)); box-shadow: 0 0 80px rgba(97,210,255,.3); }body[data-category="movie"] .placeholder-crowd { height: 38%; }.photo-stage[data-category="movie"] .placeholder-note { background: rgba(5,5,12,.55); }

@keyframes amber-drift { from { transform: translate3d(-4%, -2%, 0) scale(.96); } to { transform: translate3d(6%, 4%, 0) scale(1.1); } }@keyframes purple-drift { from { transform: translate3d(5%, 3%, 0) scale(1.05); } to { transform: translate3d(-7%, -3%, 0) scale(.92); } }@keyframes cyan-flicker { 0%, 17%, 45%, 100% { opacity: .22; } 18%, 44% { opacity: .76; } 68% { opacity: .36; } }@keyframes grain { 0% { transform: translate(0,0); } 25% { transform: translate(1%,-2%); } 50% { transform: translate(-2%,1%); } 75% { transform: translate(3%,2%); } 100% { transform: translate(-1%,-1%); } }@keyframes shutter { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(7px); } }@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

@media (max-width: 860px) { .site-header { grid-template-columns: auto 1fr auto; gap: 18px; height: 80px; padding-inline: 20px; }.category-nav { min-width: 0; }.category-track { justify-content: flex-start; gap: 22px; padding-inline: 10%; }.header-cta { padding: 9px; font-size: 0; }.header-cta span { margin: 0; font-size: .9rem; }.hero { min-height: 700px; padding: 122px 20px 31px; }.photo-stage { inset: 104px 20px 97px; }.hero-title { top: 48%; left: 9.2vw; gap: 14px; font-size: clamp(3.8rem, 10.8vw, 6.2rem); }.hero-bottom { right: 20px; bottom: 28px; left: 20px; }.about-grid, .contact { grid-template-columns: 1fr; }.about-grid { gap: 38px; }.experience-strip { grid-template-columns: 1fr 1fr auto; }.strip-copy { display: none; }.contact { gap: 60px; }.contact-form { max-width: 690px; }.site-footer { grid-template-columns: 1fr auto; }.site-footer p { display: none; } }
@media (max-width: 570px) { .site-header { gap: 12px; }.brand { font-size: .84rem; }.category-track { gap: 19px; padding-inline: 12%; }.category-button { font-size: .67rem; }.category-button i { display: none; }.hero { min-height: 660px; }.photo-stage { inset: 93px 12px 106px; }.photo-meta { right: 14px; bottom: 14px; left: 14px; font-size: .47rem; }.photo-meta #visual-caption { display: none; }.placeholder-note { top: 15px; left: 15px; }.placeholder-copy { right: 15px; bottom: 16px; font-size: .49rem; }.hero-title { top: 47%; left: 7vw; flex-direction: column; align-items: flex-start; gap: 5px; width: auto; font-size: clamp(3.35rem, 16.6vw, 5rem); }.hero-title em { margin-left: 13vw; }.hero-bottom { grid-template-columns: 1fr auto; align-items: end; }.scroll-cue { display: none; }.hero-index { grid-column: 2; }.hero-description { font-size: .75rem; }.about, .contact { padding-right: 22px; padding-left: 22px; }.about h2, .contact h2 { font-size: clamp(2.7rem, 14vw, 4.4rem); }.experience-strip { grid-template-columns: 1fr auto; gap: 12px; }.strip-label { display: none; }.split-row { grid-template-columns: 1fr; gap: 28px; }.form-action { align-items: flex-start; flex-direction: column; gap: 12px; }.site-footer { padding: 24px 20px; }.site-footer .brand { font-size: .85rem; }.site-footer > a:last-child { font-size: .6rem; }.placeholder-crowd i { width: 14vw; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.hero { min-height: 100svh; }.hero-frame { position: relative; }.lighting, .light-sweep { animation: none; }.film-grain, .shutter-lines { display: none; }.scroll-cue b { animation: none; }.hero-photo { transition: none; } }

@media (max-width: 860px) {
  .site-header { height: 92px; }
  .brand { font-size: .72rem; }
  .brand small { display: none; }
  .hero { min-height: 720px; }
  .photo-stage { inset: 0; height: auto; }
  .hero-photo { object-fit: contain; }
  .hero-title { top: 51%; left: 7vw; gap: 0; font-size: clamp(3.5rem, 10.3vw, 6rem); }
  .hero-bottom { right: 28px; bottom: 36px; left: 28px; }
  .hero-description { font-size: .53rem; }
}

@media (max-width: 570px) {
  .site-header { height: 76px; }
  .hero { min-height: 640px; }
  .photo-stage { inset: 0; height: auto; min-height: 0; }
  .hero-title { top: 47%; left: 6vw; flex-direction: column; align-items: flex-start; gap: 4px; width: auto; font-size: clamp(3.2rem, 15.4vw, 4.7rem); line-height: .91; }
  .hero-title em { margin-left: 8vw; }
  .hero-bottom { right: 20px; bottom: 25px; left: 20px; }
  .hero-description { max-width: 175px; font-size: .49rem; line-height: 1.7; }
  .scroll-cue { width: 48px; height: 48px; }
  .scroll-cue b { font-size: 1.4rem; }
  .hero-index { padding-right: 0; font-size: .54rem; }
  .hero-index::after { display: none; }
}

@media (max-width: 860px) {
  .hero { min-height: 100svh; }
  .photo-stage { inset: 0; height: auto; background: #000; }
  .hero-visual { background: #000; }
  .hero-visual::before { display: none; }
  .hero-photo { object-fit: cover; object-position: center; }
  .photo-stage::after {
    background: linear-gradient(
      180deg,
      #000 0%,
      rgba(0, 0, 0, .76) 11%,
      rgba(0, 0, 0, .14) 29%,
      rgba(0, 0, 0, .1) 66%,
      rgba(0, 0, 0, .76) 90%,
      #000 100%
    );
  }
}

.hero { min-height: 190svh; }
.photo-stage { inset: 10svh 0; height: auto; background: #000; }
.hero-visual { background: #000; }
.hero-visual::before { display: none; }
.hero-photo { object-fit: cover; object-position: center; }
.photo-stage::after {
  background: linear-gradient(
    180deg,
    #000 0%,
    rgba(0, 0, 0, .76) 11%,
    rgba(0, 0, 0, .14) 29%,
    rgba(0, 0, 0, .1) 66%,
    rgba(0, 0, 0, .76) 90%,
    #000 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .hero { min-height: 100svh; }
  .hero-frame { position: relative; }
}

@media (max-width: 570px) {
  .hero { min-height: 100svh; overflow: hidden; }
  .hero-frame { position: relative; top: auto; height: 100svh; min-height: 100svh; }
  .photo-stage { inset: 0 !important; }
  .hero-photo { object-fit: cover !important; object-position: center; }
  .hero-title {
    top: 55%;
    right: 20px;
    left: 20px;
    width: auto;
    max-width: none;
    font-size: clamp(2.9rem, 11.5vw, 4.25rem);
    line-height: .9;
    transform: translateY(-50%);
  }
  .hero-title span { max-width: 100%; white-space: normal; }
  .hero-title em { margin-left: 0; white-space: nowrap; }
  .hero-bottom {
    right: 20px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: 20px;
  }
  .hero-description { max-width: 240px; font-size: .52rem; }
  input, select, textarea { font-size: 16px; }
}