/* Twiins balanced 3D layer: lightweight depth and motion across the full site. */
:root {
  --depth-shadow: 0 8px 0 rgb(17 33 56 / 10%), 0 24px 55px rgb(17 33 56 / 15%);
  --depth-shadow-hover: 0 12px 0 rgb(17 33 56 / 12%), 0 34px 70px rgb(17 33 56 / 21%);
  --depth-edge: rgb(255 255 255 / 68%);
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --scene-y: 0px;
  --ambient-y: 0px;
  --ambient-y-back: 0px;
  --scene-fence-y: 0px;
  --scene-concrete-y: 0px;
  --shine-x: 50%;
  --shine-y: 30%;
}

html {
  background: #0b1728;
}

body {
  background:
    radial-gradient(circle at 8% 7%, rgb(240 200 121 / 12%), transparent 25rem),
    #fff;
}

main {
  overflow: clip;
}

.experience-progress {
  position: fixed;
  z-index: 80;
  inset: 0 auto auto 0;
  width: var(--page-progress, 0%);
  height: 3px;
  background: linear-gradient(90deg, #f0c879, #fff1bd);
  box-shadow: 0 0 18px rgb(240 200 121 / 58%);
  pointer-events: none;
}

.nav {
  box-shadow: 0 12px 34px rgb(17 33 56 / 9%);
  backdrop-filter: blur(15px) saturate(125%);
  -webkit-backdrop-filter: blur(15px) saturate(125%);
}

:is(.home-hero, .construction-hero, .fence-hero, .city-hero, .estimate-intro, .local-hero) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

:is(.home-hero, .construction-hero, .fence-hero, .city-hero, .estimate-intro, .local-hero)::before,
:is(.home-hero, .construction-hero, .fence-hero, .city-hero, .estimate-intro, .local-hero)::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(2px);
}

:is(.home-hero, .construction-hero, .fence-hero, .city-hero, .estimate-intro, .local-hero)::before {
  width: min(42vw, 560px);
  aspect-ratio: 1;
  top: -34%;
  right: -10%;
  background: radial-gradient(circle at 35% 35%, rgb(240 200 121 / 29%), rgb(240 200 121 / 3%) 63%, transparent 69%);
  transform: translate3d(0, var(--ambient-y), 0) perspective(900px) rotateX(64deg) rotateZ(-16deg);
}

:is(.home-hero, .construction-hero, .fence-hero, .city-hero, .estimate-intro, .local-hero)::after {
  width: min(34vw, 430px);
  aspect-ratio: 1;
  bottom: -46%;
  left: -7%;
  border: 1px solid rgb(255 255 255 / 11%);
  box-shadow: inset 0 0 70px rgb(255 255 255 / 4%);
  transform: translate3d(0, var(--ambient-y-back), 0) perspective(900px) rotateX(69deg) rotateZ(22deg);
}

:is(.home-hero-grid, .construction-hero .wrap, .fence-layout, .city-hero .wrap, .estimate-intro-grid, .local-hero .wrap) {
  position: relative;
  z-index: 1;
}

:is(.home-hero-photo, .local-photo, .image-plane, .recent-project) {
  border: 1px solid rgb(255 255 255 / 22%);
  box-shadow: 0 10px 0 rgb(17 33 56 / 34%), 0 28px 68px rgb(3 10 20 / 43%);
  transform-style: preserve-3d;
}

.home-hero-photo {
  overflow: visible;
  isolation: isolate;
}

.home-hero-photo > img {
  border-radius: inherit;
  transform: translate3d(0, var(--scene-y), 0) scale(1.075);
  transition: transform .16s linear;
}

.home-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgb(255 255 255 / 15%), transparent 32%, transparent 68%, rgb(240 200 121 / 10%));
  pointer-events: none;
}

.home-hero-photo figcaption {
  z-index: 4;
  border-radius: 0 0 inherit inherit;
}

.hero-depth-card {
  position: absolute;
  z-index: 3;
  display: grid;
  width: 142px;
  padding: 7px;
  gap: 7px;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 10px;
  color: #fff;
  background: rgb(12 27 46 / 78%);
  box-shadow: 0 20px 48px rgb(0 0 0 / 38%);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  pointer-events: none;
}

.hero-depth-card img {
  width: 100%;
  height: 92px;
  object-fit: cover;
  border-radius: 6px;
}

.hero-depth-card strong {
  padding: 0 4px 3px;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-depth-card--fence {
  top: 11%;
  left: -52px;
  transform: translate3d(0, var(--scene-fence-y), 65px) rotate(-5deg);
}

.hero-depth-card--concrete {
  top: 18%;
  right: -43px;
  transform: translate3d(0, var(--scene-concrete-y), 92px) rotate(5deg);
}

.home-hero-photo::before,
.local-photo::before {
  content: "";
  position: absolute;
  inset: 12px -12px -12px 12px;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgb(240 200 121 / 44%);
  pointer-events: none;
}

:is(
  .project-path,
  .service-pill,
  .google-review-card,
  .scope-card,
  .work-card,
  .gallery-card,
  .fit-card,
  .intake-form,
  .area-panel,
  .planning-note,
  .deadline,
  .local-service-card,
  .local-checklist,
  .local-map,
  .city-directory-card,
  .res-com > div,
  .quote .card
) {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  box-shadow: var(--depth-shadow);
  border-color: rgb(17 33 56 / 13%);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

:is(
  .project-path,
  .service-pill,
  .google-review-card,
  .scope-card,
  .work-card,
  .gallery-card,
  .fit-card,
  .intake-form,
  .local-service-card,
  .city-directory-card,
  .res-com > div,
  .quote .card
)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--shine-x) var(--shine-y), rgb(255 255 255 / 17%), transparent 46%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

:is(
  .project-path,
  .service-pill,
  .google-review-card,
  .scope-card,
  .work-card,
  .gallery-card,
  .fit-card,
  .intake-form,
  .local-service-card,
  .city-directory-card,
  .res-com > div,
  .quote .card
) > * {
  position: relative;
  z-index: 1;
}

.service-list,
.project-paths,
.work-grid,
.fence-gallery,
.local-service-grid,
.city-directory,
.reviews-grid,
.scope-grid {
  perspective: 1300px;
}

.btn {
  position: relative;
  box-shadow: 0 5px 0 rgb(126 87 28 / 38%), 0 14px 27px rgb(17 33 56 / 16%);
  transition: transform .17s ease, box-shadow .17s ease, background .17s ease, border-color .17s ease;
}

.btn.outline {
  box-shadow: 0 5px 0 rgb(0 0 0 / 16%), 0 14px 27px rgb(0 0 0 / 13%);
}

.btn:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 rgb(126 87 28 / 32%), 0 7px 15px rgb(17 33 56 / 13%);
}

:is(input, select, textarea) {
  box-shadow: inset 0 2px 5px rgb(17 33 56 / 7%), 0 1px 0 #fff;
}

:is(input, select, textarea):focus {
  box-shadow: inset 0 2px 5px rgb(17 33 56 / 5%), 0 0 0 4px rgb(57 117 173 / 12%);
}

.depth-tilt {
  transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--tilt-lift, 0));
  transform-style: preserve-3d;
  transition: transform .18s ease-out, box-shadow .22s ease;
  will-change: transform;
}

.depth-tilt :is(figcaption, span) {
  transform: translateZ(20px);
}

