/* ============================================================================
   VENUE.CSS -- consolidated page-specific stylesheet for venue.html
   Concatenation of venue-group.css + venue-group-refine.css + venue-redesign.css
   + venue-journey.css, in that exact order, to cut venue.html from 5 render-
   blocking stylesheets down to the 2 every other page loads (site.css + this
   file). Cascade order preserved byte-for-byte within each source block; only
   this banner comment and the four section dividers below were added. The four
   source files are left on disk (unreferenced) rather than deleted, since this
   project isn't under version control -- see venue.html's <link> comment.
   ============================================================================ */

/* ---- from venue-group.css ---- */
/* ==========================================================================
   VENUE GROUP — page-specific styles
   Source of truth: Figma file 1L78PvvlnqBfvCR1pQvS4e
   venue.html <- frame 14:2 "Venue"
   Loaded after css/site.css. Do not restyle nav/footer here — see site.css
   sections 8/9 and the markup contract comment at the top of index.html.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   HERO
   --------------------------------------------------------------------------- */
.v-hero{
  position:relative;
  height:832px;
  color:#fff;
  background:var(--ink);
}
.v-hero-media{position:absolute;inset:0;overflow:hidden}
.v-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v-hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(24,8,18,.5) 0%, rgba(24,8,18,.14) 62%),
    linear-gradient(0deg, rgba(24,8,18,.7) 0%, rgba(24,8,18,.12) 55%, rgba(0,0,0,0) 78%);
}
.v-hero-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 var(--edge);
}
.v-hero-content .eyebrow{color:rgba(255,255,255,.9);margin-bottom:22px;display:block}
.v-hero-content h1{
  font-family:var(--serif);
  font-weight:400;
  /* T1 unification: matches the site's 95px hero family (Contact/News/About/
     Home). venue-redesign.css loads after this file but no longer overrides
     .v-hero-content h1 -- its clamp(46px,7vw,104px) block was narrowed to
     .fd-hero-content only, so this clamp wins on venue.html. */
  font-size:clamp(44px,8vw,95px);
  line-height:1;
  letter-spacing:-.015em;
  max-width:760px;
}
.v-hero-content .v-lede{
  font-family:var(--serif);
  font-size:21px;
  line-height:1.5;
  color:rgba(255,255,255,.88);
  max-width:562px;
  margin-top:26px;
}
.v-hero-cta{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap}

/* ---------------------------------------------------------------------------
   LEVEL CARDS ("Pick your level.")
   --------------------------------------------------------------------------- */
