/* About page only (about.html). Loaded after styles.css and shared.css. */

/* ---------- Intro: eyebrow, headline and button left; the write-up sits in the right column, vertically centered on the headline ---------- */
.intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  column-gap: clamp(32px, 6vw, 112px);
}
.intro__grid > .eyebrow { grid-column: 1; grid-row: 1; }
.intro__grid > h2 { grid-column: 1; grid-row: 2; margin-top: 14px; }
.intro__grid > .btn { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 32px; }
.intro__text { grid-column: 2; grid-row: 2; align-self: center; margin-top: 14px; max-width: 720px; } /* same 14px as the H2, so the row centers on the headline itself */
@media (max-width: 900px) {
  .intro__grid { grid-template-columns: 1fr; }
  .intro__text { grid-column: 1; grid-row: auto; margin-top: 32px; }
}

/* ---------- Bio: framed copy left, photo right (the home About section, flipped) ---------- */
.bio { padding-top: 0; }
.bio .split { gap: var(--gap); align-items: stretch; }
.bio__copy {
  border: 1px solid var(--accent);
  padding: var(--gutter);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.bio__copy .btn { margin-top: 32px; }
.bio__img { position: relative; min-height: 420px; overflow: hidden; }
.bio__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.bio__img:hover > img { transform: scale(1.04); }
/* Collage inset: a smaller photo in the bottom right corner, edged on its left and top by the page background so it reads as sitting in front of the main photo */
.bio__inset { position: absolute; right: 0; bottom: 0; width: 32%; aspect-ratio: 4 / 5; overflow: hidden; border-left: clamp(5px, .6vw, 9px) solid var(--bg); border-top: clamp(5px, .6vw, 9px) solid var(--bg); background: var(--bg); }
.bio__inset img { object-position: 42% 50%; } /* crops the wide kitchen photo to the island and pendant lights */
.bio__img > img { position: absolute; inset: 0; object-position: 50% 58%; } /* fills the frame without setting its height (the frame stays as tall as the text box); keeps the face well inside it */
.bio__inset:hover img { transform: scale(1.06); }
@media (max-width: 900px) { .bio__img { min-height: 0; aspect-ratio: 4 / 3; order: -1; } } /* stacked: photo on top, framed copy below */

/* ---------- Dark sections (values, counties) ---------- */
.values, .counties { background: var(--secondary); color: var(--white); }

/* ---------- Values: header row with an underline, then photo left / slider right ---------- */
.values__head { padding-bottom: clamp(24px, 3vw, 48px); border-bottom: 1px solid var(--accent); margin-bottom: clamp(32px, 4vw, 64px); }
.vslider { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); align-items: stretch; }

/* photo: all six stacked, the active one fades in */
.vslider__media { position: relative; min-height: clamp(380px, 36vw, 640px); overflow: hidden; }
.vslider__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease), transform 1.1s var(--ease); }
.vslider__media:hover .vslider__img { transform: scale(1.04); }
.vslider__img.is-active { opacity: 1; }

.vslider__body { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(28px, 3vw, 48px); }

