:root {
  --gold: #ffd66b;
  --orange: #ff8e53;
  --mint: #42f5cf;
  --cyan: #31d9ff;
  --violet: #a576ff;
  --pink: #ff4fb8;
  --ivory: #fff8e9;
  --ink: #050407;
  --header-height: clamp(82px, 12.5vh, 118px);
  --footer-height: clamp(74px, 10.5vh, 98px);
  --pointer-x: 50%;
  --pointer-y: 45%;

  /* UNIVERSAL ORB SPEED CONTROL
     Increase this duration to slow every perimeter orb down; decrease it
     to speed every orb up. 12.65s is 10% slower than the former 11.5s
     desktop baseline. Platform and per-orb variation are added below. */
  --orb-master-duration: 12.65s;
  --orb-platform-adjust: 0s;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body.portal-page {
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: var(--ivory);
  background: #030206;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.portal-page a { color: inherit; }

.portal-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: var(--header-height) minmax(0, 1fr) var(--footer-height);
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 214, 107, 0.12), transparent 24%),
    radial-gradient(circle at 15% 82%, rgba(66, 245, 207, 0.13), transparent 35%),
    radial-gradient(circle at 88% 18%, rgba(255, 79, 184, 0.13), transparent 34%),
    linear-gradient(125deg, #07050d 0%, #030206 48%, #080511 100%);
}

.cinema-world,
.cinema-world > span {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cinema-world {
  z-index: -1;
  overflow: hidden;
}

.cinema-curtain {
  width: 29vw;
  opacity: 0.42;
  filter: saturate(1.35);
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.025) 0 8px,
      rgba(255,255,255,.085) 9px 11px,
      rgba(0,0,0,.08) 12px 24px),
    linear-gradient(90deg, rgba(255, 79, 184, 0.32), rgba(46, 5, 39, 0.08));
  transform: skewX(-7deg) scaleX(1.15);
  transform-origin: left center;
  animation: curtainBreathe 9s ease-in-out infinite alternate;
}

.curtain-left { right: auto; }

.curtain-right {
  left: auto;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.02) 0 8px,
      rgba(255,255,255,.08) 9px 11px,
      rgba(0,0,0,.08) 12px 24px),
    linear-gradient(270deg, rgba(49, 217, 255, 0.28), rgba(4, 29, 41, 0.06));
  transform: skewX(7deg) scaleX(1.15);
  transform-origin: right center;
  animation-delay: -4.5s;
}

.cinema-beam {
  left: 50%;
  width: 65vw;
  height: 140vh;
  opacity: 0.17;
  filter: blur(7px);
  transform-origin: 50% -8%;
  clip-path: polygon(48% 0, 52% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
}

.beam-one {
  background: linear-gradient(to bottom, rgba(255, 214, 107, 0.95), transparent 78%);
  animation: beamSweepOne 14s ease-in-out infinite alternate;
}

.beam-two {
  background: linear-gradient(to bottom, rgba(49, 217, 255, 0.9), transparent 76%);
  animation: beamSweepTwo 18s ease-in-out -8s infinite alternate;
}

.beam-three {
  background: linear-gradient(to bottom, rgba(255, 79, 184, 0.85), transparent 76%);
  animation: beamSweepThree 16s ease-in-out -3s infinite alternate;
}

.cinema-ribbon {
  inset: auto;
  width: 62vw;
  height: 26vh;
  border: 2px solid currentColor;
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.22;
  filter: blur(1px) drop-shadow(0 0 16px currentColor);
  transform: rotate(-13deg);
  animation: ribbonFlow 12s ease-in-out infinite alternate;
}

.ribbon-one {
  left: -12vw;
  top: 22vh;
  color: var(--mint);
}

.ribbon-two {
  right: -16vw;
  top: 37vh;
  color: var(--pink);
  transform: rotate(16deg);
  animation-delay: -6s;
}

.ribbon-three {
  left: 20vw;
  bottom: 7vh;
  color: var(--gold);
  opacity: 0.16;
  transform: rotate(4deg);
  animation-delay: -3s;
}

.cinema-vignette {
  background: radial-gradient(circle at center, transparent 32%, rgba(0,0,0,.78) 115%);
}

.cinema-grain {
  opacity: 0.08;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
  animation: grainJitter .32s steps(2) infinite;
}

.cinema-prisms { overflow: hidden; }

.cinema-prism {
  position: absolute;
  left: var(--left);
  top: var(--top);
  width: var(--size);
  aspect-ratio: 1;
  opacity: var(--opacity);
  background: linear-gradient(135deg, var(--color-a), transparent 48%, var(--color-b));
  clip-path: polygon(50% 0, 100% 100%, 0 76%);
  border: 1px solid rgba(255,255,255,.28);
  filter: drop-shadow(0 0 9px var(--color-a));
  animation: prismFloat var(--duration) ease-in-out var(--delay) infinite alternate;
}

.portal-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: max(8px, env(safe-area-inset-top)) clamp(18px, 4vw, 58px) 7px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(3,2,6,.94), rgba(3,2,6,.45));
  backdrop-filter: blur(18px) saturate(1.25);
}

.portal-brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 17px);
  min-width: 0;
  text-decoration: none;
}

.portal-logo-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(59px, 8vh, 86px);
  aspect-ratio: 1;
  flex: 0 0 auto;
}

.portal-logo-glow {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background: conic-gradient(from 40deg, var(--gold), var(--pink), var(--cyan), var(--mint), var(--gold));
  filter: blur(8px);
  opacity: 0.58;
  animation: logoPulse 5s ease-in-out infinite;
}

.portal-logo-stage::before,
.portal-logo-stage::after {
  content: "";
  position: absolute;
  inset: 1%;
  border: 1px solid rgba(255, 234, 173, .52);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(255, 214, 107, .22);
}

.portal-logo-stage::after {
  inset: -7%;
  border-color: transparent rgba(49, 217, 255, .46) transparent rgba(255, 79, 184, .48);
  animation: logoSpin 10s linear infinite;
}

.portal-logo {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.82));
}

.portal-brand-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1;
}

.portal-brand-name {
  color: #fff2c9;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  font-style: italic;
  font-weight: 700;
  letter-spacing: .01em;
  text-shadow: 0 0 22px rgba(255, 214, 107, .28);
  white-space: nowrap;
}

.portal-brand-line {
  margin-top: 6px;
  color: rgba(255,248,233,.62);
  font-size: clamp(.55rem, .9vw, .73rem);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.portal-header-cue {
  display: flex;
  align-items: center;
  gap: 13px;
  color: rgba(255,248,233,.76);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.05rem, 1.9vw, 1.6rem);
  font-style: italic;
  letter-spacing: .04em;
  white-space: nowrap;
}

.portal-header-cue span {
  width: clamp(28px, 5vw, 72px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
  box-shadow: 0 0 12px rgba(255,214,107,.45);
}

.portal-header-cue span:last-child {
  background: linear-gradient(90deg, var(--gold), transparent);
}

.portal-stage {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  transition: grid-template-columns 600ms cubic-bezier(.22,.72,.16,1);
}

.portal-shell[data-active="property_intake"] .portal-stage { grid-template-columns: 1.12fr .88fr; }
.portal-shell[data-active="showcase"] .portal-stage { grid-template-columns: .88fr 1.12fr; }

.portal-choice {
  --accent-a: var(--gold);
  --accent-b: var(--mint);
  --accent-rgb: 255, 214, 107;
  position: relative;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: clamp(25px, 4.6vw, 68px);
  color: var(--ivory);
  text-decoration: none;
  isolation: isolate;
  transition: filter 450ms ease;
}

.portal-choice-showcase {
  --accent-a: var(--cyan);
  --accent-b: var(--pink);
  --accent-rgb: 49, 217, 255;
}

.choice-backdrop {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(145deg, rgba(255,142,83,.19), transparent 33%),
    radial-gradient(circle at 28% 35%, rgba(66,245,207,.22), transparent 31%),
    linear-gradient(120deg, rgba(21,13,7,.94), rgba(4,5,7,.92));
  transition: transform 650ms cubic-bezier(.22,.72,.16,1), filter 450ms ease;
}

.portal-choice-showcase .choice-backdrop {
  background:
    linear-gradient(220deg, rgba(255,79,184,.19), transparent 35%),
    radial-gradient(circle at 72% 31%, rgba(49,217,255,.2), transparent 31%),
    linear-gradient(240deg, rgba(19,7,29,.94), rgba(5,4,9,.93));
}

.portal-choice::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .38;
  background:
    linear-gradient(112deg, transparent 24%, rgba(255,255,255,.12) 25%, transparent 26%),
    linear-gradient(112deg, transparent 54%, rgba(255,255,255,.065) 55%, transparent 56%),
    linear-gradient(112deg, transparent 76%, rgba(255,255,255,.05) 77%, transparent 78%);
  background-size: 160% 100%;
  animation: facetSlide 10s linear infinite;
}