.motion-ready .reveal-3d {
  opacity: 0;
  transform: perspective(1000px) translateY(28px) rotateX(2.5deg);
  transform-origin: center top;
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.72,.2,1);
}

.motion-ready .reveal-3d.is-visible {
  opacity: 1;
  transform: perspective(1000px) translateY(0) rotateX(0);
}

@media (hover: hover) and (pointer: fine) {
  :is(
    .project-path,
    .service-pill,
    .google-review-card,
    .scope-card,
    .work-card,
    .gallery-card,
    .local-service-card,
    .city-directory-card,
    .res-com > div
  ):hover {
    transform: translateY(-6px) rotateX(.8deg);
    box-shadow: var(--depth-shadow-hover);
    border-color: rgb(148 98 59 / 32%);
  }

  :is(
    .project-path,
    .service-pill,
    .google-review-card,
    .scope-card,
    .work-card,
    .gallery-card,
    .fit-card,
    .intake-form,
    .local-service-card,
    .city-directory-card,
    .res-com > div,
    .quote .card
  ):hover::after {
    opacity: 1;
  }

  .depth-tilt:hover {
    --tilt-lift: -5px;
    box-shadow: 0 14px 0 rgb(17 33 56 / 28%), 0 38px 78px rgb(3 10 20 / 46%);
  }
}

@media (max-width: 820px) {
  :root {
    --depth-shadow: 0 5px 0 rgb(17 33 56 / 8%), 0 16px 34px rgb(17 33 56 / 12%);
  }

  :is(.home-hero, .construction-hero, .fence-hero, .city-hero, .estimate-intro, .local-hero)::before {
    width: 420px;
    right: -240px;
    top: -120px;
    opacity: .72;
  }

  :is(.home-hero, .construction-hero, .fence-hero, .city-hero, .estimate-intro, .local-hero)::after {
    display: none;
  }

  .motion-ready .reveal-3d {
    transform: translateY(18px);
    transition-duration: .5s;
  }

  .motion-ready .reveal-3d.is-visible {
    transform: translateY(0);
  }

  .home-hero-photo::before,
  .local-photo::before {
    inset: 8px -8px -8px 8px;
  }

  .home-hero-photo {
    overflow: hidden;
  }

  .home-hero-photo > img {
    transform: translate3d(0, var(--scene-y), 0) scale(1.045);
  }

  .hero-depth-card {
    width: 112px;
    padding: 5px;
  }

  .hero-depth-card img {
    height: 68px;
  }

  .hero-depth-card--fence {
    left: 12px;
    top: 12px;
  }

  .hero-depth-card--concrete {
    right: 12px;
    top: 20px;
  }
}

@media (max-width: 480px) {
  .hero-depth-card {
    display: none;
  }

  .experience-progress {
    height: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .experience-progress {
    display: none;
  }

  .home-hero-photo > img {
    transform: none;
    transition: none;
  }
  .motion-ready .reveal-3d,
  .motion-ready .reveal-3d.is-visible,
  .depth-tilt,
  :is(.project-path, .service-pill, .google-review-card, .scope-card, .work-card, .gallery-card, .local-service-card, .city-directory-card, .res-com > div) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Organic cinematic story: layered photography, paper edges and slow spatial motion. */
.experience-intro {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 9px;
  color: #f7f1e5;
  text-align: center;
  background:
    radial-gradient(circle at 50% 42%, rgb(240 200 121 / 17%), transparent 29%),
    #0b1728;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .55s ease, visibility .55s ease;
}

.experience-intro.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.experience-intro.is-leaving {
  opacity: 0;
  visibility: hidden;
}

.experience-intro span {
  font-size: clamp(3.5rem, 13vw, 11rem);
  font-weight: 900;
  letter-spacing: -.08em;
  line-height: .78;
  transform: translateY(14px);
  opacity: 0;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}

.experience-intro small {
  color: #f0c879;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .4s ease .16s;
}

.experience-intro i {
  width: min(240px, 62vw);
  height: 2px;
  margin: 16px auto 0;
  overflow: hidden;
  background: rgb(255 255 255 / 16%);
}

.experience-intro i::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #f0c879;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .66s cubic-bezier(.2,.8,.2,1) .08s;
}

.experience-intro.is-running span,
.experience-intro.is-running small {
  transform: translateY(0);
  opacity: 1;
}

.experience-intro.is-running i::after {
  transform: scaleX(1);
}

.cinematic-paper {
  position: absolute;
  z-index: 4;
  width: min(31vw, 470px);
  height: 112%;
  top: -6%;
  pointer-events: none;
  background:
    radial-gradient(circle at 45% 32%, rgb(240 200 121 / 20%), transparent 34%),
    linear-gradient(145deg, rgb(245 239 225 / 88%), rgb(224 211 185 / 40%));
  filter: drop-shadow(0 0 38px rgb(4 13 24 / 28%));
  opacity: .52;
  mix-blend-mode: screen;
}

.cinematic-paper--left {
  left: -15%;
  clip-path: polygon(0 0, 69% 0, 81% 7%, 70% 16%, 88% 27%, 73% 37%, 90% 49%, 70% 60%, 82% 72%, 66% 82%, 78% 92%, 61% 100%, 0 100%);
  transform: translate3d(var(--hero-paper-left-x, 0px), var(--hero-paper-y, 0px), 0) scale(1.05);
}

.cinematic-paper--right {
  right: -16%;
  clip-path: polygon(32% 0, 100% 0, 100% 100%, 24% 100%, 38% 92%, 19% 82%, 35% 72%, 16% 60%, 34% 49%, 20% 37%, 38% 27%, 22% 16%, 39% 7%);
  transform: translate3d(var(--hero-paper-right-x, 0px), var(--hero-paper-y, 0px), 0) scale(1.05);
}

.project-journey {
  height: 360vh;
  color: #10213a;
  background:
    radial-gradient(circle at 12% 25%, rgb(208 223 207 / 72%), transparent 27%),
    radial-gradient(circle at 84% 35%, rgb(240 200 121 / 48%), transparent 29%),
    radial-gradient(circle at 65% 88%, rgb(168 194 189 / 55%), transparent 31%),
    linear-gradient(155deg, #f5f0e5 0%, #e9eadf 43%, #ede4d1 100%);
}

.project-journey-sticky {
  overflow: hidden;
}

.project-journey-sticky::before {
  inset: -18%;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(118deg, transparent 24%, rgb(255 255 255 / 52%) 25%, transparent 43%),
    repeating-linear-gradient(92deg, rgb(16 33 58 / 2%) 0 1px, transparent 1px 8px);
  transform: translate3d(var(--journey-wash-x, 0px), 0, 0) rotate(-4deg);
  box-shadow: none;
  opacity: .75;
}

.project-journey-sticky::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: min(42vw, 610px);
  aspect-ratio: 1;
  right: -11%;
  bottom: -19%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgb(36 73 73 / 30%), rgb(36 73 73 / 3%) 64%, transparent 70%);
  filter: blur(5px);
  transform: translate3d(0, var(--journey-wash-y, 0px), 0);
}

.project-journey-layout {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  padding: 0;
}

.project-journey-copy {
  position: absolute;
  z-index: 12;
  inset: 8vh auto auto 7vw;
  width: min(35vw, 510px);
  text-shadow: 0 1px 0 rgb(255 255 255 / 50%);
}

