/* ==========================================================================
   PRC — About Us (Figma 334:2405 desktop / 340:2692 mobile)
   ========================================================================== */

.page-about {
  --hl-muted: #c7c7bf;       /* intro scroll-highlight resting colour */
}

/* Active nav link: Figma shows it lime + semibold on the dark hero, no underline */
.page-about .site-nav:not(.site-nav--on-light) .site-nav__links a[aria-current="page"] {
  color: var(--lime-300);
  font-weight: 600;
}
.page-about .site-nav .site-nav__links a[aria-current="page"]::after { transform: scaleX(0); }
.page-about .site-nav .site-nav__links a[aria-current="page"]:hover::after { transform: scaleX(1); }

.about-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: normal;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--forest-600);
}

/* --------------------------------------------------------------------------
   01 Hero
   -------------------------------------------------------------------------- */
.about-hero {
  position: relative;
  height: 760px;
  overflow: hidden;
  background: var(--forest-950);
  color: var(--base-white);
}
.about-hero__media { position: absolute; inset: 0; overflow: hidden; }
.about-hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform-origin: 50% 50%;
  animation: about-zoom 3.4s cubic-bezier(0, 0, 0.58, 1) both;
}
/* Photo dim (rgba 10,10,10,.3) + forest shade gradient */
.about-hero__media::before,
.about-hero__media::after { content: ""; position: absolute; inset: 0; }
.about-hero__media::before { background: rgba(10, 10, 10, 0.3); }
.about-hero__media::after {
  background: linear-gradient(180deg, rgba(15, 31, 16, 0.6) 0%, rgba(15, 31, 16, 0.25) 35%, rgba(15, 31, 16, 0.92) 100%);
}
@keyframes about-zoom { from { transform: scale(1.18); } to { transform: scale(1); } }

.about-hero__content {
  position: absolute; left: 0; right: 0; top: 405px;
  display: flex; flex-direction: column; gap: 24px; align-items: flex-start;
}
.about-hero__crumbs { --rdelay: 0.9s; --rdur: 0.9s; }
.about-hero__crumbs ol {
  display: flex; gap: 10px;
  font-family: var(--font-mono); font-weight: 500; font-size: 12px; line-height: normal;
  letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap;
}
.about-hero__crumbs a { color: rgba(255, 255, 255, 0.55); transition: color 0.2s; }
.about-hero__crumbs a:hover { color: var(--base-white); }
.about-hero__sep { font-weight: 400; color: rgba(255, 255, 255, 0.4); letter-spacing: 0; }
.about-hero__crumbs [aria-current] { color: var(--lime-300); }

.about-hero__title {
  max-width: 1180px;
  font-weight: 600;
  font-size: clamp(40px, 5.2778vw, 76px);
  line-height: 0.96;
  letter-spacing: -0.04em;
}
.about-hero__title .line,
.about-hero__title .muted { display: block; }
.about-hero__title .muted { color: rgba(255, 255, 255, 0.5); }

.about-hero__cue {
  position: absolute; left: 0; right: 0; top: 712px;
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; line-height: normal; color: rgba(255, 255, 255, 0.7);
  --rdelay: 1.1s; --rdur: 0.9s;
}
.about-hero__cue-line { width: 48px; height: 1px; background: rgba(255, 255, 255, 0.5); flex: none; transform-origin: left; transition: transform 0.45s var(--ease-expo); }
.about-hero__cue:hover .about-hero__cue-line { transform: scaleX(1.4); }

/* --------------------------------------------------------------------------
   02 Editorial intro (scroll highlight)
   -------------------------------------------------------------------------- */
