/* Elk Run Homes — page sections
   One block per homepage section. Nothing here reaches outside its own section,
   so each can be lifted into a standalone Elementor section later. */

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

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(100svh, 980px);
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: 0;
  overflow: hidden;
  background: var(--c-forest-night);
  color: var(--text-on-dark);
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: -8% 0 -8%;
  z-index: -2;
  will-change: transform;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  transform: scale(1.12);
  animation: hero-settle 2600ms var(--ease-out) forwards;
}

@keyframes hero-settle { to { transform: scale(1); } }

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 28, 22, .68) 0%, rgba(20, 28, 22, .16) 30%, rgba(20, 28, 22, .74) 78%, rgba(20, 28, 22, .95) 100%),
    linear-gradient(96deg, rgba(20, 28, 22, .66) 0%, rgba(20, 28, 22, 0) 60%);
}

/* Faint grain so large flat gradients do not band. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .16;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.hero-inner { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }

.hero-copy { max-width: 44rem; }

.hero-copy h1 {
  color: var(--c-white);
  font-size: var(--fs-display);
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.032em;
  text-wrap: balance;
  text-shadow: 0 1px 40px rgba(12, 18, 13, .35);
}

/* The closing clause carries the idea, so it gets the italic and the brass.
   Everything before it stays upright and quiet. */
.hero-copy h1 em {
  color: var(--c-brass);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 90, "WONK" 1;
  font-weight: 200;
}

.hero-copy .lede {
  max-width: 38rem;
  margin-top: var(--space-m);
  color: rgba(255, 255, 255, .8);
}

/* Desktop: widen the copy so the H1 fills three longer lines. Greedy (not balance)
   because balance always packs the min line count into short even lines that never
   use the extra width. Balance stays on tablet/mobile, where it wraps more evenly. */
@media (min-width: 1024px) {
  .hero-copy { max-width: 50rem; }
  .hero-copy h1 { text-wrap: wrap; }
  .hero-copy .lede { max-width: 44rem; }
}
@media (min-width: 1280px) {
  .hero-copy { max-width: 58rem; }
  .hero-copy .lede { max-width: 46rem; }
}

.hero .btn-row { margin-top: var(--space-xl); }

/* ---------- Floating credential chip ---------- */

.hero-badge {
  position: absolute;
  right: var(--gutter);
  bottom: 12rem;
  z-index: 2;
  display: none;
  width: 14.5rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-l);
  background: rgba(24, 33, 27, .5);
  backdrop-filter: blur(12px) saturate(1.2);
  animation: badge-float 7s ease-in-out infinite;
}

@keyframes badge-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.hero-badge b {
  display: block;
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  font-variation-settings: "opsz" 72, "SOFT" 30, "WONK" 0;
  letter-spacing: -.015em;
  line-height: 1.25;
}

.hero-badge span {
  display: block;
  margin-top: .5rem;
  color: rgba(255, 255, 255, .68);
  font-size: .82rem;
  line-height: 1.5;
}

@media (min-width: 1100px) { .hero-badge { display: block; } }
@media (prefers-reduced-motion: reduce) { .hero-badge { animation: none; } }

/* ---------- Scroll cue ---------- */

.hero-cue {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: var(--space-xl);
  color: rgba(255, 255, 255, .62);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.hero-cue .track {
  position: relative;
  width: 58px;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, .22);
}
.hero-cue .track::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: var(--c-brass);
  animation: cue-run 2.4s var(--ease) infinite;
}

@keyframes cue-run {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) { .hero-cue .track::after { animation: none; } }

/* ============================================================
   Stat band
   ============================================================ */

.stat-band { background: var(--c-forest); color: var(--text-on-dark); }

.stat-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  background: var(--line-on-dark);
}

@media (min-width: 900px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }

.stat {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: clamp(1.7rem, 3vw, 2.6rem) clamp(1.1rem, 2.4vw, 2rem);
  background: var(--c-forest);
  transition: background-color var(--t-base) var(--ease);
}
.stat:hover { background: var(--c-olive); }

