/* ============================================================
   Wasatch Legacy Partners — Global styles
   ============================================================ */

:root {
  --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --white: #ffffff;
  --ink: #1a1a1a;
  --cream: #f4f0e6;      /* warm off-white section background */
  --forest: #26332b;     /* dark green used for headings + nav on cream */
  --body-gray: #4a4a45;  /* muted body copy */
  --gold: #b8975a;       /* eyebrow / accent gold — for dark backgrounds */
  --gold-deep: #8a6d2f;  /* the same gold darkened for use on cream (4.28:1) */
  --panel: #e9e0cd;      /* darker tan panel on the cream background */
  --dark-green: #223021; /* dark forest section background */
  --on-dark: #f4f0e6;    /* cream text on dark green */
  --on-dark-muted: #b7bfb0; /* muted sage text on dark green */
  --sand: #e9e1d0;       /* warm tan section background (For Owners) */
  --card: #fbf9f3;       /* near-white card background */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
}

section {
  scroll-margin-top: 90px;
}

/* ============================================================
   Fixed, scroll-adaptive header
   ============================================================ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  color: var(--white);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Solid state once scrolled past the hero */
.site-header.is-solid {
  color: var(--forest);
  background: rgba(244, 240, 230, 0.92);
  border-bottom: 1px solid rgba(38, 51, 43, 0.12);
  backdrop-filter: saturate(120%) blur(6px);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.6rem clamp(1.5rem, 5vw, 4rem);
}

.nav__brand {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(0.8rem, 1.12vw, 1.08rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.nav__links a {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.95;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.nav__links a:hover {
  opacity: 0.65;
}

/* Get in Touch is the one nav item that is a call to action. Over the
   hero photo it stays white — gold on a pale sky measures ~1:1 contrast.
   It turns gold once the header goes solid on scroll. */
.nav__links li:last-child a {
  font-weight: 600;
  color: var(--white);
  opacity: 1;
}

.site-header.is-solid .nav__links li:last-child a {
  color: var(--gold);
}

/* Mobile menu button — revealed below 720px */
.nav__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-right: -0.5rem;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.nav__toggle-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../assets/hero.jpg");
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.05) 30%,
    rgba(0, 0, 0, 0.12) 100%
  );
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 9.41rem 1.5rem 6rem;
  max-width: 60rem;
  margin: 0 auto;
}

.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.35rem, 5vw, 3.625rem);
  line-height: 1.12;
  margin: 0 0 1.75rem;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}

.hero__subtitle {
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  font-weight: 400;
  line-height: 1.6;
  max-width: 40rem;
  margin: 0 0 1.6rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}

/* Location line under the hero subhead. The hero is vertically centred, so
   .hero__content carries extra padding-top to cancel the upward shift this
   line would otherwise cause. Change one, re-check the other. */
.hero__location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 3.25rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}

.hero__location::before,
.hero__location::after {
  content: "";
  flex: 0 0 auto;
  width: 2.25rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.9;
}

@media (max-width: 720px) {
  /* header wraps to two rows below 720px (72px -> ~124px) */
  section {
    scroll-margin-top: 96px;
  }

  .hero__location {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    gap: 0.6rem;
    white-space: nowrap;
  }

  .hero__location::before,
  .hero__location::after {
    width: 1.1rem;
  }
}

/* Buttons */

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: var(--white);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

.btn--solid {
  background: var(--white);
  border: 1px solid var(--white);
  color: var(--ink);
}

.btn--solid:hover {
  background: rgba(255, 255, 255, 0.88);
}

/* ============================================================
   About / Legacy
   ============================================================ */

.about {
  background: var(--cream);
  color: var(--forest);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
}

.about__inner {
  max-width: 1180px;
  margin: 0 auto;
}

.about__eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold);
  margin: 0 0 1.5rem;
}

.about__heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.18;
  text-align: center;
  color: var(--forest);
  max-width: 40ch;
  margin: 0 auto clamp(2rem, 4vw, 3.25rem);
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
}

/* Space between the two person blocks */
.about__grid + .about__grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* Centered mission statement below the blocks */
.about__statement {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.75vw, 1.5rem);
  line-height: 1.5;
  text-align: center;
  /* The lighter --gold measures only 2.42:1 on cream; this reads at 4.28:1. */
  color: var(--gold-deep);
  font-style: italic;
  max-width: 66rem;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
}

/* Gold rule with three diamonds, the centre one larger. The diamonds and the
   hairline are two mask layers painted with currentColor, so the ornament
   always matches whatever colour the statement itself uses. */
