/* ============================================================================
   Legacy homepage. Loads after scrollcraft.css and site.css.
   ========================================================================== */

/* ===================================================== 1 hero: the build ==
   One pinned stage. The house is laid course by course (drawing, foundation,
   frame, wrap, siding, finished) while the card it sits in grows until the
   finished house fills the screen. home.js drives --t on each course, the
   card's transform, and the level that rides the leading edge. */
.hero__stage { background: var(--sc-canvas); }

.hero__intro {
  position: absolute; z-index: 3; left: 0; right: 0;
  top: calc(var(--bar-h) + clamp(1.25rem, 4vh, 3rem));
  padding-inline: var(--sc-gutter);
  display: grid; justify-items: center; text-align: center; gap: 1rem;
  will-change: opacity, transform;
}
.hero__title {
  font-size: clamp(2.6rem, min(0.9rem + 4.6vw, 8.2vh), 6rem);
  font-weight: 700; line-height: 0.98; letter-spacing: -0.048em;
  text-wrap: balance;
}
.hero__lede {
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem); line-height: 1.45; font-weight: 500;
  color: var(--sc-ink-soft); max-width: 40ch; text-wrap: balance;
}
.hero__actions { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 0.25rem; }
.hero__link { font-weight: 650; font-size: 15px; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; color: var(--sc-accent); }
.hero__link::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid; border-bottom: 1.6px solid; transform: translateY(-2px) rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .hero__link:hover { text-decoration: underline; } }

/* The card is laid out at its FINAL size (covering the stage) and scaled down
   to its opening size, so the last frame is rendered sharp, not blown up. */
.hero__card {
  position: absolute; z-index: 2;
  left: 50%; top: 50%;
  width: var(--cw, 100vw); height: var(--ch, 54vw);
  margin-left: calc(var(--cw, 100vw) / -2); margin-top: calc(var(--ch, 54vw) / -2);
  transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0) scale(var(--s, 1));
  transform-origin: 50% 50%;
  border-radius: calc(var(--rv, 20px) / var(--s, 1));
  overflow: hidden;
  background: #EDEBE4;
  box-shadow: 0 calc(40px / var(--s, 1)) calc(90px / var(--s, 1)) calc(-40px / var(--s, 1)) rgb(20 30 22 / calc(0.45 * var(--sh, 1)));
  will-change: transform;
}
.course {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 50%;
  clip-path: inset(calc((1 - var(--t, 0)) * 100%) 0 0 0);
}
.course--base { clip-path: none; }

/* the signature: a spirit level rides the leading edge of each course.
   Sizes are divided by the card's scale so it reads the same at any zoom. */
