:root {
  color-scheme:dark;
  --bg:#080e14;
  --navy:#111923;
  --text:#f5efe6;
  --muted:#aaaeb3;
  --gold:#d4ae7b;
  --blue:#5da8bc;
  --stroke:rgba(234,236,237,.16)
}

* {
  box-sizing:border-box
}
html,body {
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text)
}
button,input,textarea,select {
  font:inherit
}
button {
  cursor:pointer
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:4px
}
a {
  color:inherit
}
#app,#scene {
  position:fixed;
  inset:0
}
#scene canvas {
  display:block;
  width:100%;
  height:100%;
  outline:none
}
.ambient-vignette {
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 48% 44%,transparent 23%,rgba(7,12,19,.14) 65%,rgba(4,7,11,.45) 100%),linear-gradient(90deg,rgba(6,9,13,.57) 0%,rgba(6,9,13,.13) 36%,transparent 63%);
  z-index:1
}
.grain {
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.07;
  background-image:url('data:image/svg+xml,%3Csvg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity=".22"/%3E%3C/svg%3E')
}

.masthead {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100px;
  z-index:9;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 4.6vw;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(7,12,17,.52),transparent)
}
.brand {
  display:flex;
  align-items:center;
  gap:14px;
  border:0;
  background:transparent;
  color:white;
  text-align:left;
  padding:0
}
.brand-mark {
  position:relative;
  width:37px;
  height:37px;
  display:grid;
  place-items:center;
  border:1px solid rgba(238,226,205,.58);
  transform:rotate(45deg);
  border-radius:5px
}
.brand-mark span {
  position:absolute;
  background:#d5b184;
  height:1px;
  width:26px
}
.brand-mark span:nth-child(2) {
  transform:rotate(45deg)
}
.brand-mark span:nth-child(3) {
  transform:rotate(90deg)
}
.brand-mark span:nth-child(4) {
  transform:rotate(135deg)
}
.brand-copy {
  display:flex;
  flex-direction:column;
  gap:3px
}
.brand-copy strong {
  font-size:20px;
  letter-spacing:-1px;
  font-weight:600
}
.brand-copy strong span {
  color:var(--gold)
}
.brand-copy small {
  font-size:9px;
  letter-spacing:2.7px;
  color:#e9e1d5
}
.masthead-right {
  display:flex;
  gap:15px;
  align-items:center
}
.live-dot {
  width:7px;
  height:7px;
  border-radius:100%;
  background:#9dccb9;
  box-shadow:0 0 12px #9dccb9
}
.edition {
  font-size:10px;
  letter-spacing:2px;
  font-weight:650
}
.masthead-separator {
  height:26px;
  width:1px;
  background:var(--stroke);
  margin:0 12px
}
.icon-btn {
  border:1px solid var(--stroke);
  width:38px;
  height:38px;
  border-radius:100%;
  background:rgba(17,24,32,.4);
  color:#efe6da;
  display:grid;
  place-items:center
}
.icon-btn svg {
  width:18px;
  height:18px
}

.rail {
  position:fixed;
  z-index:8;
  left:4.8vw;
  top:34%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px
}
.rail-heading {
  font-size:10px;
  font-weight:650;
  letter-spacing:2.8px;
  color:#acb1b4;
  margin-bottom:13px
}
.rail-link {
  border:0;
  background:transparent;
  color:#a9b0b5;
  display:flex;
  align-items:center;
  gap:13px;
  padding:10px 0;
  font-size:13px;
  letter-spacing:.2px;
  transition:color .25s,transform .25s
}
.rail-link:hover,.rail-link.is-active {
  color:var(--text);
  transform:translateX(5px)
}
.rail-link.is-active .rail-index {
  color:var(--gold)
}
.rail-index {
  color:#68747f;
  font-size:10px;
  font-weight:650
}
.rail-rule {
  height:1px;
  width:100px;
  background:var(--stroke);
  margin:9px 0
}

