/* ---------- 1–3. Pinned intro: hero title → statement → approach card ---------- */
.intro { position: relative; height: 100vh; overflow: hidden; }
.intro .title { position: absolute; left: 0; right: 0; top: 17.3rem; text-align: center; z-index: 2; }
.intro .title h1 { width: max-content; max-width: 90vw; margin: 0 auto; }
.intro .sub { position: absolute; left: 50%; bottom: 6.4rem; width: 44.8rem; max-width: calc(100% - 3.2rem); translate: -50% 0; text-align: center; color: var(--white); z-index: 2; }
.intro .statement { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; pointer-events: none; }
.intro .statement h2 { text-align: center; }
.intro .statement .w { scale: 0; }

.intro .card {
  position: absolute; z-index: 3; left: 4rem; right: 4rem; top: 3rem; bottom: 3rem;
  clip-path: inset(50%); scale: 1.2; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; padding: 6.4rem 6.4rem 5.6rem;
}
.intro .card .pic { position: absolute; inset: 0; z-index: -1; }
.intro .card .pic img { height: 125%; top: -12.5%; }
.intro .card .pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.1) 40%, rgba(0,0,0,.75)); }
.intro .card h2 { grid-column: 1 / -1; align-self: start; }
.intro .card .marquee { align-self: end; max-width: 72rem; }
.intro .card .aside { align-self: end; width: 32.8rem; display: flex; flex-direction: column; gap: 3.2rem; align-items: flex-start; }
.intro .card .aside .body { color: var(--white); }

/* ---------- 4. Approach stepper ---------- */
.steps { position: relative; overflow: clip; }
.steps .backdrop { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; overflow: hidden; z-index: 0; }
.steps .backdrop .blurred { z-index: 0; }
.steps .rail { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; z-index: 1; pointer-events: none; }
.steps .square { position: absolute; left: 25.6rem; top: calc(50% - 22.4rem); width: 44.8rem; height: 44.8rem; }
.steps .square .pic { position: absolute; inset: 0; }
.steps .square .pic + .pic { clip-path: inset(50%); }
.steps .step { position: relative; z-index: 2; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-left: 85.6rem; }
.steps .count { display: flex; gap: .6rem; margin-bottom: 4rem; }
.steps .count span:last-child { opacity: .6; }
.steps .step .body { width: 32.8rem; margin-top: .8rem; }
.steps .step .btn { margin-top: 4.8rem; }

/* ---------- 5. Quote ---------- */
.quote { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 12.8rem 13.6rem; }
.quote .text { width: 80.8rem; max-width: 100%; position: relative; z-index: 1; }
.quote .body { width: 56.8rem; max-width: 100%; margin-top: 3.2rem; }
.quote .btn { margin-top: 3.2rem; }
.quote .window { position: absolute; right: 13.6rem; top: 50%; width: 32.8rem; height: 49.2rem; margin-top: -24.6rem; overflow: hidden; }
.quote .window .pic { position: absolute; inset: 0; }
.quote .window .pic img { height: 200%; top: -50%; }

/* ---------- 6. Services ---------- */
.services { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.services .list { position: relative; }
.services .item { height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-left: 13.6rem; padding-right: 3.2rem; }
.services .item .body { width: 44.8rem; max-width: 100%; margin-top: 1.6rem; }
.services .item .btn { margin-top: 4rem; }
.services .media { position: sticky; top: 0; height: 100vh; padding-top: var(--header-h); }
.services .media .frame { position: relative; height: 100%; overflow: hidden; }
.services .media .pic { position: absolute; inset: 0; }
.services .media .pic + .pic { clip-path: inset(100% 0 0 0); }

/* ---------- 7. Restraint reveal ---------- */
.reveal { position: relative; height: 100vh; overflow: hidden; }
.reveal .layers { position: absolute; inset: 0; }
.reveal .layers .pic { position: absolute; inset: 0; }
.reveal .layers .pic img { filter: brightness(.48) contrast(1.15) saturate(.7); }
.reveal .shade { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.9) 0%, rgba(0,0,0,0) 100%); z-index: 2; }
.reveal .word, .reveal .end { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.reveal .end { gap: .8rem; }
.reveal .end .body { width: 44.8rem; max-width: calc(100% - 3.2rem); text-align: center; }

/* ---------- 8. Banners ---------- */
.banner { position: relative; height: 100vh; min-height: 60rem; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; text-align: center; isolation: isolate; }
.banner .pic { position: absolute; inset: 0; z-index: -1; }
.banner .pic img { height: 150%; top: -25%; }
.banner .pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.35) 60%, #000 100%); }
.banner .copy { width: 100%; display: flex; flex-direction: column; align-items: center; padding: 0 var(--gm) 12rem; }
.banner .copy .body { width: 44.8rem; max-width: 100%; margin: .8rem 0 3.2rem; text-align: center; }

