/* JCZ suburb 3D mockup system — explicit opt-in on the 29 location pages only. */
.suburb-3d-hero {
  --scene-rx: 0deg;
  --scene-ry: 0deg;
  --scene-y: 0px;
  --image-x: 0px;
  --image-y: 0px;
  position: relative;
  isolation: isolate;
  display: grid !important;
  min-height: clamp(660px, 48vw, 740px);
  overflow: hidden;
  background: linear-gradient(90deg, #fbfaf7 0%, #fbfaf7 49%, #0a315f 49%, #041a39 100%) !important;
}

.suburb-3d-hero > .section-inner {
  position: relative;
  z-index: 4;
  width: min(var(--wide), 100%);
  padding: clamp(58px, 6vw, 86px) var(--pad-x) clamp(54px, 5vw, 74px);
  text-shadow: none !important;
}

.suburb-3d-hero .center-title,
.suburb-3d-hero .local-hero-copy {
  max-width: min(44%, 570px);
  align-items: flex-start !important;
  text-align: left;
  text-shadow: none !important;
}

.suburb-3d-hero .center-title { margin: 0; }

.suburb-3d-hero .center-title::before {
  content: "LOCAL MORTGAGE BROKER \2022  LOGAN & NORTHERN GOLD COAST";
  display: block;
  margin-bottom: 20px;
  color: #006d72;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1.5;
}

.suburb-3d-hero .local-hero-kicker {
  margin-bottom: 18px;
  color: #006d72 !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .11em;
}

.site-redesign-v2 .suburb-3d-hero :is(h1, h2) {
  max-width: 590px;
  color: #092952 !important;
  font-size: clamp(46px, 4.1vw, 66px);
  line-height: .99;
  letter-spacing: -.035em;
}

.site-redesign-v2 .suburb-3d-hero .local-hero-copy h1 {
  font-size: clamp(42px, 3vw, 48px);
}

.site-redesign-v2 .suburb-3d-hero :is(p, li, .section-lede) {
  max-width: 560px;
  color: #173552 !important;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.58;
}

.suburb-3d-hero .star-row,
.suburb-3d-hero .center-title > .hero-headshot,
.suburb-3d-hero .local-hero-photo-card.is-headshot {
  display: none !important;
}

.suburb-3d-hero .hero-actions {
  justify-content: flex-start !important;
  gap: 14px;
  margin: 26px 0 22px;
}

.suburb-3d-hero .hero-actions a[href^="tel:"] {
  display: none;
}

.suburb-3d-hero .button {
  min-height: 52px;
  padding: 13px 25px;
  border-radius: 999px;
}

.suburb-3d-hero .button.secondary {
  border: 2px solid #092952;
  background: rgba(255, 255, 255, .68);
  color: #092952;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.suburb-3d-hero .button.secondary:hover {
  background: #092952;
  color: #fff;
}

.suburb-3d-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 22px;
}

.suburb-3d-proof__item {
  display: grid;
  grid-template-columns: 48px auto;
  grid-template-rows: auto auto;
  min-width: 150px;
  align-items: center;
  column-gap: 12px;
}

.suburb-3d-proof__icon {
  grid-row: 1 / 3;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid #e4dfd5;
  border-radius: 50%;
  background: rgba(255, 255, 255, .78);
  color: #007a80;
  font-size: 23px;
  box-shadow: 0 10px 24px rgba(9, 41, 82, .08);
}

.suburb-3d-proof__item:last-child .suburb-3d-proof__icon {
  color: #f0a900;
}

.suburb-3d-proof strong {
  color: #092952;
  font-size: 18px;
  line-height: 1.1;
}

.suburb-3d-proof small {
  color: #617087;
  font-size: 11.5px;
  line-height: 1.25;
}

.suburb-3d-stage {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 2;
  width: 52%;
  overflow: hidden;
  perspective: 1400px;
  background: linear-gradient(135deg, #123e70, #041a39 72%);
}

.suburb-3d-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 49, 95, .52), transparent 23%),
    radial-gradient(circle at 58% 42%, transparent 0 32%, rgba(1, 15, 35, .18) 77%);
}

.suburb-3d-stage__scene {
  position: absolute;
  inset: 0;
  transform: perspective(1400px) rotateX(var(--scene-rx)) rotateY(var(--scene-ry)) translateY(var(--scene-y));
  transform-style: preserve-3d;
  transform-origin: 54% 55%;
  transition: transform 180ms ease-out;
  will-change: transform;
}

