/* Shared presentation layer for Matterport city pages.
   City copy, imagery, schema, and embedded tours remain page-owned. */
.matterport-city-page{
  --mp-city-bg:#020608;
  --mp-city-panel:rgba(8,17,24,.72);
  --mp-city-cyan:#00d9ff;
  --mp-city-cyan-soft:#8af0ff;
  --mp-city-text:#f2fbff;
  --mp-city-muted:#b8ceda;
  background:var(--mp-city-bg);
}

.matterport-city-page main{
  position:relative;
  display:block;
  flex:0 0 auto;
  overflow:hidden;
  padding:0;
  background:var(--mp-city-bg);
}

.matterport-city-hero{
  position:relative;
  display:grid;
  min-height:min(900px,calc(100svh - 64px));
  align-items:end;
  isolation:isolate;
  overflow:hidden;
  background:#031015;
}

.matterport-city-hero::after{
  content:"";
  position:absolute;
  right:0;
  bottom:-1px;
  left:0;
  z-index:1;
  height:clamp(170px,22vh,270px);
  pointer-events:none;
  background:linear-gradient(to bottom,transparent 0%,rgba(2,6,8,.16) 28%,rgba(2,6,8,.64) 68%,var(--mp-city-bg) 100%);
}

.matterport-city-hero__image,
.matterport-city-hero__veil,
.matterport-city-hero__grid{
  position:absolute;
  inset:0;
}

.matterport-city-hero__image{
  z-index:-4;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 54%;
  filter:saturate(.88) contrast(1.06);
}

.matterport-city-hero__veil{
  z-index:-3;
  background:
    linear-gradient(90deg,rgba(1,7,11,.94) 0%,rgba(1,7,11,.76) 39%,rgba(1,7,11,.2) 74%,rgba(1,7,11,.42) 100%),
    linear-gradient(0deg,rgba(1,7,11,.96) 0%,transparent 52%,rgba(1,7,11,.32) 100%);
}

.matterport-city-hero__grid{
  z-index:-2;
  opacity:.08;
  background-image:
    linear-gradient(rgba(0,224,255,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,224,255,.16) 1px,transparent 1px);
  background-size:clamp(54px,7vw,104px) clamp(54px,7vw,104px);
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 78%);
  mask-image:linear-gradient(90deg,#000,transparent 78%);
}

.matterport-city-hero__contours{
  position:absolute;
  inset:0 auto 0 -14%;
  z-index:-1;
  width:114%;
  height:100%;
  margin:0;
  opacity:.54;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 76% 82% at 18% 16%,#000 0%,rgba(0,0,0,.92) 42%,rgba(0,0,0,.42) 66%,transparent 84%);
  mask-image:radial-gradient(ellipse 76% 82% at 18% 16%,#000 0%,rgba(0,0,0,.92) 42%,rgba(0,0,0,.42) 66%,transparent 84%);
}

.matterport-city-hero__content{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  padding:clamp(92px,14vh,150px) 20px clamp(54px,9vh,96px);
}

.matterport-city-hero__copy{max-width:820px}

.matterport-city-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  color:#b9f7ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.19em;
  text-transform:uppercase;
}

.matterport-city-kicker::before{
  content:"";
  width:42px;
  height:1px;
  background:var(--mp-city-cyan);
  box-shadow:0 0 12px rgba(0,224,255,.85);
}

.matterport-city-hero h1{
  max-width:14ch;
  margin:18px 0 22px;
  color:var(--mp-city-text);
  font-size:clamp(46px,7.2vw,104px);
  font-weight:800;
  line-height:.91;
  letter-spacing:-.06em;
  text-wrap:balance;
}

.matterport-city-hero h1 .outline,
.matterport-city-hero h1 .glow-word--outline,
.matterport-city-hero h1 .glow-word--outline .glow-letter{
  color:transparent;
  -webkit-text-stroke:1.5px #aef7ff;
  paint-order:stroke fill;
  text-shadow:0 0 8px rgba(202,250,255,.18),0 0 22px rgba(0,234,255,.34),0 0 44px rgba(110,231,183,.16);
}

.matterport-city-hero h1 .glow-word{
  display:inline-block;
  color:var(--mp-city-text);
  -webkit-text-stroke:0;
  text-shadow:0 0 7px rgba(255,255,255,.2),0 0 22px rgba(0,234,255,.22),0 0 44px rgba(110,231,183,.12);
}

.matterport-city-hero__rtl-title-line{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:flex-start;
  gap:.18em;
  direction:rtl;
  unicode-bidi:isolate;
}

