/* Homepage-only styles (index.html). Loaded after styles.css and shared.css so index-2.html is unaffected.
   Footer, certifications, slider arrows, chevron mark and the header row now live in shared.css. */

/* ---------- Hero parallax ---------- */
/* Background is oversized so js/home.js can slide it without exposing edges */
.hero--parallax .hero__bg { inset: -20% 0; height: 140%; will-change: transform; }

/* ---------- About: accent stroke around the copy column ---------- */
/* Fills its column edge to edge and matches the image height */
.about .split { gap: var(--gap); align-items: stretch; }
.about__copy {
  max-width: none;
  border: 1px solid var(--accent);
  padding: var(--gutter);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.about__copy .btn { margin-top: 32px; }
/* Side by side: the image takes its height from the copy column. Its 1/1 ratio would otherwise grow the track wider than 1fr and run under the copy */
@media (min-width: 901px) {
  .about .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .about__img { position: relative; aspect-ratio: auto; min-width: 0; }
  .about__img::before { content: ""; display: block; padding-top: 100%; } /* keeps the square as the minimum height; the copy can still make it taller */
  .about__img img { position: absolute; inset: 0; }
}

/* ---------- Affiliations strip under the hero: logos straight on the page, label underneath; a slow marquee below 1100px wide ---------- */
.affil { background: var(--secondary); color: var(--white); padding-block: clamp(32px, 3.4vw, 48px); }
.affil__group { --affil-gap: clamp(20px, 3vw, 56px); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--affil-gap); max-width: 1480px; margin-inline: auto; }
.affil__group[aria-hidden="true"] { display: none; } /* the second copy only exists for the looping marquee */
.affil__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; flex: 1 1 0; min-width: 0; }
.affil__logo { height: 72px; display: flex; align-items: center; justify-content: center; }
.affil__logo img { height: 72px; width: auto; max-width: none; }
.affil__logo--wide img { height: auto; width: clamp(150px, 14vw, 200px); } /* the Christian City wordmark is far wider than the other logos */
.affil__item .label { white-space: nowrap; color: var(--white); } /* every label stays on one line, in white */
@media (min-width: 1101px) { /* faint divider between neighbouring logos, centred in the gap between them (desktop row only, not the marquee) */
  .affil__item { position: relative; }
  .affil__item + .affil__item::before { content: ""; position: absolute; left: calc(var(--affil-gap) / -2); top: 4px; bottom: 4px; width: 1px; background: color-mix(in srgb, var(--accent) 22%, transparent); }
}
@media (max-width: 1100px) { /* too narrow for five one-line labels side by side, so it becomes a marquee */
  .affil { padding-block: 40px; }
  .affil__viewport { overflow: hidden; margin-inline: calc(var(--gutter) * -1); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .affil__track { display: flex; width: max-content; animation: affil-scroll 36s linear infinite; will-change: transform; }
  .affil__group, .affil__group[aria-hidden="true"] { display: flex; flex: none; justify-content: flex-start; gap: 0; max-width: none; margin: 0; }
  .affil__item { flex: none; width: 168px; margin-right: 32px; } /* spacing is margin, not gap, so the two copies are exactly the same width and the loop restarts without a jump */
  .affil__logo, .affil__logo img { height: 56px; }
  .affil__logo--wide img { height: auto; width: 150px; }
}
@keyframes affil-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .affil__track { animation: none; }
  @media (max-width: 1100px) { .affil__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .affil__group[aria-hidden="true"] { display: none; } }
}
}



/* ---------- Why Us cards: dark title block, full-width accent divider, white body block ---------- */
.why-card::before { content: none; }
.why-card { padding: 0; justify-content: flex-start; align-items: stretch; }
.why-card h3 { background: var(--secondary); color: var(--white); padding: var(--gap) calc(var(--gap) * 2); }
.why-card .rule { width: 100%; height: 1px; margin: 0; }
.why-card p { flex: 1; padding: calc(var(--gap) * 2); }
.why-card h3 { transition: background .3s var(--ease); }
.why-card:hover h3 { background: var(--accent); }
.why-card { background: transparent; }
.why-card p { border: 1px solid var(--accent); border-top: 0; }

/* ---------- Why Us (alt layout): full-width rows split by straight accent lines, image alternates sides ---------- */
/* Original cards version (#why-us) is kept in index.html as a backup, hidden. Delete this rule to bring it back. */
#why-us { display: none; }
.why-alt { padding-top: 0; }
.why-rows { border-bottom: 1px solid var(--accent); }
.why-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "head body img";
  column-gap: clamp(24px, 4vw, 80px);
  align-items: center;
  border-top: 1px solid var(--accent);
}
.why-row--flip { grid-template-areas: "img body head"; }
.why-row__head { grid-area: head; padding-block: clamp(32px, 4vw, 64px); }
.why-row__body { grid-area: body; padding-block: clamp(32px, 4vw, 64px); }
.why-row__img { grid-area: img; align-self: stretch; min-height: clamp(220px, 20vw, 360px); overflow: hidden; }
.why-row__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .why-row, .why-row--flip { grid-template-columns: 1fr; grid-template-areas: "head" "body" "img"; }
  .why-row__head { padding-bottom: 0; }
  .why-row__body { padding-bottom: var(--gap); }
  .why-row__img { min-height: 0; aspect-ratio: 4 / 3; }
}