/* pills: short value names that jump straight to a slide. One row of six equal-width pills; 12px is the mobile eyebrow size from the scale */
.vslider__tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(var(--gap) / 2); }
.vtab {
  padding: 9px 0;
  border: 1px solid var(--accent);
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  color: var(--white);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.vtab:hover { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.vtab.is-active { background: var(--accent); }
@media (min-width: 901px) and (max-width: 1040px), (max-width: 560px) { .vslider__tabs { grid-template-columns: repeat(3, 1fr); } } /* the only widths where six pills no longer fit on one line */

/* text: slides stack in one grid cell (the tallest sets the height), the active one fades in */
.vslider__stage { display: grid; }
.vslide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility .7s; }
.vslide.is-active { opacity: 1; visibility: visible; }
/* number sits behind the H3 exactly like the Our Process steps (84px is the one sanctioned exception to the size scale) */
.vslide__num {
  display: block;
  font-family: var(--font-head);
  font-size: 84px;
  line-height: 1;
  color: var(--white);
  opacity: .08;
  position: relative;
  top: -8px;
}
.vslide h3 { margin-top: calc(84px * -.42); position: relative; }
.vslide .rule { display: block; width: 44px; height: 1px; background: var(--accent); margin: 26px 0 20px; }
.vslide p { max-width: 560px; opacity: .88; }

.vslider__nav { display: flex; align-items: center; gap: var(--gap); }
.vslider__cta { display: none; }

@media (max-width: 900px) {
  .vslider { grid-template-columns: 1fr; }
  .vslider__media { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .vslider__img, .vslide, .bio__img img { transition: none; }
}

/* ---------- Partners & affiliations: centered header stack, then a row of logo tiles ---------- */
.partners__head { text-align: center; }
.partners__head p { max-width: 640px; margin: 20px auto 0; }
.partners__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); }
.partner {
  display: flex; flex-direction: column; border: 1px solid var(--accent);
  transition: opacity .9s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); /* keeps the .reveal fade-in while adding the lift */
}
.partner:hover { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(34, 30, 31, .18); } /* card lifts a touch */
.partner__logo { flex: none; height: clamp(130px, 12vw, 180px); padding: var(--gap); background: var(--white); display: flex; align-items: center; justify-content: center; }
/* Logos are sized by hand so they look equally big, not just fit the same box. --h is the logo height at desktop. */
.partner__logo img { height: calc(var(--h) * var(--logo-scale, 1)); width: auto; max-width: 100%; object-fit: contain; }
.partner--obie { --h: 106px; }
.partner--hba { --h: 92px; }
.partner--warranty { --h: 90px; }
.partner--lumpkin { --h: 108px; }
.partner--christian { --h: 30px; }
.partner .label { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: calc(var(--gap) * .75) var(--gap); border-top: 1px solid var(--accent); color: var(--secondary); transition: background-color .35s var(--ease), color .35s var(--ease); }
.partner:hover .label { background: var(--secondary); color: var(--white); }
@media (max-width: 1100px) { .partners__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) {
  .partners__grid { grid-template-columns: 1fr 1fr; }
  .partner:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .partner { --logo-scale: .75; }
  .partner--christian { --h: 34px; }
}

/* ---------- Counties: four short stroked tiles, the county name and nothing else ---------- */
.counties__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.county {
  min-height: clamp(88px, 8vw, 132px);
  padding: calc(var(--gap) * 2);
  border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: center; text-align: center;
  transition: opacity .9s var(--ease), transform .9s var(--ease), background-color .35s var(--ease); /* keeps the .reveal fade-in while adding the hover fill */
}
.county:hover { background: var(--accent); } /* text stays white */
@media (max-width: 900px) { .counties__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .counties__grid { grid-template-columns: 1fr; } .county { min-height: 80px; } }

/* Counties on mobile: header centered, button moves from the header to under the last tile */
.counties__cta { display: none; }
@media (max-width: 768px) {
  .counties .why__head { flex-direction: column; align-items: center; text-align: center; }
  .counties__btn--head { display: none; }
  .counties__cta { display: flex; }
}

/* Phones: Start Your Build moves down to the arrows row, fully right (the heading's own button is hidden, so the content below closes up the gap) */
@media (max-width: 768px) {
  .values__head .btn { display: none; }
  .vslider__cta { display: inline-flex; margin-left: auto; }
}
@media (max-width: 380px) { .vslider__nav { gap: 12px; } .vslider__cta { padding-inline: 20px; } } /* smallest phones: keeps arrows and button on one row */

/* Values slider: keep the people in frame for the two consultation photos (slides 1 and 3) */
.vslider__img:nth-child(1) { object-position: 50% 30%; }
.vslider__img:nth-child(3) { object-position: 50% 35%; }