/* The booking tour section. Every .gh-tour rule lives here and nowhere else.

   One browser window, the same one the hero uses: while closed it is a poster
   of SoBe Tan's booking page with a single Start control; while open the same
   window holds the live tour, and its bar becomes the Close control. The
   window keeps its size from the first frame of loading to the last stop, so
   opening it never shoves the page around under the visitor. */

#gh-studio .gh-tour { padding: 64px 6% 56px; border-bottom: 1px solid var(--line); }
#gh-studio .gh-tour-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 28px; }
#gh-studio .gh-tour h2 { font: 400 clamp(36px, 4.8cqw, 60px)/1.05 'Italiana', Georgia, serif; letter-spacing: -1.5px; margin-top: 16px; }
#gh-studio .gh-tour-heading > p { max-width: 38ch; color: var(--muted); font-size: .9375rem; line-height: 1.8; }

#gh-studio .gh-tour-window { position: relative; border: 1px solid #dacbb8; border-radius: 18px; background: #faf7f2; box-shadow: 0 30px 65px -30px #6c48254d, 0 3px 12px #6040200a; overflow: clip; scroll-margin-top: 16px; }
#gh-studio .gh-tour-window:has(> summary:focus-visible) { outline: 3px solid #b77538; outline-offset: 4px; }
#gh-studio .gh-tour-window > summary { display: block; list-style: none; cursor: pointer; }
#gh-studio .gh-tour-window > summary::-webkit-details-marker { display: none; }
#gh-studio .gh-tour-window > summary:focus { outline: none; }

/* Title bar: traffic lights, the studio's own address, and one state label. */
#gh-studio .gh-tour-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 54px; padding: 10px 14px 10px 20px; background: #fffdf8; border-bottom: 1px solid #e7dfd2; }
#gh-studio .gh-tour-dots { display: flex; gap: 7px; }
#gh-studio .gh-tour-dots i { width: 11px; height: 11px; border-radius: 50%; background: #e7b7a0; }
#gh-studio .gh-tour-dots i:nth-child(2) { background: #f0d49b; }
#gh-studio .gh-tour-dots i:nth-child(3) { background: #cdd5b4; }
#gh-studio .gh-tour-url { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; width: clamp(200px, 26cqw, 340px); height: 32px; padding: 0 14px; border: 1px solid #ece2d3; border-radius: 999px; background: #f6efe4; color: #6e5b4b; font-size: .75rem; white-space: nowrap; overflow: hidden; }
#gh-studio .gh-tour-url svg { flex-shrink: 0; color: #9a8670; }
#gh-studio .gh-tour-tag, #gh-studio .gh-tour-close { grid-column: 3; justify-self: end; }
#gh-studio .gh-tour-tag { font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: #70614f; border: 1px solid #e4d9c8; border-radius: 4px; padding: 5px 7px; }
#gh-studio .gh-tour-close { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid #e4d9c8; border-radius: 999px; background: #fffaf1; color: #5f4b3b; font-size: .8125rem; white-space: nowrap; transition: background .2s, border-color .2s; }
#gh-studio .gh-tour-window > summary:hover .gh-tour-close { background: #f4eadb; border-color: #d9c6ad; }
#gh-studio .gh-tour-window:not([open]) .gh-tour-close, #gh-studio .gh-tour-window[open] .gh-tour-tag, #gh-studio .gh-tour-window[open] .gh-tour-poster { display: none; }

