:root { font-family: Inter, Arial, sans-serif; color-scheme: light; }
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; overflow-x: clip; background: #efede8; padding-bottom: 400px; }
a { color: inherit; }
a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.hero { position: relative; height: max(1280px, 60vw); background: #282d30; color: #fff; isolation: isolate; }
.hero-scene, .hero-cutout { position: absolute; inset: 0; pointer-events: none; }
.hero-scene { z-index: 0; overflow: hidden; }
.hero-photo, .hero-cutout img { display: block; position: absolute; left: 0; top: -80px; width: 100%; height: calc(100% + 80px); object-fit: cover; object-position: center; transform: scale(1.055); transform-origin: 50% 100%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(rgba(23,26,28,.32), rgba(23,26,28,.28)), radial-gradient(circle at 52% 38%, transparent 14%, rgba(0,0,0,.65) 100%); }
.hero-word-sticky { position: sticky; z-index: 2; top: 10rem; display: flex; align-items: flex-start; justify-content: center; width: 100%; padding: 0 3.75rem 6rem; pointer-events: none; overflow-x: clip; }
.hero-word { width: 100%; max-width: 1320px; font-size: 33.2vw; font-weight: 400; line-height: .79; letter-spacing: -.105em; white-space: nowrap; text-align: center; transform: scaleX(1.2); }
.hero-cutout { z-index: 3; overflow: hidden; will-change: opacity; }
.hero-nav { position: fixed; z-index: 5; left: 0; right: 0; top: 0; min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 3.75rem; transition: background-color .25s; }
.hero-brand { display: inline-flex; flex-direction: column; gap: 4px; text-decoration: none; font-size: 28px; font-weight: 600; line-height: 1; letter-spacing: -.075em; }
.hero-brand span { font-size: 8px; font-weight: 500; letter-spacing: .13em; }
.hero-contact { display: inline-flex; gap: 30px; align-items: center; min-height: 42px; padding: 0 18px; border: 1px solid rgba(255,255,255,.75); border-radius: 99px; font-size: 12px; text-decoration: none; background: rgba(0,0,0,.1); }
.hero-contact span { font-size: 18px; }
.hero-contact:hover { background: #fff; color: #20262a; }
.hero-content { position: absolute; z-index: 4; left: 3.75rem; right: 3.75rem; bottom: 5.94rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; opacity: 0; transform: translateY(20%); will-change: opacity, transform; }
.hero-content h1 { margin: 0; max-width: 760px; font-size: clamp(46px, 5.2vw, 78px); line-height: 1.03; letter-spacing: -.06em; font-weight: 400; }
.hero-content-side { width: min(100%, 375px); justify-self: end; }
.hero-content-side p { margin: 0 0 25px; font-size: 16px; line-height: 1.5; letter-spacing: -.018em; }
.hero-button { display: inline-flex; align-items: center; gap: 22px; min-height: 48px; padding: 5px 5px 5px 19px; border-radius: 99px; background: #fff; color: #20262a; text-decoration: none; font-size: 13px; font-weight: 500; }
.hero-button-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #22292c; color: #fff; font-size: 20px; }
@media (max-width: 991px) { .hero { height: max(960px, 100svh); } .hero-word-sticky { padding-left: 2rem; padding-right: 2rem; } .hero-nav { padding-left: 2rem; padding-right: 2rem; } .hero-content { left: 2rem; right: 2rem; bottom: 3rem; } }
@media (max-width: 767px) { body { padding-bottom: 500px; } .hero { height: max(820px, 115svh); } .hero-word-sticky { top: 10rem; padding: 0 1rem 3rem; } .hero-word { font-size: 31vw; line-height: .85; transform: scaleX(1.23); } .hero-nav { min-height: 72px; padding: 15px 1rem; } .hero-brand { font-size: 21px; } .hero-brand span { font-size: 6px; } .hero-contact { min-height: 36px; gap: 12px; padding: 0 13px; font-size: 11px; } .hero-contact span { font-size: 15px; } .hero-content { left: 1rem; right: 1rem; bottom: 5rem; grid-template-columns: 1fr; gap: 1.25rem; } .hero-content h1 { font-size: clamp(41px, 12.5vw, 64px); } .hero-content-side { justify-self: start; max-width: 370px; } .hero-content-side p { margin-bottom: 14px; font-size: 14px; } .hero-button { min-height: 42px; padding-left: 15px; font-size: 12px; } .hero-button-icon { width: 32px; height: 32px; font-size: 16px; } .hero-photo, .hero-cutout img { top: -70px; height: calc(100% + 70px); transform: none; } .hero-shade { background: linear-gradient(180deg, rgba(24,26,28,.20) 0%, rgba(24,26,28,.32) 45%, rgba(0,0,0,.85) 100%); } }
@media (max-width: 479px) { .hero { height: max(899px, 100svh); } }
@media (prefers-reduced-motion: reduce) { .hero-cutout, .hero-content { will-change: auto; } }