/* Styles shared by every page that uses the new design (index.html, about.html, and the pages to come).
   Loaded after styles.css. index-2.html (the backup) loads only styles.css, so it is unaffected. */

/* Chevron mark as an inline data URI (same shape as images/chevron.svg). Chrome blocks CSS masks loaded from file:// URLs, so this keeps them working when opened locally too. */
:root { --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M1 0 11 8 1 16 6 8Z'/%3E%3C/svg%3E"); }

/* ---------- Section header row: eyebrow + H2 left, button fully right on the same row ---------- */
.why__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--gap); text-align: left; }

/* ---------- Arrow buttons (slider nav): square, unfilled, accent stroke and long accent arrows ---------- */
.tst__btn { background: transparent; color: var(--accent); border: 1px solid var(--accent); width: 52px; height: 52px; }
.tst__btn svg { width: 24px; height: 16px; stroke-width: 1.5; }
.tst__btn:hover { background: var(--accent); color: var(--white); }

/* ---------- Certifications (footer): small white/colour logos straight on the dark panel, left-aligned, one shared logo height ---------- */
.foot__certs { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: var(--gap) var(--gutter); }
.cert { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.cert__logo { height: 72px; flex: none; display: flex; align-items: center; justify-content: center; }
.cert__logo img { height: 72px; width: auto; max-width: none; display: block; }
.foot__certs .label { margin: 0; font-size: 8px; color: var(--white); } /* requested exception to the label size scale; same on mobile */
.cert__br { display: none; }
.footer .foot__certs .cert { margin-top: 0; } /* cancels the generic `.footer li + li` stagger so all three line up */

/* ---------- Footer: two touching square panels (brand + links), no radius, full-bleed with no backdrop ---------- */
.footer--split { padding: 0; }
.footer--split .wrap { max-width: none; padding-inline: 0; } /* panels run edge to edge; their own padding keeps text on the page gutter */
.foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); }
.foot__brand {
  background: var(--bg); color: var(--secondary); padding: var(--gutter);
  border-right: 4px solid var(--accent); /* divider between the two panels */
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
}
.foot__tag { margin-top: 32px; color: var(--secondary); text-align: left; }
.foot__follow { display: flex; align-items: center; gap: 4px; padding-bottom: calc(var(--gap) / 2); border-bottom: 1px solid var(--accent); } /* underline spans the label and both icons */
.footer .foot__follow .label { margin: 0 auto 0 0; display: inline-flex; align-items: center; gap: 14px; }
.foot__follow .label::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;
}
.foot__icon {
  width: 28px; height: 28px; display: grid; place-items: center; opacity: 1;
  color: var(--accent);
  transition: color .3s var(--ease);
}
.foot__icon svg { width: 18px; height: 18px; fill: currentColor; }
.footer .foot__icon:hover { color: var(--secondary); }
.foot__main {
  background: var(--secondary); padding: var(--gutter);
  display: flex; flex-direction: column; justify-content: space-between; gap: 56px;
}
.foot__cols { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: var(--gutter); }
.foot__bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--gap);
  padding-top: var(--gap); border-top: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
  font-size: var(--fs-eyebrow); opacity: .85;
}
.foot__bar .btn { opacity: 1; }
@media (max-width: 900px) {
  .foot { grid-template-columns: 1fr; }
  .foot__brand { border-right: 0; border-bottom: 4px solid var(--accent); }
  .foot__cols { grid-template-columns: 1fr 1fr; justify-content: start; }
}
@media (max-width: 520px) { .foot__cols { grid-template-columns: 1fr; } }
.footer .foot__bar .btn:hover { background: var(--white); border-color: var(--white); color: var(--secondary); }
.footer .footer__logo, .footer .footer__logo:hover { opacity: 1; transition: none; }
.foot__bio { margin-top: 20px; max-width: 420px; }

.foot__legal { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.foot__links { display: flex; gap: 10px; }
/* Legal links at full opacity; the copyright line keeps its slight dimming */
.foot__bar { opacity: 1; }
.foot__legal > span { opacity: .85; }
.foot__credit a { text-decoration: none; opacity: 1; } /* no underline, and the same shade as the text around it (the generic footer link fade would otherwise stack on top of the line's own) */
.footer .foot__links a { opacity: 1; }
.foot__links span { opacity: 1; }

/* ---------- Inner-page hero: short banner, photo behind, H1 bottom-left ---------- */
.page-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(380px, 38vw, 540px); color: var(--white); overflow: hidden; background: var(--secondary); } /* dark until the photo paints, so a page fading in never flashes light */
.page-hero__bg, .page-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(20,17,18,.6), rgba(20,17,18,.3) 45%, rgba(20,17,18,.6)); } /* dark at the top keeps the transparent nav legible, dark at the bottom backs the H1 */
.page-hero .wrap { position: relative; z-index: 1; padding-bottom: clamp(32px, 4vw, 64px); }

/* Parallax variant: the photo is oversized so js/main.js can slide it without exposing edges */
.page-hero--parallax .page-hero__bg { inset: -20% 0; height: 140%; will-change: transform; }