.matterport-city-hero__rtl-title-line--location{
  margin-top:.08em;
}

.matterport-city-hero h1 .glow-letter{
  display:inline-block;
  transition:color .2s ease,text-shadow .25s ease,-webkit-text-stroke .25s ease;
  will-change:color,text-shadow;
}

.matterport-city-hero h1 .glow-letter:hover{
  color:#fff;
  text-shadow:0 0 8px rgba(255,255,255,.72),0 0 22px rgba(0,234,255,.66),0 0 42px rgba(110,231,183,.4);
}

.matterport-city-hero h1 .glow-word--outline .glow-letter:hover{
  color:transparent;
  -webkit-text-stroke:1.6px #e4fdff;
  text-shadow:0 0 8px rgba(255,255,255,.72),0 0 22px rgba(0,234,255,.78),0 0 44px rgba(110,231,183,.44);
}

.matterport-city-hero .lede{
  max-width:66ch;
  margin:0;
  color:#d8eaf1;
  font-size:clamp(17px,2vw,20px);
  line-height:1.5;
  text-shadow:0 2px 18px rgba(0,0,0,.8);
}

.matterport-city-hero .hero-facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:28px;
}

.matterport-city-hero .hero-facts span{
  padding:9px 12px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#d7f8ff;
  font-size:12px;
  font-weight:700;
  text-shadow:0 1px 10px rgba(0,0,0,.72);
  box-shadow:none;
}

.matterport-city-page .matterport-city-hero .cta-row{
  justify-content:flex-start;
  margin:26px 0 0;
}

.matterport-city-page .matterport-city-hero .pill,
.matterport-city-page main > .matterport-city-content > .cta-row .pill{
  position:relative;
  display:inline-flex;
  min-width:min(100%,250px);
  align-items:center;
  gap:12px;
  overflow:hidden;
  padding:13px 14px 13px 16px;
  border:1px solid rgba(138,240,255,.72);
  border-radius:3px 20px 3px 20px;
  background:transparent;
  color:#eaf8ff;
  box-shadow:0 0 24px rgba(0,217,255,.12),inset 0 0 0 1px rgba(255,255,255,.05);
  text-shadow:0 1px 12px rgba(0,0,0,.78);
  isolation:isolate;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.matterport-city-page .matterport-city-hero .pill::before,
.matterport-city-page main > .matterport-city-content > .cta-row .pill::before{
  display:none;
}

.matterport-city-page .matterport-city-hero .pill::after,
.matterport-city-page main > .matterport-city-content > .cta-row .pill::after{
  content:"";
  position:absolute;
  top:-55%;
  left:-64px;
  z-index:0;
  display:block;
  width:34px;
  height:210%;
  border:0;
  background:linear-gradient(90deg,transparent,rgba(174,247,255,.26),transparent);
  transform:skewX(-17deg);
  transition:left .52s cubic-bezier(.2,.75,.25,1);
  pointer-events:none;
}

.matterport-city-page .pill .dot,
.matterport-city-page .pill .lab{
  position:relative;
  z-index:1;
}

.matterport-city-page .pill .dot{
  width:14px;
  height:14px;
  flex:0 0 14px;
  border:1px solid var(--mp-city-cyan-soft);
  border-radius:50%;
  background:transparent;
  box-shadow:none;
}

.matterport-city-page .pill .dot::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:var(--mp-city-cyan);
  box-shadow:0 0 10px rgba(0,217,255,.9);
}