.about-intro { background: var(--base-white); padding: 160px 0 140px; }
.about-intro .container { display: flex; flex-direction: column; gap: 40px; }
.about-intro__text {
  max-width: 1180px;
  font-weight: 500;
  font-size: clamp(30px, 3.8889vw, 56px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--hl-muted);
}
.about-intro__text .hl-dark { color: var(--forest-950); }
.about-intro__text .hl-green { color: var(--forest-600); }
/* JS wraps words in .hl-word; they start muted and take their colour as the visitor scrolls */
.about-intro__text .hl-word { color: var(--hl-muted); transition: color 0.45s var(--ease-text); }
.about-intro__text .hl-word.is-lit { color: var(--hl-to); }

.about-intro__meta {
  margin: 0;
  display: flex; gap: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(15, 31, 16, 0.12);
  white-space: nowrap;
}
.about-intro__meta div { display: flex; flex-direction: column; gap: 6px; }
.about-intro__meta dt {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px; line-height: normal;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--neutral-500);
}
.about-intro__meta dd { margin: 0; font-weight: 500; font-size: 18px; line-height: normal; color: var(--forest-950); }

/* --------------------------------------------------------------------------
   03 Our story
   -------------------------------------------------------------------------- */
.about-story { background: var(--neutral-100); padding: 140px 0 160px; overflow: hidden; }
.about-story__inner { display: flex; flex-direction: column; gap: 120px; }
.story { display: flex; align-items: center; gap: clamp(40px, 6.6667vw, 96px); }
.story--reverse { flex-direction: row-reverse; }

.story__media {
  position: relative; margin: 0;
  flex: 0 0 48.4375%;            /* 620 / 1280 */
  aspect-ratio: 620 / 560;
  --ry: 56px; --rdur: 1s;
}
.story__media img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 16px;
}
.story__stat {
  position: absolute; top: 71.786%;   /* 402 / 560 */
  left: -32px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 24px;
  border-radius: 12px;
  background: var(--lime-300);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
  --ry: 24px; --rdelay: 0.35s;
}
.story--reverse .story__stat { left: auto; right: -32px; }
.story__stat-num {
  font-weight: 600; font-size: 56px; line-height: 1; letter-spacing: -0.04em; color: var(--forest-950);
}
.story__stat-label { font-weight: 500; font-size: 14px; line-height: normal; color: var(--forest-600); }

.story__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.story__text > :nth-child(2) { --rdelay: 0.12s; }
.story__text > :nth-child(3) { --rdelay: 0.24s; }
.story__text > :nth-child(4) { --rdelay: 0.36s; }
.story__title {
  font-weight: 600; font-size: clamp(32px, 3.3333vw, 48px); line-height: 1.05; letter-spacing: -0.03em;
  color: var(--forest-950);
}
.story__body { font-size: 18px; line-height: 1.6; color: var(--neutral-600); }
.story__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.story__tags li {
  padding: 8px 14px;
  border: 1px solid rgba(15, 31, 16, 0.2);
  border-radius: 999px;
  font-weight: 500; font-size: 13px; line-height: normal; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   04 Our services
   -------------------------------------------------------------------------- */
.about-services { background: var(--base-white); padding: 160px 0 120px; }
.about-services .container { display: flex; flex-direction: column; gap: 24px; }
.about-services__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.about-services__title {
  font-weight: 600; font-size: clamp(40px, 4.4444vw, 64px); line-height: 1; letter-spacing: -0.03em;
  white-space: nowrap;
}
.about-services__intro {
  max-width: 598px;
  font-size: 20px; line-height: 32px; color: var(--neutral-600);
  --rdelay: 0.12s;
}
/* Image-filled word: 314px at a 1280 column, 88px at 361 — scales with the column */
.about-services__word {
  font-weight: 700;
  font-size: min(314px, calc((100vw - 2 * var(--gutter)) * 0.2453));
  line-height: 0.88;
  letter-spacing: -0.06em;
  white-space: nowrap;
  color: transparent;
  background: url("../assets/rooted-fill.jpg") center / cover no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: 48px;           /* 24px spacer + 24px gap → 72 to the grid */
}
.about-services__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 72px 32px;
}
.service {
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  padding-top: 20px;
  border-top: 1px dashed var(--forest-950);
}
.service:nth-child(3n + 2) { --rdelay: 0.12s; }
.service:nth-child(3n + 3) { --rdelay: 0.24s; }
.service__num {
  font-family: var(--font-mono); font-weight: 500; font-size: 12px; line-height: 16px;
  letter-spacing: 0.04em; color: var(--neutral-500);
}
.service h3 {
  max-width: 330px;
  font-weight: 600; font-size: 24px; line-height: 1.15; letter-spacing: -0.015em; color: var(--forest-950);
}
.service p { max-width: 330px; font-size: 14px; line-height: 20px; color: var(--neutral-600); }