.suburb-3d-stage__picture,
.suburb-3d-stage__picture img {
  display: block;
  width: 100%;
  height: 100%;
}

.suburb-3d-stage__picture {
  position: absolute;
  inset: 0;
  transform: translateZ(-16px) scale(1.035);
}

.suburb-3d-stage__picture img {
  object-fit: cover;
  object-position: 61% center;
  transform: translate3d(var(--image-x), var(--image-y), 0);
  transition: transform 180ms ease-out;
  will-change: transform;
}

.suburb-3d-route {
  position: absolute;
  right: 2%;
  bottom: 7%;
  z-index: 3;
  width: 94%;
  height: 55%;
  border: 2px solid rgba(248, 189, 42, .76);
  border-left-color: transparent;
  border-radius: 50%;
  transform: translateZ(28px) rotate(-6deg);
  filter: drop-shadow(0 0 16px rgba(248, 189, 42, .2));
}

.suburb-3d-route::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: -22%;
  width: 54%;
  height: 38%;
  border: 2px solid rgba(248, 189, 42, .76);
  border-left-color: transparent;
  border-top-color: transparent;
  border-radius: 50%;
  transform: rotate(10deg);
}

.suburb-3d-paths {
  position: absolute;
  inset: 0;
  z-index: 5;
  transform-style: preserve-3d;
}

.suburb-3d-tile {
  position: absolute;
  display: grid;
  width: 122px;
  min-height: 132px;
  place-items: center;
  align-content: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .38), rgba(143, 177, 205, .12)),
    rgba(13, 56, 97, .42);
  color: #fff;
  text-align: center;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .62),
    inset 0 -10px 24px rgba(3, 26, 57, .25),
    0 22px 46px rgba(0, 12, 31, .34);
  text-shadow: 0 2px 8px rgba(0, 14, 35, .65);
  transform-style: preserve-3d;
  backdrop-filter: blur(13px) saturate(1.15);
  -webkit-backdrop-filter: blur(13px) saturate(1.15);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.suburb-3d-tile::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 13px;
  pointer-events: none;
}

.suburb-3d-tile:hover,
.suburb-3d-tile:focus-visible {
  border-color: #f8bd2a;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .48), rgba(143, 177, 205, .18)),
    rgba(13, 56, 97, .55);
}

.suburb-3d-tile:focus-visible {
  outline: 3px solid #f8bd2a;
  outline-offset: 4px;
}

.suburb-3d-tile__icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin-bottom: 7px;
  color: #fff7e0;
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  filter: drop-shadow(0 5px 6px rgba(0, 12, 31, .36));
  transform: translateZ(32px);
}

.suburb-3d-tile strong,
.suburb-3d-tile small {
  display: block;
  color: #fff;
  line-height: 1.08;
}

.suburb-3d-tile strong { font-size: 16px; }
.suburb-3d-tile small { margin-top: 3px; font-size: 13px; font-weight: 650; }
.suburb-3d-tile--buy { top: 11%; left: 12%; transform: translateZ(62px) rotateY(7deg) rotateX(2deg); }
.suburb-3d-tile--refinance { top: 9%; right: 7%; transform: translateZ(78px) rotateY(-8deg) rotateX(2deg); }
.suburb-3d-tile--complex { left: 4%; bottom: 22%; transform: translateZ(82px) rotateY(9deg) rotateX(-2deg); }
.suburb-3d-tile--invest { right: 3%; bottom: 25%; transform: translateZ(70px) rotateY(-7deg) rotateX(-1deg); }
.suburb-3d-tile--buy:hover,
.suburb-3d-tile--buy:focus-visible { transform: translateZ(86px) rotateY(7deg) rotateX(2deg) translateY(-5px); }
.suburb-3d-tile--refinance:hover,
.suburb-3d-tile--refinance:focus-visible { transform: translateZ(102px) rotateY(-8deg) rotateX(2deg) translateY(-5px); }
.suburb-3d-tile--complex:hover,
.suburb-3d-tile--complex:focus-visible { transform: translateZ(106px) rotateY(9deg) rotateX(-2deg) translateY(-5px); }
.suburb-3d-tile--invest:hover,
.suburb-3d-tile--invest:focus-visible { transform: translateZ(94px) rotateY(-7deg) rotateX(-1deg) translateY(-5px); }

.suburb-3d-identity {
  position: absolute;
  left: 42%;
  bottom: 3.5%;
  z-index: 8;
  display: grid;
  justify-items: center;
  width: 280px;
  margin: 0;
  color: #092952;
  text-align: center;
  transform: translateX(-50%) translateZ(118px);
  transform-style: preserve-3d;
}