.stat .num {
  color: var(--c-brass);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat b {
  color: var(--c-white);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.stat span { color: var(--text-on-dark-muted); font-size: var(--fs-micro); line-height: 1.55; }

.proof-row {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
  padding: clamp(1.7rem, 3vw, 2.3rem) 0 clamp(1.9rem, 3.4vw, 2.7rem);
  border-top: 1px solid var(--line-on-dark);
}

@media (min-width: 760px) { .proof-row { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } }

.proof-item { display: flex; flex-direction: column; gap: .4rem; }

.proof-item b {
  color: var(--c-brass);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.proof-item span { color: var(--text-on-dark-muted); font-size: var(--fs-micro); line-height: 1.6; }

/* ============================================================
   Challenge — problem statement with a rule rail
   ============================================================ */

.challenge-grid {
  display: grid;
  gap: var(--space-l) var(--space-2xl);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .challenge-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-2xl); }
}

.challenge-list {
  display: grid;
  gap: 0;
  margin-top: var(--space-l);
  border-top: 1px solid var(--line);
}

.challenge-list li {
  display: grid;
  gap: .15rem .9rem;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-muted);
  font-size: var(--fs-small);
  transition: color var(--t-micro) var(--ease), padding-left var(--t-base) var(--ease);
}
.challenge-list li:hover { color: var(--text-strong); padding-left: .55rem; }

.challenge-list li b {
  color: var(--text-strong);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ============================================================
   Guide — stacked image pair + points
   ============================================================ */

.guide-grid {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 980px) {
  .guide-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); }
}

.guide-stack { position: relative; }

.guide-shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
}

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

.guide-shot-main { aspect-ratio: 4 / 5; }

.guide-shot-sub {
  display: none;
  position: absolute;
  right: -2.5rem;
  bottom: -2.5rem;
  width: 55%;
  aspect-ratio: 4 / 3;
  border: 6px solid var(--c-cream);
  box-shadow: var(--shadow-lift);
}

@media (min-width: 620px) { .guide-shot-sub { display: block; } }

/* Below 980px the grid is single-column, so the stack spans the full wrap and
   the negative offset pushes past the page edge instead of into a gutter. */
@media (max-width: 979px) { .guide-shot-sub { right: 0; } }

.guide-tag {
  position: absolute;
  left: -1rem;
  top: 1.75rem;
  z-index: 2;
  padding: .7rem 1.1rem;
  border-radius: var(--radius-s);
  background: var(--c-brass);
  color: var(--c-ink);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: var(--shadow-card);
}

/* Same single-column collapse as .guide-shot-sub: no gutter left to hang into. */
@media (max-width: 979px) { .guide-tag { left: 0; } }

.guide-note {
  position: relative;
  margin-top: var(--space-l);
  padding: clamp(1.4rem, 2.6vw, 1.9rem) clamp(1.4rem, 2.6vw, 2rem);
  border: 1px solid var(--line);
  border-left: 3px solid var(--c-brass);
  border-radius: var(--radius-m);
  background: var(--c-cream);
}

.guide-note .pill { margin-bottom: var(--space-2xs); background: var(--c-white); }

.guide-note h3 {
  margin-top: .65rem;
  font-size: clamp(1.25rem, 2.1vw, 1.55rem);
  line-height: 1.3;
}

.guide-note p { margin-top: .7rem; font-size: var(--fs-small); }

.guide-points {
  display: grid;
  gap: 0;
  margin-top: var(--space-l);
  padding-top: var(--space-2xs);
  border-top: 1px solid var(--line);
}

.guide-point {
  display: grid;
  gap: .25rem .9rem;
  grid-template-columns: 1fr;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
}

.guide-point b {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  font-variation-settings: "opsz" 24, "SOFT" 10, "WONK" 0;
}
.guide-point b::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--c-brass);
  transform: scale(0);
  transition: transform var(--t-base) var(--ease-spring);
}
.guide-point.is-visible b::before { transform: scale(1); }

.guide-point span { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.65; }

@media (min-width: 620px) {
  .guide-point { grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; }
}

/* ============================================================
   Plan — sticky visual, scroll-linked steps
   ============================================================ */

