/* ====================================================================
   ESTEEP REAL ESTATE
   Design language aligned to esteep.com —
     - Montserrat (display) + Open Sans (body)
     - Dark navy sticky header w/ white logo
     - Clean white body, generous whitespace
     - Green circular + corner arrow motifs
     - Numbered section pillars
   ==================================================================== */

/* Load Montserrat (esteep.com's primary face) */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

/* Real-estate-only font + color overrides
   ------------------------------------------------------
   Brand blue (#3169BA) replaces the navy token on RE pages
   so all buttons/headers/text that referenced --esteep-navy
   automatically pick up the brand color.                  */
:root {
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --esteep-navy: #3169BA;          /* brand blue (from Esteep brand package) */
  --esteep-navy-deep: #234E89;     /* deeper brand blue for dark sections */
  --esteep-line: rgba(49,105,186,0.14);
}
body {
  background: #FFFFFF;
  font-family: var(--font-body);
}

/* Headings — esteep.com uses geometric sans, medium-to-bold with tight tracking */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}
h1 { font-weight: 600; }
h2 { font-weight: 600; }

/* Real Estate brand-specific nav logo sizing */
.nav-brand--re img { height: 44px; max-width: 260px; object-fit: contain; }
@media (max-width: 560px) { .nav-brand--re img { height: 36px; max-width: 200px; } }

/* Dark sticky header (esteep.com style) */
body > .site-header {
  background: var(--esteep-navy);
  border-bottom-color: rgba(255,255,255,0.08);
}
body > .site-header .nav-links a { color: rgba(255,255,255,0.88); }
body > .site-header .nav-links a:hover { color: #fff; }
body > .site-header .nav-toggle { color: #fff; }

/* Mobile dropdown — solid dark panel on RE pages */
@media (max-width: 820px) {
  body > .site-header .nav-links {
    background: var(--esteep-navy);
    border-top-color: rgba(255,255,255,0.12);
    border-bottom-color: rgba(255,255,255,0.12);
    box-shadow: 0 14px 30px rgba(0,0,0,0.4);
  }
}
body > .site-header .nav-brand--re img { filter: brightness(0) invert(1); }

/* ---- Hero (split layout — text left, square image right) ---- */
.re-hero {
  position: relative;
  background: #FFFFFF;
  padding: clamp(1.6rem, 3vw, 2.6rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.re-hero-grid {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.re-hero-content {
  max-width: 36rem;
}
.re-hero .eyebrow { color: var(--esteep-green-dark); }
.re-hero h1 {
  color: var(--esteep-navy);
  max-width: 16ch;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: 1.3rem;
}
.re-hero p {
  color: rgba(11,35,64,0.72);
  font-size: 1.15rem;
  max-width: 46ch;
  margin-bottom: 2.1rem;
}
.re-hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

/* Square image tile on the right */
.re-hero-media {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  overflow: visible;
  isolation: isolate;
}
.re-hero-media img {
  clip-path: inset(0);  /* keep image bounded even with visible overflow */
}
.re-hero-media::before {
  content: "";
  position: absolute;
  top: -12px;
  right: -12px;
  width: 56px;
  height: 56px;
  background: var(--esteep-green);
  z-index: 2;
}
/* Brand arrow sticker at bottom-left of hero image */
.re-hero-media .re-arrow-accent {
  bottom: -18px;
  left: -18px;
  width: 72px;
  height: 72px;
}
.re-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 14s var(--ease);
}
.re-hero.is-loaded .re-hero-media img { transform: scale(1); }

@media (max-width: 900px) {
  .re-hero-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .re-hero-media {
    max-width: 100%;
    order: 2;
  }
  .re-hero-content { order: 1; }
}

/* ---- Footer STP mark (replaces full wordmark) ---- */
.footer-brand-mark {
  width: 64px;
  height: auto;
  display: block;
  margin-bottom: 1rem;
}

/* ---- Standalone brand arrow accent
   Inline `<span class="brand-arrow">…</span>` containing the
   esteep-arrow.svg. Used as a section/eyebrow accent. ---- */
.brand-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--esteep-green);
  color: var(--esteep-navy);
  vertical-align: middle;
  margin-right: 0.6rem;
}
.brand-arrow svg { width: 60%; height: 60%; display: block; }
.brand-arrow--sm { width: 32px; height: 32px; }
.brand-arrow--lg { width: 64px; height: 64px; }
.brand-arrow--outline {
  background: transparent;
  border: 1.5px solid var(--esteep-green-dark);
  color: var(--esteep-green-dark);
}

/* Floating arrow "sticker" — positioned absolutely to accent a section */
.re-arrow-accent {
  position: absolute;
  width: 80px;
  height: 80px;
  background: var(--esteep-green);
  color: var(--esteep-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.re-arrow-accent svg { width: 55%; height: 55%; }

/* ---- Intro / who we are ---- */
.re-intro {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.re-intro-media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.re-intro-media img { width: 100%; height: 100%; object-fit: cover; }
.re-intro-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,0.3);
  pointer-events: none;
  margin: 1rem;
}
@media (max-width: 820px) {
  .re-intro { grid-template-columns: 1fr; }
}

/* ---- Stats strip ---- */
.re-stats {
  background: var(--esteep-navy);
  color: #fff;
  padding: clamp(3rem, 5vw, 4.5rem) 0;
}
.re-stats .grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.re-stat {
  text-align: center;
  padding: 0 1rem;
  border-right: 1px solid rgba(255,255,255,0.15);
}
.re-stat:last-child { border-right: none; }
.re-stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 400;
  color: var(--esteep-green);
  line-height: 1;
  margin-bottom: 0.8rem;
  display: block;
}
.re-stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}
@media (max-width: 720px) {
  .re-stats .grid { grid-template-columns: repeat(2, 1fr); }
  .re-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 1.5rem; }
  .re-stat:nth-child(n+3) { border-bottom: none; }
}

