/* Refinements to the supplied WREN_Virtual_Tour.html functional base. */
:root{--ink:#1B3632;--muted:#5D6A64;--paper:#F7F8F5;--line:rgba(27,54,50,.16);--gold:#B59966;--soft:#EDEEE9;--serif:"Newsreader","Iowan Old Style",Georgia,serif;--sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{font-family:var(--sans);font-size:16px;line-height:1.6}h1,h2{font-family:var(--serif)}[hidden]{display:none!important}button{touch-action:manipulation}button,a,input{font-family:var(--sans)}:where(a,button,input,[tabindex]):focus-visible{outline:3px solid #8E7444;outline-offset:4px}.skip{position:absolute;left:-9999px;top:10px;background:var(--ink);color:#fff;padding:12px 18px;z-index:10}.skip:focus{left:16px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{width:min(1320px,100%);padding-inline:clamp(20px,5vw,64px)}header{padding:25px 0;gap:20px}.brand-link{display:flex;align-items:center;gap:18px}.brand{width:115px;height:auto}.brand-location{font-family:var(--serif);font-size:16px;font-style:italic;border-left:1px solid var(--line);padding-left:18px;color:var(--muted)}.back-link{font-size:13px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;padding:10px 0;min-height:44px}.back-link:hover{text-decoration:underline;text-underline-offset:4px}
.intro{padding:48px 0 28px;align-items:center}.eyebrow{font-family:var(--serif);font-style:italic;text-transform:none;font-size:16px;color:#8E7444;letter-spacing:0;margin-bottom:14px}h1{font-size:clamp(38px,4.8vw,66px);line-height:1.05;margin-bottom:16px;letter-spacing:-.015em}.intro p:last-child{font-size:16px;line-height:1.6;max-width:56ch}.intro-actions .btn{font-size:13px}.btn{border-radius:2px;padding:12px 18px;min-height:44px;font-size:13px;font-weight:500;letter-spacing:.01em}.btn.primary{background:var(--gold);border-color:var(--gold);color:#16201C}.btn.primary:hover{background:#C8AC79;border-color:#C8AC79}.disclosure{border-left:2px solid var(--gold);background:var(--soft);padding:13px 17px;color:var(--ink);font-size:12px;line-height:1.6;margin:20px 0 0}
.room-explorer{border:1px solid var(--line);background:#fff;display:grid;grid-template-columns:235px minmax(0,1fr)}.room-rail{padding:22px 15px;border-right:1px solid var(--line);min-width:0}.rail-title{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 10px 14px}.room-nav{display:flex;flex-direction:column;gap:3px}.room-button{display:flex;align-items:center;gap:10px;width:100%;border:1px solid transparent;background:transparent;text-align:left;padding:10px;min-height:44px;font-size:12px;border-radius:2px;line-height:1.4}.room-button .num{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}.room-button:hover{background:var(--paper);border-color:var(--line)}.room-button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.room-button[aria-pressed=true] .num{color:var(--gold)}.room-button .selected-arrow{margin-left:auto;color:var(--gold)}.room-button[aria-pressed=false] .selected-arrow{visibility:hidden}
.room-main{min-width:0;background:var(--paper)}.room-stage{position:relative;background:#12241F;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden}.room-stage img{width:100%;height:100%;object-fit:contain}.stage-enlarge{position:absolute;right:14px;top:14px;border:1px solid #ffffff70;background:#12241Fe8;color:#fff;padding:8px 12px;min-height:44px;border-radius:2px;font-size:11px;display:flex;align-items:center;gap:7px}.stage-enlarge:hover{background:var(--ink)}.stage-enlarge:focus-visible{outline-color:var(--gold)}.stage-enlarge svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4}.room-info{padding:20px 24px;background:#fff;min-height:117px}.room-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}.room-heading h2{font-size:30px;line-height:1.2}.room-count{font-size:11px;color:var(--muted);white-space:nowrap}.room-floor{margin:5px 0 0;font-size:11px;color:var(--muted)}.room-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:17px}.room-stepper{display:flex;gap:8px}.room-stepper .btn{padding:9px 12px;font-size:11px}.video-room-link{font-size:12px;border:0;border-bottom:1px solid var(--gold);padding:8px 0;min-height:44px;background:transparent;display:inline-flex;gap:7px;align-items:center}.video-room-link:hover{color:#8E7444}.alternate-views{display:flex;flex-wrap:wrap;gap:8px;background:#fff;padding:0 24px 20px}.view-button{border:1px solid var(--line);background:var(--paper);font-size:11px;padding:8px 12px;min-height:44px;border-radius:2px}.view-button[aria-pressed=true]{border-color:var(--ink);background:var(--soft)}
.video-section{padding-top:52px}.video-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:20px}.video-heading h2{font-size:36px}.video-heading p{margin:0;font-size:12px;color:var(--muted)}.viewer{border-radius:2px;box-shadow:none}.play-cover{inset:0 0 44px;pointer-events:auto}.play-cover span{transition:transform .2s}.viewer-meta{padding:16px 0}.specs{font-size:12px}.fullscreen{min-height:44px;font-size:12px}.chapter{border-radius:2px;padding:15px;min-height:80px}.chapter small{font-size:10px}.chapter strong{font-size:13px}.chapter[aria-current=true]{background:var(--soft);border-color:var(--ink)}.caption{font-size:12px}.section-head{padding-top:48px}h2{font-size:36px}.filter{border-radius:2px;min-height:44px;font-size:12px}.gallery{gap:24px 18px}.photo button{border-radius:2px;aspect-ratio:4/3}.photo img{object-fit:contain;background:#12241F}.photo button:hover img{transform:none}.photo figcaption{font-size:13px}.photo figcaption span{font-size:10px}.plan-card{border-radius:2px;padding:26px}.plan-card h2{font-size:32px}.plan-card p{font-size:13px}.footer{padding:25px 0 35px;margin-top:44px;font-size:11px;letter-spacing:.03em}.footer a{text-decoration:underline;text-underline-offset:4px}
dialog{border-radius:2px;max-height:94dvh;overscroll-behavior:contain}.modal-top{position:sticky;top:0;background:var(--paper);z-index:5;padding:16px 20px}.modal-top h2{font-family:var(--serif);font-size:23px}.close{height:44px;width:44px;border-radius:2px;flex:0 0 auto}.plan-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--paper)}.plan-tools .btn{padding:8px 12px;font-size:12px}.plan-tools label{font-size:12px;margin-left:auto}.plan-tools input{width:120px;max-width:100%;accent-color:var(--ink)}.plan-tools output{font-size:12px;min-width:38px}.plan-scroll{overflow:auto;max-width:100%;max-height:65dvh;background:#fff;touch-action:pan-x pan-y pinch-zoom;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.plan-scroll:focus-visible{outline-offset:-4px}.plan-surface{position:relative;width:100%;min-width:0;background:#fff}.plan-surface img{width:100%;max-width:none;height:auto;display:block}.hotspot{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;padding:0;border:2px solid #fff;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;box-shadow:0 1px 5px #0004;display:grid;place-items:center;z-index:2}.hotspot:hover,.hotspot:focus-visible{background:#8E7444;z-index:4}.hotspot-label{position:absolute;left:50%;top:100%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:5px 8px;font-size:11px;white-space:nowrap;display:none}.hotspot:hover .hotspot-label,.hotspot:focus-visible .hotspot-label{display:block}.plan-note{padding:16px 20px;text-align:left;font-size:12px}.plan-legend{display:flex;flex-wrap:wrap;gap:6px 16px;padding:0 20px 18px;list-style:none;margin:0;font-size:11px;color:var(--muted)}.plan-legend b{color:var(--ink);font-variant-numeric:tabular-nums;margin-right:5px}.inline-plan{width:100%;height:100%;background:white;display:flex;align-items:center}.inline-plan .plan-scroll{width:100%;max-height:100%;height:100%;display:flex;align-items:center}.inline-plan .plan-surface{min-width:850px;width:100%;flex-shrink:0}.inline-plan .hotspot{width:36px;height:36px;font-size:10px}.room-stage.is-plan{background:#fff}.plan-open-inline{position:absolute;right:14px;top:14px;z-index:3;background:var(--ink);color:#fff}.photo-modal{background:var(--paper);color:var(--ink)}.photo-modal .modal-top{background:var(--paper);border-color:var(--line)}.photo-modal .close{border-color:var(--line);color:var(--ink)}.photo-nav{color:var(--muted);gap:10px}.photo-nav button{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:2px;min-height:44px}.photo-stage img{width:auto;max-width:100%;max-height:65dvh}.modal-disclosure{padding:0 20px 16px;margin:0;font-size:11px;color:var(--muted)}.error.visible{display:block}
@media(min-width:1600px){.wrap{width:min(1320px,100%)}}
@media(max-width:1024px){.intro{align-items:flex-start;flex-direction:column;gap:20px}.room-explorer{grid-template-columns:205px minmax(0,1fr)}.room-rail{padding:17px 10px}.room-info{padding:18px}.room-actions{flex-wrap:wrap}.alternate-views{padding-inline:18px}}
@media(max-width:767px){.wrap{width:100%;padding-inline:20px}header{padding:20px 0}.brand{width:95px}.brand-location{display:none}.intro{padding:32px 0 23px}.intro p:last-child{font-size:15px}.intro-actions{width:auto}.intro-actions .btn{font-size:12px}.room-explorer{display:flex;flex-direction:column}.room-rail{padding:15px;border-right:0;border-bottom:1px solid var(--line)}.rail-title{margin:0 0 10px}.room-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.room-button{padding:8px;gap:7px;font-size:11px;min-height:45px;border-color:var(--line)}.room-button .num{font-size:9px}.selected-arrow{display:none}.room-stage{aspect-ratio:4/3}.room-heading h2{font-size:28px}.room-info{padding:16px}.room-actions{gap:8px;margin-top:12px}.alternate-views{padding:0 16px 16px}.disclosure{font-size:11px;margin-top:15px;padding:12px 14px}.video-section{padding-top:35px}.video-heading{align-items:flex-start;flex-direction:column;gap:8px}.video-heading h2,h2{font-size:30px}.video-heading p{font-size:12px}.chapters{grid-template-columns:repeat(2,minmax(0,1fr))}.chapter{padding:12px;min-height:76px}.chapter strong{font-size:12px}.chapter small{font-size:9px}.specs{font-size:11px;gap:16px}.fullscreen{font-size:11px}.section-head{padding-top:35px;gap:16px}.filters{gap:6px}.filter{font-size:11px;padding:8px 10px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}.photo figcaption{display:block;font-size:11px;line-height:1.5}.photo figcaption span{display:block;font-size:10px}.plan-card{padding:20px;margin-top:30px}.plan-card h2{font-size:30px}.plan-card .btn{width:100%}.footer{flex-direction:column;gap:8px;font-size:10px}.modal-top{padding:12px 14px}.modal-top h2{font-size:20px}.plan-tools{padding:10px 14px;gap:7px}.plan-tools label{margin-left:0}.plan-tools input{width:85px}.plan-tools .btn{font-size:11px;padding:8px}.plan-scroll{max-height:57dvh}.plan-note{padding:14px;font-size:11px}.plan-legend{padding:0 14px 16px;font-size:11px;gap:8px 14px}.photo-nav{padding:12px 14px;font-size:11px}.photo-nav button{font-size:11px;padding:9px 12px}.inline-plan .plan-surface{min-width:850px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.play-cover:hover span{transform:none}}

/* Original PDF plan components: HTML headings preserve the external source labels. */
.room-explorer{margin-top:22px}.plan-surface{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:16px}.plan-panel{min-width:0;align-self:start}.plan-panel h3{font-family:var(--sans);font-size:11px;line-height:1.5;margin:0 0 10px;color:var(--ink);font-weight:500}.plan-map{position:relative}.plan-map img{width:100%;height:auto}.inline-plan .plan-surface{gap:14px;padding:18px}.inline-plan .plan-panel h3{font-size:10px}.inline-plan .plan-scroll{align-items:flex-start}.plan-tools input{flex-shrink:1}.specs{flex-wrap:wrap}.photo-nav button:focus-visible{outline-color:#8E7444}
@media(max-width:540px){.viewer-meta{gap:12px}.specs{gap:5px 12px;max-width:68%}.specs span+span::before{display:none}.fullscreen{flex-shrink:0}.plan-surface{gap:12px;padding:12px}.plan-panel h3{font-size:10px}.room-stepper .btn{padding:9px;font-size:10.5px}}

.intro-actions .btn{white-space:nowrap;flex:0 0 auto}

/* ---------------------------------------------------------------------------
   Room navigator: still-image views with directional links between them.
   The frame carries the mockup's own 1672x941 ratio and is centred in the
   stage, so a hotspot's percentage lands on the same point of the picture at
   every screen size, whatever letterboxing the stage adds. These are flat
   stills, not panoramas, so nothing here rotates, warps or stretches.
   --------------------------------------------------------------------------- */
.room-frame{position:relative;width:100%;aspect-ratio:1672/941;max-width:100%;max-height:100%;margin:auto;flex:0 1 auto}
.room-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.room-fade{opacity:0;transition:opacity .45s ease;pointer-events:none;z-index:1}
.room-spots{position:absolute;inset:0;z-index:2;pointer-events:none}

.nav-spot{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;
  display:grid;place-items:center;border:0;padding:0;background:transparent;pointer-events:auto;z-index:2}
.nav-spot:hover,.nav-spot:focus{z-index:4}
.spot-dot{width:40px;height:40px;border-radius:50%;position:relative;
  background:rgba(247,248,245,.94);color:var(--ink);display:grid;place-items:center;
  box-shadow:0 0 0 1.5px rgba(27,54,50,.3),0 3px 13px rgba(11,24,20,.42);
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease}
.spot-dot::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1.5px solid rgba(247,248,245,.85);opacity:0;animation:spot-pulse 2.8s ease-out infinite}
@keyframes spot-pulse{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.55);opacity:0}100%{opacity:0}}
.nav-spot svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.nav-spot[data-dir=back] svg{transform:rotate(180deg)}
.nav-spot[data-dir=left] svg{transform:rotate(-90deg)}
.nav-spot[data-dir=right] svg{transform:rotate(90deg)}
.nav-spot:hover .spot-dot,.nav-spot:focus .spot-dot{background:var(--gold);color:#16201C;transform:scale(1.08);
  box-shadow:0 0 0 2px rgba(247,248,245,.95),0 4px 15px rgba(11,24,20,.5)}
.nav-spot:hover .spot-dot::after,.nav-spot:focus .spot-dot::after{animation:none;opacity:0}
.nav-spot:focus-visible{outline:3px solid #8E7444;outline-offset:4px;border-radius:50%}
/* The label is taken out of flow so the dot alone anchors the percentage: the
   marker sits on the doorway it names, whatever the label's length. */
.spot-label{position:absolute;top:50%;left:calc(100% + 7px);transform:translateY(-50%) translateX(-5px);
  background:var(--ink);color:var(--paper);padding:7px 11px;border-radius:2px;
  font-size:11.5px;line-height:1.3;letter-spacing:.01em;white-space:nowrap;pointer-events:none;
  box-shadow:0 2px 10px rgba(11,24,20,.35);opacity:0;transition:opacity .2s ease,transform .2s ease}
.nav-spot[data-side=left] .spot-label{left:auto;right:calc(100% + 7px);transform:translateY(-50%) translateX(5px)}
.nav-spot:hover .spot-label,.nav-spot:focus .spot-label{opacity:1;transform:translateY(-50%)}
.spot-short{display:none}

/* Touch: no hover to rely on, so every destination is named up front and a single
   tap travels. The shorter name keeps the pill off the room behind it. */
@media(hover:none){
  .spot-label{opacity:1;transform:translateY(-50%)}
}
@media(max-width:767px){
  .nav-spot{width:40px;height:40px}
  .spot-dot{width:34px;height:34px}
  .nav-spot svg{width:14px;height:14px}
  .spot-label{font-size:10px;padding:4px 7px;left:calc(100% + 5px)}
  .nav-spot[data-side=left] .spot-label{right:calc(100% + 5px)}
  .spot-long{display:none}.spot-short{display:inline}
}
}