.v-levels{background:var(--cream-soft, #F7F0E2);padding:clamp(64px,9vw,150px) 0 clamp(56px,7vw,96px)}
.v-levels-head{margin-bottom:56px}
.v-levels-head .eyebrow{display:block;margin-bottom:18px}
.v-levels-head h2{font-family:var(--serif);font-weight:400;font-size:58px;line-height:1.08}

.v-cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:19px}
.v-card{
  background:#fff;
  border:1px solid rgba(36,42,47,.1);
  border-radius:22px;
  overflow:hidden;
  display:block;
  transition:transform .25s ease, box-shadow .25s ease;
}
.v-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(36,42,47,.12)}
.v-card-media{position:relative;height:190px;background:#F7F0E2;overflow:hidden}
.v-card-media img{width:100%;height:100%;object-fit:cover}
.v-card-badge{
  position:absolute;top:14px;left:14px;
  background:rgba(36,42,47,.35);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  border-radius:100px;
  padding:6px 14px;
  font-family:var(--label);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.22em;
  color:#fff;
}
.v-card-body{padding:26px 24px 24px}
.v-card-body h3{font-family:var(--serif);font-weight:400;font-size:25px;margin-bottom:8px}
.v-card-tag{
  font-family:var(--label);
  font-weight:700;
  font-size:11px;
  letter-spacing:.2em;
  color:var(--burgundy);
  margin-bottom:14px;
  display:block;
}
.v-card-desc{font-family:var(--cond);font-size:12.5px;line-height:1.65;color:rgba(36,42,47,.68);margin-bottom:24px}
.v-card-link{
  font-family:var(--label);
  font-weight:700;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:gap .2s ease;
}
.v-card:hover .v-card-link{gap:12px}

/* ---------------------------------------------------------------------------
   OVERVIEW IMAGES (Indoor / Outdoor Spaces Overview — flattened Figma art,
   baked-in text and stats; V1 as-is)
   --------------------------------------------------------------------------- */
.v-overview{padding:0 0 clamp(40px,5vw,64px)}
.v-overview + .v-overview{padding-top:0}
.v-overview img{
  display:block;
  width:100%;
  height:auto;
  border-radius:20px;
}
.v-overview .wrap{padding-top:clamp(24px,3vw,40px);padding-bottom:clamp(24px,3vw,40px)}

/* ---------------------------------------------------------------------------
   EXPLORER ("Walk every floor.")
   --------------------------------------------------------------------------- */
.v-explorer{background:var(--cream-soft, #F7F0E2);padding:clamp(70px,8vw,108px) 0}
.v-explorer-head{margin-bottom:38px;max-width:520px}
.v-explorer-head .eyebrow{display:block;margin-bottom:18px}
.v-explorer-head h2{font-family:var(--serif);font-weight:400;font-size:58px;line-height:1.08;margin-bottom:22px}
.v-explorer-head p{font-family:var(--cond);font-size:14px;line-height:1.7;color:rgba(36,42,47,.68)}

.v-ftabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.v-ftab{
  font-family:var(--label);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.21em;
  text-transform:uppercase;
  padding:11px 21px;
  border-radius:100px;
  border:1px solid rgba(36,42,47,.18);
  color:rgba(36,42,47,.72);
  background:transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.v-ftab:hover{border-color:rgba(36,42,47,.4)}
.v-ftab.is-active{background:var(--ink);border-color:var(--ink);color:var(--cream)}

.v-explorer-grid{display:grid;grid-template-columns:1fr 420px;gap:24px;align-items:stretch}

.v-plan-card{
  background:#fff;
  border:1px solid rgba(36,42,47,.12);
  border-radius:22px;
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.v-plan-card img{display:block;width:100%;height:auto}

.v-legend{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.v-legend span{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--cond);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(36,42,47,.65);
  border:1px solid rgba(36,42,47,.16);
  padding:7px 13px;
  border-radius:100px;
}
.v-legend i{width:11px;height:11px;border-radius:3px;flex-shrink:0}

.v-info-panel{
  background:#fff;
  border:1px solid rgba(36,42,47,.12);
  border-radius:22px;
  padding:32px 30px;
  display:flex;
  flex-direction:column;
}
.v-info-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.v-info-level{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--burgundy)}
.v-explore-link{
  font-family:var(--label);
  font-weight:700;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.v-info-panel h2{font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.05;margin-bottom:16px}
.v-info-panel > p{font-family:var(--cond);font-size:13.5px;line-height:1.7;color:rgba(36,42,47,.68);margin-bottom:8px}

.v-room-list{margin-top:8px}
.v-room-list li{
  list-style:none;
  border-top:1px solid rgba(36,42,47,.14);
  padding:14px 4px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  border-radius:10px;
}
.v-room-list li.is-selected{background:rgba(255,183,27,.18);border-top-color:transparent;padding-left:10px;padding-right:10px}
.v-room-list .v-room-name{font-family:var(--serif);font-weight:400;font-size:18px;color:var(--ink)}
.v-room-list .v-room-size{
  font-family:var(--label);
  font-weight:700;
  font-size:10.5px;
  color:var(--burgundy);
  letter-spacing:.16em;
  color:rgba(36,42,47,.55);
}
.v-room-list li.is-selected .v-room-size{color:var(--burgundy)}

.v-callout{
  border:1px solid var(--yellow);
  border-radius:16px;
  padding:18px 22px;
  margin-top:18px;
}
/* floor-detail pages put the callout first, room list after */
.v-callout--top{margin-top:0;margin-bottom:18px}
.v-callout .eyebrow{font-size:10px;letter-spacing:.28em;margin-bottom:10px;display:block}
.v-callout p{font-family:var(--cond);font-size:13px;line-height:1.6;color:rgba(36,42,47,.68)}

/* ---------------------------------------------------------------------------
   SEEN HERE — heading only in this frame (V1 as-is: no logos/cards placed yet;
   kept intentionally empty rather than filled in)
   --------------------------------------------------------------------------- */
.v-seen{padding:clamp(70px,9vw,120px) 0 clamp(120px,16vw,200px)}
.v-seen .eyebrow{display:block;margin-bottom:18px}
.v-seen h2{font-family:var(--serif);font-weight:400;font-size:58px;line-height:1.08;max-width:520px}

/* ---------------------------------------------------------------------------
   CTA PANEL ("Let's Make Magic")
   --------------------------------------------------------------------------- */
.v-cta-outer{
  max-width:var(--container);
  margin:0 auto clamp(64px,8vw,120px);
  /* matched to index.html's CTA frame: 15px gradient border at 38px radius,
     and the same 95deg gradient that resolves to brand yellow — the 9px /
     36px / --gradient-warm version read as a thinner, duller frame */
  border-radius:38px;
  padding:15px;
  overflow:hidden;
  background-image:linear-gradient(95deg,#8F6686 0%,#9A1E1B 32%,#C4571F 66%,#FFB71B 100%);
}
.v-cta-inner{
  background:var(--cream);
  border-radius:27px;
  padding:56px;
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:40px;
  align-items:center;
}
.v-cta-headline{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(56px,7vw,96px);
  line-height:.92;
  color:var(--burgundy);
}
.v-cta-right .site-logo{margin-bottom:26px}
.v-cta-right .v-cta-line{
  font-family:var(--serif);
  font-size:24px;
  line-height:1.3;
  color:var(--ink);
  padding-bottom:24px;
  border-bottom:0;  /* deck skin: hairlines are yellow, via site.css */
  max-width:440px;
}
.v-cta-right .v-cta-decks-label{
  font-family:var(--serif);
  font-size:24px;
  color:var(--ink);
  margin-top:24px;
  display:block;
}
.v-deck-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.v-deck-btn{
  position:relative;
  height:80px;
  border-radius:8px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.v-deck-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.v-deck-btn span{position:relative;z-index:1;font-family:var(--serif);font-size:20px;color:#fbfdff}
/* "Coming soon" deck chip: same disabled state as index.html/experiential.html's
   CTA deck row (services-group.css), reused here since this page doesn't load
   that stylesheet -- the Experiential/Exhibitor deck slots have no PDF yet. */
.v-deck-btn.is-soon{cursor:default;opacity:.55}
.v-deck-btn.is-soon::before{
  content:"Coming soon";
  position:absolute;top:8px;right:8px;z-index:2;
  font-family:var(--label);font-weight:700;font-size:8px;letter-spacing:.1em;
  text-transform:uppercase;color:#fffaf0;
  background:rgba(24,8,18,.55);border-radius:100px;padding:3px 7px;
}
.v-cta-buttons{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}

/* ==========================================================================
   FLOOR-DETAIL TEMPLATE — shared by first-floor.html, second-floor.html,
   lower-level.html, outdoor.html
   Source of truth: frames 26:2 / 27:2 / 28:2 / 29:2
   ========================================================================== */

/* ---- hero ---- */
.fd-hero{position:relative;height:558px;color:#fff;background:var(--ink)}
.fd-hero-media{position:absolute;inset:0;overflow:hidden}
.fd-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fd-hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(24,8,18,.5) 0%, rgba(24,8,18,.14) 62%),
    linear-gradient(0deg, rgba(24,8,18,.7) 0%, rgba(24,8,18,.12) 55%, rgba(0,0,0,0) 78%);
}
.fd-hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;padding:76px var(--edge) 0}
.fd-hero-content .eyebrow{color:var(--yellow);margin-bottom:20px;display:block}
.fd-hero-content h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(38px,7vw,72px);
  line-height:1.02;
  letter-spacing:-.01em;
  max-width:820px;
}
.fd-hero-content h1 em{color:var(--yellow)}
.fd-hero-content .fd-lede{
  font-family:var(--serif);
  font-size:21px;
  line-height:1.5;
  color:rgba(255,255,255,.88);
  max-width:524px;
  margin-top:22px;
}
.fd-hero-cta{display:flex;gap:16px;margin-top:30px;flex-wrap:wrap}

/* ---- floor tabs row (page-level switcher, sits under hero) ---- */
.fd-tabs-row{padding:26px 0}

/* ---- stat strip ---- */
.fd-stats{padding:12px 0 56px}
.fd-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.fd-stat h3{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4vw,52px);line-height:1;white-space:nowrap;margin-bottom:14px}
.fd-stat span{
  font-family:var(--label);
  font-weight:700;
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--burgundy);
}

/* ---- gallery ("Seen on the ___") ---- */
.fd-gallery-sec{padding:clamp(70px,9vw,110px) 0}
.fd-gallery-head{margin-bottom:38px}
.fd-gallery-head .eyebrow{display:block;margin-bottom:18px}
.fd-gallery-head h2{font-family:var(--serif);font-weight:400;font-size:58px;line-height:1.08}
.fd-gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,260px);gap:18px}
.fd-gallery img{display:block;width:100%;height:100%;object-fit:cover;border-radius:18px}
.fd-gallery a:nth-child(1),
.fd-gallery a:nth-child(4){grid-row:1 / 3}

/* ---- use-case dark strip ---- */
.fd-usecase{background:var(--ink);color:var(--cream);padding:clamp(70px,9vw,104px) 0;text-align:center}
.fd-usecase .wrap{max-width:820px}
.fd-usecase .eyebrow--on-dark{display:block;margin-bottom:18px}
.fd-usecase h2{font-family:var(--serif);font-weight:400;font-size:58px;line-height:1.08;margin-bottom:24px}
.fd-usecase h2 em{color:var(--yellow);font-style:italic}
.fd-usecase p{font-family:var(--serif);font-size:21px;line-height:1.5;color:rgba(255,250,240,.78)}

/* ---- prev/next pagination ---- */
.fd-pagenav{padding:34px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.fd-pagenav a{
  font-family:var(--label);
  font-weight:700;
  font-size:11px;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--burgundy);
  transition:opacity .2s ease;
}
.fd-pagenav a:hover{opacity:.6}

/* ---------------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width:900px){
  /* client, Aug 9: phone heroes fill the viewport like desktop, content
     vertically centred, with the scroll cue at the fold */
  .v-hero{height:auto;min-height:100svh;padding:120px 0 88px;display:flex;flex-direction:column;justify-content:center}
  .v-cards-grid{grid-template-columns:repeat(2,1fr)}
  .v-explorer-grid{grid-template-columns:1fr}
  .v-cta-inner{grid-template-columns:1fr;padding:40px}
  .v-cta-headline{font-size:64px}
  .v-levels-head h2,.v-explorer-head h2,.v-seen h2{font-size:42px}

  .fd-hero{height:auto;min-height:600px;padding:110px 0 48px}
  .fd-stats-grid{grid-template-columns:repeat(2,1fr);row-gap:32px}
  .fd-gallery{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,220px)}
  .fd-gallery a:nth-child(1),.fd-gallery a:nth-child(4){grid-row:auto}
  .fd-usecase h2{font-size:42px}
  .fd-gallery-head h2{font-size:42px}
}
@media (max-width:480px){
  .v-hero-content{padding:0 var(--edge)}
  .v-cards-grid{grid-template-columns:1fr}
  .v-ftabs{gap:8px}
  .v-ftab{padding:9px 16px;font-size:9.5px}
  .v-deck-row{grid-template-columns:repeat(2,1fr)}
  .v-cta-inner{padding:28px}
  .v-cta-headline{font-size:48px}
  .v-info-panel{padding:26px 22px}
  .v-levels-head h2,.v-explorer-head h2,.v-seen h2{font-size:34px}

  .fd-hero-content{padding:96px var(--edge) 0}
  .fd-stats-grid{grid-template-columns:1fr;row-gap:24px}
  .fd-gallery{grid-template-columns:1fr;grid-template-rows:none}
  .fd-gallery a:nth-child(1),.fd-gallery a:nth-child(4){grid-row:auto}
  .fd-gallery img{height:220px}
  .fd-usecase h2,.fd-gallery-head h2{font-size:32px}
}

/* ---- from venue-group-refine.css ---- */
/* ==========================================================================
   VENUE GROUP — REFINEMENT PASS (v1.5)
   Appended stylesheet for venue.html, first-floor.html, second-floor.html,
   lower-level.html, outdoor.html. Loaded after css/venue-group.css.
   Does not touch site.css or venue-group.css (both frozen) — everything
   needed for the nav/footer v1.5 shell, the interactive floorplans, and
   small alignment fixes lives here.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   NAV — "Venue" active state for the v1.5 dropdown shell (index.html's
   header markup doesn't itself define an active-state color; the old v1
   shell used a plain a.is-active per top-level link, so we carry that
   forward for the Venue item on all five pages in this group).
   --------------------------------------------------------------------------- */
.nav-item > a.is-active{color:var(--yellow)}

/* ---------------------------------------------------------------------------
   STACKED FLOORPLAN (venue.html "Indoor Spaces Overview" replacement) —
   copied verbatim from index.html's inline <style> so the interactive
   floorstack behaves identically on the Venue page.
   --------------------------------------------------------------------------- */