/* Poster: the real page, fading into the one thing to press. */
#gh-studio .gh-tour-poster { position: relative; display: block; height: clamp(340px, 32cqw, 460px); overflow: hidden; background: #faf7f2; }
#gh-studio .gh-tour-poster img { position: absolute; top: 0; left: 50%; width: min(920px, 100%); height: auto; transform: translateX(-50%); transform-origin: 50% 0; transition: transform .8s cubic-bezier(.2, .8, .2, 1); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
#gh-studio .gh-tour-poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #faf7f200 54%, #faf7f2eb 66%, #faf7f2 76%); pointer-events: none; }
#gh-studio .gh-tour-cta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 20px 30px; text-align: center; }
#gh-studio .gh-tour-play { display: inline-flex; align-items: center; gap: 14px; min-height: 58px; padding: 9px 26px 9px 9px; border-radius: 999px; background: #443427; color: #fffaf1; font-size: 1rem; font-weight: 500; box-shadow: 0 18px 36px -14px #44342799, 0 2px 6px #4434271f; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
/* The page's own setting sun, from the wordmark's "o", as the play button. */
#gh-studio .gh-tour-play-icon { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(180deg, #f8cf68 0%, #f4a747 48%, #dc6c40 100%); }
#gh-studio .gh-tour-play-icon::before { content: ''; width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #3b2a1f; }
#gh-studio .gh-tour-play-icon::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid #f4a747; opacity: 0; animation: gh-tour-halo 2.8s ease-out infinite; }
#gh-studio .gh-tour-meta { font-size: .8125rem; line-height: 1.5; color: #6e5b4b; }
#gh-studio .gh-tour-window > summary:hover .gh-tour-play { background: #5a4131; transform: translateY(-2px); box-shadow: 0 22px 40px -14px #443427a6, 0 2px 6px #4434271f; }
#gh-studio .gh-tour-window > summary:hover .gh-tour-poster img { transform: translateX(-50%) scale(1.012); }
#gh-studio .gh-tour-window > summary:focus-visible .gh-tour-play { outline: 3px solid #b77538; outline-offset: 3px; }
@keyframes gh-tour-halo { 0% { transform: scale(.85); opacity: .9; } 70%, 100% { transform: scale(1.3); opacity: 0; } }

/* Stage: the live tour. The frame is hidden by OPACITY while it loads, never
   display:none, because the tour measures its own window to place its coach
   and a display:none frame reports a height of zero. `vh` first, then `svh`:
   a browser without svh drops that line and keeps the one before it. */
#gh-studio .gh-tour-stage { position: relative; background: #faf7f2; }
#gh-studio .gh-tour-frame { display: block; width: 100%; height: min(calc(100vh - 110px), 820px); height: min(calc(100svh - 110px), 820px); min-height: 440px; border: 0; background: #faf7f2; transition: opacity .45s ease; }
#gh-studio .gh-tour-stage.is-loading .gh-tour-frame { opacity: 0; }
#gh-studio .gh-tour-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; margin: 0; text-align: center; font-size: .875rem; line-height: 1.6; color: #6e5b4b; }
#gh-studio .gh-tour-status::before { content: ''; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #eadfcf; border-top-color: #b77538; animation: gh-tour-spin .9s linear infinite; }
@keyframes gh-tour-spin { to { transform: rotate(360deg); } }
#gh-studio .gh-tour-noscript { padding: 28px 24px; font-size: .9375rem; line-height: 1.7; color: #6e5b4b; }
#gh-studio .gh-tour-noscript a { color: #67472f; text-decoration: underline; text-underline-offset: 3px; }

/* Finish: shown once, when a visitor walks all ten stops. */
#gh-studio .gh-tour-finish { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 24px; overflow-y: auto; background: #faf7f2b8; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .4s ease; outline: none; }
#gh-studio .gh-tour-finish.is-visible { opacity: 1; }
#gh-studio .gh-tour-finish-card { width: min(100%, 480px); padding: 36px 34px 22px; text-align: center; border: 1px solid #e4d5c2; border-radius: 18px; background: #fffdf8; box-shadow: 0 34px 80px -34px #6c482580, 0 4px 14px #6040200d; transform: translateY(12px); transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
#gh-studio .gh-tour-finish.is-visible .gh-tour-finish-card { transform: none; }
#gh-studio .gh-tour-finish-sun { position: relative; display: block; width: 46px; height: 46px; margin: 0 auto 18px; border-radius: 50%; overflow: hidden; background: linear-gradient(180deg, #f8cf68 0%, #f4a747 45%, #dc6c40 78%, #c9563b 100%); box-shadow: 0 0 0 8px #f7d29a2e, 0 12px 26px -10px #dc6c4099; }
#gh-studio .gh-tour-finish-sun::after { content: ''; position: absolute; inset: 58% 0 0; background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, #fffdf8b3 3px, #fffdf8b3 5px); }
#gh-studio .gh-tour-finish-kicker { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: #8d6a4e; }
#gh-studio .gh-tour-finish h3 { font: 400 clamp(30px, 3.2cqw, 40px)/1.1 'Italiana', Georgia, serif; letter-spacing: -.02em; margin-top: 12px; color: #443427; text-wrap: balance; }
#gh-studio .gh-tour-finish-card > p:not(.gh-tour-finish-kicker) { max-width: 36ch; margin: 12px auto 0; font-size: .9375rem; line-height: 1.7; color: #74563f; }
#gh-studio .gh-tour-finish-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
#gh-studio .gh-tour-finish-start { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: 999px; background: #443427; color: #fffaf1; font-size: .9375rem; font-weight: 500; transition: background .2s; }
#gh-studio .gh-tour-finish-start:hover { background: #5a4131; }
#gh-studio .gh-tour-finish-replay { min-height: 48px; padding: 0 22px; border: 1px solid #d9c6ad; border-radius: 999px; background: transparent; color: #443427; font-size: .9375rem; transition: background .2s, border-color .2s; }
#gh-studio .gh-tour-finish-replay:hover { background: #f4eadb; border-color: #c9b08f; }
#gh-studio .gh-tour-finish-explore { margin-top: 10px; min-height: 44px; padding: 0 12px; border: 0; background: none; color: #7b6859; font-size: .8125rem; text-decoration: underline; text-underline-offset: 3px; }