.project-journey-copy .eyebrow {
  color: #3f675f;
}

.project-journey-copy h2 {
  margin: 12px 0 18px;
  color: #10213a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 6.7vw, 7.8rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .84;
}

.project-journey-copy h2 span {
  transform: translate3d(0, var(--title-shift), 0);
  opacity: var(--title-opacity, 1);
}

.project-journey-copy h2 span:last-child {
  padding-left: .62em;
  transform: translate3d(0, var(--title-shift-two), 0);
  opacity: var(--title-opacity-two, 1);
}

.project-journey-copy p {
  max-width: 370px;
  color: #38504e;
}

.project-journey-copy .btn {
  color: #fff;
  background: #10213a;
}

.journey-meter {
  background: rgb(16 33 58 / 16%);
}

.journey-meter span {
  background: #396d63;
  box-shadow: 0 0 18px rgb(57 109 99 / 34%);
}

.project-journey-stage {
  position: absolute;
  inset: 0;
  min-height: 100%;
  perspective: 1600px;
}

.journey-panel {
  top: 58%;
  left: 63%;
  width: min(66vw, 920px);
  height: min(74vh, 760px);
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: 0 48px 110px rgb(28 44 51 / 22%);
  clip-path: polygon(3% 8%, 16% 2%, 28% 6%, 43% 1%, 55% 5%, 69% 2%, 83% 7%, 97% 4%, 99% 21%, 95% 35%, 99% 51%, 96% 66%, 99% 81%, 92% 97%, 75% 94%, 60% 99%, 44% 95%, 29% 99%, 14% 94%, 2% 97%, 5% 80%, 1% 66%, 4% 51%, 1% 36%, 5% 22%);
  transform: translate3d(calc(-50% + var(--journey-x, 0px)), calc(-50% + var(--journey-y, 0px)), var(--journey-z, 0px)) rotateZ(var(--journey-rotate, 0deg)) scale(var(--journey-scale, 1));
  filter: saturate(.88) contrast(.98);
}

.journey-panel:nth-child(2) {
  width: min(58vw, 790px);
  height: min(70vh, 700px);
  clip-path: polygon(2% 5%, 20% 1%, 36% 5%, 53% 2%, 70% 6%, 85% 2%, 98% 9%, 95% 26%, 99% 43%, 96% 60%, 99% 76%, 94% 96%, 75% 92%, 60% 99%, 40% 95%, 23% 99%, 3% 93%, 6% 74%, 1% 58%, 5% 39%, 1% 21%);
}

.journey-panel:nth-child(3) {
  width: min(70vw, 980px);
  height: min(69vh, 690px);
  clip-path: polygon(4% 9%, 18% 3%, 32% 6%, 48% 1%, 62% 5%, 80% 2%, 97% 8%, 94% 25%, 99% 40%, 95% 58%, 99% 74%, 93% 97%, 76% 93%, 58% 99%, 43% 95%, 25% 98%, 3% 92%, 7% 75%, 1% 58%, 6% 42%, 1% 24%);
}

.journey-panel img {
  transform: scale(1.08);
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1);
}

.journey-panel:hover img {
  transform: scale(1.13);
}

.journey-panel > span {
  padding: 120px 8% 8%;
  background: linear-gradient(transparent, rgb(5 17 27 / 82%));
}

.journey-panel small {
  color: #f4d18a;
}

.journey-panel strong {
  max-width: 16ch;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 3.1vw, 3.6rem);
  font-weight: 400;
}

@media (max-width: 820px) {
  .cinematic-paper {
    width: 42vw;
    opacity: .36;
  }

  .project-journey {
    height: auto;
    padding: 82px 0 92px;
  }

  .project-journey-sticky {
    height: auto;
    overflow: visible;
  }

  .project-journey-layout {
    width: min(100% - 32px, 720px);
    height: auto;
    margin-inline: auto;
  }

  .project-journey-copy {
    position: relative;
    inset: auto;
    width: 100%;
    margin-bottom: 42px;
  }

  .project-journey-copy h2 {
    font-size: clamp(3.2rem, 15vw, 5.7rem);
  }

  .project-journey-copy h2 span:last-child {
    padding-left: .25em;
  }

  .project-journey-stage {
    position: relative;
    inset: auto;
    display: grid;
    min-height: 0;
    gap: 30px;
  }

  .journey-panel,
  .journey-panel:nth-child(2),
  .journey-panel:nth-child(3) {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    margin: 0;
    transform: none !important;
    opacity: 1 !important;
  }

  .journey-panel:nth-child(2) {
    width: 92%;
    margin-left: auto;
  }

  .journey-panel:nth-child(3) {
    width: 96%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-paper,
  .journey-panel {
    transform: none;
  }
}

/* Full-page spatial system: every homepage chapter occupies its own depth plane. */
:root {
  --pointer-x: 50%;
  --pointer-y: 35%;
}

.home-page .immersive-chapter {
  --chapter-y: 0px;
  --chapter-card-y: 0px;
  --chapter-image-y: 0px;
  --chapter-rotate: 0deg;
  --chapter-rotate-soft: 0deg;
  --chapter-rotate-reverse-soft: 0deg;
  --chapter-word-x: 0vw;
  --chapter-glow-y: 50%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  perspective: 1600px;
  transform-style: preserve-3d;
}

.home-page .immersive-chapter::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20%;
  pointer-events: none;
  background: radial-gradient(560px circle at var(--pointer-x) var(--chapter-glow-y), rgb(255 255 255 / 15%), transparent 64%);
  transform: translate3d(0, var(--chapter-y), -30px);
}

.home-page .immersive-chapter::after {
  content: attr(data-word);
  position: absolute;
  z-index: -1;
  left: -2vw;
  top: 50%;
  color: currentColor;
  font-size: clamp(8rem, 23vw, 24rem);
  font-weight: 950;
  letter-spacing: -.095em;
  line-height: .7;
  opacity: .035;
  pointer-events: none;
  white-space: nowrap;
  transform: translate3d(var(--chapter-word-x), -50%, -100px) rotateX(3deg);
}

.home-page .immersive-chapter > .wrap,
.home-page .immersive-chapter > .wrap > * {
  transform-style: preserve-3d;
}

.home-page .spatial-card {
  --base-rx: 0deg;
  --base-ry: 0deg;
  --base-rz: 0deg;
  --base-z: 0px;
  --card-rx: 0deg;
  --card-ry: 0deg;
  --card-lift: 0px;
  backface-visibility: hidden;
  transform: translate3d(0, calc(var(--chapter-card-y, 0px) + var(--card-lift)), var(--base-z)) rotateX(calc(var(--base-rx) + var(--card-rx))) rotateY(calc(var(--base-ry) + var(--card-ry))) rotateZ(var(--base-rz));
  transform-style: preserve-3d;
  transition: transform .24s cubic-bezier(.2,.75,.2,1), box-shadow .24s ease, border-color .24s ease;
  will-change: transform;
}

.home-page .spatial-card > * {
  position: relative;
  z-index: 2;
}

