/* Home page: The Open Frame. Tokens only; sharp corners; transform and opacity for motion
 * (the homes frame opens with clip-path, which paints only and never moves the layout). */

/* ─── 1. First screen ─── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-forest);
  color: var(--color-linen);
}
.hero__media { position: absolute; inset: 0; }
.hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 58% 40%;
  transform-origin: 60% 40%;
  animation: hero-settle 1200ms var(--ease) both;
}
.hero__media::before,
.hero__media::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; }
/* A quiet top under the transparent header, and a scrim from the foot only as far as the words need */
.hero__media::before { top: 0; height: 200px; background: linear-gradient(to bottom, color-mix(in srgb, var(--color-forest) 62%, transparent), transparent); }
.hero__media::after { bottom: 0; height: 62%; background: linear-gradient(to top, color-mix(in srgb, var(--color-forest) 88%, transparent) 0%, color-mix(in srgb, var(--color-forest) 55%, transparent) 45%, transparent 100%); }
.hero__in { position: relative; z-index: 2; padding-bottom: var(--space-6); }

.hero__frame {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  max-width: 34rem;
  min-height: clamp(17rem, 40svh, 28rem);
  padding: var(--space-6) var(--space-5) var(--space-5);
}
.hero__line { position: absolute; background: var(--color-brass); }
.hero__line--top { top: 0; left: 0; right: 0; height: 2px; transform-origin: left center; animation: draw-x 900ms var(--ease) 100ms both; }
.hero__line--base { bottom: 0; left: 0; right: 0; height: 2px; transform-origin: left center; animation: draw-x 900ms var(--ease) 700ms both; }
.hero__line--left { top: 0; bottom: 0; left: 0; width: 2px; transform-origin: center top; animation: draw-y 900ms var(--ease) 300ms both; }
.hero__line--right { top: 0; bottom: 0; right: 0; width: 2px; transform-origin: center top; animation: draw-y 900ms var(--ease) 300ms both; }
.hero__roof {
  position: absolute; left: 50%; top: -22px;
  width: 64px; height: 26px; margin-left: -32px;
  fill: none; stroke: var(--color-brass); stroke-width: 3; stroke-linecap: square;
  animation: fade-in 700ms var(--ease) 1000ms both;
}
.hero__welcome {
  font-weight: 400;
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: var(--t-welcome);
  line-height: 1.12;
  color: var(--color-linen);
  text-wrap: balance;
  animation: rise 800ms var(--ease) 200ms both;
}
.hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-5); animation: rise 800ms var(--ease) 350ms both; }
.hero__rating { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--t-small); font-weight: 700; color: var(--color-linen); }
.hero__rating .g-chip__g { width: 20px; height: 20px; padding: 3px; box-sizing: content-box; background: var(--color-white); border-radius: 2px; }

@keyframes hero-settle { from { transform: scale(1.04); } to { transform: none; } }
@keyframes draw-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes draw-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 63.99em) {
  .hero { min-height: calc(100svh - 56px); }
}
@media (max-width: 47.99em) {
  .hero__media::after { height: 48%; }
  .hero__frame { min-height: 0; padding: var(--space-6) var(--space-4) var(--space-4); }
  .hero__act .btn { width: 100%; }
}
@media (min-width: 64em) {
  .hero { min-height: calc(100svh - var(--topbar-h)); }
  .hero__media::after { height: 70%; background: linear-gradient(to top right, color-mix(in srgb, var(--color-forest) 86%, transparent) 0%, color-mix(in srgb, var(--color-forest) 40%, transparent) 40%, transparent 70%); }
  .hero__in { padding-bottom: var(--space-7); }
  .hero__frame { padding: var(--space-7) var(--space-7) var(--space-6); max-width: 40rem; min-height: clamp(20rem, 46svh, 30rem); }
}

