/* Major Home Remodels page only (major-home-remodels.html). Loaded after styles.css, shared.css and services.css. */

/* ---------- Intro: H3 statement left, the WD Thomas Homes logo right-aligned ---------- */
:root { --rm-intro-pad: calc(var(--gutter) + clamp(48px, 6vw, 96px)); } /* the same space above and below the text as the Custom Homes intro (its section padding plus the framed box's own padding) */
.rm-intro { padding-block: var(--rm-intro-pad) 0; }
.rm-intro__grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(32px, 6vw, 112px); align-items: center; }
.rm-intro__copy h3 { line-height: 1.3; max-width: 686px; }
.rm-intro__logo { justify-self: end; }
.rm-intro__logo img { height: clamp(120px, 11vw, 176px); width: auto; }
.rm-divider { height: 1px; background: var(--accent); margin-top: var(--rm-intro-pad); } /* full section width, inside the page gutters */
@media (max-width: 900px) {
  .rm-intro__grid { grid-template-columns: 1fr; gap: 28px; }
  .rm-intro__logo { display: none; } /* the logo only shows beside the text on larger screens */
}

/* ---------- How We Approach It: four cards that stack on top of each other as you scroll ---------- */
.rm-approach { padding-top: var(--rm-intro-pad); }
.rm-stack { display: block; }
.rm-card {
  position: sticky; top: calc(100px + var(--i) * 22px); /* each card parks a little lower, so the ones underneath peek out above it */
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--gap) * 3); align-items: stretch;
  min-height: clamp(380px, 32vw, 500px);
  padding: calc(var(--gap) * 2.5);
  background: var(--bg); color: var(--secondary); border: 1px solid var(--accent);
  margin-bottom: clamp(32px, 6vw, 96px);
}
.rm-card:last-child { margin-bottom: 0; }
.rm-card__copy { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.rm-card__copy h3 { margin-bottom: 18px; }
.rm-card__copy p { max-width: 520px; opacity: .88; }
.rm-card__img { position: relative; overflow: hidden; min-height: 220px; }
.rm-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.rm-card:hover .rm-card__img img { transform: scale(1.05); }
@media (max-width: 900px) {
  .rm-card { grid-template-columns: 1fr; gap: var(--gap); min-height: 0; top: calc(84px + var(--i) * 14px); padding: calc(var(--gap) * 1.5); margin-bottom: 40px; }
  .rm-card__img { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
  .rm-card__copy { gap: 16px; }
}

/* ---------- What We Do: pick a project type and the photo behind it changes ---------- */
.rm-do { position: relative; background: var(--secondary); color: var(--white); overflow: hidden; }
.rm-do__bg { position: absolute; inset: 0; }
.rm-do__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .9s var(--ease), transform 1.8s var(--ease); }
.rm-do__bg img.is-active { opacity: 1; transform: none; }
.rm-do__bg::after { content: ""; position: absolute; inset: 0; background: rgba(10, 8, 9, .72); }
.rm-do .wrap { position: relative; z-index: 1; }
.rm-do__lead { max-width: 560px; margin-top: 16px; opacity: .9; }
.rm-do__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 112px); align-items: stretch; }
.rm-do__tabs { display: flex; flex-direction: column; }
.rm-do__tab {
  display: flex; align-items: center; gap: 14px; text-align: left;
  font-family: var(--font-head); font-size: var(--fs-h3); line-height: 1.2; color: rgba(255, 255, 255, .5);
  padding-block: 14px; border-top: 1px solid rgba(255, 255, 255, .14);
  transition: color .4s var(--ease), padding-left .4s var(--ease);
}
.rm-do__tab:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.rm-do__tab::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;
  margin-left: -23px; opacity: 0; transition: opacity .4s var(--ease), margin-left .4s var(--ease); /* chevron slides in beside the active project type */
}
.rm-do__tab:hover { color: var(--white); }
.rm-do__tab.is-active { color: var(--white); }
.rm-do__tab.is-active::before { margin-left: 0; opacity: 1; }
.rm-do__box { /* fixed dark container: only the text inside changes, so nothing shifts when you pick a project type */
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: calc(var(--gap) * 2.5); background: var(--secondary); border: 1px solid var(--accent);
}
.rm-do__panels { display: grid; }
.rm-do__desc { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s; }
.rm-do__desc.is-active { opacity: 1; visibility: visible; transform: none; }
.rm-do__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 16px; }
.rm-do__top .label { flex: none; margin-left: auto; text-align: right; }
.rm-do__desc p { opacity: .92; }
@media (max-width: 900px) {
  .rm-do__grid { grid-template-columns: 1fr; align-items: start; min-height: 0; }
  .rm-do__box { padding: calc(var(--gap) * 2); }
}

/* ---------- Why Us: a draggable slider of cards, with a progress line underneath ---------- */
.rm-why__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--gap); margin-bottom: clamp(32px, 4vw, 56px); }
.rm-why__head h2 { margin-top: 14px; }
.rm-why__nav { display: flex; gap: 12px; }
.rm-why__track {
  display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); /* the row bleeds to the screen edges while the first card lines up with the page gutter */
}
.rm-why__track::-webkit-scrollbar { display: none; }
.rm-why__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.rm-wcard {
  flex: 0 0 clamp(280px, 30vw, 460px); scroll-snap-align: start;
  min-height: clamp(300px, 24vw, 400px); padding: calc(var(--gap) * 2);
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  background: var(--bg); color: var(--secondary); border: 1px solid var(--accent);
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
.rm-wcard:hover { background: var(--secondary); color: var(--white); }
.rm-wcard > div { display: grid; grid-template-rows: calc(var(--fs-h3) * 1.2 * 2 + 14px) auto; } /* fixed two-line heading slot, so every card's heading and text start on the same lines */
.rm-wcard h3 { margin-bottom: 0; align-self: start; }
.rm-wcard p { opacity: .88; min-height: calc(1em * 1.7 * 5); }
.rm-why__bar { position: relative; height: 1px; margin-top: clamp(24px, 3vw, 40px); background: rgba(153, 132, 120, .3); }
.rm-why__bar span { position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--accent); }

/* ---------- Is This Right for You: three talking points, titles and text lined up across, an accent line under each ---------- */
.rm-fit { background: var(--secondary); color: var(--white); }
.rm-fit__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr; /* two shared rows: all three titles sit on one row and all three paragraphs on the next */
  column-gap: clamp(32px, 4vw, 72px);
}
.rm-point { text-align: center; position: relative; display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 18px; padding-bottom: clamp(24px, 3vw, 40px); }
.rm-point::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease) .3s; }
.rm-point.is-in::after { transform: none; }
.rm-point h3 { align-self: start; }
.rm-point p { opacity: .88; }
@media (max-width: 900px) {
  .rm-fit__grid { display: block; }
  .rm-point { display: block; margin-bottom: 40px; }
  .rm-point:last-child { margin-bottom: 0; }
  .rm-point h3 { margin-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .rm-do__bg img, .rm-do__tab, .rm-do__tab::before, .rm-do__desc, .rm-wcard, .rm-point::after, .rm-card__img img { transition: none; }
}

/* What We Do backgrounds: keep the focal point of the two tall photos in the wide frame */
.rm-do__bg img:nth-child(3) { object-position: 50% 55%; }
.rm-do__bg img:nth-child(5) { object-position: 50% 33%; }
.rm-card:nth-child(1) .rm-card__img img { object-position: 50% 50%; }