.floorplan{
  background:var(--ink);
  color:#fff;
  padding:96px 0;
}
.floorplan .wrap{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:72px;
  align-items:center;
}
.floorstack{position:relative;width:100%;max-width:620px;margin:0 auto;aspect-ratio:1000/1180}
.fs-plate{position:absolute;left:0;width:100%;display:block;transition:transform .45s cubic-bezier(.2,.6,.2,1), filter .45s ease}
.fs-plate img{width:100%;height:auto;display:block}
.fs-plate.fs-second{top:0;z-index:3}
.fs-plate.fs-first{top:27%;z-index:2}
.fs-plate.fs-lower{top:54%;z-index:1}
.fs-plate::after{
  content:attr(data-floor);
  position:absolute;top:14%;right:-2%;
  background:var(--yellow);color:var(--ink);
  font-family:var(--label);font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 13px;border-radius:100px;
  opacity:0;transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.fs-plate:hover,.fs-plate.lift,.fs-plate:focus-visible{
  transform:translateY(-14px);
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.45));
  z-index:4;
}
.fs-plate:hover::after,.fs-plate.lift::after,.fs-plate:focus-visible::after{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .fs-plate{transition:none}
}
.floorplan-copy .eyebrow{color:var(--yellow);display:block;margin-bottom:20px}
.floorplan-copy h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(34px,4vw,52px);
  line-height:1.06;
  margin-bottom:22px;
}
.floorplan-copy h2 em{color:var(--yellow)}
.floorplan-copy > p{
  font-family:var(--serif);
  font-size:18px;
  line-height:1.55;
  color:rgba(255,250,240,.82);
  max-width:46ch;
  margin-bottom:36px;
}
.floor-legend{border-top:1px solid rgba(255,250,240,.16)}
.floor-row{
  display:flex;
  align-items:baseline;
  gap:18px;
  padding:16px 0;
  border-bottom:1px solid rgba(255,250,240,.16);
}
.floor-row .fl-name{
  font-family:var(--serif);
  font-size:21px;
  color:#fff;
  min-width:132px;
}
.floor-row .fl-spec{
  font-family:var(--cond);
  font-size:12.5px;
  line-height:1.5;
  color:rgba(255,250,240,.62);
  flex:1;
}
.floor-row .fl-link{
  font-family:var(--label);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--yellow);
  white-space:nowrap;
  transition:opacity .2s ease;
}
.floor-row .fl-link:hover{opacity:.65}

/* ---------------------------------------------------------------------------
   OUTDOOR OVERVIEW (venue.html "Outdoor Spaces Overview" replacement) —
   single-plate variant of the same dark card, real copy instead of a
   flattened image sidebar.
   --------------------------------------------------------------------------- */
.floorplan.floorplan--single .wrap{grid-template-columns:.85fr 1.15fr}
.floorplan-art .fp-wrap{max-width:620px;margin:0 auto}
.floorplan-art .fp-wrap img{border-radius:20px}

/* ---------------------------------------------------------------------------
   INTERACTIVE FLOORPLAN HOTSPOTS — shared component for every floor plan
   / site plan image in this group (venue.html previews + the four detail
   pages). Percent-based <a> hotspots over a flat plan PNG.
   --------------------------------------------------------------------------- */
.fp-wrap{position:relative;width:100%;line-height:0;border-radius:16px;overflow:hidden}
.fp-wrap img{width:100%;height:auto;display:block}
.fp-hotspot{
  position:absolute;
  display:block;
  border-radius:5px;
  outline:2px solid transparent;
  outline-offset:-2px;
  background:rgba(255,183,27,0);
  transition:background-color .2s ease, outline-color .2s ease;
}
.fp-hotspot:hover,
.fp-hotspot:focus-visible,
.fp-hotspot.is-hint{
  background:rgba(255,183,27,.18);
  outline-color:var(--yellow);
}
.fp-hotspot:focus-visible{outline-width:2px}
.fp-hotspot::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;top:0;
  transform:translate(-50%,-100%);
  margin-top:-8px;
  white-space:nowrap;
  background:var(--ink);
  color:#fffaf0;
  font-family:var(--label);
  font-weight:700;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:7px 12px;
  border-radius:100px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:5;
  box-shadow:0 10px 22px rgba(36,42,47,.28);
}
.fp-hotspot:hover::after,
.fp-hotspot:focus-visible::after,
.fp-hotspot.is-hint::after{
  opacity:1;
  transform:translate(-50%,-130%);
}
@media (prefers-reduced-motion: reduce){
  .fp-hotspot,.fp-hotspot::after{transition:none}
}

/* room-list rows get the same hover/select vocabulary as the hotspots so
   the plan and the list can sync in both directions */
.v-room-list li{transition:background-color .2s ease}
.v-room-list li.is-hint{background:rgba(255,183,27,.12)}

@media (max-width:900px){
  .floorplan .wrap{grid-template-columns:1fr;gap:56px}
  .floorplan-art{order:2}
  .floorplan{padding:72px 0}
}


/* ---------------------------------------------------------------------------
   ACCURATE ROOM HIGHLIGHTS — per-room transparent plates extracted from the
   plan artwork. Hovering a hotspot (or its list row) lights the actual room
   shape; rectangle washes are suppressed when a plate exists.
   --------------------------------------------------------------------------- */
.fp-zone{
  position:absolute;
  inset:0;
  width:100%;
  height:auto;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease, transform .35s cubic-bezier(.2,.6,.2,1), filter .35s ease;
}
.fp-zone.on{
  opacity:1;
  transform:translateY(-6px);
  filter:brightness(1.12) saturate(1.12);
}
.fp-hotspot.has-zone:hover,
.fp-hotspot.has-zone:focus-visible,
.fp-hotspot.has-zone.is-hint{
  background:transparent;
  outline-color:transparent;
}
@media (prefers-reduced-motion: reduce){
  .fp-zone{transition:none}
  .fp-zone.on{transform:none}
}


/* ---------------------------------------------------------------------------
   PRODUCTION INFRASTRUCTURE (#specs) — handbook spec sheet, two-column rows
   --------------------------------------------------------------------------- */
.vp-specs-sec{background:var(--ink);color:#fff;padding:104px 0 112px}
.vp-head{margin-bottom:40px}
.vp-head .eyebrow{color:var(--yellow);display:block;margin-bottom:16px}
.vp-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.8vw,50px);line-height:1.06}
.vp-head h2 em{color:var(--yellow)}
.vp-specs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0 clamp(20px,3vw,44px);
  border-top:0;
}
.vp-specs li{
  display:block;
  padding:26px 0 30px;
  border-top:1px solid rgba(36,42,47,.14);
  transition:background .3s ease, padding-left .3s ease;
}
.vp-specs li:hover{background:rgba(154,30,27,.045);padding-left:10px}
.vp-specs i{
  display:block;font-style:normal;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,3.6vw,58px);line-height:.9;
  color:transparent;-webkit-text-stroke:1px rgba(154,30,27,.45);
  margin-bottom:14px;
}
.vp-specs strong{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,1.7vw,24px);line-height:1.15;
  color:var(--ink);
  margin-bottom:10px;
}
.vp-specs span{
  display:block;font-family:var(--cond);
  font-size:12.5px;line-height:1.6;
  color:rgba(36,42,47,.6);
  text-align:left;
}
@media (max-width:900px){
  .vp-specs{grid-template-columns:repeat(2,1fr)}
}


/* per-floor infrastructure strip under the room list (handbook data) */
.v-infra{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(36,42,47,.14);
  font-family:var(--cond);
  font-size:12px;
  line-height:1.6;
  color:rgba(36,42,47,.62);
}
.v-infra span{
  display:block;
  font-family:var(--label);
  font-weight:700;
  font-size:9.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--burgundy);
  margin-bottom:6px;
}

/* legend row hint state when its plan zone is hovered */
.floor-row.is-hint .fl-name{color:var(--yellow)}
.floor-row.is-hint .fl-link{opacity:.65}

/* ---- from venue-redesign.css ---- */
/* ============================================================================
   VENUE GROUP REDESIGN — venue.html + the four floor pages
   ----------------------------------------------------------------------------
   Built to the Jul 17 direction from Wayne:
     · "the hero fills the full screen"
     · floor tabs change only the content below — "it should feel like one
       continuous page, not separate pages"  → sticky switcher + in-place swap
     · the ICP is highly visual: imagery gets real scale, plans stay interactive
     · agency-grade, modern, purposeful motion — no gimmicks
   Brand: Instrument Serif display w/ italic accents, Swiss721/NeoGeo labels,
   yellow #FFB71B · ink #242A2F · cream #FFFAF0, rounded containers, cinematic
   gradient overlays, grain with restraint.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. FULL-SCREEN CINEMATIC HERO
   --------------------------------------------------------------------------- */
/* truly full-screen at every window size — no height cap, or tall monitors
   get a cream strip under the hero */
