:root {
  color-scheme: dark;
  --ink: #12211e;
  --deep: #04211d;
  --teal: #0ea5a4;
  --mint: #2dd4bf;
  --cream: #faf9f5;
  --cut: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
}
* { box-sizing: border-box; }
html { min-width: 280px; background: var(--cream); }
body { margin: 0; padding: 14px; color: var(--cream); font-family: 'Hanken Grotesk', Inter, system-ui, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--mint); outline-offset: 7px; }
.skip { position: fixed; top: -80px; left: 24px; z-index: 10; padding: 14px 20px; color: var(--deep); background: var(--cream); }
.skip:focus { top: 24px; }
.motion-access { position: fixed; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.motion-access:focus-visible { z-index: 10; top: 24px; left: 24px; width: auto; height: auto; padding: 14px 20px; clip-path: none; background: var(--cream); color: var(--deep); }
.scene {
  position: relative; isolation: isolate; display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: max(690px, calc(100svh - 28px));
  overflow: hidden; border-radius: 18px; background: var(--deep);
}
.scene__media, .scene__shade { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.scene__poster, .scene__video { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.scene__video { opacity: 0; transition: opacity 1s ease; }
.scene__video.is-ready { opacity: 1; }
.scene__shade {
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,8,8,.25), transparent 28%, transparent 56%, rgba(0,8,8,.82) 100%),
              radial-gradient(ellipse at 50% 45%, rgba(0,8,8,.43), rgba(0,8,8,.36) 30%, transparent 76%),
              radial-gradient(ellipse 210px 190px at 70px 80px, rgba(0,8,8,.36), transparent);
  box-shadow: inset 0 0 0 1px rgba(250,249,245,.1);
  border-radius: inherit;
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px 42px 0; }
.brand { display: flex; flex-direction: column; align-items: center; width: 126px; flex-shrink: 0; }
.brand img { display: block; height: auto; }
.brand__mark { width: 68%; opacity: .92; }
.brand__wordmark { width: 100%; margin-top: 4px; }
.brand__descriptor { display: block; margin-top: 5px; padding-bottom: 2px; color: #c4e8e3; font-size: 8.5px; line-height: 1.5; font-weight: 500; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; }
.nav__right { display: flex; align-items: center; gap: 35px; }
.cut { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 26px; min-height: 47px; padding: 13px 24px; clip-path: var(--cut); transition: background .25s ease, color .25s ease; }
.cut:focus-visible { outline: 0; box-shadow: inset 0 0 0 3px var(--mint); }
.cut svg { flex-shrink: 0; transition: transform .25s ease; }
.cut:hover svg { transform: translate(3px, -1px); }
.cut--glass { background: rgba(250,249,245,.15); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.cut--glass::before { content: ''; position: absolute; inset: 1px; background: rgba(4,33,29,.32); clip-path: var(--cut); z-index: -1; }
.cut--glass:hover { background: rgba(250,249,245,.25); }
.contact { font-size: 13px; }
.cut--cream { background: var(--cream); color: var(--deep); }
.cut--cream:hover { background: #d8f2eb; }
.intro { align-self: center; text-align: center; padding: 48px 24px 75px; }
h1 { margin: 0 auto; max-width: 1000px; font-size: clamp(58px, 6.7vw, 102px); line-height: .99; letter-spacing: -.058em; font-weight: 400; text-wrap: balance; text-shadow: 0 3px 32px rgba(4,33,29,.23); }
.intro__action { margin-top: 34px; }
.reserve { min-width: 227px; min-height: 53px; font-size: 14px; font-weight: 600; }
.scene__footer { padding: 0 42px 28px; }
.footer__meta { display: flex; align-items: center; gap: 24px; min-height: 26px; margin-bottom: 17px; font-size: 10px; letter-spacing: .035em; color: rgba(250,249,245,.73); }
.footer__place { white-space: nowrap; }
.footer__rule { height: 1px; flex: 1; background: rgba(250,249,245,.22); }
.lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.line { position: relative; display: flex; gap: 16px; align-items: center; min-width: 0; min-height: 78px; padding: 12px 20px 12px 12px; clip-path: var(--cut); background: rgba(250,249,245,.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: background .25s ease; }
.line::before { content: ''; position: absolute; inset: 1px; z-index: -1; clip-path: var(--cut); background: rgba(4,33,29,.3); }
.line:hover { background: rgba(250,249,245,.2); }
.line:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--mint); }
.line__photo { flex-shrink: 0; width: 54px; height: 54px; object-fit: cover; border-radius: 8px; transition: transform .3s ease; }
.line__content { min-width: 0; }
.line__name { display: block; font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.line__detail { display: block; margin-top: 4px; color: rgba(250,249,245,.72); font-size: 11.5px; }
.line__arrow { flex-shrink: 0; margin-left: auto; color: rgba(250,249,245,.65); transition: transform .25s ease, color .25s ease; }
.line:hover .line__arrow { transform: translate(3px, -3px); color: var(--mint); }
.line:hover .line__photo { transform: scale(1.05); }
@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.entrance { animation: fade-up .8s cubic-bezier(.16,1,.3,1) var(--delay,0s) both; }
@media (min-width: 1600px) {
  .nav { padding: 34px 60px 0; }
  .scene__footer { padding: 0 60px 35px; }
  .brand { width: 136px; }
}
@media (max-width: 900px) {
  .nav { padding: 25px 26px 0; }
  .scene__footer { padding: 0 26px 22px; }
  .line { gap: 12px; padding: 10px 14px 10px 10px; }
  .line__photo { width: 44px; height: 44px; }
  .line__name { font-size: 16px; }
  .line__detail { font-size: 10.5px; }
  .line__arrow { width: 14px; }
}
@media (max-width: 600px) {
  html { background: var(--deep); }
  body { padding: 0; }
  /* Full-bleed motion on mobile, preserving the desktop frame. */
  .scene { border-radius: 0; min-height: 100svh; }
  .scene__poster, .scene__video { object-position: 45% 50%; }
  .scene__shade { background: linear-gradient(180deg, rgba(0,8,8,.32), transparent 30%, rgba(0,8,8,.24) 57%, rgba(0,8,8,.9) 100%), radial-gradient(ellipse at 50% 43%, rgba(0,8,8,.37), transparent 72%); }
  .nav { padding: 18px 19px 0; }
  .brand { width: 96px; }
  .brand__descriptor { font-size: 6.6px; letter-spacing: .3px; }
  .contact { min-height: 43px; padding: 11px 15px; gap: 15px; font-size: 12px; }
  .intro { padding: 58px 14px 55px; }
  h1 { font-size: clamp(38px, 10.4vw, 62px); line-height: 1.06; letter-spacing: -.053em; }
  .intro__action { margin-top: 28px; }
  .reserve { min-height: 49px; min-width: 212px; font-size: 13px; }
  .scene__footer { padding: 0 20px 15px; }
  .footer__meta { font-size: 9px; gap: 10px; margin-bottom: 8px; }
  .lines { gap: 8px; }
  .line { flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; padding: 10px 10px 12px; }
  .line__photo { width: 100%; height: auto; aspect-ratio: 1.35; border-radius: 6px; }
  .line__name { font-size: 14.5px; }
  .line__detail { font-size: 9.5px; line-height: 1.35; margin-top: 3px; }
  .line__arrow { display: none; }
}
}
@media (max-height: 760px) and (min-width: 901px) {
  .scene { min-height: max(610px, calc(100svh - 28px)); }
  .brand { width: 114px; }
  .intro { padding-top: 25px; padding-bottom: 30px; }
  h1 { font-size: clamp(60px, 6vw, 82px); }
  .intro__action { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .entrance { animation: none; }
  *, *::before, *::after { transition: none !important; }
  .scene__video { display: none; }
  .motion-access { display: none; }
}