/* --------------------------------------------------------------------------
   Footer photo: full-bleed zoom-in as it enters (site motion vocabulary)
   -------------------------------------------------------------------------- */
.page-about .site-footer__media { overflow: hidden; }
.page-about [data-zoom] img { transform: scale(1.18); transition: transform 3.4s cubic-bezier(0, 0, 0.58, 1); }
.page-about [data-zoom].is-in img { transform: scale(1); }
.no-js .page-about [data-zoom] img { transform: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .about-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service:nth-child(n) { --rdelay: 0s; }
  .service:nth-child(2n) { --rdelay: 0.12s; }
  .about-services__head { flex-direction: column; }
}

@media (max-width: 900px) {
  .story, .story--reverse { flex-direction: column; align-items: stretch; gap: 20px; }
  .story__media { flex: none; aspect-ratio: auto; height: clamp(320px, 60vw, 480px); }
  .story__stat { top: auto; bottom: 16px; left: 16px; gap: 2px; padding: 14px 18px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); }
  .story--reverse .story__stat { right: auto; left: 16px; }
  .story__stat-num { font-size: 40px; }
  .story__stat-label { font-size: 12px; }
  .story__text { gap: 20px; }
}

@media (max-width: 600px) {
  .about-hero { height: 640px; }
  .about-hero__media::after {
    background: linear-gradient(180deg, rgba(15, 31, 16, 0.6) 0%, rgba(15, 31, 16, 0.2) 35%, rgba(15, 31, 16, 0.95) 100%);
  }
  .about-hero__content { top: 360px; gap: 18px; }
  .about-hero__crumbs ol { gap: 8px; font-size: 11px; }
  .about-hero__title { font-size: clamp(34px, 10.18vw, 40px); line-height: 1; letter-spacing: -0.03em; }
  .about-hero__cue { display: none; }

  .about-intro { padding: 72px 0; }
  .about-intro .container { gap: 28px; }
  .about-eyebrow { font-size: 11px; }
  .about-intro .about-eyebrow { letter-spacing: 0.04em; }
  .about-intro__text { line-height: 1.2; letter-spacing: -0.02em; }
  .about-intro__meta { flex-direction: column; gap: 16px; padding-top: 20px; }
  .about-intro__meta div { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
  .about-intro__meta dd { font-size: 15px; }

  .about-story { padding: 72px 0 88px; }
  .about-story__inner { gap: 72px; }
  .story__media { height: 320px; }
  .story__title { font-size: 32px; }
  .story__body { font-size: 15px; }
  .story__tags li { padding: 7px 12px; font-size: 12px; }

  .about-services { padding: 72px 0 80px; }
  .about-services .container { gap: 20px; }
  .about-services__head { gap: 20px; }
  .about-services__title { font-size: 40px; white-space: normal; }
  .about-services__intro { font-size: 16px; }
  .about-services__word { margin-bottom: 24px; }   /* 4px spacer + 20px gap */
  .about-services__grid { grid-template-columns: 1fr; gap: 28px; }
  .service:nth-child(n) { --rdelay: 0s; }
  .service h3 { max-width: none; font-size: 22px; }
  .service p { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero__media img, .page-about [data-zoom] img { animation: none; transform: none; }
}