/* ==========================================================================
   page-home.css — layout for index.html only.
   ========================================================================== */

/* ---- Hero --------------------------------------------------------------- */

/* The hero is a ledger page: the ground is paper, the founder's portrait
   sits in a ruled mint column on the right, and a gold rule closes the
   band. The original tiled black-and-gold chevron artwork across 71% of it
   and set the headline in white on beige (1.36:1). */
.hero {
  position: relative;
  background-color: var(--color-paper);
  border-block-end: var(--border-hairline);
  padding-block-start: var(--space-48);
  overflow: hidden;
}

/* The mint column the portrait stands in. */
.hero::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 38%;
  background-color: var(--color-ledger);
  border-inline-start: var(--border-hairline);
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--space-64);
  min-height: 520px;
}

.hero__copy { padding-block: var(--space-32) var(--space-64); }

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  color: var(--color-spruce);
}

/* A gold rule under the headline: the line drawn under a column head. */
.hero__lede {
  max-width: 46ch;
  margin-block-start: var(--space-32);
  padding-block-start: var(--space-32);
  border-block-start: var(--rule-head);
  font-size: var(--fs-lede);
  line-height: var(--lh-body);
  color: var(--color-muted);
}

.hero__media { justify-self: center; align-self: end; }

.hero__media img { width: 384px; height: auto; }

/* ---- Our Services -------------------------------------------------------- */

.services__intro {
  max-width: var(--measure);
  margin-inline: auto;
  font-family: var(--font-body);
  font-size: var(--fs-lede);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-tight);
  color: var(--color-muted);
}

/* Four entries in a row, separated by rules rather than by gaps: the four
   columns of a worksheet. */
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: var(--rule-head);
  border-block-end: var(--rule-total);
}

.service-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  min-height: 260px;
  padding: var(--space-32) var(--space-30);
  text-align: start;
  background-color: transparent;
  color: var(--color-ink);
  transition: background-color var(--transition-base);
}

.service-card + .service-card { border-inline-start: var(--border-hairline); }

.service-card:hover { background-color: var(--color-ledger); }

.service-card__icon {
  width: var(--space-24);
  height: var(--space-24);
  margin-block-end: var(--space-8);
  color: var(--color-gold-text);
}

.service-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  color: var(--color-spruce);
}

.service-card__body {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--color-muted);
}

/* ---- Who we are ---------------------------------------------------------- */

.who { background-color: var(--color-paper); }

.who__inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--space-80);
}

.who__collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

.who__collage img { width: 100%; height: 100%; object-fit: cover; }

.who__collage-main { grid-row: span 2; height: 100%; }
.who__collage-a,
.who__collage-b { height: 232px; }

.who__title {
  margin-block: var(--space-24) var(--space-32);
  font-family: var(--font-display);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  color: var(--color-spruce);
}

/* ---- Statistics — the statement block ------------------------------------
   THE SIGNATURE. The three figures are set as a financial statement: a
   micro-cap column head over a gold rule, the figure below it in the display
   face at tabular widths, and a double rule closing the block — the mark an
   accountant puts under a total. The original stacked them in three grey
   boxes crammed into the left 780px of the page.                            */

.stats {
  padding-block-end: var(--section-py);
  background-color: var(--color-paper);
}

.stats__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-end: var(--rule-total);
}

.stats__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-24) var(--space-32) var(--space-32);
  background-color: transparent;
  text-align: start;
}

.stats__item + .stats__item { border-inline-start: var(--border-hairline); }

.stats__item:first-child { padding-inline-start: 0; }

/* The column head: label on a gold rule, the way a statement heads a column. */
.stats__item .counter__label {
  margin-block-end: 0;
  padding-block-end: var(--space-12);
  border-block-end: var(--rule-head);
}

.stats__item p:last-child {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--space-2);
}

.counter__suffix {
  font-family: var(--font-display);
  font-size: var(--fs-step);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-counter);
  color: var(--color-gold-text);
}

/* ---- Why choose us ------------------------------------------------------- */

/* Spruce ground: the one dark band in the middle of the page. The original
   ran the black-and-gold chevron artwork across 65% of it, which put the
   team photo behind a busy field and left the copy fighting the facets. */
.why {
  position: relative;
  background-color: var(--color-spruce);
  color: var(--color-on-spruce);
  overflow: hidden;
}

.why::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 46%;
  background-color: var(--color-spruce-deep);
  border-inline-start: var(--border-width) solid var(--color-rule-invert);
}

.why__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--space-64);
}

.why .eyebrow {
  color: var(--color-on-spruce);
  border-block-end-color: var(--color-gold);
}

.why__title {
  margin-block: var(--space-24) var(--space-48);
  font-family: var(--font-display);
  font-size: var(--fs-page-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  color: var(--color-on-spruce);
}

/* Three numbered entries. The numbering is kept because the original had it
   and the copy reads as a ranked set of three, but the marker is now a gold
   figure on the rule rather than a black chip. */
.why-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: why;
  border-block-start: var(--border-width) solid var(--color-rule-invert);
}