/* ─── 2. Introduction ─── */
.intro { background: var(--color-linen); }
.intro__in { display: grid; gap: var(--heading-gap); }
.intro__h { max-width: 18ch; font-family: var(--font-display); font-size: var(--t-h2); line-height: 1.12; color: var(--color-forest); text-wrap: balance; }
.intro__label { margin: var(--space-6) 0 var(--space-3); color: var(--color-brass-deep); }
.intro__areas { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--t-small); font-weight: 600; color: var(--color-forest); }
.intro__areas li:not(:last-child)::after { content: ","; }
.intro__text { color: var(--color-ink); }
.intro__text .lead { color: var(--color-forest); }
@media (min-width: 64em) {
  .intro__in { grid-template-columns: 7fr 5fr; gap: var(--space-9); align-items: end; }
}

/* ─── 3. Our finished homes (signature): the frame opens into the finished house ─── */
.homes { padding-block: 0 var(--section-pad); background: var(--color-linen); }
.homes .gk-gal__head { max-width: calc(var(--page-max) + 2 * var(--gutter)); margin: 0 auto var(--heading-gap); padding-inline: var(--gutter); }
.homes .gk-gal__title { color: var(--color-forest); }
.homes .gk-gal__lead { color: var(--color-ink); max-width: 46ch; }
.homes__lead { padding-inline: var(--gutter); max-width: calc(var(--page-max) + 2 * var(--gutter)); margin-inline: auto; }
.homes__frame { position: relative; aspect-ratio: 4 / 5; --edge: 0px; --sx: 1; --roof: 0; }
.homes__clip { position: absolute; inset: 0; overflow: hidden; }
/* Linen veils either side of the portrait window slide outward as the frame opens (transform only) */
.homes__veil { position: absolute; top: 0; bottom: 0; width: var(--side, 0px); background: color-mix(in srgb, var(--color-linen) 86%, transparent); pointer-events: none; }
.homes__veil--l { left: 0; transform-origin: left center; transform: scaleX(var(--k, 0)); }
.homes__veil--r { right: 0; transform-origin: right center; transform: scaleX(var(--k, 0)); }
.homes__lead-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.homes__lines { position: absolute; inset: 0; pointer-events: none; }
.homes__line { position: absolute; background: var(--color-brass); }
.homes__line--l, .homes__line--r { top: 0; bottom: 0; width: 2px; }
.homes__line--l { left: 0; transform: translateX(var(--edge)); }
.homes__line--r { right: 0; transform: translateX(calc(-1 * var(--edge))); }
.homes__line--t, .homes__line--b { left: 0; right: 0; height: 2px; transform: scaleX(var(--sx)); }
.homes__line--t { top: 0; }
.homes__line--b { bottom: 0; }
/* Once open the brass lines sit back to a quiet inset frame around the photograph */
.homes__frame.is-open .homes__lines { inset: 16px; }
.homes__frame.is-open .homes__line { opacity: 0.85; }
@media (min-width: 64em) {
  .homes__lead { padding-inline: 0; max-width: none; }
  .homes__frame { aspect-ratio: 16 / 7; }
}