.home-page .home-service-line {
  position: relative;
  z-index: 8;
  border: 0;
  color: #10213a;
  background: linear-gradient(90deg, #f5efe2, #e8eee8 45%, #efe2c9);
  box-shadow: 0 22px 55px rgb(4 14 25 / 14%);
  perspective: 900px;
}

.home-page .home-service-line .wrap {
  padding-block: 19px;
  transform-style: preserve-3d;
}

.home-page .home-service-line span {
  display: block;
  transform: translateZ(18px);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.home-page .home-service-line span:nth-child(even) {
  transform: translateZ(35px);
}

.services-chapter {
  color: #10213a;
  background:
    radial-gradient(circle at 13% 18%, rgb(240 200 121 / 23%), transparent 27rem),
    linear-gradient(145deg, #f8f6f0 0%, #edf1ec 56%, #efe3cd 100%) !important;
}

.services-chapter .intro {
  position: relative;
  z-index: 4;
  transform: translate3d(0, var(--chapter-y), 50px) rotateX(var(--chapter-rotate-reverse-soft));
  transform-origin: center bottom;
}

.services-chapter .intro h2,
.reviews-chapter h2,
.interior-chapter h2,
.areas-chapter h2,
.quote-chapter h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.055em;
}

.services-chapter .project-paths {
  gap: clamp(24px, 4vw, 58px);
  align-items: stretch;
  perspective: 1500px;
  transform-style: preserve-3d;
}

.services-chapter .project-path {
  min-height: 610px;
  border: 1px solid rgb(16 33 58 / 13%);
  border-radius: 22px;
  box-shadow: 0 38px 86px rgb(16 33 58 / 18%), 0 10px 0 rgb(16 33 58 / 6%);
}

.services-chapter .fence-path {
  --base-ry: 5deg;
  --base-rx: 1.5deg;
  --base-z: 35px;
  background: rgb(255 255 255 / 82%);
}

.services-chapter .fence-path > img {
  height: 340px;
  transform: translateZ(42px) scale(1.02);
  filter: saturate(.92) contrast(1.03);
}

.services-chapter .project-path-copy {
  transform: translateZ(44px);
}

.services-chapter .construction-path {
  --base-ry: -5deg;
  --base-rx: -1.5deg;
  --base-z: 68px;
  position: relative;
  isolation: isolate;
  justify-content: flex-end;
  min-height: 610px;
  padding: 38px;
  background: linear-gradient(180deg, rgb(8 20 35 / 10%), rgb(8 20 35 / 94%) 57%, #0a1a2d 100%);
}

.construction-path-visual {
  position: absolute !important;
  z-index: -2 !important;
  inset: 0;
  overflow: hidden;
}

.construction-path-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(6 17 29 / 5%), rgb(6 17 29 / 75%) 58%, #071425 100%);
}

.construction-path-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08) translate3d(0, var(--chapter-image-y), 0);
}

.construction-path-visual span {
  position: absolute;
  z-index: 3;
  top: 24px;
  right: 25px;
  padding: 8px 12px;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 999px;
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgb(7 20 37 / 52%);
  backdrop-filter: blur(12px);
}

.services-chapter .construction-path > :not(.construction-path-visual) {
  transform: translateZ(44px);
}

.services-chapter .project-trades {
  background: rgb(7 20 37 / 43%);
  border-radius: 12px;
  padding-inline: 16px;
  backdrop-filter: blur(10px);
}

.reviews-chapter {
  min-height: 830px;
  display: flex;
  align-items: center;
  color: #f7f2e7;
  background:
    radial-gradient(circle at 84% 18%, rgb(240 200 121 / 19%), transparent 25rem),
    radial-gradient(circle at 10% 90%, rgb(50 102 95 / 25%), transparent 31rem),
    #0a1728 !important;
  border: 0;
}

.reviews-chapter .reviews-grid {
  gap: clamp(50px, 8vw, 120px);
  perspective: 1500px;
}

.reviews-chapter .reviews-grid > div:first-child {
  transform: translate3d(0, var(--chapter-y), 35px) rotateY(var(--chapter-rotate-reverse-soft));
}

.reviews-chapter h2 {
  max-width: 10ch;
  font-size: clamp(3.2rem, 6.2vw, 6.9rem);
}

.reviews-chapter .reviews-grid p,
.reviews-chapter .trust-details span {
  color: #bdc9d6;
}

.reviews-chapter .trust-details > div {
  border-left-color: #f0c879;
  transform: translateZ(25px);
}

.reviews-chapter .google-review-card {
  --base-ry: -7deg;
  --base-rx: 2deg;
  --base-z: 95px;
  padding: clamp(30px, 4vw, 48px);
  border: 1px solid rgb(255 255 255 / 58%);
  border-radius: 22px;
  color: #10213a;
  background: linear-gradient(145deg, #fff, #edf1ed);
  box-shadow: 38px 48px 90px rgb(0 0 0 / 42%), -8px -8px 35px rgb(240 200 121 / 9%);
}

.reviews-chapter .google-review-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 150px;
  aspect-ratio: 1;
  top: -58px;
  right: -44px;
  border: 1px solid rgb(18 63 58 / 17%);
  border-radius: 50%;
  box-shadow: 0 0 0 25px rgb(18 63 58 / 4%), 0 0 0 52px rgb(18 63 58 / 3%);
}

.reviews-chapter .google-review-card p {
  color: #52606b;
}

.reviews-chapter .google-rating strong {
  font-size: clamp(4rem, 7vw, 7rem);
  letter-spacing: -.075em;
  line-height: .85;
}

.trades-chapter {
  color: #fff;
  background:
    linear-gradient(125deg, rgb(255 255 255 / 3%), transparent 38%),
    #10213a !important;
}

.trades-chapter .intro {
  transform: translate3d(0, var(--chapter-y), 42px);
}

.trades-chapter .service-list {
  counter-reset: services;
  gap: 18px;
  perspective: 1400px;
  transform-style: preserve-3d;
}

.trades-chapter .service-pill {
  --base-z: 24px;
  counter-increment: services;
  min-height: 190px;
  padding: 30px;
  border: 1px solid rgb(240 200 121 / 17%);
  border-radius: 18px;
  background:
    radial-gradient(circle at var(--shine-x) var(--shine-y), rgb(255 255 255 / 12%), transparent 42%),
    linear-gradient(145deg, rgb(255 255 255 / 6%), rgb(255 255 255 / 1%));
  box-shadow: 0 26px 55px rgb(1 8 18 / 24%);
}

.trades-chapter .service-pill:nth-child(2),
.trades-chapter .service-pill:nth-child(5) {
  --base-z: 62px;
  --base-rx: -1.5deg;
}

.trades-chapter .service-pill:nth-child(3),
.trades-chapter .service-pill:nth-child(4) {
  --base-z: 42px;
  --base-rx: 1.5deg;
}

.trades-chapter .service-pill::before {
  content: "0" counter(services);
  display: block;
  margin-bottom: auto;
  color: #f0c879;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.trades-chapter .service-pill strong {
  margin-top: 38px;
  font-size: 1.35rem;
}

.trades-chapter .service-pill:hover {
  border-color: rgb(240 200 121 / 60%);
  background:
    radial-gradient(circle at var(--shine-x) var(--shine-y), rgb(255 255 255 / 17%), transparent 42%),
    linear-gradient(145deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 2%));
}