.suburb-3d-identity img {
  position: relative;
  z-index: 2;
  width: 108px;
  height: 108px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #fff;
  object-fit: cover;
  object-position: center top;
  box-shadow: 0 18px 36px rgba(0, 12, 31, .34);
}

.suburb-3d-identity figcaption {
  min-width: 250px;
  margin-top: -13px;
  padding: 18px 22px 11px;
  border: 1px solid rgba(9, 41, 82, .16);
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 16px 38px rgba(0, 12, 31, .24);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.suburb-3d-identity strong,
.suburb-3d-identity span {
  display: block;
}

.suburb-3d-identity strong { font-size: 15px; line-height: 1.15; }
.suburb-3d-identity span { margin-top: 3px; color: #4f6177; font-size: 11.5px; }

.suburb-3d-services {
  position: relative;
  z-index: 8;
  padding: 20px var(--pad-x) 22px;
  border-bottom: 1px solid #e5e0d7;
  background: #fbfaf7;
}

.suburb-3d-services__inner {
  display: grid;
  width: min(var(--wide), 100%);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0 auto;
}

.suburb-3d-service {
  display: grid;
  min-height: 142px;
  grid-template-columns: 104px 1fr;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border: 1px solid #e4dfd5;
  border-radius: 16px;
  background: rgba(255, 255, 255, .9);
  color: #092952;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(9, 41, 82, .1);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.suburb-3d-service:hover,
.suburb-3d-service:focus-visible {
  border-color: #c9b16c;
  color: #092952;
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(9, 41, 82, .16);
}

.suburb-3d-service:focus-visible {
  outline: 3px solid #f8bd2a;
  outline-offset: 3px;
}

.suburb-3d-service__icon {
  position: relative;
  display: grid;
  width: 90px;
  height: 80px;
  place-items: center;
  border: 1px solid #ddd6ca;
  border-radius: 50%;
  background: linear-gradient(145deg, #fff, #e8e4dc);
  color: #0d7180;
  font-size: 43px;
  font-weight: 800;
  box-shadow:
    0 14px 18px rgba(9, 41, 82, .13),
    inset 0 3px 6px rgba(255, 255, 255, .9);
  transform: perspective(400px) rotateX(58deg) rotateZ(-5deg);
}

.suburb-3d-service__icon > span {
  transform: rotateZ(5deg) rotateX(-58deg) translateZ(28px);
  filter: drop-shadow(0 7px 5px rgba(9, 41, 82, .2));
}

.suburb-3d-service:nth-child(2) .suburb-3d-service__icon { color: #168895; }
.suburb-3d-service:nth-child(3) .suburb-3d-service__icon { color: #23768a; }
.suburb-3d-service:nth-child(4) .suburb-3d-service__icon { color: #0b6a70; }
.suburb-3d-service strong { display: block; color: #087078; font-family: var(--font-serif); font-size: 23px; line-height: 1.1; }
.suburb-3d-service small { display: block; margin-top: 7px; color: #25405e; font-size: 13px; line-height: 1.38; }

.suburb-3d-hero:not(.is-3d-visible) .suburb-3d-tile,
.suburb-3d-hero:not(.is-3d-visible) .suburb-3d-identity {
  opacity: 0;
}

.suburb-3d-hero.is-3d-visible .suburb-3d-tile,
.suburb-3d-hero.is-3d-visible .suburb-3d-identity {
  animation: suburb-3d-reveal .62s cubic-bezier(.2, .7, .2, 1) both;
}

.suburb-3d-hero.is-3d-visible .suburb-3d-tile--refinance { animation-delay: 80ms; }
.suburb-3d-hero.is-3d-visible .suburb-3d-tile--complex { animation-delay: 140ms; }
.suburb-3d-hero.is-3d-visible .suburb-3d-tile--invest { animation-delay: 200ms; }
.suburb-3d-hero.is-3d-visible .suburb-3d-identity { animation-delay: 230ms; }

@keyframes suburb-3d-reveal {
  from { opacity: 0; filter: blur(4px); }
  to { opacity: 1; filter: blur(0); }
}

@media (max-width: 1180px) {
  .suburb-3d-hero .center-title,
  .suburb-3d-hero .local-hero-copy { max-width: 46%; }
  .suburb-3d-tile { width: 108px; min-height: 118px; }
  .suburb-3d-service { grid-template-columns: 80px 1fr; padding: 14px; }
  .suburb-3d-service__icon { width: 72px; height: 68px; font-size: 36px; }
}

@media (max-width: 960px) {
  .suburb-3d-hero {
    display: flex !important;
    min-height: auto;
    flex-direction: column;
    background: #fbfaf7 !important;
  }

  .suburb-3d-hero > .section-inner {
    order: 1;
    padding-top: 42px;
    padding-bottom: 34px;
  }

  .suburb-3d-hero .center-title,
  .suburb-3d-hero .local-hero-copy { max-width: 720px; }

  .suburb-3d-stage {
    position: relative;
    inset: auto;
    order: 2;
    width: calc(100% - 36px);
    min-height: clamp(430px, 68vw, 570px);
    margin: 0 18px 18px;
    border-radius: 24px;
  }

  .suburb-3d-stage__picture img { object-position: 60% center; }
  .suburb-3d-services__inner { grid-template-columns: 1fr 1fr; }
  .suburb-3d-service { min-height: 130px; }
}

@media (max-width: 620px) {
  .suburb-3d-hero > .section-inner { padding: 34px 20px 28px; }
  .suburb-3d-hero .center-title::before,
  .suburb-3d-hero .local-hero-kicker { margin-bottom: 14px; font-size: 11px; }
  .site-redesign-v2 .suburb-3d-hero :is(h1, h2) { font-size: clamp(39px, 12vw, 50px); }
  .site-redesign-v2 .suburb-3d-hero :is(p, li, .section-lede) { font-size: 16px; }
  .suburb-3d-hero .hero-actions { display: grid; grid-template-columns: 1fr; }
  .suburb-3d-hero .button { width: 100%; justify-content: center; text-align: center; }
  .suburb-3d-proof { gap: 16px; }
  .suburb-3d-proof__item { min-width: 140px; }

  .suburb-3d-stage {
    width: calc(100% - 24px);
    min-height: 430px;
    margin: 0 12px 12px;
    border-radius: 20px;
  }

  .suburb-3d-stage__picture img { object-position: 59% center; }
  .suburb-3d-tile {
    width: 84px;
    min-height: 90px;
    padding: 8px;
    border-radius: 14px;
  }
  .suburb-3d-tile__icon { width: 34px; height: 34px; margin-bottom: 4px; font-size: 27px; }
  .suburb-3d-tile strong { font-size: 12px; }
  .suburb-3d-tile small { font-size: 10px; }
  .suburb-3d-tile--buy { top: 6%; left: 5%; }
  .suburb-3d-tile--refinance { top: 5%; right: 4%; }
  .suburb-3d-tile--complex { left: 3%; bottom: 22%; }
  .suburb-3d-tile--invest { right: 3%; bottom: 25%; }
  .suburb-3d-identity { left: 51%; bottom: 3%; width: 230px; }
  .suburb-3d-identity img { width: 82px; height: 82px; }
  .suburb-3d-identity figcaption { min-width: 210px; padding: 15px 16px 9px; }
  .suburb-3d-identity strong { font-size: 13px; }
  .suburb-3d-identity span { font-size: 10.5px; }

  .suburb-3d-services { padding: 14px 12px 18px; }
  .suburb-3d-services__inner { grid-template-columns: 1fr; gap: 10px; }
  .suburb-3d-service {
    min-height: 108px;
    grid-template-columns: 78px 1fr;
    gap: 14px;
  }
  .suburb-3d-service__icon { width: 68px; height: 62px; font-size: 32px; }
  .suburb-3d-service strong { font-size: 21px; }
  .nav-toggle { min-width: 44px; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .suburb-3d-hero *,
  .suburb-3d-hero *::before,
  .suburb-3d-hero *::after,
  .suburb-3d-services * {
    animation: none !important;
    transition: none !important;
  }
  .suburb-3d-hero:not(.is-3d-visible) .suburb-3d-tile,
  .suburb-3d-hero:not(.is-3d-visible) .suburb-3d-identity { opacity: 1; }
}

@media (forced-colors: active) {
  .suburb-3d-stage__picture,
  .suburb-3d-route { display: none; }
  .suburb-3d-stage { background: Canvas; }
  .suburb-3d-tile { background: Canvas; color: CanvasText; border: 2px solid CanvasText; }
  .suburb-3d-tile :is(strong, small) { color: CanvasText; }
}

@media print {
  .suburb-3d-stage,
  .suburb-3d-services { display: none !important; }
  .suburb-3d-hero { min-height: 0; background: #fff !important; }
  .site-redesign-v2 .suburb-3d-hero :is(h1, h2, p, li, .section-lede) { color: #000 !important; }
}