.why-list li {
  position: relative;
  padding: var(--space-24) 0 var(--space-24) var(--space-48);
  border-block-end: var(--border-width) solid var(--color-rule-invert);
  counter-increment: why;
}

.why-list li::before {
  content: counter(why, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: var(--space-24);
  font-family: var(--font-heading);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-gold);
}

.why-list__title {
  font-family: var(--font-heading);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-heading);
  color: var(--color-on-spruce);
  margin-block-end: var(--space-8);
}

/* Original ran this body copy in brand gold on a light panel (1.55:1). */
.why-list__body {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-tight);
  color: var(--color-on-spruce-muted);
  max-width: 52ch;
}

.why__media { justify-self: end; }
.why__media img { width: 620px; height: auto; }

/* ---- Segments (tabs) ----------------------------------------------------- */

/* ---- Segments (tabs) -----------------------------------------------------
   This panel is the longest thing on the site — over 2,000px of copy. The
   original painted all of it as one saturated gold slab with the text run
   edge to edge, which is unreadable at that length. It is now ledger paper:
   a mint ground, a measured column, and rules marking each subhead.        */

.segments {
  padding-block-end: var(--section-py);
  background-color: var(--color-paper);
}

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-block-end: var(--border-hairline);
}

/* Tabs read as ledger tabs: a label on a rule that goes gold when active. */
.tabs__tab {
  padding: var(--space-16) var(--space-32);
  font-family: var(--font-heading);
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  background-color: transparent;
  color: var(--color-spruce-soft);
  border: 0;
  border-block-end: var(--border-width-thick) solid transparent;
  margin-block-end: calc(-1 * var(--border-width));
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.tabs__tab[aria-selected="true"] {
  color: var(--color-spruce);
  border-block-end-color: var(--color-gold);
}

.tabs__tab:hover:not([aria-selected="true"]) { color: var(--color-spruce); }

/* The panel is a document on a page: one measured reading column set against
   the left edge of the mint ground, every element sharing the same left
   margin and the same right edge. */
.tabs__panel {
  padding: var(--space-80) var(--space-96);
  background-color: var(--color-ledger);
  color: var(--color-ink);
}

.tabs__panel > * {
  max-width: var(--column-max);
  margin-inline: 0;
}

.tabs__panel-title {
  font-family: var(--font-display);
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  color: var(--color-spruce);
  margin-block-end: var(--space-24);
}

/* Every subhead in the panel is a column head on a rule. */
.tabs__subhead {
  margin-block: var(--space-64) var(--space-24);
  padding-block-end: var(--space-12);
  border-block-end: var(--rule-head);
  font-family: var(--font-heading);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-spruce);
}

.tabs__panel > p { max-width: var(--column-max); }

/* Entries in the panel are ruled rows, not bullets. */
.offer-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}

.offer-list > li {
  padding: var(--space-24) 0;
  padding-inline-start: 0;
  border-block-end: var(--border-hairline);
}

.offer-list > li:last-child { border-block-end: 0; }

.offer-list__title {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lede);
  letter-spacing: var(--ls-heading);
  color: var(--color-spruce);
  margin-block-end: var(--space-12);
}

.offer-list__detail {
  display: grid;
  gap: var(--space-12);
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}

.offer-list__detail li {
  position: relative;
  padding-inline-start: var(--space-24);
  font-size: var(--fs-small);
  color: var(--color-muted);
}

.offer-list__detail li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.7em;
  width: var(--space-10);
  height: var(--border-width);
  background-color: var(--color-gold-dark);
}

.bullet-list {
  display: grid;
  gap: var(--space-12);
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}

.bullet-list li {
  position: relative;
  padding-inline-start: var(--space-24);
  color: var(--color-ink);
}

.bullet-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.7em;
  width: var(--space-10);
  height: var(--border-width);
  background-color: var(--color-gold-dark);
}

/* ---- Testimonials -------------------------------------------------------- */

.testimonials { background-color: var(--color-paper); }

.testimonials__title { margin-block-end: var(--space-48); max-width: 20ch; }

.carousel { position: relative; }

.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--space-24) * 2) / 3);
  gap: var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar { display: none; }

.testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 500px;
  padding: var(--space-32);
  scroll-snap-align: start;
  background-color: var(--color-spruce-deep);
  background-position: 100% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--color-white);
}

.testimonial--julia { background-image: url("../img/testimonial-julia-colins.webp"); }
.testimonial--chase { background-image: url("../img/testimonial-chase-adam.webp"); }
.testimonial--scott { background-image: url("../img/testimonial-scott-bromfied.webp"); }

/* A left-to-right scrim so the quote stays legible over the photo. The
   original placed white text straight onto the gold panel (1.85:1). The
   scrim is spruce rather than neutral ink, and never falls to fully
   transparent — these portraits were shot on gold backdrops, and letting
   the far edge run clear put a band of raw gold down every card. */