.plan { position: relative; overflow: hidden; }

.plan-grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
  margin-top: var(--space-xl);
}

@media (min-width: 980px) {
  .plan-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
}

.plan-sticky { position: relative; }

@media (min-width: 980px) {
  .plan-sticky { position: sticky; top: calc(var(--header-h) + 3rem); }
}

.plan-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--c-forest-deep);
}

@media (max-width: 979px) { .plan-visual { aspect-ratio: 16 / 10; } }

.plan-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity var(--t-slow) var(--ease), transform 2000ms var(--ease-out);
}
.plan-visual img.is-active { opacity: 1; transform: scale(1); }

.plan-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 28, 22, .1) 0%, rgba(20, 28, 22, .55) 70%, rgba(20, 28, 22, .85) 100%);
}

.plan-counter {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: .6rem;
  padding: 1.5rem;
  color: var(--c-white);
}
.plan-counter .now {
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1;
  line-height: .85;
  color: var(--c-brass);
  font-variant-numeric: tabular-nums;
}
.plan-counter .of { padding-bottom: .35rem; font-size: .8rem; letter-spacing: .14em; color: rgba(255, 255, 255, .6); text-transform: uppercase; }

.plan-rail {
  position: absolute;
  right: 1.25rem;
  top: 1.5rem;
  bottom: 1.5rem;
  z-index: 2;
  width: 2px;
  background: rgba(255, 255, 255, .18);
}
.plan-rail::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--plan-progress, 0.33) * 100%);
  background: var(--c-brass);
  transition: height var(--t-base) var(--ease);
}

.plan-steps { display: grid; gap: 0; }

.plan-step {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0 clamp(1.6rem, 3vw, 2.4rem) clamp(2.75rem, 5vw, 4rem);
  border-top: 1px solid var(--line-on-dark);
  transition: opacity var(--t-base) var(--ease);
}
.plan-step:last-child { border-bottom: 1px solid var(--line-on-dark); }

.plan-step::before {
  content: attr(data-step);
  position: absolute;
  left: 0;
  top: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--c-brass);
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  font-variation-settings: "opsz" 24, "SOFT" 0, "WONK" 0;
  letter-spacing: .08em;
  opacity: .55;
  transition: opacity var(--t-base) var(--ease);
}

.plan-step::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 0;
  height: 2px;
  background: var(--c-brass);
  transition: width var(--t-slow) var(--ease-out);
}

.plan-step.is-active::after { width: 100%; }
.plan-step.is-active::before { opacity: 1; }

.plan-step h3 { margin-bottom: var(--space-2xs); }

.plan-step .meta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: var(--space-s);
  color: var(--c-brass);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ============================================================
   Services explorer
   ============================================================ */

.svc {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr;
  margin-top: var(--space-xl);
}

@media (min-width: 980px) {
  .svc { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
}

.svc-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  order: 2;
}

@media (min-width: 980px) { .svc-list { order: 1; } }

.svc-item { border-bottom: 1px solid var(--line); }

.svc-trigger {
  display: grid;
  gap: .3rem 1.1rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  padding: 1.2rem 0;
  text-align: left;
  transition: padding-left var(--t-base) var(--ease);
}
.svc-item:hover .svc-trigger,
.svc-item.is-active .svc-trigger { padding-left: .6rem; }

.svc-trigger .idx {
  color: var(--c-brass-deep);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
}

.svc-trigger h3 {
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem);
  transition: color var(--t-micro) var(--ease);
}
.svc-item.is-active .svc-trigger h3 { color: var(--c-bark); }

.svc-trigger .plus {
  position: relative;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: background-color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease), transform var(--t-base) var(--ease-spring);
}
.svc-trigger .plus::before,
.svc-trigger .plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--t-base) var(--ease-spring), opacity var(--t-micro) var(--ease);
}
.svc-trigger .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.svc-item.is-active .plus { background: var(--c-brass); border-color: var(--c-brass); transform: rotate(180deg); }
.svc-item.is-active .plus::after { opacity: 0; }

