/* Full-color photography; contrast is confined to the text rather than the photograph. */
.home-hero { --hero-header-height:92px; position:relative; isolation:isolate; min-height:calc(100svh - var(--hero-header-height)); overflow:hidden; color:#fff; background:#173959; }
.home-hero-inner { width:100%; min-height:inherit; margin:auto; padding:80px 24px; display:flex; align-items:center; justify-content:center; }
.home-hero-copy { position:relative; z-index:1; isolation:isolate; width:min(80vw,850px); text-align:center; text-shadow:0 2px 8px #0009; }
.home-hero-copy::before { content:''; position:absolute; z-index:-1; inset:-32px -36px; pointer-events:none; background:radial-gradient(ellipse,rgba(20,22,24,.42) 0%,rgba(20,22,24,.22) 48%,transparent 74%); }
.home-hero h1, .home-hero h2 { margin:0; font-family:Gilroy,Arial,sans-serif; font-size:clamp(42px,4.5vw,68px); line-height:1.06; letter-spacing:-.03em; font-weight:500; color:inherit; }
.home-hero p { margin:22px auto 13px; max-width:440px; font-size:18px; font-weight:500; line-height:1.45; letter-spacing:-.02em; color:#fff; }
.home-hero-link { display:inline-flex; align-items:center; gap:9px; min-height:44px; color:#fff; font-size:16px; font-weight:700; text-decoration:underline; text-underline-offset:6px; text-decoration-color:#ffffffb3; }
.home-hero-link span { font-size:25px; line-height:1; }
.home-hero-link:hover { color:#fff; text-decoration-color:#fff; }
.home-hero-link:focus-visible { outline:2px solid currentColor; outline-offset:5px; border-radius:4px; }
.home-hero-media { position:absolute; inset:0; z-index:-2; pointer-events:none; }
.home-hero-media picture { display:block; width:100%; height:100%; }
.home-hero-media img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
/* Turn the signature flatlay into a wide composition without cropping a portrait strip. */
@media(min-width:701px) {
  .home-hero-media--landscape { container-type:size; }
  .home-hero-media--landscape img { position:absolute; top:50%; left:50%; width:100cqh; height:100cqw; max-width:none; transform:translate(-50%,-50%) rotate(90deg); }
}
.home-hero::after { content:none; }
@media(max-width:1000px) {
  .home-hero { --hero-header-height:84px; }
  .home-hero-copy { width:80vw; }
  .home-hero h1, .home-hero h2 { font-size:clamp(38px,5.3vw,54px); }
  .home-hero p { font-size:16px; }
}
/* Keep the mobile photograph equally clear, with contrast localized behind the copy. */
@media(max-width:700px) {
  .home-hero { min-height:clamp(540px,calc(100svh - var(--hero-header-height)),700px); background:#292521; }
  .home-hero-inner { padding:310px 26px 32px; align-items:flex-end; justify-content:flex-start; }
  .home-hero-copy { width:100%; max-width:420px; margin:0; text-align:left; }
  .home-hero h1, .home-hero h2 { font-size:clamp(36px,10vw,46px); line-height:1.04; }
  .home-hero p { margin:16px 0 8px; font-size:16px; color:#fff; }
  .home-hero-link { font-size:15px; min-height:44px; color:#fff; text-decoration-color:#ffffff80; }
  .home-hero-media { inset:0; height:100%; }
  .home-hero-media img { height:100%; object-fit:cover; object-position:52% 45%; }
  .home-hero-copy::before { inset:-25px -26px; }
}
@media(max-width:600px) { .home-hero { --hero-header-height:78px; } }
.home-hero--blue-flatlay { background:#234e94; }
.home-hero--blue-flatlay .home-hero-copy { max-width:600px; text-shadow:none; }
.home-hero--blue-flatlay .home-hero-copy::before { content:none; }
.home-hero--blue-flatlay h1, .home-hero--blue-flatlay h2 { max-width:560px; margin-inline:auto; }
/* Follow the wide photo's proportions so every dish stays in frame. */
@media(min-width:701px) {
  .home-hero--blue-flatlay { min-height:0; }
  .home-hero--blue-flatlay .home-hero-inner { min-height:0; aspect-ratio:2894 / 1450; padding:32px 24px; }
  .home-hero--blue-flatlay .home-hero-copy { width:46%; max-width:600px; }
  .home-hero--blue-flatlay h1, .home-hero--blue-flatlay h2 { font-size:clamp(32px,4vw,68px); }
  .home-hero--blue-flatlay p { font-size:clamp(15px,1.3vw,18px); margin-top:16px; }
}
@media(max-width:700px) {
  body:has(#lunch-notice:not([hidden])) .home-hero--blue-flatlay { --hero-notice-height:66px; }
  .home-hero--blue-flatlay { min-height:calc(100svh - var(--hero-header-height) - var(--hero-notice-height,0px)); }
  .home-hero--blue-flatlay .home-hero-inner { padding:40px 28px; align-items:center; justify-content:center; }
  .home-hero--blue-flatlay .home-hero-copy { max-width:340px; text-align:center; text-shadow:none; }
  .home-hero--blue-flatlay .home-hero-media { container-type:size; }
  .home-hero--blue-flatlay .home-hero-media img { position:absolute; top:50%; left:50%; width:100cqh; height:100cqw; max-width:none; object-position:center; transform:translate(-50%,-50%) rotate(270deg); }
  .home-hero--blue-flatlay p { margin-inline:auto; }
}
@media(max-width:360px) { .home-hero-inner { padding:290px 22px 25px; } .home-hero h1, .home-hero h2 { font-size:34px; } .home-hero p { font-size:15px; } }

/* Carousel: slides share one grid cell and cross-fade, so the hero keeps its height. */
.home-hero-track { display:grid; min-height:inherit; touch-action:pan-y; }
.home-hero-slide { grid-area:1 / 1; position:relative; isolation:isolate; display:grid; align-items:center; min-height:inherit; opacity:0; visibility:hidden; transition:opacity .6s ease, visibility 0s linear .6s; }
.home-hero-slide.is-active { opacity:1; visibility:visible; transition:opacity .6s ease; }
.home-hero-controls { position:absolute; z-index:2; inset:0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:22px; pointer-events:none; }
.home-hero-controls button { pointer-events:auto; display:grid; place-items:center; padding:0; border:0; color:#fff; background:none; cursor:pointer; }
.home-hero-controls button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.home-hero-dots { display:flex; align-items:center; gap:4px; padding:4px 6px; border-radius:999px; background:#0b1f4a52; backdrop-filter:blur(8px); }
.home-hero-dot { width:28px; height:28px; }
.home-hero-dot::before { content:''; width:8px; height:8px; border-radius:999px; background:#ffffff80; transition:width .3s, background-color .3s; }
.home-hero-dot[aria-current='true']::before { width:22px; background:#fff; }
.home-hero-play { width:28px; height:28px; }
.home-hero-play svg { width:14px; height:14px; }
.home-hero-controls .home-hero-arrow { position:absolute; top:50%; width:48px; height:48px; border-radius:50%; background:#0b1f4a40; backdrop-filter:blur(8px); transform:translateY(-50%); transition:background-color .2s; }
.home-hero-controls .home-hero-arrow:hover { background:#0b1f4a70; }
.home-hero-arrow--prev { left:22px; }
.home-hero-arrow--next { right:22px; }
.home-hero-arrow svg { width:22px; height:22px; }
@media(max-width:700px) {
  .home-hero-controls .home-hero-arrow { display:none; }
  .home-hero-controls { padding-bottom:16px; }
  /* Bottom-aligned photo copy moves up to clear the dots; centred flat-lay copy already does. */
  .home-hero--carousel .home-hero-slide:not(.home-hero--blue-flatlay) .home-hero-inner { padding-bottom:72px; }
  /* A slide with its own upright phone picture shows it as is, instead of the rotated flat-lay. */
  .home-hero-slide--mobile-image.home-hero--blue-flatlay .home-hero-media img { position:static; width:100%; height:100%; transform:none; object-fit:cover; }
}
@media(prefers-reduced-motion:reduce) { .home-hero-slide, .home-hero-slide.is-active, .home-hero-dot::before { transition:none; } }