.interior-chapter {
  min-height: 760px;
  display: flex;
  align-items: center;
  color: #10213a;
  background:
    radial-gradient(circle at 18% 22%, rgb(255 255 255 / 55%), transparent 25rem),
    linear-gradient(132deg, #efe8d9, #d7e0d5 58%, #c8b790) !important;
}

.interior-chapter .split {
  align-items: center;
  perspective: 1400px;
}

.interior-chapter .interior-copy {
  transform: translate3d(0, var(--chapter-y), 54px) rotateY(var(--chapter-rotate-reverse-soft));
}

.interior-chapter h2 {
  max-width: 10ch;
  font-size: clamp(3.3rem, 6vw, 6.6rem);
}

.interior-chapter .planning-note {
  --base-ry: -8deg;
  --base-rx: 2deg;
  --base-z: 88px;
  padding: clamp(32px, 4vw, 50px);
  border: 1px solid rgb(255 255 255 / 74%);
  border-top: 0;
  border-radius: 20px;
  background: rgb(255 255 255 / 76%);
  box-shadow: 35px 45px 85px rgb(48 49 36 / 20%);
  backdrop-filter: blur(16px);
}

.interior-chapter .planning-note::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 12px -12px -12px 12px;
  border: 1px solid rgb(16 33 58 / 16%);
  border-radius: inherit;
  transform: translateZ(-35px);
}

.areas-chapter {
  min-height: 730px;
  display: flex;
  align-items: center;
  color: #10213a;
  background:
    radial-gradient(circle at 80% 25%, rgb(240 200 121 / 27%), transparent 25rem),
    #eef2ed !important;
}

.areas-chapter .split {
  gap: clamp(52px, 9vw, 130px);
  align-items: center;
  perspective: 1500px;
}

.areas-chapter .areas-copy {
  transform: translate3d(0, var(--chapter-y), 38px) rotateY(var(--chapter-rotate-reverse-soft));
}

.areas-chapter h2 {
  font-size: clamp(3.3rem, 6.2vw, 6.8rem);
}

.areas-chapter .area-panel {
  --base-ry: -8deg;
  --base-rx: 4deg;
  --base-z: 72px;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid rgb(16 33 58 / 12%);
  border-radius: 22px;
  background: rgb(255 255 255 / 72%);
  box-shadow: 38px 45px 85px rgb(16 33 58 / 18%);
  backdrop-filter: blur(12px);
}

.areas-chapter .area-links {
  perspective: 800px;
}

.areas-chapter .area-links a {
  position: relative;
  border: 1px solid rgb(16 33 58 / 12%);
  background: #f7f3e9;
  box-shadow: 0 7px 14px rgb(16 33 58 / 8%);
  transform: translateZ(18px);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.areas-chapter .area-links a:nth-child(3n + 2) {
  transform: translateZ(35px);
}

.areas-chapter .area-links a:hover {
  border-color: #396d63;
  background: #fff;
  transform: translate3d(0, -3px, 52px);
}

.quote-chapter {
  min-height: 760px;
  display: flex;
  align-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 82% 24%, rgb(240 200 121 / 18%), transparent 25rem),
    linear-gradient(145deg, #071426, #102d39 58%, #173c3c) !important;
}

.quote-chapter .quote-grid {
  align-items: center;
  perspective: 1500px;
}

.quote-chapter .quote-copy {
  transform: translate3d(0, var(--chapter-y), 46px) rotateY(var(--chapter-rotate-reverse-soft));
}

.quote-chapter h2 {
  max-width: 9ch;
  font-size: clamp(3.5rem, 6.6vw, 7.2rem);
}

.quote-chapter .card {
  --base-ry: -8deg;
  --base-rx: 2deg;
  --base-z: 105px;
  padding: clamp(34px, 5vw, 58px);
  border: 1px solid rgb(255 255 255 / 68%);
  border-radius: 24px;
  background: linear-gradient(145deg, #fff, #ecefe9);
  box-shadow: 44px 55px 100px rgb(0 0 0 / 42%);
}

.quote-chapter .card h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 4vw, 4rem);
  font-weight: 400;
}

.quote-chapter .quote-phone {
  color: #f0c879;
}

.home-page .footer {
  position: relative;
  overflow: hidden;
  background: #06111f;
}

.home-page .footer::before {
  content: "TWIINS";
  position: absolute;
  right: -2vw;
  bottom: -4vw;
  color: #fff;
  font-size: clamp(6rem, 18vw, 18rem);
  font-weight: 950;
  letter-spacing: -.09em;
  line-height: .7;
  opacity: .025;
  pointer-events: none;
}

@media (max-width: 980px) {
  .services-chapter .project-path {
    min-height: 560px;
  }

  .services-chapter .construction-path {
    padding: 30px;
  }

  .reviews-chapter .reviews-grid,
  .areas-chapter .split {
    gap: 48px;
  }
}

@media (max-width: 820px) {
  .home-page .immersive-chapter {
    min-height: 0;
    perspective: none;
  }

  .home-page .immersive-chapter::after {
    top: 14%;
    left: -4vw;
    font-size: 31vw;
    transform: none;
  }

  .home-page .immersive-chapter > .wrap,
  .home-page .immersive-chapter > .wrap > *,
  .home-page .immersive-chapter .intro,
  .home-page .reviews-grid > div:first-child,
  .home-page .interior-copy,
  .home-page .areas-copy,
  .home-page .quote-copy,
  .home-page .spatial-card {
    transform: none !important;
  }

  .services-chapter .project-path {
    min-height: 0;
  }

  .services-chapter .fence-path > img {
    height: 290px;
    transform: none;
  }

  .services-chapter .construction-path {
    min-height: 610px;
  }

  .reviews-chapter,
  .interior-chapter,
  .areas-chapter,
  .quote-chapter {
    display: block;
    min-height: 0;
  }

  .reviews-chapter h2,
  .interior-chapter h2,
  .areas-chapter h2,
  .quote-chapter h2 {
    font-size: clamp(3rem, 13.5vw, 5.3rem);
  }

  .reviews-chapter .google-review-card,
  .interior-chapter .planning-note,
  .areas-chapter .area-panel,
  .quote-chapter .card {
    box-shadow: 0 25px 55px rgb(16 33 58 / 18%);
  }

  .trades-chapter .service-pill {
    min-height: 170px;
  }
}

@media (max-width: 480px) {
  .home-page .home-service-line span {
    font-size: .72rem;
    letter-spacing: .045em;
  }

  .services-chapter .construction-path {
    min-height: 560px;
    padding: 24px;
  }

  .construction-path-visual span {
    top: 16px;
    right: 16px;
    font-size: .67rem;
  }

  .trades-chapter .service-pill {
    min-height: 155px;
  }

  .trades-chapter .service-pill strong {
    margin-top: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .immersive-chapter::before,
  .home-page .immersive-chapter::after,
  .home-page .immersive-chapter > .wrap,
  .home-page .immersive-chapter > .wrap > *,
  .home-page .spatial-card,
  .construction-path-visual img {
    transform: none !important;
  }
}

.fall-hero {
  isolation: isolate;
  overflow: hidden;
  perspective: 1400px;
}

.fall-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(58vw, 780px);
  aspect-ratio: 1;
  top: -48%;
  right: -14%;
  border: 1px solid rgb(240 200 121 / 18%);
  border-radius: 50%;
  background: radial-gradient(circle at 45% 48%, rgb(240 200 121 / 18%), transparent 64%);
  box-shadow: 0 0 0 55px rgb(255 255 255 / 2%), 0 0 0 120px rgb(255 255 255 / 1.5%);
  transform: translate3d(0, var(--ambient-y, 0px), -40px) rotateX(62deg);
}

