/* mascot.css
   Live homepage mascot + capability-showcase stage. Scoped under .mstage-*
   so it layers on top of style.css's existing tokens (--bg, --aqua, --gold,
   etc.) without redefining global element rules. Mounted inside the existing
   .feature-frame hero slot on the "/" route (see app.js renderHome()).
*/

.mascot-stage-mount {
  padding: 0;
}

.mstage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(143,232,245,.07), transparent 60%),
    var(--surface);
}

.mstage-bg-layers {
  position: absolute;
  inset: 0;
}

.mstage-bg-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.1s ease;
  display: block;
  overflow: hidden;
}

.mstage-bg-layer.is-active {
  opacity: 1;
  z-index: 1;
}

video.mstage-bg-layer {
  object-fit: cover;
  background: #05070a;
}

/* Persistent idle/neutral base layer -- "living inside a computer" ambient
   (grid, glow, drifting particles, scanlines). Always opacity:1 and sits at
   z-index 0, i.e. *beneath* every capability layer above. It shows through
   before a capability is chosen and briefly during the crossfade between
   capabilities; once a capability layer reaches opacity 1 it fully covers it,
   exactly as the Director asked ("that is the only time the background
   changes"). Not a selectable topic -- excluded from TOPIC_ORDER in mascot.js. */
.mstage-bg-layer.mstage-bg-idle {
  opacity: 1;
  z-index: 0;
  transition: none;
}

.mstage-overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(72px, 12vh, 132px) clamp(18px, 5vw, 64px) clamp(28px, 5vh, 56px);
  pointer-events: none;
}

.mstage-mascot-wrap {
  position: relative;
  width: min(38vw, 480px);
  height: min(38vw, 480px);
  max-height: 52%;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* No box drop-shadow -- a rectangular shadow is what made this read as a
     card/tile floating on top of the scene instead of a figure standing in
     it. A soft contact shadow directly under the feet reads as grounded
     instead. */
}

.mstage-mascot-wrap::after {
  content: '';
  position: absolute;
  bottom: 6%;
  left: 50%;
  width: 44%;
  height: 5%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent 75%);
  z-index: 1;
  pointer-events: none;
}

.mstage-mascot-canvas {
  display: none;
}

.mstage-mascot-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: bottom center;
  border-radius: 0;
  /* The primary source is a real alpha-channel WebM (rembg-matted, true
     per-pixel transparency) -- no blend-mode/mask trick needed or wanted;
     that old approach relied on the backdrop being pure black, which it
     wasn't (measured (78,77,83) in one corner), and would incorrectly wash
     out legitimately opaque pixels now that real alpha handles it. */
}

.mstage-caption {
  max-width: min(680px, 92%);
  width: 100%;
  background: rgba(5,6,7,.74);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 24px;
  backdrop-filter: blur(8px);
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.48;
  pointer-events: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}

.mstage-caption-name {
  display: inline-block;
  color: var(--aqua);
  font-weight: 700;
  margin-right: 7px;
}

.mstage-caption-text {
  color: var(--text);
}

.mstage-pills {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  pointer-events: auto;
}

.mstage-pill {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .01em;
  line-height: 1.2;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(5,6,7,.55);
  color: var(--dim);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.mstage-pill:hover {
  border-color: var(--line);
  color: var(--muted);
}

.mstage-pill.is-active {
  background: rgba(143,232,245,.16);
  border-color: var(--aqua);
  color: var(--aqua);
}

.mstage-pause {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 3;
  font-family: inherit;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-soft);
  background: rgba(5,6,7,.55);
  color: var(--dim);
  cursor: pointer;
  pointer-events: auto;
}

.mstage-pause:hover {
  color: var(--muted);
  border-color: var(--line);
}

/* Prominent, hard-to-miss -- this only appears when a browser (almost
   always mobile) has actually blocked audio autoplay, so it needs to read
   as "tap this to fix it," not blend in like the small corner controls. */
.mstage-sound-unlock {
  position: absolute;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%);
  z-index: 5;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(143,232,245,.55);
  background: rgba(10,14,17,.88);
  color: #cff3fa;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 0 0 1px rgba(143,232,245,.12), 0 6px 20px rgba(0,0,0,.35);
  animation: mstage-sound-pulse 1.8s ease-in-out infinite;
}

