/* Custom Homes page only (custom-homes.html). Loaded after styles.css and shared.css. */

/* ---------- Statement: two lines of H3 ---------- */
.statement { text-align: center; padding-block: var(--gutter); } /* space outside the stroke matches the side gutter */
.statement h3 { line-height: 1.3; }
@media (max-width: 768px) { .statement h3 br { display: none; } }

/* The accent stroke around the statement is the shared .draw-frame (shared.css) */
.statement__frame { padding: clamp(48px, 6vw, 96px) clamp(24px, 4vw, 80px); }

/* ---------- What goes into every home: photo behind, header row, one grid of six cards; hover fades a card to dark with an accent stroke ---------- */
.every { position: relative; background: var(--secondary); color: var(--white); overflow: hidden; }
.every__bg { position: absolute; inset: 0; }
.every__bg img { width: 100%; height: 100%; object-fit: cover; }
.every__bg::after { content: ""; position: absolute; inset: 0; background: rgba(10,8,9,.8); }
.every .wrap { position: relative; z-index: 1; }
.every__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--gap); margin-bottom: clamp(40px, 5vw, 80px); }
.every__head h2 { margin-top: 14px; }
.every__head p { max-width: 460px; opacity: .88; }
.every__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.ecard {
  background: var(--bg); color: var(--secondary);
  border: 1px solid transparent; /* the accent stroke fades in on hover */
  padding: calc(var(--gap) * 2);
  min-height: clamp(240px, 22vw, 320px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), opacity .9s var(--ease), transform .9s var(--ease); /* opacity + transform keep the .reveal fade-in */
}
.ecard h4 { display: flex; align-items: flex-start; gap: 14px; }
.ecard h4::before { /* the logo's chevron beside the title, centered on the first line */
  content: ""; flex: none; width: 9px; height: 12px; margin-top: calc((1.2em - 12px) / 2); background: var(--accent);
  -webkit-mask: var(--chevron) center / contain no-repeat;
  mask: var(--chevron) center / contain no-repeat;
}
.ecard:hover { background: var(--secondary); color: var(--white); border-color: var(--accent); }
@media (max-width: 900px) { .every__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; } } /* every card in a row (or the single column) is the same height */
@media (max-width: 600px) {
  .every__grid { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  .ecard { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .ecard { transition: none; } }

/* ---------- Client-first approach: one stroked 3 x 2 grid, hairlines touching; hover turns a cell dark and dims the rest ---------- */
.approach { padding-top: var(--section-y); }
.agrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--accent); border: 1px solid var(--accent); /* the grid's background shows through the 1px gaps as the divider lines */
}
.acell {
  background: var(--bg);
  padding: calc(var(--gap) * 2);
  min-height: clamp(240px, 24vw, 360px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.acell > * { transition: opacity .4s var(--ease); }
.agrid:hover .acell > * { opacity: .5; }
.agrid .acell:hover > * { opacity: 1; }
.acell:hover { background: var(--secondary); color: var(--white); }
@media (max-width: 900px) { .agrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .agrid { grid-template-columns: 1fr; } .acell { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .acell, .acell > * { transition: none; } }

/* ---------- Client-first approach, option B: six panels in a row, one open at a time; hover or arrow keys open another and the rest narrow smoothly ---------- */
.apanels { --abody: clamp(280px, 28vw, 460px); display: flex; gap: var(--gap); height: clamp(420px, 36vw, 540px); }
.apanel {
  position: relative; overflow: hidden; cursor: pointer;
  flex: 1 1 0; min-width: 0;
  background: var(--bg); color: var(--secondary);
  border: 1px solid var(--accent);
  padding: calc(var(--gap) * 1.5);
  display: flex; flex-direction: column; justify-content: space-between;
  transition: flex-grow .8s var(--ease), background-color .6s var(--ease), color .6s var(--ease), opacity .9s var(--ease), transform .9s var(--ease); /* opacity + transform keep the .reveal fade-in */
  outline-offset: 3px;
}
.apanel.is-active { flex-grow: 6; background: var(--secondary); color: var(--white); cursor: default; }
.apanel .label { color: var(--accent); }
.apanel__v { /* the closed panel's title, reading bottom to top */
  font-family: var(--font-head); font-size: var(--fs-h4); line-height: 1.2;
  writing-mode: vertical-rl; transform: rotate(180deg); align-self: flex-start; white-space: nowrap;
  transition: opacity .4s var(--ease);
}
.apanel.is-active .apanel__v { opacity: 0; }
.apanel__body {
  position: absolute; left: calc(var(--gap) * 1.5); bottom: calc(var(--gap) * 1.5); width: var(--abody);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
}
.apanel__body p { margin-top: 14px; opacity: .85; }
.apanel.is-active .apanel__body { opacity: 1; pointer-events: auto; transition: opacity .5s var(--ease) .3s; } /* fades in once the panel has mostly opened */
@media (max-width: 1000px) { /* phones and tablets: side-by-side panels get too narrow to hold the text */
  /* Stacked rows. The block sticks to the screen while the page scrolls through the track, and scroll progress picks the open row (see main.js), so every row gets the same amount of scrolling */
  .apanels-track { height: 330svh; }
  .apanels { position: sticky; top: 96px; flex-direction: column; height: auto; min-height: calc(100svh - 96px - var(--gap)); } /* fills the screen below the header, so there's never an empty gap under the rows */
  .apanel { flex: 1 1 0; /* closed rows are all the same height, sharing the spare room; number then title, both on the left */ padding: var(--gap); flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: baseline; align-content: center; column-gap: var(--gap); transition: flex-grow .6s var(--ease), background-color .6s var(--ease), color .6s var(--ease), opacity .9s var(--ease), transform .9s var(--ease); }
  .apanel.is-active { flex: 0 0 auto; } /* the open row is only as tall as its text, so there's no empty dark space inside it */
  .apanel__v { writing-mode: horizontal-tb; transform: none; align-self: auto; white-space: normal; }
  .apanel.is-active .apanel__v { opacity: 1; }
  .apanel__body { position: static; flex-basis: 100%; width: auto; display: grid; grid-template-rows: 0fr; opacity: 1; transition: grid-template-rows .6s var(--ease), padding-top .6s var(--ease); }
  .apanel__body > * { overflow: hidden; min-height: 0; }
  .apanel__body p { margin-top: 0; }
  .apanel__body h3 { display: none; }
  .apanel.is-active .apanel__body { grid-template-rows: 1fr; padding-top: 14px; transition: grid-template-rows .6s var(--ease), padding-top .6s var(--ease); }
}
@media (prefers-reduced-motion: reduce) { .apanel, .apanel__v, .apanel__body { transition: none; } }

/* ---------- Common questions: dark, centered header, then photo left / three questions right; the photo is exactly as tall as the questions ---------- */
.cq { position: relative; background: var(--secondary); color: var(--white); overflow: hidden; }
/* Oversized logo mark behind the section (same placement as the home page Process mark: centered, bottom-aligned, nudged down so the bottom clips and the top doesn't); light parts are white here since the section is dark */
.cq__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cq__mark { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 100%; transform: translateY(18%) scale(1.15); opacity: .06; }
/* Phones: the section is tall and narrow, so a full-width mark would be tiny. Make it wider than the screen (sides clip), still centered and sitting on the bottom */
@media (max-width: 768px) { .cq__mark { left: -70%; width: 240%; opacity: .07; } }
.cq__mark-accent { fill: var(--accent); }
.cq__mark-light { fill: var(--white); }
.cq .wrap { position: relative; z-index: 1; }
.cq__grid { display: grid; grid-template-columns: 5.6fr 6.4fr; gap: var(--gap); align-items: stretch; }
.cq__img { position: relative; overflow: hidden; }
.cq__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transition: transform 1.2s var(--ease); } /* keeps the people in the conversation inside the frame */
.cq__img:hover img { transform: scale(1.06); } /* soft zoom inside the frame */
.cq__list { display: flex; flex-direction: column; gap: var(--gap); }
.cq__item { background: var(--secondary); border: 1px solid var(--accent); padding: calc(var(--gap) * 2); }
.cq__item h4 { transition: color .5s var(--ease); }
.cq__item:hover h4 { color: var(--accent); }
.cq__item p { margin-top: 12px; opacity: .85; max-width: 680px; }
@media (max-width: 900px) {
  .cq__grid { grid-template-columns: 1fr; }
  .cq__img { aspect-ratio: 4 / 3; }
}

/* ---------- Is this right for you: header, one tall photo, three cards overlapping its bottom edge by half ---------- */
.fit { padding-bottom: 0; --ov: clamp(80px, 9vw, 150px); }
.fit__lead { max-width: 640px; margin: 20px auto 0; }
.fit__img { position: relative; height: clamp(420px, 44vw, 680px); overflow: hidden; }
.fit__img img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; will-change: transform; } /* a little taller than the frame so it can drift (parallax, see main.js) */
.fit__cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: calc(var(--ov) * -1); padding-inline: calc(var(--gap) * 2); }
.fcard {
  background: var(--bg); /* same as the page; the shadow only appears on hover */
  border: 1px solid var(--accent);
  padding: calc(var(--gap) * 2);
  min-height: calc(var(--ov) * 2); /* so the overlap is half of the card */
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  transition: opacity .9s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease); /* keeps the .reveal fade-in while adding the lift */
}
.fcard:hover { transform: translateY(-8px); box-shadow: 0 18px 36px rgba(34, 30, 31, .18); } /* soft shadow, card lifts a touch */
@media (max-width: 900px) {
  .fit { --ov: 56px; }
  .fit__cards { grid-template-columns: 1fr; grid-auto-rows: 1fr; padding-inline: 0; } /* same width as the FAQ box below; all three cards the same height */
  .fcard { min-height: 0; }
  .fit__img { margin-inline: calc(var(--gutter) * -1); } /* photo runs edge to edge */
}

/* ---------- FAQ photo: soft zoom inside the frame on hover ---------- */
.faq__img img { transition: transform 1.2s var(--ease); }
.faq__img:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .faq__img img, .cq__img img, .cq__item h4 { transition: none; } }

/* ---------- Phones ---------- */
.br-m { display: none; }
@media (max-width: 768px) {
  .br-m { display: inline; }
}
/* FAQ on stacked layouts: photo first, then the questions */
@media (max-width: 900px) { .faq .split .faq__img { order: -1; } }