.fd-hero,
.v-hero{
  height:100svh;
  min-height:600px;
}
.fd-hero-media img,
.v-hero-media img{
  will-change:transform;
}
/* slow push-in on the footage; the frame is never static, never busy */
.js .fd-hero-media img,
.js .v-hero-media img{
  animation:vrKenBurns 26s cubic-bezier(.2,.5,.2,1) forwards;
}
@keyframes vrKenBurns{ from{ transform:scale(1.14); } to{ transform:scale(1.005); } }

/* deeper cinematic grade so display type always holds up over photography */
.fd-hero-scrim,
.v-hero-scrim{
  background:
    linear-gradient(90deg, rgba(20,7,15,.66) 0%, rgba(20,7,15,.28) 48%, rgba(20,7,15,.06) 78%),
    linear-gradient(0deg,  rgba(20,7,15,.80) 0%, rgba(20,7,15,.20) 46%, rgba(0,0,0,0) 72%) !important;
}
/* Hero copy sits in the same 1328px column as every other section — computed
   with the container's own max-width/margin math rather than 100vw, which
   miscounts the scrollbar and can push the headline past the right edge. */
.fd-hero-content,
.v-hero-content{
  width:100%;
  max-width:calc(var(--container) + (var(--edge) * 2));
  margin:0 auto;
  padding:0 var(--edge) 96px;
  justify-content:flex-end;
}
/* legibility: a soft floor of shade under the copy block, plus a whisper of
   text shadow, so the type holds on bright or busy footage */
.fd-hero-content > *,
.v-hero-content > *{
  text-shadow:0 1px 26px rgba(16,6,12,.42);
}
.fd-hero::after,
.v-hero::after{
  content:'';
  position:absolute; inset:auto 0 0 0; height:62%;
  background:linear-gradient(0deg, rgba(16,6,12,.72) 0%, rgba(16,6,12,.34) 42%, rgba(16,6,12,0) 100%);
  z-index:1;
  pointer-events:none;
}
.fd-hero-content .fd-lede,
.v-hero-content .v-lede{ color:rgba(255,250,240,.92); }
/* venue hero: copy sits dead-centre; the journey pushes it out sideways */
.v-hero-content{ justify-content:center; padding-bottom:0; }
/* venue.html's own h1 (below) matches the site's unified 95px hero family --
   this file only still sets font-size/line-height/letter-spacing/max-width
   for .fd-hero-content (the never-built floor-detail template), kept for
   whoever finishes that page; venue-group.css's clamp(44px,8vw,95px) wins
   for the venue hero now instead of being cascade-overridden here. */
.fd-hero-content h1{
  font-size:clamp(46px,7vw,104px);
  line-height:.98;
  letter-spacing:-.022em;
  max-width:15ch;
}
.fd-hero-content .fd-lede,
.v-hero-content .v-lede{
  font-size:clamp(15px,1.35vw,18.5px);
  line-height:1.6;
  max-width:52ch;
}

/* word-rise entrance, matching the home hero so the site reads as one system */
.fd-hero-content h1 .w,
.v-hero-content h1 .w{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  /* room for descenders inside the mask — and horizontal room for italic
     overhang: an <em> word's last glyph leans past its layout box and the
     tight mask sliced it (the "configurable" e). The negative margins cancel
     the padding so word spacing is unchanged. */
  padding:0 .12em .18em .06em;
  margin:0 -.12em -.18em -.06em;
}
.js .fd-hero-content h1 .w > span,
.js .v-hero-content h1 .w > span{
  display:inline-block;
  transform:translateY(115%) rotate(3deg);
  filter:blur(6px);
  animation:vrRise .95s cubic-bezier(.16,.84,.31,1) forwards;
}
@keyframes vrRise{ to{ transform:none; filter:blur(0); } }

/* chapter marker — the deck numbers its spreads, so the site does too */
.fd-chapter{
  position:absolute;
  left:var(--edge); bottom:38px;
  z-index:3;
  display:flex; align-items:center; gap:14px;
  font-family:var(--label);
  font-size:10.5px; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,250,240,.62);
}
.fd-chapter i{ display:block; width:52px; height:1px; background:rgba(255,250,240,.42); font-style:normal; }
.fd-chapter b{ color:var(--yellow); font-weight:700; }

/* scroll cue */
.fd-scrollcue{
  position:absolute;
  right:var(--edge); bottom:38px;
  z-index:3;
  display:flex; align-items:center; gap:12px;
  font-family:var(--label);
  font-size:10px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,250,240,.6);
}
.fd-scrollcue::after{
  content:'';
  width:1px; height:34px;
  background:linear-gradient(180deg, rgba(255,250,240,.7), rgba(255,250,240,0));
  animation:vrCue 2.1s ease-in-out infinite;
  transform-origin:top;
}
@keyframes vrCue{ 0%,100%{ transform:scaleY(.35); opacity:.5 } 50%{ transform:scaleY(1); opacity:1 } }

@media (prefers-reduced-motion: reduce){
  .js .fd-hero-media img,.js .v-hero-media img{ animation:none; transform:none }
  .js .fd-hero-content h1 .w > span,.js .v-hero-content h1 .w > span{ animation:none; transform:none; filter:none }
  .fd-scrollcue::after{ animation:none }
}

/* ---------------------------------------------------------------------------
   2. STICKY FLOOR SWITCHER — the device that makes five pages read as one
   --------------------------------------------------------------------------- */
.fd-tabs-row{
  position:sticky;
  top:80px;                    /* clears the fixed 80px nav */
  z-index:40;
  padding:14px 0;
  background:rgba(255,250,240,.82);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid rgba(36,42,47,.10);
  transition:box-shadow .3s ease;
}
.fd-tabs-row.is-stuck{ box-shadow:0 10px 30px -22px rgba(36,42,47,.55); }
.fd-tabs-row .v-ftabs{ margin-bottom:0; align-items:center; }
.v-ftab{
  position:relative;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.v-ftab:hover{ transform:translateY(-1px); }
.v-ftab.is-active{
  background:var(--yellow);
  border-color:var(--yellow);
  color:var(--ink);
}
/* the overview tab sits apart from the four floors */
.v-ftab--overview{ margin-left:auto; border-style:dashed; }

/* the swapping region: content crossfades, the switcher never moves */
.fd-swap{ transition:opacity .34s ease, transform .34s ease; }
.fd-swap.is-leaving{ opacity:0; transform:translateY(14px); }
.fd-swap.is-entering{ opacity:0; transform:translateY(22px); }
html.is-swapping{ scroll-behavior:auto !important; }
/* thin progress line while the next floor loads */
.fd-swapbar{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:var(--yellow);
  z-index:200;
  opacity:0;
  transition:width .3s ease, opacity .3s ease;
}
.fd-swapbar.is-on{ opacity:1; }

/* ---------------------------------------------------------------------------
   3. STAT RAIL
   --------------------------------------------------------------------------- */
.fd-stats{ padding:52px 0 60px; }
.fd-stats-grid{
  border-top:1px solid rgba(36,42,47,.14);
  padding-top:34px;
  gap:32px;
}
.fd-stat h3{
  font-size:clamp(34px,3.6vw,52px);
  line-height:1;
  letter-spacing:-.02em;
  margin-bottom:12px;
}
.fd-stat span{
  font-family:var(--label);
  font-size:10px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(36,42,47,.55);
}
.fd-stat{ position:relative; }
.fd-stat + .fd-stat{ padding-left:32px; }
.fd-stat + .fd-stat::before{
  content:'';
  position:absolute; left:0; top:4px; bottom:4px;
  width:1px; background:rgba(36,42,47,.12);
}

/* ---------------------------------------------------------------------------
   4. INTERACTIVE PLAN — floated on ink so the coloured rooms carry the section
   --------------------------------------------------------------------------- */
.v-explorer{
  background:var(--ink);
  color:var(--cream);
  padding:clamp(72px,8vw,108px) 0 clamp(76px,8vw,112px);
  position:relative;
  overflow:hidden;
}
/* faint plan grid, same drafting language as the home campus band */
.v-explorer::before{
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,250,240,.05) 1px,transparent 1px),
    linear-gradient(90deg, rgba(255,250,240,.05) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
}
.v-explorer > .wrap{ position:relative; z-index:1; }
.v-explorer-head{ margin-bottom:42px; max-width:60ch; }
.v-explorer-head .eyebrow{ color:var(--yellow); display:block; margin-bottom:16px; }
.v-explorer-head h2{
  color:var(--cream);
  font-size:clamp(34px,4vw,58px);
  line-height:1.02;
  letter-spacing:-.02em;
}
.v-explorer-head h2 em{ color:var(--yellow); }
.v-explorer-head p{
  color:rgba(255,250,240,.66);
  font-family:var(--cond);
  font-size:14.5px;
  margin-top:16px;
  max-width:52ch;
}
/* the plan itself stays a bright sheet — a drawing pinned on the dark board */
.v-plan-card{
  background:var(--cream);
  border-radius:26px;
  padding:26px;
  border:1px solid rgba(255,250,240,.10);
}
.v-legend{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid rgba(36,42,47,.12);
}
/* the room list inverts onto the dark ground */
.v-info-panel{
  background:transparent !important;
  border:1px solid rgba(255,250,240,.14) !important;
  border-radius:26px;
  padding:26px 24px !important;
}
.v-callout{
  background:rgba(255,250,240,.06) !important;
  border:1px solid rgba(255,183,27,.34) !important;
  border-radius:16px;
}
.v-callout .eyebrow{ color:var(--yellow) !important; }
.v-callout p{ color:rgba(255,250,240,.76) !important; }
.v-room-list li{
  border-bottom-color:rgba(255,250,240,.12) !important;
  transition:background .22s ease, padding-left .22s ease;
  border-radius:10px;
}
.v-room-list .v-room-name{ color:var(--cream) !important; }
.v-room-list .v-room-size{ color:var(--yellow) !important; }
.v-room-list li.is-hint,
.v-room-list li:hover{
  background:rgba(255,250,240,.07);
  padding-left:12px !important;
}
.v-room-list li.is-selected{
  background:rgba(255,183,27,.12);
  padding-left:12px !important;
}
.v-infra, .v-infra *{ color:rgba(255,250,240,.72) !important; }
.v-infra{ border-top-color:rgba(255,250,240,.14) !important; }
.v-infra .eyebrow{ color:var(--yellow) !important; }