/* ---------- Custom Homes list: tapered chevron (from the logo's accent point) in place of square bullets ---------- */
.ticks li::before {
  width: 9px; height: 12px; transform: none;
  -webkit-mask: var(--chevron) center / contain no-repeat;
  mask: var(--chevron) center / contain no-repeat;
}

/* ---------- Custom Homes: right image bleeds to the section's top, bottom and right edges ---------- */
/* The image cell stays in the grid (same aspect ratio), so the left column's size and position don't change. */
@media (min-width: 901px) {
  .build .wrap { position: static; }
  .build__copy { position: relative; z-index: 1; }
  .build__img { overflow: visible; }
  .build__img.reveal { transform: none; }
  .build__img .zoom-frame {
    position: absolute; z-index: 1;
    top: 0; bottom: 0; right: 0;
    width: calc(50% - clamp(32px, 6vw, 112px) / 2); height: 100%;
  }
}
.ticks li:first-child { border-top: 0; }
.ticks li:last-child { border-bottom: 0; }

/* ---------- Full-width CTA bar: edge-to-edge accent button directly under Custom Homes ---------- */

/* ---------- Featured projects: no white fill, accent stroke around the detail bar ---------- */
.project { background: transparent; }
.project__bar { border: 1px solid var(--accent); border-top: 0; }

/* ---------- Process: sticky left intro, steps stacked in the right column, all left-aligned ---------- */
.process__layout { align-items: stretch; }
.process__sticky { position: sticky; top: var(--section-y); }
.process__sticky .btn { margin-top: 32px; }
.process__steps { display: flex; flex-direction: column; }
.step { text-align: left; padding-block: calc(var(--section-y) / 2); }
.step:first-child { padding-top: 8px; }
.step:last-child { padding-bottom: 0; }
.step + .step { border-top: 1px solid var(--accent); }
.step .rule { display: none; }
.step p { margin-top: 20px; }
@media (max-width: 900px) {
  .process__sticky { position: static; }
}

/* Process: oversized logo mark behind both columns (accent chevron + W), 4% opacity, full width, centered, bottom-aligned and nudged down so the bottom clips a little */
.process { position: relative; }
.process .wrap { position: static; }
.process__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } /* clip here, not on the section, so the sticky column keeps working */
.process__mark { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 100%; transform: translateY(18%) scale(1.15); opacity: .04; }
/* Phones: the section is tall and narrow, so a full-width mark is tiny. Make it wider than the screen (sides clip), still centered and sitting on the bottom */
@media (max-width: 768px) { .process__mark { left: -70%; width: 240%; opacity: .08; } }
.mark__accent { fill: var(--accent); }
.mark__light { fill: var(--secondary); }
.process__layout { position: relative; z-index: 1; }

/* ---------- Where We Build: list left, image right (desktop), no outer dividers on the county list ---------- */
@media (min-width: 901px) { .where__img { order: 2; } }
.areas li:first-child { border-top: 0; }
.areas li:last-child { border-bottom: 0; }
.areas li { justify-content: flex-start; align-items: center; gap: 14px; }
.areas li::before {
  content: ""; flex: none; width: 9px; height: 12px; background: var(--accent);
  -webkit-mask: var(--chevron) center / contain no-repeat;
  mask: var(--chevron) center / contain no-repeat;
}

/* ---------- Where We Build: right image bleeds to the section's top, bottom and right edges ---------- */
/* The image cell stays in the grid (same min-height), so the left column's size and position don't change. */
@media (min-width: 901px) {
  .where { position: relative; }
  .where .wrap { position: static; }
  .where__img { overflow: visible; }
  .where__img.reveal { transform: none; }
  .where__img .zoom-frame {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: calc(50% - clamp(32px, 5vw, 96px) / 2); height: 100%;
  }
}