@media (max-width: 1100px) {
  .steps .square { left: var(--gm); width: 34vw; height: 34vw; top: calc(50% - 17vw); }
  .steps .step { padding-left: calc(34vw + var(--gm) * 3); padding-right: var(--gm); }
  .quote { padding: 12.8rem var(--gm); }
  .quote .window { right: var(--gm); }
  .quote .text { width: 60%; }
  .services .item { padding-left: var(--gm); }
}
@media (max-width: 767px) {
  .intro .card { left: 1.6rem; right: 1.6rem; top: 8rem; bottom: 4rem; grid-template-columns: 1fr; padding: 3.2rem 2.4rem; }
  .intro .card .marquee { display: none; }
  .intro .card .aside { width: 100%; }
  .steps .square { left: 50%; translate: -50% 0; width: 70vw; height: 70vw; top: 12rem; }
  .steps .step { padding: calc(12rem + 70vw + 2.4rem) var(--gm) 0; justify-content: flex-start; }
  .steps .count { margin-bottom: 1.6rem; }
  .steps .step .btn { margin-top: 2.4rem; }
  .quote { flex-direction: column; align-items: flex-start; gap: 4rem; }
  .quote .text { width: 100%; }
  .quote .window { position: relative; right: auto; top: auto; margin: 0; width: 70%; height: 60vw; }
  .services { grid-template-columns: minmax(0, 1fr); }
  .services > * { min-width: 0; }
  .quote .t-h2 { font-size: 3.4rem; }
  .services .media { grid-row: 1; height: 50vh; z-index: 1; padding-top: 8rem; }
  .services .item { height: 80vh; justify-content: flex-start; padding-top: 4rem; }
}

/* ---------- Client additions: hero photo under the grain ---------- */
.intro .intro-bg { position: absolute; inset: 0; z-index: 0; }
.intro .intro-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(1.05); }
.intro .intro-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,12,12,.85) 0%, rgba(12,12,12,.25) 45%, rgba(12,12,12,.9) 100%); }
.site-footer .foot-btn { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; }

/* H2 — cursor image trail */
.intro .trail { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.intro .trail img { position: absolute; display: none; width: clamp(18rem, 17vw, 30rem); aspect-ratio: 3 / 2; object-fit: cover; opacity: 0; visibility: hidden; box-shadow: 0 2rem 5rem rgba(0,0,0,.55); will-change: transform, opacity; }
.intro .intro-bg { will-change: transform; }
@media (max-width: 767px) { .quote .window .pic img { height: 100%; top: 0; } }

/* ---------- Phones (from the reference's mobile layout) ---------- */
@media (max-width: 767px) {
  .socials a:not([href^="tel"]) { display: none; }
  .intro .card { left: 0; right: 0; top: 0; bottom: 0; padding: calc(var(--header-h) + 2.4rem) 1.6rem 4.8rem; }
  .intro .card .marquee { display: block; max-width: 100%; margin: 2.4rem 0; }
  .intro .card { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; }
  .steps .backdrop, .steps .rail { display: none; }
  .steps .step { height: auto; padding: 9.6rem var(--gm) 0; justify-content: flex-start; }
  .steps .step:last-child { padding-bottom: 9.6rem; }
  .steps .step .step-pic { width: 100%; aspect-ratio: 1; margin-bottom: 3.2rem; }
  .steps .count { margin-bottom: 2.4rem; }
  .quote .window { display: none; }
  .services .media { display: none; }
  .services .item { position: relative; height: auto; min-height: 100vh; justify-content: center; padding: 9.6rem var(--gm); overflow: hidden; isolation: isolate; }
}

/* Services on phones: one pinned full-bleed photo stage behind the list; each next photo is
   revealed from the bottom over the previous one while the text scrolls over it. */
@media (max-width: 767px) {
  .services { grid-template-columns: minmax(0, 1fr); }
  .services .media { display: block; grid-row: 1; position: sticky; top: 0; height: 100vh; height: 100lvh; margin-bottom: -100vh; margin-bottom: -100lvh; padding-top: 0; z-index: 0; }
  .services .list { grid-row: 2; position: relative; z-index: 1; }
  .services .media .pic img { filter: brightness(.42) saturate(.9); }
  .services .media .frame::after { content: ""; position: absolute; inset: 0; z-index: 9; background: linear-gradient(180deg, rgba(12,12,12,.7), rgba(12,12,12,.2) 40%, rgba(12,12,12,.8)); }
  .services .item { min-height: 100vh; min-height: 100lvh; overflow: visible; background: none; }
}