/* ---- focus behaviour, matching the home page ----------------------------
   Hovering a room on the home campus plan blurs everything else back. The
   venue plans now do the same: the whole drawing recedes and the hovered
   room stays sharp, and the room list greys out except the one being read. */
.fp-wrap{ transition:filter .3s ease; }
.fp-wrap > img:first-of-type{ transition:filter .35s ease, opacity .35s ease; }
.fp-wrap.has-focus > img:first-of-type{
  filter:blur(2.5px) grayscale(.85);
  opacity:.5;
}
.fp-zone{ transition:opacity .3s ease, filter .3s ease, transform .3s cubic-bezier(.2,.6,.2,1); }
.fp-wrap.has-focus .fp-zone:not(.on){ opacity:0; }
.fp-wrap.has-focus .fp-zone.on{ filter:brightness(1.05) saturate(1.06); }
.v-room-list.has-focus li:not(.is-hint):not(.is-selected){
  filter:grayscale(1) opacity(.4);
}
@media (prefers-reduced-motion: reduce){
  .fp-wrap,.fp-wrap > img:first-of-type,.fp-zone{ transition:none }
}

/* ---------------------------------------------------------------------------
   5. GALLERY — imagery at the scale a visual ICP expects
   --------------------------------------------------------------------------- */
.fd-gallery-sec{ padding:clamp(84px,10vw,124px) 0; }
.fd-gallery-head h2{
  font-size:clamp(34px,4.4vw,64px);
  line-height:1.02;
  letter-spacing:-.02em;
}
/* Imagery is the pitch for this audience, so the mosaic runs edge-to-edge and
   the rows are roughly half the viewport rather than a fixed 260px band. */
.fd-gallery-sec > .wrap{ max-width:none; padding:0 var(--edge); }
.fd-gallery-sec .fd-gallery-head{ max-width:var(--container); margin-left:auto; margin-right:auto; }
.fd-gallery{
  grid-template-rows:repeat(2, minmax(300px, 42vh)) !important;
  gap:14px !important;
}
.fd-gallery img{ border-radius:18px; }
.fd-gallery figure,
.fd-gallery a,
.fd-gallery .fd-shot{
  overflow:hidden;
  border-radius:18px;
  position:relative;
}
.fd-gallery img{
  transition:transform .85s cubic-bezier(.2,.6,.2,1), filter .45s ease;
  will-change:transform;
}
.fd-gallery figure:hover img,
.fd-gallery .fd-shot:hover img{
  transform:scale(1.06);
}
/* a soft grade lifts on hover so the photography feels alive, not static */
.fd-gallery figure::after,
.fd-gallery .fd-shot::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,7,15,.34), rgba(20,7,15,0) 55%);
  opacity:.85;
  transition:opacity .45s ease;
  pointer-events:none;
}
.fd-gallery figure:hover::after,
.fd-gallery .fd-shot:hover::after{ opacity:.35; }

/* ---------------------------------------------------------------------------
   6. RESPONSIVE
   --------------------------------------------------------------------------- */
@media (max-width:900px){
  .fd-hero{ height:auto; min-height:560px; max-height:none; }
  .v-hero{ height:auto; min-height:100svh; max-height:none; }
  .fd-tabs-row{ top:64px; padding:10px 0; }
  .fd-tabs-row .v-ftabs{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .fd-tabs-row .v-ftabs::-webkit-scrollbar{ display:none; }
  .v-ftab{ white-space:nowrap; }
  .v-ftab--overview{ margin-left:0; }
  .fd-chapter,.fd-scrollcue{ display:none; }
  .fd-stat + .fd-stat{ padding-left:0; }
  .fd-stat + .fd-stat::before{ display:none; }
}


/* ---------------------------------------------------------------------------
   7. ONE-PAGE FLOORS — the four floor pages live as panels in one document;
   the sticky switcher swaps them in place with a soft crossfade
   --------------------------------------------------------------------------- */
.floor-panel[hidden]{ display:none; }
/* the hero shares the first screen with the nav (80px) and the tab bar
   (~58px) — size it to fit exactly so its content isn't pushed below the fold */
.floor-panel .fd-hero{ height:calc(100svh - 80px); min-height:560px; }

.floor-panel{
  opacity:1; transform:none;
  transition:opacity .4s ease, transform .5s cubic-bezier(.2,.7,.25,1);
}
.floor-panel.pre{ opacity:0; transform:translateY(16px); }
@media (prefers-reduced-motion: reduce){
  .floor-panel{ transition:none; }
}


/* ---------------------------------------------------------------------------
   8. LEVEL SELECTOR — lives with the plan it drives, on the ink stage, built
   to the same standard as the venue overview's legend rail
   --------------------------------------------------------------------------- */
.v-explorer-head{ max-width:none; }
.fp-levels{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid rgba(255,250,240,.14);
}
.fp-level{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  padding:13px 18px 12px;
  background:rgba(255,250,240,.04);
  border:1px solid rgba(255,250,240,.13);
  border-radius:18px;
  text-align:left;
  cursor:pointer;
  overflow:hidden;
  transition:background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.2,.7,.25,1);
}
/* the level's identity colour rides the top edge */
.fp-level i{
  position:absolute; left:0; top:0; height:3px; width:100%;
  background:var(--c,#F0AC1A);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform .35s cubic-bezier(.2,.7,.25,1);
}
.fp-level b{
  font-family:var(--serif); font-weight:400; font-size:19px; line-height:1.1;
  color:var(--cream);
}
.fp-level span{
  font-family:var(--cond); font-size:12px; line-height:1.35;
  color:rgba(255,250,240,.55);
}
.fp-level:hover{
  background:rgba(255,250,240,.08);
  border-color:rgba(255,250,240,.3);
  transform:translateY(-2px);
}
.fp-level:hover i{ transform:scaleX(1); }
.fp-level.is-active{
  background:rgba(255,250,240,.10);
  border-color:var(--c,#F0AC1A);
}
.fp-level.is-active i{ transform:scaleX(1); }
.fp-level.is-active span{ color:rgba(255,250,240,.75); }
@media (max-width:900px){
  .fp-levels{ grid-template-columns:1fr 1fr; gap:10px; margin-top:26px; padding-top:22px; }
  .fp-level{ padding:14px 16px; }
  .fp-level b{ font-size:18px; }
}
@media (prefers-reduced-motion: reduce){
  .fp-level, .fp-level i{ transition:none; }
}


/* ---------------------------------------------------------------------------
   9. PLAN-FIRST FLOOR PAGES — the interactive plan IS the hero; the photo
   scene and the rest follow beneath
   --------------------------------------------------------------------------- */
.fp-hero{ display:block; min-height:0; padding:calc(80px + 26px) 0 56px; }
.fp-hero > .wrap{ width:100%; }
.fp-id{ display:flex; align-items:center; gap:30px; margin-bottom:4px; }
.fp-num{
  font-size:clamp(84px,9vw,148px); line-height:.8; font-weight:400;
  color:transparent;
  -webkit-text-stroke:2px rgba(255,250,240,.16);
  letter-spacing:-.02em;
  user-select:none;
  flex:none;
}
.fp-id-copy .eyebrow{ color:var(--yellow); display:block; margin-bottom:12px; }
.fp-id-copy h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(32px,3.6vw,52px); line-height:1;
  color:var(--cream);
  margin-bottom:10px;
}
.fp-feats{
  font-family:var(--label); font-weight:700;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,250,240,.66);
  max-width:70ch; line-height:1.9;
}
.fp-hint{
  font-family:var(--cond); font-size:12.5px;
  color:rgba(255,250,240,.45);
  margin-top:10px;
}
/* the scene band: the old photo hero, now a chapter further down the page */
.fd-scene{
  position:relative; height:72vh; min-height:480px;
  color:#fff; background:var(--ink);
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.fd-scene::after{
  content:'';
  position:absolute; inset:auto 0 0 0; height:62%;
  background:linear-gradient(0deg, rgba(16,6,12,.72) 0%, rgba(16,6,12,.34) 42%, rgba(16,6,12,0) 100%);
  z-index:1; pointer-events:none;
}
.fd-scene .fd-hero-content{
  position:relative; z-index:2;
  padding-bottom:64px;
  justify-content:flex-end;
}
.fd-scene .fd-hero-content h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,4.4vw,62px); line-height:1.02; letter-spacing:-.02em;
  max-width:16ch;
}
@media (max-width:900px){
  .fp-hero{ min-height:0; padding-top:96px; }
  .fp-id{ gap:20px; }
  .fp-num{ font-size:80px; }
  .fd-scene{ height:auto; min-height:420px; padding-top:120px; }
}