/* ---------- Testimonials: 3 cards visible, slider shifts one card at a time ---------- */
.tst { max-width: none; }
.tst__viewport { overflow: hidden; }
.tst__stage { display: flex; gap: var(--gap); transition: transform .6s var(--ease); will-change: transform; }
.tst__slide { flex: 0 0 calc((100% - 2 * var(--gap)) / 3); grid-area: auto; opacity: 1; visibility: visible; display: flex; flex-direction: column; }
.tst__body { flex: 1; border: 1px solid var(--accent); padding: calc(var(--gap) * 2); }
.tst__body .stars { margin-bottom: 20px; }
.tst__quote { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.7; }
.tst__name { margin-top: 0; background: var(--secondary); color: var(--white); padding: calc(var(--gap) / 2) calc(var(--gap) * 2); }
@media (max-width: 900px) { .tst__slide { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .tst__stage { transition: none; } }

/* Testimonial arrows: square, unfilled, accent stroke and long accent arrows, no counter */
.tst__count { display: none; }

/* Testimonial client name: deliberate exception to the style guide. Header font in Title Case at the existing 14px label size. */
.tst__name { font-family: var(--font-head); text-transform: none; }

/* Original 3-card testimonial slider (#testimonials) is kept in index.html as a backup, hidden. Delete this rule to bring it back. */
#testimonials { display: none; }

/* ---------- Testimonials (alt layout): title block (eyebrow over H2) left, arrows right; statement (40%) | divider | review (60%) ---------- */
.rev-alt { padding-bottom: 0; }
.rev-alt .wrap { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: clamp(40px, 6vw, 96px); } /* title left, arrows right; the review block spans both */
.rev__head { grid-column: 1; margin-bottom: 0; }
.rev__title { text-align: left; }
.rev__title h2 { margin-top: 14px; }
.rev__nav { grid-column: 2; grid-row: 1; display: flex; justify-content: flex-end; gap: var(--gap); }
.rev__nav[hidden] { display: none; } /* a single review needs no arrows */
.rev { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 3fr; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
/* statement is vertically centered in its column and left-aligned, flush with the section's left edge */
.rev__lead { display: flex; align-items: center; justify-content: flex-start; padding: clamp(40px, 5vw, 88px) clamp(12px, 1.5vw, 32px) clamp(40px, 5vw, 88px) 0; }
.rev__lead span { display: block; text-align: left; }
@media (min-width: 1200px) { .rev__lead span { white-space: nowrap; } } /* keep the three set lines intact in the 40% column */
.rev__stage { display: grid; border-left: 1px solid var(--accent); }
.rev__slide {
  grid-area: 1 / 1; margin: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: clamp(40px, 5vw, 88px) clamp(24px, 4vw, 80px);
  opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility .7s;
}
.rev__slide.is-active { opacity: 1; visibility: visible; }
.rev__slide blockquote { margin: 0; }
.rev__slide blockquote p { margin: 0; max-width: 620px; }
.rev__who { display: flex; flex-direction: column; align-items: flex-start; margin-top: 28px; }
.rev__slide .stars { justify-content: flex-start; margin: 0 0 20px; }
.rev__name { font-family: var(--font-head); font-size: var(--fs-body); line-height: 1.3; }
.rev__who .label { margin-top: 4px; }
@media (max-width: 900px) {
  /* mobile: title, review, then the arrows last */
  .rev-alt .wrap { grid-template-columns: 1fr; row-gap: 32px; }
  .rev__title { margin-bottom: 8px; }
  .rev__nav { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .rev { grid-template-columns: 1fr; }
  .rev__lead { justify-content: flex-start; padding: 32px 0; } /* equal space above and below, so the statement sits centered between the two lines */
  .rev__stage { border-left: 0; border-top: 1px solid var(--accent); }
  .rev__slide { padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) { .rev__slide { transition: none; } }


/* Where We Build photo: if the frame ever crops vertically, keep the bottom (the cul-de-sac) in view */
.where__img img { object-position: 50% 100%; }

/* FAQ on phones: photo first, then the questions */
@media (max-width: 900px) { .faq .split .faq__img { order: -1; } }

/* ---------- Image hover zoom: About, Why Us rows, Custom Homes, Where We Build, FAQ ---------- */
/* .zoom-frame clips the zoom on the two bleed images, where the cell itself is overflow: visible on desktop. */
.zoom-frame { width: 100%; height: 100%; overflow: hidden; }
.about__img img, .why-row__img img, .build__img img, .where__img img, .faq__img img { transition: transform 1.2s var(--ease); }
.about__img:hover img, .why-row__img:hover img, .build__img .zoom-frame:hover img, .where__img .zoom-frame:hover img, .faq__img:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .about__img img, .why-row__img img, .build__img img, .where__img img, .faq__img img { transition: none; }
}

/* Homepage FAQ headshot: the photo fills the frame without setting its height (the frame stays as tall as the questions box), cropped toward the top so his head stays well inside it */
.faq__img { position: relative; }
.faq__img img { position: absolute; inset: 0; object-position: 50% 55%; }

/* Why Build, first row: both faces of the kitchen conversation stay inside the frame */
.why-row:first-child .why-row__img img { object-position: 56% 50%; }