.about__statement::before,
.about__statement::after {
  content: "";
  display: block;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 20'%3E%3Cpath d='M15 5 20 10 15 15 10 10Z M36 1 45 10 36 19 27 10Z M57 5 62 10 57 15 52 10Z' fill='%23000'/%3E%3C/svg%3E") center / 72px 20px no-repeat,
    linear-gradient(#000, #000) center / 100% 1px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 20'%3E%3Cpath d='M15 5 20 10 15 15 10 10Z M36 1 45 10 36 19 27 10Z M57 5 62 10 57 15 52 10Z' fill='%23000'/%3E%3C/svg%3E") center / 72px 20px no-repeat,
    linear-gradient(#000, #000) center / 100% 1px no-repeat;
}

.about__statement::before {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.about__statement::after {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.about__subhead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.875rem);
  line-height: 1.22;
  color: var(--forest);
  margin: 0 0 1.5rem;
}

.about__body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--body-gray);
  margin: 0;
  max-width: 32rem;
}

/* The figure is capped by width rather than height so the caption
   below it can never run wider than the photo it describes. */
.about__figure {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.about__image {
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 2px;
}

.about__caption {
  font-family: var(--sans);
  font-style: italic;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--body-gray);
  margin-top: 1.1rem;
}

/* ============================================================
   Who we are
   ============================================================ */

.team {
  background: var(--cream);
  color: var(--forest);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 5vw, 4rem)
    clamp(3rem, 6vw, 5rem);
}

/* Darker tan panel behind the heading + member cards */
.team__panel {
  max-width: 1340px;
  margin: 0 auto;
  background: var(--panel);
  border-radius: 4px;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 5vw, 4.5rem);
}

.team__panel-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.team__inner {
  max-width: 1180px;
  margin: 0 auto;
}

.team__heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.2;
  text-align: center;
  color: var(--forest);
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
}

.team__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  /* 1056px = two 500px photos plus the 56px gap. */
  max-width: 1056px;
  margin: 0 auto;
}

.team__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 2px;
}

.team__name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 1.6rem 0 1.1rem;
}

.team__bio {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--body-gray);
  margin: 0;
}

/* Bios can run to more than one paragraph. */
.team__bio + .team__bio {
  margin-top: 1.1rem;
}

.team__link {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 1.5rem;
  transition: opacity 0.2s ease;
}

.team__link:hover {
  opacity: 0.7;
}

/* "Better together" block below the member cards */
.together {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* ============================================================
   How we're different
   ============================================================ */

.diff {
  background: var(--dark-green);
  color: var(--on-dark);
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
}

.diff__inner {
  max-width: 1180px;
  margin: 0 auto;
}

.diff__eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold);
  margin: 0 0 1.75rem;
}

.diff__heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.16;
  text-align: center;
  color: var(--on-dark);
  max-width: 20ch;
  margin: 0 auto 2rem;
}

.diff__intro {
  font-family: var(--sans);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.7;
  text-align: center;
  color: var(--on-dark-muted);
  max-width: 58rem;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.diff__subhead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.2vw, 1.875rem);
  line-height: 1.25;
  text-align: center;
  color: var(--on-dark);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
}

/* Comparison table */
.diff__table-shell {
  position: relative;
}

.diff__table-wrap {
  overflow-x: auto;
}

/* The table needs 720px. Above that it fits and neither cue renders.
   Below it, a fade on the right edge plus a swipe line tell the visitor
   there are two more columns — including ours. */
.diff__table-shell::after {
  content: "";
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3.5rem;
  pointer-events: none;
  background: linear-gradient(to right, rgba(34, 48, 33, 0), var(--dark-green));
  transition: opacity 0.25s ease;
}

.diff__table-shell.is-scrolled-end::after {
  opacity: 0;
}

/* Once they've reached the last column the prompt has done its job. */
.diff__inner:has(.diff__table-shell.is-scrolled-end) .diff__swipe {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.diff__swipe {
  display: none;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin: 0 0 0.85rem;
}

.diff__swipe span {
  display: inline-block;
  margin-left: 0.4rem;
  animation: swipe-nudge 1.8s ease-in-out infinite;
}

@keyframes swipe-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .diff__swipe span { animation: none; }
}

.compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.compare th,
.compare td {
  text-align: left;
  vertical-align: top;
  padding: 1.4rem 1.5rem 1.4rem 0;
}

/* Column headers */
.compare thead th {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: var(--on-dark);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(244, 240, 230, 0.18);
}

.compare thead th.compare__us {
  color: var(--gold);
}

/* Row label (left column) */
.compare__rowlabel {
  width: 20%;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.5;
}

/* Body cells */
.compare tbody td {
  width: 26.6%;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--on-dark-muted);
}

/* Wasatch column stands out */
.compare tbody td.compare__us {
  color: var(--on-dark);
  font-weight: 600;
}

/* Subtle separators between rows */
.compare tbody tr + tr th,
.compare tbody tr + tr td {
  border-top: 1px solid rgba(244, 240, 230, 0.08);
}