.mstage-sound-unlock[hidden] { display: none; }

@keyframes mstage-sound-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(143,232,245,.12), 0 6px 20px rgba(0,0,0,.35); }
  50% { box-shadow: 0 0 0 6px rgba(143,232,245,.10), 0 6px 20px rgba(0,0,0,.35); }
}

@media (prefers-reduced-motion: reduce) {
  .mstage-sound-unlock { animation: none; }
}

.mstage-placeholder-tag {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 3;
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(233,111,98,.85);
  background: rgba(5,6,7,.6);
  border: 1px solid rgba(233,111,98,.35);
  border-radius: 5px;
  padding: 3px 6px;
  pointer-events: none;
}

/* ---------------------------------------------------------------------- */
/* Magazine cover assembly (DOM layer)                                     */
/* ---------------------------------------------------------------------- */
.mag-cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #1a1420, #0b0d10 68%);
}
.mag-cover-sheet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(150deg, #221a2c, #171018);
  overflow: hidden;
}
.mag-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  opacity: 0;
  transform: scale(.94);
  transition: opacity .7s ease, transform .7s ease;
}
/* Permanent scrim over the cover photo -- dark at top (masthead) and bottom
   (headline/dek) so real cover chrome stays legible over whatever the photo
   is doing tonally, same idea as a real print cover's top/bottom gradients. */
.mag-photo-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,13,16,.62) 0%, rgba(11,13,16,.08) 26%, rgba(11,13,16,.05) 52%, rgba(11,13,16,.88) 100%);
  pointer-events: none;
}
.mag-masthead {
  position: absolute;
  top: 5%;
  left: 0;
  right: 0;
  text-align: center;
  font-weight: 900;
  font-size: clamp(28px, 5vw, 54px);
  letter-spacing: .12em;
  color: var(--text);
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .5s ease, transform .5s ease;
}
.mag-subhead {
  position: absolute;
  top: calc(5% + 3.4em);
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--dim);
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: .15s;
}
.mag-issue-tag {
  position: absolute;
  top: 4%;
  left: 4%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--dim);
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: .2s;
}
.mag-coverline {
  position: absolute;
  right: 4%;
  font-size: clamp(10px, 1.1vw, 14px);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--gold);
  background: rgba(5,6,7,.55);
  padding: 5px 10px;
  border-radius: 3px;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.mag-coverline:nth-of-type(1) { top: 24%; }
.mag-coverline:nth-of-type(2) { top: 32%; }
.mag-coverline:nth-of-type(3) { top: 40%; }
.mag-coverline:nth-of-type(4) { top: 48%; }
.mag-coverline:nth-of-type(5) { top: 56%; }
.mag-headline {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 16%;
  font-size: clamp(20px, 3vw, 40px);
  font-weight: 900;
  line-height: 1.05;
  color: #fff7df;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.mag-dek {
  position: absolute;
  left: 5%;
  right: 30%;
  bottom: 10%;
  font-size: clamp(11px, 1vw, 14px);
  color: var(--muted);
  line-height: 1.4;
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: 1.05s;
}
.mag-footer-strip {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 4.5%;
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  letter-spacing: .08em;
  color: var(--dim);
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: 1.2s;
}
.mag-barcode {
  position: absolute;
  left: 5%;
  bottom: 8%;
  width: 44px;
  height: 16px;
  background: repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 3px);
  opacity: 0;
  transition: opacity .5s ease;
}
.mstage-bg-layer.is-active .mag-photo { opacity: 1; transform: scale(1); transition-delay: .15s; }
.mstage-bg-layer.is-active .mag-masthead { opacity: 1; transform: translateY(0); transition-delay: .05s; }
.mstage-bg-layer.is-active .mag-subhead { opacity: 1; }
.mstage-bg-layer.is-active .mag-issue-tag { opacity: 1; }
.mstage-bg-layer.is-active .mag-coverline:nth-of-type(1) { opacity: 1; transform: translateX(0); transition-delay: .5s; }
.mstage-bg-layer.is-active .mag-coverline:nth-of-type(2) { opacity: 1; transform: translateX(0); transition-delay: .62s; }
.mstage-bg-layer.is-active .mag-coverline:nth-of-type(3) { opacity: 1; transform: translateX(0); transition-delay: .74s; }
.mstage-bg-layer.is-active .mag-coverline:nth-of-type(4) { opacity: 1; transform: translateX(0); transition-delay: .86s; }
.mstage-bg-layer.is-active .mag-coverline:nth-of-type(5) { opacity: 1; transform: translateX(0); transition-delay: .98s; }
.mstage-bg-layer.is-active .mag-headline { opacity: 1; transform: translateY(0); transition-delay: 1.05s; }
.mstage-bg-layer.is-active .mag-dek { opacity: 1; }
.mstage-bg-layer.is-active .mag-footer-strip { opacity: 1; }
.mstage-bg-layer.is-active .mag-barcode { opacity: 1; transition-delay: 1.3s; }

