/* ============================================================
   Ponderosa Pixels — Home page section styles
   Loaded after site.css; assumes tokens & utilities exist.
   ============================================================ */

/* ============================================================
   1. HERO  (full-bleed, 100vh)
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: var(--color-charcoal);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  /* vertical overscan so the parallax translate never exposes a hard edge */
  inset: -14% 0;
  z-index: 0;
  overflow: hidden;
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Layered overlay — dark at bottom-left for text protection,
   transparent toward the upper-right where the eye enters */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(135deg,
      rgba(31, 67, 54, 0.78) 0%,
      rgba(31, 67, 54, 0.55) 28%,
      rgba(17, 19, 19, 0.30) 60%,
      rgba(17, 19, 19, 0.10) 100%),
    linear-gradient(to top,
      rgba(17, 19, 19, 0.65) 0%,
      rgba(17, 19, 19, 0)    45%);
  pointer-events: none;
}

/* Top bar — bare logo + nothing else (real nav appears on scroll) */
.hero__top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(24px, 3vw, 40px) clamp(20px, 4vw, 64px);
}
.hero__logo {
  height: 32px;
  display: inline-flex;
}
.hero__logo img { height: 100%; width: auto; }

/* Type composition — anchored bottom-left, asymmetric */
.hero__content {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: clamp(48px, 8vw, 120px) clamp(20px, 4vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
}

.hero__text { max-width: 920px; }
.hero__headline {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: 0.98;
  color: var(--color-stone);
  font-size: clamp(48px, 9vw, 124px);
  margin-bottom: clamp(20px, 3vw, 32px);
}
.hero__headline .accent {
  color: var(--color-canyon);
  font-style: italic;
  font-weight: var(--fw-regular);
}
.hero__sub {
  font-family: var(--font-primary);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: var(--lh-body);
  color: rgba(245, 241, 234, 0.82);
  max-width: 56ch;
  margin-bottom: clamp(28px, 4vw, 40px);
}
.hero__cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

/* Bottom-right scroll indicator with thin animated line */
.hero__scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.7);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding-bottom: 8px;
  align-self: end;
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 64px;
  background: linear-gradient(to bottom,
    rgba(245, 241, 234, 0.6) 0%,
    rgba(245, 241, 234, 0.6) 50%,
    transparent 100%);
  position: relative;
  animation: scrollLine 2.6s var(--ease-cinematic) infinite;
}
@keyframes scrollLine {
  0%   { transform: translateY(-12px); opacity: 0.0; }
  30%  { opacity: 1; }
  100% { transform: translateY(8px); opacity: 0.0; }
}

@media (max-width: 768px) {
  .hero__scroll { display: none; }
  .hero__content { grid-template-columns: 1fr; padding-bottom: 64px; }
}

/* ============================================================
   2. BRAND STATEMENT  (Stone, image-left / text-right)
   ============================================================ */
.brand-statement {
  background: var(--bg-primary);
  padding: clamp(96px, 14vw, 192px) 0;
  position: relative;
  overflow: hidden;
}
.brand-statement .container { position: relative; }

.brand-statement__grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 5vw, 96px);
  align-items: center;
}

.brand-statement__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
}
.brand-statement__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.6s var(--ease-cinematic);
}
.brand-statement:hover .brand-statement__media img { transform: scale(1.05); }
.brand-statement__media::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 24%; height: 1px;
  background: var(--color-canyon);
}
.brand-statement__media::before {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 1px; height: 24%;
  background: var(--color-canyon);
  z-index: 1;
}

.brand-statement__body { display: flex; flex-direction: column; gap: 24px; }
.brand-statement__meta { display: flex; flex-direction: column; gap: 16px; }

.brand-statement__body h2 {
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  max-width: 18ch;
}
.brand-statement__body h2 .canyon { color: var(--color-canyon); font-style: italic; font-weight: var(--fw-regular); }

.brand-statement__prose p {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
  color: var(--fg-primary);
  max-width: 52ch;
}
.brand-statement__prose p + p { margin-top: 18px; }

@media (max-width: 1024px) {
  .brand-statement__grid { grid-template-columns: 1fr; gap: 40px; }
  .brand-statement__media { aspect-ratio: 4 / 3; }
}

/* ============================================================
   3. SERVICE CHAPTERS  (three full-bleed sections)
   ============================================================ */
.chapter {
  position: relative;
  padding: clamp(80px, 10vw, 144px) 0;
  overflow: hidden;
}

