/* SONO XR — approved glass controls, 24 September 2026.
   The current engine is the source of truth. Glass surfaces plus the user-requested caption alignment, footer visibility
   and full-canvas tour layout. Fonts, assets, audio and routes remain original. */
html[data-showcase-ui="glass"] {
  --gc-surface:linear-gradient(135deg,rgba(245,239,226,.19),rgba(233,235,233,.065) 50%,rgba(250,237,219,.11)),rgba(24,29,31,.51);
  --gc-edge:rgba(242,242,233,.3);
  --gc-shadow:inset 0 1px 0 rgba(255,255,255,.27),inset 0 -1px 0 rgba(255,255,255,.05),0 12px 36px -12px rgba(0,0,0,.5);
  --gc-blur:blur(26px) saturate(1.18);
}
/* Floating control surfaces use the scene behind them as their material. */
html[data-showcase-ui="glass"] #hud,
html[data-showcase-ui="glass"] .story-nav,
html[data-showcase-ui="glass"] .story-kind-select select,
html[data-showcase-ui="glass"] .story-strip-nav,
html[data-showcase-ui="glass"] .iv-rail,
html[data-showcase-ui="glass"] .iv-toolbar>button,
html[data-showcase-ui="glass"] .iv-tools>button,
html[data-showcase-ui="glass"] .iv-story-tab,
html[data-showcase-ui="glass"] .iv-spaces,
html[data-showcase-ui="glass"] .home-door,
html[data-showcase-ui="glass"] #hdrAct .hbtn:not(.sales-primary),
html[data-showcase-ui="glass"] .story-home,
html[data-showcase-ui="glass"] .sxr-session {
  background:var(--gc-surface);
  border-color:var(--gc-edge);
  box-shadow:var(--gc-shadow);
  backdrop-filter:var(--gc-blur);-webkit-backdrop-filter:var(--gc-blur);
}
html[data-showcase-ui="glass"] #hud{border-radius:30px}
html[data-showcase-ui="glass"] #hdrAct .hbtn:not(.sales-primary){border-radius:999px}
html[data-showcase-ui="glass"] #navTabs .tab{border-radius:20px}
html[data-showcase-ui="glass"] #navTabs .tab.active{
  background:linear-gradient(140deg,rgba(var(--accent-rgb),.2),rgba(var(--accent-rgb),.055));
  box-shadow:inset 0 1px rgba(255,255,255,.16);
}
html[data-showcase-ui="glass"] .story-nav{
  border:1px solid var(--gc-edge);border-radius:18px;padding:5px;gap:4px;
}
html[data-showcase-ui="glass"] .story-toolbar .story-nav{padding-bottom:5px}
html[data-showcase-ui="glass"] .story-nav button{
  border-radius:13px;border-color:transparent;background:transparent;color:var(--ink);
}
html[data-showcase-ui="glass"] .story-nav button.active{
  background:var(--accent);color:var(--on-accent);border-color:rgba(255,255,255,.3);
  box-shadow:inset 0 1px rgba(255,255,255,.35),0 3px 10px #0002;
}
html[data-showcase-ui="glass"] .story-nav button:not(.active):hover{background:rgba(255,255,255,.11);color:var(--accent)}
html[data-showcase-ui="glass"] .story-kind-select select{
  border-radius:16px;min-height:48px;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23D1B596' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"),linear-gradient(135deg,rgba(245,239,226,.17),rgba(233,235,233,.07));
  background-color:rgba(24,29,31,.55);background-repeat:no-repeat;background-position:right 12px center,center;background-size:16px,100%;
}
html[data-showcase-ui="glass"] .story-strip-nav{
  align-self:center;border:1px solid var(--gc-edge);border-radius:999px;padding:5px;gap:6px;margin-top:5px;
}
html[data-showcase-ui="glass"] .story-strip-arrow{
  width:50px;height:42px;border-radius:999px;border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.065);
}
html[data-showcase-ui="glass"] .story-strip-arrow:hover{background:rgba(255,255,255,.14);border-color:var(--accent)}
html[data-showcase-ui="glass"] .story-strip-pos{min-width:76px}
html[data-showcase-ui="glass"] :is(.story-home,.hbtn,.iv-toolbar button,.iv-rail .iv-tool){border-radius:999px}
html[data-showcase-ui="glass"] .home-door{border-radius:20px}
html[data-showcase-ui="glass"] .home-door:is(:hover,:focus-visible):not(.off){background:linear-gradient(135deg,rgba(var(--accent-rgb),.25),rgba(255,255,255,.08));border-color:var(--accent)}
html[data-showcase-ui="glass"] .iv-rail{border-radius:26px}
html[data-showcase-ui="glass"] .iv-film{background:transparent;border-radius:18px}
html[data-showcase-ui="glass"] .iv-rail>#ivPrev,
html[data-showcase-ui="glass"] .iv-rail>#ivNext{border-radius:999px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
html[data-showcase-ui="glass"] .iv-th{border-radius:12px}
html[data-showcase-ui="glass"] .iv-story-tab{border-radius:18px 0 0 18px}
html[data-showcase-ui="glass"] .iv-story-tab[aria-expanded="true"]{background:var(--accent);border-color:var(--accent)}
html[data-showcase-ui="glass"] .sxr-session{
  background:linear-gradient(140deg,rgba(228,224,211,.15),rgba(255,255,255,.035)),rgba(19,24,27,.86);
}
html[data-showcase-ui="glass"] .sxr-session button:not(.ss-primary){border-radius:13px}
html[data-showcase-ui="glass"] :is(.story-nav button,.story-home,.story-strip-arrow,.home-door,.hbtn,.iv-toolbar button,.iv-rail button):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Original layouts/breakpoints continue to handle the full Showcase. */
@media(max-width:760px){
    html[data-showcase-ui="glass"] .story-nav{border-radius:16px;padding:4px}
  html[data-showcase-ui="glass"] .story-kind-select select{min-height:40px;border-radius:13px}
  html[data-showcase-ui="glass"] .story-strip-nav{padding:4px}
  html[data-showcase-ui="glass"] .home-door{border-radius:16px}
}
@media(prefers-reduced-transparency:reduce){
  html[data-showcase-ui="glass"]{--gc-surface:#293033;--gc-blur:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-showcase-ui="glass"]{--gc-surface:#293033}
}

/* Requested refinements, 24 September: centered media captions and immersive
   tours use the same edge-to-edge canvas as photos and films. */
html[data-showcase-ui="glass"] .story-card-words {
  left:50%;right:auto;transform:translateX(-50%);
  width:calc(100% - 44px);max-width:60ch;text-align:center;
}
html[data-showcase-ui="glass"] .story-card-brand {
  left:50%;transform:translateX(-50%);max-width:calc(100% - 116px);
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[data-showcase-ui="glass"] #ivStory {
  left:50%;right:auto;top:auto;transform:translateX(-50%);
  width:min(700px,calc(100% - 100px));bottom:calc(var(--iv-bottom) + 112px);
  max-height:min(52%,460px);text-align:center;
}
html[data-showcase-ui="glass"] #ivStory .ml-detail-body {align-items:center;text-align:center}
html[data-showcase-ui="glass"] #ivStory :is(.ml-convert,.ml-secondary,.ml-highlights,.iv-facts) {justify-content:center}
html[data-showcase-ui="glass"] .iv-th span {text-align:center}
html[data-showcase-ui="glass"] #assetStage.iv-interactive #ivCanvas {inset:0;border-radius:0}
html[data-showcase-ui="glass"] .iv-interactive .iv-toolbar {
  top:calc(var(--sales-header-h,110px) + 8px);right:auto;
  width:fit-content;max-width:calc(100% - 40px);padding:6px;gap:8px;
  border:1px solid var(--gc-edge);border-radius:22px;background:var(--gc-surface);
  box-shadow:var(--gc-shadow);backdrop-filter:var(--gc-blur);-webkit-backdrop-filter:var(--gc-blur);
}
html[data-showcase-ui="glass"] .iv-interactive .iv-view-title {padding:0 5px;text-shadow:0 1px 8px #0009}
html[data-showcase-ui="glass"] .iv-interactive .iv-mode {margin-right:0}
html[data-showcase-ui="glass"] .iv-interactive:fullscreen .iv-toolbar {top:16px}
/* every viewer (the guided tour and the photo viewer use the plain stage) clears the header —
   top:72px put "← Media" on the logo (Michael, 2026-09-28) */
@media (min-width:761px){html[data-showcase-ui="glass"] .iv-stage:not(.iv-interactive):not(:fullscreen) .iv-toolbar{top:calc(var(--sales-header-h,110px) + 8px)}}
@media(max-width:760px){
  html[data-showcase-ui="glass"] .story-card-words {width:calc(100% - 32px)}
  html[data-showcase-ui="glass"] #ivStory {
    width:calc(100% - 40px);bottom:calc(var(--iv-bottom) + 72px);
    max-height:min(44%,360px);
  }
  html[data-showcase-ui="glass"] .iv-interactive .iv-toolbar {
    left:10px;max-width:calc(100% - 20px);gap:5px;border-radius:18px;flex-wrap:wrap;
  }
}
/* The footer strip (contact + social) STAYS (Michael, 2026-09-25: "we lost our footer
   banner with contact info and social media links… def want back"). The glass
   presentation keeps it; --foot-h is measured from it as before. */

/* One Explore control bar: the media selector stays at the far right,
   while the room choices scroll inside the remaining space. */
html[data-showcase-ui="glass"] body.on-content-browser #viewport #console.solo {
  left:clamp(24px,4vw,72px);right:clamp(24px,4vw,72px);
}
html[data-showcase-ui="glass"] .story-toolbar {
  flex-direction:row;align-items:center;gap:0;padding:5px;
  border:1px solid var(--gc-edge);border-radius:20px;background:var(--gc-surface);
  box-shadow:var(--gc-shadow);backdrop-filter:var(--gc-blur);-webkit-backdrop-filter:var(--gc-blur);
}
html[data-showcase-ui="glass"] .story-toolbar .story-nav {
  flex:1 1 auto;min-width:0;gap:4px;padding:0;border:0;border-radius:14px;
  background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  scrollbar-width:none;
}
html[data-showcase-ui="glass"] .story-toolbar .story-nav::-webkit-scrollbar {display:none}
html[data-showcase-ui="glass"] .story-toolbar .story-kind-select {
  flex:0 0 auto;margin-left:auto;padding-left:10px;border-left:1px solid #ffffff24;
}
html[data-showcase-ui="glass"] .story-kind-select>span {display:none}
html[data-showcase-ui="glass"] .story-toolbar .story-kind-select select {
  min-height:40px;min-width:180px;max-width:240px;border:0;border-radius:12px;
  background-color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23e0e5e8' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-size:16px;background-position:right 12px center;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
html[data-showcase-ui="glass"] .story-toolbar .story-kind-select select:hover {background-color:#ffffff0d}
html[data-showcase-ui="glass"] .story-toolbar .story-kind-select select:focus-visible {outline:2px solid var(--accent);outline-offset:-2px}
html[data-showcase-ui="glass"] #storyStrip {padding-inline:var(--gc-strip-gutter,24px)}
html[data-showcase-ui="glass"] #storyStrip .story-card {max-width:min(84vw,1720px,var(--gc-strip-max,100vw))}

/* Soft chrome for the SONO palette; authored client accents stay intact. */
html[data-showcase-ui="glass"][data-showcase-accent="chrome"] {
  --gc-surface:linear-gradient(135deg,rgba(231,237,242,.18),rgba(222,231,236,.065) 50%,rgba(227,236,244,.1)),rgba(24,29,33,.51);
  --gc-chrome-button:linear-gradient(165deg,#eef2f5 0%,#b9c3cb 55%,#dce3e8 100%);
}
html[data-showcase-ui="glass"][data-showcase-accent="chrome"] #brandbar #salesPrimary,
html[data-showcase-ui="glass"][data-showcase-accent="chrome"] .story-nav button.active,
html[data-showcase-ui="glass"][data-showcase-accent="chrome"] .sxr-session .ss-primary {
  background:var(--gc-chrome-button);color:#14191d;border-color:#e6edf1;
  box-shadow:inset 0 1px 0 #ffffffb3,0 3px 10px #0002;
}
@media(max-width:760px){
  html[data-showcase-ui="glass"] body.on-content-browser #viewport #console.solo{left:14px;right:14px}
  html[data-showcase-ui="glass"] .story-toolbar{padding:4px;border-radius:17px}
  html[data-showcase-ui="glass"] .story-toolbar .story-nav button{min-height:40px;padding-inline:12px}
  html[data-showcase-ui="glass"] .story-toolbar .story-kind-select{padding-left:4px}
  html[data-showcase-ui="glass"] .story-toolbar .story-kind-select select{
    width:142px;min-width:0;min-height:40px;font-size:10px;letter-spacing:.04em;padding-left:10px;padding-right:26px;background-position:right 8px center;
  }
  html[data-showcase-ui="glass"] #storyStrip .story-card{max-width:min(88vw,var(--gc-strip-max,100vw))}
  }
@media(prefers-contrast:more){html[data-showcase-ui="glass"] .story-toolbar{background:#20282d;border-color:#d7dfe5}}
@media(prefers-reduced-transparency:reduce){
  html[data-showcase-ui="glass"][data-showcase-accent="chrome"]{--gc-surface:#293033;--gc-blur:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-showcase-ui="glass"][data-showcase-accent="chrome"]{--gc-surface:#293033}
}

/* Home is a cinematic title composition. Keep the authored title, line breaks,
   media and three destinations; give each a deliberate level of emphasis.
   Scope to the standard hero so an individual commission retains its art direction. */
html[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial {
  padding:clamp(20px,4vh,56px) clamp(24px,5vw,96px);
}
html[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial h1 {
  width:100%;max-width:1400px;margin:0;
  font:300 clamp(44px,5.6vw,108px)/1.04 var(--display);   /* was clamp(54px,8.4vw,160px) — Michael 10-11: "too big" */
  letter-spacing:-.045em;text-wrap:balance;overflow-wrap:anywhere;
  color:var(--white,#f4f7f9);text-shadow:0 4px 40px #0004;
  animation:home-title-arrive 1.1s cubic-bezier(.16,1,.3,1) both;
}
html[data-showcase-ui="glass"] #heroLayer .hero-editorial h1 :is(b,strong) {font-weight:400}
html[data-showcase-ui="glass"] #heroLayer .hero-editorial h1 .ht-w {max-width:100%;white-space:normal;overflow-wrap:anywhere}
html[data-showcase-ui="glass"] #heroLayer .hero-editorial h1 .ht-l {
  display:inline;opacity:1;transform:none;animation:none;
  background:none;color:inherit;-webkit-text-fill-color:currentColor;
}
html[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial .ht-sub {
  max-width:68ch;margin:clamp(20px,3.2vh,40px) auto 0;   /* was 48ch — wider, fewer lines (Michael 10-11: "hard to read") */
  font:400 clamp(16px,1.35vw,20px)/1.6 var(--sans);
  letter-spacing:.005em;text-wrap:pretty;color:var(--ink);
  text-shadow:0 2px 18px #0009;
  animation:home-copy-arrive .8s .12s cubic-bezier(.16,1,.3,1) both;
}
html[data-showcase-ui="glass"] .hero-editorial .home-doors {
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(16px,2vw,32px);width:min(570px,100%);
  margin:clamp(28px,4.2vh,52px) auto 0;
  animation:home-copy-arrive .8s .22s cubic-bezier(.16,1,.3,1) both;
}
html[data-showcase-ui="glass"] .hero-editorial .home-door {
  justify-content:center;gap:9px;height:52px;min-height:48px;padding:0 10px;
  border:1px solid transparent;border-radius:999px;
  background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  color:var(--ink);text-shadow:0 1px 12px #0008;
  transition:background .2s,border-color .2s,color .2s,transform .2s;
}
html[data-showcase-ui="glass"] .hero-editorial .home-door::after {display:none}
html[data-showcase-ui="glass"] .hero-editorial .home-door strong {font:500 14px/1.25 var(--sans);white-space:nowrap}
html[data-showcase-ui="glass"] .hero-editorial .home-door-icon {
  flex:none;width:19px;height:19px;border:0;border-radius:0;background:none;color:inherit;
}
html[data-showcase-ui="glass"] .hero-editorial .home-door-icon svg {width:19px;height:19px}
html[data-showcase-ui="glass"] .hero-editorial .home-door-primary {
  height:58px;padding:0 28px;gap:20px;background:var(--gc-chrome-button,var(--accent));
  color:var(--on-accent);border-color:rgba(255,255,255,.48);text-shadow:none;
  box-shadow:inset 0 1px #ffffffa0,0 8px 28px #0003;
}
html[data-showcase-ui="glass"] .hero-editorial .home-door-primary .home-door-icon {display:none}
html[data-showcase-ui="glass"] .hero-editorial .home-door-arrow {width:22px;height:22px;flex:none;transition:transform .25s}
html[data-showcase-ui="glass"] .hero-editorial .home-door:is(:hover,:focus-visible):not(.off) {
  flex-grow:1;transform:translateY(-2px);background:rgba(255,255,255,.1);border-color:#ffffff38;color:var(--ink);
}
html[data-showcase-ui="glass"] .hero-editorial .home-door-primary:is(:hover,:focus-visible):not(.off) {
  background:var(--gc-chrome-button,var(--accent));color:var(--on-accent);border-color:#ffffffb3;
  box-shadow:inset 0 1px #ffffffa0,0 10px 32px #0005;
}
html[data-showcase-ui="glass"] .hero-editorial .home-door-primary:hover .home-door-arrow {transform:translateX(3px)}
html[data-showcase-ui="glass"] .hero-editorial .home-door:active:not(.off) {transform:translateY(0) scale(.98);transition-duration:.1s}
html[data-showcase-ui="glass"] #viewport.hero-mode #heroLayer:not([data-hero-experience]) .hero-shade {
  background:radial-gradient(ellipse at 50% 48%,rgba(5,10,14,.47),rgba(5,10,14,.18) 48%,transparent 76%),
    linear-gradient(180deg,rgba(5,10,14,.32),rgba(5,10,14,.04) 28%,rgba(5,10,14,.12) 60%,rgba(5,10,14,.63));
}
@keyframes home-title-arrive {from {opacity:0;transform:translateY(20px);filter:blur(5px)} to {opacity:1;transform:none;filter:none}}
@keyframes home-copy-arrive {from {opacity:0;transform:translateY(10px)} to {opacity:1;transform:none}}
html[data-showcase-ui="glass"][data-skin="meridian"] #heroLayer .hero.hero-editorial h1 {font-weight:400;letter-spacing:-.015em}
@media(max-width:760px) {
  html[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial {padding:24px}
  html[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial h1 {font-size:clamp(36px,9.4vw,64px);line-height:1.08;letter-spacing:-.04em}
  html[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial .ht-sub {margin-top:26px;font-size:15px;max-width:36ch;line-height:1.6}
  html[data-showcase-ui="glass"] .hero-editorial .home-doors {grid-template-columns:1fr 1fr;gap:8px 18px;width:min(330px,100%);margin-top:28px}
  html[data-showcase-ui="glass"] .hero-editorial .home-door-primary {grid-column:1/-1;grid-row:1;justify-self:center;height:54px;padding-inline:28px}
  html[data-showcase-ui="glass"] .hero-editorial .home-door {height:48px}
}
@media(max-height:700px) {
  html[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial {padding-block:16px}
  html[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial h1 {font-size:clamp(40px,min(8vw,12vh),110px)}
  html[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial .ht-sub {margin-top:20px}
  html[data-showcase-ui="glass"] .hero-editorial .home-doors {margin-top:22px}
}
@media(prefers-reduced-motion:reduce) {
  html[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial :is(h1,.ht-sub,.home-doors) {animation:none;opacity:1;transform:none;filter:none}
  html[data-showcase-ui="glass"] .hero-editorial :is(.home-door,.home-door-arrow) {transition:none;transform:none!important}
}
@media(prefers-contrast:more) {
  html[data-showcase-ui="glass"] .hero-editorial .home-door:not(.home-door-primary) {background:#162027;border-color:var(--line-bright)}
  html[data-showcase-ui="glass"] #heroLayer .hero-editorial h1 {text-shadow:0 2px 3px #000}
}
/* Three equal ways into the space, over the existing opening image. */
html[data-showcase-ui="glass"] #heroLayer .home-doors{display:flex;justify-content:center;width:min(700px,100%);gap:12px;margin-top:36px}
html[data-showcase-ui="glass"] #heroLayer .home-door{flex:1 1 0;width:auto;min-width:0;max-width:none;height:56px;padding:0 20px;border-radius:999px;gap:16px;justify-content:space-between;background:var(--gc-surface);border:1px solid var(--gc-edge);color:var(--ink);backdrop-filter:var(--gc-blur)}
html[data-showcase-ui="glass"] #heroLayer .home-door strong{font:500 14px var(--sans)}
html[data-showcase-ui="glass"] #heroLayer .home-door-arrow{width:22px;height:22px}
#heroLayer .ch-actions{display:none}
/* Concierge reuses the persistent form/session/guide frame, without a second menu. */
#conciergePage{display:block;max-width:620px;left:16px;right:16px;--cq-top:calc(var(--header-h,90px) + 32px);height:min(580px,calc(100% - var(--cq-top) - var(--cq-bottom)))}
#conciergePage .cq-sidebar{display:none}
#conciergePage #guide .g-panel{border-radius:28px;background:rgba(16,22,27,.83);box-shadow:var(--gc-shadow);border:1px solid var(--gc-edge)}
#conciergePage #guide .g-head{height:auto;min-height:110px;justify-content:flex-start;text-align:left;padding:22px 26px;gap:16px}
#conciergePage #guide .g-head .g-id{flex:1}
#conciergePage #guide .g-head b{font-size:28px}
#conciergePage #conciergeClose{display:grid;place-items:center;width:40px;min-width:40px;height:40px;border:1px solid var(--gc-edge);border-radius:50%;position:static;margin:0}
#conciergePage #conciergeBody{padding:0 26px 20px}
#conciergePage .cq-options{display:flex;flex-direction:column;min-height:0;gap:0;justify-content:center}
#conciergePage .cq-options .g-path{display:grid;grid-template-columns:minmax(0,1fr) 32px;min-height:86px;padding:17px 0;text-align:left;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
#conciergePage .cq-options .g-path:hover{background:none;border-color:var(--accent)}
#conciergePage .cq-options .cq-icon{display:none}
#conciergePage .cq-options .gp-t b{font-size:20px;margin:0 0 6px}
#conciergePage .cq-options .gp-t small{font-size:13px}
#conciergePage .cq-options .gp-go{border:1px solid var(--gc-edge);border-radius:50%;padding:4px}
#conciergePage[data-view="together"]{max-width:850px}
#conciergePage[data-view="guided"]{height:min(420px,calc(100% - var(--cq-top) - var(--cq-bottom)))}
#conciergePage .cq-back{min-height:40px;margin:0 22px 10px;text-align:left}
/* Large photographs carry their own title and actions. The full viewer retains all detail. */
html[data-showcase-ui="glass"] #storyStrip{gap:22px;padding-block:10px;touch-action:pan-x;cursor:grab;scroll-snap-type:x mandatory}
html[data-showcase-ui="glass"] #storyStrip.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
html[data-showcase-ui="glass"] #storyStrip .story-card{width:var(--gallery-width,80vw);max-width:none;height:var(--gallery-height,100%);max-height:none;aspect-ratio:auto}
.story-card.story-image{cursor:default;border:1px solid var(--gc-edge);isolation:isolate}
.story-card.story-image::after{display:none}
.story-image .story-photo{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;border-radius:inherit;padding:0;background:var(--black) center/cover no-repeat;color:var(--ink);cursor:pointer;font:24px var(--sans)}
.story-image.plan .story-photo{background-size:contain}
.story-photo.playing video{opacity:1}
.story-image-overlay{position:absolute;inset:auto 0 0;padding:80px clamp(20px,3vw,44px) 24px;color:#fff;text-align:center;pointer-events:none;background:linear-gradient(transparent,rgba(4,10,15,.76) 45%,rgba(4,10,15,.9));}
.story-image-copy{max-width:62ch;margin:0 auto;text-shadow:0 1px 5px #0008}
.story-image-copy small{font:10px/1.5 var(--mono);letter-spacing:.12em;color:var(--accent)}
.story-image-copy h3{font:400 clamp(24px,3vw,42px)/1.12 var(--sans);letter-spacing:-.025em;margin:8px 0}
.story-image-copy p{font:14px/1.55 var(--sans);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.story-image-tools{display:flex;justify-content:center;gap:8px;margin-top:14px;pointer-events:auto}
.story-image-tools button,.story-plan-link{min-height:44px;border:1px solid transparent;background:none;color:inherit;font:13px var(--sans);cursor:pointer;padding:8px 14px;border-radius:99px}
.story-image-tools button:hover,.story-plan-link:hover{background:rgba(255,255,255,.14);border-color:var(--gc-edge)}
.story-image-tools [aria-pressed="true"]{color:var(--accent)}
.story-image-tools [data-card-details]{border-color:var(--gc-edge);background:rgba(255,255,255,.09)}
.story-card-status{font:12px/1.4 var(--sans);margin:6px 0 0}.story-card-status:empty{display:none}
.story-card-link{pointer-events:auto;font:12px var(--sans)}.story-card-link input{width:min(100%,400px);color:var(--ink);background:var(--black);border:1px solid var(--line);padding:6px;margin-left:8px}
.story-toolbar-end{display:flex;align-items:center;gap:12px;margin-left:auto}
.story-plan-link{white-space:nowrap;font-size:12px;color:var(--ink)}.story-plan-link span{margin-left:5px;font:10px var(--mono)}
.story-image :focus-visible,.story-plan-link:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.story-page[data-page="Explore"] .story-home{display:none}
html[data-showcase-ui="glass"] #navTabs .tab span{white-space:nowrap}
#conciergePage #gPaths:empty{display:none}
#conciergePage #gPaths .g-path{position:relative;display:flex;transform:none;min-height:64px;flex-shrink:0}
#conciergePage .cq-options .g-path:disabled{opacity:.5;cursor:default}
#conciergePage .cq-faq{border-bottom:1px solid var(--line);padding:16px 0;text-align:left}
#conciergePage .cq-faq summary{cursor:pointer;min-height:28px;font:500 16px/1.5 var(--sans);color:var(--ink)}
#conciergePage .cq-faq p{font:14px/1.65 var(--sans);color:var(--ink-dim);margin:12px 0 4px}
#conciergePage .cq-help-actions{display:flex;flex-wrap:wrap;gap:8px;padding-top:20px}
#conciergePage .cq-help-actions button{min-height:44px;border-radius:99px}
@media(max-width:760px){
 html[data-showcase-ui="glass"] #heroLayer .home-doors{flex-direction:column;width:min(300px,100%);gap:8px;margin-top:24px}
 html[data-showcase-ui="glass"] #heroLayer .home-door{flex:none;width:100%;height:48px;padding-inline:20px}
 #conciergePage{--cq-top:calc(var(--header-h,76px) + 12px);--cq-bottom:calc(var(--hud-h,112px) + 38px);height:calc(100% - var(--cq-top) - var(--cq-bottom))}
 #conciergePage #guide .g-head{padding:16px;min-height:88px;gap:10px}#conciergePage #guide .g-head b{font-size:22px}
 #conciergePage #conciergeBody{padding:0 18px 14px}#conciergePage .cq-options .g-path{min-height:84px;padding:14px 0}#conciergePage .cq-options .gp-t b{font-size:17px}#conciergePage .cq-options .gp-t small{font-size:12px}
 html[data-showcase-ui="glass"] .story-toolbar{flex-wrap:wrap}.story-toolbar-end{width:100%;justify-content:space-between;margin:0;gap:6px}
 .story-page[data-page="Explore"] .story-header{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;margin:0}
 .story-image-overlay{padding:60px 16px 12px}.story-image-copy h3{font-size:26px}.story-image-copy p{font-size:12px;line-height:1.5}
 .story-image-tools{gap:2px;margin-top:8px}.story-image-tools button{font-size:12px;padding:8px 12px}
 html[data-showcase-ui="glass"] #hud #navTabs{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(0,1fr);gap:0}
 html[data-showcase-ui="glass"] #hud #navTabs .tab{font-size:8px;height:50px;padding-inline:2px;letter-spacing:0;min-width:0}
 html[data-showcase-ui="glass"] #hud #hudCtl{padding:0}
}
@media(prefers-reduced-motion:reduce){html[data-showcase-ui="glass"] #storyStrip .story-card{transition:none}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){#conciergePage #guide .g-panel{background:#10161b}.story-image-overlay{background:rgba(4,10,15,.94)}}
/* The fixed stage is not a scroll container; only the gallery moves. */
body.on-story-page #viewport{overflow:clip}

/* The measured brand header keeps Explore comfortably below the logo. */
html[data-showcase-ui="glass"] body.on-content-browser #viewport #console.solo:has(.story-page[data-page="Explore"]){top:calc(var(--sales-header-h,110px) + clamp(24px,4vh,52px))}
@media(max-width:760px){html[data-showcase-ui="glass"] body.on-content-browser #viewport #console.solo:has(.story-page[data-page="Explore"]){top:calc(var(--sales-header-h,76px) + 20px)}}

/* ═══ TITLE MOTION (2026-09-25) — the words of the name arrive one after another,
   rising through a soft blur with a little perspective, the way the commissioned
   opening's lines do; then the title breathes very slowly and its glow drifts
   toward champagne and back. The intro and the doors follow in turn. ═══ */
html[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial h1{animation:home-title-breathe 14s ease-in-out 2.4s infinite alternate;perspective:900px}
html[data-showcase-ui="glass"] #heroLayer .hero-editorial h1 .ht-w{display:inline-block;transform-origin:50% 100%;opacity:0;
  animation:home-word-rise 1.05s cubic-bezier(.16,1,.3,1) calc(.2s + var(--i,0) * .13s) both}
@keyframes home-word-rise{from{opacity:0;transform:translateY(.45em) rotateX(28deg);filter:blur(8px)}60%{filter:blur(0)}to{opacity:1;transform:none;filter:none}}
@keyframes home-title-breathe{from{transform:scale(1);text-shadow:0 4px 40px #0004}to{transform:scale(1.012);text-shadow:0 6px 48px rgba(var(--accent-rgb),.22)}}
html[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial .ht-sub{opacity:0;animation:home-title-arrive 1s cubic-bezier(.16,1,.3,1) 1.05s both}
html[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial .home-doors{opacity:0;animation:home-title-arrive 1s cubic-bezier(.16,1,.3,1) 1.35s both}
@media (prefers-reduced-motion:reduce){
  html[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial h1,html[data-showcase-ui="glass"] #heroLayer .hero-editorial h1 .ht-w,html[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial .ht-sub,html[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial .home-doors{animation:none;opacity:1;transform:none;filter:none}
}

/* ═══ SERIF TITLE (2026-09-25, Michael): the standard opening wears the commissioned
   one's face — Bodoni, and everything after the first line break in italic. ═══ */
html[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial h1{font-family:'Bodoni 72',Didot,'Cormorant Garamond','Times New Roman',serif;font-weight:400;font-size:clamp(42px,min(7vw,8.5vh),112px);line-height:.94;letter-spacing:-.045em}   /* was clamp(60px,min(10.5vw,12vh),170px) — Michael 10-11: 'too big' */
/* the adapter's splitHeadline puts the second half after a <br> inside <b class="chrome-txt">,
   which letterizeHero renames .ht-was-chrome — that is the italic line */
html[data-showcase-ui="glass"] #heroLayer .hero-editorial h1 .ht-was-chrome{display:block;font-style:italic;font-size:.83em;letter-spacing:-.052em;margin-top:.06em;padding-right:.06em}
@media (max-width:760px){html[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial h1{font-size:clamp(36px,9.6vw,60px);line-height:.96;letter-spacing:-.04em}}

/* ═══ MULTI-LOCATION HOME (2026-09-25) — one glass card per location ═══ */
html[data-showcase-ui="glass"] #heroLayer .home-locs{display:flex;justify-content:center;gap:12px;width:min(1000px,100%);margin-top:clamp(18px,3vh,32px);margin-bottom:12px;opacity:0;animation:home-title-arrive 1s cubic-bezier(.16,1,.3,1) 1.35s both}
html[data-showcase-ui="glass"] #heroLayer .home-loc{position:relative;flex:1 1 0;max-width:320px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid var(--gc-edge);background:rgba(10,13,16,.5);color:#fff;text-decoration:none;pointer-events:auto;isolation:isolate;
  box-shadow:inset 0 1px rgba(255,255,255,.1),0 14px 40px rgba(0,0,0,.35);transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .35s}
html[data-showcase-ui="glass"] #heroLayer a.home-loc:hover,html[data-showcase-ui="glass"] #heroLayer a.home-loc:focus-visible{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 22px 50px rgba(0,0,0,.45);outline:none}
html[data-showcase-ui="glass"] #heroLayer .home-loc .hl-img{position:absolute;inset:0;background:#0b0d0f center/cover no-repeat;transition:transform 1.2s ease}
html[data-showcase-ui="glass"] #heroLayer a.home-loc:hover .hl-img{transform:scale(1.05)}
html[data-showcase-ui="glass"] #heroLayer .home-loc::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,8,12,.85),rgba(4,8,12,.25) 55%,rgba(4,8,12,0))}
html[data-showcase-ui="glass"] #heroLayer .home-loc .hl-words{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;text-shadow:0 1px 3px rgba(0,0,0,.8)}
html[data-showcase-ui="glass"] #heroLayer .home-loc small{font:400 9px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
html[data-showcase-ui="glass"] #heroLayer .home-loc b{font:400 clamp(20px,2vw,28px)/1.05 'Bodoni 72',Didot,'Cormorant Garamond',Georgia,serif;letter-spacing:-.02em}
html[data-showcase-ui="glass"] #heroLayer .home-loc i{font:400 9px var(--mono);letter-spacing:.2em;text-transform:uppercase;font-style:normal;color:#ffffffc8;margin-top:4px}
html[data-showcase-ui="glass"] #heroLayer .home-loc.here{border-color:rgba(var(--accent-rgb),.7)}
html[data-showcase-ui="glass"] #heroLayer .home-loc.here i{color:var(--accent)}
@media (max-width:760px){html[data-showcase-ui="glass"] #heroLayer .home-locs{flex-direction:column;align-items:stretch;width:min(360px,100%);gap:8px}html[data-showcase-ui="glass"] #heroLayer .home-loc{max-width:none;aspect-ratio:16/7}}
@media (prefers-reduced-motion:reduce){html[data-showcase-ui="glass"] #heroLayer .home-locs{animation:none;opacity:1}}
/* PHONE (gate 6, 2026-09-29): three stacked 48px doors do not fit a short phone's hero box
   (iPhone Safari leaves ~250px, the SE ~150px) — Live tour and Guided tour were clipped out
   of reach. Short phones get the same three doors as one row; taller phones keep the stack. */
@media (max-width:899px) and (max-height:780px){
  html[data-showcase-ui="glass"] #heroLayer .home-doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:min(100%,420px);max-width:none}
  html[data-showcase-ui="glass"] #heroLayer .home-doors .home-door{min-height:46px;height:auto;padding:6px 8px;justify-content:center;text-align:center}
  html[data-showcase-ui="glass"] #heroLayer .home-doors .home-door strong{font-size:12px;line-height:1.2;white-space:normal}
  html[data-showcase-ui="glass"] #heroLayer .home-doors .home-door svg{display:none}
}

/* ═══ TITLE MOTION (2026-10-11) — the builder's Home → Opening → Title motion, per Showcase. 'rise' = the word rise above
   (the default); 'cascade' = every letter in turn through a soft blur (letterizeHero staggers them); 'glide' = the line
   fades up while its tracking settles; 'none' = static. The slow breathe stays on all but 'none'. ═══ */
html[data-showcase-ui="glass"] #heroLayer .hero-editorial h1:is([data-motion="cascade"],[data-motion="glide"],[data-motion="none"]) .ht-w{opacity:1;animation:none;transform:none;filter:none}
html[data-showcase-ui="glass"] #heroLayer .hero-editorial h1[data-motion="cascade"] .ht-l{display:inline-block;opacity:0;animation:home-letter-in .85s cubic-bezier(.16,1,.3,1) both}
@keyframes home-letter-in{from{opacity:0;transform:translateY(.42em) scale(.96);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
html[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial h1[data-motion="glide"]{animation:home-glide 1.7s cubic-bezier(.16,1,.3,1) .15s both,home-title-breathe 14s ease-in-out 2.4s infinite alternate}
@keyframes home-glide{from{opacity:0;letter-spacing:.06em;filter:blur(6px)}to{opacity:1;filter:none}}
html[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial h1[data-motion="none"]{animation:none}
@media (prefers-reduced-motion:reduce){html[data-showcase-ui="glass"] #heroLayer .hero-editorial h1 :is(.ht-w,.ht-l){opacity:1!important;animation:none!important;transform:none!important;filter:none!important}html[data-showcase-ui="glass"] #heroLayer .hero.hero-editorial h1{animation:none!important}}