.portal-choice::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border: 1px solid rgba(var(--accent-rgb), .11);
  box-shadow: inset 0 0 80px rgba(var(--accent-rgb), .05);
  transition: border-color 300ms ease, box-shadow 300ms ease;
}

.choice-scene {
  position: absolute;
  inset: 2% 3% 18%;
  z-index: -1;
  display: grid;
  place-items: center;
  opacity: .7;
  transform: translate3d(0,0,0);
  transition: transform 650ms cubic-bezier(.22,.72,.16,1), opacity 450ms ease;
}

.choice-scene svg {
  width: min(86%, 650px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 18px rgba(var(--accent-rgb), .2));
}

.scene-contour {
  fill: none;
  stroke: url(#intakeGlow);
  stroke-width: 2;
  opacity: .28;
  stroke-dasharray: 12 10;
  animation: contourTravel 12s linear infinite;
}

.contour-b { animation-duration: 16s; animation-direction: reverse; opacity: .2; }
.contour-c { animation-duration: 20s; opacity: .13; }

.house-halo,
.film-halo {
  fill: none;
  stroke: url(#intakeGlow);
  stroke-width: 20;
  opacity: .15;
  filter: url(#intakeBlur);
}

.house-line,
.house-door,
.film-frame,
.film-ticks,
.prism-shape,
.prism-ray {
  fill: none;
  stroke: url(#intakeGlow);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 0;
  animation: lineDraw 7s ease-in-out infinite alternate;
}

.house-door { stroke-width: 5; }

.door-light {
  fill: url(#intakeGlow);
  opacity: .34;
  filter: url(#intakeBlur);
  animation: doorGlow 4s ease-in-out infinite;
}

.house-spark,
.showcase-spark {
  fill: var(--gold);
  filter: drop-shadow(0 0 9px currentColor);
  transform-origin: center;
  animation: sparkPulse 3.6s ease-in-out infinite;
}

.spark-two { animation-delay: -1.2s; }
.spark-three { animation-delay: -2.4s; }

.film-halo {
  stroke: url(#showcaseGlow);
  filter: url(#showcaseBlur);
}

.film-frame,
.film-ticks,
.prism-shape,
.prism-ray {
  stroke: url(#showcaseGlow);
}

.film-ticks { stroke-width: 3; opacity: .74; }

.prism-main {
  fill: rgba(165,118,255,.07);
  stroke-width: 5;
  animation-duration: 5.5s;
}

.prism-ray { stroke-width: 3; opacity: .72; }
.ray-two { animation-delay: -1.1s; }
.ray-three { animation-delay: -2.2s; }

.showcase-spark { fill: var(--pink); }

.choice-copy {
  position: relative;
  z-index: 4;
  display: flex;
  width: min(540px, 100%);
  flex-direction: column;
  align-items: flex-start;
  text-shadow: 0 4px 22px rgba(0,0,0,.88);
  transition: transform 500ms cubic-bezier(.22,.72,.16,1);
}

.choice-number {
  position: absolute;
  right: 0;
  bottom: -.08em;
  z-index: -1;
  color: transparent;
  font-family: "Inter", sans-serif;
  font-size: clamp(5rem, 11vw, 10rem);
  font-weight: 800;
  letter-spacing: -.08em;
  -webkit-text-stroke: 1px rgba(var(--accent-rgb), .16);
  opacity: .78;
  user-select: none;
}

.choice-kicker {
  margin-bottom: 9px;
  color: var(--accent-a);
  font-size: clamp(.62rem, .95vw, .78rem);
  font-weight: 800;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.choice-title {
  color: #fff8e8;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.55rem, 5.4vw, 5.4rem);
  font-style: italic;
  font-weight: 700;
  line-height: .88;
  letter-spacing: -.035em;
}

.choice-description {
  max-width: 470px;
  margin-top: clamp(12px, 1.8vh, 20px);
  color: rgba(255,248,233,.76);
  font-size: clamp(.82rem, 1.12vw, 1rem);
  line-height: 1.5;
}

.choice-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(17px, 2.8vh, 29px);
  padding: 13px 18px;
  border: 1px solid rgba(var(--accent-rgb), .68);
  border-radius: 4px 18px 4px 18px;
  color: #fff9e8;
  background:
    linear-gradient(110deg, rgba(var(--accent-rgb), .15), rgba(5,4,8,.72)),
    rgba(5,4,8,.52);
  box-shadow: 0 0 26px rgba(var(--accent-rgb), .16), inset 0 0 20px rgba(var(--accent-rgb), .06);
  backdrop-filter: blur(12px);
  font-size: clamp(.7rem, .95vw, .84rem);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: transform 260ms ease, color 260ms ease, background 260ms ease, box-shadow 260ms ease;
}

.choice-button b {
  color: var(--accent-b);
  font-size: 1.08rem;
  transition: transform 260ms ease;
}

.portal-choice:hover,
.portal-choice:focus-visible {
  filter: brightness(1.08) saturate(1.15);
  outline: none;
}

.portal-choice:hover .choice-backdrop,
.portal-choice:focus-visible .choice-backdrop {
  transform: scale(1.035);
  filter: saturate(1.15);
}

.portal-choice:hover::after,
.portal-choice:focus-visible::after {
  border-color: rgba(var(--accent-rgb), .46);
  box-shadow: inset 0 0 120px rgba(var(--accent-rgb), .13), 0 0 38px rgba(var(--accent-rgb), .1);
}

.portal-choice:hover .choice-scene,
.portal-choice:focus-visible .choice-scene {
  opacity: 1;
  transform: translateY(-7px) scale(1.035);
}

.portal-choice:hover .choice-copy,
.portal-choice:focus-visible .choice-copy { transform: translateY(-7px); }

.portal-choice:hover .choice-button,
.portal-choice:focus-visible .choice-button {
  color: #060409;
  background: linear-gradient(110deg, var(--accent-a), var(--accent-b));
  box-shadow: 0 0 34px rgba(var(--accent-rgb), .34);
  transform: translateY(-2px);
}

.portal-choice:hover .choice-button b,
.portal-choice:focus-visible .choice-button b {
  color: #060409;
  transform: translateX(4px);
}

.portal-shell[data-active="property_intake"] .portal-choice-showcase,
.portal-shell[data-active="showcase"] .portal-choice-intake {
  filter: brightness(.63) saturate(.7);
}

.portal-center-mark {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  align-items: center;
  height: 100%;
  color: rgba(255,248,233,.73);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.portal-center-mark i {
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(255,214,107,.48), transparent);
  box-shadow: 0 0 16px rgba(255,214,107,.28);
}

.portal-center-mark b {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,228,157,.42);
  border-radius: 10px 20px 10px 20px;
  background: rgba(5,3,8,.74);
  box-shadow: 0 0 30px rgba(255,214,107,.15), inset 0 0 12px rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  font-size: .58rem;
  letter-spacing: .14em;
}

.portal-footer {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  padding: 8px clamp(14px, 3vw, 42px) max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(5,3,8,.68), rgba(3,2,6,.96));
  backdrop-filter: blur(20px) saturate(1.25);
}

.portal-socials {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.portal-socials a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 38px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  color: #fff;
  background: rgba(255,255,255,.045);
  box-shadow: inset 0 0 13px rgba(255,255,255,.035);
  text-decoration: none;
  font-size: .64rem;
  font-weight: 700;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, filter 220ms ease;
}

.portal-socials svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: currentColor;
}

.social-facebook:hover,
.social-facebook:focus-visible { background: linear-gradient(135deg, #1877f2, #55a3ff); }
.social-instagram:hover,
.social-instagram:focus-visible { background: linear-gradient(135deg, #833ab4, #fd1d1d 55%, #fcb045); }
.social-tiktok:hover,
.social-tiktok:focus-visible { background: linear-gradient(135deg, #09f0e2, #131318 48%, #ff3d85); }
.social-youtube:hover,
.social-youtube:focus-visible { background: linear-gradient(135deg, #ff0033, #9b001f); }

.portal-socials a:hover,
.portal-socials a:focus-visible {
  border-color: rgba(255,255,255,.62);
  box-shadow: 0 0 24px rgba(255,255,255,.16);
  filter: saturate(1.2);
  outline: none;
  transform: translateY(-3px);
}

.portal-copyright {
  margin: 0;
  color: rgba(255,248,233,.48);
  font-size: .65rem;
  letter-spacing: .065em;
  text-align: center;
  white-space: nowrap;
}

.portal-contact-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
}

.contact-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 118px;
  height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 13px 4px 13px 4px;
  color: #07050a;
  box-shadow: 0 8px 24px rgba(0,0,0,.24), 0 0 24px rgba(255,214,107,.13);
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.contact-phone { background: linear-gradient(135deg, #ffe878, #ff9652); }
.contact-email { background: linear-gradient(135deg, #45f1d2, #34bff8); }

.contact-button svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: currentColor;
}

.contact-button span {
  display: flex;
  flex-direction: column;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.03;
}

.contact-button small {
  margin-bottom: 3px;
  font-size: .48rem;
  font-weight: 700;
  letter-spacing: .13em;
  opacity: .7;
  text-transform: uppercase;
}

.contact-button:hover,
.contact-button:focus-visible {
  filter: brightness(1.08) saturate(1.12);
  outline: none;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 30px rgba(0,0,0,.32), 0 0 30px rgba(255,214,107,.25);
}

@keyframes curtainBreathe {
  from { opacity: .28; transform: skewX(-7deg) scaleX(1.08) translateX(-4%); }
  to { opacity: .52; transform: skewX(-3deg) scaleX(1.22) translateX(3%); }
}

@keyframes beamSweepOne {
  from { transform: translateX(-70%) rotate(-35deg); }
  to { transform: translateX(-4%) rotate(24deg); }
}

@keyframes beamSweepTwo {
  from { transform: translateX(-30%) rotate(20deg); }
  to { transform: translateX(-76%) rotate(-28deg); }
}

@keyframes beamSweepThree {
  from { transform: translateX(-58%) rotate(-4deg); opacity: .08; }
  to { transform: translateX(-28%) rotate(36deg); opacity: .21; }
}

@keyframes ribbonFlow {
  from { transform: translate3d(-2%, -7%, 0) rotate(-13deg) scale(.92); }
  to { transform: translate3d(10%, 10%, 0) rotate(-4deg) scale(1.12); }
}

@keyframes grainJitter {
  0% { transform: translate(0,0); }
  25% { transform: translate(-1%,1%); }
  50% { transform: translate(1%,-1%); }
  75% { transform: translate(1%,1%); }
  100% { transform: translate(-1%,-1%); }
}

@keyframes prismFloat {
  from { transform: translate3d(0,0,0) rotate(var(--rotate)) scale(.84); }
  to { transform: translate3d(var(--drift-x), var(--drift-y), 0) rotate(calc(var(--rotate) + 44deg)) scale(1.15); }
}

@keyframes logoPulse {
  0%,100% { opacity: .42; transform: scale(.9); }
  50% { opacity: .72; transform: scale(1.08); }
}

@keyframes logoSpin { to { transform: rotate(360deg); } }

@keyframes facetSlide { to { background-position: 160% 0; } }

@keyframes contourTravel { to { stroke-dashoffset: -140; } }

@keyframes lineDraw {
  from { stroke-dashoffset: 130; opacity: .56; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes doorGlow {
  0%,100% { opacity: .2; transform: scale(.94); transform-origin: center bottom; }
  50% { opacity: .58; transform: scale(1.08); transform-origin: center bottom; }
}

@keyframes sparkPulse {
  0%,100% { opacity: .28; transform: scale(.65); }
  50% { opacity: 1; transform: scale(1.35); }
}

@media (max-width: 950px) {
  .portal-socials a span { display: none; }
  .portal-socials a {
    width: 38px;
    justify-content: center;
    padding: 0;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  :root {
    --header-height: clamp(72px, 10.5vh, 92px);
    --footer-height: clamp(91px, 13.5vh, 112px);
  }

  .portal-header {
    justify-content: center;
    padding-inline: 12px;
  }

  .portal-logo-stage { width: clamp(53px, 7.8vh, 68px); }
  .portal-brand { gap: 8px; }
  .portal-brand-name { font-size: clamp(1.28rem, 6vw, 1.75rem); }
  .portal-brand-line { font-size: clamp(.46rem, 1.7vw, .57rem); letter-spacing: .14em; }
  .portal-header-cue { display: none; }

  .portal-stage {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .portal-shell[data-active="property_intake"] .portal-stage,
  .portal-shell[data-active="showcase"] .portal-stage {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .portal-choice {
    align-items: center;
    padding: clamp(13px, 4vw, 22px) clamp(17px, 6vw, 28px);
  }

  .choice-copy { width: 67%; }
  .portal-choice-showcase .choice-copy { align-items: flex-end; margin-left: auto; text-align: right; }

  .choice-scene {
    inset: 0 1% 0 38%;
    place-items: center;
  }

  .portal-choice-showcase .choice-scene { inset: 0 38% 0 1%; }
  .choice-scene svg { width: min(100%, 290px); }

  .choice-number { font-size: clamp(4.1rem, 20vw, 6.2rem); }
  .choice-title { font-size: clamp(1.95rem, 9vw, 2.85rem); }
  .choice-description { margin-top: 7px; font-size: clamp(.66rem, 2.65vw, .78rem); line-height: 1.34; }
  .choice-kicker { margin-bottom: 4px; font-size: clamp(.48rem, 1.85vw, .59rem); }
  .choice-button { margin-top: 9px; padding: 9px 11px; font-size: clamp(.54rem, 2.1vw, .65rem); letter-spacing: .07em; }

  .portal-center-mark {
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr;
  }

  .portal-center-mark i {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,214,107,.48), transparent);
  }

  .portal-center-mark b { width: 38px; height: 38px; }

  .portal-footer {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 6px 8px;
    padding: 7px 10px max(7px, env(safe-area-inset-bottom));
  }

  .portal-socials { gap: 5px; }
  .portal-socials a { width: 32px; height: 32px; border-radius: 9px; }
  .portal-socials svg { width: 14px; height: 14px; }

  .portal-contact-actions { gap: 6px; }
  .contact-button {
    min-width: 82px;
    height: 39px;
    gap: 6px;
    padding: 0 9px;
    border-radius: 10px 3px 10px 3px;
  }
  .contact-button svg { width: 16px; height: 16px; }
  .contact-button span { font-size: .62rem; }
  .contact-button small { font-size: .4rem; margin-bottom: 2px; }

  .portal-copyright {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: .52rem;
  }
}

@media (max-height: 720px) {
  :root {
    --header-height: 72px;
    --footer-height: 72px;
  }

  .portal-logo-stage { width: 55px; }
  .portal-brand-name { font-size: 1.4rem; }
  .choice-title { font-size: clamp(2rem, 4.5vw, 4rem); }
  .choice-description { margin-top: 8px; line-height: 1.32; }
  .choice-button { margin-top: 10px; padding-block: 9px; }
  .contact-button { height: 42px; }
}

@media (max-width: 900px) and (orientation: portrait) and (max-height: 720px) {
  :root { --footer-height: 88px; }
  .choice-description { display: none; }
  .choice-copy { width: 69%; }
  .choice-title { font-size: clamp(1.8rem, 8.4vw, 2.4rem); }
  .choice-button { margin-top: 7px; }
}

@media (max-width: 370px) and (orientation: portrait) {
  .portal-brand-line { display: none; }
  .contact-button small { display: none; }
  .contact-button { min-width: 74px; }
}

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

/* Portal layout + footer clarity revision (2026-08-03) */

/* Keep each message in its own visual zone instead of laying it over the artwork. */
.portal-choice-intake {
  align-items: flex-start;
}

.portal-choice-intake .choice-copy {
  width: min(560px, 70%);
  margin-top: clamp(5px, 1.5vh, 18px);
}

.portal-choice-intake .choice-scene {
  inset: 23% -3% -7% 31%;
  place-items: end center;
  opacity: .84;
}

.portal-choice-showcase {
  align-items: flex-end;
}

.portal-choice-showcase .choice-copy {
  width: min(590px, 72%);
  margin-left: auto;
  align-items: flex-end;
  text-align: right;
}

.portal-choice-showcase .choice-scene {
  inset: -5% 30% 31% -8%;
  place-items: start center;
  opacity: .84;
}

.choice-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -18px -20px;
  border-radius: 28px;
  background: radial-gradient(ellipse at center, rgba(3,2,6,.74), rgba(3,2,6,.38) 58%, transparent 78%);
  filter: blur(5px);
  pointer-events: none;
}

.choice-title {
  font-size: clamp(2.45rem, 4.65vw, 4.8rem);
}

/* The large 01 / 02 numerals were decorative but competed with the calls to action. */
.choice-number {
  display: none;
}

/* Social buttons stay in their platform colors; hover only gives them lift and glow. */
.portal-socials a {
  border-color: rgba(255,255,255,.34);
  box-shadow: inset 0 0 15px rgba(255,255,255,.10), 0 7px 18px rgba(0,0,0,.25);
}

.portal-socials .social-facebook,
.portal-socials .social-facebook:hover,
.portal-socials .social-facebook:focus-visible {
  background: linear-gradient(135deg, #1877f2, #55a3ff);
  box-shadow: inset 0 0 15px rgba(255,255,255,.13), 0 0 20px rgba(24,119,242,.30);
}

.portal-socials .social-instagram,
.portal-socials .social-instagram:hover,
.portal-socials .social-instagram:focus-visible {
  background: linear-gradient(135deg, #833ab4, #fd1d1d 55%, #fcb045);
  box-shadow: inset 0 0 15px rgba(255,255,255,.13), 0 0 20px rgba(225,48,108,.30);
}

.portal-socials .social-tiktok,
.portal-socials .social-tiktok:hover,
.portal-socials .social-tiktok:focus-visible {
  background: linear-gradient(135deg, #00e5df, #17171d 48%, #ff3d85);
  box-shadow: inset 0 0 15px rgba(255,255,255,.13), 0 0 20px rgba(0,229,223,.23);
}

.portal-socials .social-youtube,
.portal-socials .social-youtube:hover,
.portal-socials .social-youtube:focus-visible {
  background: linear-gradient(135deg, #ff0033, #a00020);
  box-shadow: inset 0 0 15px rgba(255,255,255,.13), 0 0 20px rgba(255,0,51,.28);
}

.portal-socials a:hover,
.portal-socials a:focus-visible {
  filter: brightness(1.12) saturate(1.15);
  transform: translateY(-4px) scale(1.055);
}

/* Contact buttons now use one larger, unambiguous label. */
.contact-button {
  min-width: 132px;
  height: 50px;
  justify-content: center;
}

.contact-button span {
  display: block;
  font-size: .88rem;
  line-height: 1;
  letter-spacing: .015em;
  white-space: nowrap;
}

.contact-button small {
  display: none;
}

.contact-button:hover,
.contact-button:focus-visible {
  transform: translateY(-4px) scale(1.045);
}

@media (max-width: 1180px) and (min-width: 721px) {
  .portal-choice {
    padding: clamp(26px, 3.4vw, 48px);
  }

  .portal-choice-intake .choice-copy,
  .portal-choice-showcase .choice-copy {
    width: 74%;
  }

  .portal-choice-intake .choice-scene {
    inset: 28% -6% -8% 33%;
  }

  .portal-choice-showcase .choice-scene {
    inset: -6% 34% 35% -10%;
  }

  .choice-title {
    font-size: clamp(2.35rem, 4.35vw, 4.15rem);
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  .portal-choice {
    padding: clamp(12px, 3.8vw, 20px) clamp(16px, 5vw, 25px);
  }

  .portal-choice-intake {
    align-items: flex-start;
  }

  .portal-choice-intake .choice-copy {
    width: 73%;
    margin: 0;
    align-items: flex-start;
    text-align: left;
  }

  .portal-choice-intake .choice-scene {
    inset: 30% -9% -10% 39%;
    place-items: end center;
  }

  .portal-choice-showcase {
    align-items: flex-end;
  }

  .portal-choice-showcase .choice-copy {
    width: 76%;
    margin: 0 0 0 auto;
    align-items: flex-end;
    text-align: right;
  }

  .portal-choice-showcase .choice-scene {
    inset: -10% 40% 39% -12%;
    place-items: start center;
  }

  .choice-copy::before {
    inset: -11px -12px;
    border-radius: 20px;
    background: radial-gradient(ellipse at center, rgba(3,2,6,.78), rgba(3,2,6,.40) 60%, transparent 80%);
  }

  .choice-title {
    font-size: clamp(1.8rem, 8.2vw, 2.65rem);
  }

  .portal-socials a {
    box-shadow: inset 0 0 10px rgba(255,255,255,.12), 0 0 12px rgba(255,255,255,.10);
  }

  .contact-button {
    min-width: 88px;
    height: 41px;
    padding: 0 10px;
  }

  .contact-button span {
    font-size: .69rem;
  }
}

@media (max-width: 900px) and (orientation: portrait) and (max-height: 720px) {
  .portal-choice-intake .choice-copy,
  .portal-choice-showcase .choice-copy {
    width: 74%;
  }

  .portal-choice-intake .choice-scene {
    inset: 29% -10% -12% 42%;
  }

  .portal-choice-showcase .choice-scene {
    inset: -12% 43% 42% -13%;
  }

  .contact-button {
    min-width: 82px;
    height: 38px;
  }

  .contact-button span {
    font-size: .64rem;
  }
}

@media (max-width: 370px) and (orientation: portrait) {
  .contact-button {
    min-width: 76px;
    padding-inline: 8px;
  }

  .contact-button span {
    font-size: .59rem;
  }
}


/* Animated scene revision: moving house, smoke, opening door, floating media */
.portal-choice-intake .scene-house {
  transform-box: fill-box;
  transform-origin: center;
  animation: houseRoam 14s ease-in-out infinite alternate;
  will-change: transform;
}

.chimney-smoke {
  pointer-events: none;
}

.smoke-puff {
  fill: rgba(255, 239, 203, .20);
  stroke: rgba(255, 214, 107, .26);
  stroke-width: 1.5;
  filter: blur(.6px) drop-shadow(0 0 8px rgba(255, 214, 107, .20));
  transform-box: fill-box;
  transform-origin: center;
  animation: smokeRise 5.8s ease-in-out infinite;
}

.smoke-two { animation-delay: -1.9s; }
.smoke-three { animation-delay: -3.8s; }

.door-panel {
  fill: rgba(255, 214, 107, .13);
  stroke: url(#intakeGlow);
  stroke-width: 2.2;
  transform-box: fill-box;
  transform-origin: left center;
  animation: none;
  transform: none;
  opacity: .72;
}

.door-knob {
  fill: #fff1bd;
  filter: drop-shadow(0 0 6px rgba(255, 214, 107, .9));
  transform-box: fill-box;
  transform-origin: center;
  animation: none;
  transform: none;
  opacity: .9;
}

.portal-choice-showcase .scene-showcase {
  transform-box: fill-box;
  transform-origin: center;
  animation: showcaseRoam 16s ease-in-out infinite alternate;
  will-change: transform;
}

.floating-media {
  fill: rgba(7, 8, 18, .64);
  stroke: url(#showcaseGlow);
  stroke-width: 2;
  opacity: .76;
  filter: drop-shadow(0 0 10px rgba(49, 217, 255, .22));
  transform-box: fill-box;
  transform-origin: center;
  animation: mediaFloat 7s ease-in-out infinite;
}

.floating-media path,
.floating-media circle {
  fill: none;
  stroke: url(#showcaseGlow);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.media-card-two { animation-delay: -2.3s; }
.media-card-three { animation-delay: -4.6s; }

.portal-choice-showcase:hover .floating-media,
.portal-choice-showcase:focus-visible .floating-media {
  animation-duration: 4.5s;
}

@keyframes houseRoam {
  0% { transform: translate3d(-18%, 10%, 0) rotate(-1.2deg) scale(1.10); }
  28% { transform: translate3d(11%, -8%, 0) rotate(.8deg) scale(1.15); }
  57% { transform: translate3d(-7%, -13%, 0) rotate(-.55deg) scale(1.12); }
  78% { transform: translate3d(18%, 3%, 0) rotate(1.1deg) scale(1.16); }
  100% { transform: translate3d(-3%, 12%, 0) rotate(-.35deg) scale(1.11); }
}

@keyframes smokeRise {
  0%, 12% { opacity: 0; transform: translate3d(0, 10px, 0) scale(.55); }
  28% { opacity: .8; }
  72% { opacity: .34; }
  100% { opacity: 0; transform: translate3d(20px, -48px, 0) scale(1.65); }
}

@keyframes doorOpen {
  0%, 26%, 82%, 100% { transform: perspective(180px) rotateY(0deg); opacity: .78; }
  42%, 64% { transform: perspective(180px) rotateY(-58deg); opacity: .42; }
}

@keyframes knobGlow {
  0%, 26%, 82%, 100% { transform: translateX(0) scale(1); opacity: .9; }
  42%, 64% { transform: translateX(-13px) scale(.82); opacity: .45; }
}

@keyframes showcaseRoam {
  0% { transform: translate3d(17%, -11%, 0) rotate(1.2deg) scale(1.11); }
  27% { transform: translate3d(-12%, 7%, 0) rotate(-.85deg) scale(1.16); }
  54% { transform: translate3d(7%, 13%, 0) rotate(.55deg) scale(1.13); }
  79% { transform: translate3d(-18%, -3%, 0) rotate(-1.15deg) scale(1.17); }
  100% { transform: translate3d(3%, -12%, 0) rotate(.35deg) scale(1.12); }
}

@keyframes mediaFloat {
  0%, 100% { transform: translate3d(-24px, 16px, 0) rotate(-3deg) scale(1.04); opacity: .58; }
  34% { transform: translate3d(28px, -24px, 0) rotate(2deg) scale(1.15); opacity: .94; }
  68% { transform: translate3d(-20px, -12px, 0) rotate(3deg) scale(1.09); opacity: .76; }
}

@media (max-width: 900px) and (orientation: portrait) {
  .portal-choice-intake .scene-house {
    animation-name: houseRoamMobile;
    animation-duration: 12s;
  }

  .portal-choice-showcase .scene-showcase {
    animation-name: showcaseRoamMobile;
    animation-duration: 13.5s;
  }

  .floating-media {
    opacity: .68;
    animation-duration: 6.4s;
  }

  @keyframes houseRoamMobile {
    0% { transform: translate3d(-25%, 13%, 0) rotate(-1.3deg) scale(1.10); }
    27% { transform: translate3d(13%, -10%, 0) rotate(.9deg) scale(1.16); }
    54% { transform: translate3d(-10%, -15%, 0) rotate(-.6deg) scale(1.12); }
    79% { transform: translate3d(24%, 4%, 0) rotate(1.25deg) scale(1.17); }
    100% { transform: translate3d(-4%, 14%, 0) rotate(-.4deg) scale(1.11); }
  }

  @keyframes showcaseRoamMobile {
    0% { transform: translate3d(23%, -13%, 0) rotate(1.3deg) scale(1.10); }
    26% { transform: translate3d(-15%, 9%, 0) rotate(-1deg) scale(1.16); }
    55% { transform: translate3d(9%, 15%, 0) rotate(.65deg) scale(1.13); }
    80% { transform: translate3d(-24%, -4%, 0) rotate(-1.25deg) scale(1.17); }
    100% { transform: translate3d(4%, -14%, 0) rotate(.45deg) scale(1.11); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-choice-intake .scene-house,
  .portal-choice-showcase .scene-showcase,
  .smoke-puff,
  .door-panel,
  .door-knob,
  .floating-media {
    animation: none !important;
  }
}


/* Wider roaming scene revision (2026-08-03) */
/* Artwork is intentionally larger and its scene canvas spans most of each card. */
.portal-choice-intake .choice-scene,
.portal-choice-showcase .choice-scene {
  inset: -4% -15% -5% -15%;
  place-items: center;
  opacity: .82;
}

.portal-choice-intake .choice-scene svg,
.portal-choice-showcase .choice-scene svg {
  width: min(99%, 745px);
}

/* Door remains illuminated but no longer opens or closes. */
.door-panel,
.door-knob {
  animation: none !important;
  transform: none !important;
}

@media (max-width: 1180px) and (min-width: 721px) {
  .portal-choice-intake .choice-scene,
  .portal-choice-showcase .choice-scene {
    inset: -6% -18% -7% -18%;
  }

  .portal-choice-intake .choice-scene svg,
  .portal-choice-showcase .choice-scene svg {
    width: min(102%, 720px);
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  .portal-choice-intake .choice-scene,
  .portal-choice-showcase .choice-scene {
    inset: -8% -26% -9% -26%;
    place-items: center;
  }

  .portal-choice-intake .choice-scene svg,
  .portal-choice-showcase .choice-scene svg {
    width: min(108%, 650px);
  }
}

@media (max-width: 900px) and (orientation: portrait) and (max-height: 720px) {
  .portal-choice-intake .choice-scene,
  .portal-choice-showcase .choice-scene {
    inset: -10% -28% -11% -28%;
  }
}

/* Mobile animation stability + sizing correction (2026-08-03)
   The mobile scene now animates its canvas instead of transforming the filtered SVG itself.
   This avoids Chrome/Android compositing glitches while keeping visible movement. */
@media (max-width: 900px) and (orientation: portrait) {
  .portal-choice-intake .scene-house,
  .portal-choice-showcase .scene-showcase {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }

  .portal-choice-intake .choice-scene,
  .portal-choice-showcase .choice-scene {
    opacity: .76;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }

  .portal-choice-intake .choice-scene {
    inset: 23% -5% -3% 24%;
    place-items: center;
    animation: intakeSceneDriftMobile 15s ease-in-out infinite alternate;
  }

  .portal-choice-showcase .choice-scene {
    inset: -3% 24% 23% -5%;
    place-items: center;
    animation: showcaseSceneDriftMobile 16s ease-in-out infinite alternate;
  }

  .portal-choice-intake .choice-scene svg,
  .portal-choice-showcase .choice-scene svg {
    width: min(86%, 470px) !important;
    max-width: 86%;
    transform: none !important;
  }

  .floating-media {
    animation-name: mediaFloatMobileStable;
    animation-duration: 8.5s;
  }

  @keyframes intakeSceneDriftMobile {
    0%   { transform: translate3d(-5%, 5%, 0); }
    35%  { transform: translate3d(6%, -4%, 0); }
    70%  { transform: translate3d(-2%, -7%, 0); }
    100% { transform: translate3d(7%, 3%, 0); }
  }

  @keyframes showcaseSceneDriftMobile {
    0%   { transform: translate3d(5%, -5%, 0); }
    35%  { transform: translate3d(-6%, 4%, 0); }
    70%  { transform: translate3d(2%, 7%, 0); }
    100% { transform: translate3d(-7%, -3%, 0); }
  }

  @keyframes mediaFloatMobileStable {
    0%, 100% { transform: translate3d(-8px, 6px, 0) rotate(-1.2deg); opacity: .58; }
    50%      { transform: translate3d(10px, -9px, 0) rotate(1.2deg); opacity: .86; }
  }
}

@media (max-width: 900px) and (orientation: portrait) and (max-height: 720px) {
  .portal-choice-intake .choice-scene {
    inset: 24% -3% -2% 27%;
  }

  .portal-choice-showcase .choice-scene {
    inset: -2% 27% 24% -3%;
  }

  .portal-choice-intake .choice-scene svg,
  .portal-choice-showcase .choice-scene svg {
    width: min(80%, 410px) !important;
    max-width: 80%;
  }
}

@media (max-width: 390px) and (orientation: portrait) {
  .portal-choice-intake .choice-scene svg,
  .portal-choice-showcase .choice-scene svg {
    width: min(82%, 390px) !important;
    max-width: 82%;
  }
}

/* Desktop artwork sizing refinement (2026-08-03) */
@media (min-width: 1181px) {
  .portal-choice-intake .choice-scene svg,
  .portal-choice-showcase .choice-scene svg {
    width: min(91%, 680px);
  }
}


/* SHOWCASE STATUS STICKER
   Remove this block and the matching span in index.html when the showcase is ready. */
.showcase-status-sticker {
  position: absolute;
  top: clamp(18px, 2.2vw, 34px);
  right: clamp(18px, 2.2vw, 34px);
  z-index: 12;
  display: grid;
  place-items: center;
  min-width: clamp(150px, 13vw, 190px);
  padding: 17px 22px 18px;
  border: 4px solid #17130b;
  border-radius: 9px;
  background:
    repeating-linear-gradient(135deg, #17130b 0 10px, #f6bd2f 10px 20px) top / 100% 9px no-repeat,
    repeating-linear-gradient(135deg, #17130b 0 10px, #f6bd2f 10px 20px) bottom / 100% 9px no-repeat,
    linear-gradient(145deg, #ffad22 0%, #f58a18 52%, #df6710 100%);
  box-shadow:
    0 13px 30px rgba(0, 0, 0, .42),
    0 0 0 3px rgba(255, 205, 79, .2),
    inset 0 0 0 2px rgba(255, 238, 180, .45),
    inset 0 2px 0 rgba(255, 255, 255, .35);
  color: #17130b;
  font-family: "Inter", sans-serif;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .075em;
  transform: rotate(4deg);
  transform-origin: center;
  pointer-events: none;
  opacity: .98;
  overflow: hidden;
}

.showcase-status-sticker::before,
.showcase-status-sticker::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 226, 139, .7);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6d5c3b 0 20%, #211a0f 45% 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.65);
}

.showcase-status-sticker::before { left: 10px; top: 50%; transform: translateY(-50%); }
.showcase-status-sticker::after { right: 10px; top: 50%; transform: translateY(-50%); }

.showcase-status-sticker span {
  display: block;
  margin-bottom: 4px;
  font-size: clamp(.62rem, .72vw, .78rem);
  font-weight: 900;
  letter-spacing: .18em;
}

.showcase-status-sticker strong {
  display: block;
  font-size: clamp(.82rem, .96vw, 1.08rem);
  font-weight: 950;
  letter-spacing: .075em;
}

.portal-choice-showcase:hover .showcase-status-sticker,
.portal-choice-showcase:focus-visible .showcase-status-sticker {
  transform: rotate(1deg) translateY(-4px) scale(1.045);
  box-shadow:
    0 18px 36px rgba(0, 0, 0, .48),
    0 0 0 5px rgba(255, 196, 58, .18),
    inset 0 0 0 2px rgba(255, 238, 180, .52),
    inset 0 2px 0 rgba(255, 255, 255, .4);
}

@media (max-width: 900px) and (orientation: portrait) {
  .showcase-status-sticker {
    top: 13px;
    right: 14px;
    min-width: 128px;
    padding: 14px 17px 15px;
    border-width: 3px;
    background:
      repeating-linear-gradient(135deg, #17130b 0 8px, #f6bd2f 8px 16px) top / 100% 7px no-repeat,
      repeating-linear-gradient(135deg, #17130b 0 8px, #f6bd2f 8px 16px) bottom / 100% 7px no-repeat,
      linear-gradient(145deg, #ffad22 0%, #f58a18 52%, #df6710 100%);
    transform: rotate(3deg) scale(.94);
    transform-origin: top right;
  }

  .showcase-status-sticker::before,
  .showcase-status-sticker::after {
    width: 10px;
    height: 10px;
  }

  .showcase-status-sticker::before { left: 8px; }
  .showcase-status-sticker::after { right: 8px; }
  .showcase-status-sticker span { font-size: .56rem; }
  .showcase-status-sticker strong { font-size: .75rem; }

  .portal-choice-showcase:hover .showcase-status-sticker,
  .portal-choice-showcase:focus-visible .showcase-status-sticker {
    transform: rotate(1deg) translateY(-2px) scale(.98);
  }
}


/* Neon lane definition + mirrored perimeter tracers (2026-08-03)
   Remove the two .lane-trace-orb spans from index.html and this block to remove the effect. */
.portal-choice::after {
  border: 2px solid rgba(var(--accent-rgb), .58);
  box-shadow:
    inset 0 0 24px rgba(var(--accent-rgb), .10),
    inset 0 0 70px rgba(var(--accent-rgb), .055),
    0 0 14px rgba(var(--accent-rgb), .22);
}

.portal-choice-intake::after {
  border-color: rgba(255, 214, 107, .62);
  box-shadow:
    inset 0 0 24px rgba(255, 214, 107, .10),
    inset 0 0 72px rgba(66, 245, 207, .055),
    0 0 15px rgba(255, 214, 107, .24);
}

.portal-choice-showcase::after {
  border-color: rgba(49, 217, 255, .62);
  box-shadow:
    inset 0 0 24px rgba(49, 217, 255, .10),
    inset 0 0 72px rgba(255, 79, 184, .055),
    0 0 15px rgba(49, 217, 255, .24);
}

.portal-stage::before {
  content: "";
  position: absolute;
  z-index: 7;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  pointer-events: none;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 214, 107, .78) 16%,
    rgba(66, 245, 207, .82) 43%,
    rgba(49, 217, 255, .86) 57%,
    rgba(255, 79, 184, .78) 84%,
    transparent 100%
  );
  box-shadow:
    0 0 7px rgba(255, 214, 107, .55),
    0 0 16px rgba(49, 217, 255, .38),
    0 0 28px rgba(255, 79, 184, .20);
  opacity: .88;
}

.lane-trace-orb {
  position: absolute;
  z-index: 7;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  pointer-events: none;
  offset-path: inset(10px round 18px);
  offset-distance: 0%;
  offset-rotate: 0deg;
  --orb-duration-offset: 0s;
  will-change: offset-distance, transform, opacity;
  animation: laneTraceOrbit calc(var(--orb-master-duration) + var(--orb-platform-adjust) + var(--orb-duration-offset)) linear infinite;
}

.lane-trace-orb::before,
.lane-trace-orb::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.lane-trace-orb::before {
  inset: -8px;
  border: 1px solid currentColor;
  opacity: .35;
  filter: blur(.4px);
  animation: laneTracePulse 2.4s ease-in-out infinite;
}

.lane-trace-orb::after {
  inset: -18px;
  background: radial-gradient(circle, currentColor 0 7%, transparent 58%);
  opacity: .38;
  filter: blur(5px);
}

.lane-trace-orb-intake {
  color: #ffd66b;
  background: radial-gradient(circle at 34% 30%, #fffbdc 0 16%, #ffd66b 31%, #ff8e53 58%, #42f5cf 100%);
  box-shadow:
    0 0 8px #fff4be,
    0 0 17px rgba(255, 214, 107, .95),
    0 0 30px rgba(66, 245, 207, .62);
}

.lane-trace-orb-showcase {
  color: #31d9ff;
  background: radial-gradient(circle at 34% 30%, #f8ffff 0 16%, #31d9ff 31%, #a576ff 59%, #ff4fb8 100%);
  box-shadow:
    0 0 8px #eafcff,
    0 0 17px rgba(49, 217, 255, .95),
    0 0 30px rgba(255, 79, 184, .62);
}

/* Two perimeter tracers per destination. Each orb has a slightly different
   lap duration and starting phase. Motion remains deterministic and smooth,
   but the paired orbs continually drift relative to one another so their
   crossing points do not stay locked to the same locations. */
.lane-trace-orb-intake.lane-trace-orb-primary {
  --orb-duration-offset: 0s;
  animation-direction: normal;
  animation-delay: 0s;
}

.lane-trace-orb-intake.lane-trace-orb-secondary {
  --orb-duration-offset: .60s;
  animation-direction: reverse;
  animation-delay: -4.70s;
}

.lane-trace-orb-showcase.lane-trace-orb-primary {
  --orb-duration-offset: .30s;
  animation-direction: reverse;
  animation-delay: -1.90s;
}

.lane-trace-orb-showcase.lane-trace-orb-secondary {
  --orb-duration-offset: 1.10s;
  animation-direction: normal;
  animation-delay: -7.15s;
}

@keyframes laneTraceOrbit {
  0% { offset-distance: 0%; transform: scale(.84); opacity: .55; }
  18% { transform: scale(1.18); opacity: 1; }
  50% { transform: scale(.92); opacity: .72; }
  77% { transform: scale(1.22); opacity: 1; }
  100% { offset-distance: 100%; transform: scale(.84); opacity: .55; }
}

@keyframes laneTracePulse {
  0%, 100% { transform: scale(.78); opacity: .20; }
  50% { transform: scale(1.22); opacity: .62; }
}

/* Construction sign legibility: fasteners sit high like real sign hardware,
   clear of the words on both desktop and mobile. */
.showcase-status-sticker {
  padding-inline: 26px;
}

.showcase-status-sticker::before,
.showcase-status-sticker::after {
  top: 12px;
  width: 11px;
  height: 11px;
  transform: none;
  z-index: 2;
}

.showcase-status-sticker::before { left: 12px; }
.showcase-status-sticker::after { right: 12px; }

.showcase-status-sticker span {
  font-size: clamp(.60rem, .68vw, .74rem);
  letter-spacing: .16em;
}

.showcase-status-sticker strong {
  font-size: clamp(.78rem, .90vw, 1rem);
  letter-spacing: .065em;
}

@media (max-width: 900px) and (orientation: portrait) {
  .portal-stage::before {
    top: 50%;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(255, 214, 107, .76) 18%,
      rgba(66, 245, 207, .84) 43%,
      rgba(49, 217, 255, .86) 57%,
      rgba(255, 79, 184, .76) 82%,
      transparent 100%
    );
  }

  .lane-trace-orb {
    width: 12px;
    height: 12px;
    offset-path: inset(7px round 13px);
    /* Keeps mobile about 1.1s quicker than the desktop baseline. */
    --orb-platform-adjust: -1.10s;
  }

  /* Per-orb phase spacing and drift are inherited from the universal
     orb controls above so mobile does not lock crossings to one spot. */

  .showcase-status-sticker {
    padding-inline: 21px;
  }

  .showcase-status-sticker::before,
  .showcase-status-sticker::after {
    top: 9px;
    width: 8px;
    height: 8px;
  }

  .showcase-status-sticker::before { left: 9px; }
  .showcase-status-sticker::after { right: 9px; }
  .showcase-status-sticker span { font-size: .52rem; letter-spacing: .15em; }
  .showcase-status-sticker strong { font-size: .69rem; letter-spacing: .055em; }
}

@media (prefers-reduced-motion: reduce) {
  .lane-trace-orb {
    animation: none !important;
    offset-distance: 12%;
  }
}

/* Desktop OR badge: follow the real moving split between the two grid cards.
   The visible split is the cards' own borders, so the separate fixed divider
   and the line segments inside the OR marker are disabled on desktop. */
@media (min-width: 901px) {
  .portal-stage::before {
    content: none !important;
    display: none !important;
  }

  .portal-center-mark {
    top: 50% !important;
    left: 50%;
    width: auto !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    transition: left 600ms cubic-bezier(.22, .72, .16, 1) !important;
  }

  .portal-center-mark i {
    display: none !important;
  }

  .portal-center-mark b {
    background: rgba(5, 3, 8, .97) !important;
  }

  .portal-shell[data-active="property_intake"] .portal-center-mark {
    left: 56%;
  }

  .portal-shell[data-active="showcase"] .portal-center-mark {
    left: 44%;
  }
}

/* Unfolded Fold / wide-touch compositor profile (2026-08-08)
   Activated by portal.js from real viewport geometry + touch capabilities.
   Goal: preserve the cinematic portal while keeping animated paint bounds small
   and avoiding Android Chrome's most fragile filtered/composited combinations. */
.portal-shell.is-wide-touch {
  --header-height: clamp(76px, 9.5svh, 94px);
  --footer-height: clamp(78px, 9.8svh, 96px);
}

.portal-shell.is-wide-touch .portal-stage,
.portal-shell.is-wide-touch[data-active="property_intake"] .portal-stage,
.portal-shell.is-wide-touch[data-active="showcase"] .portal-stage {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  transition: none;
  contain: layout paint;
}

.portal-shell.is-wide-touch .portal-choice {
  min-width: 0;
  padding: clamp(18px, 2.8vw, 30px);
  contain: paint;
}

.portal-shell.is-wide-touch .portal-choice-intake {
  align-items: flex-start;
}

.portal-shell.is-wide-touch .portal-choice-showcase {
  align-items: flex-end;
}

.portal-shell.is-wide-touch .portal-choice-intake .choice-copy,
.portal-shell.is-wide-touch .portal-choice-showcase .choice-copy {
  width: min(88%, 410px);
}

.portal-shell.is-wide-touch .portal-choice-intake .choice-copy {
  margin: 0;
  align-items: flex-start;
  text-align: left;
}

.portal-shell.is-wide-touch .portal-choice-showcase .choice-copy {
  margin: 0 0 0 auto;
  align-items: flex-end;
  text-align: right;
}

.portal-shell.is-wide-touch .choice-title {
  font-size: clamp(2.05rem, 4.8vw, 3.35rem);
}

.portal-shell.is-wide-touch .choice-description {
  max-width: 330px;
  margin-top: 10px;
  font-size: clamp(.72rem, 1.55vw, .9rem);
  line-height: 1.42;
}

.portal-shell.is-wide-touch .choice-kicker {
  font-size: clamp(.56rem, 1.15vw, .7rem);
}

.portal-shell.is-wide-touch .choice-button {
  margin-top: 14px;
  padding: 11px 14px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background:
    linear-gradient(110deg, rgba(var(--accent-rgb), .18), rgba(5,4,8,.88)),
    rgba(5,4,8,.82);
}

/* The normal-phone fix already moves the scene wrapper instead of the filtered
   SVG. Wide-touch keeps that architecture, shrinks the canvas, and removes the
   expensive filters from the moving descendants. */
.portal-shell.is-wide-touch .portal-choice-intake .scene-house,
.portal-shell.is-wide-touch .portal-choice-showcase .scene-showcase {
  animation: none !important;
  transform: none !important;
  will-change: auto;
}

.portal-shell.is-wide-touch .portal-choice-intake .choice-scene,
.portal-shell.is-wide-touch .portal-choice-showcase .choice-scene {
  opacity: .72;
  place-items: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: auto;
}

.portal-shell.is-wide-touch .portal-choice-intake .choice-scene {
  inset: 27% -2% 2% 10%;
  animation: intakeSceneDriftWideTouch 18s ease-in-out infinite alternate;
}

.portal-shell.is-wide-touch .portal-choice-showcase .choice-scene {
  inset: 2% 10% 27% -2%;
  animation: showcaseSceneDriftWideTouch 19s ease-in-out infinite alternate;
}

.portal-shell.is-wide-touch .portal-choice-intake .choice-scene svg,
.portal-shell.is-wide-touch .portal-choice-showcase .choice-scene svg {
  width: min(90%, 470px) !important;
  max-width: 90%;
  transform: none !important;
  filter: none;
}

.portal-shell.is-wide-touch .house-halo,
.portal-shell.is-wide-touch .film-halo,
.portal-shell.is-wide-touch .door-light {
  filter: none;
}

.portal-shell.is-wide-touch .house-halo,
.portal-shell.is-wide-touch .film-halo {
  stroke-width: 9;
  opacity: .2;
}

.portal-shell.is-wide-touch .smoke-puff,
.portal-shell.is-wide-touch .house-spark,
.portal-shell.is-wide-touch .showcase-spark,
.portal-shell.is-wide-touch .floating-media {
  filter: none;
}

.portal-shell.is-wide-touch .smoke-puff {
  fill: rgba(255, 239, 203, .16);
}

.portal-shell.is-wide-touch .floating-media {
  animation: mediaFloatWideTouch 9.5s ease-in-out infinite;
}

/* Keep the atmosphere animated, but stop repainting several full-resolution,
   blurred/blended surfaces every frame on the high-DPR inner display. */
.portal-shell.is-wide-touch .cinema-beam {
  width: 56vw;
  height: 108vh;
  opacity: .11;
  filter: none;
  mix-blend-mode: normal;
}

.portal-shell.is-wide-touch .cinema-ribbon {
  width: 54vw;
  height: 20vh;
  opacity: .15;
  filter: none;
}

.portal-shell.is-wide-touch .cinema-curtain {
  filter: none;
  opacity: .34;
}

.portal-shell.is-wide-touch .cinema-grain {
  opacity: .045;
  mix-blend-mode: normal;
  animation: none;
}

.portal-shell.is-wide-touch .cinema-prism {
  filter: none;
}

.portal-shell.is-wide-touch .cinema-prism:nth-child(n + 11) {
  display: none;
}

.portal-shell.is-wide-touch .portal-header,
.portal-shell.is-wide-touch .portal-footer {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.portal-shell.is-wide-touch .portal-header {
  justify-content: space-between;
  padding-inline: clamp(18px, 3vw, 30px);
  background: linear-gradient(180deg, rgba(3,2,6,.98), rgba(3,2,6,.78));
}

.portal-shell.is-wide-touch .portal-header-cue {
  display: flex;
  font-size: clamp(.92rem, 2vw, 1.25rem);
}

.portal-shell.is-wide-touch .portal-footer {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: 1fr;
  gap: clamp(8px, 1.5vw, 18px);
  padding: 7px clamp(12px, 2.2vw, 24px) max(7px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(5,3,8,.9), rgba(3,2,6,.99));
}

.portal-shell.is-wide-touch .portal-copyright {
  grid-column: auto;
  grid-row: auto;
  max-width: 145px;
  font-size: .52rem;
  line-height: 1.18;
  white-space: normal;
}

.portal-shell.is-wide-touch .portal-socials a {
  width: 32px;
  height: 32px;
}

.portal-shell.is-wide-touch .contact-button {
  min-width: 84px;
  height: 40px;
  padding-inline: 9px;
}

.portal-shell.is-wide-touch .contact-button span {
  font-size: .69rem;
}

.portal-shell.is-wide-touch .choice-copy::before {
  filter: none;
  background: radial-gradient(ellipse at center, rgba(3,2,6,.84), rgba(3,2,6,.56) 58%, transparent 82%);
}

.portal-shell.is-wide-touch .portal-center-mark {
  top: 50% !important;
  left: 50% !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  transition: none !important;
}

.portal-shell.is-wide-touch .portal-center-mark i {
  display: none !important;
}

.portal-shell.is-wide-touch .portal-center-mark b {
  width: 42px;
  height: 42px;
  background: rgba(5, 3, 8, .97) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.portal-shell.is-wide-touch .portal-stage::before {
  content: none !important;
  display: none !important;
}

/* Touch Chrome can retain :hover after a tap. Do not let that transient state
   scale filtered artwork or change panel brightness on the wide-touch profile. */
.portal-shell.is-wide-touch .portal-choice:hover {
  filter: none;
}

.portal-shell.is-wide-touch .portal-choice:hover .choice-backdrop {
  transform: none;
  filter: none;
}

.portal-shell.is-wide-touch .portal-choice:hover .choice-scene {
  opacity: .72;
}

.portal-shell.is-wide-touch .portal-choice:hover .choice-copy {
  transform: none;
}

.portal-shell.is-wide-touch .portal-choice:hover .choice-button {
  color: #fff9e8;
  background:
    linear-gradient(110deg, rgba(var(--accent-rgb), .18), rgba(5,4,8,.88)),
    rgba(5,4,8,.82);
  box-shadow: 0 0 26px rgba(var(--accent-rgb), .16), inset 0 0 20px rgba(var(--accent-rgb), .06);
  transform: none;
}

.portal-shell.is-wide-touch .portal-choice:hover .choice-button b {
  color: var(--accent-b);
  transform: none;
}

.portal-shell.is-wide-touch .portal-choice:hover .showcase-status-sticker {
  transform: rotate(3deg) scale(.94);
}

.portal-shell.is-wide-touch .lane-trace-orb {
  width: 12px;
  height: 12px;
  offset-path: inset(7px round 14px);
  /* Wide-touch baseline remains slower for compositor stability. */
  --orb-platform-adjust: 2.75s;
  will-change: auto;
}

.portal-shell.is-wide-touch .lane-trace-orb::before {
  inset: -6px;
  filter: none;
  opacity: .24;
}

.portal-shell.is-wide-touch .lane-trace-orb::after {
  inset: -11px;
  filter: none;
  opacity: .22;
}

.portal-shell.is-wide-touch .lane-trace-orb-intake {
  box-shadow: 0 0 7px #fff4be, 0 0 14px rgba(255, 214, 107, .78);
}

.portal-shell.is-wide-touch .lane-trace-orb-showcase {
  box-shadow: 0 0 7px #eafcff, 0 0 14px rgba(49, 217, 255, .78);
}

.portal-shell.is-wide-touch .showcase-status-sticker {
  top: 14px;
  right: 14px;
  min-width: 128px;
  padding: 14px 20px 15px;
  border-width: 3px;
  transform: rotate(3deg) scale(.94);
  transform-origin: top right;
}

.portal-shell.is-wide-touch .showcase-status-sticker::before,
.portal-shell.is-wide-touch .showcase-status-sticker::after {
  top: 9px;
  width: 8px;
  height: 8px;
}

.portal-shell.is-wide-touch .showcase-status-sticker span {
  font-size: .53rem;
}

.portal-shell.is-wide-touch .showcase-status-sticker strong {
  font-size: .72rem;
}

@keyframes intakeSceneDriftWideTouch {
  0%   { transform: translate3d(-2.5%, 2.5%, 0); }
  36%  { transform: translate3d(3.2%, -2%, 0); }
  72%  { transform: translate3d(-1.5%, -3.2%, 0); }
  100% { transform: translate3d(3.5%, 1.5%, 0); }
}

@keyframes showcaseSceneDriftWideTouch {
  0%   { transform: translate3d(2.5%, -2.5%, 0); }
  36%  { transform: translate3d(-3.2%, 2%, 0); }
  72%  { transform: translate3d(1.5%, 3.2%, 0); }
  100% { transform: translate3d(-3.5%, -1.5%, 0); }
}

@keyframes mediaFloatWideTouch {
  0%, 100% { transform: translate3d(-7px, 5px, 0) rotate(-1deg); opacity: .58; }
  50%      { transform: translate3d(9px, -7px, 0) rotate(1deg); opacity: .84; }
}