/* ---- Approach pillars ---- */
.re-pillar {
  padding: 2rem 0;
  border-top: 1px solid var(--esteep-line);
}
.re-pillar:last-child { border-bottom: 1px solid var(--esteep-line); }
.re-pillar-row {
  display: grid;
  grid-template-columns: 80px 1.2fr 2fr;
  gap: 2.5rem;
  align-items: start;
}
.re-pillar-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.2rem;
  color: var(--esteep-green-dark);
}
.re-pillar-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--esteep-navy);
  margin: 0;
  line-height: 1.15;
}
.re-pillar-body {
  color: var(--esteep-mute);
  font-size: 1.02rem;
  margin: 0;
}
@media (max-width: 820px) {
  .re-pillar-row { grid-template-columns: 60px 1fr; }
  .re-pillar-body { grid-column: 1 / -1; padding-top: 0.5rem; }
}

/* ---- Criteria box ---- */
.re-criteria {
  background: var(--esteep-sand);
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.re-criteria-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 5vw, 5rem);
}
.re-criteria-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
}
.re-criteria-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: 0.98rem;
  color: var(--esteep-ink);
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(11,35,64,0.1);
}
.re-criteria-list li::before {
  content: "";
  flex: 0 0 auto;
  margin-top: 0.55rem;
  width: 8px;
  height: 8px;
  background: var(--esteep-green);
  border-radius: 50%;
}
@media (max-width: 720px) {
  .re-criteria-grid { grid-template-columns: 1fr; }
  .re-criteria-list { grid-template-columns: 1fr; }
}

/* ---- Select Projects ---- */
.re-projects {
  background: #fff;
}
.re-projects-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3rem;
  gap: 2rem;
  flex-wrap: wrap;
}
.re-projects-head h2 { margin-bottom: 0.5rem; }

.re-project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}
@media (max-width: 560px) {
  .re-project-grid { grid-template-columns: 1fr; }
}