.chapter--dark {
  background: var(--color-pine);
  color: var(--color-stone);
}
.chapter--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../assets/patterns/topo_map_overlay_dark_with_transparency.svg');
  background-size: 1400px;
  background-repeat: repeat;
  opacity: 0.07;
  pointer-events: none;
}
.chapter--dark h2,
.chapter--dark p { color: var(--color-stone); }

.chapter--light { background: var(--bg-primary); }

.chapter__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
}
.chapter--reverse .chapter__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.chapter--reverse .chapter__media { order: 2; }
.chapter--reverse .chapter__text  { order: 1; }

.chapter__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
}
.chapter__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.4s var(--ease-cinematic);
}
.chapter:hover .chapter__media img { transform: scale(1.06); }

/* Canyon corner accent on media */
.chapter__media::after {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 24%; height: 1px;
  background: var(--color-canyon);
}
.chapter__media::before {
  content: "";
  position: absolute;
  bottom: -1px; right: -1px;
  width: 1px; height: 24%;
  background: var(--color-canyon);
  z-index: 1;
}

.chapter__text { display: flex; flex-direction: column; gap: 24px; }
.chapter__numeral {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: clamp(56px, 7vw, 96px);
  letter-spacing: var(--ls-tight);
  line-height: 0.85;
  color: var(--color-canyon);
  font-variant-numeric: oldstyle-nums;
}
.chapter__label { color: var(--color-sage); margin-top: -8px; }
.chapter__title {
  font-family: var(--font-primary);
  font-size: clamp(30px, 3.8vw, 52px);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  max-width: 16ch;
}
.chapter__title .canyon { color: var(--color-canyon); font-style: italic; font-weight: var(--fw-regular); }
.chapter__prose p {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
  max-width: 52ch;
  color: inherit;
  opacity: 0.92;
}

/* Chapter III — full-bleed photo with text overlay */
.chapter--feature {
  padding: 0;
  background: var(--color-charcoal);
  min-height: 86vh;
  display: flex;
}
.chapter--feature .chapter__feature {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  isolation: isolate;
  min-height: inherit;
}
.chapter--feature .chapter__feature-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.chapter--feature .chapter__feature-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.6s var(--ease-cinematic);
}
.chapter--feature:hover .chapter__feature-media img { transform: scale(1.08); }
.chapter--feature .chapter__feature-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(120deg,
      rgba(17, 19, 19, 0.72) 0%,
      rgba(17, 19, 19, 0.45) 35%,
      rgba(17, 19, 19, 0.10) 70%);
  pointer-events: none;
}
.chapter--feature .chapter__feature-text {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(48px, 8vw, 120px) clamp(20px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 760px;
  color: var(--color-stone);
}
.chapter--feature h2 { color: var(--color-stone); }
.chapter--feature p { color: rgba(245, 241, 234, 0.92); }

@media (max-width: 768px) {
  .chapter__grid { grid-template-columns: 1fr; gap: 28px; }
  .chapter--reverse .chapter__media { order: 1; }
  .chapter--reverse .chapter__text  { order: 2; }
  .chapter__media { aspect-ratio: 3 / 4; }
  .chapter--feature { min-height: 72vh; }
}

/* ============================================================
   4. PORTFOLIO TEASER  (asymmetric editorial grid)
   ============================================================ */
.portfolio-teaser {
  background: var(--bg-primary);
  padding: clamp(96px, 12vw, 160px) 0 clamp(80px, 10vw, 128px);
}
.portfolio-teaser__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.portfolio-teaser__head h2 {
  font-size: clamp(36px, 5vw, 72px);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}
.portfolio-teaser__head h2 .canyon { color: var(--color-canyon); font-style: italic; font-weight: var(--fw-regular); }
.portfolio-teaser__head .meta {
  font-size: var(--fs-body);
  color: var(--fg-secondary);
  max-width: 38ch;
  line-height: var(--lh-body);
  justify-self: end;
  text-align: left;
  padding-bottom: 8px;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 14vw;
  gap: 16px;
}
.portfolio-grid figure {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--color-sand);
}
.portfolio-grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-cinematic);
}
.portfolio-grid figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(17, 19, 19, 0.35) 100%);
  opacity: 0;
  transition: opacity 320ms var(--ease-cinematic);
}
.portfolio-grid figure:hover img { transform: scale(1.06); }
.portfolio-grid figure:hover::after { opacity: 1; }
.portfolio-grid figcaption {
  position: absolute;
  left: 18px; bottom: 16px;
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-stone);
  z-index: 2;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 360ms var(--ease-cinematic), transform 360ms var(--ease-cinematic);
}
.portfolio-grid figure:hover figcaption { opacity: 1; transform: translateY(0); }