.hero {
  position:fixed;
  z-index:4;
  left:18%;
  top:28%;
  width:min(640px,57vw);
  transition:opacity .65s,transform .65s;
  pointer-events:auto
}
.hero.is-hidden {
  opacity:0;
  transform:translateY(30px);
  pointer-events:none
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:13px;
  color:#e5d8c8;
  letter-spacing:2.4px;
  font-size:10px;
  font-weight:700
}
.tiny-line {
  width:30px;
  height:1px;
  background:var(--gold)
}
h1,h2,p {
  margin-top:0
}
.hero h1 {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-2.8px;
  line-height:1.02;
  font-size:clamp(42px,5.1vw,86px);
  margin:22px 0 24px;
  text-shadow:0 3px 15px rgba(0,0,0,.35)
}
.hero h1 em,.quote-card h2 em {
  font-weight:400;
  color:#ddb78b
}
.period {
  color:var(--gold)
}
.hero p {
  font-size:15px;
  line-height:1.9;
  color:#d9dcdb;
  width:min(430px,100%);
  text-shadow:0 1px 8px #0b0e13
}
.hero-actions,.panel-actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:28px
}
.primary-btn {
  border:1px solid #d9b78a;
  background:#d3ad7a;
  color:#181c1e;
  padding:16px 23px;
  letter-spacing:.2px;
  font-size:12px;
  font-weight:750;
  border-radius:2px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  transition:background .2s,transform .2s
}
.primary-btn:hover {
  background:#e7cba6;
  transform:translateY(-2px)
}
.primary-btn span {
  font-size:17px;
  font-weight:400
}
.text-btn {
  border:0;
  color:#f1e5d5;
  background:none;
  font-size:12px;
  font-weight:650;
  padding:12px 2px
}
.text-btn span {
  margin-left:9px;
  color:var(--gold)
}
.hero-footnote {
  font-size:9px;
  letter-spacing:1.8px;
  color:#b7b8b8;
  margin-top:75px
}
.footnote-mark {
  color:var(--gold);
  font-size:18px;
  vertical-align:middle;
  margin-right:9px
}

.scene-label {
  position:fixed;
  z-index:2;
  left:68%;
  top:29%;
  color:rgba(233,226,214,.8);
  font-size:10px;
  letter-spacing:2px;
  pointer-events:none;
  opacity:.0;
  transition:opacity .6s
}
.scene-label-b {
  left:83%;
  top:42%
}
body.is-exploring .scene-label {
  opacity:.7
}

.hud {
  z-index:8;
  position:fixed;
  left:4.6vw;
  right:4.6vw;
  bottom:0;
  height:65px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid rgba(255,255,255,.13);
  font-size:9px;
  letter-spacing:1.3px;
  color:#c4c5c4
}
.hud-item,.hud-right {
  display:flex;
  align-items:center;
  gap:13px
}
.hud-item strong,.hud-right strong {
  display:block;
  color:#f7ebd8;
  font-size:9px;
  margin-top:5px;
  letter-spacing:1.4px
}
.hud-glyph {
  font-size:26px;
  color:#d6b184
}
.sun-icon {
  font-size:28px;
  color:#ddb588
}
.hud-center {
  color:#ccd1d2;
  font-size:10px;
  letter-spacing:1.1px
}
.interaction-icon {
  font-size:21px;
  margin-right:8px;
  color:var(--gold)
}
.hud-dot {
  padding:0 9px;
  color:var(--gold)
}
.hover-hint {
  position:fixed;
  z-index:15;
  pointer-events:none;
  opacity:0;
  transition:opacity .12s;
  transform:translate(20px,14px);
  font-size:11px;
  color:#1a2327;
  background:#e4c59d;
  padding:9px 12px;
  border-radius:3px;
  font-weight:700
}
.hover-hint.show {
  opacity:1
}