.re-project {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--esteep-navy);
  aspect-ratio: 4 / 5;
  text-decoration: none;
  isolation: isolate;
  transition: transform 0.5s var(--ease);
}
.re-project img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease), opacity 0.5s;
  z-index: 0;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  image-rendering: -webkit-optimize-contrast;
}
.re-project::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Guarantee-readable bottom third: opaque navy floor under the text, with a
     smooth gradient up into the image so the transition still feels photographic. */
  background:
    linear-gradient(180deg,
      rgba(7,21,40,0)    20%,
      rgba(7,21,40,0.55) 48%,
      rgba(7,21,40,0.95) 75%,
      rgba(7,21,40,1)   100%);
  z-index: 1;
  transition: opacity 0.4s;
}
.re-project:hover img { transform: scale(1.06); }
.re-project-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem 1.8rem 1.8rem;
  color: #fff;
  z-index: 2;
  /* Frosted backdrop — blurs the photo directly beneath the label so text has
     clean contrast regardless of what's underneath. Falls back to the solid
     navy gradient floor above in browsers without backdrop-filter. */
  background: linear-gradient(180deg, rgba(7,21,40,0) 0%, rgba(7,21,40,0.35) 100%);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  backdrop-filter: blur(6px) saturate(110%);
}
.re-project-tag {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  background: rgba(127,168,101,0.95);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.re-project h3 {
  color: #fff;
  font-size: 1.45rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.75),
    0 2px 12px rgba(0,0,0,0.55);
}
.re-project-meta {
  font-size: 0.88rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.02em;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.7),
    0 0 8px rgba(0,0,0,0.35);
}

/* Short memo-sourced brief — hidden at rest, revealed on card hover.
   Slides in below the meta so the resting card stays minimal. On
   touch screens (no hover), it's always visible. */
.re-project-brief {
  margin: 0.9rem 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  max-width: 48ch;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(6px);
  transition: max-height 0.55s var(--ease),
              opacity 0.45s var(--ease) 0.05s,
              transform 0.55s var(--ease);
}
.re-project:hover .re-project-brief,
.re-project:focus-visible .re-project-brief {
  max-height: 10rem;
  opacity: 1;
  transform: translateY(0);
}
/* Darken the bottom overlay a touch more on hover so the revealed
   brief always has enough contrast against the photo underneath. */
.re-project:hover::after {
  background: linear-gradient(180deg, rgba(7,21,40,0) 35%, rgba(7,21,40,0.92) 100%);
}
@media (hover: none) {
  .re-project-brief { max-height: 10rem; opacity: 1; transform: none; }
}

/* ---- Mobile tuning (≤560px) ----
   Previously the always-visible brief consumed the bottom ~50% of the
   card, burying the building photo. On mobile we:
   1) make the card taller so the photo dominates the visual frame,
   2) hide the brief (users tap into the project detail page for the
      full story anyway),
   3) compact the overlay body + pull the gradient floor down so more
      of the photo breathes through. */
@media (max-width: 560px) {
  .re-project {
    aspect-ratio: 3 / 4;           /* taller frame — more building visible */
    min-height: 420px;
  }
  .re-project::after {
    background:
      linear-gradient(180deg,
        rgba(7,21,40,0)    55%,
        rgba(7,21,40,0.55) 75%,
        rgba(7,21,40,0.95) 95%);
  }
  .re-project-body {
    padding: 1.1rem 1.2rem 1.3rem;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: transparent;
  }
  .re-project-tag {
    font-size: 0.58rem;
    padding: 0.22rem 0.55rem;
    margin-bottom: 0.55rem;
    letter-spacing: 0.16em;
  }
  .re-project h3 {
    font-size: 1.12rem;
    margin-bottom: 0.2rem;
  }
  .re-project-meta {
    font-size: 0.78rem;
  }
  /* Brief hidden on mobile — the photo should carry the card, and the
     project detail page holds the full story. */
  .re-project-brief {
    max-height: 0;
    opacity: 0;
    margin: 0;
    overflow: hidden;
  }
}

/* Featured / full-width variant */
.re-project--featured {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 7;
}
@media (max-width: 900px) {
  .re-project--featured { aspect-ratio: 4 / 3; }
}