/* ============================================================
   For owners
   ============================================================ */

.owners {
  background: var(--sand);
  color: var(--forest);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
}

.owners__inner {
  max-width: 1560px;
  margin: 0 auto;
}

.owners__eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1rem;
}

.owners__kicker {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--forest);
  opacity: 0.85;
  margin: 0 0 1rem;
}

.owners__heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.1;
  color: var(--forest);
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
}

.owners__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 1.75vw, 1.75rem);
}

.owner-card {
  background: var(--card);
  border-radius: 2px;
  padding: clamp(1.75rem, 2.5vw, 2.5rem);
}

.owner-card__num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--gold);
  margin: 0 0 1.25rem;
}

.owner-card__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.6vw, 1.375rem);
  line-height: 1.22;
  color: var(--forest);
  margin: 0 0 1rem;
}

.owner-card__title::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--gold);
  margin-top: 1rem;
}

.owner-card__desc {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--body-gray);
  margin: 0;
}

/* ============================================================
   Our approach (process timeline)
   ============================================================ */

.approach {
  background: var(--cream);
  color: var(--forest);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
}

.approach__inner {
  max-width: 1400px;
  margin: 0 auto;
}

.approach__eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold);
  margin: 0 0 1.5rem;
}

.approach__heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.14;
  text-align: center;
  color: var(--forest);
  max-width: 18ch;
  margin: 0 auto clamp(2.25rem, 4.5vw, 3.25rem);
}

.approach__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.step__pill {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest);
  background: var(--panel);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.75rem;
}

/* Circle + connecting line */
.step__circle-wrap {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 1.6rem;
}

.step__circle-wrap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(38, 51, 43, 0.15);
  transform: translateY(-50%);
  z-index: 0;
}

/* Trim the line so it starts/ends at the first/last circle */
.step:first-child .step__circle-wrap::before {
  left: 50%;
}

.step:last-child .step__circle-wrap::before {
  right: 50%;
}

.step__circle {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.15rem;
}

.step__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.6vw, 1.375rem);
  line-height: 1.18;
  color: var(--forest);
  margin: 0 0 1.1rem;
}

.step__desc {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--body-gray);
  margin: 0;
}

.approach__footnote {
  font-family: var(--sans);
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  font-size: 1.15rem;
  text-align: center;
  color: var(--body-gray);
  margin: clamp(2.25rem, 4.5vw, 3.25rem) auto 0;
}

.approach__footnote::before,
.approach__footnote::after {
  content: "";
  flex: 0 0 auto;
  width: 2.25rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.9;
}

/* ============================================================
   FAQ (accordion)
   ============================================================ */

.faq {
  background: var(--cream);
  border-top: 1px solid rgba(184, 151, 90, 0.35);
  color: var(--forest);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
}

.faq__inner {
  max-width: 1080px;
  margin: 0 auto;
}

.faq__eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.25rem;
}

.faq__heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.1;
  color: var(--forest);
  max-width: 18ch;
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
}

.faq__list {
  border-bottom: 1px solid rgba(38, 51, 43, 0.1);
}

.faq__item {
  border-top: 1px solid rgba(38, 51, 43, 0.1);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.6vw, 1.375rem);
  line-height: 1.25;
  color: var(--forest);
  padding: 1.6rem 0;
}

/* Hide the default disclosure triangle */
.faq__q::-webkit-details-marker {
  display: none;
}

/* Custom +/× toggle indicator */
.faq__q::after {
  content: "+";
  flex: 0 0 auto;
  width: 1.5rem;
  text-align: center;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gold);
  transition: transform 0.2s ease;
}

.faq__item[open] .faq__q::after {
  content: "\00D7"; /* × */
}

.faq__a {
  padding: 0 0 1.9rem;
  max-width: 62rem;
}

.faq__a p {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--body-gray);
  margin: 0;
}

/* ============================================================
   Get in touch
   ============================================================ */

.contact {
  background: var(--sand);
  color: var(--forest);
  padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 5vw, 4rem);
}

.contact__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

.contact__eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.25rem;
}

.contact__heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.1;
  color: var(--forest);
  margin: 0 0 1.75rem;
}

.contact__body {
  font-family: var(--sans);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--body-gray);
  margin: 0 0 1.5rem;
  max-width: 32rem;
}

.contact__confidential {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--body-gray);
  margin: 0 0 2.25rem;
}

.contact__emails {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact__emails a {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--forest);
  transition: opacity 0.2s ease;
}

.contact__emails a:hover {
  opacity: 0.65;
}

/* Form card */
.contact__card {
  background: var(--white);
  border-radius: 2px;
  padding: clamp(2rem, 3.5vw, 3.25rem);
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
}

.field label {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a8578;
  margin-bottom: 0.6rem;
}

