/* Northlight Models — Welcome page (Figma 244:238, 1920 × 6017) */

/* ---------- 1. hero (y0, h986) ---------- */
.hero {
  position: relative; isolation: isolate;
  padding-top: clamp(168px, 15.73vw, 302px);      /* reserves the absolute header; h1 at y302 */
  padding-bottom: clamp(88px, 13.3vw, 255px);
}
.hero__bg { position: absolute; left: 0; top: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 72% 0; }
.hero::after {
  content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(24, 27, 36, 0) 38%, var(--c-bg) 100%),
    linear-gradient(90deg, var(--c-bg) 0%, rgba(24, 27, 36, 0.86) 30%, rgba(24, 27, 36, 0.2) 62%, rgba(24, 27, 36, 0.35) 100%);
}
.hero > .container { position: relative; z-index: 1; }
.hero__spot-warm { width: 666px; left: calc(50% - 923px); top: 12px; }
.hero__spot-violet { left: calc(50% - 482px); top: 537px; }
.hero__content { position: relative; width: 100%; max-width: 662px; text-align: center; isolation: isolate; }
.hero__content > .script-ghost {
  position: absolute; z-index: -1; left: 50%; top: -0.82em; transform: translateX(-47%);
  opacity: 0.13;
}
.hero__content > .hero__ring { z-index: -1; left: -143px; top: -66px; }
.hero__content > .btn { margin-top: 29px; }
.hero__phone { display: grid; grid-template-columns: 1fr; justify-items: center; margin-top: 51px; }
.hero__phone-ring {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
  border-top: 1px solid var(--c-gold); border-right: 1px solid var(--c-gold);
  border-bottom: 1px solid var(--c-gold); border-left: 1px solid var(--c-gold);
  color: var(--c-gold);
}
.hero__phone-ring svg { width: 28px; height: 28px; }
.hero__phone-label { margin-top: 7px; line-height: 23px; color: var(--c-text); }
.hero__phone-number { color: var(--c-white); transition: color var(--t-fast) var(--ease); }
.hero__phone-number:hover { color: var(--c-gold); }
.hero__content > .lead { margin-top: 7px; }
.hero__social { position: absolute; z-index: 1; top: 414px; right: max(20px, calc(50% - 763px)); }

/* ---------- 2. featured models (y986, h1255) ---------- */
.section.home-featured { padding-top: 8px; }
.home-featured .ghost-head, .home-select .ghost-head { padding-top: 0; margin-bottom: clamp(24px, 1.57vw, 30px); }
.home-featured .btn-row { margin-top: clamp(40px, 3.4vw, 64px); }
.home-featured__spot { top: 452px; }

/* ---------- 3. about split (y2256, h773) ---------- */
.section.home-about { margin-top: 15px; padding-top: clamp(72px, 5.47vw, 105px); }
.home-about__lines { width: 2485px; top: -539px; left: calc(50% - 602px); }
.home-about__spot-left { top: -160px; }
.home-about__spot-right { top: 601px; }
.home-about .split__body .body-copy { max-width: 590px; }

/* ---------- 4. why split (y3156, h491) ---------- */
.section.home-why { margin-top: clamp(64px, 6.6vw, 127px); padding-top: 0; }
.home-why .split__body { max-width: 551px; }
.home-why .split__body > .h2 { margin-bottom: 24px; }
.home-why .check-list { margin-top: 28px; }
.home-why .deco--wave { left: -113px; top: 73.7%; z-index: 1; }

/* ---------- 5. services (y3790, h865) ---------- */
.section.home-services { margin-top: clamp(64px, 7.45vw, 143px); padding-top: clamp(32px, 3.23vw, 62px); }
.home-services__band { position: relative; isolation: isolate; padding-bottom: clamp(56px, 6.4vw, 123px); }
.home-services__bg { position: absolute; left: 0; top: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.home-services__band::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1;
  background:
    linear-gradient(180deg, var(--c-bg) 0%, rgba(24, 27, 36, 0.62) 26%, rgba(24, 27, 36, 0.62) 78%, var(--c-bg) 100%),
    linear-gradient(90deg, var(--c-bg) 0%, rgba(24, 27, 36, 0) 22%, rgba(24, 27, 36, 0) 78%, var(--c-bg) 100%);
}
.home-services__band > .container { position: relative; }
.home-services .ghost-head { padding-top: clamp(56px, 6.875vw, 132px); margin-bottom: 0; text-align: left; }
.home-services .ghost-head > .visually-hidden { position: absolute; }
.home-services .ghost-head::before { left: -0.043em; top: -0.58em; transform: none; font-weight: 600; opacity: 0.16; }
.home-services .feature-grid--2 { position: relative; z-index: 1; grid-column-gap: clamp(40px, 13vw, 250px); }

/* ---------- 6. select board (y4636, h725) ---------- */
.section.home-select { margin-top: -19px; padding-top: clamp(72px, 7.45vw, 143px); }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .hero__content > .hero__ring { left: -60px; }
  .home-why .deco--wave { left: -60px; }
  .home-about__lines { width: 1300px; top: -300px; left: 20%; }
}
@media (max-width: 991px) {
  .hero__content { margin-left: auto; margin-right: auto; }
  .hero__social { display: none; }
  .hero::after {
    background: linear-gradient(180deg, rgba(24, 27, 36, 0.55) 0%, rgba(24, 27, 36, 0.7) 55%, var(--c-bg) 100%);
  }
  .hero__spot-warm { left: -200px; }
  .hero__spot-violet { left: 20%; top: 60%; }
  .home-why .split__body { max-width: none; }
  .home-why .deco--wave { left: -16px; }
  .home-featured__spot { top: 30%; }
  .home-about__spot-right { top: 60%; }
}
@media (max-width: 767px) {
  .hero__content > .hero__ring { left: -24px; top: -40px; }
  .home-why .deco--wave { width: 160px; height: auto; }
}
@media (max-width: 479px) {
  .hero__content > .h-display br { display: none; }
}