/* Project detail page hero */
.re-project-hero {
  position: relative;
  min-height: 70vh;
  color: #fff;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.re-project-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.re-project-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Heavier, earlier gradient as a base; the frosted panel below does most of
     the readability work, but a darker floor still helps the image feel anchored. */
  background: linear-gradient(180deg,
      rgba(7,21,40,0.35) 0%,
      rgba(7,21,40,0.6)  60%,
      rgba(7,21,40,0.92) 100%);
  z-index: -1;
}
.re-project-hero-content {
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}

/* Frosted reader panel — light veil over the photo, relying on blur + text
   shadows (not heavy opacity) for readability so the image still shows through. */
.re-project-hero-panel {
  display: inline-block;
  max-width: min(560px, 100%);
  padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.3rem, 2.8vw, 1.9rem);
  background: rgba(7, 21, 40, 0.32);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
  border-left: 3px solid var(--esteep-green);
  box-shadow: 0 14px 36px rgba(0,0,0,0.28);
}
.re-project-hero-panel .re-project-tag {
  margin-bottom: 0.8rem;
}
.re-project-hero-panel h1 {
  color: #fff;
  max-width: 18ch;
  margin: 0 0 0.7rem;
  font-size: clamp(1.65rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.7),
    0 2px 14px rgba(0,0,0,0.45);
}
.re-project-hero-summary {
  color: #fff;
  max-width: 52ch;
  margin: 0;
  font-size: clamp(0.92rem, 1.2vw, 1.02rem);
  line-height: 1.5;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.65),
    0 0 10px rgba(0,0,0,0.35);
}

/* Fallback for browsers without backdrop-filter — rely on a darker solid
   background instead, since there's no blur doing the heavy lifting. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .re-project-hero-panel {
    background: rgba(7, 21, 40, 0.75);
  }
}

.re-spec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 3rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--esteep-line);
  border-bottom: 1px solid var(--esteep-line);
  margin-bottom: 3rem;
}
.re-spec-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--esteep-mute);
  margin-bottom: 0.4rem;
}
.re-spec-value {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--esteep-navy);
}
@media (max-width: 720px) {
  .re-spec-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Team tiles ---- */
.re-team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
}
@media (max-width: 720px) {
  .re-team-grid { grid-template-columns: 1fr; }
}
.re-team-card figure {
  margin: 0 0 1.4rem;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--esteep-sand);
}
.re-team-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.2);
  transition: filter 0.4s;
}
.re-team-card:hover img { filter: grayscale(0); }
.re-team-figure--ziad img {
  filter: grayscale(1) !important;
  object-position: center 28% !important;
}
.re-team-card:hover .re-team-figure--ziad img { filter: grayscale(1); }
.re-team-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--esteep-navy);
  margin: 0 0 0.1rem;
}
.re-team-title {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--esteep-green-dark);
  margin-bottom: 1rem;
}

/* ---- CTA band ---- */
.re-cta-band {
  position: relative;
  padding: clamp(4rem, 8vw, 7rem) 0;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.re-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(7,21,40,0.78) 0%, rgba(7,21,40,0.92) 100%),
    url("../assets/photos/chicago-ltrain.jpg") center/cover no-repeat;
}
.re-cta-band h2 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.2rem);
  max-width: 22ch;
  margin: 0 auto 1.5rem;
}
.re-cta-band p {
  color: rgba(255,255,255,0.85);
  max-width: 52ch;
  margin: 0 auto 2rem;
}

/* Contact form + form-field layout now lives in base.css (shared with Investments) */

/* ---- Page header (for interior pages) ---- */
.re-page-head {
  padding: clamp(5rem, 9vw, 8rem) 0 clamp(3rem, 5vw, 4rem);
  background: var(--esteep-sand);
  border-bottom: 1px solid var(--esteep-line);
}
.re-page-head > .wrap { max-width: none; padding-left: clamp(2rem, 5vw, 6rem); padding-right: clamp(2rem, 5vw, 6rem); }
.re-page-head .eyebrow { margin-bottom: 1.5rem; }
.re-page-head h1 {
  font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  line-height: 1.05;
  max-width: none;
  margin-bottom: 1rem;
}
.re-page-head p { font-size: 1.15rem; color: var(--esteep-mute); max-width: none; }