/* ---------- FAQ chevron icon: the logo mark, points right when closed and down when open ---------- */
.faq-item__icon {
  width: 9px; height: 12px; background: var(--accent);
  -webkit-mask: var(--chevron) center / contain no-repeat;
  mask: var(--chevron) center / contain no-repeat;
  transition: transform .4s var(--ease);
}
.faq-item__icon::before, .faq-item__icon::after { content: none; }
.faq-item.is-open .faq-item__icon { transform: rotate(90deg); } /* points down when open */
/* The question fades to the accent color on hover and stays accent while its answer is open */
.faq-item__q { transition: color .4s var(--ease); }
.faq-item__q:hover, .faq-item.is-open .faq-item__q { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .faq-item__q { transition: none; } }

/* ---------- FAQ (framed): accent stroke around the question column, image beside it, no outer dividers ---------- */
.faq .split { gap: var(--gap); }
.faq__copy { border: 1px solid var(--accent); padding: calc(var(--gutter) + 24px) var(--gutter) var(--gutter); } /* extra top padding matches the last question's own 24px, so top and bottom gaps look equal */
.faq__list { border-bottom: 0; }
.faq-item:first-child { border-top: 0; }

/* ---------- Smooth scroll (Lenis, see js/main.js): the library's own rules, minus its iframe lock ---------- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }

/* Embedded map: inert until clicked so it never traps the page scroll */
.map iframe { pointer-events: none; }
.map.is-active iframe { pointer-events: auto; }

/* ---------- Tag: small stroked category label (blog) ---------- */
.tag {
  display: inline-block; padding: 7px 14px;
  border: 1px solid var(--accent);
  font-size: var(--fs-eyebrow); line-height: 1; text-transform: uppercase;
  color: var(--secondary);
}
.on-dark .tag { color: var(--white); }

/* Header that is solid dark gray from the top, for pages with no hero photo behind it. It starts at the same compact height it shrinks to when you scroll. */
.site-header.is-solid { background: var(--bg); color: var(--secondary); }
.site-header.is-solid .nav { padding-block: 8px; }

/* ---------- Footer on phones ---------- */
@media (max-width: 768px) {
  .footer__logo img { width: 171px; } /* 10% smaller */
  /* the three awards share one line: smaller logos, labels broken onto two lines */
  .foot__certs { flex-wrap: nowrap; justify-content: flex-start; gap: clamp(16px, 5vw, 28px); } /* close together, left-aligned */
  .cert { gap: 10px; }
  .cert__logo, .cert__logo img { height: clamp(44px, 14vw, 56px); }
  .cert__br { display: inline; }
  .foot__certs .label { white-space: nowrap; }
}
/* Start Your Build sits top right of the dark panel, level with "Explore", without taking space from the rest of the footer (one column only, so it never meets the Company column) */
@media (max-width: 520px) {
  .foot__main { position: relative; }
  .foot__bar .btn { position: absolute; top: var(--gutter); right: var(--gutter); }
}

/* ---------- Cursor mark: the original dark-colored logo mark in a white circle trails behind the cursor over project photos (js/cursor-follow.js) ---------- */
.cursor-mark { position: fixed; top: 0; left: 0; z-index: 60; width: 0; height: 0; pointer-events: none; will-change: transform; }
.cursor-mark__dot {
  position: absolute; left: 0; top: 0; width: clamp(64px, 5.2vw, 83px); aspect-ratio: 1; border-radius: 50%;
  background: var(--white); display: grid; place-items: center;
  transform: translate(-50%, -50%) scale(.85); opacity: 0;
  transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.cursor-mark__dot img { width: 64%; max-width: none; height: auto; } /* max-width: the global img rule would otherwise cap it */
.cursor-mark.is-on .cursor-mark__dot { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (prefers-reduced-motion: reduce) { .cursor-mark__dot { transition: none; } }

/* ---------- Drawn stroke: an accent frame that draws itself once on first scroll-in (js/main.js adds .is-drawn): down the left, along the bottom, up the right, back along the top. ---------- */
.draw-frame { position: relative; }
.draw-frame__edge { position: absolute; background: var(--accent); transition: transform .8s var(--ease); }
.draw-frame__edge--l, .draw-frame__edge--r { top: 0; bottom: 0; width: 1px; transform: scaleY(0); }
.draw-frame__edge--b, .draw-frame__edge--t { left: 0; right: 0; height: 1px; transform: scaleX(0); }
.draw-frame__edge--l { left: 0; transform-origin: top; transition-delay: .6s; }
.draw-frame__edge--b { bottom: 0; transform-origin: left; transition-delay: 1.4s; }
.draw-frame__edge--r { right: 0; transform-origin: bottom; transition-delay: 2.2s; }
.draw-frame__edge--t { top: 0; transform-origin: right; transition-delay: 3s; }
.draw-frame.is-drawn .draw-frame__edge { transform: none; }
@media (prefers-reduced-motion: reduce) { .draw-frame__edge { transform: none; transition: none; } }

/* ---------- Service-page hero (Custom Homes, Major Home Remodels, Design Build): the full-screen version of the inner-page banner, H1 left, button right ---------- */
.page-hero--lg { height: 100vh; height: 100svh; min-height: 560px; }
.page-hero--lg::after { background: linear-gradient(rgba(20,17,18,.55), rgba(20,17,18,.22) 40%, rgba(20,17,18,.72)); }
.chero { display: flex; justify-content: space-between; align-items: flex-end; gap: clamp(32px, 6vw, 120px); }
@media (max-width: 900px) {
  .chero { flex-direction: column; align-items: flex-start; }
}