/* ============ Molden Media — shared styles ============ */
:root {
  color-scheme: dark;
  --ink: #101417;
  --ink-2: #0b0e0f;
  --cream: #f5f2eb;
  --cream-dim: #d9d6cf;
  --orange: #ff5a1e;
  --orange-soft: #ff7846;
  --peach: #efb692;
  --green: #074e42;
  --green-deep: #12231b;
  --green-ink: #0d1a14;
  --gold: #b8955f;
  --line: rgba(218, 195, 172, .22);
  --panel: #121315;
  --panel-2: #0c0d0f;
  --display: 'Manrope', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, sans-serif;
  --header-h: 76px;
  --gutter: clamp(18px, 4vw, 64px);
}
@view-transition { navigation: auto; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin-top: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid #ffbd8b; outline-offset: 4px; }
::selection { background: var(--orange); color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; top: -100px; left: 10px; z-index: 200; background: #fff; color: #000; padding: 12px; }
.skip:focus { top: 10px; }
[hidden] { display: none !important; }

/* ---------- Wordmark ---------- */
.wordmark { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1; color: var(--cream); }
.wm-top { display: inline-flex; align-items: center; font: 600 19px/1 var(--display); letter-spacing: .2em; padding-left: .2em; }
.wm-e { display: inline-grid; gap: .13em; width: .6em; margin: 0 .2em 0 .04em; }
.wm-e i { display: block; height: .12em; background: var(--orange); }
.wm-sub { display: flex; align-items: center; gap: 7px; font: 600 8.5px/1 var(--display); letter-spacing: .62em; padding-left: .62em; }
.wm-sub::before, .wm-sub::after { content: ""; width: 14px; height: 1px; background: currentColor; opacity: .8; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 var(--gutter);
  background: linear-gradient(180deg, rgba(8, 11, 12, .9) 0%, rgba(8, 11, 12, .55) 60%, rgba(8, 11, 12, 0) 100%);
}
.nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.nav a { opacity: .88; transition: opacity .2s, color .2s; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; color: #fff; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav .nav-cta { opacity: 1; background: var(--cream); color: var(--ink); padding: 12px 16px; }
.nav .nav-cta:hover { background: var(--orange); color: var(--ink); }
.nav .nav-cta[aria-current="page"] { color: var(--ink); text-decoration: none; }
.nav .nav-cta[aria-current="page"]:hover { color: var(--ink); }
.menu-button { display: none; min-height: 44px; padding: 8px 14px; background: rgba(16, 20, 23, .7); border: 1px solid rgba(255, 255, 255, .45); color: #fff; font-size: 14px; }

/* ---------- Buttons ---------- */
.btn {
  min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  padding: 14px 22px; border: 1px solid transparent;
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; text-align: center;
  transition: transform .25s, background .25s, color .25s, border-color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn-orange { background: var(--orange); color: var(--ink); }
.btn-orange:hover { background: var(--orange-soft); }
.btn-outline { border-color: rgba(255, 255, 255, .7); background: rgba(6, 10, 10, .35); color: #fff; }
.btn-outline:hover { background: #fff; color: var(--ink); }
.btn-quiet { border-color: var(--line); color: var(--cream); background: transparent; }
.btn-quiet:hover { border-color: var(--peach); color: #fff; }
.btn .arrow { font-size: 17px; font-weight: 400; line-height: 0; }
.text-link { color: var(--peach); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.text-link:hover { color: #ffd1b5; }

/* ---------- Scene system: an image box that covers its frame like object-fit: cover,
   so anything placed in % lines up with the photo at every screen size ---------- */
.scene-frame { position: absolute; inset: 0; overflow: hidden; container-type: size; background: #0c0f10; }
.scene-box {
  position: absolute; left: 50%; top: 50%;
  width: max(100cqw, calc(100cqh * var(--ratio))); height: max(100cqh, calc(100cqw / var(--ratio)));
  transform: translate(-50%, -50%);
}
.scene-box > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }

/* Curtain used for room-to-room transitions */
.curtain { position: fixed; inset: 0; z-index: 120; background: #0d1210; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  main { animation: arrive 360ms ease-out both; }
  @keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
}

/* ============ Storefront ============ */
.storefront { position: relative; height: 100svh; min-height: 520px; overflow: hidden; isolation: isolate; }
.storefront .scene-frame { --ratio: 1.7768; }
.storefront .scene-box { transition: transform 900ms cubic-bezier(.3, .05, .26, 1), opacity 780ms ease; transform-origin: 50% 56%; }
.scene-image { opacity: 0; transition: opacity 2.5s ease; }
.scene-image.active { opacity: 1; }
#weather-effects { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.sign-glow { position: absolute; z-index: 2; left: 34%; top: 7%; width: 32%; height: 14%; background: radial-gradient(ellipse, #ffb36d18, transparent 72%); opacity: 0; pointer-events: none; }
.scene-box.night .sign-glow { animation: glow 10s ease-in-out infinite alternate; }
.scene-box.paused .sign-glow { animation-play-state: paused; }
@keyframes glow { from { opacity: .15; } to { opacity: .85; } }
.window-promise {
  position: absolute; z-index: 3; top: 36%; left: 66.5%; width: 21%; margin: 0;
  color: rgba(245, 242, 235, .96);
  font: 600 clamp(12px, 1.12cqw, 19px)/1.32 var(--display);
  text-wrap: balance;
  text-shadow: 0 1px 2px rgba(8, 16, 14, .82), 0 3px 10px rgba(8, 16, 14, .42);
  transform: perspective(700px) rotateY(-4deg) skewY(-.45deg); transform-origin: left center;
  pointer-events: none;
}
.door-target { position: absolute; z-index: 4; left: 36.6%; top: 25%; width: 26.6%; height: 57%; display: grid; place-content: center; justify-items: center; gap: 8px; }
.door-circle { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #fff; border-radius: 50%; font-size: 22px; background: rgba(16, 20, 20, .72); transition: background .25s, transform .25s; }
.door-caption { padding: .55em .9em; background: rgba(16, 20, 20, .9); color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transition: opacity .2s; }
.door-target:hover .door-circle, .door-target:focus-visible .door-circle { background: var(--orange); border-color: var(--orange); color: var(--ink); transform: scale(1.06); }
.door-target:hover .door-caption, .door-target:focus-visible .door-caption { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .door-circle { animation: beckon 3.2s ease-in-out 1.2s infinite; }
  @keyframes beckon { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .35); } 50% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } }
}
.storefront-shade { position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(8, 11, 13, .92) 0%, rgba(8, 11, 13, .55) 26%, rgba(8, 11, 13, 0) 52%),
    linear-gradient(90deg, rgba(8, 11, 13, .55) 0%, rgba(8, 11, 13, 0) 45%); }
.storefront-copy { position: absolute; z-index: 6; left: var(--gutter); bottom: clamp(26px, 6vh, 64px); width: min(480px, 36vw); }
.storefront-copy h1 { font: 800 clamp(36px, 3.9vw, 60px)/1 var(--display); letter-spacing: -.045em; margin: 0 0 16px; text-wrap: balance; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.storefront-copy h1 em { font-style: normal; color: var(--orange-soft); }
.storefront-copy .lede { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; color: #efece6; margin: 0 0 22px; max-width: 42ch; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.studio-status { position: absolute; z-index: 6; right: var(--gutter); bottom: clamp(26px, 6vh, 64px); margin: 0; padding: 9px 14px; background: rgba(16, 20, 20, .82); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; border: 1px solid rgba(255, 255, 255, .14); }
.storefront.entering .scene-box { transform: translate(-50%, -50%) scale(2.4); opacity: .12; }
.storefront.entering .door-target, .storefront.entering .storefront-copy, .storefront.entering .studio-status { opacity: 0; transition: opacity .3s; }

/* ---------- The Doorbuster: a sidewalk sign and a window decal, only during the promo dates.
   Its own layer matches the scene box, so it sits above the shading and stays readable. ---------- */
.promo-layer { position: absolute; inset: 0; z-index: 6; overflow: hidden; container-type: size; pointer-events: none; --ratio: 1.7768; }
.promo-layer[hidden] { display: none; }
.promo-layer .scene-box { transition: opacity .3s; }
.storefront.entering .promo-layer { opacity: 0; transition: opacity .3s; }
.promo-garland { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); }
.promo-sign {
  position: absolute; left: 66%; bottom: 11%; width: 11.5%;
  font-size: clamp(8px, calc(max(100cqw, 100cqh * 1.7768) * .0102), 18px);
  display: flex; flex-direction: column; align-items: center;
  color: var(--cream); text-decoration: none; pointer-events: auto;
  filter: drop-shadow(0 .9em 1.1em rgba(0, 0, 0, .55));
  transition: transform .25s ease;
}
.promo-bunch { position: absolute; bottom: calc(100% - .6em); left: 15%; width: 70%; overflow: visible; }
.promo-sign > .promo-board, .promo-sign > .promo-legs { position: relative; }
.promo-board {
  display: grid; justify-items: center; gap: .4em; width: 100%; box-sizing: border-box;
  padding: 1em .6em 1.1em; text-align: center;
  background: radial-gradient(120% 90% at 50% 30%, #24302b, #151c19);
  border: .5em solid #8a5a36; border-radius: .35em;
  box-shadow: inset 0 0 1.2em rgba(0, 0, 0, .6);
}
.promo-kicker { font: 600 .66em/1.25 var(--body); letter-spacing: .1em; text-transform: uppercase; color: rgba(245, 242, 235, .8); }
.promo-title { font: 800 1.5em/1 var(--display); letter-spacing: -.02em; color: var(--orange-soft); text-wrap: balance; }
.promo-when { font: 500 .82em/1.25 var(--body); color: var(--cream); }
.promo-cta { margin-top: .2em; padding-top: .55em; width: 100%; border-top: 1px dashed rgba(245, 242, 235, .35); font: 700 .68em/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.promo-legs { width: 84%; height: 2.4em; background: linear-gradient(90deg, #6e4628 0 .5em, transparent .5em calc(100% - .5em), #6e4628 calc(100% - .5em)); }
.promo-sign:hover, .promo-sign:focus-visible { transform: translateY(-3px); }
.promo-sign:hover .promo-board, .promo-sign:focus-visible .promo-board { border-color: var(--orange); }
.promo-sign:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.promo-decal {
  position: absolute; left: 7.5%; top: 29%; width: 25%; margin: 0; box-sizing: border-box;
  display: grid; justify-items: center; gap: .35em; padding: .9em 1em 1em; text-align: center;
  font-size: clamp(9px, calc(max(100cqw, 100cqh * 1.7768) * .0112), 20px);
  background: rgba(12, 13, 15, .92); border: .18em solid var(--orange);
  box-shadow: 0 .6em 1.6em rgba(0, 0, 0, .35);
  transform: perspective(700px) rotateY(5deg); transform-origin: right center;
}
.promo-decal-kicker { font: 700 .7em/1 var(--body); letter-spacing: .3em; text-transform: uppercase; color: var(--orange-soft); }
.promo-decal-title { font: 800 1.75em/1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--cream); white-space: nowrap; }
.promo-decal-when { font: 700 .7em/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: rgba(245, 242, 235, .85); }
@media (prefers-reduced-motion: no-preference) {
  .promo-bunch-sway { transform-origin: 50px 84px; animation: sway 5s ease-in-out infinite alternate; }
  @keyframes sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
}
@media (max-width: 720px) {
  .promo-layer { top: var(--header-h); bottom: var(--copy-h, 230px); height: auto; }
  .promo-decal { display: none; }
  .promo-sign { left: 52%; bottom: 7%; width: 15%; font-size: clamp(7.5px, calc(max(100cqw, 100cqh * 1.7768) * .0112), 12px); }
}

/* ============ Lobby ============ */
.lobby { position: relative; height: 100svh; min-height: 520px; overflow: hidden; background: #0c0f10; }
.lobby-view { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; cursor: grab; scrollbar-width: none; overscroll-behavior-x: contain; }
.lobby-view::-webkit-scrollbar { display: none; }
.lobby-view.dragging { cursor: grabbing; user-select: none; }
.lobby-panorama { position: relative; height: 100%; aspect-ratio: 1983 / 793; }
.lobby-panorama img { display: block; width: 100%; height: 100%; object-fit: fill; transition: transform 640ms cubic-bezier(.2, .72, .24, 1); }
.lobby-pin { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 9px; padding: 8px 16px 8px 8px; color: #fff; background: rgba(16, 20, 20, .9); border: 1px solid rgba(255, 255, 255, .7); border-radius: 50px; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .2s, transform .2s; }
.lobby-pin span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--orange); color: var(--ink); font-weight: 700; }
.lobby-pin:hover, .lobby-pin:focus-visible { background: var(--orange); color: var(--ink); }
.lobby-pin:hover span, .lobby-pin:focus-visible span { background: var(--ink); color: var(--orange); }
.pin-reception { left: 22%; top: 70%; }
.pin-gallery { left: 49%; top: 44%; }
.pin-office { left: 66.5%; top: 38%; }
.lobby-bar {
  position: absolute; z-index: 10; left: 0; right: 0; bottom: 0;
  display: flex; align-items: end; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 80px var(--gutter) clamp(22px, 4vh, 40px);
  background: linear-gradient(0deg, rgba(8, 11, 13, .9) 0%, rgba(8, 11, 13, .6) 55%, rgba(8, 11, 13, 0) 100%);
  pointer-events: none;
}
.lobby-bar > * { pointer-events: auto; }
.lobby-bar h1 { font: 800 clamp(32px, 4vw, 58px)/1 var(--display); letter-spacing: -.045em; margin: 0 0 8px; }
.lobby-bar p { margin: 0; color: var(--cream-dim); }
.room-list { display: none; }
.pan-controls { display: flex; gap: 8px; }
.pan-controls button, .pan-controls a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; background: rgba(16, 20, 20, .8); border: 1px solid rgba(255, 255, 255, .45); color: #fff; font-size: 14px; }
.pan-controls a { text-decoration: underline; text-underline-offset: 4px; border-color: transparent; background: transparent; }

/* ============ Reception ============ */
.reception { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.reception .scene-frame { --ratio: 1.7768; }
.reception .scene-box { transition: transform 700ms cubic-bezier(.3, .05, .26, 1); }
.speech {
  position: absolute; z-index: 4; left: 25.5%; top: 35%; width: min(22%, 360px); min-width: 230px;
  margin: 0; padding: 16px 18px 15px; background: var(--cream); color: var(--ink); border-radius: 18px 18px 18px 4px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  font: 600 clamp(15px, 1.15cqw, 19px)/1.35 var(--display);
}
.speech small { display: block; margin-bottom: 4px; font: 700 10.5px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: #9a5a33; }
.speech::after { content: ""; position: absolute; left: -9px; bottom: 10px; border: 10px solid transparent; border-right-color: var(--cream); border-left: 0; }
.speech .typed::after { content: "▍"; color: var(--orange); margin-left: 1px; animation: caret 1s steps(1) infinite; }
.speech .typed.done::after { content: none; }
@keyframes caret { 50% { opacity: 0; } }
/* The kiosk (drawn in code until the new reception photo arrives) */
.kiosk-spot { position: absolute; z-index: 4; left: 69%; top: 18%; width: 13.5%; height: 76%; display: block; }
.kiosk-css { position: absolute; inset: 0; pointer-events: none; }
.kiosk-css .k-screen-wrap {
  position: absolute; left: 0; right: 0; top: 0; height: 58%;
  padding: 5%; border-radius: 7% / 4.5%;
  background: linear-gradient(160deg, #262b2a, #0b0d0d 70%);
  border: 1px solid rgba(214, 178, 120, .75);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.kiosk-css .k-screen {
  height: 100%; border-radius: 4% / 2.6%;
  background: radial-gradient(120% 80% at 50% 20%, #2a2c30 0%, #16171a 55%, #0b0c0e 100%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .5), 0 24px 50px rgba(0, 0, 0, .45);
  display: grid; place-content: center; justify-items: center; gap: 10%;
  text-align: center; color: var(--cream);
}
.kiosk-css .k-screen .wordmark { transform: scale(.72); }
.kiosk-css .k-tap { font: 700 clamp(9px, .8cqw, 13px)/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; padding: .7em 1em; background: var(--orange); color: var(--ink); }
.kiosk-css .k-neck { position: absolute; left: 41%; width: 18%; top: 58%; height: 33%; background: linear-gradient(90deg, #0b0d0d, #2a2f2e 45%, #0b0d0d); border-left: 1px solid rgba(214, 178, 120, .55); border-right: 1px solid rgba(214, 178, 120, .55); }
.kiosk-css .k-base { position: absolute; left: 14%; width: 72%; top: 89%; height: 6%; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #2b302f, #0a0c0c 70%); box-shadow: 0 12px 24px rgba(0, 0, 0, .6); border-top: 1px solid rgba(214, 178, 120, .45); }
.kiosk-spot:hover .k-screen, .kiosk-spot:focus-visible .k-screen { box-shadow: inset 0 0 30px rgba(0, 0, 0, .5), 0 0 0 2px var(--orange), 0 24px 50px rgba(0, 0, 0, .5); }
.kiosk-spot:focus-visible { outline-offset: 8px; }
.reception-foot { position: absolute; z-index: 6; left: var(--gutter); right: var(--gutter); bottom: clamp(18px, 4vh, 36px); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; pointer-events: none; }
.reception-foot > * { pointer-events: auto; }
.chip-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 14px; background: rgba(16, 20, 20, .82); border: 1px solid rgba(255, 255, 255, .25); color: #fff; font-size: 14px; }
.chip-link:hover { border-color: var(--peach); }
.kiosk-mobile { display: none; }

/* ============ Kiosk (tasks happen on a screen) ============ */
.page-kiosk { background: #0b0c0e; }
.kiosk-backdrop { position: fixed; inset: -30px; z-index: -1; background: url('assets/reception.webp') 60% center / cover no-repeat; filter: blur(18px) brightness(.38) saturate(1.1); }
.kiosk { min-height: 100svh; padding: calc(var(--header-h) + 14px) var(--gutter) 40px; display: grid; justify-items: center; align-content: start; }
.kiosk-bezel {
  width: min(1120px, 100%);
  padding: 16px 16px 0; border-radius: 30px;
  background: linear-gradient(170deg, #22272a 0%, #101314 40%, #0a0c0c 100%);
  border: 1px solid rgba(214, 178, 120, .45);
  box-shadow: 0 50px 100px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .09);
}
.kiosk-screen {
  position: relative; border-radius: 14px; overflow: hidden;
  min-height: calc(100svh - var(--header-h) - 126px);
  background: radial-gradient(120% 60% at 50% -12%, rgba(255, 90, 30, .14) 0%, rgba(255, 90, 30, 0) 60%), linear-gradient(180deg, #18191c 0%, #111214 55%, #0b0c0e 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 0 80px rgba(0, 0, 0, .35);
}
.kiosk-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, 0) 38%); }
.kiosk-chin { height: 46px; display: grid; place-items: center; color: #8d8577; }
.kiosk-chin .wordmark { transform: scale(.62); opacity: .8; }
.kiosk-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px clamp(18px, 3vw, 34px); border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 13px; color: var(--cream-dim); }
.kiosk-bar .k-where { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .04em; }
.kiosk-bar .k-dot { width: 8px; height: 8px; border-radius: 50%; background: #5fd3a2; }
.kiosk-bar nav { display: flex; gap: 6px; }
.kiosk-bar nav a, .kiosk-bar nav button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 40px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); font-size: 13px; font-weight: 600; color: var(--cream); }
.kiosk-bar nav a:hover, .kiosk-bar nav button:hover { border-color: var(--peach); }
.kiosk-body { position: relative; padding: clamp(26px, 4.5vw, 64px) clamp(20px, 4.5vw, 64px) clamp(30px, 5vw, 64px); }
.k-eyebrow { margin: 0 0 12px; color: var(--peach); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.k-title { font: 800 clamp(32px, 4.4vw, 64px)/1.02 var(--display); letter-spacing: -.045em; margin: 0 0 16px; max-width: 18ch; text-wrap: balance; }
.k-title em { font-style: normal; color: var(--orange-soft); }
.k-lede { font-size: clamp(16px, 1.45vw, 19px); line-height: 1.55; color: #e7e3dc; max-width: 60ch; margin: 0 0 clamp(26px, 3.5vw, 44px); }
.k-section-title { font: 800 clamp(24px, 2.6vw, 36px)/1.1 var(--display); letter-spacing: -.035em; margin: 0 0 12px; }

/* Kiosk home tiles */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tile {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
  min-height: 118px; padding: 22px 22px 22px 24px; border-radius: 14px;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12);
  transition: background .2s, border-color .2s, transform .2s;
}
.tile strong { display: block; font: 750 clamp(19px, 1.7vw, 24px)/1.2 var(--display); letter-spacing: -.02em; margin-bottom: 6px; }
.tile small { display: block; color: var(--cream-dim); font-size: 14.5px; line-height: 1.45; }
.tile .t-arrow { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(239, 182, 146, .5); color: var(--peach); font-size: 18px; transition: background .2s, color .2s; }
.tile:hover, .tile:focus-visible { background: rgba(255, 90, 30, .1); border-color: rgba(255, 120, 70, .65); transform: translateY(-2px); }
.tile:hover .t-arrow, .tile:focus-visible .t-arrow { background: var(--orange); color: var(--ink); border-color: var(--orange); }
.tile.tile-wide { grid-column: 1 / -1; }
.k-aside { margin-top: 22px; color: var(--cream-dim); font-size: 14.5px; }

/* Plans */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: 26px 24px 24px; border-radius: 16px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12); }
.plan.featured { background: linear-gradient(180deg, rgba(255, 90, 30, .14), rgba(255, 90, 30, .03) 45%, rgba(255, 255, 255, .03)); border-color: rgba(255, 120, 70, .7); }
.plan-flag { align-self: flex-start; margin: -2px 0 12px; padding: 5px 10px; border-radius: 30px; background: var(--orange); color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.plan h2 { font: 800 22px/1.15 var(--display); letter-spacing: -.02em; margin: 0 0 12px; }
.price { display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; }
.price b { font: 800 clamp(40px, 4vw, 54px)/1 var(--display); letter-spacing: -.04em; }
.price span { color: var(--cream-dim); font-size: 15px; }
.plan .plan-for { color: var(--cream-dim); font-size: 14.5px; margin: 0 0 18px; min-height: 2.9em; }
.plan ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.plan li { position: relative; padding-left: 26px; }
.plan li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 12px; height: 7px; border-left: 2px solid var(--peach); border-bottom: 2px solid var(--peach); transform: rotate(-45deg); }
.plan li.plus { padding-left: 0; color: var(--peach); font-weight: 700; }
.plan li.plus::before { content: none; }
.plan .btn { margin-top: auto; width: 100%; }
.plan-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.plan-note { padding: 18px 20px; border-radius: 14px; border: 1px dashed rgba(255, 255, 255, .18); font-size: 14.5px; color: var(--cream-dim); }
.plan-note strong { display: block; color: var(--cream); font-weight: 700; margin-bottom: 4px; }

/* Offers list (websites, audits) */
.offer-list { border-bottom: 1px solid var(--line); margin: 0 0 clamp(30px, 4vw, 48px); }
.offer-list > div { display: grid; grid-template-columns: minmax(170px, 1fr) 2.2fr; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); }
.offer-list dt { color: var(--peach); font-weight: 700; }
.offer-list dd { margin: 0; line-height: 1.55; color: #e7e3dc; }
.audit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.audit { padding: 24px; border-radius: 16px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12); display: flex; flex-direction: column; }
.audit h2 { font: 800 22px/1.2 var(--display); margin: 0 0 6px; letter-spacing: -.02em; }
.audit .price { margin-bottom: 12px; }
.audit .price b { font-size: 40px; }
.audit p { color: #e3dfd8; font-size: 15px; }
.audit .btn { margin-top: auto; align-self: flex-start; }
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(26px, 4vw, 56px); align-items: start; }
.callout { padding: 22px 24px; border-radius: 14px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12); }
.callout p:last-child { margin-bottom: 0; }

/* Forms */
.form { display: grid; gap: 16px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label, .field legend { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--peach); }
.field .opt { color: var(--cream-dim); font-weight: 500; letter-spacing: 0; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 10px;
  background: rgba(0, 0, 0, .38); border: 1px solid rgba(255, 255, 255, .2); color: var(--cream); font-size: 16px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--peach) 50%), linear-gradient(135deg, var(--peach) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field select option { background: #15161a; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; }
fieldset.field { border: 0; padding: 0; margin: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 40px; border: 1px solid rgba(255, 255, 255, .2); color: var(--cream); font-size: 14.5px; font-weight: 600; letter-spacing: 0; cursor: pointer; }
.choices input { accent-color: var(--orange); width: 16px; height: 16px; min-height: 0; margin: 0; }
.choices label:has(input:checked) { border-color: var(--orange); background: rgba(255, 90, 30, .12); }
.form .btn { justify-self: start; }
.form-note { font-size: 13.5px; color: var(--cream-dim); margin: 0; }
.honey { display: none; }

/* Footer on kiosk + standalone pages */
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; padding: 26px var(--gutter) 30px; color: #bfc4c0; font-size: 13px; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(8, 11, 12, .6); }
.site-footer .mantra { font: 700 15px/1.3 var(--display); color: var(--cream); }
.site-footer .mantra span { color: var(--orange-soft); }
.site-footer a:hover { color: #fff; }

/* ============ Gallery Wall ============ */
.gallery-room {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: 100svh; padding: calc(var(--header-h) + 40px) max(7%, 22px) 90px;
  background: #15231e url('assets/gallery-room.webp') center / cover no-repeat;
}
.room-head { display: flex; justify-content: space-between; align-items: end; gap: 14px; flex-wrap: wrap; width: min(100%, 1120px); margin: 0 auto 26px; }
.room-head h1 { font: 800 clamp(30px, 3.6vw, 52px)/1 var(--display); letter-spacing: -.04em; margin: 0; text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }
.room-head p { margin: 6px 0 0; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.gallery-projects { --exhibit-gap: clamp(20px, 4vw, 64px); width: min(100%, 1120px); margin-inline: auto; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--exhibit-gap)) / 2); gap: var(--exhibit-gap); overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px; scrollbar-width: thin; }
.gallery-projects article { scroll-snap-align: start; padding: 0 3px 10px; }
.gallery-projects img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border: clamp(6px, 1vw, 14px) solid #211c17; outline: 1px solid #aa8a60; box-shadow: 0 14px 26px rgba(0, 0, 0, .6); }
.gallery-projects h2 { font: 750 clamp(18px, 2vw, 28px)/1.2 var(--display); margin: 16px 0 6px; text-shadow: 0 2px 8px #000; }
.gallery-projects p { margin: 0 0 10px; font-size: .95rem; max-width: 48ch; text-shadow: 0 2px 8px #000; }
.gallery-projects .visit { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; background: rgba(14, 15, 17, .95); border: 1px solid rgba(255, 255, 255, .25); text-decoration: underline; text-underline-offset: 4px; }
.gallery-controls { display: flex; gap: 8px; width: min(100%, 1120px); margin: 18px auto 0; }
.gallery-controls button { min-height: 44px; padding: 8px 14px; background: rgba(14, 15, 17, .95); border: 1px solid rgba(255, 255, 255, .45); color: var(--cream); }
.room-foot { width: min(100%, 1120px); margin: 22px auto 0; display: flex; gap: 10px; flex-wrap: wrap; }

/* ============ Whitni's office ============ */
.office { position: relative; min-height: 100svh; display: grid; align-items: center; justify-items: end; padding: calc(var(--header-h) + 20px) var(--gutter) 40px; isolation: isolate; }
.office .scene-frame { position: fixed; z-index: -1; --ratio: 1.7768; }
.office .scene-box > img { object-position: 82% center; }
.office .scene-box.placeholder > img { filter: brightness(.6) saturate(.9); }
.office-panel { width: min(52%, 600px); padding: clamp(24px, 3vw, 42px); background: rgba(14, 15, 17, .96); border: 1px solid rgba(255, 255, 255, .12); border-top: 2px solid var(--orange); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.office-label { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--peach); margin: 0 0 18px; }
.office-intro { display: grid; grid-template-columns: 112px 1fr; gap: 20px; align-items: center; margin-bottom: 20px; }
.portrait { margin: 0; width: 112px; aspect-ratio: 4 / 5; border: 6px solid #211c17; outline: 1px solid #aa8a60; background: #1b1c1f; display: grid; place-items: center; overflow: hidden; }
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait .ph { font: 800 26px/1 var(--display); color: var(--peach); letter-spacing: .04em; text-align: center; }
.portrait .ph small { display: block; margin-top: 6px; font: 600 9px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--cream-dim); }
.office h1 { font: 800 clamp(28px, 3vw, 44px)/1.04 var(--display); letter-spacing: -.04em; margin: 0; }
.office h1 span { display: block; color: var(--orange-soft); }
.office-bio { font-size: 16.5px; line-height: 1.65; color: #e9e5de; }
.quotes { display: grid; gap: 14px; margin: 22px 0; }
.quotes blockquote { margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--orange); }
.quotes blockquote p { margin: 0 0 6px; font-size: 15.5px; }
.quotes cite { font-style: normal; font-size: 13px; color: var(--cream-dim); }
.office .actions { margin-top: 22px; }
.office-phone { margin: 18px 0 0; color: var(--cream-dim); font-size: 15px; }
.office-phone a { color: var(--cream); text-decoration: underline; text-underline-offset: 4px; }
.office .back { display: inline-flex; margin-top: 18px; color: var(--cream-dim); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; min-height: 44px; align-items: center; }

/* ============ Black Friday ============ */
.bf-hero { position: relative; min-height: min(78svh, 760px); display: grid; align-items: end; padding: calc(var(--header-h) + 40px) var(--gutter) clamp(30px, 6vw, 70px); isolation: isolate; overflow: hidden; }
.bf-hero > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.bf-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10, 14, 13, .97) 0%, rgba(10, 14, 13, .78) 38%, rgba(10, 14, 13, .2) 75%), linear-gradient(90deg, rgba(10, 14, 13, .78), rgba(10, 14, 13, .45) 45%, rgba(10, 14, 13, 0) 70%); }
.bf-hero .k-title { max-width: 16ch; font-size: clamp(38px, 5.4vw, 80px); }
.bf-dates { display: inline-flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.bf-dates span { padding: 7px 12px; border-radius: 30px; background: rgba(255, 90, 30, .16); border: 1px solid rgba(255, 120, 70, .6); color: #ffd0b8; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.bf-body { background: var(--panel-2); padding: clamp(40px, 7vw, 100px) var(--gutter); }
.bf-wrap { width: min(1120px, 100%); margin: 0 auto; }
.bf-get { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: clamp(40px, 6vw, 72px); }
.bf-get div { padding: 24px; border-radius: 16px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12); }
.bf-get b { display: block; font: 800 clamp(28px, 2.8vw, 40px)/1 var(--display); letter-spacing: -.04em; margin-bottom: 10px; color: var(--orange-soft); }
.bf-get strong { display: block; font: 750 18px/1.25 var(--display); margin-bottom: 6px; }
.bf-get p { margin: 0; color: #e0dcd5; font-size: 15px; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 clamp(40px, 6vw, 72px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.steps li { counter-increment: s; padding: 22px; border-top: 2px solid var(--orange); background: rgba(0, 0, 0, .14); }
.steps li::before { content: counter(s, decimal-leading-zero); display: block; font: 800 13px/1 var(--display); color: var(--peach); letter-spacing: .1em; margin-bottom: 12px; }
.steps strong { display: block; font: 750 17px/1.25 var(--display); margin-bottom: 6px; }
.steps p { margin: 0; color: #dcd8d1; font-size: 14.5px; }
.bf-claim { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(26px, 5vw, 70px); align-items: start; }
.bf-state { padding: 16px 18px; border-radius: 12px; background: rgba(255, 90, 30, .1); border: 1px solid rgba(255, 120, 70, .45); margin-bottom: 18px; }
.bf-state strong { display: block; margin-bottom: 2px; }

/* ============ Phones and small tablets ============ */
@media (max-width: 860px) {
  .plans { grid-template-columns: 1fr; }
  .plan .plan-for { min-height: 0; }
  .plan-notes { grid-template-columns: 1fr; }
  .split, .bf-claim { grid-template-columns: 1fr; }
  .bf-get { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .office-panel { width: min(100%, 640px); }
}
@media (max-width: 720px) {
  :root { --header-h: 64px; --gutter: 20px; }
  .wm-top { font-size: 16px; }
  .wm-sub { font-size: 7.5px; }
  .menu-button { display: block; }
  .nav { display: none; position: absolute; right: 16px; top: calc(var(--header-h) - 4px); min-width: 220px; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px; background: #131416; border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 20px 40px rgba(0, 0, 0, .5); }
  .nav.open { display: flex; }
  .nav a { padding: 12px 10px; font-size: 13px; }
  .nav .nav-cta { text-align: center; margin-top: 6px; }

  /* Storefront: the store on top, the words underneath, all on one screen */
  .storefront { display: flex; flex-direction: column; padding-top: var(--header-h); background: var(--ink); }
  .storefront .scene-frame { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; }
  .storefront-shade { background: linear-gradient(0deg, rgba(16, 20, 23, 1) 0%, rgba(16, 20, 23, 0) 18%); top: var(--header-h); bottom: auto; height: calc(100% - var(--header-h) - var(--copy-h, 230px)); }
  .storefront-copy { position: relative; left: auto; bottom: auto; width: auto; flex: 0 0 auto; padding: 4px 20px 22px; }
  .storefront-copy h1 { font-size: clamp(32px, 9vw, 40px); margin-bottom: 10px; }
  .storefront-copy .lede { font-size: 15px; margin-bottom: 16px; }
  .actions .btn { flex: 1 1 0; padding: 12px 10px; min-height: 50px; font-size: 11px; letter-spacing: .1em; }
  .window-promise { display: none; }
  .door-target { left: 33%; width: 34%; }
  .studio-status { top: auto; bottom: calc(var(--copy-h, 230px) + 12px); right: auto; left: 20px; padding: 6px 10px; font-size: 11px; }

  /* Lobby: picture on top, rooms as a list below */
  .lobby { height: auto; min-height: 100svh; display: flex; flex-direction: column; padding-top: var(--header-h); }
  .lobby-view { position: relative; inset: auto; height: 52svh; flex: 0 0 auto; }
  .lobby-pin { font-size: 13px; padding: 6px 12px 6px 6px; }
  .lobby-pin span { width: 26px; height: 26px; }
  .lobby-bar { position: relative; padding: 20px 20px 26px; background: var(--ink); flex-direction: column; align-items: stretch; }
  .room-list { display: grid; gap: 8px; }
  .room-list a { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); font-weight: 650; }
  .room-list a span { color: var(--peach); }
  .pan-controls { justify-content: space-between; }

  /* Reception: receptionist on top, the kiosk becomes a big button */
  .reception { height: auto; min-height: 100svh; display: flex; flex-direction: column; padding-top: var(--header-h); background: var(--ink); }
  .reception .scene-frame { position: relative; inset: auto; height: 46svh; flex: 0 0 auto; }
  .reception .scene-box { left: 0; top: 0; transform: none; }
  .speech { left: auto; right: calc(100% - 100cqw + 12px); top: 12px; width: min(58cqw, 240px); min-width: 0; padding: 12px 14px; font-size: 14.5px; border-radius: 16px 16px 16px 4px; }
  .speech::after { left: 16px; bottom: -9px; border: 10px solid transparent; border-top-color: var(--cream); border-bottom: 0; }
  .kiosk-spot { display: none; }
  .kiosk-mobile { display: grid; gap: 14px; justify-items: center; margin: 18px 20px 0; padding: 26px 20px; border-radius: 18px; text-align: center; background: radial-gradient(120% 80% at 50% 0%, #2a2c30 0%, #16171a 60%, #0b0c0e 100%); border: 1px solid rgba(255, 120, 70, .5); box-shadow: 0 20px 40px rgba(0, 0, 0, .35); }
  .kiosk-mobile strong { font: 800 22px/1.15 var(--display); }
  .kiosk-mobile .k-tap { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 12px 18px; background: var(--orange); color: var(--ink); }
  .reception-foot { position: relative; left: auto; right: auto; bottom: auto; padding: 18px 20px 26px; }

  /* Kiosk: the phone becomes the screen */
  .kiosk { padding: var(--header-h) 0 0; }
  .kiosk-bezel { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .kiosk-screen { border-radius: 0; min-height: calc(100svh - var(--header-h)); }
  .kiosk-chin { display: none; }
  .kiosk-bar { padding: 10px 16px; }
  .kiosk-body { padding: 26px 20px 34px; }
  .tiles { grid-template-columns: 1fr; gap: 10px; }
  .tile { min-height: 0; padding: 18px; }
  .offer-list > div { grid-template-columns: 1fr; gap: 6px; }
  .audit-grid { grid-template-columns: 1fr; }
  .form .row { grid-template-columns: 1fr; }
  .form .btn { justify-self: stretch; }

  .gallery-room { padding: calc(var(--header-h) + 24px) 20px 40px; justify-content: flex-start; }
  .gallery-projects { grid-auto-columns: 100%; }

  .office { display: block; padding: 0; }
  .office .scene-frame { position: relative; inset: auto; width: 100%; z-index: 0; height: 38svh; margin-top: var(--header-h); }
  .office-panel { width: 100%; border-left: 0; border-right: 0; box-shadow: none; }
  .office-intro { grid-template-columns: 92px 1fr; gap: 16px; }
  .portrait { width: 92px; }

  .steps { grid-template-columns: 1fr; }

  /* Keep the storefront sign from crowding the header logo on phones */
  .bf-hero > img { object-position: 50% 0; top: 70px; height: calc(100% - 70px); }
  .bf-hero::after { background: linear-gradient(180deg, rgba(10, 14, 13, 1) 0, rgba(10, 14, 13, .9) 70px, rgba(10, 14, 13, .55) 34%, rgba(10, 14, 13, .8) 62%, rgba(10, 14, 13, .97) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  #weather-effects { display: none; }
}

.site-footer .footer-small { font-size: 12.5px; opacity: .75; }

/* ============ Rooms with a photo and a content card (Consultation Room, Support Desk) ============ */
.room { position: relative; min-height: 100svh; display: grid; align-items: start; justify-items: end; padding: calc(var(--header-h) + 28px) var(--gutter) 56px; isolation: isolate; }
.room-left { justify-items: start; }
.room .scene-frame { position: fixed; z-index: -1; --ratio: 1.7768; }
.room .scene-box > img { object-position: var(--focus, 50%) center; }
.room-card { width: min(54%, 680px); padding: clamp(24px, 3vw, 44px); background: rgba(14, 15, 17, .95); border: 1px solid rgba(255, 255, 255, .12); border-top: 2px solid var(--orange); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.room-card .k-title { font-size: clamp(30px, 3.3vw, 50px); }
.room-card .split { grid-template-columns: 1fr; gap: 22px; }
.room-card .offer-list > div { grid-template-columns: minmax(140px, 1fr) 2fr; }
.room-card .back { display: inline-flex; margin-top: 22px; color: var(--cream-dim); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; min-height: 44px; align-items: center; }
.field input[type="file"] { padding: 10px 12px; }
.pin-consult { left: 27%; top: 45%; }
.pin-support { left: 84%; top: 56%; }
.audit-how { margin-top: clamp(26px, 3.5vw, 40px); }

/* Office below the frame layout: the card is the grid item, so it sits right, over the empty frame */
.office-stage, .office-box { display: contents; }
/* Whitni's office on wide screens: her introduction sits inside the gold frame on the wall */
@media (min-width: 1360px), (min-width: 1100px) and (min-height: 780px) {
  .office-stage, .office-box { display: block; }
  .office { display: block; min-height: 0; height: 100svh; padding: 0; overflow: hidden; }
  .office-stage { position: fixed; inset: 0; z-index: 1; container-type: size; pointer-events: none; }
  .office-box {
    position: absolute; left: 50%; top: 50%;
    width: max(100cqw, calc(100cqh * 1.7768)); height: max(100cqh, calc(100cqw / 1.7768));
    transform: translate(-50%, -50%);
    font-size: clamp(13px, calc(max(100cqw, 100cqh * 1.7768) * .0088), 19px);
  }
  .office-panel {
    position: absolute; left: 56.3%; top: 7.4%; width: 36.2%; height: 42.2%; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center;
    padding: 1.6em 2.1em; overflow: hidden; pointer-events: auto;
    background: linear-gradient(160deg, rgba(16, 17, 19, .76), rgba(9, 10, 12, .86));
    border: 0; box-shadow: inset 0 0 3em rgba(0, 0, 0, .45);
  }
  .office-label { font-size: .74em; margin: 0 0 1em; }
  .office-intro { grid-template-columns: 5.4em 1fr; gap: 1.3em; margin-bottom: 1em; }
  .office .portrait { width: 5.4em; border-width: .35em; }
  .office .portrait .ph { font-size: 1.5em; }
  .office .portrait .ph small { font-size: .38em; }
  .office h1 { font-size: 2.45em; }
  .office-bio { font-size: 1em; line-height: 1.5; margin: 0 0 .65em; }
  .office .actions { margin-top: .6em; gap: .7em; }
  .office .actions .btn { min-height: 0; font-size: .78em; padding: 1.15em 1.5em; gap: 1em; }
  .office-phone { font-size: .9em; margin-top: .9em; }
  .office-back { position: fixed; left: var(--gutter); bottom: 18px; z-index: 2; margin: 0; color: var(--cream); text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
}
@media (max-width: 720px) {
  .room { display: block; padding: 0; }
  .room .scene-frame { position: relative; inset: auto; width: 100%; z-index: 0; height: 36svh; margin-top: var(--header-h); }
  .room-card { width: 100%; border-left: 0; border-right: 0; box-shadow: none; }
  .room-card .offer-list > div { grid-template-columns: 1fr; gap: 6px; }
  .room-card .form .row { grid-template-columns: 1fr; }
}

/* Text-message consent (A2P) and the storefront legal line */
.consent { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 13px; line-height: 1.55; color: var(--cream-dim); cursor: pointer; }
.consent input { accent-color: var(--orange); width: 18px; height: 18px; min-height: 0; margin: 1px 0 0; }
.consent .text-link { text-underline-offset: 3px; }
.legal-line { margin: 16px 0 0; font-size: 11.5px; color: rgba(239, 236, 230, .72); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.legal-line a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.legal-line a:hover { color: #fff; }
/* Leave room for the chat bubble in the bottom-right corner */
@media (min-width: 721px) { .studio-status { right: max(var(--gutter), 100px); } }
@media (max-width: 720px) { .legal-line { padding-right: 78px; margin-top: 20px; } .storefront-copy { padding-bottom: 30px; } }

/* ---------- Impeccable audit fixes ---------- */
/* Lobby: the welcome line sits on the bright floor, so the scrim under it goes deeper */
.lobby-bar { padding-top: 140px; background: linear-gradient(0deg, rgba(8, 11, 13, .95) 0%, rgba(8, 11, 13, .86) 42%, rgba(8, 11, 13, .5) 72%, rgba(8, 11, 13, 0) 100%); }
.lobby-bar h1, .lobby-bar p { text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
.lobby-bar p { color: #ece8e1; }
/* Desktop nav: a full-height tap area for tablets and touch laptops */
@media (min-width: 721px) { .nav a:not(.nav-cta) { display: inline-flex; align-items: center; min-height: 44px; } }
/* Black Friday: darken the top of the photo so the menu never sits on the lit storefront sign */
.bf-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 220px; z-index: -1; background: linear-gradient(180deg, rgba(10, 14, 13, .92) 0%, rgba(10, 14, 13, .6) 55%, rgba(10, 14, 13, 0) 100%); pointer-events: none; }
/* Placeholders read as hints but still clear 4.5:1 */
.field input::placeholder, .field textarea::placeholder { color: #918d86; opacity: 1; }
/* Office frame: button text never drops under 12px */
@media (min-width: 1360px), (min-width: 1100px) and (min-height: 780px) { .office .actions .btn { font-size: max(.78em, 12px); } .office-phone { font-size: max(.9em, 13px); } }
/* Phone storefront: the time and weather label at a readable size */
@media (max-width: 720px) { .studio-status { font-size: 12px; } }
/* Free website review on the start screen */
.review { margin-bottom: 18px; display: grid; gap: 4px; }
.review .k-section-title em { font-style: normal; color: var(--orange-soft); }
.review > p { max-width: 60ch; margin-bottom: 14px; }

/* ============ Homepage: what's in the window, and everything under the storefront ============ */
html { scroll-behavior: smooth; }
.site-header { transition: background-color .3s, box-shadow .3s; }
.site-header.solid { background: rgba(10, 11, 13, .95); box-shadow: 0 1px 0 rgba(255, 255, 255, .07); }
.scroll-cue { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; font-size: 13.5px; font-weight: 700; letter-spacing: .04em; color: #efece6; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.scroll-cue span { color: var(--orange-soft); font-size: 17px; }
.scroll-cue:hover { color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue span { animation: nudge 2.4s ease-in-out 1.6s infinite; }
  @keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
}

.hs { padding: clamp(64px, 9vw, 120px) var(--gutter); scroll-margin-top: var(--header-h); }
.hs-wrap { width: min(1120px, 100%); margin: 0 auto; }
.hs-title { font: 800 clamp(32px, 3.8vw, 54px)/1.04 var(--display); letter-spacing: -.045em; margin: 0 0 16px; max-width: 20ch; text-wrap: balance; }
.hs-title em { font-style: normal; color: var(--orange-soft); }
.hs-lede { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: #e7e3dc; max-width: 54ch; margin: 0 0 clamp(30px, 4vw, 48px); }
.hs-window { background: var(--ink); border-top: 1px solid rgba(255, 255, 255, .06); }
.hs-who, .hs-steps { background: var(--panel-2); }
.hs-work, .hs-faq { background: var(--ink); }

/* The window: three signs with the prices */
.signs { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 14px; }
.sign { display: flex; flex-direction: column; padding: 28px 26px 26px; border-radius: 16px; background: var(--panel); border: 1px solid rgba(255, 255, 255, .1); }
.sign-lead { background: linear-gradient(180deg, rgba(255, 90, 30, .16), rgba(255, 90, 30, .03) 55%, var(--panel)); border-color: rgba(255, 120, 70, .7); }
.sign-kicker { margin: 0 0 14px; color: var(--peach); font: 800 12px/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.sign-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 14px; }
.sign-price b { font: 800 clamp(46px, 4.6vw, 66px)/1 var(--display); letter-spacing: -.045em; }
.sign-price span { color: var(--cream-dim); font-size: 15px; }
.sign > p:not([class]) { color: #e0dcd5; font-size: 15.5px; line-height: 1.55; margin: 0 0 22px; }
.sign .text-link { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.facts { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 12px 30px; font-size: 15.5px; color: var(--cream); }
.facts li { display: flex; align-items: center; gap: 12px; }
.facts li::before { content: ""; flex: none; width: 12px; height: 7px; margin-top: -4px; border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(-45deg); }

/* Built by Whitni */
.who { display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: clamp(30px, 6vw, 88px); align-items: center; }
.who-photo { margin: 0; border: 10px solid #1a1a1c; outline: 1px solid rgba(255, 120, 70, .55); box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.who-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.who p:not([class]) { font-size: 17px; line-height: 1.65; color: #e9e5de; max-width: 52ch; }
.who .actions { margin-top: 26px; }

/* Our work */
.hs-head { display: flex; justify-content: space-between; align-items: end; gap: 16px 30px; flex-wrap: wrap; margin-bottom: clamp(26px, 3.5vw, 40px); }
.hs-head .hs-title { margin: 0; }
.hs-head .text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 40px); }
.work-grid article { margin: 0; }
.work-grid img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); }
.work-grid h3 { font: 750 clamp(19px, 1.8vw, 24px)/1.2 var(--display); letter-spacing: -.02em; margin: 18px 0 6px; }
.work-grid p { margin: 0; color: var(--cream-dim); max-width: 48ch; }

/* After you say yes */
.hs-steps .hs-title { margin-bottom: clamp(30px, 4vw, 48px); }
.hs-steps .steps { margin: 0; }
.hs-steps .steps li { background: var(--panel); }

/* FAQ */
.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.faq-more { color: var(--cream-dim); margin: 0; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 66px; padding: 16px 0; cursor: pointer; list-style: none; font: 700 clamp(17px, 1.5vw, 20px)/1.3 var(--display); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 120, 70, .6); color: var(--orange-soft); font: 400 21px/1 var(--body); transition: transform .25s, background .2s, color .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--orange); border-color: var(--orange); color: var(--ink); }
.faq summary:hover { color: #fff; }
.faq summary:hover::after { border-color: var(--orange); }
.faq details p { margin: 0 0 24px; padding-right: 54px; color: #e0dcd5; max-width: 62ch; line-height: 1.6; }

/* The door's open */
.hs-close { position: relative; isolation: isolate; overflow: hidden; padding: clamp(96px, 14vw, 180px) var(--gutter); text-align: center; }
.hs-close > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hs-close::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 50% 50%, rgba(10, 11, 13, .74), rgba(10, 11, 13, .94)); }
.hs-close .hs-title, .hs-close .hs-lede { margin-left: auto; margin-right: auto; text-shadow: 0 2px 16px rgba(0, 0, 0, .5); }
.hs-close .actions { justify-content: center; }

@media (max-width: 860px) {
  .signs { grid-template-columns: 1fr; }
  .who { grid-template-columns: 1fr; }
  .who-photo { width: min(100%, 300px); }
  .faq-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .scroll-cue { padding-right: 78px; margin-top: 8px; }
  .work-grid { grid-template-columns: 1fr; gap: 34px; }
  .facts { flex-direction: column; }
  .faq details p { padding-right: 0; }
  .hs-close { text-align: left; }
  .hs-close .hs-title, .hs-close .hs-lede { margin-left: 0; }
  .hs-close .actions .btn { flex: 1 1 100%; }
}
.site-price { flex-wrap: wrap; gap: 4px 10px; margin: 0 0 clamp(24px, 3vw, 34px); }
a[href^="tel:"] { white-space: nowrap; }
.sign .text-link, .hs-head .text-link { gap: 6px; }

/* Homepage window: build checklist and the three care plans */
.sign-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; font-size: 15px; line-height: 1.45; color: #e0dcd5; }
.sign-list li { position: relative; padding-left: 24px; }
.sign-list li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 11px; height: 6px; border-left: 2px solid var(--peach); border-bottom: 2px solid var(--peach); transform: rotate(-45deg); }
.care { margin-top: 14px; padding: clamp(22px, 3vw, 34px); border-radius: 16px; background: var(--panel); border: 1px solid rgba(255, 255, 255, .1); }
.care-head { display: flex; justify-content: space-between; align-items: end; gap: 10px 40px; flex-wrap: wrap; margin-bottom: 20px; }
.care-title { font: 800 clamp(22px, 2.2vw, 30px)/1.1 var(--display); letter-spacing: -.03em; margin: 0; }
.care-title em { font-style: normal; color: var(--orange-soft); }
.care-head p { margin: 0; max-width: 46ch; color: var(--cream-dim); font-size: 15px; }
.care-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.care-plan { display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03); transition: border-color .2s, background .2s, transform .2s; }
.care-plan:hover, .care-plan:focus-visible { border-color: rgba(255, 120, 70, .7); background: rgba(255, 90, 30, .07); transform: translateY(-2px); }
.care-featured { border-color: rgba(255, 120, 70, .6); background: rgba(255, 90, 30, .08); }
.care-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 750 18px/1.2 var(--display); }
.care-flag { padding: 4px 9px; border-radius: 30px; background: var(--orange); color: var(--ink); font: 800 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; }
.care-price { color: var(--cream-dim); font-size: 14.5px; }
.care-price b { font: 800 32px/1 var(--display); letter-spacing: -.035em; color: var(--cream); margin-right: 2px; }
.care-what { color: #e0dcd5; font-size: 14.5px; line-height: 1.45; }
.care-note { margin: 18px 0 0; color: var(--cream-dim); font-size: 14.5px; }
.plan-kind { margin: -6px 0 12px; color: var(--peach); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
@media (max-width: 860px) { .care-plans { grid-template-columns: 1fr; } }
.work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .work-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .work-grid { grid-template-columns: 1fr; } }