.homes__pair { display: grid; gap: var(--card-gap); max-width: calc(var(--page-max) + 2 * var(--gutter)); margin: var(--space-7) auto 0; padding-inline: var(--gutter); }
.homes__fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; outline: 1px solid color-mix(in srgb, var(--color-brass-pale) 90%, transparent); outline-offset: -14px; }
.homes__cap { margin-top: var(--space-3); font-size: var(--t-small); font-weight: 700; color: var(--color-forest); }
@media (min-width: 48em) { .homes__pair { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64em) { .homes__pair { gap: var(--space-6); } .homes__fig img { aspect-ratio: 3 / 4; } .homes__item:last-child { margin-top: var(--space-9); } }
.homes .btn-row { max-width: none; }
.homes .btn-row { margin-top: var(--space-7); }

/* ─── 4. Reviews: a stone field, the summary beside the four reviews ─── */
.reviews { padding-block: var(--section-pad); }
.reviews__lead { margin-top: var(--space-3); margin-bottom: var(--heading-gap); color: var(--color-ink); }

/* ─── 5. Why families build with us: the forest field and the schedule ─── */
.why { background: var(--color-forest); color: var(--color-linen); }
.why .h-bracket { color: var(--color-linen); }
.why__in { display: grid; gap: var(--space-7); }
.why__photo { position: relative; }
.why__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.why__photo::after { content: ""; position: absolute; inset: 14px; border: 1px solid color-mix(in srgb, var(--color-brass) 85%, transparent); pointer-events: none; }
.why__lead { margin-top: var(--space-4); max-width: 46ch; font-size: var(--t-lead); color: color-mix(in srgb, var(--color-linen) 92%, transparent); }
.why__list { display: grid; gap: var(--space-6); margin-top: var(--heading-gap); }
.why__item { display: grid; grid-template-columns: 28px 1fr; column-gap: var(--space-4); }
.why__mark { grid-row: 1 / span 2; width: 28px; height: 28px; margin-top: 0; color: var(--color-brass); stroke-width: 2; }
.why__h { font-size: var(--t-h3); color: var(--color-linen); }
.why__p { margin-top: var(--space-2); max-width: 54ch; color: color-mix(in srgb, var(--color-linen) 88%, transparent); }
.why .btn-row { margin-top: var(--space-7); }
@media (min-width: 64em) {
  .why__in { grid-template-columns: 5fr 7fr; gap: var(--space-9); align-items: start; }
  .why__in { align-items: stretch; }
  .why__photo img { height: 100%; min-height: 32rem; aspect-ratio: auto; }
  .why__list { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); row-gap: var(--space-7); }
  .why__item:first-child { grid-column: 1 / -1; }
}

/* ─── 6. How we build: the numbered track ─── */
.steps { background: var(--color-linen); }
.steps__in { display: grid; gap: var(--space-7); }
.steps__lead { margin-top: var(--space-4); font-size: var(--t-lead); color: var(--color-ink); }
.steps__track { position: relative; padding-left: 0; }
.steps__rail { position: absolute; left: 1.375rem; top: 0.75rem; bottom: 0.75rem; width: 2px; background: var(--color-stone); }
.steps__fill { position: absolute; inset: 0; background: var(--color-brass); transform-origin: center top; transform: scaleY(var(--fill, 1)); }
.steps__list { position: relative; display: grid; gap: var(--space-6); }
.steps__item { display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--space-4); }
.steps__n {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  font-family: var(--font-display); font-size: 1.25rem; line-height: 1;
  background: var(--color-linen); color: var(--color-brass-deep);
  border: 2px solid var(--color-brass);
  transition: background-color 500ms var(--ease), color 500ms var(--ease);
}
.steps__item.is-reached .steps__n { background: var(--color-forest); color: var(--color-linen); border-color: var(--color-forest); }
.steps__h { font-size: var(--t-h3); color: var(--color-forest); padding-top: 0.45rem; }
.steps__body p { margin-top: var(--space-2); max-width: 52ch; }
@media (min-width: 64em) {
  .steps__in { grid-template-columns: 5fr 7fr; gap: var(--space-9); align-items: start; }
  .steps__head { position: sticky; top: calc(var(--header-h) + var(--space-7)); }
  .steps__list { gap: var(--space-7); }
}