.svc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) var(--ease);
}
.svc-item.is-active .svc-body { grid-template-rows: 1fr; }

.svc-body > div { overflow: hidden; }

.svc-body p {
  max-width: 54ch;
  padding-bottom: 1.1rem;
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: 1.7;
}

.svc-media {
  position: relative;
  order: 1;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--c-bone);
  box-shadow: var(--shadow-card);
}

@media (min-width: 980px) {
  .svc-media { order: 2; position: sticky; top: calc(var(--header-h) + 3rem); aspect-ratio: 4 / 4.4; }
}

.svc-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity var(--t-base) var(--ease), transform 1600ms var(--ease-out);
}
.svc-media img.is-active { opacity: 1; transform: scale(1); }

.svc-media-label {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  padding: .5rem 1rem;
  border-radius: var(--radius-pill);
  background: rgba(20, 28, 22, .68);
  backdrop-filter: blur(8px);
  color: var(--c-white);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ============================================================
   Area bento grid
   ============================================================ */

.area-grid {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: 1fr;
  margin-top: var(--space-xl);
}

@media (min-width: 680px) { .area-grid { grid-template-columns: repeat(2, 1fr); } }

.area-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 19rem;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  overflow: hidden;
  border-radius: var(--radius-m);
  color: var(--c-white);
  isolation: isolate;
}

@media (min-width: 1020px) {
  .area-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 15.5rem; }

  /* The stacked min-height would otherwise exceed the row track and let cards
     bleed over the row below, since grid items default to min-height:auto. */
  .area-card { min-height: 0; }

  .area-card:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .area-card:nth-child(2) { grid-column: span 2; }
  .area-card:nth-child(5) { grid-column: span 2; }
  .area-card:nth-child(6) { grid-column: span 2; }
}

.area-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}

.area-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* The band over the text is sized in rem, not %, because the desktop grid renders
     these cards at both 248px and 512px. With % stops the brass label on the tall
     card landed where the scrim was still ~0.5 alpha and dropped to 2.3:1 on bright sky. */
  background:
    linear-gradient(to top, rgba(20, 28, 22, .95) 0, rgba(20, 28, 22, .88) 8rem, rgba(20, 28, 22, 0) 15rem),
    linear-gradient(180deg, rgba(20, 28, 22, .18) 0%, rgba(20, 28, 22, .48) 100%);
  transition: background var(--t-base) var(--ease);
}

.area-card:hover img { transform: scale(1.07); }

/* Hover/focus reveals the blurb, which pushes the label higher up the card. */
.area-card:hover::after,
.area-card:focus-visible::after {
  background:
    linear-gradient(to top, rgba(20, 28, 22, .96) 0, rgba(20, 28, 22, .9) 14rem, rgba(20, 28, 22, 0) 22rem),
    linear-gradient(180deg, rgba(20, 28, 22, .28) 0%, rgba(20, 28, 22, .55) 100%);
}

.area-card .state {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  color: var(--c-brass);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.area-card .state::before { content: ""; width: 1.1rem; height: 1px; background: currentColor; }

/* The mosaic's single-column cards are ~219px wide at 1020px, leaving 170px inside the
   padding. "Eastern Washington" needs ~183px at the default tracking, so it wrapped to two
   lines and shoved the heading down out of the scrim band. Tightened for the whole grid
   rather than just the narrow cards so all six labels stay identical side by side. */
@media (min-width: 1020px) {
  .area-card .state { gap: .4rem; font-size: .63rem; letter-spacing: .14em; }
  .area-card .state::before { width: .95rem; }
}

.area-card h3 { color: var(--c-white); font-size: 1.4rem; }
.area-card:nth-child(1) h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }

.area-card .go {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transition: max-height var(--t-base) var(--ease), margin-top var(--t-base) var(--ease), opacity var(--t-base) var(--ease), gap var(--t-micro) var(--ease);
}
.area-card:hover .go,
.area-card:focus-visible .go { max-height: 3rem; margin-top: var(--space-xs); opacity: 1; }
.area-card:hover .go { gap: .8rem; }