/* ---------------------------------------------------------------------- */
/* Magazine insert -- real open double-page spread (DOM layer)             */
/* Left page: a real Client Select photo, full-bleed to the spine.         */
/* Right page: genuine editorial copy written for that photo (never       */
/* blank -- the Director's explicit note). Full-bleed per the site's      */
/* established "no container" convention (inset:0 all the way down).      */
/* ---------------------------------------------------------------------- */
.mag-insert {
  position: absolute;
  inset: 0;
  background: #0b0d10;
}
.mag-insert-sheet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  background: #100d17;
}
.mag-insert-page {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}
.mag-insert-page-photo {
  background: #05070a;
}
.mag-insert-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  opacity: 0;
  transform: scale(.94);
  transition: opacity .7s ease, transform .7s ease;
}
.mag-insert-photo-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5,7,10,0) 62%, rgba(5,7,10,.5) 100%), linear-gradient(0deg, rgba(5,7,10,.55) 0%, rgba(5,7,10,0) 24%);
  pointer-events: none;
}
.mag-insert-cutline {
  position: absolute;
  left: 5%;
  bottom: 4%;
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(244,247,251,.75);
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: .9s;
}
/* Center spine -- a soft gutter shadow so the two pages read as one open
   magazine rather than two unrelated panels. */
.mag-insert-spine {
  flex: 0 0 3px;
  height: 100%;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,0) 100%);
  box-shadow: -10px 0 22px -6px rgba(0,0,0,.6), 10px 0 22px -6px rgba(0,0,0,.6);
}
.mag-insert-page-copy {
  background: #100d17;
  padding: 6% 6.5%;
  display: flex;
  flex-direction: column;
  gap: 3.5%;
}
.mag-insert-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4%;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .5s ease, transform .5s ease;
}
.mag-insert-kicker {
  font-size: clamp(9px, .9vw, 12px);
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--gold);
}
.mag-insert-title {
  font-size: clamp(20px, 2.6vw, 34px);
  font-weight: 900;
  color: var(--text);
}
.mag-insert-dek {
  font-size: clamp(12px, 1.3vw, 16px);
  font-style: italic;
  color: var(--muted);
  margin: 0;
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: .3s;
}
.mag-insert-body {
  font-size: clamp(11px, 1.05vw, 14px);
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
}
.mag-insert-body:nth-of-type(2) { transition-delay: .45s; }
.mag-insert-body:nth-of-type(3) { transition-delay: .6s; }
.mag-insert-pullquote {
  font-size: clamp(12px, 1.4vw, 17px);
  font-style: italic;
  color: var(--text);
  max-width: 60ch;
  border-left: 2px solid var(--aqua);
  padding-left: 16px;
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: .85s;
}
.mag-insert-byline {
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--dim);
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: .95s;
}
.mag-insert-folio {
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--dim);
  border-top: 1px solid var(--line-soft);
  padding-top: 3%;
  margin-top: auto;
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: 1.05s;
}
.mstage-bg-layer.is-active .mag-insert-photo { opacity: 1; transform: scale(1); }
.mstage-bg-layer.is-active .mag-insert-cutline { opacity: 1; }
.mstage-bg-layer.is-active .mag-insert-header { opacity: 1; transform: translateY(0); }
.mstage-bg-layer.is-active .mag-insert-dek { opacity: 1; }
.mstage-bg-layer.is-active .mag-insert-body { opacity: 1; transform: translateY(0); }
.mstage-bg-layer.is-active .mag-insert-pullquote { opacity: 1; }
.mstage-bg-layer.is-active .mag-insert-byline { opacity: 1; }
.mstage-bg-layer.is-active .mag-insert-folio { opacity: 1; }