.fall-hero-grid {
  transform-style: preserve-3d;
}

.fall-hero-grid > div {
  transform: translate3d(0, var(--ambient-y-back, 0px), 45px);
}

.fall-photo {
  transform: translate3d(0, var(--ambient-y, 0px), 90px) rotateY(-6deg) rotateX(2deg);
  box-shadow: 32px 38px 80px rgb(0 0 0 / 34%);
  transition: transform .2s linear;
}

@media (max-width: 820px) {
  .fall-photo,
  .fall-hero-grid > div {
    transform: none;
  }
}

/* Montfort-inspired cinematic direction: one scene, restrained type, spatial scroll. */
.home-page .topbar {
  display: none;
}

.home-page .nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  color: #fff;
  border: 0;
  background: linear-gradient(180deg, rgb(4 13 24 / 56%), transparent);
  box-shadow: none;
  backdrop-filter: none;
  transition: background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
}

.home-page .nav.is-scrolled {
  background: rgb(7 17 31 / 84%);
  box-shadow: 0 12px 34px rgb(0 0 0 / 18%);
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.home-page .nav .brand,
.home-page .nav .links a:not(.btn),
.home-page .nav .menu-toggle {
  color: #fff;
}

.home-page .nav .brand span {
  color: #f0c879;
}

.home-page .nav .menu-toggle {
  border-color: rgb(255 255 255 / 34%);
}

.home-page .montfort-hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 100px 0 86px;
  color: #fff;
  background: #07111f;
  isolation: isolate;
}

.home-page .montfort-hero::before,
.home-page .montfort-hero::after {
  display: none;
}

.cinematic-world,
.cinematic-photo,
.cinematic-vignette,
.cinematic-mist,
.cinematic-grid {
  position: absolute;
  inset: 0;
}

.cinematic-world {
  z-index: -1;
  overflow: hidden;
  background: #07111f;
}

.cinematic-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 43%;
  transform: translate3d(var(--hero-x, 0px), calc(var(--hero-shift, 0px) + var(--hero-y, 0px)), 0) scale(var(--hero-scale, 1.08));
  filter: saturate(.82) contrast(1.04) brightness(.72);
  will-change: transform;
}

.cinematic-vignette {
  background:
    linear-gradient(180deg, rgb(3 11 20 / 30%) 0%, transparent 24%, transparent 62%, rgb(3 11 20 / 78%) 100%),
    radial-gradient(circle at center, transparent 20%, rgb(3 11 20 / 42%) 78%, rgb(3 11 20 / 76%) 100%);
}

.cinematic-mist {
  width: 130%;
  left: -15%;
  background-repeat: repeat-x;
  pointer-events: none;
  will-change: transform;
}

.cinematic-mist--back {
  top: 31%;
  height: 40%;
  opacity: .42;
  filter: blur(17px);
  background:
    radial-gradient(ellipse at 12% 54%, rgb(214 229 239 / 45%), transparent 31%),
    radial-gradient(ellipse at 46% 40%, rgb(221 233 241 / 38%), transparent 27%),
    radial-gradient(ellipse at 78% 52%, rgb(216 231 240 / 44%), transparent 29%);
  animation: mist-drift 20s ease-in-out infinite alternate;
}

.cinematic-mist--front {
  top: 54%;
  height: 37%;
  opacity: .54;
  filter: blur(24px);
  background:
    radial-gradient(ellipse at 22% 48%, rgb(233 240 244 / 48%), transparent 34%),
    radial-gradient(ellipse at 65% 58%, rgb(227 238 244 / 45%), transparent 31%),
    radial-gradient(ellipse at 94% 45%, rgb(234 241 245 / 38%), transparent 28%);
  animation: mist-drift-front 24s ease-in-out infinite alternate;
}