/* Touch devices get no hover, so the only cue that the card is a link stays hidden.
   Opening it also means the blurb and the cue are permanently expanded, which runs the
   text block ~220px tall and pushes the brass label clear of the default scrim band. */
@media (hover: none) {
  .area-card .go { max-height: 3rem; margin-top: var(--space-xs); opacity: 1; }

  .area-card::after {
    background:
      linear-gradient(to top, rgba(20, 28, 22, .95) 0, rgba(20, 28, 22, .9) 16rem, rgba(20, 28, 22, 0) 23rem),
      linear-gradient(180deg, rgba(20, 28, 22, .18) 0%, rgba(20, 28, 22, .48) 100%);
  }
}

/* Taller card so the photo still reads above that text block. */
@media (hover: none) and (max-width: 1019px) {
  .area-card { min-height: 23rem; }
}

/* Large touch screens keep the mosaic but must be free to grow, or the expanded
   text overflows the fixed 15.5rem row and the label is clipped off the top. */
@media (hover: none) and (min-width: 1020px) {
  .area-grid { grid-auto-rows: minmax(15.5rem, auto); }
}

/* Corner marker that draws in on hover */
.area-card .corner {
  position: absolute;
  right: 1.1rem;
  top: 1.1rem;
  width: 34px;
  height: 34px;
  border-top: 1px solid rgba(255, 255, 255, .5);
  border-right: 1px solid rgba(255, 255, 255, .5);
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.area-card:hover .corner { opacity: 1; transform: none; }

/* ============================================================
   Resource cards
   ============================================================ */

.resource-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: 1fr;
  margin-top: var(--space-xl);
}

@media (min-width: 760px) { .resource-grid { grid-template-columns: repeat(3, 1fr); } }

.resource-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--c-white);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.resource-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: transparent; }

.resource-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.resource-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.resource-card:hover .resource-media img { transform: scale(1.06); }

.resource-number {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: .5rem .9rem;
  background: var(--c-brass);
  color: var(--c-ink);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
}

.resource-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
}

.resource-body small {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--c-bark);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.resource-body h3 { margin-bottom: var(--space-2xs); font-size: 1.22rem; }
.resource-body p { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.7; }
.resource-body .text-link { margin-top: auto; padding-top: var(--space-m); align-self: flex-start; }

/* ============================================================
   Closing CTA
   ============================================================ */

.closing-cta {
  position: relative;
  padding-block: clamp(6rem, 11vw, 11rem);
  overflow: hidden;
  color: var(--c-white);
  isolation: isolate;
  text-align: center;
}

.closing-media { position: absolute; inset: -10% 0 -10%; z-index: -2; will-change: transform; }

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

.closing-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 70% at 50% 45%, rgba(20, 28, 22, .55) 0%, rgba(20, 28, 22, .9) 100%),
    linear-gradient(180deg, rgba(20, 28, 22, .7) 0%, rgba(20, 28, 22, .78) 100%);
}

.closing-copy { max-width: 48rem; margin-inline: auto; }
.closing-copy .eyebrow { justify-content: center; }
.closing-copy h2 {
  color: var(--c-white);
  font-size: var(--fs-h1);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
}
.closing-copy p { margin-top: var(--space-m); color: rgba(255, 255, 255, .8); font-size: var(--fs-lede); line-height: 1.62; }
.closing-cta .btn-row { justify-content: center; margin-top: var(--space-xl); }

.closing-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: var(--space-xl);
  color: rgba(255, 255, 255, .55);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.closing-mark::before,
.closing-mark::after { content: ""; width: clamp(2rem, 8vw, 5rem); height: 1px; background: rgba(255, 255, 255, .28); }

/* ============================================================
   Fact band
   ============================================================ */

.fact-band {
  position: relative;
  padding-block: clamp(3rem, 5.5vw, 4.75rem);
  overflow-x: clip;
  background: var(--c-forest-deep);
  color: var(--text-on-dark);
}

.fact-head { display: flex; flex-direction: column; gap: .55rem; margin-bottom: clamp(1.5rem, 3vw, 2.3rem); }
.fact-head > :is(h2, h3, h4, div) { color: var(--c-white); font-size: var(--fs-h3); }