.detail-panel {
  position:fixed;
  top:100px;
  right:0;
  bottom:65px;
  width:min(440px,100vw);
  z-index:12;
  background:linear-gradient(150deg,rgba(17,24,31,.97),rgba(9,14,20,.98));
  border-left:1px solid rgba(207,172,128,.22);
  box-shadow:-20px 0 90px rgba(0,0,0,.35);
  padding:34px 36px 30px;
  overflow:auto;
  transform:translateX(102%);
  transition:transform .5s cubic-bezier(.2,.7,.1,1);
  scrollbar-color:#52606e transparent
}
.detail-panel.is-open {
  transform:translateX(0)
}
.panel-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#bda68a;
  font-size:10px;
  letter-spacing:2.2px;
  font-weight:750
}
.panel-close {
  background:transparent;
  border:1px solid var(--stroke);
  color:#e8e4df;
  width:36px;
  height:36px;
  border-radius:50%;
  font-size:23px;
  font-weight:300;
  line-height:1
}
.panel-portrait {
  height:142px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin:27px 0 24px;
  background:linear-gradient(135deg,#233441 0%,#354d5c 40%,#111f2d 100%);
  border:1px solid rgba(255,255,255,.09)
}
.panel-portrait:before,.panel-portrait:after {
  content:"";
  position:absolute;
  height:220px;
  width:220px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%
}
.panel-portrait:after {
  height:130px;
  width:130px
}
.panel-portrait>span:first-child {
  font-family:Georgia,serif;
  font-size:88px;
  line-height:1;
  color:#e7c59a;
  z-index:2
}
.panel-visual-glow {
  position:absolute;
  inset:auto 0 0;
  height:60px;
  background:linear-gradient(0deg,rgba(46,153,173,.3),transparent)
}
.detail-panel h2 {
  font:400 42px/1 Georgia,serif;
  letter-spacing:-.8px;
  margin:0 0 10px
}
.panel-subtitle {
  color:#d9b98e;
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase
}
.detail-panel p {
  color:#bac2c5;
  line-height:1.85;
  font-size:13px;
  margin:21px 0
}
.panel-divider {
  height:1px;
  background:var(--stroke);
  margin:22px 0
}
.detail-panel h3 {
  color:#d6ae7a;
  font-size:10px;
  letter-spacing:2px;
  margin:0 0 15px
}
.detail-panel ul {
  padding:0;
  list-style:none;
  margin:0
}
.detail-panel li {
  font-size:13px;
  color:#d8d9da;
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:12px 0;
  display:flex;
  align-items:center;
  gap:11px
}
.detail-panel li:before {
  content:"↗";
  color:#d9b583;
  font-size:13px
}
.panel-actions {
  gap:14px;
  flex-wrap:wrap;
  margin-top:30px
}
.panel-actions .primary-btn {
  padding:14px 18px;
  gap:12px
}
.panel-actions .text-btn {
  white-space:nowrap
}

.quote-modal {
  position:fixed;
  inset:0;
  z-index:20;
  background:rgba(2,7,11,.76);
  backdrop-filter:blur(12px);
  display:grid;
  place-items:center;
  padding:25px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s
}
.quote-modal.is-open {
  opacity:1;
  pointer-events:auto
}
.quote-card {
  width:min(540px,100%);
  max-height:94vh;
  overflow:auto;
  padding:34px 38px;
  background:#131e27;
  border:1px solid rgba(226,182,126,.35);
  box-shadow:0 35px 130px rgba(0,0,0,.65)
}
.quote-mark {
  display:block;
  font-size:35px;
  color:#d6b181;
  margin-top:10px
}
.quote-card h2 {
  font:400 48px/1.07 Georgia,serif;
  letter-spacing:-1px;
  margin:11px 0 14px
}
.quote-card p {
  font-size:12px;
  line-height:1.8;
  color:#b8c0c1
}
.quote-card form {
  display:flex;
  flex-direction:column;
  gap:9px;
  margin:24px 0 15px
}
.quote-card form label {
  font-size:9px;
  letter-spacing:1.5px;
  color:#d9bb94;
  font-weight:750;
  margin-top:9px
}
.quote-card input,.quote-card select,.quote-card textarea {
  background:#1b2a35;
  border:1px solid rgba(255,255,255,.13);
  border-radius:1px;
  color:#f2eee7;
  padding:13px 14px;
  font-size:13px;
  resize:vertical
}
.quote-card input::placeholder,.quote-card textarea::placeholder {
  color:#899ba4
}
.quote-card .primary-btn {
  margin-top:13px
}
.email-link {
  font-size:11px;
  color:#aab9bc;
  text-decoration:underline;
  text-underline-offset:4px
}

.loading-screen {
  position:fixed;
  inset:0;
  background:#0b1119;
  z-index:30;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:18px;
  transition:opacity .7s,visibility .7s
}
.loading-screen.is-done {
  opacity:0;
  visibility:hidden
}
.loading-mark {
  color:#d5b080;
  font-size:62px;
  animation:rotate 10s linear infinite
}
.loading-screen>span {
  font-size:13px;
  font-weight:700;
  letter-spacing:5px;
  color:#f1e9dd
}
.loading-screen small {
  font-size:9px;
  letter-spacing:2px;
  color:#9ba4ac
}
.loading-progress {
  height:2px;
  width:200px;
  background:#23303b;
  overflow:hidden
}
.loading-progress i {
  display:block;
  width:40%;
  height:100%;
  background:#d5b180;
  animation:progress 2.2s ease-in-out infinite
}
@keyframes rotate {
  to {
    transform:rotate(360deg)
  }

}
@keyframes progress {
  0% {
    transform:translateX(-120%)
  }
  100% {
    transform:translateX(360%)
  }

}
.error-notice {
  z-index:40;
  position:fixed;
  bottom:95px;
  left:25%;
  max-width:350px;
  background:#182731;
  border:1px solid #a77c58;
  padding:16px;
  font-size:12px;
  color:#e8e7e4
}
.error-notice p {
  margin:6px 0 0;
  line-height:1.5;
  color:#aab5ba
}

@media(max-width:1100px) {
  .hero {
    left:21%;
    width:63vw;
    top:28%
  }
  .hero h1 {
    font-size:58px
  }
  .rail {
    left:5vw;
    top:37%
  }
  .hud-center {
    display:none
  }
  .detail-panel {
    width:390px
  }

}

@media(max-width:720px) {
  .masthead {
    height:76px;
    padding:0 20px
  }
  .brand-mark {
    height:29px;
    width:29px
  }
  .brand-copy strong {
    font-size:16px
  }
  .brand-copy small {
    font-size:7px;
    letter-spacing:1.8px
  }
  .edition,.masthead-separator,.live-dot {
    display:none
  }
  .rail {
    left:0;
    top:auto;
    bottom:65px;
    width:100%;
    padding:0 16px 11px;
    flex-direction:row;
    overflow-x:auto;
    white-space:nowrap;
    gap:8px;
    scrollbar-width:none;
    background:linear-gradient(0deg,rgba(6,11,17,.8),transparent)
  }
  .rail::-webkit-scrollbar {
    display:none
  }
  .rail-heading,.rail-rule,.rail-index {
    display:none
  }
  .rail-link {
    flex:none;
    padding:10px 14px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:30px;
    background:rgba(10,17,23,.72);
    font-size:11px;
    backdrop-filter:blur(10px)
  }
  .rail-link.is-active {
    background:#d0ac7a;
    color:#182026;
    border-color:#d0ac7a;
    transform:none
  }
  .hero {
    left:24px;
    right:24px;
    top:26%;
    width:auto
  }
  .hero h1 {
    font-size:clamp(39px,9vw,60px);
    letter-spacing:-1.5px;
    margin:18px 0
  }
  .hero p {
    font-size:13px;
    line-height:1.75;
    max-width:320px
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:1.4px
  }
  .hero-actions {
    gap:12px;
    flex-wrap:wrap
  }
  .hero-actions .primary-btn {
    padding:13px 16px;
    gap:10px
  }
  .hero-footnote {
    margin-top:32px;
    font-size:8px;
    line-height:1.5
  }
  .detail-panel {
    top:76px;
    bottom:115px;
    width:100%;
    padding:22px 26px
  }
  .panel-portrait {
    height:110px;
    margin:20px 0
  }
  .detail-panel h2 {
    font-size:37px
  }
  .hud {
    height:50px;
    bottom:0;
    left:20px;
    right:20px
  }
  .hud-right {
    display:none
  }
  .scene-label {
    display:none
  }
  .quote-card {
    padding:23px
  }
  .quote-card h2 {
    font-size:39px
  }
  .quote-card form {
    margin-top:15px
  }

}

@media(max-height:620px) {
  .hero {
    top:22%
  }
  .hero h1 {
    font-size:clamp(36px,4vw,62px);
    margin:10px 0
  }
  .hero p {
    line-height:1.5
  }
  .hero-footnote {
    margin-top:18px
  }
  .rail {
    top:28%
  }
  .detail-panel {
    padding-top:16px
  }
  .panel-portrait {
    height:105px;
    margin:15px 0
  }

}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important
  }

}

