/* =====================================================
   capital-region.css  —  cr- prefix
   ===================================================== */

/* =====================
   REVEAL
   ===================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.in { opacity: 1; transform: none; }
.cr-d1 { transition-delay: 0.12s; }
.cr-d2 { transition-delay: 0.22s; }

/* =====================
   SHARED UTILITIES
   ===================== */
.cr-h2 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(38px, 5vw, 66px);
  text-transform: uppercase;
  color: #F4F4F4;
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
}
.cr-h2 em {
  color: #00BDFF;
  font-style: normal;
}

.cr-body {
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 300;
  font-size: clamp(17.5px, 1.6vw, 18px);
  line-height: 1.7;
  color: #B0B2B5;
  margin: 0 0 28px;
}

.cr-btn-primary {
  display: inline-block;
  background: #00BDFF;
  color: #161719;
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  padding: 16px 36px;
  border-radius: 0 24px 24px 24px;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.cr-btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* =====================
   HERO
   ===================== */
.cr-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #161719;
}

.cr-hero__photo {
  position: absolute;
  inset: 0;
  background: url('/assets/capital_region_photos/albany.jpg') no-repeat center center;
  background-size: cover;
  opacity: 0.55;
  pointer-events: none;
}

.cr-hero__grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(22,23,25,0.96) 0%,
    rgba(22,23,25,0.5)  45%,
    rgba(22,23,25,0.15) 100%
  );
  pointer-events: none;
}

.cr-hero__wrap {
  position: relative;
  z-index: 1;
  max-width: var(--wrap-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 48px 80px;
}

.cr-hero__pre {
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 500;
  font-size: clamp(14px, 1.4vw, 18px);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #00BDFF;
  margin: 0 0 12px;
}

.cr-hero__h1 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(60px, 10vw, 130px);
  text-transform: uppercase;
  color: #F4F4F4;
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
}

.cr-hero__sub {
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 1.8vw, 22px);
  color: #00BDFF;
  margin: 0;
  font-style: italic;
}

/* =====================
   LOCATION & COST (merged)
   ===================== */
.cr-location {
  background: #202124;
  padding: 72px 48px;
}

.cr-location__inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
}

.cr-location__header {
  max-width: 760px;
  margin-bottom: 56px;
}

.cr-distances {
  margin-bottom: 40px;
}

.cr-distances__title {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 2.5vw, 32px);
  text-transform: uppercase;
  color: #F4F4F4;
  line-height: 1;
  text-align: center;
  margin-bottom: 20px;
}

.cr-distance-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid rgba(244,244,244,0.1);
}

.cr-distance-city {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 2.5vw, 32px);
  text-transform: uppercase;
  color: #F4F4F4;
  line-height: 1;
}

.cr-distance-time {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 2.5vw, 32px);
  text-transform: uppercase;
  color: #00BDFF;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}


/* =====================
   SARATOGA & SUMMER
   ===================== */
.cr-saratoga {
  background: #161719;
  padding: 100px 48px;
}

.cr-saratoga__inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.cr-saratoga__photo {
  position: relative;
}

.cr-saratoga__photo img {
  width: 100%;
  height: auto;
  display: block;
}

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

.cr-feature-list li {
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 300;
  padding: 10px 0;
  border-bottom: 1px solid rgba(244,244,244,0.08);
  display: flex;
  align-items: center;
  gap: 12px;
}
.cr-feature-list li:last-child { border-bottom: none; }

.cr-feature-list li::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background: #00BDFF;
  border-radius: 50%;
  flex-shrink: 0;
}

/* =====================
   OUTDOORS
   ===================== */
.cr-outdoors {
  background: #202124;
  padding: 100px 48px;
}

.cr-outdoors__inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.cr-outdoors__photo {
  position: relative;
}

.cr-outdoors__photo img {
  width: 100%;
  height: auto;
  display: block;
}

.cr-outdoor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.cr-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #00BDFF;
  border: 1px solid rgba(0,189,255,0.3);
  padding: 6px 14px;
  border-radius: 100px;
}

/* =====================
   COST OF LIVING (chart, lives inside .cr-location)
   ===================== */