.fact-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  background: var(--line-on-dark);
  border-block: 1px solid var(--line-on-dark);
}

@media (min-width: 900px) { .fact-grid { grid-template-columns: repeat(4, 1fr); } }

.fact {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: clamp(1.4rem, 2.6vw, 2.1rem) clamp(1.05rem, 2.2vw, 1.8rem);
  background: var(--c-forest-deep);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--t-base) var(--ease);
}
.fact:hover { background: var(--c-olive); }

.fact .val {
  color: var(--c-brass);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.9vw, 2.25rem);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.fact b { color: var(--c-white); font-size: .95rem; font-weight: 700; letter-spacing: .01em; }
.fact span:not(.val) { color: var(--text-on-dark-muted); font-size: var(--fs-micro); line-height: 1.55; }

.fact-note {
  margin-top: clamp(1.1rem, 2.4vw, 1.7rem);
  max-width: 68ch;
  color: var(--text-on-dark-muted);
  font-size: var(--fs-small);
  line-height: 1.65;
}

.fact-band .btn-row { margin-top: clamp(1.4rem, 2.6vw, 2rem); }

/* ============================================================
   Show home gallery
   ============================================================ */

.showhome-gallery {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: 1fr;
  margin-top: var(--space-xl);
}

/* Shot order is authored to fill three columns exactly, so only the two-column
   range leaves a gap that a wide shot cannot fit into. The row track is fixed at
   roughly a 3:2 crop of one column plus a caption line, so every shot in a row
   ends on the same baseline instead of leaving the surplus below the short ones. */
@media (min-width: 680px) {
  .showhome-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense;
    grid-auto-rows: clamp(14rem, 34vw, 21rem);
  }
}

@media (min-width: 1020px) {
  .showhome-gallery {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row;
    grid-auto-rows: clamp(14rem, 22vw, 19rem);
  }
}

.shot { display: flex; flex-direction: column; gap: .55rem; margin: 0; }

.shot > picture,
.shot-open {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: var(--c-bone);
}

.shot-open { width: 100%; padding: 0; border: 0; color: var(--c-white); cursor: zoom-in; }

.shot img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}

.shot-open:hover img,
.shot-open:focus-visible img { transform: scale(1.05); }

.shot-zoom {
  position: absolute;
  right: .7rem;
  bottom: .7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background: rgba(20, 28, 22, .62);
  opacity: 0;
  transform: translateY(.35rem);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.shot-open:hover .shot-zoom,
.shot-open:focus-visible .shot-zoom { opacity: 1; transform: none; }

.shot figcaption { color: var(--c-moss); font-size: var(--fs-micro); line-height: 1.5; }

/* Mosaic sizes. Every shot is one row tall and the picture fills whatever the row
   track leaves after the caption, so variety comes from the column span alone and
   no shot can come up short of its neighbours. */
@media (min-width: 680px) {
  .shot > picture,
  .shot-open { flex: 1 1 auto; min-height: 0; }

  .shot img { position: absolute; inset: 0; aspect-ratio: auto; }

  .shot--wide,
  .shot--full { grid-column: span 2; }
}

@media (min-width: 1020px) {
  .shot--full { grid-column: span 3; }
}

/* ============================================================
   Lightbox
   ============================================================ */

body.lb-open { overflow: hidden; }

.lb {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  padding: clamp(3.5rem, 7vw, 4.5rem) clamp(1rem, 4vw, 3rem) clamp(1.25rem, 4vw, 2.5rem);
  background: rgba(14, 20, 16, .95);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}
.lb.is-open { opacity: 1; }

.lb-img {
  max-width: min(100%, 1400px);
  max-height: 76vh;
  border-radius: var(--radius-m);
  object-fit: contain;
}

.lb-cap {
  max-width: 62ch;
  color: rgba(237, 233, 223, .8);
  font-size: var(--fs-small);
  line-height: 1.55;
  text-align: center;
}

.lb-count {
  color: rgba(237, 233, 223, .48);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.lb-btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(233, 228, 218, .22);
  border-radius: var(--radius-pill);
  background: rgba(20, 28, 22, .6);
  color: var(--c-white);
  cursor: pointer;
  transition: background-color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.lb-btn:hover { background: var(--c-brass); border-color: var(--c-brass); color: var(--c-forest-night); }
.lb-btn[hidden] { display: none; }
.lb-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.lb-close { top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem); }
.lb-prev { top: 50%; left: clamp(.5rem, 2vw, 1.75rem); transform: translateY(-50%); }
.lb-next { top: 50%; right: clamp(.5rem, 2vw, 1.75rem); transform: translateY(-50%); }

@media (max-width: 639px) {
  .lb-btn { width: 2.6rem; height: 2.6rem; }
  .lb-img { max-height: 62vh; }
}

/* ============================================================
   Show home finishes
   ============================================================ */

.finish-groups {
  display: grid;
  gap: var(--space-xl) var(--space-2xl);
  grid-template-columns: 1fr;
  margin-top: var(--space-xl);
}

@media (min-width: 860px) { .finish-groups { grid-template-columns: repeat(2, 1fr); } }

.finish-group > h3 {
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--c-brass);
  color: var(--c-forest);
  font-family: var(--font-text);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.finish-list { margin: 0; padding: 0; list-style: none; }

.finish {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem 1rem;
  padding: .85rem .35rem;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--t-micro) var(--ease);
}
.finish:hover { background: rgba(196, 164, 104, .08); }