.matterport-city-page .pill .lab{
  display:flex;
  flex:1;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.matterport-city-page .pill .lab::after{
  content:"→";
  color:var(--mp-city-cyan-soft);
  font-size:1.05rem;
  line-height:1;
  transition:transform .22s ease;
}

.matterport-city-page .matterport-city-hero .pill:hover,
.matterport-city-page main > .matterport-city-content > .cta-row .pill:hover{
  transform:translateY(-2px);
  border-color:var(--mp-city-cyan-soft);
  background:transparent;
  box-shadow:0 0 32px rgba(0,217,255,.24),inset 0 0 0 1px rgba(255,255,255,.1);
}

.matterport-city-page .matterport-city-hero .pill:hover::after,
.matterport-city-page main > .matterport-city-content > .cta-row .pill:hover::after{
  left:calc(100% + 30px);
}

.matterport-city-page .pill:hover .lab::after{transform:translateX(3px)}

.matterport-city-hero .hero-stats .steps{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  max-width:600px;
  margin:28px 0 0;
}

.matterport-city-hero .hero-stats .step{
  min-height:0;
  padding:16px 18px;
  border:1px solid rgba(138,240,255,.24);
  border-left:2px solid var(--mp-city-cyan);
  border-radius:0 16px 0 16px;
  background:rgba(2,12,17,.67);
  box-shadow:none;
  text-align:left;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.matterport-city-hero .hero-stats .step::before{display:none}

.matterport-city-hero .hero-stats .num{
  color:#fff;
  font-size:clamp(25px,3.2vw,38px);
  text-shadow:none;
}

.matterport-city-hero .hero-stats .lbl{color:#a9dfe8}

.matterport-city-page main > .page-contour-field{
  position:sticky;
  top:0;
  z-index:0;
  display:block;
  width:100%;
  height:100svh;
  margin-bottom:-100svh;
  opacity:.28;
  pointer-events:none;
  mix-blend-mode:screen;
}

.matterport-city-page main > .matterport-city-content{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:clamp(76px,9vw,128px) 20px clamp(72px,10vw,132px);
}

.matterport-city-page main > .wrap:not(.matterport-city-content){
  position:relative;
  z-index:1;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:clamp(76px,9vw,128px) 20px clamp(72px,10vw,132px);
}

.matterport-city-legacy-hidden{display:none !important}

.matterport-city-page main > .matterport-city-tour-preview{
  max-width:1180px;
  margin:0 auto;
  padding:clamp(58px,8vw,104px) 20px 0;
  background:transparent;
}

.matterport-city-page main > .matterport-city-tour-preview .hero-inner{
  display:block;
  max-width:none;
  padding:0;
}

.matterport-city-page main > .matterport-city-tour-preview .signal{
  width:min(100%,980px);
  margin:0 auto;
  overflow:hidden;
  border:1px solid rgba(129,239,255,.24);
  border-radius:4px 22px 4px 22px;
  background:#071017;
  box-shadow:0 18px 46px rgba(0,0,0,.28);
}

.matterport-city-page main > .section{
  width:calc(100% - 40px);
  max-width:1180px;
  margin-right:auto;
  margin-left:auto;
}

.matterport-city-page main .actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.matterport-city-page main .button{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:12px 18px;
  border:1px solid rgba(138,240,255,.62);
  border-radius:3px 18px 3px 18px;
  background:transparent;
  color:#eaf8ff;
  box-shadow:0 0 24px rgba(0,217,255,.1);
  text-decoration:none;
}

.matterport-city-page main .button:hover{
  border-color:#8af0ff;
  background:transparent;
  box-shadow:0 0 30px rgba(0,217,255,.2);
}

.matterport-city-page main .copy{
  max-width:none;
  margin:0;
}

.matterport-city-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,1.35fr);
  gap:30px;
  align-items:end;
  margin:0 0 42px;
}

.matterport-city-page main .matterport-city-intro .neon-title{
  margin:0;
  color:var(--mp-city-text);
  font-size:clamp(38px,5.4vw,72px);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.05em;
  text-align:left;
  text-shadow:none;
}

.matterport-city-page main .copy > p{
  max-width:74ch;
  margin:0 0 18px;
  color:#d8eaf1;
  font-size:clamp(16px,1.55vw,18px);
  line-height:1.7;
  text-shadow:none;
}

.matterport-city-page main .bullets{
  margin:28px 0 0;
  padding:0;
  list-style:none;
  color:#d8eaf1;
}

.matterport-city-page main .bullets li{
  position:relative;
  margin:0;
  padding:14px 0 14px 22px;
  border-top:1px solid rgba(138,240,255,.13);
  line-height:1.55;
}

.matterport-city-page main .bullets li::before{
  content:"";
  position:absolute;
  top:23px;
  left:0;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--mp-city-cyan);
  box-shadow:0 0 12px rgba(0,224,255,.75);
}