/* the plan itself is sized to complete the first screen — the room list and
   infrastructure sit below the fold, revealed on scroll */
.fp-hero .v-explorer-grid{ display:block; }
.fp-hero .v-plan-card{
  height:calc(100svh - 468px);
  min-height:300px; max-height:620px;
  display:flex; flex-direction:column; align-items:center;
  margin-top:20px;
}
.fp-hero .fp-wrap{ height:calc(100% - 42px); width:fit-content; margin:0 auto; }
.fp-hero .fp-wrap > img:first-child{ height:100%; width:auto; display:block; }
.fp-hero .v-legend{ width:100%; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; }
.fp-hero .v-info-panel{ margin-top:88px; max-width:920px; margin-left:auto; margin-right:auto; }
@media (max-width:900px){
  .fp-hero .v-plan-card{ height:auto; max-height:none; display:block; }
  .fp-hero .fp-wrap{ height:auto; width:100%; }
  .fp-hero .fp-wrap > img:first-child{ height:auto; width:100%; }
  .fp-hero .v-info-panel{ margin-top:48px; }
}

/* ---- from venue-journey.css ---- */
/* ============================================================================
   THE CAMPUS JOURNEY — one scroll-driven walk through all four environments
   ----------------------------------------------------------------------------
   Replaces the old "Pick your level" card grid plus the two static overview
   blocks. The stack opens showing every level at once; each scroll beat brings
   one level forward while the others recede out of focus, ending outside on the
   site plan. Same act-based state machine and CSS-timed motion as the home
   sequence, so the two read as one system — and every move is a transform /
   opacity / blur on a plain element, which is exactly what Framer's scroll
   transforms reproduce.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. THE SHEET SYSTEM — sections arrive as rounded sheets sliding over the
   one before, the same hand-off the home page makes over its hero. The hero
   itself is pinned (sticky) and racks out of focus underneath as the first
   sheet climbs over it.
   --------------------------------------------------------------------------- */
:root{ --sheetR:clamp(26px,3.4vw,44px); }
/* kept in sync with the cj-stage pin's own disengage threshold below (1080px)
   -- the hero hand-off and the journey pin are one continuous effect, so they
   have to switch to the static/stacked read together or the hero stays
   pinned under a journey section that's no longer overlapping it */
@media (min-width:1081px){
  .v-hero{ position:sticky; top:0; z-index:1; }
}
.sheet{ position:relative; }
.sheet--ink { background:var(--ink);  color:var(--cream); z-index:2; }
.sheet--cream{ background:var(--cream); z-index:3; }
.sheet--ink2{ background:var(--ink);  color:var(--cream); z-index:4; }
.sheet--flat{ position:relative; background:var(--cream); z-index:6; }
.v-seen.sheet--cream{ z-index:5; }
.sheet{
  /* client (Aug 6): straight section dividers site-wide — the overlap margins
     driven by --sheetR stay (they carry the hand-off), only the curve goes */
  border-radius:0;
}
.sheet + .sheet,
.sheet--flat{ margin-top:calc(var(--sheetR) * -1); }
/* the sheet edge is carried by radius + shadow alone — no drag-handle pip;
   that reads as mobile-app UI, not the handbook's editorial language */

/* the specs sheet moved from ink onto cream — re-ground its type per the
   brand rule: burgundy accents on light, ink body, hairlines in ink */
.vp-specs-sec.sheet--cream{ background:var(--cream); color:var(--ink); }
.vp-specs-sec.sheet--cream .vp-head .eyebrow{ color:var(--burgundy); }
.vp-specs-sec.sheet--cream .vp-head h2 em{ color:var(--burgundy); }
.vp-specs-sec.sheet--cream .vp-specs{ border-top-color:rgba(36,42,47,.16); }
.vp-specs-sec.sheet--cream .vp-specs li{ border-bottom-color:rgba(36,42,47,.10); }
.vp-specs-sec.sheet--cream .vp-specs i{ color:var(--burgundy); }
.vp-specs-sec.sheet--cream .vp-specs strong{ color:var(--ink); }
.vp-specs-sec.sheet--cream .vp-specs span{ color:rgba(36,42,47,.58); }
.vp-specs-sec.sheet--cream .vp-specs li:hover{ background:rgba(154,30,27,.05); }

/* seen-here logo marquee — the shared white logo set, inverted to ink for the
   cream sheet; two rows travelling in opposite directions */
.v-seen{ padding:clamp(72px,9vw,108px) 0 clamp(64px,8vw,96px); }
.v-seen .wrap.rv{ margin-bottom:44px; }
.v-seen h2{ font-family:var(--serif); font-weight:400; font-size:clamp(34px,4vw,58px); line-height:1.04; }
.v-seen .eyebrow{ display:block; margin-bottom:14px; }
.v-seen-marquee .marquee + .marquee{ margin-top:34px; }
/* brightness(0) flattens every source colour to an ink silhouette, so the
   mixed logo set reads as one calm editorial row on cream */
.v-seen-marquee .marquee-track img{
  height:32px; width:auto; max-width:128px; object-fit:contain;
  margin:0 34px;
  filter:brightness(0) opacity(.55);
  transition:filter .3s ease;
}
.v-seen-marquee .marquee-track img:hover{ filter:brightness(0) opacity(.85); }
@media (max-width:900px){
  .v-seen-marquee .marquee-track img{ height:22px; margin:0 22px; }
}

/* venue section-headline word rise (split by js into .w masks) */
.js h2[data-words] .w{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  /* horizontal room for italic overhang (see venue-redesign.css note) */
  padding:0 .12em .16em .06em; margin:0 -.12em -.16em -.06em;
}
.js h2[data-words] .w > span{
  display:inline-block;
  transform:translateY(115%) rotate(3deg);
  filter:blur(5px);
}
.js .rv.in h2[data-words] .w > span,
.js h2[data-words].in .w > span{
  animation:vrRise .9s cubic-bezier(.16,.84,.31,1) forwards;
}

/* the journey's ground fades in over the pinned hero — driven by --inkA */
.cj{ position:relative; z-index:2; background:rgba(36,42,47,var(--inkA,0)); color:var(--cream); }
/* the stage overlays the hero from the very first pixel of scroll, so the
   hand-off has NO vertical movement: the hero copy is pushed aside, the
   floors arrive from the side, and the photo fades into the grid in place */
@media (min-width:1081px){
  .js .cj{ margin-top:-100svh; }
}
@media (prefers-reduced-motion: reduce){
  .js .cj{ margin-top:0; }
}
.cj + .sheet{ margin-top:calc(var(--sheetR) * -1); }
/* solid ink whenever the scrub isn't running */
html:not(.js) .cj{ background:var(--ink); }
@media (max-width:1080px){ .cj{ background:var(--ink); } }
@media (prefers-reduced-motion: reduce){ .cj{ background:var(--ink); } }
.cj-track{ position:relative; }
/* 100vh stage + 440vh content (hand-off + 4 phases) + 45vh exit hold where
   the finished map resists over-scroll + 100vh where the next sheet rides
   over the still-pinned map */
