/* Shared vector icons cannot be substituted with platform emoji. */
.link-arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
  vertical-align: -.12em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-stage, .detail-surface { display: contents; }

/* Keep the mobile layer separate from the desktop art direction. */
@media (max-width: 960px) {
  .header-inner { gap: 12px; }
  .header-contact { margin-left: auto; }
  .menu-toggle { flex: 0 0 44px; width: 44px; align-items: center; }
  .mobile-nav {
    max-height: calc(100svh - 78px);
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
}

@media (max-width: 760px) {
  :root { --section-gap: 112px; --page-space: 112px; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .wrap { width: calc(100% - 40px); }
  h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
  .brand-lockup { min-width: 0; gap: 12px; }
  .brand-partnership { padding-left: 12px; }
  .header-inner { height: 70px; }
  .site-header { -webkit-backdrop-filter: blur(18px); }
  .mobile-nav { top: 100%; }
  .text-link { max-width: 100%; padding-block: 10px; line-height: 1.65; }
  .scroll-cue { display: none; }

  .hero { margin-top: 64px; padding-bottom: 0; }
  .hero h1 { font-size: clamp(48px, 13vw, 76px); margin-block: 24px 32px; }
  .hero-description strong { font-size: clamp(23px, 6vw, 30px); line-height: 1.4; }
  .hero-description > span { margin: 20px auto 0; font-size: 16px; }
  .hero-visual { height: clamp(250px, 75vw, 420px); margin-top: 28px; }
  .hero-visual figcaption { right: 20px; bottom: 0; font-size: 10px; }

  /* Natural document flow on phones: no stacked, viewport-pinned scenes. */
  .story-heading { margin-bottom: 28px; }
  .story-track { gap: 40px; }
  .scene-surface { overflow: visible; border: 0; background: none; }
  .scene-photo { aspect-ratio: 4 / 3; border-radius: 12px; }
  .scene-photo::after { display: none; }
  .scene-copy { position: static; padding: 18px 0 0; }
  .scene-copy h3 { font-size: clamp(28px, 8vw, 38px); }
  .scene-copy p { max-width: none; font-size: 15px; }
  .scene-index { font-size: 10px; }
  .detail-stage { gap: 48px; }
  .detail-scene { gap: 20px; }
  .detail-copy p { font-size: 16px; line-height: 1.7; }
  .detail-number { font-size: 11px; }
  .detail-copy h3 { font-size: 30px; }
  .experience-heading h2 { font-size: clamp(28px, 7.6vw, 40px); }
  .home-page-bridge { margin-top: 32px; }
  .process { gap: 48px; margin-top: 36px; }
  .process p { font-size: 15px; }
  .process-arrow { top: calc(100% + 16px); }

  .team-copy h2 { font-size: clamp(34px, 9vw, 52px); }
  .team-portraits { gap: 40px; }
  .team-portraits figure {
    display: block;
    width: min(100%, 320px);
    margin-inline: auto;
  }
  .team-portraits .portrait-image { aspect-ratio: 4 / 5; }
  .team-person figcaption { padding-top: 20px; }
  .team-person.team-arriving { animation-duration: 700ms; }
  .team-person.team-arriving figcaption { animation-duration: 600ms; }
  .placeholder-note { font-size: 12px; }

  .reviews-panel { padding-block: 32px; }
  .reviews-copy h2 { font-size: clamp(34px, 9vw, 46px); }
  .review-card { padding: 24px 20px; }
  .review-card-top { flex-wrap: wrap; gap: 8px 16px; }
  .review-card blockquote { font-size: 23px; }
  .review-control { min-width: 44px; min-height: 44px; }
  .closing-copy h2 { font-size: clamp(42px, 11.5vw, 65px); }
  .appointment-number { font-size: clamp(26px, 8vw, 32px); }
  .appointment-action { padding: 22px 20px; }
  .contact-closing .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .opening-hours > div, .visit-hours > div { flex-wrap: wrap; }
  .visit-hours > div { gap: 6px 20px; }
  .visit-hours dd { margin-left: auto; }

  .mobile-contact {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    -webkit-backdrop-filter: blur(18px);
  }
  .mobile-contact a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .site-footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .footer-sitemap { gap: 8px 24px; }
  .footer-sitemap a, .footer-meta a, .footer-button { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-meta { gap: 4px; }
  .content-page .site-footer, .legal-page .site-footer { padding-bottom: 36px; }

  .breadcrumbs { margin-top: 28px; }
  .sub-hero { margin-top: 48px; }
  .sub-hero h1 { font-size: clamp(36px, 10vw, 62px); margin-block: 24px 28px; }
  .sub-hero-visual { height: clamp(240px, 75vw, 360px); margin-top: 24px; }
  .sub-section h2 { font-size: clamp(30px, 8.3vw, 44px); }
  .sub-section-heading { margin-bottom: 36px; }
  .sub-people { gap: 64px; }
  .sub-people article { min-width: 0; max-width: 100%; }
  .partner-scene { padding-inline: 24px; min-height: 440px; gap: 48px; }
  .partner-scene-title h2 { font-size: clamp(30px, 8vw, 44px); }
  .partner-logo-overview > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-grid a { min-width: 0; font-size: 20px; }
  .related-grid a > span:first-child { min-width: 0; overflow-wrap: anywhere; }
  .legal-content { padding-top: 48px; }
  .legal-content section { margin-top: 64px; }
  .credits-dialog, .photo-dialog { max-width: calc(100% - 24px); padding: 16px; }
  .dialog-toolbar { flex-wrap: wrap; }
}

@media (max-width: 360px) {
  .brand-lockup .brand, .brand-lockup .brand img { width: 100px; }
  .brand-partnership .dan-partner-logo { width: 66px; }
  .brand-partnership span { font-size: 9px; }
  .hero .eyebrow { font-size: 10px; }
  .hero h1 { font-size: 46px; }
  .team-copy h2 { font-size: 32px; }
  .contact-closing .opening-hours > div, .visit-hours > div { display: block; }
  .visit-hours dd { text-align: left; }
}

/* Mobile image chapters: photo first, then two short layers of typography.
   Each sticky frame belongs to its own article; adjacent scenes never overlap. */
@media (max-width: 760px) {
  :root { --mobile-frame-height: min(660px, calc(100svh - 168px)); }
  .hero.wrap { width: calc(100% - 24px); margin-top: 12px; }
  .hero-stage {
    display: block; position: relative; isolation: isolate;
    min-height: 500px; height: max(500px, var(--mobile-frame-height));
    overflow: hidden; border-radius: 24px; background: #171717;
    border: 1px solid #ffffff16;
  }
  .hero-light { display: none; }
  .hero-copy {
    position: absolute; inset: 0; z-index: 2; padding: 30px 24px;
    display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  }
  .hero .eyebrow { font-size: 10px; letter-spacing: .075em; color: #e6ded4; }
  .hero h1 { font-size: clamp(45px, 13.5vw, 74px); margin: 18px 0 0; line-height: 1.01; text-shadow: 0 2px 24px #0005; }
  .hero h1 em { color: #fff5e8; }
  .hero-description { margin-top: auto; }
  .hero-description strong { font-size: clamp(23px, 6.4vw, 31px); color: #fff9f2; line-height: 1.3; }
  .hero-description > span { margin-top: 14px; font-size: 15px; color: #ded8d1; line-height: 1.65; }
  .hero .hero-visual { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; margin: 0; }
  .hero-image-wrap { mask: none; -webkit-mask: none; animation: none; }
  .hero-image-wrap::after { background: linear-gradient(180deg, #0009 0%, #0001 40%, #0003 57%, #000e 100%); }
  .hero-image { object-position: 58% center; filter: brightness(.9) saturate(.9); transform: scale(var(--m-image-scale, 1)) !important; }
  .hero-visual figcaption { display: none; }
  .hero .hero-enter { animation: none; }

  .story-heading { margin-bottom: 32px; }
  .story-track { gap: 32px; }
  .scene-surface, .detail-surface {
    display: block; position: relative; isolation: isolate; overflow: hidden;
    height: max(460px, var(--mobile-frame-height)); min-height: 460px;
    border: 1px solid #ffffff1c; border-radius: 24px; background: #191919;
  }
  .scene-surface::after, .detail-surface::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, #0002 15%, #0000 28%, #0007 60%, #000e 100%);
    opacity: var(--m-shade, 1);
  }
  .scene-photo, .detail-photo {
    position: absolute; inset: 0; height: 100%; width: 100%;
    aspect-ratio: auto; border-radius: 0; border: 0;
  }
  .scene-photo img, .detail-photo img {
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(var(--m-image-scale, 1)) !important;
  }
  .scene-photo::after { display: none; }
  .scene-copy, .detail-copy {
    position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 30px;
    padding: 0; pointer-events: none;
  }
  .scene-index, .detail-number { color: #ddd1c2; font-size: 10px; letter-spacing: .14em; margin-bottom: 14px; }
  .scene-copy h3, .detail-copy h3 {
    color: #fff9f2; font-size: clamp(34px, 10vw, 48px); line-height: 1.07;
    letter-spacing: -.045em; max-width: 300px; text-wrap: balance;
  }
  .scene-copy p, .detail-copy p { color: #ddd5cc; font-size: 16px; line-height: 1.6; margin-top: 16px; max-width: 255px; }
  .photo-button .zoom-label { top: 16px; right: 16px; bottom: auto; width: 40px; height: 40px; background: #15151590; }
  .detail-scene { display: block; }
  .detail-stage { gap: 32px; }
  .detail-surface { border-radius: 28px; }
  .partner-scene { overflow: hidden; border: 1px solid #ffffff15; border-radius: 26px; }

  .mobile-cinema .hero { height: calc(var(--mobile-frame-height) + 52svh); }
  .mobile-cinema .kitchen-scene, .mobile-cinema .detail-scene { height: calc(var(--mobile-frame-height) + 48svh); }
  .mobile-cinema .hero-stage, .mobile-cinema .scene-surface, .mobile-cinema .detail-surface {
    position: sticky; top: 82px; height: var(--mobile-frame-height); min-height: 0;
    transform: translate3d(var(--m-card-x, 0px), var(--m-card-y, 0px), 0) scale(var(--m-card-scale, 1)); transform-origin: center;
    opacity: var(--m-card-opacity, 1);
  }
  .mobile-cinema .scene-copy > :not(p), .mobile-cinema .detail-copy > :not(p),
  .mobile-cinema .hero-description strong {
    opacity: var(--m-copy, 1); transform: translate3d(0, var(--m-copy-y, 0px), 0);
  }
  .mobile-cinema .scene-copy p, .mobile-cinema .detail-copy p,
  .mobile-cinema .hero-description > span {
    opacity: var(--m-sub, 1); transform: translate3d(0, var(--m-sub-y, 0px), 0);
  }
  .mobile-cinema .partner-scene-title { opacity: var(--m-copy, 1); transform: translate3d(0, var(--m-copy-y, 0px), 0); }
  .mobile-cinema .partner-scene-image img { transform: scale(var(--m-image-scale, 1)); }
}

/* Shared finishing details for the homepage, content pages and legal pages. */
.site-footer { flex-wrap: nowrap; gap: 24px; padding-block: 24px; }
.site-footer .footer-brand { width: 118px; }
.site-footer .footer-meta { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }
.team-person { position: relative; overflow: hidden; border-radius: 12px; }
.team-person figcaption, .portrait-caption {
  position: absolute; z-index: 2; inset: auto 0 0;
  padding: 70px 24px 24px; text-align: left;
  background: linear-gradient(transparent, #000b 55%, #000e);
  color: #fff9f2; pointer-events: none;
}
.team-person figcaption { font-size: 27px; line-height: 1.2; }
.team-person figcaption::before { display: none; }
.team-person figcaption span { color: #e0d8d0; font-size: 14px; margin-top: 8px; }
.team-person .portrait-placeholder { padding-bottom: 60px; }
.team-person .placeholder-note { position: static; margin-top: 18px; }
.sub-portrait { position: relative; width: 100%; }
.sub-people .portrait-caption h2 { color: #fff9f2; font-size: 30px; margin: 0 0 6px; line-height: 1.2; }
.sub-people .portrait-caption p { color: #e0d8d0; font-size: 14px; line-height: 1.5; margin: 0; }
.rating-value > .rating-number { display: inline-block; margin: 0; font-size: inherit; letter-spacing: inherit; color: inherit; }
.rating-value { white-space: nowrap; }
.has-score-motion .rating-number { opacity: var(--rating-reveal, 1); transform: translate3d(0, var(--rating-lift, 0px), 0); }
.has-score-motion .rating-stars { opacity: var(--rating-reveal, 1); }
@media (min-width: 761px) {
  /* Only the opening image moves closer to the header; chapter gaps stay intact. */
  .hero { margin-top: 190px; }
}
@media (max-width: 760px) {
  .site-footer { align-items: flex-start; gap: 16px; }
  .site-footer .footer-meta { align-items: center; justify-content: flex-start; gap: 0 22px; }
  .site-footer .footer-meta > span { flex-basis: 100%; }
  .site-footer .footer-meta a { min-height: 44px; }
  body:has(.mobile-contact) .site-footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .content-page .site-footer, .legal-page .site-footer { padding-bottom: 24px; }
  .team-person figcaption { padding: 70px 24px 24px; }
  .mobile-cinema .partner-scene-image { transform: translate3d(var(--m-card-x, 0px), var(--m-card-y, 0px), 0); }
  [data-mobile-entry='left'] { --entry-x: -64px; --entry-y: 0px; }
  [data-mobile-entry='right'] { --entry-x: 64px; --entry-y: 0px; }
  [data-mobile-entry='up'] { --entry-x: 0px; --entry-y: 56px; }
  [data-mobile-entry='fade'] { --entry-x: 0px; --entry-y: 0px; }
  .enter-pending { transform: translate3d(var(--entry-x, 0px), var(--entry-y, 32px), 0); }
  .team-copy.reveal-pending { transform: translate3d(-48px, 0, 0); }
  .closing-copy.reveal-pending { transform: translate3d(48px, 0, 0); }
  .reviews-panel.reveal-pending { transform: none; }
  .team-person:nth-child(1) { --person-x: -72px; --person-y: 0px; }
  .team-person:nth-child(2) { --person-x: 72px; --person-y: 0px; }
  .team-person:nth-child(3) { --person-x: 0px; --person-y: 64px; }
  .team-person.team-pending { transform: translate3d(var(--person-x), var(--person-y), 0); }
  @keyframes team-arrival {
    from { opacity: 0; transform: translate3d(var(--person-x, 0px), var(--person-y, 64px), 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  .is-process-scroll { height: 250svh; }
  .is-process-scroll .process { gap: 32px; margin-top: 28px; }
  .is-process-scroll .process-arrow { top: calc(100% + 9px); }
  .is-process-scroll .process p { font-size: 13px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .is-process-scroll .process-heading h2 { font-size: 25px; }
  .is-process-scroll .process-heading .eyebrow { font-size: 10px; }
  .is-process-scroll .process { gap: 28px; margin-top: 22px; }
  .is-process-scroll .process h3 { font-size: 28px; }
  .is-process-scroll .process p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .has-score-motion .rating-number, .has-score-motion .rating-stars,
  .enter-pending, .team-copy.reveal-pending, .closing-copy.reveal-pending,
  .team-person.team-pending { opacity: 1; transform: none; }
}

@media (max-width: 360px) {
  .hero-copy { padding: 26px 18px; }
  .hero .eyebrow { font-size: 9px; }
  .hero h1 { font-size: 44px; }
  .hero-description strong { font-size: 23px; }
  .scene-copy, .detail-copy { left: 20px; right: 20px; bottom: 26px; }
  .scene-copy h3, .detail-copy h3 { font-size: 32px; }
}