.cr-cost__intro {
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 1.8vw, 20px);
  color: #B0B2B5;
  line-height: 1.65;
  margin: 0;
}

/* Compare bars */
.cr-cost__compare {
  background: rgba(22,23,25,0.5);
  border: 1px solid rgba(244,244,244,0.07);
  border-radius: 12px;
  padding: 40px 48px;
  margin-bottom: 48px;
}

.cr-chart-title {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 2.5vw, 32px);
  text-transform: uppercase;
  color: #F4F4F4;
  line-height: 1;
  text-align: center;
  margin-bottom: 20px;
}

.cr-compare-legend {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 36px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #F4F4F4;
}

.cr-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}
.cr-legend-dot--albany  { background: #00BDFF; }
.cr-legend-dot--nyc     { background: rgba(244,244,244,0.35); }
.cr-legend-dot--boston  { background: rgba(0,189,255,0.4); }

/* Each category is a labelled group: the name sits above its own bars rather
   than in a side rail. A fixed rail had to be wide enough for the longest
   label at every width — it never was, and it stole width from the bars,
   which are the thing being read. Stacking needs no breakpoint at all. */
.cr-compare-row {
  display: grid;
  gap: 8px;
  margin-bottom: 26px;
}
.cr-compare-row:last-child { margin-bottom: 0; }

.cr-compare-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #F4F4F4;
}

.cr-compare-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* The value rides the end of its own bar (direct label) rather than sitting in
   a far-right column — at desktop the track is >1200px, so a detached value is
   a long way from the mark it describes.
   padding-right reserves the label's room OUTSIDE the content box, so a bar of
   `width: 100%` fills the track exactly and the label lands in the reserved
   strip. That replaces the old `max-width: calc(100% - 52px)`, which clamped
   wide bars — flattening different values to identical lengths — instead of
   scaling them. */
.cr-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 20px;
  padding-right: 52px;
}

.cr-bar {
  height: 100%;
  border-radius: 2px;
  flex-shrink: 0;
  background: rgba(244,244,244,0.05);
  transition: width 0.8s ease;
  min-width: 4px;
}

.cr-bar--albany  { background: #00BDFF; }
.cr-bar--nyc     { background: rgba(244,244,244,0.3); }
.cr-bar--boston  { background: rgba(0,189,255,0.4); }

.cr-bar-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: #F4F4F4;
  white-space: nowrap;
  flex-shrink: 0;
}

.cr-bar-label--good {
  color: #00BDFF;
  font-weight: 500;
}

.cr-compare-source {
  margin-top: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F4F4F4;
}

/* Sample listings */
.cr-listings {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  background: rgba(22,23,25,0.5);
  border: 1px solid rgba(244,244,244,0.07);
  border-radius: 12px;
  padding: 40px 48px;
}

.cr-listings__divider {
  width: 1px;
  background: rgba(244,244,244,0.08);
  margin: 0 48px;
}

.cr-listings__head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #F4F4F4;
  margin-bottom: 28px;
}

.cr-listing {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(244,244,244,0.06);
}
.cr-listing:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.cr-listing__price {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 3vw, 38px);
  color: #00BDFF;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 4px;
}
.cr-listing__price span {
  font-size: 0.5em;
  color: rgba(0,189,255,0.6);
}

.cr-listing__detail {
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 300;
  font-size: 13px;
  color: #F4F4F4;
}

/* =====================
   STABILITY
   ===================== */
.cr-stability {
  background: #161719;
  padding: 100px 48px 120px;
}

.cr-stability__inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.cr-stability__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  border-radius: 12px;
  overflow: hidden;
}

.cr-stability__photos img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  transition: transform 0.55s ease;
}
.cr-stability__photos img:hover { transform: scale(1.05); }

.cr-stability__pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 8px;
}