/* =====================================================================
   ESTEEP.COM design-language additions
   ===================================================================== */

/* Tighter, greener eyebrow to match esteep.com */
.eyebrow {
  color: var(--esteep-green-dark);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.28em;
}

/* Circular green arrow CTA (the signature esteep.com button motif) */
.btn-circle {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--esteep-navy);
  transition: color 0.3s var(--ease);
}
.btn-circle--light { color: #fff; }
.btn-circle-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px solid var(--esteep-green-dark);
  color: var(--esteep-green-dark);
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), transform 0.3s var(--ease);
  flex: 0 0 auto;
}
.btn-circle-ring svg { width: 18px; height: 18px; }
.btn-circle:hover .btn-circle-ring {
  background: var(--esteep-green);
  color: #fff;
  border-color: var(--esteep-green);
  transform: rotate(-8deg);
}
.btn-circle:hover .btn-circle-ring svg { transform: translateX(2px); transition: transform 0.3s var(--ease); }

/* Corner arrow accent (used inside section headers / cards) */
.corner-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--esteep-green-dark);
  flex: 0 0 auto;
}
.corner-arrow svg { width: 24px; height: 24px; display: block; }

/* Investment Trifecta — the three pillars of Esteep's RE strategy */
.re-trifecta {
  padding: clamp(4rem, 7vw, 6rem) 0;
  background: var(--esteep-sand);
  border-top: 1px solid var(--esteep-line);
  border-bottom: 1px solid var(--esteep-line);
}
.re-trifecta-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.re-trifecta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
}
.re-trifecta-card {
  position: relative;
  background: #fff;
  padding: clamp(2rem, 3vw, 2.8rem);
  border: 1px solid var(--esteep-line);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 340px;
}
.re-trifecta-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(11,35,64,0.28);
  border-color: rgba(11,35,64,0.2);
}
.re-trifecta-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--esteep-navy);
  margin-bottom: 0.6rem;
}
.re-trifecta-icon svg { width: 40px; height: 40px; }
.re-trifecta-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  color: var(--esteep-navy);
  text-transform: uppercase;
}
.re-trifecta-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  margin: 0;
  color: var(--esteep-navy);
}
.re-trifecta-card p {
  color: var(--esteep-mute);
  font-size: 0.96rem;
  margin: 0;
}
.re-trifecta-card .corner-arrow {
  margin-top: auto;
  align-self: flex-start;
}
@media (max-width: 820px) {
  .re-trifecta-grid { grid-template-columns: 1fr; }
  .re-trifecta-card { min-height: auto; }
}

/* Refine hero CTA alignment + make the secondary CTA a circle-arrow */
.re-hero-ctas { align-items: center; }

/* Subtle green corner accent on re-intro-media frame */
.re-intro-media { overflow: visible; }
.re-intro-media img { position: relative; z-index: 1; }
.re-intro-media::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 44px;
  height: 44px;
  border-top: 2px solid var(--esteep-green);
  border-left: 2px solid var(--esteep-green);
  z-index: 3;
  pointer-events: none;
}

/* Numbered pillar treatment closer to esteep.com */
.re-pillar { padding: 2.4rem 0; }
.re-pillar-num {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2.6rem;
  letter-spacing: -0.02em;
  color: var(--esteep-green-dark);
}

/* ---- Project detail page: photo gallery ---- */
.re-gallery-section { padding-top: 0; }
.re-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 0 auto 3rem;
}
.re-gallery-item {
  margin: 0;
  overflow: hidden;
  background: var(--esteep-navy);
  aspect-ratio: 4 / 3;
}
.re-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s var(--ease);
}
.re-gallery-item:hover img { transform: scale(1.03); }
@media (max-width: 640px) {
  .re-gallery { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* Utility: tighter section padding for stacked content blocks */
.section--tight { padding: 0 0 3rem; }