.finish-name { order: 1; flex: 1 1 auto; color: var(--c-ink); font-size: 1rem; font-weight: 600; }

/* Forced onto its own line so the product link stays beside the item name. */
.finish-meta { order: 3; flex: 1 0 100%; color: var(--c-moss); font-size: var(--fs-micro); line-height: 1.5; }

.finish-link {
  order: 2;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--c-bark);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.finish-link:hover { color: var(--c-brass-deep); }
/* The label is only ~22px tall. Rows clear each other by 56px, so grow the tap
   target into that dead space and cancel it again with the negative margin. */
.finish-link { padding-block: 11px; margin-block: -11px; }
.finish-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.finish-note { margin-top: var(--space-l); max-width: 70ch; color: var(--c-moss); font-size: var(--fs-small); line-height: 1.65; }

/* ============================================================
   3D tour embed
   ============================================================ */

.tour-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-top: var(--space-xl);
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--c-forest-deep);
  isolation: isolate;
}

.tour-frame--4-3 { aspect-ratio: 4 / 3; }
.tour-frame--21-9 { aspect-ratio: 21 / 9; }
.tour-frame--1-1 { aspect-ratio: 1 / 1; }

.tour-frame picture { display: block; width: 100%; height: 100%; }
.tour-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease-out); }
.tour-frame:hover img { transform: scale(1.04); }

.tour-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 28, 22, .22), rgba(20, 28, 22, .55));
  pointer-events: none;
  transition: background var(--t-base) var(--ease);
}
.tour-frame.is-live::after { content: none; }

.tour-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1.6rem;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(233, 228, 218, .3);
  border-radius: var(--radius-pill);
  background: rgba(20, 28, 22, .62);
  color: var(--c-white);
  font-family: var(--font-text);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.tour-frame:hover .tour-play { background: var(--c-brass); border-color: var(--c-brass); color: var(--c-forest-night); }

.tour-play-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .16);
}
.tour-frame:hover .tour-play-mark { background: rgba(24, 33, 27, .18); }

.tour-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.tour-note { margin-top: var(--space-m); color: var(--c-moss); font-size: var(--fs-small); line-height: 1.6; }

/* Dark sections */
.section-dark .shot figcaption,
.section-dark .finish-meta,
.section-dark .finish-note,
.section-dark .tour-note { color: var(--text-on-dark-muted); }
.section-dark .finish-name { color: var(--text-on-dark); }
.section-dark .finish { border-color: var(--line-on-dark); }
.section-dark .finish-group > h3,
.section-dark .finish-link { color: var(--c-brass); }