/* The Garnet — facility-tour homepage layout. Externalized (strict CSP: no inline <style>). */
:root { --fx-garnet:#e0244a; --fx-gold:#ffc65a; --fx-teal:#37e6d2; --fx-paper:#f3eef0; --fx-muted:#a99ea6; --fx-line:rgba(255,255,255,.12); --fx-mono:ui-monospace,Menlo,monospace; }
html { scroll-behavior: smooth; }
body.fx-tour { margin: 0; padding: 0; display: block; background: #05040a; color: var(--fx-paper); font-family: 'Inter Tight', system-ui, sans-serif; overflow-x: hidden; }
body.fx-tour::before, body.fx-tour::after { content: none !important; } /* neutralize any gx- shell pseudo-elements */
#facility-canvas { pointer-events: none; }
#tour-fade { position: fixed; inset: 0; background: #05040a; opacity: 0; z-index: 1; pointer-events: none; }
.fx-main { position: relative; z-index: 2; }

/* slim top nav (carries the brand mark the shell-guard requires) */
.fx-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: .8rem clamp(1rem,4vw,2.4rem); pointer-events: none;
  background: linear-gradient(180deg, rgba(5,4,10,.72), rgba(5,4,10,0)); }
.fx-nav > * { pointer-events: auto; }
.fx-brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--fx-paper); text-decoration: none; font-family: 'Chakra Petch', sans-serif; font-weight: 700; letter-spacing: .01em; font-size: 1.05rem; }
.fx-brand svg { width: 22px; height: 22px; display: block; }
.fx-nav-links { display: flex; align-items: center; gap: 1.1rem; font-size: .9rem; }
.fx-nav-links a { color: var(--fx-muted); text-decoration: none; }
.fx-nav-links a:hover { color: var(--fx-paper); }
.fx-nav-links .fx-nav-cta { color: #fff; background: var(--fx-garnet); padding: .5rem 1rem; border-radius: 999px; font-weight: 600; }
@media (max-width: 560px) { .fx-nav-links a:not(.fx-nav-cta) { display: none; } }

.tour-room { min-height: 200vh; position: relative; pointer-events: none; }
.room-copy { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  gap: .2rem; max-width: min(52ch, 94vw); padding: clamp(1.2rem,4vw,3rem) clamp(1.2rem,5vw,4.5rem);
  background: linear-gradient(100deg, rgba(4,3,8,.97) 0%, rgba(4,3,8,.94) 56%, rgba(4,3,8,.68) 80%, rgba(4,3,8,0) 100%); }
.room-copy > * { pointer-events: auto; position: relative; }
.fx-eyebrow { font-family: var(--fx-mono); font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--fx-teal); margin: 0 0 .6rem; }
.fx-eyebrow b { color: var(--fx-gold); }
.fx-h1 { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: clamp(2.1rem,5.4vw,3.6rem); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 .7rem; text-wrap: balance; }
.fx-lede { font-size: clamp(1.02rem,2.1vw,1.22rem); line-height: 1.5; color: #e7dde2; margin: 0 0 .9rem; }
.fx-teach { font-size: .96rem; line-height: 1.55; color: var(--fx-muted); margin: 0 0 1.2rem; }
.fx-teach b { color: var(--fx-paper); }
.fx-cta { display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; font-weight: 600; font-size: 1rem;
  background: var(--fx-garnet); color: #fff; text-decoration: none; padding: .8rem 1.4rem; border-radius: 999px; box-shadow: 0 10px 30px -10px rgba(224,36,74,.6); }
.fx-btn2 { background: transparent; border: 1px solid var(--fx-line); color: var(--fx-paper); padding: .7rem 1.1rem; border-radius: 999px; font: inherit; cursor: pointer; }
.fx-btn2:hover { border-color: var(--fx-garnet); }
.row { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.gm-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
.gm-chip { font-family: var(--fx-mono); font-size: .7rem; letter-spacing: .03em; padding: .42rem .8rem; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--fx-line); color: var(--fx-paper); cursor: pointer; }
.gm-chip[aria-pressed="true"] { background: rgba(224,36,74,.16); border-color: var(--fx-garnet); }
.gm-chip:focus-visible, .fx-cta:focus-visible, .fx-btn2:focus-visible, .fx-brand:focus-visible, .fx-nav-links a:focus-visible { outline: 2px solid var(--fx-teal); outline-offset: 2px; }

.rail { position: fixed; right: clamp(.6rem,2vw,1.6rem); top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: .9rem; pointer-events: auto; }
.rail a { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--fx-muted); position: relative; }
.rail a[aria-current="true"] { background: var(--fx-garnet); border-color: var(--fx-garnet); box-shadow: 0 0 12px var(--fx-garnet); }
.rail a span { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: var(--fx-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fx-muted); opacity: 0; transition: opacity .2s; }
.rail a:hover span, .rail a[aria-current="true"] span { opacity: 1; }
@media (max-width: 640px) {
  .rail { display: none; }
  .room-copy { min-height: 92vh; }
  /* Apple HIG: 44px minimum tap targets */
  .gm-chip, .fx-nav-cta, .fx-cta, .fx-btn2, .fx-brand { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .fx-nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .fx-foot-links a { padding: .3rem 0; min-height: 34px; display: inline-flex; align-items: center; }
}
.scroll-hint { position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%); z-index: 3; font-family: var(--fx-mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fx-muted); animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(4px); } }

/* plain-text layer (SEO + no-JS + skip target) — was an inline style */
.fx-plain { position: relative; z-index: 2; background: #05040a; padding: 4rem clamp(1rem,5vw,4rem); }
.fx-plain > * { max-width: 72ch; }
.fx-plain h2 { font-family: 'Chakra Petch', sans-serif; }
.fx-plain p { line-height: 1.6; color: #cbbfc6; }
.fx-plain b { color: var(--fx-paper); }

/* slim footer */
.fx-foot { position: relative; z-index: 2; background: #05040a; border-top: 1px solid var(--fx-line); padding: 2rem clamp(1rem,5vw,4rem);
  display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; justify-content: space-between; font-size: .8rem; color: var(--fx-muted); }
.fx-foot a { color: var(--fx-muted); text-decoration: none; }
.fx-foot a:hover { color: var(--fx-paper); }
.fx-foot .fx-foot-links { display: flex; flex-wrap: wrap; gap: 1rem; }

.gm-skip { position: absolute; left: -9999px; top: 0; z-index: 10; background: var(--fx-garnet); color: #fff; padding: .6rem 1rem; border-radius: 0 0 8px 0; }
.gm-skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .scroll-hint { animation: none; } }