/* Asymmetric area placement: 7 tiles total */
.portfolio-grid .pg-1 { grid-column: span 4; grid-row: span 3; }
.portfolio-grid .pg-2 { grid-column: span 2; grid-row: span 2; }
.portfolio-grid .pg-3 { grid-column: span 2; grid-row: span 1; }
.portfolio-grid .pg-4 { grid-column: span 2; grid-row: span 2; }
.portfolio-grid .pg-5 { grid-column: span 2; grid-row: span 2; }
.portfolio-grid .pg-6 { grid-column: span 2; grid-row: span 2; }
.portfolio-grid .pg-7 { grid-column: span 2; grid-row: span 2; }

.portfolio-teaser__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(36px, 4vw, 56px);
}

@media (max-width: 1024px) {
  .portfolio-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 18vw; }
  .portfolio-grid .pg-1 { grid-column: span 4; grid-row: span 2; }
  .portfolio-grid .pg-2 { grid-column: span 2; grid-row: span 2; }
  .portfolio-grid .pg-3 { grid-column: span 2; grid-row: span 1; }
  .portfolio-grid .pg-4 { grid-column: span 2; grid-row: span 1; }
  .portfolio-grid .pg-5 { grid-column: span 2; grid-row: span 2; }
  .portfolio-grid .pg-6 { grid-column: span 2; grid-row: span 2; }
  .portfolio-grid .pg-7 { grid-column: span 4; grid-row: span 2; }
}

@media (max-width: 768px) {
  .portfolio-teaser__head { grid-template-columns: 1fr; gap: 18px; }
  .portfolio-teaser__head .meta { justify-self: start; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 36vw; gap: 10px; }
  .portfolio-grid .pg-1 { grid-column: span 2; grid-row: span 2; }
  .portfolio-grid .pg-2,
  .portfolio-grid .pg-3,
  .portfolio-grid .pg-4,
  .portfolio-grid .pg-5,
  .portfolio-grid .pg-6,
  .portfolio-grid .pg-7 { grid-column: span 1; grid-row: span 1; }
}

/* ============================================================
   5. STAT STRIP  (Pine band, single horizontal row of 4 cells)
   ============================================================ */
.stat-strip {
  background: var(--color-pine);
  color: var(--color-stone);
  padding: clamp(72px, 9vw, 120px) 0;
  position: relative;
  overflow: hidden;
}
.stat-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../assets/patterns/topo_map_overlay_dark_with_transparency.svg');
  background-size: 1200px;
  background-repeat: repeat;
  opacity: 0.07;
  pointer-events: none;
}
.stat-strip .container { position: relative; }

.stat-strip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.stat-cell {
  padding: 8px clamp(20px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.stat-cell + .stat-cell::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 1px;
  background: rgba(145, 163, 146, 0.32);
}
.stat-cell__top {
  font-family: var(--font-primary);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--color-stone);
}
.stat-cell__top .canyon { color: var(--color-canyon); }
.stat-cell__bottom {
  font-family: var(--font-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-sage);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .stat-strip__grid { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .stat-cell { padding: 12px 18px; }
  /* Drop vertical dividers; replace with horizontal lines under top row */
  .stat-cell + .stat-cell::before { display: none; }
}

/* ============================================================
   6. CONTACT CTA  (dramatic Pine section with Canyon accent)
   ============================================================ */
.contact-cta {
  position: relative;
  background: var(--color-pine);
  color: var(--color-stone);
  padding: clamp(120px, 16vw, 240px) 0;
  overflow: hidden;
  isolation: isolate;
}

/* Canyon-toned glow seeping in from bottom-right */
.contact-cta::before {
  content: "";
  position: absolute;
  bottom: -30%; right: -20%;
  width: 80%; height: 130%;
  background: radial-gradient(closest-side,
    rgba(190, 107, 75, 0.45) 0%,
    rgba(190, 107, 75, 0.12) 40%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.contact-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../assets/patterns/topo_map_overlay_dark_with_transparency.svg');
  background-size: 1500px;
  background-repeat: repeat;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.contact-cta .container { position: relative; z-index: 1; }

.contact-cta__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 48px);
  max-width: 18ch;
}
.contact-cta__eyebrow { color: var(--color-sage); }
.contact-cta__headline {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: clamp(48px, 8vw, 112px);
  line-height: 0.96;
  letter-spacing: var(--ls-tight);
  color: var(--color-stone);
  max-width: 14ch;
}
.contact-cta__headline .canyon { color: var(--color-canyon); font-style: italic; font-weight: var(--fw-regular); }

.contact-cta__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 12px;
}