.matterport-city-page main .section{
  position:relative;
  margin:clamp(58px,8vw,104px) 0 0;
  padding:clamp(42px,6vw,72px) 0 0;
  border:0;
  border-top:1px solid rgba(138,240,255,.16);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.matterport-city-page main .section h3,
.matterport-city-page main .section h3.neon-title{
  max-width:20ch;
  margin:0 0 18px;
  color:var(--mp-city-text);
  font-size:clamp(28px,3.9vw,50px);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.04em;
  text-align:left;
  text-shadow:none;
}

.matterport-city-page main .section > p[style]{
  color:#cfe3f7 !important;
  font-size:clamp(16px,1.55vw,18px);
  line-height:1.7 !important;
}

.matterport-city-page main .specs{gap:10px;margin-top:22px}

.matterport-city-page main .spec{
  min-width:min(100%,205px);
  padding:14px 16px;
  border:1px solid rgba(138,240,255,.2);
  border-left:2px solid var(--mp-city-cyan);
  border-radius:0 14px 0 14px;
  background:var(--mp-city-panel);
  box-shadow:none;
}

.matterport-city-page main .spec small{color:#9db7c4}
.matterport-city-page main .spec b{color:#edfaff;text-shadow:none}

.matterport-city-page main .measurement-gallery{gap:14px;margin-top:26px}

.matterport-city-page main .measurement-shot{
  overflow:hidden;
  border:1px solid rgba(129,239,255,.18);
  border-radius:4px 22px 4px 22px;
  background:#071017;
  box-shadow:0 18px 46px rgba(0,0,0,.28);
}

.matterport-city-page main .measurement-shot img{
  transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .65s ease;
}

.matterport-city-page main .measurement-shot:hover img{
  transform:scale(1.035);
  filter:saturate(1.08) contrast(1.03);
}

.matterport-city-page main .measurement-shot figcaption{
  padding:16px 18px 18px;
  color:#dff6fa;
  background:linear-gradient(180deg,rgba(1,7,10,.22),rgba(1,7,10,.86));
  text-shadow:none;
}

.matterport-city-page main .neon-card{
  margin:clamp(58px,8vw,104px) 0 0;
  border:1px solid rgba(129,239,255,.24);
  border-radius:4px 22px 4px 22px;
  background:#071017;
  box-shadow:0 18px 46px rgba(0,0,0,.28);
}

.matterport-city-page main .neon-card:hover{
  transform:none;
  box-shadow:0 18px 46px rgba(0,0,0,.28);
}

.matterport-city-page main .card,
.matterport-city-page main .faq details{
  border:1px solid rgba(138,240,255,.18);
  border-left:2px solid var(--mp-city-cyan);
  border-radius:0 16px 0 16px;
  background:var(--mp-city-panel);
  box-shadow:none;
}

.matterport-city-page main .card:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.22);
}

.matterport-city-page main .features li button{color:#c9f8ff}

.matterport-city-page main .faq details{padding:0}

.matterport-city-page main .faq summary{
  padding:18px 52px 18px 20px;
  color:#f0fbff;
  text-shadow:none;
}

.matterport-city-page main .faq .ans{
  margin:0;
  padding:0 20px 20px;
  color:var(--mp-city-muted);
  line-height:1.65;
  text-shadow:none;
}

.matterport-city-page main > .matterport-city-content > .cta-row{
  justify-content:flex-start;
  margin:clamp(54px,8vw,96px) 0 0;
}

@media(max-width:640px){
  .matterport-city-hero{min-height:820px}
  .matterport-city-hero__veil{
    background:linear-gradient(0deg,rgba(1,7,11,.98) 0%,rgba(1,7,11,.72) 64%,rgba(1,7,11,.24) 100%);
  }
  .matterport-city-hero h1{font-size:clamp(42px,14vw,68px)}
  .matterport-city-hero__contours{inset:0 auto 0 -28%;width:128%;opacity:.46}
  .matterport-city-hero__content,
  .matterport-city-page main > .matterport-city-content{padding-inline:16px}
  .matterport-city-hero .hero-stats .steps{grid-template-columns:1fr}
  .matterport-city-page .matterport-city-hero .pill{width:100%}
}

@media(max-width:820px){
  .matterport-city-intro{grid-template-columns:1fr}
}

html[dir="rtl"] .matterport-city-hero__content,
html[dir="rtl"] .matterport-city-hero__copy{
  text-align:right;
}

html[dir="rtl"] .matterport-city-hero h1{
  max-width:18ch;
  line-height:1.08;
  letter-spacing:0;
}

html[dir="rtl"] .matterport-city-kicker,
html[dir="rtl"] .matterport-city-hero .hero-facts,
html[dir="rtl"] .matterport-city-page .matterport-city-hero .cta-row{
  justify-content:flex-start;
}

@media(prefers-reduced-motion:reduce){
  .matterport-city-page main .measurement-shot img,
  .matterport-city-page .pill,
  .matterport-city-page .pill::after,
  .matterport-city-page .pill .lab::after,
  .matterport-city-hero h1 .glow-letter{
    transition:none;
  }
}