.cinematic-grid {
  opacity: .11;
  background-image:
    linear-gradient(rgb(255 255 255 / 18%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 18%) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(to bottom, transparent, #000 42%, transparent 84%);
  transform: perspective(900px) rotateX(65deg) scale(1.5) translateY(24%);
  transform-origin: center bottom;
}

@keyframes mist-drift {
  from { transform: translate3d(-3%, -1%, 0) scale(1.02); }
  to { transform: translate3d(4%, 2%, 0) scale(1.08); }
}

@keyframes mist-drift-front {
  from { transform: translate3d(4%, 1%, 0) scale(1.08); }
  to { transform: translate3d(-4%, -2%, 0) scale(1.02); }
}

.montfort-center {
  position: relative;
  z-index: 5;
  display: grid;
  justify-items: center;
  text-align: center;
  opacity: var(--hero-content-opacity, 1);
  transform: translate3d(0, var(--hero-content-y, 0px), 80px);
  will-change: transform, opacity;
}

.montfort-kicker {
  margin-bottom: clamp(26px, 4vh, 48px);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.montfort-center h1 {
  margin: 0;
  font-weight: 500;
  letter-spacing: .16em;
  line-height: .84;
  text-transform: uppercase;
  text-shadow: 0 16px 50px rgb(0 0 0 / 46%);
}

.montfort-center h1 > span {
  display: block;
  font-size: clamp(4.8rem, 13.4vw, 13rem);
}

.montfort-center h1 > small {
  display: block;
  margin-top: clamp(20px, 3vw, 36px);
  font-size: clamp(.85rem, 1.65vw, 1.4rem);
  font-weight: 650;
  letter-spacing: .38em;
}

.montfort-center > p {
  margin: clamp(26px, 4vh, 44px) 0 0;
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.montfort-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 28px;
}

.montfort-text-link {
  color: #fff;
  font-size: .84rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-underline-offset: 6px;
  text-transform: uppercase;
}

.montfort-proof {
  display: flex;
  gap: 20px;
  margin-top: 22px;
  color: rgb(255 255 255 / 76%);
  font-size: .78rem;
}

.montfort-proof a {
  color: #fff;
  text-underline-offset: 4px;
}

.discover-cue {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 25px;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  transform: translateX(-50%);
  opacity: var(--hero-content-opacity, 1);
}

.discover-cue span {
  font-size: .66rem;
  font-weight: 750;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.discover-cue i {
  width: 1px;
  height: 30px;
  background: linear-gradient(#fff, transparent);
  animation: discover-pulse 1.9s ease-in-out infinite;
}

@keyframes discover-pulse {
  0%, 100% { transform: scaleY(.55); transform-origin: top; opacity: .48; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}

.project-journey-copy h2 span {
  display: block;
  transform: translate3d(0, var(--title-shift, 0px), 0);
  opacity: var(--title-opacity, 1);
}

.project-journey-copy h2 span:last-child {
  color: #f0c879;
  transform: translate3d(0, var(--title-shift-two, 0px), 0);
  opacity: var(--title-opacity-two, 1);
}

@media (max-width: 820px) {
  .home-page .nav.nav-ready .links {
    background: rgb(7 17 31 / 96%);
    border-bottom-color: rgb(255 255 255 / 14%);
  }

  .home-page .nav.nav-ready .links a:not(.btn):hover {
    background: rgb(255 255 255 / 8%);
  }

  .home-page .montfort-hero {
    min-height: 100svh;
    padding: 102px 0 100px;
  }

  .cinematic-photo {
    object-position: 58% center;
    filter: saturate(.82) contrast(1.05) brightness(.6);
  }

  .montfort-center h1 > span {
    font-size: clamp(4rem, 21vw, 8rem);
    letter-spacing: .1em;
  }

  .montfort-center h1 > small {
    padding-left: .38em;
    font-size: clamp(.76rem, 3vw, 1.05rem);
    letter-spacing: .27em;
  }

  .montfort-actions {
    flex-direction: column;
    gap: 17px;
  }

  .montfort-actions .btn {
    min-width: 230px;
  }

  .montfort-proof {
    flex-wrap: wrap;
    justify-content: center;
  }

  .discover-cue {
    bottom: 82px;
  }

  .discover-cue span {
    font-size: .6rem;
  }
}

@media (max-width: 480px) {
  .montfort-kicker {
    letter-spacing: .14em;
  }

  .montfort-center > p {
    max-width: 330px;
    font-size: .68rem;
    line-height: 1.65;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-mist,
  .discover-cue i {
    animation: none;
  }

  .cinematic-photo,
  .montfort-center,
  .project-journey-copy h2 span {
    transform: none;
    opacity: 1;
  }
}

/* Immersive project world: obvious spatial depth, built from real Twiins work. */
.home-page .home-hero {
  background:
    radial-gradient(circle at 76% 42%, rgb(58 112 158 / 28%), transparent 31rem),
    radial-gradient(circle at 18% 25%, rgb(240 200 121 / 13%), transparent 25rem),
    linear-gradient(145deg, #07111f 0%, #10243b 56%, #081321 100%);
}

.home-page .home-hero-grid {
  min-height: calc(100svh - 112px);
  grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
  padding-block: 40px 58px;
}

.home-page .home-hero-copy {
  position: relative;
  z-index: 6;
}

.home-page .home-hero h1 {
  max-width: 680px;
  font-size: clamp(3.45rem, 6vw, 6.8rem);
  text-wrap: balance;
}

.home-page .home-hero-photo {
  height: min(68vh, 670px);
  min-height: 530px;
  border: 0;
  background: transparent;
  box-shadow: none;
  perspective: 1500px;
  transform-style: preserve-3d;
}

.home-page .home-hero-photo::before {
  inset: 9% 4% 7% 6%;
  border: 1px solid rgb(255 255 255 / 12%);
  background: linear-gradient(145deg, rgb(255 255 255 / 6%), transparent 52%);
  box-shadow: inset 0 0 80px rgb(255 255 255 / 4%), 0 45px 110px rgb(0 0 0 / 36%);
  transform: translateZ(-90px) rotate(-2deg);
}

.home-page .home-hero-photo::after {
  inset: 4% 0 0;
  border-radius: 30px;
  background: radial-gradient(circle at 50% 42%, transparent 0 27%, rgb(4 12 22 / 8%) 57%, rgb(4 12 22 / 52%) 100%);
}

.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  perspective: 1350px;
  transform-style: preserve-3d;
}

.construction-cube {
  --cube-x: -7deg;
  --cube-y: -19deg;
  --cube-z: 0deg;
  position: absolute;
  width: min(67%, 390px);
  height: min(62%, 390px);
  top: 44%;
  left: 51%;
  transform: translate(-50%, -50%) rotateX(var(--cube-x)) rotateY(var(--cube-y)) rotateZ(var(--cube-z));
  transform-style: preserve-3d;
  transition: transform .22s cubic-bezier(.2,.72,.2,1);
  will-change: transform;
}

.cube-face {
  position: absolute;
  display: block;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 42%);
  background: #132a42;
  box-shadow: inset 0 0 36px rgb(255 255 255 / 6%);
  backface-visibility: hidden;
}

.cube-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cube-front {
  inset: 0;
  border-radius: 14px;
  transform: translateZ(72px);
  box-shadow: 0 32px 90px rgb(0 0 0 / 48%);
}

.cube-right {
  width: 144px;
  height: 100%;
  top: 0;
  left: calc(100% - 72px);
  transform: rotateY(90deg);
  filter: brightness(.7) saturate(.8);
}

.cube-top {
  width: 100%;
  height: 144px;
  top: -72px;
  left: 0;
  transform: rotateX(90deg);
  filter: brightness(.86) saturate(.86);
}

.cube-back {
  inset: 0;
  transform: translateZ(-72px) rotateY(180deg);
  background: linear-gradient(145deg, #173b59, #081321);
}

.scene-floor {
  position: absolute;
  width: 78%;
  height: 46%;
  left: 11%;
  bottom: -2%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(0 0 0 / 52%), rgb(0 0 0 / 0%) 70%);
  transform: rotateX(72deg) translateZ(-130px);
  filter: blur(7px);
}

.scene-halo {
  position: absolute;
  border: 1px solid rgb(240 200 121 / 28%);
  border-radius: 50%;
  transform-style: preserve-3d;
}

.scene-halo--one {
  width: 78%;
  aspect-ratio: 1;
  left: 10%;
  top: 4%;
  transform: rotateX(70deg) rotateZ(8deg) translateZ(-80px);
  box-shadow: 0 0 55px rgb(240 200 121 / 8%);
}

.scene-halo--two {
  width: 55%;
  aspect-ratio: 1;
  left: 22%;
  top: 16%;
  border-color: rgb(255 255 255 / 13%);
  transform: rotateY(68deg) rotateZ(-14deg) translateZ(-50px);
}

.scene-label {
  position: absolute;
  z-index: 4;
  padding: 9px 13px;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 999px;
  color: #fff;
  background: rgb(6 18 32 / 72%);
  box-shadow: 0 12px 32px rgb(0 0 0 / 28%);
  backdrop-filter: blur(13px);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.scene-label--fence { left: 2%; top: 20%; transform: translateZ(110px) rotate(-4deg); }
.scene-label--build { right: 1%; top: 34%; transform: translateZ(150px) rotate(4deg); }
.scene-label--concrete { left: 15%; bottom: 22%; transform: translateZ(120px) rotate(3deg); }

.home-page .home-hero-photo figcaption {
  inset: auto 5% 2%;
  padding: 72px 24px 22px;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(transparent, rgb(4 13 24 / 80%));
}

.project-journey {
  position: relative;
  height: 300vh;
  padding: 0;
  color: #fff;
  background:
    radial-gradient(circle at 65% 42%, rgb(44 91 132 / 23%), transparent 34rem),
    #07111f;
}

.project-journey-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.project-journey-sticky::before {
  content: "";
  position: absolute;
  width: 58vw;
  aspect-ratio: 1;
  right: -12vw;
  top: 3vh;
  border: 1px solid rgb(240 200 121 / 13%);
  border-radius: 50%;
  transform: perspective(1000px) rotateX(68deg) rotateZ(-10deg);
  box-shadow: inset 0 0 90px rgb(255 255 255 / 3%);
}

.project-journey-layout {
  display: grid;
  grid-template-columns: minmax(300px, .75fr) minmax(0, 1.25fr);
  align-items: center;
  gap: 5vw;
}

.project-journey-copy {
  position: relative;
  z-index: 6;
}

.project-journey-copy h2 {
  font-size: clamp(3rem, 5.8vw, 6.2rem);
  margin: 14px 0 24px;
}

.project-journey-copy p {
  max-width: 440px;
  color: #c6d3e1;
}

.journey-meter {
  width: min(100%, 380px);
  height: 4px;
  margin: 32px 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 13%);
}

.journey-meter span {
  display: block;
  width: var(--journey-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: #f0c879;
  box-shadow: 0 0 18px rgb(240 200 121 / 62%);
}

.project-journey-stage {
  position: relative;
  min-height: min(72vh, 720px);
  perspective: 1500px;
  transform-style: preserve-3d;
}

.journey-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(54%, 410px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 32%);
  border-radius: 18px;
  color: #fff;
  background: #10243b;
  box-shadow: 0 45px 110px rgb(0 0 0 / 55%);
  transform: translate3d(calc(-50% + var(--journey-x, 0px)), -50%, var(--journey-z, 0px)) rotateY(var(--journey-rotate, 0deg)) scale(var(--journey-scale, 1));
  opacity: var(--journey-opacity, 1);
  transition: opacity .12s linear;
  will-change: transform, opacity;
}

.journey-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}

.journey-panel > span {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: 90px 25px 24px;
  background: linear-gradient(transparent, rgb(4 13 24 / 94%));
}

.journey-panel small,
.journey-panel strong {
  display: block;
}

.journey-panel small {
  margin-bottom: 7px;
  color: #f0c879;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.journey-panel strong {
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.08;
}

@media (max-width: 980px) {
  .home-page .home-hero-grid {
    grid-template-columns: minmax(0, .92fr) minmax(370px, 1.08fr);
  }

  .home-page .home-hero h1 {
    font-size: clamp(3rem, 6vw, 5rem);
  }

  .project-journey-layout {
    grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  }
}

@media (max-width: 820px) {
  .home-page .home-hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-block: 34px 44px;
  }

  .home-page .home-hero h1 {
    font-size: clamp(2.8rem, 10vw, 4.8rem);
  }

  .home-page .home-hero-photo {
    height: min(62svh, 540px);
    min-height: 410px;
    overflow: visible;
  }

  .construction-cube {
    width: min(66vw, 360px);
    height: min(52svh, 360px);
  }

  .project-journey {
    height: auto;
    padding: 74px 0;
  }

  .project-journey-sticky {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .project-journey-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .project-journey-copy h2 {
    font-size: clamp(2.8rem, 11vw, 4.4rem);
  }

  .project-journey-stage {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    min-height: 0;
    perspective: 900px;
  }

  .journey-panel {
    position: relative;
    inset: auto;
    width: min(88%, 460px);
    aspect-ratio: 5 / 4;
    transform: none !important;
    opacity: 1 !important;
  }

  .journey-panel:nth-child(2) { margin-left: auto; transform: rotateY(-4deg) !important; }
  .journey-panel:nth-child(3) { margin-left: 5%; transform: rotateY(4deg) !important; }
}

@media (max-width: 480px) {
  .home-page .home-hero-photo {
    min-height: 355px;
  }

  .construction-cube {
    width: 68vw;
    height: 275px;
    top: 42%;
  }

  .cube-right { width: 96px; left: calc(100% - 48px); }
  .cube-top { height: 96px; top: -48px; }
  .cube-front { transform: translateZ(48px); }
  .cube-back { transform: translateZ(-48px) rotateY(180deg); }
  .scene-label { font-size: .65rem; padding: 7px 10px; }
  .scene-label--fence { left: 1%; }
  .scene-label--build { right: 0; }
  .scene-label--concrete { left: 4%; bottom: 25%; }
}

@media (prefers-reduced-motion: reduce) {
  .construction-cube,
  .journey-panel {
    transition: none;
  }

  .project-journey {
    height: auto;
    padding: 74px 0;
  }

  .project-journey-sticky {
    position: relative;
    height: auto;
  }
}

/* Mobile should stay dimensional, not collapse into a flat stack. */
@media (max-width: 820px) {
  .home-page .immersive-chapter {
    perspective: 1050px;
  }

  .home-page .immersive-chapter > .wrap {
    transform: translate3d(0, var(--chapter-y, 0px), 0) !important;
    transform-style: preserve-3d;
  }

  .home-page .services-chapter .project-path,
  .home-page .reviews-chapter .google-review-card,
  .home-page .interior-chapter .planning-note,
  .home-page .areas-chapter .area-panel,
  .home-page .quote-chapter .card,
  .home-page .trades-chapter .service-pill {
    transform-style: preserve-3d;
    will-change: transform;
  }

  .home-page .services-chapter .project-path:nth-child(1) {
    transform: perspective(1000px) rotateY(3.5deg) translate3d(-4px, var(--chapter-card-y, 0px), 24px) !important;
    box-shadow: 24px 30px 60px rgb(4 13 24 / 25%);
  }

  .home-page .services-chapter .project-path:nth-child(2) {
    transform: perspective(1000px) rotateY(-3.5deg) translate3d(4px, var(--chapter-card-y, 0px), 34px) !important;
    box-shadow: -24px 30px 60px rgb(4 13 24 / 30%);
  }

  .home-page .reviews-chapter .google-review-card {
    transform: perspective(1000px) rotateY(-3deg) rotateX(1deg) translate3d(5px, var(--chapter-card-y, 0px), 30px) !important;
    box-shadow: -22px 28px 58px rgb(16 33 58 / 24%);
  }

  .home-page .interior-chapter .planning-note {
    transform: perspective(1000px) rotateY(3deg) rotateX(-1deg) translate3d(-4px, var(--chapter-card-y, 0px), 28px) !important;
    box-shadow: 22px 30px 62px rgb(0 0 0 / 28%);
  }

  .home-page .areas-chapter .area-panel {
    transform: perspective(1000px) rotateY(-3deg) translate3d(4px, var(--chapter-card-y, 0px), 26px) !important;
    box-shadow: -22px 28px 60px rgb(16 33 58 / 22%);
  }

  .home-page .quote-chapter .card {
    transform: perspective(1000px) rotateX(2deg) translate3d(0, var(--chapter-card-y, 0px), 36px) !important;
    box-shadow: 0 32px 68px rgb(0 0 0 / 34%);
  }

  .home-page .trades-chapter .service-pill:nth-child(odd) {
    transform: perspective(900px) rotateY(2.4deg) translateZ(18px) !important;
  }

  .home-page .trades-chapter .service-pill:nth-child(even) {
    transform: perspective(900px) rotateY(-2.4deg) translateZ(18px) !important;
  }

  .home-page .journey-panel {
    box-shadow: 0 28px 60px rgb(0 0 0 / 34%);
  }

  .home-page .journey-panel:nth-child(1) {
    transform: perspective(900px) rotateY(3.5deg) translateZ(22px) !important;
  }

  .home-page .journey-panel:nth-child(2) {
    transform: perspective(900px) rotateY(-4deg) translateZ(34px) !important;
  }

  .home-page .journey-panel:nth-child(3) {
    transform: perspective(900px) rotateY(4deg) translateZ(26px) !important;
  }

  .fall-photo {
    transform: perspective(1000px) rotateY(-3deg) translate3d(3px, var(--ambient-y, 0px), 26px);
    box-shadow: -22px 30px 62px rgb(0 0 0 / 30%);
  }
}

@media (max-width: 480px) {
  .home-page .services-chapter .project-path:nth-child(1),
  .home-page .services-chapter .project-path:nth-child(2),
  .home-page .reviews-chapter .google-review-card,
  .home-page .interior-chapter .planning-note,
  .home-page .areas-chapter .area-panel,
  .home-page .quote-chapter .card {
    border-radius: 22px;
  }
}