.level {
  position: absolute; left: 3.5%; right: 3.5%;
  /* rides the edge, but never hangs half outside the card */
  top: clamp(calc(12px / var(--s, 1)), calc(var(--e, 1) * 100%), calc(100% - 12px / var(--s, 1)));
  height: calc(20px / var(--s, 1));
  transform: translateY(-50%) rotate(var(--tilt, 0deg));
  /* never fully transparent, and on its own layer from the start: creating the
     layer mid-scroll, the first time the level appears, cost a phone a
     100 ms frame. At 0.01 it is invisible. */
  opacity: max(var(--lv-o, 0), 0.01);
  will-change: transform, opacity;
  pointer-events: none;
}
.level__body {
  position: absolute; inset: 0; border-radius: calc(4px / var(--s, 1));
  background: linear-gradient(#F2F3EF, #C9CDC6 55%, #AEB3AB);
  box-shadow: 0 calc(6px / var(--s, 1)) calc(18px / var(--s, 1)) calc(-4px / var(--s, 1)) rgb(0 0 0 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.8);
  display: grid; place-items: center;
}
.level__vial {
  position: relative; width: calc(92px / var(--s, 1)); height: calc(12px / var(--s, 1));
  border-radius: 999px; overflow: hidden;
  background: linear-gradient(#D7EDB4, #A9D27F);
  box-shadow: inset 0 1px 2px rgb(0 40 0 / 0.35), 0 0 0 1px rgb(40 60 30 / 0.35);
  transition: filter 300ms var(--sc-ease-out);
}
.level__vial::before, .level__vial::after {
  content: ""; position: absolute; top: 8%; bottom: 8%; width: calc(1.5px / var(--s, 1)); background: rgb(30 45 25 / 0.55);
}
.level__vial::before { left: calc(50% - 13px / var(--s, 1)); }
.level__vial::after  { left: calc(50% + 11.5px / var(--s, 1)); }
.level__bubble {
  position: absolute; top: 16%; left: 50%;
  width: calc(20px / var(--s, 1)); height: 68%; margin-left: calc(-10px / var(--s, 1));
  border-radius: 999px;
  background: radial-gradient(70% 90% at 40% 30%, #fff, rgb(255 255 255 / 0.55));
  transform: translateX(var(--bub, 0px));
}
.level.is-true .level__vial { filter: brightness(1.08) saturate(1.15); }

/* the stage you are on: a frosted plate that works over paper or photo */
.hero__track {
  position: absolute; z-index: 4; left: var(--sc-gutter); bottom: clamp(1.25rem, 4vh, 2.5rem);
  display: grid; gap: 10px; width: min(27rem, calc(100vw - 2 * var(--sc-gutter)));
  padding: 14px 18px 16px; border-radius: 16px;
  background: rgb(14 20 16 / 0.62); color: #F1F0EA;
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.45);
  opacity: var(--tr-o, 1); transform: translateY(calc((1 - var(--tr-o, 1)) * 10px));
  pointer-events: none;
}
.hero__ticks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.hero__ticks i { height: 3px; border-radius: 2px; background: rgb(255 255 255 / 0.22); position: relative; overflow: hidden; }
.hero__ticks i::after { content: ""; position: absolute; inset: 0; background: var(--sage); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
/* every caption shares one grid cell, so the plate is as tall as the longest */
.hero__stages { list-style: none; margin: 0; padding: 0; display: grid; }
.hero__stages li {
  grid-area: 1 / 1; font-size: 0.98rem; line-height: 1.4; color: rgb(241 240 234 / 0.78);
  opacity: 0; transform: translateY(5px);
  transition: opacity 120ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.hero__stages li b { color: #fff; font-weight: 650; }
.hero__stages li.is-on { opacity: 1; transform: none; transition: opacity 260ms var(--sc-ease-out) 120ms, transform 260ms var(--sc-ease-out) 120ms; }

/* the resolve: the finished house fills the screen and the claim returns */
.hero__shade {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(6 14 8 / 0.7), rgb(6 14 8 / 0.42) 20%, transparent 40%),
    linear-gradient(to top, rgb(6 14 8 / 0.82), rgb(6 14 8 / 0.46) 30%, transparent 56%);
  opacity: var(--end, 0);
}
.hero__end { position: absolute; inset: 0; z-index: 5; pointer-events: none; color: #fff; opacity: var(--end, 0); }
.hero__end.is-live { pointer-events: auto; }
.hero__end-title {
  position: absolute; left: 0; right: 0; top: calc(var(--bar-h) + 6vh); padding-inline: var(--sc-gutter);
  text-align: center; font-size: clamp(2.6rem, min(0.9rem + 4.6vw, 8.2vh), 6rem);
  font-weight: 700; line-height: 0.98; letter-spacing: -0.048em; text-wrap: balance;
  text-shadow: 0 2px 30px rgb(0 0 0 / 0.25);
  transform: translateY(calc((1 - var(--end, 0)) * 14px));
}
.hero__end-copy {
  position: absolute; left: var(--sc-gutter); bottom: clamp(2rem, 7vh, 4.5rem); max-width: 34rem;
  display: grid; gap: 22px; justify-items: start;
}
.hero__end-copy p { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.32rem); line-height: 1.45; font-weight: 550; text-shadow: 0 1px 12px rgb(0 0 0 / 0.3); }
.hero__end-copy .hero__actions { justify-content: flex-start; }
.hero__end-copy .hero__link { color: #fff; }
.hero__credit { position: absolute; right: var(--sc-gutter); bottom: clamp(2rem, 7vh, 4.5rem); font-size: 12.5px; font-weight: 500; opacity: 0.85; }

/* phones: no full-bleed push-in (a portrait crop would lose the house). The
   card sits under the claim at full width and the stage plate sits under it. */
@media (max-width: 899px) {
  .hero__stage { display: flex; flex-direction: column; justify-content: safe center; gap: 1.1rem; padding: calc(var(--bar-h) + 1rem) 0 1.25rem; }
  .hero__intro { position: relative; top: auto; gap: 0.75rem; }
  .hero__title { font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
  .hero__card {
    position: relative; left: auto; top: auto; margin: 0; align-self: center; flex: none;
    width: min(calc(100vw - 2 * var(--sc-gutter)), calc(46svh * 1.12)); height: auto; aspect-ratio: 1.12 / 1;
    transform: none; border-radius: var(--r); box-shadow: 0 24px 50px -28px rgb(20 30 22 / 0.5);
    will-change: auto;
  }
  .hero__track { position: relative; left: auto; bottom: auto; margin: 0 var(--sc-gutter); width: auto; opacity: 1; transform: none; background: var(--sc-ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero__intro { will-change: auto; }
  .hero__shade, .hero__end { display: none; }
  .level { height: 16px; }
  .level__vial { width: 70px; height: 10px; }
  .level__bubble { width: 16px; margin-left: -8px; }
  .level__vial::before { left: calc(50% - 11px); width: 1.5px; }
  .level__vial::after  { left: calc(50% + 9.5px); width: 1.5px; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .hero__lede { display: none; }
  .hero__title { font-size: clamp(2.1rem, 9.5vw, 2.8rem); }
}

/* without motion the sequence still reads: stages cross-dissolve in place */
@media (prefers-reduced-motion: reduce) {
  .course { clip-path: none; opacity: var(--t, 0); }
  .course--base { opacity: 1; }
  .level { display: none; }
}

/* ============================================================ 2 belief == */
.belief { background: var(--sc-canvas); padding-block: clamp(6rem, 14vw, 12rem) var(--sc-section); }
.belief__line {
  font-size: clamp(2.3rem, 1.1rem + 4.6vw, 5.8rem);
  font-weight: 680; line-height: 1.03; letter-spacing: -0.045em;
  max-width: 16ch; text-wrap: balance;
}
.belief__line .w { opacity: 0.16; transition: opacity 120ms linear; }
.belief__line .w--accent { color: var(--sc-accent); }

.steps { list-style: none; margin: clamp(4.5rem, 9vw, 8rem) 0 0; padding: 0; display: grid; gap: clamp(2.5rem, 4.5vw, 3.75rem); }
.steps li { max-width: 27rem; padding-top: 1.1rem; border-top: 1px solid color-mix(in oklab, var(--sc-ink) 16%, transparent); }
.steps li:nth-child(2) { margin-left: clamp(0rem, 20vw, 20rem); }
.steps li:nth-child(3) { margin-left: clamp(0rem, 40vw, 40rem); }
.steps h3 { font-size: 1.3rem; font-weight: 650; letter-spacing: -0.022em; line-height: 1.25; }
.steps p { margin-top: 0.6rem; color: var(--sc-ink-soft); text-wrap: pretty; }
@media (max-width: 899px) { .steps li:nth-child(n) { margin-left: 0; } }

/* ============================================================= 3 homes == */
.homes { background: var(--sc-canvas); }
.homes__stage { display: flex; align-items: center; }
.homes__rail { align-items: flex-start; gap: clamp(1.5rem, 3vw, 3rem); padding: calc(var(--bar-h) + 1rem) var(--sc-gutter) 0; }
.homes__lead { flex: 0 0 clamp(17rem, 28vw, 27rem); padding-top: 1rem; display: grid; gap: 1.25rem; align-content: start; }
.home { flex: 0 0 auto; width: min(52vw, (100svh - 240px) * 1.6, 54rem); }
.home__frame { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: #E3E4DE; box-shadow: var(--sc-e2); }
.home__frame > img { width: 100%; height: 100%; object-fit: cover; }
.home__before { position: absolute; left: 14px; bottom: 14px; width: 30%; background: #fff; padding: 4px 4px 0; border-radius: 12px; box-shadow: var(--sc-e2); }
.home__before img { border-radius: 8px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
.home__before span { display: block; font-size: 11.5px; font-weight: 650; color: #141815; padding: 5px 4px 6px; }
.plaque { display: grid; gap: 3px; margin-top: 16px; }
.plaque__name { font-size: 1.2rem; font-weight: 650; letter-spacing: -0.02em; }
.plaque__meta { font-size: 0.9rem; color: var(--sc-ink-soft); }
.homes__note { flex: 0 0 clamp(15rem, 22vw, 20rem); padding-top: 1rem; display: grid; gap: 1.5rem; align-content: start; }
.homes__note-title { font-size: 0.95rem; font-weight: 650; color: var(--sc-ink-soft); }
.homes__note ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.homes__note li { display: grid; gap: 3px; padding-top: 1rem; border-top: 1px solid var(--hair); }
@media (prefers-reduced-motion: no-preference) {
  .home, .homes__note {
    --t: clamp(0, calc(var(--sc-p, 0) * 5 - var(--i) + 1.6), 1);
    opacity: calc(0.55 + 0.45 * var(--t));
    transform: translate3d(0, calc((1 - var(--t)) * 28px), 0);
  }
}
@media (max-width: 899px) {
  .homes__lead { flex-basis: 78vw; }
  .home { width: 84vw; }
  .homes__note { flex-basis: 72vw; }
}

/* ============================================================ 4 inside == */
.inside { background: var(--sc-surface); padding-block: var(--sc-section); }
.inside__head { display: grid; gap: 1.25rem; max-width: 50rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 2.6vw, 40px) clamp(10px, 1.4vw, 20px); }
.room { display: grid; gap: 10px; }
.room figcaption { font-size: 0.88rem; font-weight: 550; color: var(--sc-ink-soft); }
.room__frame { height: var(--h); border-radius: var(--r); overflow: hidden; background: #ECECE7; }
.room__frame img { width: 100%; height: 124%; margin-top: -12%; object-fit: cover; }
.room--kitchen { grid-column: 1 / 9;  --h: clamp(18rem, 40vw, 40rem); }
.room--stair   { grid-column: 9 / 13; --h: clamp(18rem, 40vw, 40rem); }
.room--bath    { grid-column: 1 / 5;  --h: clamp(16rem, 30vw, 30rem); }
.room--living  { grid-column: 5 / 13; --h: clamp(16rem, 30vw, 30rem); }
.room--dining  { grid-column: 1 / 7;  --h: clamp(14rem, 24vw, 24rem); }
.room--bedroom { grid-column: 7 / 10; --h: clamp(14rem, 24vw, 24rem); }
.room--hall    { grid-column: 10 / 13; --h: clamp(14rem, 24vw, 24rem); }
@media (max-width: 899px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room { grid-column: span 2 !important; --h: 62vw !important; }
  .room--bedroom, .room--hall { grid-column: span 1 !important; --h: 52vw !important; }
}

/* ============================================ 5 field: the build diaries == */
.field { position: relative; overflow: hidden; }
.field__media { position: absolute; inset: 0; }
.field__media img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; max-width: none; object-fit: cover; }
.field__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(8 12 9 / 0.86) 0%, rgb(8 12 9 / 0.62) 38%, rgb(8 12 9 / 0.12) 72%, transparent 100%);
}
.field__inner { position: relative; min-height: clamp(30rem, 78vh, 46rem); display: grid; align-content: center; justify-items: start; gap: 1.4rem; padding-block: clamp(5rem, 10vw, 8rem); }
.field__inner .lede { color: rgb(238 237 230 / 0.82); }
@media (max-width: 899px) {
  .field__media::after { background: linear-gradient(to top, rgb(8 12 9 / 0.9) 0%, rgb(8 12 9 / 0.7) 45%, rgb(8 12 9 / 0.2) 100%); }
  .field__inner { align-content: end; }
}

/* ============================================================== 6 team == */
.team { background: var(--sc-canvas); padding-bottom: var(--sc-section); }
.team__photo img { width: 100%; height: clamp(22rem, 50vw, 46rem); object-fit: cover; object-position: 50% 42%; }
.team__body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 7rem); padding-top: clamp(3rem, 6vw, 5.5rem); }
.team__text { display: grid; gap: 1.4rem; align-content: start; }
.team__rating { color: var(--sc-ink-soft); font-size: 0.98rem; }
.team__rating a { color: var(--sc-accent); font-weight: 650; }
.process { display: grid; gap: 1.6rem; align-content: start; }
.process__title { font-size: 1.3rem; font-weight: 650; letter-spacing: -0.022em; }
@media (max-width: 899px) { .team__body { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================== 7 inquire == */
.inquire { background: var(--sc-canvas); padding-block: var(--sc-section); }
.inquire__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
.inquire__intro { display: grid; gap: 1.4rem; }
.inquire__intro .rows { margin-top: 1rem; }
@media (min-width: 900px) { .inquire__intro { position: sticky; top: calc(var(--bar-h) + 2rem); } }
@media (max-width: 899px) { .inquire__grid { grid-template-columns: minmax(0, 1fr); } }