/* ─── 7. What we build: one lead card, four smaller; all custom icons ─── */
.svc { background: var(--color-linen); padding-top: 0; }
.svc__head { max-width: 40rem; margin-bottom: var(--heading-gap); }
.svc__lead { margin-top: var(--space-4); font-size: var(--t-lead); }
.svc__grid { display: grid; gap: var(--card-gap); }
.svc__card {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6);
  padding: var(--space-6) var(--space-5);
  background: var(--color-stone);
  color: var(--color-ink);
}
.svc__icon { width: 44px; height: 44px; fill: none; stroke: var(--color-brass-deep); stroke-width: 1.4; stroke-linecap: square; }
.svc__body { display: grid; gap: var(--space-2); justify-items: start; }
.svc__h { color: var(--color-forest); }
.svc__p { max-width: 40ch; }
.svc__link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; margin-top: var(--space-2); font-weight: 700; color: var(--color-forest); text-decoration: none; }
.svc__link span { text-decoration: underline; text-decoration-color: var(--color-brass); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.svc__link .ico { width: 18px; height: 18px; transition: transform 400ms var(--ease); }
.svc__link:hover .ico { transform: translateX(3px); }
.svc__card--lead { background: var(--color-forest); color: var(--color-linen); }
.svc__card--lead .svc__icon { stroke: var(--color-brass); width: 64px; height: 64px; }
.svc__card--lead .svc__h { color: var(--color-linen); font-size: var(--t-h2); }
.svc__card--lead .svc__link { color: var(--color-linen); }
@media (min-width: 48em) {
  .svc__grid { grid-template-columns: repeat(2, 1fr); }
  .svc__card--lead { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
  .svc__grid { grid-template-columns: 4fr 3fr 3fr; }
  .svc__card { padding: var(--space-7) var(--space-6); min-height: 20rem; }
  .svc__card--lead { grid-column: 1; grid-row: 1 / span 2; padding: var(--space-8) var(--space-7); }
}

/* ─── 8. Credentials: a quiet ledger on stone ─── */
.cred { background: var(--color-stone); }
.cred__in { display: grid; gap: var(--space-7); }
.cred__lead { margin-top: var(--space-4); max-width: 36ch; font-size: var(--t-lead); }
.cred__row { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-4); align-items: start; padding-block: var(--space-4); border-bottom: 1px solid color-mix(in srgb, var(--color-forest) 16%, transparent); }
.cred__row:first-child { border-top: 1px solid color-mix(in srgb, var(--color-forest) 16%, transparent); }
.cred__ico { width: 24px; height: 24px; fill: none; stroke: var(--color-brass-deep); stroke-width: 1.6; margin-top: 2px; }
.cred__row--award span { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.3; color: var(--color-forest); }
.cred__row--award { padding-block: var(--space-5); }
@media (min-width: 64em) {
  .cred__in { grid-template-columns: 5fr 7fr; gap: var(--space-9); align-items: start; }
}

/* ─── 9. The ask: its own forest field ─── */
.book { background: var(--color-forest); color: var(--color-linen); }
.book .h-bracket { color: var(--color-linen); }
.book__in { display: grid; gap: var(--space-7); grid-template-areas: "head" "card" "aside"; }
.book__head { grid-area: head; max-width: 36rem; }
.book__lead { margin-top: var(--space-4); font-size: var(--t-lead); color: color-mix(in srgb, var(--color-linen) 92%, transparent); }
.book__rating { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); padding: 8px 12px; border-radius: 2px; background: var(--color-white); color: var(--color-ink); font-weight: 700; font-size: var(--t-small); }
.book__card { grid-area: card; padding: var(--space-6) var(--space-5); background: var(--color-white); color: var(--color-ink); box-shadow: 0 18px 40px -24px rgba(30, 42, 36, 0.22); }
.book__aside { grid-area: aside; }
.book__h { font-family: var(--font-text); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-brass-pale); margin-bottom: var(--space-4); }
.book__contact { display: grid; gap: var(--space-4); margin: 0 0 var(--space-7); }
.book__contact dt { font-size: 0.8125rem; font-weight: 600; color: var(--color-brass-pale); }
.book__contact dd { margin: 0; font-size: var(--t-body); }
.book__contact a { color: var(--color-linen); font-weight: 700; text-decoration: none; }
.book__contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.book__next { max-width: 40ch; color: color-mix(in srgb, var(--color-linen) 92%, transparent); }
@media (min-width: 64em) {
  .book__in { grid-template-columns: 5fr 7fr; grid-template-areas: "head card" "aside card"; column-gap: var(--space-9); row-gap: var(--space-8); align-items: start; }
  .book__card { padding: var(--space-8) var(--space-7); }
}