.field .req {
  color: var(--gold);
}

.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--forest);
  background: var(--cream);
  border: 1px solid rgba(38, 51, 43, 0.18);
  border-radius: 2px;
  padding: 0.85rem 0.9rem;
  width: 100%;
}

.field textarea {
  resize: vertical;
  min-height: 9rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--forest);
}

.field ::placeholder {
  color: #9b9689;
}

.btn-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--dark-green);
  color: var(--white);
  border: none;
  border-radius: 999px;
  padding: 1.05rem 2.5rem;
  margin-top: 0.5rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.btn-send:hover {
  opacity: 0.9;
}

.contact-form__note {
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--forest);
  margin: 1.5rem 0 0;
}

/* ============================================================
   Footer
   ============================================================ */

.footer {
  background: var(--dark-green);
  color: var(--on-dark);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 5vw, 4rem)
    clamp(1.25rem, 2.5vw, 1.75rem);
}

.footer__inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 2rem;
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.footer__col {
  text-align: center;
}

.footer__label {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.9rem;
}

.footer__text {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--on-dark);
  margin: 0;
}

.footer__text a {
  color: var(--on-dark);
  transition: opacity 0.2s ease;
}

.footer__text a:hover {
  opacity: 0.7;
}

.footer__brandname {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--on-dark);
  margin: 0;
}

.footer__bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding-top: clamp(1rem, 2vw, 1.25rem);
  border-top: 1px solid rgba(244, 240, 230, 0.12);
}

.footer__copy {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: rgba(244, 240, 230, 0.5);
  margin: 0;
}

/* ============================================================
   Responsive — small screens
   ============================================================ */

/* Timeline needs more room than 5 narrow columns allow */
@media (max-width: 1024px) {
  .approach__steps {
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 26rem;
    margin: 0 auto;
  }

  /* The connecting line only reads in a single horizontal row */
  .step__circle-wrap::before {
    display: none;
  }
}

@media (max-width: 860px) {
  .about__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .team__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

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

  .contact__inner {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }

  .footer__inner {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    text-align: center;
  }

  .footer__copy {
    text-align: center;
  }

  .about__text {
    order: 2;
  }

  .about__figure {
    order: 1;
  }

  .about__body {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .nav {
    gap: 1rem;
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
  }

  .nav__brand {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
  }

  .nav__toggle {
    display: flex;
  }

  /* Collapsed menu: a panel that drops below the single-row bar. */
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 0 0.5rem;
    /* Fully opaque — a translucent panel lets the hero headline read through. */
    background: var(--cream);
    border-bottom: 1px solid rgba(38, 51, 43, 0.12);
    box-shadow: 0 12px 24px rgba(26, 26, 26, 0.12);
  }

  .nav__links.is-open {
    display: flex;
  }

  .nav__links li + li {
    border-top: 1px solid rgba(38, 51, 43, 0.08);
  }

  .nav__links a {
    display: block;
    padding: 0.95rem clamp(1.5rem, 5vw, 4rem);
    font-size: 0.85rem;
    color: var(--forest);
    opacity: 1;
  }

  /* Inside the cream panel the CTA reads well in gold again. */
  .nav__links li:last-child a,
  .site-header.is-solid .nav__links li:last-child a {
    color: var(--gold);
  }

  .diff__table-shell::after {
    display: block;
  }

  .diff__swipe {
    display: block;
  }

  /* The tan panel's own padding sits inside the section's, which left the
     team photos 48px narrower than the archival ones. Letting the panel
     bleed to the viewport edges lines both sets up on the same margin. */
  .team__panel {
    margin-left: calc(-1 * clamp(1.5rem, 5vw, 4rem));
    margin-right: calc(-1 * clamp(1.5rem, 5vw, 4rem));
    border-radius: 0;
  }

  .hero__actions {
    width: 100%;
  }

  .btn {
    flex: 1 1 auto;
  }

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

  .contact-form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* --------------------------------------------------
   Contact form — validation, honeypot and sent state
   -------------------------------------------------- */

/* Honeypot: off-screen for people, irresistible to bots. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field__error {
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.4;
  color: #9a3b2f;
  margin-top: 0.4rem;
}

.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid {
  border-color: #9a3b2f;
}

.btn-send[disabled] {
  opacity: 0.55;
  cursor: default;
}

.form-note--error {
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.6;
  color: #9a3b2f;
  margin-top: 1rem;
}

.form-note--error a {
  color: inherit;
  text-decoration: underline;
}

.form-success {
  border-top: 1px solid rgba(38, 51, 43, 0.18);
  padding-top: 2rem;
  outline: none;
}

.form-success__title {
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.3;
  color: var(--forest);
  margin: 0;
}

.form-success__body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--body-gray);
  margin-top: 0.9rem;
}

[hidden] {
  display: none !important;
}