.testimonial::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to right,
    rgba(var(--color-spruce-rgb), 0.93) 0%,
    rgba(var(--color-spruce-rgb), 0.86) 45%,
    rgba(var(--color-spruce-rgb), 0.42) 100%
  );
}

.testimonial > * { position: relative; }

.testimonial__quote {
  width: var(--space-30);
  height: var(--space-30);
  color: var(--color-gold);
  margin-block-end: var(--space-20);
}

.testimonial__quote-text { margin: 0; max-width: 26ch; }

.testimonial__quote-text p {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  color: var(--color-white);
}

/* The attribution sits under a gold rule — signed off, like an entry. */
.testimonial__name {
  margin-block-start: auto;
  padding-block-start: var(--space-20);
  border-block-start: var(--border-width) solid var(--color-rule-invert);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  color: var(--color-white);
}

.testimonial__role {
  font-family: var(--font-heading);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-gold);
}

.carousel__controls {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  margin-block-start: var(--space-24);
}

.carousel--paged .carousel__controls { display: flex; }

.carousel__arrow {
  display: grid;
  place-items: center;
  width: var(--space-40);
  height: var(--space-40);
  background-color: transparent;
  border: var(--border-width) solid var(--color-rule-strong);
  color: var(--color-spruce);
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              opacity var(--transition-fast);
}

.carousel__arrow svg { width: var(--space-15); height: var(--space-15); }

.carousel__arrow:hover:not(:disabled) {
  background-color: var(--color-spruce);
  border-color: var(--color-spruce);
  color: var(--color-on-spruce);
}
.carousel__arrow:disabled { opacity: 0.35; cursor: default; }

.carousel__dots { display: flex; gap: var(--space-8); }

.carousel__dot {
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-round);
  background-color: var(--color-rule);
  transition: background-color var(--transition-fast);
}

.carousel__dot.is-current { background-color: var(--color-gold-dark); }

/* ---- Map ----------------------------------------------------------------- */

.map-section {
  padding-block-end: var(--section-py);
  background-color: var(--color-paper);
}

/* ==========================================================================
   Responsive — values mirror --bp-* in tokens.css
   ========================================================================== */

@media (max-width: 1024px) {

  .hero__inner { min-height: 480px; gap: var(--space-40); }
  .hero__media img { width: 300px; }
  .hero::before { width: 42%; }

  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Two-up: the third and fourth cards need the rule above them, and the
     first card of each row must not carry a left rule. */
  .service-card:nth-child(odd) { border-inline-start: 0; }
  .service-card:nth-child(n + 3) { border-block-start: var(--border-hairline); }

  .who__inner,
  .why__inner { gap: var(--space-48); }

  /* Narrower columns pull the copy toward the dark panel, so the panel is
     pulled back to clear the longest line in the list. */
  .why::before { width: 42%; }

  .why__media img { width: 100%; }

  .carousel__track { grid-auto-columns: calc((100% - var(--space-24)) / 2); }

  .tabs__panel { padding: var(--space-40) var(--space-32); }
}

@media (max-width: 767px) {

  .hero { padding-block-start: var(--space-64); }

  /* One column: the mint panel runs the full width behind the portrait,
     which now sits below the copy rather than beside it. */
  .hero::before {
    width: 100%;
    inset-block-start: auto;
    height: 240px;
    border-inline-start: 0;
    border-block-start: var(--border-hairline);
  }

  .hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: var(--space-40);
  }

  .hero__copy { padding-block-end: 0; }

  .hero__lede { font-size: var(--fs-body); }

  .hero__media img { width: 240px; }

  .service-grid { grid-template-columns: 1fr; }

  .service-card {
    min-height: 0;
    padding: var(--space-24) 0;
    border-inline-start: 0;
  }

  .service-card + .service-card {
    border-inline-start: 0;
    border-block-start: var(--border-hairline);
  }

  .who__inner,
  .why__inner { grid-template-columns: 1fr; }

  .who__collage-main { height: 300px; }
  .who__collage-a,
  .who__collage-b { height: 148px; }

  .stats__list { grid-template-columns: 1fr; max-width: none; }

  .stats__item {
    padding-inline: 0;
    border-inline-start: 0;
  }

  .stats__item + .stats__item { border-inline-start: 0; }

  .why::before { display: none; }

  .why__media { justify-self: center; }
  .why__media img { width: 100%; max-width: 420px; }

  .tabs__list { flex-direction: column; align-items: stretch; }

  .tabs__tab {
    width: 100%;
    text-align: start;
    padding-inline: 0;
    border-block-end: var(--border-hairline);
  }

  .tabs__tab[aria-selected="true"] { border-block-end-color: var(--color-gold); }

  .tabs__panel { padding: var(--space-32) var(--space-24); }

  .tabs__subhead { margin-block-start: var(--space-48); }

  .carousel__track { grid-auto-columns: 100%; }

  .testimonial { min-height: 420px; padding: var(--space-24); }

  .testimonial__quote-text { max-width: 28ch; }
}