#gh-studio .gh-tour-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 24px; margin-top: 14px; font-size: .8125rem; line-height: 1.6; color: var(--muted); }
#gh-studio .gh-tour-note a { display: inline-flex; align-items: center; min-height: 44px; color: #67472f; text-decoration: underline; text-underline-offset: 3px; }

/* Phones keep the compact control the 9/22 mobile pass chose: no cropped
   screenshot, one clear row to tap, under the same window bar. */
@container (max-width: 700px) {
  #gh-studio .gh-tour { padding: 20px 6% 32px; }
  #gh-studio .gh-tour-heading { display: block; margin-bottom: 18px; }
  #gh-studio .gh-tour-heading .eyebrow { display: none; }
  #gh-studio .gh-tour h2 { font-size: 34px; margin: 0; }
  #gh-studio .gh-tour-heading > p { max-width: none; margin-top: 10px; font-size: 14px; line-height: 1.6; }
  #gh-studio .gh-tour-window { border-radius: 14px; scroll-margin-top: 10px; }
  #gh-studio .gh-tour-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; min-height: 46px; padding: 8px 8px 8px 12px; }
  #gh-studio .gh-tour-dots { display: none; }
  #gh-studio .gh-tour-url { justify-self: start; width: auto; max-width: 100%; height: 30px; padding: 0 12px; font-size: .6875rem; }
  #gh-studio .gh-tour-tag, #gh-studio .gh-tour-close { grid-column: 2; }
  #gh-studio .gh-tour-close { min-height: 34px; padding: 0 12px; font-size: .75rem; }
  #gh-studio .gh-tour-poster { height: auto; padding: 16px 16px 18px; background: linear-gradient(135deg, #fffaf1, #f6ead8); }
  #gh-studio .gh-tour-poster img, #gh-studio .gh-tour-poster::after { display: none; }
  #gh-studio .gh-tour-cta { position: static; display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; padding: 0; text-align: left; }
  #gh-studio .gh-tour-play { display: contents; }
  #gh-studio .gh-tour-play-icon { grid-row: 1 / span 2; width: 46px; height: 46px; }
  #gh-studio .gh-tour-play-icon::after { display: none; }
  #gh-studio .gh-tour-play-label { align-self: end; font-size: 1rem; font-weight: 500; line-height: 1.4; color: #443427; }
  #gh-studio .gh-tour-meta { grid-column: 2; align-self: start; font-size: .75rem; }
  #gh-studio .gh-tour-window > summary:focus-visible .gh-tour-play-label { text-decoration: underline; text-underline-offset: 3px; }
  #gh-studio .gh-tour-frame { height: min(calc(100vh - 96px), 760px); height: min(calc(100svh - 96px), 760px); min-height: 440px; }
  #gh-studio .gh-tour-finish { padding: 14px; place-items: end center; }
  #gh-studio .gh-tour-finish-card { padding: 28px 20px 16px; }
  #gh-studio .gh-tour-finish-actions { flex-direction: column; align-items: stretch; }
  #gh-studio .gh-tour-note { display: block; margin-top: 12px; font-size: 12px; line-height: 1.5; }
  #gh-studio .gh-tour-note span { display: block; }
  #gh-studio .gh-tour-note a { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  #gh-studio .gh-tour-play-icon::after { animation: none; opacity: 0; }
  #gh-studio .gh-tour-window > summary:hover .gh-tour-poster img { transform: translateX(-50%); }
  #gh-studio .gh-tour-window > summary:hover .gh-tour-play { transform: none; }
}