@media (max-width: 820px) {
  .mag-insert-sheet { flex-direction: column; }
  .mag-insert-spine { flex: 0 0 3px; width: 100%; height: 3px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,0) 100%); }
  .mag-insert-page { flex-basis: 50%; }
}

/* ---------------------------------------------------------------------- */
/* Model cover -- real photography + cover chrome                          */
/* ---------------------------------------------------------------------- */
.model-cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #241a1a, #0b0d10 70%);
}
.model-cover-sheet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #2a2226, #171012);
  overflow: hidden;
}
.model-cover-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  opacity: 0;
  transform: scale(.95);
  transition: opacity .8s ease, transform .8s ease;
}
/* Permanent scrim, same purpose as .mag-photo-scrim -- keeps the masthead
   and coverlines legible over whatever the photo's own lighting is doing. */
.model-cover-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23,16,18,.62) 0%, rgba(23,16,18,.06) 26%, rgba(23,16,18,.06) 56%, rgba(23,16,18,.9) 100%);
  pointer-events: none;
}
.model-cover-masthead {
  position: absolute;
  top: 5%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(28px, 5vw, 54px);
  font-weight: 900;
  letter-spacing: .14em;
  color: var(--text);
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: .1s;
}
.model-cover-subhead {
  position: absolute;
  top: calc(5% + 3.4em);
  left: 0;
  right: 0;
  text-align: center;
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--dim);
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: .2s;
}
.model-cover-tag {
  position: absolute;
  top: 4%;
  left: 4%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: .25s;
}
.model-cover-side-lines {
  position: absolute;
  right: 5%;
  top: 28%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: .55s;
}
.model-cover-side-lines span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.model-cover-lines {
  position: absolute;
  left: 6%;
  bottom: 8%;
  right: 30%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: .9s;
}
.model-cover-lines span {
  font-size: clamp(10px, 1.1vw, 14px);
  font-weight: 800;
  color: var(--gold);
  letter-spacing: .03em;
}
.model-cover-barcode {
  position: absolute;
  left: 6%;
  bottom: 4%;
  width: 44px;
  height: 16px;
  background: repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 3px);
  opacity: 0;
  transition: opacity .5s ease;
  transition-delay: 1.05s;
}
.mstage-bg-layer.is-active .model-cover-photo { opacity: 1; transform: scale(1); }
.mstage-bg-layer.is-active .model-cover-masthead { opacity: 1; }
.mstage-bg-layer.is-active .model-cover-subhead { opacity: 1; }
.mstage-bg-layer.is-active .model-cover-tag { opacity: 1; }
.mstage-bg-layer.is-active .model-cover-side-lines { opacity: 1; }
.mstage-bg-layer.is-active .model-cover-lines { opacity: 1; }
.mstage-bg-layer.is-active .model-cover-barcode { opacity: 1; }

/* ---------------------------------------------------------------------- */
/* Website-mockup family (real DOM/CSS mini sites, shared chrome shell)    */
/* ---------------------------------------------------------------------- */
/* Full-bleed, edge-to-edge -- the mockup site IS the background, not a
   preview card floating in a padded frame. The thin top chrome bar stays
   (spanning the full width) so it still reads as "you're looking at a live
   website," without ever bounding the content into a smaller rectangle. */
.site-mock-wrap {
  position: absolute;
  inset: 0;
  background: #05070a;
}
.site-mock-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
}
/* Color-matched fallback so any strip below the scaled mockup (on stage
   aspect ratios taller than the design) reads as more of that site's own
   background, never as black container padding. */
