:root{--black:#080808;--red:#d71920;--pad:clamp(22px,4vw,68px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:#fff;font-family:Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
.skip{position:fixed;top:-70px;left:20px;z-index:100;background:#fff;color:#000;padding:12px 18px}
.skip:focus{top:20px}
.site-header{position:absolute;inset:0 0 auto;z-index:10;height:96px;padding:0 var(--pad);display:flex;align-items:center;pointer-events:none}
.brand{display:flex;align-items:center;gap:16px;text-transform:uppercase;font-size:10px;letter-spacing:.2em;pointer-events:auto}
.brand img{width:104px;height:auto;filter:brightness(0) invert(1)}
.brand span{border-left:1px solid rgba(255,255,255,.45);padding-left:16px}
.floating-actions{position:fixed;z-index:50;left:50%;bottom:24px;transform:translateX(-50%);display:flex;gap:8px;padding:6px;background:rgba(8,8,8,.82);border:1px solid rgba(255,255,255,.18);border-radius:6px;box-shadow:0 12px 40px rgba(0,0,0,.28);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.floating-actions a{display:flex;align-items:center;justify-content:center;gap:12px;min-height:46px;padding:0 18px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:background .2s,color .2s}
.floating-actions a:hover,.floating-actions a:focus-visible{background:#fff;color:#111;outline:none}
.floating-actions .floating-actions__primary{background:var(--red);color:#fff}
.floating-actions span{font-size:14px;font-weight:400}
.hero{height:100svh;min-height:650px;position:relative;overflow:hidden;background:#151515}
.hero-media,.hero-slide,.hero-slide img,.hero-shade{position:absolute;inset:0}
.hero-slide{opacity:0;transition:opacity 1.6s ease}
.hero-slide.is-active{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:scale(1.025);animation:hero-drift 9s ease-out forwards}
.hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.76) 0,rgba(0,0,0,.16) 58%,rgba(0,0,0,.04)),linear-gradient(0deg,rgba(0,0,0,.5),transparent 42%)}
.hero-copy{position:absolute;left:var(--pad);bottom:14vh;max-width:780px}
.eyebrow{margin:0 0 28px;text-transform:uppercase;letter-spacing:.2em;font-size:10px;font-weight:700}
.hero h1{font-size:clamp(64px,9.5vw,154px);line-height:.82;letter-spacing:-.075em;margin:0;font-weight:700}
.hero-copy>p:last-child{font-size:clamp(15px,1.4vw,20px);line-height:1.45;max-width:390px;margin:35px 0 0}
.scroll-cue{position:absolute;left:var(--pad);bottom:42px;display:flex;align-items:center;gap:15px;text-transform:uppercase;letter-spacing:.18em;font-size:9px}
.scroll-cue i{display:block;width:34px;height:1px;background:#fff;position:relative}
.scroll-cue i:after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-right:1px solid #fff;border-bottom:1px solid #fff;transform:rotate(45deg)}
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:dense;gap:6px;padding:6px;background:var(--black)}
.frame{margin:0;overflow:hidden;background:#151515;position:relative}
.frame--third{grid-column:span 4;aspect-ratio:3/2}
.frame--wide{grid-column:span 8;aspect-ratio:16/9}
.frame--tall{grid-column:span 4;aspect-ratio:8/9}
.frame picture{display:block;width:100%;height:100%}
.frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .8s cubic-bezier(.2,.65,.25,1)}
.frame--focus-left img{object-position:35% center}
@media (hover:hover){.frame:hover img{transform:scale(1.018)}}
@keyframes hero-drift{to{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-slide{transition:none}.hero-slide img{animation:none}.frame img{transition:none}}
@media (max-width:700px){
  .site-header{height:76px}
  .brand img{width:88px}
  .brand span{font-size:8px}
  .hero{min-height:600px}
  .hero-copy{bottom:18vh}
  .hero h1{font-size:clamp(58px,16.8vw,70px)}
  .hero-copy>p:last-child{max-width:calc(100vw - 44px)}
  .hero-shade{background:linear-gradient(90deg,rgba(0,0,0,.68),rgba(0,0,0,.08)),linear-gradient(0deg,rgba(0,0,0,.58),transparent 48%)}
  .scroll-cue{bottom:86px}
  .gallery{display:block;padding:4px}
  .frame{width:100%;margin:0 0 4px;aspect-ratio:auto}
  .frame img,.frame picture{height:auto}
  .floating-actions{right:8px;bottom:8px;left:8px;transform:none;gap:5px;padding:5px}
  .floating-actions a{flex:1;min-width:0;padding:0 9px;font-size:8.5px;letter-spacing:.08em}
}