.js .cj-track{ height:685vh; }
@media (min-width:1081px){
  .js .cj + .fe.sheet{ margin-top:-100svh; }
}
@media (prefers-reduced-motion: reduce){
  .js .cj-track{ height:540vh; }
  .js .cj + .fe.sheet{ margin-top:calc(var(--sheetR) * -1); }
}
.cj-stage{
  position:sticky; top:0;
  height:100vh; min-height:640px;
  display:flex; align-items:center;
  overflow:hidden;
}
/* drafting grid, same language as the home campus band */
.cj-stage::before{
  content:''; position:absolute; inset:-140px 0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,250,240,.045) 1px,transparent 1px),
    linear-gradient(90deg, rgba(255,250,240,.045) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 50%, #000 35%, transparent 78%);
  mask-image:radial-gradient(120% 80% at 50% 50%, #000 35%, transparent 78%);
  transform:translateY(var(--gp, 0px));
  opacity:var(--inkA, 1);
}
.cj-grid{
  position:relative; z-index:2;
  width:100%;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:64px;
  align-items:center;
}

/* ---- the artwork ---------------------------------------------------------- */
.cj-art{ position:relative; }
.cj-stack{
  position:relative;
  width:100%; max-width:680px; margin:0 auto;
  aspect-ratio:1000/1180;
}
.cj-plate{
  position:absolute; left:0; width:100%;
  display:block;
  transform-origin:50% 50%;
  transition:transform 1s cubic-bezier(.22,.68,.24,1),
             opacity .7s ease,
             filter .7s ease;
  will-change:transform,opacity,filter;
}
/* scrub mode: the engine writes poses every frame — transitions would lag it */
.cj.scrub .cj-plate,
.cj.scrub .cj-outdoor{ transition:none; }
.cj-plate img{ width:100%; height:auto; display:block; }

/* ---- room highlight on the 3D plates: hovering a ledger row lights that
   room and dims the rest of its floor, matching the site's focus language */
.cj-zone{
  position:absolute; left:0; top:0; width:100%; height:auto;
  opacity:0; pointer-events:none;
  transition:opacity .22s ease;
  filter:brightness(1.28) saturate(1.2) drop-shadow(0 0 16px rgba(255,183,27,.45));
}
.cj-zone.on{ opacity:1; }
.cj-plate > img:first-child,
.cj-outwrap > img:first-child{ transition:filter .25s ease; }
.cj-plate.has-hot > img:first-child,
.cj-outwrap.has-hot > img:first-child{ filter:brightness(.55) saturate(.75); }
.cj-outwrap{ position:relative; width:100%; max-width:760px; }
.cj-outwrap > img:first-child{ width:100%; height:auto; display:block; border-radius:14px; }
/* the rows invite the hover — and light up when the PLATE is hovered too */
.cj-rooms li[data-zone]{ cursor:default; transition:opacity .5s ease, transform .5s ease, padding-left .25s ease; }
.cj-rooms li[data-zone]:hover span,
.cj-rooms li.is-hint span{ color:var(--yellow); }
.cj-rooms li.is-hint{ padding-left:10px; }

/* cursor-following room tip over the plates: cream pill on the ink stage */
.cj-tip{
  position:absolute; left:0; top:0; z-index:8;
  background:var(--cream); color:var(--ink);
  font-family:var(--label); font-weight:700;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 14px; border-radius:100px;
  white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .18s ease;
  will-change:transform;
}
.cj-tip.on{ opacity:1; }
.cj-plate--second{ top:0;   z-index:3; }
.cj-plate--first { top:27%; z-index:2; }
.cj-plate--lower { top:54%; z-index:1; }

/* act 0 — the whole building, gently floating. The float lives on the img so
   it never fights the plate's own stacking transform. */
.cj-plate.is-all{ opacity:1; filter:none; }
.cj-plate--second.is-all{ transform:translateY(-2%)  scale(.94); }
.cj-plate--first.is-all { transform:translateY(0)     scale(.94); }
.cj-plate--lower.is-all { transform:translateY(2%)    scale(.94); }
@keyframes cjFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
.cj-plate.is-all img{ animation:cjFloat 7s ease-in-out infinite; }
.cj-plate--first.is-all img{ animation-delay:-2.3s; }
.cj-plate--lower.is-all img{ animation-delay:-4.6s; }

/* the level being read: pulled to the middle of the frame and enlarged */
.cj-plate.is-focus{ opacity:1; filter:none; z-index:6; }
.cj-plate--second.is-focus{ transform:translateY(34%)  scale(1.12); }
.cj-plate--first.is-focus { transform:translateY(0)    scale(1.12); }
.cj-plate--lower.is-focus { transform:translateY(-34%) scale(1.12); }

/* everything else falls back out of focus — the home page's hover language */
.cj-plate.is-back{ opacity:.14; filter:blur(7px) grayscale(.6); }
.cj-plate--second.is-back{ transform:translateY(-16%) scale(.88); }
.cj-plate--first.is-back { transform:translateY(0)    scale(.88); }
.cj-plate--lower.is-back { transform:translateY(16%)  scale(.88); }

/* heading outside: the building drops away entirely */
.cj-plate.is-out{ opacity:0; filter:blur(12px); transform:translateY(-8%) scale(.8); }

/* the site plan waits underneath and scales in for the last beat */
.cj-outdoor{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.9); filter:blur(8px);
  transition:transform 1s cubic-bezier(.22,.68,.24,1), opacity .7s ease, filter .7s ease;
  pointer-events:none;
}
.cj-outdoor img{ width:100%; max-width:760px; height:auto; display:block; border-radius:14px; }
.cj-outdoor.is-in{ opacity:1; transform:scale(1); filter:none; }
/* slow aerial drift once the site plan is on stage */
@keyframes cjPan{ from{ transform:scale(1) translateY(0) } to{ transform:scale(1.05) translateY(-1.6%) } }
.cj-outdoor.is-in img{ animation:cjPan 16s ease-in-out infinite alternate; }

/* ---- the copy ------------------------------------------------------------- */
.cj-panels{ position:relative; min-height:430px; }
.cj-panel{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  opacity:0;
  transform:translateY(26px);
  filter:blur(5px);
  pointer-events:none;
  transition:opacity .38s ease, transform .5s cubic-bezier(.2,.7,.25,1), filter .38s ease;
}
.cj-panel.is-on{ opacity:1; transform:none; filter:none; pointer-events:auto; }
/* cascade: the panel's pieces arrive in reading order, not as one slab */
.cj-panel > *{
  opacity:0; transform:translateY(16px);
  transition:opacity .5s ease, transform .6s cubic-bezier(.2,.7,.25,1);
}
.cj-panel.is-on > *{ opacity:1; transform:none; }
.cj-panel.is-on > .eyebrow  { transition-delay:.02s }
.cj-panel.is-on > h2        { transition-delay:.05s }
.cj-panel.is-on > p         { transition-delay:.09s }
.cj-panel.is-on > .cj-rooms { transition-delay:.13s }
.cj-panel.is-on > .cj-specs { transition-delay:.20s }
.cj-panel.is-on > .cj-cta   { transition-delay:.25s }
.cj-panel > .cj-mark{
  opacity:0;
  transform:translateY(-46%);
  transition:opacity .7s ease .15s, transform .9s cubic-bezier(.2,.7,.25,1) .15s;
}
.cj-panel.is-on > .cj-mark{ opacity:1; transform:translateY(-50%); }
.cj-panel .eyebrow{ color:var(--yellow); display:block; margin-bottom:18px; }
.cj-panel h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(38px,4.6vw,68px);
  line-height:1.0; letter-spacing:-.022em;
  color:var(--cream);
  margin-bottom:18px;
}
.cj-panel h2 em{ color:var(--yellow); font-style:italic; }
.cj-panel p{
  font-family:var(--cond);
  font-size:15px; line-height:1.62;
  color:rgba(255,250,240,.68);
  max-width:44ch;
  margin-bottom:26px;
}
.cj-rooms{ list-style:none; margin:0 0 28px; padding:0; max-width:430px; }
.cj-rooms li{
  display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  padding:9px 0;
  border-bottom:1px solid rgba(255,250,240,.12);
  opacity:0; transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease;
}
.cj-panel.is-on .cj-rooms li{ opacity:1; transform:none; }
.cj-panel.is-on .cj-rooms li:nth-child(1){ transition-delay:.08s }
.cj-panel.is-on .cj-rooms li:nth-child(2){ transition-delay:.12s }
.cj-panel.is-on .cj-rooms li:nth-child(3){ transition-delay:.16s }
.cj-panel.is-on .cj-rooms li:nth-child(4){ transition-delay:.20s }
.cj-panel.is-on .cj-rooms li:nth-child(5){ transition-delay:.24s }
.cj-panel.is-on .cj-rooms li:nth-child(6){ transition-delay:.28s }
.cj-rooms span{ font-family:var(--serif); font-size:18px; color:var(--cream); }
.cj-rooms i{
  font-style:normal; font-family:var(--cond); font-size:12.5px;
  color:var(--yellow); white-space:nowrap;
}
.cj-specs{
  font-family:var(--label);
  font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,250,240,.5);
  margin-bottom:26px;
}
.cj-cta{
  display:inline-flex; align-items:center; gap:10px;
  align-self:flex-start;      /* the panel is a flex column — don't stretch */
  font-family:var(--label); font-weight:700;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); background:var(--yellow);
  padding:13px 24px; border-radius:8px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.cj-cta:hover{ transform:translateY(-2px); }