.cr-pillar {
  padding: 16px 20px;
  border-left: 2px solid rgba(0,189,255,0.4);
  margin-bottom: 10px;
  background: rgba(0,189,255,0.03);
  transition: border-color 0.2s ease;
}
.cr-pillar:last-child { margin-bottom: 0; }
.cr-pillar:hover { border-color: #00BDFF; }

.cr-pillar__name {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: 15px;
  text-transform: uppercase;
  color: #F4F4F4;
  line-height: 1.2;
  margin-bottom: 3px;
}

.cr-pillar__sub {
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #F4F4F4;
}

/* =====================
   SCHOOLS (inside .cr-stability)
   ===================== */
.cr-schools {
  max-width: var(--wrap-max);
  margin: 80px auto 0;
  padding-top: 64px;
  border-top: 1px solid rgba(244,244,244,0.06);
}

.cr-schools__intro {
  margin-bottom: 40px;
  max-width: 640px;
}

.cr-schools__h3 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 3.8vw, 52px);
  text-transform: uppercase;
  color: #F4F4F4;
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.cr-schools__h3 em {
  color: #00BDFF;
  font-style: normal;
}

.cr-schools__sub {
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 300;
  color: #B0B2B5;
  line-height: 1.6;
  margin: 0;
}

.cr-school-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.cr-school-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(244,244,244,0.07);
  border-radius: 12px;
  padding: 24px 20px 20px;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.cr-school-card:hover {
  border-color: rgba(0,189,255,0.35);
  background: rgba(0,189,255,0.04);
  transform: translateY(-3px);
}

.cr-school-card__badge {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: 32px;
  color: #00BDFF;
  line-height: 1;
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}

.cr-school-card__name {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 1.3vw, 16px);
  text-transform: uppercase;
  color: #F4F4F4;
  line-height: 1.15;
  margin-bottom: 8px;
}

.cr-school-card__loc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(0,189,255,0.7);
  margin-bottom: 6px;
}

.cr-school-card__type {
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 300;
  font-size: 11px;
  color: #F4F4F4;
}

.cr-schools__source {
  margin-top: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F4F4F4;
}

/* =====================
   CTA
   ===================== */
/* Gray, to continue the page's alternation: hero #161719 → location #202124
   → saratoga #161719 → outdoors #202124 → stability #161719 → cta #202124.
   This previously sat on #161719, the same colour as .cr-stability above it,
   which is why it carried a cyan top-rule — the border was standing in for the
   section break the background change should have been making. The colour
   change is the separator now, so the rule is gone (no other section-level
   band on this page has one). */
.cr-cta {
  background: #202124;
  padding: 100px 48px;
}

.cr-cta__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.cr-cta__h2 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: clamp(44px, 6vw, 80px);
  text-transform: uppercase;
  color: #F4F4F4;
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
}

.cr-cta__sub {
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 300;
  font-size: clamp(17.5px, 1.7vw, 19px);
  color: #B0B2B5;
  line-height: 1.65;
  margin: 0 0 40px;
}

/* =====================
   RESPONSIVE
   ===================== */
@media (max-width: 900px) {
  .cr-location,
  .cr-saratoga,
  .cr-outdoors,
  .cr-stability,
  .cr-cta {
    padding: 72px 28px;
  }

  .cr-hero__wrap { padding: 0 28px 60px; }

  .cr-distance-row {
    padding: 18px 0;
  }

  .cr-saratoga__inner,
  .cr-outdoors__inner,
  .cr-stability__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* On mobile put photo below text for outdoors/stability */
  .cr-outdoors__photo { order: -1; }

  .cr-stability__photos img {
    height: 160px;
  }

  .cr-saratoga__photo {
    max-width: 480px;
    margin: 0 auto;
  }

  .cr-cost__compare { padding: 28px 24px; }

  /* chart needs no override — the stacked group layout holds at every width */

  .cr-school-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .cr-hero__h1 { font-size: 56px; }
  .cr-h2 { font-size: 36px; }

  .cr-location,
  .cr-saratoga,
  .cr-outdoors,
  .cr-stability,
  .cr-cta {
    padding: 60px 20px;
  }

  .cr-stability { padding-bottom: 80px; }

  .cr-hero__wrap { padding: 0 20px 48px; }

  /* Chart layout is viewport-independent now; only tighten the rhythm. */
  .cr-compare-row { gap: 6px; margin-bottom: 22px; }
  .cr-bar-wrap { padding-right: 46px; gap: 8px; height: 18px; }

  .cr-school-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cr-schools__h3 { font-size: 28px; }

  .cr-cta__h2 { font-size: 40px; }
}