#bg-real-estate .site-mock-frame { background: #0e1a22; }
#bg-restaurant .site-mock-frame { background: #241a12; }
#bg-construction-site .site-mock-frame { background: #17191b; }
.site-mock-chrome {
  height: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  background: #1c1f24;
}
.site-mock-chrome span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
}
.site-mock-body {
  width: 960px;
  transform-origin: top left;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.mstage-bg-layer.is-active .site-mock-body { animation: mockAssemble .9s ease both; }
@keyframes mockAssemble {
  from { opacity: 0; transform-origin: top left; filter: blur(2px); }
  to { opacity: 1; filter: blur(0); }
}

/* Site tab nav + tab-cycling pages (shared across all 3 site mockups) -----*/
/* .site-tabpage toggles between position:absolute (hidden, out of flow) and
   position:relative (visible, in flow) via .is-tab-active -- only the
   in-flow page determines the container's height, so each tab's page can
   be a different length without leaving blank space, while opacity/transform
   still crossfade the swap. Driven by a small setInterval in mascot.js,
   scoped to whichever of the 3 site layers is the active mascot background. */
.site-tabs { display: flex; gap: 6px; }
.site-tab { font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); opacity: .6; transition: opacity .3s ease, background .3s ease, color .3s ease; }
.site-tab.is-tab-active { opacity: 1; }
.site-tabpages { position: relative; overflow: hidden; }
.site-tabpage {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.site-tabpage.is-tab-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Real estate mock -------------------------------------------------------*/
.re-mock { background: #0e1a22; color: #e7f1f5; }
.re-mock .rm-nav { display: flex; justify-content: space-between; align-items: center; padding: 14px 28px; background: #0b141a; border-bottom: 1px solid rgba(255,255,255,.08); }
.re-mock .rm-brand { font-weight: 800; letter-spacing: .08em; font-size: 14px; color: #bfe3ea; }
.re-mock .site-tab { color: #7f9aa3; }
.re-mock .site-tab.is-tab-active { color: #0e1a22; background: #c9a24a; }
.re-mock .rm-hero { padding: 34px 28px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; background: linear-gradient(120deg, #123240, #0e1a22); }
.re-mock .rm-hero h2 { margin: 0 0 8px; font-size: 26px; line-height: 1.05; color: #fff; }
.re-mock .rm-hero p { margin: 0 0 14px; font-size: 11px; color: #9fb8c0; max-width: 34ch; }
.re-mock .rm-cta { display: inline-block; font-size: 11px; font-weight: 700; padding: 8px 16px; border-radius: 4px; background: #c9a24a; color: #0e1a22; }
.re-mock .rm-hero-art { border-radius: 6px; background: linear-gradient(135deg, #1e4a58, #274d3a); min-height: 120px; }
.re-mock .rm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 22px 28px 30px; background: #0e1a22; }
.re-mock .rm-cards-full { grid-template-columns: repeat(2, 1fr); }
.re-mock .rm-card { background: #10222b; border: 1px solid rgba(255,255,255,.06); border-radius: 6px; overflow: hidden; }
.re-mock .rm-card-art { height: 64px; background: linear-gradient(135deg, #1c3b46, #16302c); }
.re-mock .rm-card-body { padding: 10px 12px; }
.re-mock .rm-price { display: inline-block; font-size: 11px; font-weight: 800; color: #c9a24a; margin-bottom: 4px; }
.re-mock .rm-addr { font-size: 10px; color: #9fb8c0; }
.re-mock .rm-meta { margin-top: 6px; font-size: 9px; color: #6f8990; }
.re-mock .rm-about { padding: 26px 28px 6px; background: #0e1a22; }
.re-mock .rm-about h2 { margin: 0 0 8px; font-size: 20px; color: #fff; }
.re-mock .rm-about p { margin: 0; font-size: 11px; line-height: 1.55; color: #9fb8c0; max-width: 56ch; }
.re-mock .rm-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 18px 28px 26px; background: #0e1a22; }
.re-mock .rm-feature { display: flex; align-items: center; gap: 10px; font-size: 10.5px; color: #cfe2e7; }
.re-mock .rm-feature-num { font-size: 11px; font-weight: 800; color: #c9a24a; }
.re-mock .rm-contact { padding: 26px 28px 30px; background: #0e1a22; }
.re-mock .rm-contact h2 { margin: 0 0 12px; font-size: 20px; color: #fff; }
.re-mock .rm-contact-row { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; padding: 8px 0; border-bottom: 1px dotted rgba(255,255,255,.12); color: #9fb8c0; }
.re-mock .rm-contact-row span:first-child { font-weight: 700; color: #cfe2e7; }
.re-mock .rm-footer { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; padding: 14px 28px; background: #0b141a; border-top: 1px solid rgba(255,255,255,.08); font-size: 9.5px; color: #6f8990; }
.re-mock .rm-footer-links { color: #9fb8c0; }
.re-mock .rm-section-title { padding: 0 28px; margin: 4px 0 12px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #c9a24a; background: #0e1a22; }
.re-mock .rm-neighborhoods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0 28px 26px; background: #0e1a22; }
.re-mock .rm-neighborhood { display: flex; flex-direction: column; gap: 4px; }
.re-mock .rm-neighborhood-art { height: 46px; border-radius: 6px; background: linear-gradient(135deg, #274d3a, #1c3b46); margin-bottom: 4px; }
.re-mock .rm-neighborhood-name { font-size: 11px; font-weight: 700; color: #e7f1f5; }
.re-mock .rm-neighborhood-meta { font-size: 9px; color: #6f8990; }

/* Restaurant mock ---------------------------------------------------------*/
.rest-mock { background: #241a12; color: #f6ead9; }
.rest-mock .rt-nav { display: flex; justify-content: space-between; align-items: center; padding: 14px 28px; background: #1c130c; border-bottom: 1px solid rgba(255,255,255,.06); }
.rest-mock .rt-brand { font-weight: 800; font-size: 16px; font-style: italic; color: #f3c98a; }
.rest-mock .site-tab { color: #c7a488; }
.rest-mock .site-tab.is-tab-active { color: #fff2e2; background: #c2542f; }
.rest-mock .rt-hero { padding: 30px 28px; text-align: center; background: linear-gradient(160deg, #3a2416, #241a12); }
.rest-mock .rt-hero h2 { margin: 0 0 8px; font-size: 24px; font-style: italic; color: #fbe4c4; }
.rest-mock .rt-hero p { margin: 0 auto 14px; font-size: 11px; color: #d8b493; max-width: 32ch; }
.rest-mock .rt-cta { display: inline-block; font-size: 11px; font-weight: 700; padding: 8px 18px; border-radius: 999px; background: #c2542f; color: #fff2e2; }
.rest-mock .rt-featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 28px 26px; background: #241a12; }
.rest-mock .rt-feature-dish { display: flex; flex-direction: column; gap: 6px; }
.rest-mock .rt-feature-art { height: 58px; border-radius: 6px; background: linear-gradient(135deg, #4a2c18, #3a2416); }
.rest-mock .rt-feature-name { font-size: 11px; font-weight: 700; color: #fbe4c4; }
.rest-mock .rt-feature-price { font-size: 10px; color: #f3c98a; }
.rest-mock .rt-section-title { padding: 0 28px; margin: 0 0 12px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #f3c98a; background: #241a12; text-align: center; }
.rest-mock .rt-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 28px 28px; background: #241a12; }
.rest-mock .rt-gallery-shot { height: 52px; border-radius: 6px; background: linear-gradient(135deg, #3a2416, #241a12); }
.rest-mock .rt-menu-cat { background: #241a12; padding-top: 18px; }
.rest-mock .rt-menu-cat-title { padding: 0 28px; margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #f3c98a; }
.rest-mock .rt-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 0 28px 20px; background: #241a12; }
.rest-mock .rt-dish { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; border-bottom: 1px dotted rgba(255,255,255,.14); padding-bottom: 5px; margin-bottom: 8px; }
.rest-mock .rt-dish-name { font-size: 11px; font-weight: 700; color: #fbe4c4; }
.rest-mock .rt-dish-desc { font-size: 9px; color: #b6906f; display: block; }
.rest-mock .rt-dish-price { font-size: 11px; color: #f3c98a; white-space: nowrap; }
.rest-mock .rt-about { padding: 30px 28px; background: #241a12; }
.rest-mock .rt-about h2 { margin: 0 0 10px; font-size: 20px; color: #fbe4c4; }
.rest-mock .rt-about p { margin: 0; font-size: 11px; line-height: 1.55; color: #d8b493; max-width: 56ch; }
.rest-mock .rt-contact { padding: 26px 28px 30px; background: #241a12; }
.rest-mock .rt-contact h2 { margin: 0 0 12px; font-size: 20px; color: #fbe4c4; }
.rest-mock .rt-contact-row { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; padding: 8px 0; border-bottom: 1px dotted rgba(255,255,255,.12); color: #d8b493; }
.rest-mock .rt-contact-row span:first-child { font-weight: 700; color: #fbe4c4; }
.rest-mock .rt-footer { display: flex; justify-content: space-between; padding: 14px 28px; background: #17100a; border-top: 1px solid rgba(255,255,255,.06); font-size: 9.5px; color: #a1795c; }

/* Construction company mock ------------------------------------------------*/
.con-mock { background: #17191b; color: #f0efe9; }
.con-mock .cc-nav { display: flex; justify-content: space-between; align-items: center; padding: 14px 28px; background: #f4c531; color: #17191b; }
.con-mock .cc-brand { font-weight: 900; letter-spacing: .04em; font-size: 15px; }
.con-mock .site-tab { color: rgba(23,25,27,.6); }
.con-mock .site-tab.is-tab-active { color: #f4c531; background: #17191b; }
.con-mock .cc-hero { padding: 32px 28px; background: repeating-linear-gradient(135deg, #1d2023 0 18px, #17191b 18px 36px); }
.con-mock .cc-hero h2 { margin: 0 0 8px; font-size: 24px; color: #fff; max-width: 20ch; }
.con-mock .cc-hero p { margin: 0 0 14px; font-size: 11px; color: #b9bcc0; max-width: 34ch; }
.con-mock .cc-cta { display: inline-block; font-size: 11px; font-weight: 800; padding: 8px 16px; background: #f4c531; color: #17191b; border-radius: 3px; }
.con-mock .cc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 20px 28px; background: #17191b; border-top: 1px solid rgba(255,255,255,.06); }
.con-mock .cc-stat { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.con-mock .cc-stat-num { font-size: 20px; font-weight: 900; color: #f4c531; }
.con-mock .cc-stat-label { font-size: 9px; font-weight: 700; letter-spacing: .02em; color: #b9bcc0; }
.con-mock .cc-section-title { padding: 4px 28px 12px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #f4c531; background: #17191b; }
.con-mock .cc-gallery-home { padding: 0 28px 26px; background: #17191b; }
.con-mock .cc-gallery-home .cc-thumb { height: 44px; }
.con-mock .cc-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 20px 28px; background: #1d2023; }
.con-mock .cc-service { background: #232628; border: 1px solid rgba(255,255,255,.06); border-radius: 4px; padding: 10px 8px; text-align: center; }
.con-mock .cc-service-icon { width: 20px; height: 20px; margin: 0 auto 6px; border-radius: 3px; background: #f4c531; }
.con-mock .cc-service span { font-size: 9.5px; font-weight: 700; color: #d8dade; }
.con-mock .cc-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 20px 28px 0; background: #1d2023; }
.con-mock .cc-thumb { height: 34px; border-radius: 3px; background: linear-gradient(135deg, #3a3f43, #232628); }
.con-mock .cc-testimonial { padding: 16px 28px; background: #1d2023; color: #b9bcc0; font-size: 12px; font-style: italic; }
.con-mock .cc-contact-page { padding: 26px 28px 30px; background: #1d2023; }
.con-mock .cc-contact-page h2 { margin: 0 0 12px; font-size: 20px; color: #fff; }
.con-mock .cc-contact-row { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; padding: 8px 0; border-bottom: 1px dotted rgba(255,255,255,.12); color: #b9bcc0; }
.con-mock .cc-contact-row span:first-child { font-weight: 700; color: #f4c531; }
.con-mock .cc-contact { display: flex; justify-content: space-between; align-items: center; padding: 12px 28px; background: #f4c531; color: #17191b; font-size: 11px; font-weight: 800; }

@media (max-width: 980px) {
  .mstage-mascot-wrap { width: min(52vw, 240px); height: min(52vw, 240px); max-height: 38%; }
  .mstage-overlay { padding: clamp(64px, 10vh, 96px) 16px 24px; }
  .mstage-pills { top: 12px; left: 12px; right: 12px; gap: 6px; }
  .mstage-pill { font-size: 10.5px; padding: 5px 10px; }
}