/* =====================================
   Virtual HQ / milestone 02 additions
   ===================================== */
#scene canvas {touch-action:none;}
body:not(.is-exploring) .rail {opacity:0;pointer-events:none;}
.rail {transition:opacity .25s;max-height:58vh;overflow-y:auto;scrollbar-width:thin;}
.ambient-vignette {background:radial-gradient(ellipse at 50% 46%,transparent 32%,rgba(6,14,24,.18) 78%,rgba(5,10,18,.40) 100%),linear-gradient(90deg,rgba(5,12,20,.62),rgba(5,12,20,.13) 45%,transparent 75%);}
.masthead-right {gap:9px;}
.icon-btn {flex:0 0 38px;}
.settings-panel {
  position:fixed;z-index:27;right:24px;top:84px;bottom:auto;
  width:min(370px,calc(100vw - 32px));max-height:calc(100dvh - 106px);
  overflow:auto;background:linear-gradient(145deg,rgba(17,28,38,.98),rgba(9,15,23,.98));
  border:1px solid rgba(215,178,127,.35);box-shadow:0 28px 80px rgba(0,0,0,.42);
  padding:25px 27px 28px;transform:translateX(calc(100% + 60px));
  opacity:0;pointer-events:none;transition:transform .34s ease,opacity .25s ease;
  scrollbar-color:#5b6875 transparent;
}
.settings-panel.is-open {transform:translateX(0);opacity:1;pointer-events:auto;}
.settings-panel h2 {font:400 32px/1.1 Georgia,serif;letter-spacing:-.4px;margin:18px 0 10px;}
.settings-panel p {font-size:12px;color:#abbcc5;line-height:1.65;margin:0 0 21px;}
.settings-panel>label:not(.setting-checkbox) {display:flex;justify-content:space-between;align-items:center;gap:5px;color:#d6b690;font-size:10px;letter-spacing:1.2px;font-weight:700;margin:16px 0 8px;}
.settings-panel select {width:100%;background:#202c37;border:1px solid rgba(255,255,255,.19);color:#f2f0eb;padding:11px 12px;border-radius:3px;font-size:12px;}
.settings-panel input[type="range"] {width:100%;accent-color:#d4ae7b;cursor:pointer;}
.settings-panel output {color:#c4d1d8;letter-spacing:0;font-weight:500;}
.settings-panel .setting-checkbox {display:flex;align-items:center;gap:10px;color:#d7e1e5;font-size:12px;margin:18px 0;cursor:pointer;}
.settings-panel input[type="checkbox"] {accent-color:#d4ae7b;width:17px;height:17px;}
.settings-fullscreen {display:block;width:100%;border:1px solid rgba(210,169,115,.65);background:rgba(212,174,123,.13);color:#f5d2a7;padding:13px 12px;border-radius:3px;font-size:12px;margin:23px 0 8px;}
.settings-panel small {display:block;font-size:11px;color:#9dabb2;line-height:1.55;}
.touch-guide {display:none;}
.orientation-prompt {display:none;position:fixed;z-index:19;inset:0;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:10px;padding:28px;background:rgba(8,17,27,.98);}
.orientation-prompt h2 {font:400 30px/1.12 Georgia,serif;max-width:290px;margin:8px 0 0;}
.orientation-prompt p {max-width:320px;color:#b7c4ca;font-size:13px;line-height:1.6;margin:0 0 14px;}
.rotate-icon {font-size:42px;color:#d1a87a;letter-spacing:8px;}
.orientation-prompt .primary-btn {margin:6px 0 0;}
.orientation-prompt .text-btn {color:#d5e0e4;}
body.hide-hints .hover-hint,body.hide-hints .hud-center,body.hide-hints .touch-guide {display:none!important;}
body.reduced-animations .grain {display:none;}
/* Let the entry point be a real first screen, with the rest of the experience behind it. */
.hero {top:26%;left:17%;width:min(685px,59vw);}
.hero h1 {font-size:clamp(42px,5.2vw,80px);}
.hero-footnote {margin-top:46px;}
.hud-right strong {white-space:nowrap;}

@media (pointer:coarse) {
  .touch-guide {display:none;}
  body.is-exploring .touch-guide {display:flex;position:fixed;bottom:8px;left:50%;transform:translateX(-50%);z-index:7;gap:25px;font-size:9px;white-space:nowrap;letter-spacing:1.2px;color:#fff6e7;text-shadow:0 2px 8px #05090c;pointer-events:none;}
}
@media (pointer:coarse) and (orientation:portrait) {
  body.is-exploring:not(.allow-portrait):not(.has-dialog):not(.has-settings) .orientation-prompt {display:flex;}
}
@media (max-width:720px) {
  .hero {top:27%;left:24px;right:24px;width:auto;}
  .hero h1 {font-size:clamp(37px,9vw,56px);}
  .masthead-right {gap:7px;}
  .icon-btn {width:33px;height:33px;flex-basis:33px;}
  .settings-panel {right:8px;top:74px;max-height:calc(100dvh - 84px);}
  .rail {top:auto;max-height:none;overflow-y:hidden;}
  .hud {pointer-events:none;}
}
/* The immersive office alone becomes landscape-optimised: entry and other website
   panels remain standard responsive HTML and do not require orientation locking. */
@media (pointer:coarse) and (orientation:landscape) {
  .masthead {height:53px;padding:0 max(15px,env(safe-area-inset-left));}
  .brand-mark {width:25px;height:25px;}
  .brand-copy strong {font-size:14px;}
  .brand-copy small {font-size:7px;letter-spacing:1.2px;}
  .edition,.live-dot,.masthead-separator {display:none;}
  .icon-btn {width:31px;height:31px;flex-basis:31px;}
  .rail {display:flex;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));width:auto;top:61px;bottom:auto;max-height:none;flex-direction:row;align-items:center;gap:7px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding:0 0 8px;background:none;}
  .rail-heading,.rail-index,.rail-rule {display:none;}
  .rail-link {flex:none;font-size:10px;border:1px solid rgba(255,255,255,.22);padding:8px 12px;border-radius:25px;background:rgba(10,18,26,.74);backdrop-filter:blur(9px);}
  .rail-link.is-active {background:#d5b180;color:#16202a;transform:none;}
  .hero {top:25%;left:10%;width:76%;}
  .hero h1 {font-size:clamp(30px,5.6vw,56px);margin:12px 0;}
  .hero p {font-size:11px;max-width:420px;line-height:1.5;}
  .hero-footnote {display:none;}
  .hero-actions {margin-top:13px;}
  .hero-actions .primary-btn {padding:10px 13px;}
  .hud {height:35px;bottom:0;left:18px;right:18px;}
  .hud-item {display:none;}
  .hud-right {display:flex;margin-left:auto;}
  .touch-guide {bottom:8px!important;}
  .detail-panel {top:57px;bottom:0;width:min(355px,58vw);padding:17px 22px;}
  .detail-panel h2 {font-size:32px;}
  .panel-portrait {height:70px;margin:9px 0;}
  .detail-panel p {line-height:1.45;font-size:12px;margin:11px 0;}
  .detail-panel li {padding:7px 0;}
  .panel-actions {margin-top:12px;}
  .settings-panel {right:max(8px,env(safe-area-inset-right));top:57px;max-height:calc(100dvh - 62px);width:min(350px,65vw);padding:17px 23px;}
  .settings-panel h2 {font-size:27px;margin:12px 0;}
  .settings-panel p {margin-bottom:10px;}
  .settings-panel>label:not(.setting-checkbox) {margin:10px 0 7px;}
  .quote-card {max-height:calc(100dvh - 16px);padding:14px 20px;}
  .quote-card h2 {font-size:30px;}
  .quote-card form {margin:8px 0;gap:5px;}
  .quote-card form label {margin-top:3px;}
  .quote-card input,.quote-card select,.quote-card textarea {padding:8px 10px;}
}
@media (max-height:390px) and (pointer:coarse) and (orientation:landscape) {
  .rail {top:57px;}
  .rail-link {padding:6px 11px;font-size:9px;}
  .hud {display:none;}
}
/* In-world signage replaces screen-space tags; labels no longer float on unrelated camera views. */
.scene-label {display:none!important;}

/* === v2.1: horizontal Quick Links strip below the masthead =============== */
.rail {
  left:4.6vw;right:4.6vw;top:107px;bottom:auto;width:auto;
  display:flex;flex-direction:row;align-items:center;gap:6px;
  padding:9px 12px;border:1px solid rgba(219,181,130,.24);
  border-radius:7px;background:rgba(22,37,48,.85);
  box-shadow:0 12px 40px rgba(0,0,0,.17);
  backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);
  overflow-x:auto;overflow-y:hidden;max-height:none;white-space:nowrap;
  scrollbar-width:thin;scrollbar-color:#657686 transparent;
}
.rail-heading {display:block;flex:none;color:#e4c49c;font-size:9px;letter-spacing:1.5px;margin:0 9px 0 3px;}
.rail-rule,.rail-index {display:none;}
.rail-link {flex:none;border:1px solid transparent;border-radius:4px;background:rgba(255,255,255,.055);padding:9px 11px;font-size:11px;color:#d7e0e4;white-space:nowrap;gap:6px;text-decoration:none;transition:background .18s,color .18s;}
.rail-link:hover {transform:none;background:rgba(255,255,255,.13);color:white;}
.rail-link.is-active {background:rgba(204,163,112,.23);border-color:rgba(215,178,129,.50);color:#ffe8c8;transform:none;}
.rail-brochure {background:rgba(210,176,128,.19);border-color:rgba(210,176,128,.50);color:#f8dab4;}
.header-brochure {font-size:11px;letter-spacing:.45px;text-decoration:none;color:#f2d4ab;padding:11px 14px;border:1px solid rgba(212,172,124,.48);background:rgba(17,27,36,.60);border-radius:3px;white-space:nowrap;}
.header-brochure:hover,.hero-brochure:hover {color:#fff;}
.hero-brochure {text-decoration:none;font-size:12px;}
.performance-readout {margin:18px 0 10px;border:1px solid rgba(255,255,255,.12);background:rgba(94,143,166,.10);border-radius:4px;padding:12px;display:flex;flex-direction:column;gap:7px;}
.performance-readout span {font-size:10px;color:#d6b690;letter-spacing:1.2px;font-weight:700;}
.performance-readout output {font-size:12px;line-height:1.45;color:#e4f0f4;}
@media (max-width:720px) {
  .rail {top:81px;left:10px;right:10px;bottom:auto;padding:7px 8px;gap:5px;max-height:none;}
  .rail-heading {display:none;}
  .rail-link {padding:8px 10px;font-size:10px;border-radius:4px;}
  .header-brochure {font-size:10px;padding:8px 9px;}
  .detail-panel {top:124px;bottom:50px;}
}
@media (pointer:coarse) and (orientation:landscape) {
  .rail {top:57px;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:auto;padding:5px 7px;gap:5px;}
  .rail-link {font-size:10px;padding:6px 9px;border-radius:3px;}
  .detail-panel {top:95px;}
  .header-brochure {font-size:9px;padding:7px 8px;}
}
@media (max-width:390px) {
  .brand-copy strong {font-size:14px;}
  .masthead {padding:0 10px;}
  .header-brochure {font-size:9px;padding:7px 7px;}
}

/* === V3: Human-scale executive-floor walkthrough ======================== */
/* Desktop returns to the vertical destination rail. */
.rail {
  position:fixed; z-index:8;
  left:clamp(20px,4vw,74px); right:auto; top:clamp(123px,21vh,215px); bottom:auto;
  width:170px; max-height:calc(100dvh - 156px);
  display:flex; flex-direction:column; align-items:stretch; gap:1px;
  padding:16px 15px 14px;
  background:rgba(16,27,35,.80);
  border:1px solid rgba(222,187,141,.25); border-radius:8px;
  box-shadow:0 14px 40px rgba(4,8,12,.20);
  backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px);
  overflow-x:hidden;overflow-y:auto;white-space:normal;
}
.rail-heading {display:block;margin:0 0 10px;font-size:10px;letter-spacing:2px;}
.rail-link {width:100%;display:flex;align-items:center;justify-content:flex-start;text-align:left;gap:9px;min-height:29px;
  color:#c2cbd0;font-size:11px;line-height:1.2;padding:7px 8px;border:0;border-radius:4px;background:transparent;white-space:normal;}
.rail-index {display:inline-block;flex:none;width:17px;color:#9f9fa0;font-size:9px;}
.rail-rule {display:block;width:100%;height:1px;margin:5px 0 8px;background:rgba(228,200,166,.18);flex:none;}
.rail-link:hover {transform:none;background:rgba(232,208,176,.09);}
.rail-link.is-active {transform:none;background:rgba(212,172,122,.20);color:#ffdfb9;}
.rail-brochure {font-weight:650;background:rgba(210,176,128,.17);border:1px solid rgba(210,176,128,.35);margin-top:5px;color:#f8dab4;}
/* No always-present bottom bar on desktop; controls remain in settings. */
.hud {display:none !important;}
.mobile-quicknav {display:none;}
.camera-mode-status {padding:8px 11px;border-left:2px solid rgba(221,177,118,.55);background:rgba(221,177,118,.08);margin-top:-10px;}
.settings-panel .setting-camera {margin:21px 0 12px;font-weight:600;}
.teleport-veil {position:fixed;z-index:12;inset:0;background:#0b141e;opacity:0;pointer-events:none;transition:opacity .23s ease;}
.teleport-veil.is-visible {opacity:1;}
#scene canvas {cursor:crosshair;}
@media (max-width:850px), (pointer:coarse) {
  .rail {display:none !important;}
  .mobile-quicknav {position:fixed;z-index:10;top:85px;left:50%;transform:translateX(-50%);
    width:min(256px,calc(100vw - 24px));height:46px;align-items:center;justify-content:space-between;
    background:rgba(17,30,40,.87);border:1px solid rgba(226,190,140,.34);border-radius:7px;
    box-shadow:0 10px 28px rgba(0,0,0,.28);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
  body.is-exploring .mobile-quicknav {display:flex;}
  .mobile-quicknav button {height:43px;width:50px;border:0;background:transparent;color:#e8c99f;font-size:24px;cursor:pointer;}
  .mobile-quicknav button:active {background:rgba(225,190,143,.18);}
  .mobile-location {display:flex;align-items:center;justify-content:center;flex-direction:column;min-width:0;text-align:center;gap:3px;}
  .mobile-location small {color:#d3b187;font-size:8px;letter-spacing:1.65px;}
  .mobile-location strong {font-size:11px;font-weight:600;color:#f5f0eb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:158px;}
  .detail-panel {top:132px;}
}
@media (pointer:coarse) and (orientation:landscape) {
  .mobile-quicknav {top:58px;height:39px;width:230px;}
  .mobile-quicknav button {height:38px;width:45px;font-size:20px;}
  .mobile-location small {font-size:7px;}
  .mobile-location strong {font-size:10px;}
  .detail-panel {top:57px;}
  body.is-exploring .touch-guide {bottom:8px;left:max(12px,env(safe-area-inset-left));transform:none;font-size:8px;gap:10px;}
}
@media (max-width:720px) and (orientation:portrait) {
  .mobile-quicknav {top:82px;}
  .detail-panel {top:76px;bottom:0;}
}
@media (max-width:850px) and (pointer:fine) {
  .mobile-quicknav {top:87px;}
}

/* v4.1 character model status in the existing settings drawer */
#ceo-model-status { display:block; color:#b9d6dd; line-height:1.45; margin:1px 0 0; }
.ceo-animation-status { display:block; color:#b49a79; margin:2px 0 6px; }

/* v4.1.1: explicit animation playback and diagnostics. */
[hidden] { display:none !important; }
.ceo-preview-tools { border:1px solid rgba(212,174,123,.26);border-radius:8px;padding:12px;margin:12px 0;background:rgba(212,174,123,.075); }
.ceo-preview-tools .preview-heading { font-size:10px;font-weight:700;letter-spacing:1.2px;color:#d4ae7b; }
.ceo-preview-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:10px 0; }
.ceo-preview-grid button,.ceo-panel-animation button { color:#f5ebdc;border:1px solid rgba(212,174,123,.36);background:rgba(36,49,60,.88);padding:9px;border-radius:5px;font-size:12px;transition:background .15s; }
.ceo-preview-grid button:hover,.ceo-panel-animation button:hover { background:#3b5060; }
.ceo-panel-animation { margin-top:14px; }
.ceo-panel-animation button { width:100%;padding:11px;text-align:center; }

/* === V4.2: lightweight team controls inside the existing settings drawer === */
#team-model-status {display:block;color:#b9d6dd;line-height:1.45;margin:1px 0 8px;}
.team-preview-tools {border:1px solid rgba(97,164,177,.33);border-radius:8px;padding:12px;margin:12px 0;background:rgba(73,144,164,.08);}
.team-preview-tools .preview-heading {display:block;font-size:10px;font-weight:700;letter-spacing:1.2px;color:#bbdce6;margin-bottom:12px;}
.team-preview-tools label {display:block;color:#bdd0d6;font-size:10px;letter-spacing:1.1px;margin:0 0 7px;}
.team-preview-tools select {width:100%;background:#26333d;border:1px solid rgba(189,208,214,.22);color:#e4ebed;padding:10px 9px;border-radius:5px;font:inherit;font-size:12px;}
.team-preview-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:11px 0;}
.team-preview-grid button {color:#f5ebdc;border:1px solid rgba(97,164,177,.36);background:rgba(36,49,60,.88);padding:9px;border-radius:5px;font-size:12px;cursor:pointer;}
.team-preview-grid button:hover {background:#3b5060;}
.team-animation-status {display:block;color:#a9c5d0;font-variant-numeric:tabular-nums;margin:4px 0 9px;min-height:1.2em;}

/* v1.4.2 — visible recovery UI for failed WebGL/module loading. */
#error-notice:not([hidden]) { position: fixed; inset: auto 14px 18px; z-index: 9999; max-width: 600px; margin-inline: auto; padding: 22px; background: #101211; color: #f6f6f2; border: 1px solid #747975; border-radius: 18px; box-shadow: 0 18px 70px #0009; }
#error-notice[hidden] { display: none !important; }
.scene-error-detail { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; color: #e8c998; overflow-wrap: anywhere; white-space: pre-wrap; }
.scene-error-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.scene-error-actions > * { padding: 9px 12px; border: 1px solid #8a8d88; border-radius: 7px; color: white; background: #252826; text-decoration: none; font: inherit; cursor: pointer; }
.scene-error-actions > *:focus-visible { outline: 2px solid #e1c88e; outline-offset: 3px; }

/* v1.4.4: uncluttered entry header and mobile wordmark. */
.masthead-right{gap:9px}
.masthead .brand{flex:1 1 auto;min-width:0}
.masthead .brand-copy{min-width:0}
@media(max-width:720px){
 .masthead{height:68px;padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right));gap:10px}
 .masthead .brand-copy strong{font-size:clamp(13px,4vw,17px);white-space:nowrap;letter-spacing:-.065em}
 .masthead .brand-copy small{display:none}
 .masthead-right{gap:6px;flex:none}
 .masthead-right .icon-btn{width:35px;height:35px}
}

/* v1.4.5 — direct SMTP enquiry states */
.office-quote-honeypot{position:absolute!important;left:-9999px!important;opacity:0!important;pointer-events:none!important}
.office-quote-status{min-height:1.2em;margin:.25rem 0;font-size:.8rem;color:rgba(255,255,255,.85)}
#office-quote-fallback[hidden]{display:none!important}


/* v1.4.6 — restrained landscape-only walking joystick.
   Touchpad is separate from WebGL canvas; the right side remains free to look. */
.walk-joystick { display:none; }
@media (pointer:coarse) and (orientation:landscape) {
  body.is-exploring:not(.has-settings):not(.has-dialog):not(.agency-guide-open):not(.free-camera-active) .walk-joystick {
    display:grid;
    place-items:center;
    position:fixed;
    z-index:11;
    left:max(16px, env(safe-area-inset-left));
    bottom:max(15px, env(safe-area-inset-bottom));
    width:108px;
    height:108px;
    touch-action:none;
    -webkit-user-select:none;
    user-select:none;
  }
  .walk-joystick__pad {
    width:100%;height:100%;display:grid;place-items:center;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.26);
    background:rgba(9,11,12,.24);
    box-shadow:inset 0 0 20px rgba(0,0,0,.13),0 3px 12px rgba(0,0,0,.12);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    touch-action:none;
  }
  .walk-joystick__thumb {
    display:block;width:42px;height:42px;border-radius:50%;
    border:1px solid rgba(255,255,255,.50);
    background:rgba(239,240,235,.22);
    box-shadow:0 3px 10px rgba(0,0,0,.16);
    pointer-events:none;
    will-change:transform;
  }
  /* Give the analogue its own corner; controls text can stay centred. */
  body.is-exploring .touch-guide {left:50%;transform:translateX(-50%);}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:390px) {
  body.is-exploring:not(.has-settings):not(.has-dialog):not(.agency-guide-open):not(.free-camera-active) .walk-joystick {
    width:92px;height:92px;left:max(12px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));
  }
  .walk-joystick__thumb {width:37px;height:37px;}
}