/* One cinematic background reference frame across public HOME, LEVELS,
   ABOUT, AGENTS, PROJECTS and CONTACT. The background is independent from
   each view's content/height. Artwork, colour and overlays are unchanged. */
#page.page > .backdrop {
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  background-position:center center !important;
  background-size:cover !important;
  transform:none !important;
  animation:none !important;
}
/* A navigation button never changes its geometry due to mouse hover
   or the split-flap layer. Active page highlight remains intentional. */
#page .top .tabs {display:flex;align-items:stretch;}
#page .top .tabs > button,
#page .top .tabs > button:hover,
#page .top .tabs > button:focus,
#page .top .tabs > button.split-flap-active {
  position:relative !important;
  isolation:isolate !important;
  box-sizing:border-box !important;
  flex:0 0 auto !important;
  min-width:98px !important;
  width:auto !important;
  height:33px !important;
  padding:10px 17px !important;
  font-family:'Courier New',monospace !important;
  font-size:11px !important;
  font-weight:700 !important;
  font-style:normal !important;
  line-height:12px !important;
  letter-spacing:normal !important;
  transform:none !important;
  scale:1 !important;
  filter:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  transition:none !important;
}
#page .top .tabs > button:not([aria-selected="true"]),
#page .top .tabs > button:not([aria-selected="true"]):hover,
#page .top .tabs > button:not([aria-selected="true"]):focus {
  background:transparent !important;
  color:#f1f5f6 !important;
}
#page .top .tabs > button[aria-selected="true"] {
  background:#e0e9e5 !important;
  color:#0b1212 !important;
}
#page .top .tabs > button .nav-flap-overlay,
#page .top .tabs > button .nav-flap-overlay .split-flap-char {
  box-sizing:border-box !important;
  background:transparent !important;
  filter:none !important;
  scale:1 !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
#page .top .tabs > button .nav-flap-overlay {
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  pointer-events:none !important;
  font:inherit !important;
  color:inherit !important;
}
#page .top .tabs > button .nav-flap-overlay .split-flap-char {
  display:inline-block !important;
  width:auto !important;
  min-width:0 !important;
  font:inherit !important;
  transform-origin:center !important;
  /* Keep the existing per-letter flip transform/animation intact. */
}
@media(max-width:1050px) {
 #page .top .tabs > button, #page .top .tabs > button:hover {
   min-width:0 !important;
   height:auto !important;
   padding:10px 10px !important;
 }
}
@media(max-width:680px) {
 #page .top .tabs > button, #page .top .tabs > button:hover {
   flex:1 1 0 !important;
   font-size:9px !important;
   padding:10px 3px !important;
 }
}

/* One consistent typography size for all five PROJECTS concept titles.
   Keep the established OPERATIONS / MARKETING size for PORTAL, RMS, PMS too. */
#page.page[data-view="projects"] .ex-screen .ex-hero-title {
  font-size:clamp(38px,4.2vw,68px) !important;
  line-height:1 !important;
  letter-spacing:-.065em !important;
  white-space:nowrap !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}
@media(max-width:760px){
 #page.page[data-view="projects"] .ex-screen .ex-hero-title {
   font-size:clamp(24px,6.4vw,45px) !important;
 }
}