/* level numerals: huge outlined editorial figures behind the copy, bleeding
   off the stage edge so they read as part of the ground, not a sticker */
.cj-mark{
  position:absolute; right:-4%; top:50%;
  font-family:var(--serif); font-size:clamp(280px,24vw,420px); line-height:.8;
  color:rgba(255,250,240,.025);
  -webkit-text-stroke:2px rgba(255,250,240,.10);
  letter-spacing:-.03em;
  pointer-events:none; user-select:none;
  z-index:-1;
}

/* ---- the rail: where you are, and a way to jump ---------------------------- */
.cj-rail{
  position:absolute; left:max(var(--edge), calc((100vw - var(--container)) / 2));
  bottom:44px; z-index:4;
  display:flex; align-items:center; gap:22px;
  opacity:var(--inkA, 1);
}
/* continuous progress line above the level rail */
.cj-bar{
  position:absolute; left:0; right:0; top:-16px;
  height:2px; border-radius:2px;
  background:rgba(255,250,240,.14);
  overflow:hidden;
}
.cj-bar i{
  display:block; height:100%; width:0;
  background:var(--yellow);
  border-radius:2px;
}
.cj-dot{
  display:flex; align-items:center; gap:10px;
  font-family:var(--label); font-size:9.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,250,240,.38);
  background:none; border:0; padding:0; cursor:pointer;
  transition:color .3s ease;
}
.cj-dot i{
  display:block; width:26px; height:2px; border-radius:2px;
  background:rgba(255,250,240,.22);
  transition:background .3s ease, width .3s ease;
}
.cj-dot:hover{ color:rgba(255,250,240,.8); }
.cj-dot.is-on{ color:var(--yellow); }
.cj-dot.is-on i{ background:var(--yellow); width:46px; }

/* ---- no-JS / reduced motion: everything simply stacks and shows ------------ */
html:not(.js) .cj-track{ height:auto; }
html:not(.js) .cj-stage{ position:static; height:auto; padding:80px 0; }
html:not(.js) .cj-panel{ position:static; opacity:1; transform:none; filter:none; margin-bottom:48px; }
html:not(.js) .cj-panels{ min-height:0; }
html:not(.js) .cj-rail{ display:none; }
@media (prefers-reduced-motion: reduce){
  .cj-plate,.cj-outdoor,.cj-panel,.cj-rooms li{ transition:none; }
}

/* ---- short-viewport nav clearance ------------------------------------------
   The fixed nav (80px, 64px once scrolled) overlays the top of the pinned
   stage. .cj-grid is normally vertically centered in .cj-stage with no
   allowance for that bar, so on common short laptop viewports (1366x768,
   1440x900 minus browser chrome) the level eyebrow and even the headline sit
   flush under the nav. The panel copy already runs close to the full stage
   height at these heights, so clearing the nav needs two moves together: a
   reserved top offset, and a tighter (not smaller-type) internal rhythm so
   the CTA at the bottom doesn't get pushed out past the stage's own
   overflow:hidden edge in trade. Only engages where the pin itself is
   running (>1080px wide, see below) and the viewport is short. */
@media (max-height:800px) and (min-width:1081px){
  .cj-stage{ padding-top:64px; }
  .cj-panel .eyebrow{ margin-bottom:8px; }
  .cj-panel h2{ margin-bottom:10px; }
  .cj-panel p{ margin-bottom:14px; }
  .cj-rooms{ margin-bottom:14px; }
  .cj-rooms li{ padding:5px 0; }
  .cj-specs{ margin-bottom:12px; }
}

/* ---- responsive ----------------------------------------------------------- */
/* the pin is a desktop-width device: below 1080px .cj-grid drops to a single
   column and the two-plate-tall art stack no longer leaves room for the rail's
   stage-anchored bottom offset to clear the room ledger, so this band gets the
   same plain stacked read the phone layout already uses (merged from the old,
   narrower <=900px-only query -- the collision reproduced at any width from
   901-1080px, touch or mouse, not just touch/phone widths). */
@media (max-width:1080px){
  .cj-grid{ grid-template-columns:1fr; gap:30px; }
  .cj-mark{ display:none; }
  .js .cj-track{ height:auto; }
  .cj-stage{ position:static; height:auto; min-height:0; padding:64px 0 4px; display:block; }
  .cj-art{ margin-bottom:14px; }
  .cj-stack{ max-width:min(80vw,400px); margin:0 auto; }
  .cj-plate{ transition:none; }
  .cj-plate.is-all,.cj-plate.is-focus,.cj-plate.is-back,.cj-plate.is-out{
    opacity:1; filter:none; transform:none;
  }
  /* the scrub engine never runs below 1081px (see initJourney), so no panel
     ever receives .is-on — every piece of the cascade must land visible on
     its own, panels and their children alike */
  .cj-panel{
    position:static; opacity:1; transform:none; filter:none;
    pointer-events:auto; margin-bottom:56px;
  }
  .cj-panel > *{ opacity:1; transform:none; }
  .cj-rooms li{ opacity:1; transform:none; }
  .cj-rooms{ max-width:none; }
  .cj-panel p{ max-width:none; }
  .cj-outdoor{ position:static; opacity:1; transform:none; filter:none; margin-top:28px; }
  .cj-outwrap{ margin:0 auto; }
  .cj-panels{ min-height:0; }
  .cj-rail{ display:none; }
  .cj-tip{ display:none; }
}


/* ---------------------------------------------------------------------------
   HOSTED ON EVERY LEVEL — per-floor events + imagery on the overview,
   switched in place (replaces the separate floors page)
   --------------------------------------------------------------------------- */
.fe{ padding:clamp(72px,9vw,110px) 0 clamp(76px,9vw,116px); }
.fe-head{ margin-bottom:30px; }
.fe-head .eyebrow{ display:block; margin-bottom:14px; }
.fe-head h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,4vw,58px); line-height:1.04;
}
.fe-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px; }
.fe-tab{
  font-family:var(--label); font-weight:700;
  font-size:10.5px; letter-spacing:.19em; text-transform:uppercase;
  padding:12px 22px; border-radius:8px;
  border:1px solid rgba(36,42,47,.22);
  color:rgba(36,42,47,.72); background:transparent;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.fe-tab:hover{ transform:translateY(-1px); border-color:rgba(36,42,47,.45); }
.fe-tab.is-active{ background:var(--yellow); border-color:var(--yellow); color:var(--ink); }
.fe-panels{ display:grid; }
.fe-panel{ grid-area:1/1; }
.fe-panel[hidden]{ display:none; }
.fe-events{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px; }

/* client (Aug 6): the chips + photos under each floor plan read as loose
   fragments -- a ruled belt anchors them as the floor's own chapter */
.fe-belt{
  margin-top:clamp(44px,5.5vw,72px);
  padding-top:26px;
  border-top:1px solid rgba(36,42,47,.16);
  margin-bottom:20px;
}
.fe-belt .eyebrow{ color:var(--burgundy); }
.fe-events{ margin-bottom:26px; }
.fe-grid{ gap:16px; }

.fe-chip{
  font-family:var(--label); font-weight:700;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--burgundy);
  padding:10px 16px; border:1px solid rgba(154,30,27,.35); border-radius:100px;
  transition:background .25s ease, transform .25s ease;
}
.fe-chip:hover{ background:rgba(154,30,27,.07); transform:translateY(-1px); }
.fe-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:225px;
  gap:14px;
}
/* each photo is a link to the spotlight it was shot at; hovering names it */
.fe-ph{
  position:relative; display:block; overflow:hidden; border-radius:16px;
}
.fe-ph img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.fe-ph:hover img{ transform:scale(1.045); }
.fe-ph-tag{
  position:absolute; left:12px; bottom:12px;
  padding:8px 14px; border-radius:100px;
  background:rgba(28,33,39,.72); backdrop-filter:blur(8px);
  color:var(--cream); font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  opacity:0; transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.fe-ph:hover .fe-ph-tag,
.fe-ph:focus-visible .fe-ph-tag{ opacity:1; transform:translateY(0); }
.fe-grid .fe-ph:first-child{ grid-row:span 2; }
@media (max-width:900px){
  .fe-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:160px; gap:10px; }
  .fe-tabs{ gap:8px; }
  .fe-tab{ padding:10px 16px; }
}


/* consecutive cream sheets after the journey read as ONE surface — the
   rounded-overlap hand-off is for colour changes, not cream-on-cream seams */
.fe.sheet--cream + .vp-specs-sec.sheet--cream,
.vp-specs-sec.sheet--cream + .sheet--flat{
  margin-top:0;
  border-radius:0;
  box-shadow:none;
}