/* ========================================================================== 
   FUTURE BAY FACTORY — isolated landing-page styles
   These rules affect only future-bay-factory.html.
   ========================================================================== */
.overview-hero {
  position: relative;
  min-height: min(720px, 78vh);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: clamp(5.5rem, 12vw, 9rem);
  background: #ece2d2;
}

.overview-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.overview-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.52;
}

.overview-hero-bg::before,
.overview-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
}

.overview-hero-bg::before {
  background:
    radial-gradient(circle at 78% 24%, rgba(255, 246, 221, 0.36), transparent 30%),
    linear-gradient(100deg, rgba(247, 243, 236, 0.98) 0%, rgba(247, 243, 236, 0.88) 42%, rgba(247, 243, 236, 0.4) 73%, rgba(247, 243, 236, 0.72) 100%);
}

.overview-hero-bg::after {
  background: linear-gradient(180deg, transparent 45%, var(--color-bg) 100%);
}

.overview-hero .container {
  position: relative;
  z-index: 1;
}

.overview-intro {
  max-width: 880px;
}

.overview-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.overview-kicker::before {
  content: '';
  width: 34px;
  height: 1px;
  background: currentColor;
}

.overview-title {
  max-width: 16ch;
  font-size: clamp(2.8rem, 6.2vw, 6.2rem);
  letter-spacing: -0.035em;
  color: var(--color-text);
}

.overview-title em {
  color: var(--color-primary);
  font-style: normal;
}

.overview-lead {
  max-width: 62ch;
  margin-top: var(--space-7);
  color: var(--color-text-muted);
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.35rem);
  line-height: 1.7;
}

.overview-projects {
  padding-top: clamp(var(--space-12), 7vw, var(--space-20));
  padding-bottom: clamp(var(--space-20), 10vw, var(--space-32));
  background:
    radial-gradient(circle at 8% 10%, rgba(255,255,255,0.9), transparent 25%),
    radial-gradient(circle at 88% 42%, rgba(203,164,86,0.14), transparent 28%),
    var(--color-bg);
}

.overview-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
}

.overview-section-head h2 {
  max-width: 17ch;
  font-size: var(--text-2xl);
}

.overview-section-head p {
  max-width: 48ch;
  color: var(--color-text-muted);
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(var(--space-4), 2vw, var(--space-6));
}

.overview-card {
  position: relative;
  isolation: isolate;
  min-height: 340px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.34);
  border-radius: clamp(1.1rem, 2vw, 1.65rem);
  color: #fff6e6;
  text-decoration: none;
  box-shadow:
    0 30px 65px -42px rgba(43, 28, 12, 0.62),
    inset 0 1px 0 rgba(255,255,255,0.22);
  transform: translateZ(0);
}

.overview-card--circuit {
  grid-column: span 7;
  min-height: 430px;
}

.overview-card--physical {
  grid-column: span 5;
  min-height: 430px;
}

.overview-card--project {
  grid-column: span 4;
}

.overview-card-media,
.overview-card-media::after {
  position: absolute;
  inset: 0;
}

.overview-card-media {
  z-index: -2;
  overflow: hidden;
  background: #3f3427;
}

.overview-card-media::after {
  content: '';
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(25, 19, 12, 0.08) 12%, rgba(25, 19, 12, 0.28) 48%, rgba(25, 19, 12, 0.93) 100%),
    linear-gradient(110deg, rgba(32, 24, 15, 0.48), transparent 62%);
}

.overview-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 850ms cubic-bezier(0.16, 1, 0.3, 1), filter 500ms ease;
}

.overview-card--circuit .overview-card-media img {
  filter: saturate(0.9) contrast(0.96) brightness(0.84);
}

.overview-card-content {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  padding: clamp(var(--space-6), 3vw, var(--space-10));
}

.overview-card-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: #e8c985;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.overview-card-kicker::before {
  content: '';
  width: 20px;
  height: 1px;
  background: currentColor;
}

.overview-card h2,
.overview-card h3 {
  max-width: 15ch;
  color: #fff8ea;
  text-shadow: 0 2px 18px rgba(0,0,0,0.22);
}

.overview-card h2 {
  font-size: clamp(2rem, 3.7vw, 3.8rem);
}

.overview-card h3 {
  font-size: clamp(1.55rem, 2.2vw, 2.3rem);
}

.overview-card p {
  max-width: 48ch;
  margin-top: var(--space-4);
  color: rgba(255, 247, 231, 0.78);
  font-size: var(--text-sm);
}

/* Keep the two longest card titles fully readable without changing the other cards. */
.overview-card--physical,
.overview-card--project:last-child {
  display: flex;
  align-items: flex-end;
}

.overview-card--physical .overview-card-content,
.overview-card--project:last-child .overview-card-content {
  position: relative;
  inset: auto;
  width: 100%;
  margin-top: auto;
}

.overview-card--physical h2,
.overview-card--project:last-child h3 {
  max-width: 100%;
  hyphens: auto;
  overflow-wrap: break-word;
}

.overview-card-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  color: #fff1cf;
  font-size: var(--text-sm);
  font-weight: 600;
}

.overview-card-action svg {
  width: 18px;
  height: 18px;
  transition: transform var(--transition-interactive);
}

.overview-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 38px 75px -40px rgba(43, 28, 12, 0.72),
    inset 0 1px 0 rgba(255,255,255,0.3);
}

.overview-card:hover .overview-card-media img {
  transform: scale(1.045);
  filter: saturate(1) contrast(1) brightness(0.9);
}

.overview-card:hover .overview-card-action svg {
  transform: translate(3px, -3px);
}

.overview-card:focus-visible {
  outline-color: #e8c985;
  outline-offset: 5px;
}

.overview-cta {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
  background:
    radial-gradient(circle at 82% 16%, rgba(236, 207, 143, 0.2), transparent 31%),
    linear-gradient(135deg, #77644f 0%, #5d4d3d 56%, #493b2e 100%);
  color: #f8f0e2;
}

.overview-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
}

.overview-cta h2 {
  max-width: 16ch;
  color: #fff7e9;
  font-size: var(--text-2xl);
}

.overview-cta p {
  max-width: 48ch;
  margin-top: var(--space-4);
  color: rgba(248, 240, 226, 0.72);
}

.overview-cta .btn {
  flex-shrink: 0;
  background: #d9b56c;
  color: #2a1d0d;
}

.overview-cta .btn:hover {
  background: #e7c987;
}

@media (max-width: 980px) {
  .overview-card--circuit,
  .overview-card--physical {
    grid-column: span 6;
  }

  .overview-card--project {
    grid-column: span 6;
  }

  .overview-card--project:last-child {
    grid-column: 4 / span 6;
  }

  .overview-section-head,
  .overview-cta-inner {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 700px) {
  .overview-hero {
    min-height: auto;
    padding-top: clamp(5rem, 22vw, 7rem);
    padding-bottom: clamp(4.5rem, 18vw, 6rem);
  }

  .overview-hero-bg img {
    object-position: 62% center;
    opacity: 0.44;
  }

  .overview-hero-bg::before {
    background: linear-gradient(180deg, rgba(247,243,236,0.88) 0%, rgba(247,243,236,0.82) 54%, rgba(247,243,236,0.98) 100%);
  }

  .overview-title {
    max-width: 11ch;
    font-size: clamp(2.55rem, 13vw, 4.1rem);
  }

  .overview-lead {
    margin-top: var(--space-5);
    font-size: 1rem;
  }

  .overview-section-head {
    margin-bottom: var(--space-8);
  }

  .overview-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .overview-card--circuit,
  .overview-card--physical,
  .overview-card--project,
  .overview-card--project:last-child {
    grid-column: 1;
    min-height: 355px;
  }

  .overview-card-content {
    padding: var(--space-6);
  }

  .overview-card h2,
  .overview-card h3 {
    max-width: 13ch;
  }

  .overview-card p {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .overview-cta .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 410px) {
  .overview-card--circuit,
  .overview-card--physical,
  .overview-card--project,
  .overview-card--project:last-child {
    min-height: 330px;
  }

  .overview-card-content {
    padding: var(--space-5);
  }

  .overview-card-action {
    margin-top: var(--space-4);
  }
}


/* ========================================================================== 
   QUIET-LUXURY REFINEMENT — page-local
   Refines only the Future Bay Factory landing page.
   ========================================================================== */
body {
  --fbf-clean-display: 'General Sans', 'Helvetica Neue', Arial, sans-serif;
}

.header {
  background: rgba(247, 243, 236, 0.9);
  backdrop-filter: blur(20px) saturate(1.08);
  border-bottom-color: rgba(93, 72, 44, 0.12);
}

.header-inner {
  padding-block: clamp(0.9rem, 1.3vw, 1.15rem);
}

.brand-name {
  font-family: var(--fbf-clean-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.overview-hero {
  min-height: min(790px, 84vh);
  padding-block: clamp(6.5rem, 12vw, 10rem);
  background: #e9dfcf;
  border-bottom: 1px solid rgba(93, 72, 44, 0.1);
}

.overview-hero-bg img {
  opacity: 0.43;
  filter: saturate(0.72) contrast(0.94) brightness(1.03);
}

.overview-hero-bg::before {
  background:
    radial-gradient(circle at 76% 19%, rgba(255, 249, 232, 0.46), transparent 30%),
    linear-gradient(101deg, rgba(249, 246, 240, 0.985) 0%, rgba(249, 246, 240, 0.92) 43%, rgba(249, 246, 240, 0.49) 74%, rgba(249, 246, 240, 0.76) 100%);
}

.overview-hero-bg::after {
  background:
    linear-gradient(90deg, rgba(151, 114, 44, 0.035), transparent 34%),
    linear-gradient(180deg, transparent 52%, var(--color-bg) 100%);
}

.overview-intro {
  max-width: 980px;
  padding-left: clamp(1.4rem, 3vw, 3rem);
  border-left: 1px solid rgba(151, 114, 44, 0.42);
}

.overview-kicker {
  margin-bottom: clamp(1.45rem, 2.4vw, 2.15rem);
  font-family: var(--fbf-clean-display);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.28em;
}

.overview-kicker::before {
  width: 44px;
  opacity: 0.72;
}

.overview-title {
  max-width: 17ch;
  font-family: var(--fbf-clean-display);
  font-size: clamp(3.1rem, 5.65vw, 5.75rem);
  font-weight: 500;
  line-height: 0.99;
  letter-spacing: -0.058em;
}

.overview-title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.038em;
  color: #8d6828;
}

.overview-lead {
  max-width: 57ch;
  margin-top: clamp(1.75rem, 3vw, 2.6rem);
  color: rgba(49, 41, 31, 0.72);
  font-size: clamp(1.03rem, 0.98rem + 0.28vw, 1.2rem);
  line-height: 1.78;
  letter-spacing: 0.003em;
}

.overview-projects {
  padding-top: clamp(5.75rem, 8vw, 8.5rem);
  padding-bottom: clamp(7rem, 10vw, 11rem);
  background:
    radial-gradient(circle at 7% 7%, rgba(255, 255, 255, 0.92), transparent 27%),
    radial-gradient(circle at 91% 37%, rgba(184, 139, 60, 0.1), transparent 29%),
    linear-gradient(180deg, #f8f5ef 0%, #f3eee5 100%);
}

.overview-section-head {
  align-items: flex-end;
  margin-bottom: clamp(2.8rem, 5vw, 4.9rem);
  padding-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
  border-bottom: 1px solid rgba(93, 72, 44, 0.14);
}

.overview-section-head h2,
.overview-cta h2,
.realestate-head h2,
.slider-card-body h3 {
  font-family: var(--fbf-clean-display);
  font-weight: 500;
  letter-spacing: -0.043em;
}

.overview-section-head h2 {
  max-width: 18ch;
  font-size: clamp(2.15rem, 3.45vw, 3.35rem);
  line-height: 1.03;
}

.overview-section-head p {
  max-width: 45ch;
  color: rgba(49, 41, 31, 0.65);
  font-size: 0.98rem;
  line-height: 1.72;
}

.overview-grid {
  gap: clamp(1rem, 1.65vw, 1.55rem);
}

.overview-card {
  min-height: 360px;
  border: 1px solid rgba(255, 250, 239, 0.46);
  border-radius: 14px;
  box-shadow:
    0 28px 70px -44px rgba(43, 28, 12, 0.72),
    0 10px 30px -24px rgba(43, 28, 12, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.overview-card::before {
  content: '';
  position: absolute;
  inset: 11px;
  z-index: 1;
  border: 1px solid rgba(255, 245, 221, 0.17);
  border-radius: 8px;
  pointer-events: none;
}

.overview-card--circuit,
.overview-card--physical {
  min-height: 490px;
}

.overview-card-media::after {
  background:
    linear-gradient(180deg, rgba(22, 17, 11, 0.04) 5%, rgba(22, 17, 11, 0.18) 42%, rgba(22, 17, 11, 0.94) 100%),
    linear-gradient(108deg, rgba(27, 20, 13, 0.48), transparent 64%);
}

.overview-card-media img {
  filter: saturate(0.84) contrast(0.96) brightness(0.92);
  transition: transform 950ms cubic-bezier(0.16, 1, 0.3, 1), filter 550ms ease;
}

.overview-card--circuit .overview-card-media img {
  filter: saturate(0.74) contrast(0.94) brightness(0.82);
}

.overview-card--physical .overview-card-media img {
  object-position: center 56%;
  filter: saturate(0.82) contrast(0.96) brightness(0.88);
}

.overview-card-content {
  padding: clamp(2rem, 3vw, 3.25rem);
}

.overview-card-kicker {
  margin-bottom: 1rem;
  font-family: var(--fbf-clean-display);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.21em;
}

.overview-card-kicker::before {
  width: 28px;
  opacity: 0.78;
}

.overview-card h2,
.overview-card h3 {
  font-family: var(--fbf-clean-display);
  font-weight: 500;
  line-height: 1.035;
  letter-spacing: -0.045em;
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.22);
}

.overview-card h2 {
  font-size: clamp(2.15rem, 3.25vw, 3.35rem);
}

.overview-card h3 {
  font-size: clamp(1.65rem, 2.25vw, 2.3rem);
}

.overview-card p {
  max-width: 45ch;
  margin-top: 1.25rem;
  color: rgba(255, 247, 231, 0.76);
  font-size: 0.93rem;
  line-height: 1.67;
}

.overview-card-action {
  margin-top: 1.7rem;
  font-family: var(--fbf-clean-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.overview-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 42px 85px -46px rgba(43, 28, 12, 0.78),
    0 15px 35px -27px rgba(43, 28, 12, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.29);
}

.overview-card:hover .overview-card-media img {
  transform: scale(1.035);
  filter: saturate(0.9) contrast(0.98) brightness(0.92);
}

.overview-cta {
  background:
    radial-gradient(circle at 84% 8%, rgba(236, 207, 143, 0.17), transparent 30%),
    linear-gradient(135deg, #71604e 0%, #5a4939 58%, #44362a 100%);
}

.overview-cta h2 {
  line-height: 1.04;
}

.overview-cta .btn {
  border-radius: 4px;
  letter-spacing: 0.025em;
}

.section-label {
  font-family: var(--fbf-clean-display);
  font-size: 0.67rem;
  font-weight: 500;
  letter-spacing: 0.22em;
}

@media (max-width: 980px) {
  .overview-title {
    max-width: 15ch;
  }

  .overview-card--circuit,
  .overview-card--physical {
    min-height: 455px;
  }
}

@media (max-width: 700px) {
  .overview-hero {
    padding-top: clamp(5.25rem, 23vw, 7.25rem);
    padding-bottom: clamp(5rem, 20vw, 6.75rem);
  }

  .overview-intro {
    padding-left: 1.1rem;
  }

  .overview-title {
    max-width: 12ch;
    font-size: clamp(2.65rem, 12.2vw, 4rem);
    line-height: 1.01;
    letter-spacing: -0.052em;
  }

  .overview-lead {
    max-width: 37ch;
    font-size: 0.98rem;
    line-height: 1.7;
  }

  .overview-section-head {
    padding-bottom: 1.35rem;
  }

  .overview-card--circuit,
  .overview-card--physical,
  .overview-card--project,
  .overview-card--project:last-child {
    min-height: 390px;
    border-radius: 12px;
  }

  .overview-card::before {
    inset: 8px;
    border-radius: 7px;
  }

  .overview-card-content {
    padding: 1.75rem;
  }

  .overview-card h2 {
    font-size: clamp(2rem, 9.5vw, 2.65rem);
  }

  .overview-card p {
    font-size: 0.88rem;
    line-height: 1.58;
  }

  .overview-card-action {
    margin-top: 1.35rem;
  }
}

@media (max-width: 410px) {
  .overview-title {
    font-size: clamp(2.45rem, 12vw, 3.35rem);
  }

  .overview-card--circuit,
  .overview-card--physical,
  .overview-card--project,
  .overview-card--project:last-child {
    min-height: 365px;
  }
}

/* ==========================================================================
   FUTURE BAY FACTORY — WARM SILVER / IVORY / CHAMPAGNE ALIGNMENT
   Page-local visual alignment with the current ConnectCircuit homepage.
   ========================================================================== */

body {
  --fbf-warm-bg: #d4c9b7;
  --fbf-warm-surface: #e3dbcf;
  --fbf-ivory: #f4f0e8;
  --fbf-silver: #b8b0a4;
  --fbf-graphite: #37342f;
  --fbf-muted: #6b645a;
  --fbf-champagne: #c9a865;
}

.header {
  background: rgba(225, 216, 201, 0.9);
  border-bottom-color: rgba(76, 67, 55, 0.13);
  box-shadow: 0 8px 34px rgba(48, 42, 34, 0.035);
  backdrop-filter: blur(22px) saturate(1.06);
  -webkit-backdrop-filter: blur(22px) saturate(1.06);
}

.overview-hero {
  background: var(--fbf-warm-bg);
  border-bottom-color: rgba(74, 65, 53, 0.13);
}

.overview-hero-bg img {
  opacity: 0.38;
  filter: saturate(0.42) contrast(0.92) brightness(0.92);
}

.overview-hero-bg::before {
  background:
    radial-gradient(circle at 78% 22%, rgba(255, 252, 243, 0.35), transparent 30%),
    linear-gradient(101deg, rgba(214, 204, 188, 0.98) 0%, rgba(214, 204, 188, 0.9) 42%, rgba(214, 204, 188, 0.58) 72%, rgba(214, 204, 188, 0.76) 100%);
}

.overview-hero-bg::after {
  background:
    linear-gradient(90deg, rgba(201, 168, 101, 0.035), transparent 34%),
    linear-gradient(180deg, transparent 52%, var(--fbf-warm-bg) 100%);
}

.overview-intro {
  border-left-color: rgba(201, 168, 101, 0.42);
}

.overview-kicker {
  color: #f1ede5;
  text-shadow: 0 0 12px rgba(239, 230, 211, 0.13);
}

.overview-kicker::before {
  background: linear-gradient(90deg, var(--fbf-champagne), rgba(244, 238, 227, 0.5), transparent);
  box-shadow: 0 0 8px rgba(201, 168, 101, 0.18);
}

.overview-title {
  color: #2f2b26;
}

.overview-title em {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(108deg, #8d877e 0%, #b5aea3 28%, #ede8df 52%, #c8c0b4 74%, #8d877e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.24));
}

.overview-lead {
  color: #5f584f;
}

.overview-projects {
  background:
    radial-gradient(circle at 7% 7%, rgba(255, 255, 255, 0.42), transparent 27%),
    radial-gradient(circle at 91% 37%, rgba(208, 191, 155, 0.14), transparent 29%),
    linear-gradient(180deg, #d8cebf 0%, #d0c5b5 100%);
}

.overview-section-head {
  border-bottom-color: rgba(74, 65, 53, 0.14);
}

.overview-section-head h2 {
  color: #302c27;
}

.overview-section-head p {
  color: #625b51;
}

.overview-card {
  color: var(--fbf-ivory);
  border-color: rgba(243, 238, 228, 0.28);
  box-shadow:
    0 30px 72px -44px rgba(34, 30, 25, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.overview-card::before {
  border-color: rgba(244, 238, 227, 0.13);
}

.overview-card-media {
  background: #3b3833;
}

.overview-card-media::after {
  background:
    linear-gradient(180deg, rgba(22, 20, 17, 0.05) 6%, rgba(22, 20, 17, 0.22) 44%, rgba(28, 26, 23, 0.94) 100%),
    linear-gradient(108deg, rgba(31, 28, 24, 0.44), transparent 64%);
}

.overview-card-media img,
.overview-card--circuit .overview-card-media img,
.overview-card--physical .overview-card-media img {
  filter: saturate(0.55) contrast(0.95) brightness(0.84);
}

.overview-card-kicker {
  color: #ddd5c8;
}

.overview-card-kicker::before {
  background: linear-gradient(90deg, #d2b674, #f0e8d8, transparent);
}

.overview-card h2,
.overview-card h3 {
  color: #f4f0e8;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.18);
}

.overview-card p {
  color: rgba(237, 231, 220, 0.76);
}

.overview-card-action {
  color: #e7dcc5;
}

.overview-card:hover {
  box-shadow:
    0 40px 84px -44px rgba(34, 30, 25, 0.62),
    0 14px 34px -26px rgba(34, 30, 25, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.overview-card:hover .overview-card-media img {
  filter: saturate(0.64) contrast(0.98) brightness(0.9);
}

.overview-cta {
  color: #f3eee7;
  background:
    radial-gradient(circle at 84% 8%, rgba(230, 214, 182, 0.12), transparent 30%),
    linear-gradient(135deg, #4a4640 0%, #3a3732 56%, #302e2a 100%);
}

.overview-cta h2 {
  color: #f4efe7;
}

.overview-cta p {
  color: rgba(226, 219, 208, 0.72);
}

.overview-cta .btn {
  color: #29241f;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 42%),
    linear-gradient(135deg, #c1b7a5 0%, #a99c87 56%, #d0c5b2 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 14px 34px rgba(17, 15, 13, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.overview-cta .btn:hover {
  color: #201d19;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 42%),
    linear-gradient(135deg, #cdc3b2 0%, #b3a793 56%, #d8cebd 100%);
}

.realestate {
  background:
    radial-gradient(circle at 10% 4%, rgba(255, 255, 255, 0.34), transparent 26%),
    linear-gradient(180deg, #d8cebf 0%, #d2c7b7 100%);
}

.realestate-head h2,
.slider-card-body h3 {
  color: #302c27;
}

.realestate-head p,
.slider-card-body p {
  color: #625b51;
}

.slider-card {
  border-color: rgba(76, 67, 54, 0.16);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08)),
    rgba(215, 206, 191, 0.68);
  box-shadow:
    0 24px 60px -42px rgba(48, 42, 34, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.slider-card-tag,
.slider-card-link {
  color: #7f735f;
}

.footer {
  color: #37322c;
  background: #d4c9b7;
  border-top-color: rgba(74, 65, 53, 0.14);
}

.footer-meta,
.footer-links a {
  color: #776f64;
}

@media (max-width: 700px) {
  .overview-hero-bg::before {
    background: linear-gradient(180deg, rgba(214, 204, 188, 0.9) 0%, rgba(214, 204, 188, 0.84) 54%, rgba(214, 204, 188, 0.98) 100%);
  }
}

/* ==========================================================================
   FUTURE BAY FACTORY — CREAM HERO ACCENT + MOBILE-FIRST REFINEMENT
   Desktop: silver title accent replaced by warm cream.
   Mobile: sharper hierarchy, stronger contrast, tighter spacing and cleaner cards.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero title accent — warm cream instead of low-contrast silver
   -------------------------------------------------------------------------- */

.overview-title em {
  color: #ead8b8;
  -webkit-text-fill-color: transparent;

  background:
    linear-gradient(
      108deg,
      #d7bd8e 0%,
      #ead8b8 24%,
      #fff4df 50%,
      #e3cca2 76%,
      #cfae77 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-stroke:
    0.35px rgba(82, 67, 43, 0.15);

  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.46))
    drop-shadow(0 4px 14px rgba(79, 62, 34, 0.18));
}

/* --------------------------------------------------------------------------
   Mobile-first sharpening
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  body {
    background: #d3c8b6;
  }

  .header {
    background:
      linear-gradient(
        180deg,
        rgba(232, 224, 211, 0.97),
        rgba(222, 212, 196, 0.94)
      );

    border-bottom-color:
      rgba(78, 66, 48, 0.16);

    box-shadow:
      0 10px 30px rgba(48, 41, 32, 0.07),
      inset 0 -1px 0 rgba(255, 255, 255, 0.34);

    backdrop-filter:
      blur(24px)
      saturate(112%);
    -webkit-backdrop-filter:
      blur(24px)
      saturate(112%);
  }

  .header-inner {
    min-height: 64px;
    padding-block: 0.72rem;
  }

  .brand-name {
    font-size: 1.02rem;
    letter-spacing: -0.022em;
  }

  .brand-sub {
    margin-top: 0;
    font-size: 0.62rem;
    letter-spacing: 0.11em;
  }

  .overview-hero {
    min-height:
      calc(100svh - 64px);

    align-items: flex-start;

    padding-top:
      calc(4.75rem + env(safe-area-inset-top));

    padding-bottom:
      clamp(4.25rem, 15vw, 6rem);

    background: #d4c9b7;
  }

  .overview-hero-bg img {
    opacity: 0.56;

    object-position: 68% center;

    filter:
      saturate(0.58)
      contrast(1.02)
      brightness(0.92);
  }

  .overview-hero-bg::before {
    background:
      linear-gradient(
        180deg,
        rgba(215, 205, 189, 0.96) 0%,
        rgba(211, 200, 182, 0.90) 42%,
        rgba(203, 190, 170, 0.78) 72%,
        rgba(212, 202, 187, 0.96) 100%
      );
  }

  .overview-hero-bg::after {
    background:
      radial-gradient(
        circle at 74% 22%,
        rgba(255, 247, 226, 0.20),
        transparent 28%
      ),
      linear-gradient(
        180deg,
        transparent 46%,
        rgba(212, 201, 183, 0.56) 74%,
        #d4c9b7 100%
      );
  }

  .overview-hero .container {
    display: flex;
    align-items: center;
    min-height:
      calc(100svh - 64px - 4.75rem);
  }

  .overview-intro {
    width: 100%;
    max-width: none;

    padding-left: 0;
    padding-top: 1.25rem;

    border-left: 0;
    border-top:
      1px solid rgba(178, 139, 64, 0.35);
  }

  .overview-kicker {
    margin-bottom: 1.35rem;

    color: #f4ecde;

    font-size: 0.62rem;
    letter-spacing: 0.22em;
    line-height: 1.45;

    text-shadow:
      0 2px 12px rgba(65, 52, 32, 0.22);
  }

  .overview-kicker::before {
    width: 30px;

    background:
      linear-gradient(
        90deg,
        #cda95d,
        rgba(255, 242, 213, 0.72),
        transparent
      );

    box-shadow:
      0 0 10px rgba(202, 159, 72, 0.24);
  }

  .overview-title {
    max-width: 11.5ch;

    font-size:
      clamp(2.85rem, 12.8vw, 4.15rem);

    line-height: 0.97;
    letter-spacing: -0.064em;

    color: #2a2722;

    text-wrap: balance;
  }

  .overview-title em {
    color: #ead7b5;

    background:
      linear-gradient(
        104deg,
        #d3b57e 0%,
        #ead7b5 28%,
        #fff1d8 52%,
        #dfc596 76%,
        #c99f61 100%
      );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    -webkit-text-stroke:
      0.45px rgba(73, 58, 36, 0.18);

    filter:
      drop-shadow(0 1px 0 rgba(255, 255, 255, 0.42))
      drop-shadow(0 4px 12px rgba(66, 50, 27, 0.22));
  }

  .overview-lead {
    max-width: 36ch;

    margin-top: 1.55rem;

    color: #504a42;

    font-size: 1rem;
    line-height: 1.68;
    letter-spacing: 0;
  }

  /* Projects section */

  .overview-projects {
    padding-top:
      clamp(4.5rem, 16vw, 6rem);

    padding-bottom:
      clamp(5.5rem, 18vw, 7rem);

    background:
      radial-gradient(
        circle at 10% 5%,
        rgba(255, 255, 255, 0.42),
        transparent 26%
      ),
      radial-gradient(
        circle at 90% 48%,
        rgba(203, 164, 86, 0.11),
        transparent 30%
      ),
      linear-gradient(
        180deg,
        #d8cebf 0%,
        #d0c4b4 100%
      );
  }

  .overview-section-head {
    display: block;

    margin-bottom: 2rem;
    padding-bottom: 1.35rem;

    border-bottom-color:
      rgba(73, 63, 49, 0.16);
  }

  .overview-section-head h2 {
    max-width: 15ch;

    font-size:
      clamp(2.2rem, 9.5vw, 3.1rem);

    line-height: 0.99;
    letter-spacing: -0.055em;

    color: #2c2924;
  }

  .overview-section-head p {
    max-width: 36ch;

    margin-top: 1rem;

    color: #5c554d;

    font-size: 0.94rem;
    line-height: 1.62;
  }

  .overview-grid {
    display: grid;
    grid-template-columns: 1fr;

    gap: 1rem;
  }

  .overview-card,
  .overview-card--circuit,
  .overview-card--physical,
  .overview-card--project,
  .overview-card--project:last-child {
    grid-column: 1;

    min-height: 390px;

    border-radius: 13px;

    border-color:
      rgba(255, 248, 233, 0.36);

    box-shadow:
      0 26px 56px -34px rgba(36, 31, 25, 0.50),
      0 10px 22px -18px rgba(36, 31, 25, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }

  .overview-card::before {
    inset: 8px;

    border-radius: 7px;

    border-color:
      rgba(255, 244, 220, 0.13);
  }

  .overview-card-media img,
  .overview-card--circuit .overview-card-media img,
  .overview-card--physical .overview-card-media img {
    filter:
      saturate(0.68)
      contrast(1.02)
      brightness(0.84);
  }

  .overview-card-media::after {
    background:
      linear-gradient(
        180deg,
        rgba(16, 15, 13, 0.04) 0%,
        rgba(16, 15, 13, 0.16) 38%,
        rgba(20, 19, 17, 0.92) 100%
      ),
      linear-gradient(
        108deg,
        rgba(27, 24, 20, 0.48),
        transparent 62%
      );
  }

  .overview-card-content,
  .overview-card--physical .overview-card-content,
  .overview-card--project:last-child .overview-card-content {
    padding: 1.65rem;

    background:
      linear-gradient(
        180deg,
        transparent 0%,
        rgba(21, 19, 17, 0.18) 34%,
        rgba(21, 19, 17, 0.36) 100%
      );
  }

  .overview-card-kicker {
    margin-bottom: 0.9rem;

    color: #e4d7be;

    font-size: 0.62rem;
    letter-spacing: 0.18em;
  }

  .overview-card h2,
  .overview-card h3 {
    max-width: 13ch;

    color: #fff8eb;

    font-size:
      clamp(2rem, 8.8vw, 2.75rem);

    line-height: 1;
    letter-spacing: -0.052em;

    text-shadow:
      0 3px 20px rgba(0, 0, 0, 0.34);
  }

  .overview-card p {
    max-width: 34ch;

    margin-top: 1rem;

    color:
      rgba(247, 239, 225, 0.80);

    font-size: 0.88rem;
    line-height: 1.58;
  }

  .overview-card-action {
    margin-top: 1.25rem;

    color: #eadabb;

    font-size: 0.68rem;
    letter-spacing: 0.10em;
  }

  /* CTA */

  .overview-cta {
    padding-block:
      clamp(4.5rem, 15vw, 6.5rem);

    background:
      radial-gradient(
        circle at 82% 14%,
        rgba(226, 197, 135, 0.11),
        transparent 31%
      ),
      linear-gradient(
        145deg,
        #47433e 0%,
        #37342f 54%,
        #2c2a27 100%
      );
  }

  .overview-cta-inner {
    gap: 1.8rem;
  }

  .overview-cta h2 {
    max-width: 13ch;

    font-size:
      clamp(2.15rem, 9.6vw, 3.15rem);

    line-height: 0.99;
    letter-spacing: -0.052em;
  }

  .overview-cta p {
    max-width: 36ch;

    font-size: 0.94rem;
    line-height: 1.62;
  }

  .overview-cta .btn {
    width: 100%;
    min-height: 52px;

    justify-content: center;

    border-radius: 0.88rem;

    font-size: 0.92rem;

    box-shadow:
      0 16px 34px rgba(18, 16, 13, 0.17),
      inset 0 1px 0 rgba(255, 255, 255, 0.46);
  }

  /* Real-estate / slider blocks if present on the page */

  .realestate {
    padding-block:
      clamp(4.5rem, 15vw, 6.5rem);
  }

  .realestate-head {
    display: block;

    margin-bottom: 2rem;
  }

  .realestate-head h2 {
    max-width: 15ch;

    font-size:
      clamp(2.15rem, 9.2vw, 3rem);

    line-height: 1;
  }

  .realestate-head p {
    max-width: 36ch;

    margin-top: 1rem;

    font-size: 0.94rem;
    line-height: 1.62;
  }

  .slider-card {
    flex-basis:
      min(84vw, 340px);

    border-radius: 1rem;
  }

  .slider-card-body {
    padding: 1.35rem;
  }

  .slider-card-body h3 {
    font-size: 1.35rem;
  }

  .slider-card-body p {
    font-size: 0.86rem;
    line-height: 1.56;
  }

  /* Footer */

  .footer {
    padding-block:
      2.5rem;

    background:
      linear-gradient(
        180deg,
        #d4c9b7,
        #cabdab
      );
  }

  .footer-inner {
    align-items: flex-start;
    flex-direction: column;

    gap: 1.35rem;
  }

  .footer-links {
    flex-wrap: wrap;

    gap: 1rem 1.4rem;
  }
}

/* Extra sharpening for narrow phones */
@media (max-width: 430px) {
  .container {
    padding-inline:
      clamp(1.05rem, 5vw, 1.35rem);
  }

  .overview-hero {
    padding-top:
      calc(4.25rem + env(safe-area-inset-top));
  }

  .overview-title {
    max-width: 10.8ch;

    font-size:
      clamp(2.55rem, 12.6vw, 3.45rem);
  }

  .overview-lead {
    font-size: 0.94rem;
    line-height: 1.62;
  }

  .overview-card,
  .overview-card--circuit,
  .overview-card--physical,
  .overview-card--project,
  .overview-card--project:last-child {
    min-height: 365px;
  }

  .overview-card-content,
  .overview-card--physical .overview-card-content,
  .overview-card--project:last-child .overview-card-content {
    padding: 1.4rem;
  }

  .overview-card h2,
  .overview-card h3 {
    font-size:
      clamp(1.85rem, 8.7vw, 2.35rem);
  }
}

/* Touch devices: avoid hover jumps and keep cards visually stable. */
@media (hover: none) and (pointer: coarse) {
  .overview-card:hover {
    transform: none;

    box-shadow:
      0 26px 56px -34px rgba(36, 31, 25, 0.50),
      0 10px 22px -18px rgba(36, 31, 25, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.22);
  }

  .overview-card:hover .overview-card-media img {
    transform: none;

    filter:
      saturate(0.68)
      contrast(1.02)
      brightness(0.84);
  }
}

/* ==========================================================================
   FUTURE BAY FACTORY — TRUE REVERSE SCROLL FOR "KERNBEREICHE"
   The hero remains fixed while the core-areas section scrolls upward over it.
   ========================================================================== */

/* Pin the opening hero as the first visual plane. */
.overview-hero {
  position: sticky;
  top: 0;
  z-index: 1;

  min-height: calc(100svh - 4.65rem);

  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Keep all following page sections above the pinned hero. */
main > section:not(.overview-hero) {
  position: relative;
  z-index: 4;
}

/*
  The core-areas section becomes the second plane.
  It moves continuously upward with the real page scroll.
*/
.overview-projects {
  position: relative;
  z-index: 5;
  isolation: isolate;

  margin-top: 0;

  border-top:
    1px solid rgba(77, 65, 48, 0.22);

  box-shadow:
    0 -30px 72px rgba(42, 36, 28, 0.18),
    0 -7px 20px rgba(42, 36, 28, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);

  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Flat, glass-like contact edge between hero and the rising section. */
.overview-projects::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;

  height: clamp(2.2rem, 3.5vw, 3.6rem);

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(54, 48, 40, 0.22) 0%,
      rgba(74, 66, 55, 0.11) 18%,
      rgba(255, 255, 255, 0.10) 42%,
      rgba(255, 255, 255, 0.025) 58%,
      transparent 100%
    );

  -webkit-backdrop-filter:
    blur(22px)
    saturate(108%);
  backdrop-filter:
    blur(22px)
    saturate(108%);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

/* One restrained champagne reflection directly on the glass edge. */
.overview-projects::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  top: 0;
  z-index: 4;

  height: 1px;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(197, 159, 87, 0.20) 22%,
      rgba(255, 244, 220, 0.66) 50%,
      rgba(197, 159, 87, 0.20) 78%,
      transparent
    );

  box-shadow:
    0 0 12px rgba(198, 157, 78, 0.12);
}

/*
  Modern browsers receive a subtle depth change while the section enters.
  The actual upward movement still comes from the real scroll itself.
*/
@supports (animation-timeline: view()) {
  .overview-projects {
    animation: fbfCoreDepth linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 48%;
  }

  @keyframes fbfCoreDepth {
    from {
      box-shadow:
        0 -10px 28px rgba(42, 36, 28, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
    }

    to {
      box-shadow:
        0 -30px 72px rgba(42, 36, 28, 0.18),
        0 -7px 20px rgba(42, 36, 28, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
    }
  }
}

@media (max-width: 700px) {
  .overview-hero {
    min-height: calc(100svh - 64px);
  }

  .overview-projects::before {
    height: 2.6rem;

    -webkit-backdrop-filter:
      blur(18px)
      saturate(106%);
    backdrop-filter:
      blur(18px)
      saturate(106%);
  }

  .overview-projects {
    box-shadow:
      0 -24px 58px rgba(42, 36, 28, 0.17),
      0 -5px 16px rgba(42, 36, 28, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.31);
  }
}

@media (prefers-reduced-motion: reduce) {
  .overview-projects {
    animation: none !important;
  }
}

/* ==========================================================================
   FUTURE BAY FACTORY — REVERSE SCROLL FIX
   Forces the hero to exactly one viewport plane so sticky can engage.
   ========================================================================== */

:root {
  --fbf-sticky-header-height: 76px;
}

/*
  Sticky failed before because the hero could become taller than the viewport:
  old min-height + large vertical padding + content height.
  A sticky element taller than the available viewport cannot create the
  desired pinned-screen effect.
*/
main#top {
  position: relative;
  overflow: visible !important;
}

.overview-hero {
  position: sticky !important;
  top: var(--fbf-sticky-header-height) !important;
  z-index: 1 !important;

  width: 100%;
  height: calc(100svh - var(--fbf-sticky-header-height)) !important;
  min-height: 0 !important;
  max-height: calc(100svh - var(--fbf-sticky-header-height)) !important;

  padding:
    clamp(2.75rem, 6vh, 5rem)
    0 !important;

  overflow: clip !important;

  display: flex;
  align-items: center;

  transform: none !important;
  backface-visibility: visible;
}

.overview-hero .container {
  width: 100%;
}

.overview-intro {
  max-height: 100%;
}

/*
  The second section is the moving plane.
  It begins exactly at the viewport edge and physically scrolls upward over
  the pinned hero from the first downward movement.
*/
.overview-projects {
  position: relative !important;
  z-index: 8 !important;

  margin-top: 0 !important;

  transform: translateZ(0);

  box-shadow:
    0 -34px 82px rgba(42, 36, 28, 0.22),
    0 -8px 22px rgba(42, 36, 28, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

/* Ensure every section after the hero remains above the pinned plane. */
main#top > .overview-projects,
main#top > .overview-cta,
main#top > .realestate,
main#top > section:not(.overview-hero) {
  position: relative;
  z-index: 8;
}

/* Mobile: exact sticky viewport with the actual compact header height. */
@media (max-width: 700px) {
  :root {
    --fbf-sticky-header-height: 64px;
  }

  .overview-hero {
    top: var(--fbf-sticky-header-height) !important;

    height: calc(100svh - var(--fbf-sticky-header-height)) !important;
    min-height: 0 !important;
    max-height: calc(100svh - var(--fbf-sticky-header-height)) !important;

    padding:
      clamp(2.1rem, 5.5vh, 3.4rem)
      0 !important;
  }

  .overview-hero .container {
    min-height: 0 !important;
    height: auto !important;
  }

  .overview-intro {
    display: flex;
    flex-direction: column;
    justify-content: center;

    max-height:
      calc(100svh - var(--fbf-sticky-header-height) - 4.2rem);

    overflow: visible;
  }

  .overview-kicker {
    margin-bottom: 1rem;
  }

  .overview-title {
    font-size:
      clamp(2.35rem, 10.9vw, 3.55rem);

    line-height: 0.96;
  }

  .overview-lead {
    margin-top: 1.15rem;

    font-size: 0.91rem;
    line-height: 1.55;
  }

  .overview-projects {
    box-shadow:
      0 -28px 68px rgba(42, 36, 28, 0.22),
      0 -6px 18px rgba(42, 36, 28, 0.13),
      inset 0 1px 0 rgba(255, 255, 255, 0.31);
  }
}

/* Very short phones: preserve the effect without cutting the text. */
@media (max-width: 700px) and (max-height: 680px) {
  .overview-hero {
    padding:
      1.55rem
      0 !important;
  }

  .overview-kicker {
    margin-bottom: 0.75rem;
  }

  .overview-title {
    font-size:
      clamp(2.05rem, 9.8vw, 3rem);
  }

  .overview-lead {
    margin-top: 0.85rem;

    font-size: 0.84rem;
    line-height: 1.46;
  }
}

/*
  Safari/WebKit fallback:
  overflow:hidden on a sticky section can suppress sticky behavior.
  overflow:clip retains visual clipping without creating a scroll container.
*/
@supports not (overflow: clip) {
  .overview-hero {
    overflow: visible !important;
  }

  .overview-hero-bg {
    overflow: hidden;
  }
}

/* ==========================================================================
   MOBILE HERO + REVERSE-SCROLL STABILITY — FUTURE BAY FACTORY
   Better mobile composition, no pinned-hero flash, lighter rendering.
   ========================================================================== */

/* JS hides the pinned hero after "Kernbereiche" has finished passing over it. */
.overview-hero.reverse-hero-passed {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transition:
    opacity 90ms linear,
    visibility 0s linear 90ms;
}

.overview-hero:not(.reverse-hero-passed) {
  visibility: visible;
}

/* Stable opaque planes prevent iOS from revealing the sticky hero underneath. */
.overview-projects,
.realestate,
.overview-cta,
.footer {
  isolation: isolate;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.overview-projects {
  background-color: #d0c5b5;
  contain: paint;
}

.realestate {
  background-color: #d2c7b7;
}

.overview-cta {
  background-color: #37342f;
}

.footer {
  position: relative;
  z-index: 20;
  background-color: #d4c9b7;
}

.header {
  z-index: 100;
}

@supports (content-visibility: auto) {
  .realestate,
  .overview-cta {
    content-visibility: auto;
    contain-intrinsic-size: auto 850px;
  }
}

@media (max-width: 700px) {
  /*
    Keep one full viewport for the reverse-scroll effect, but move the content
    upward and enlarge it so the screen no longer feels empty above and below.
  */
  .overview-hero {
    align-items: flex-start !important;

    padding:
      0
      0 !important;
  }

  .overview-hero .container {
    display: flex;
    align-items: flex-start !important;

    width: 100%;
    height: 100% !important;
    min-height: 0 !important;

    padding-top:
      clamp(2.35rem, 7.2vh, 4.25rem);

    padding-bottom:
      clamp(1.75rem, 4.5vh, 2.8rem);
  }

  .overview-intro {
    display: block !important;

    width: 100%;
    max-height: none !important;

    padding-top: 0.9rem;
  }

  .overview-kicker {
    margin-bottom: 1.05rem;

    font-size: 0.66rem;
    letter-spacing: 0.23em;
  }

  .overview-title {
    max-width: 11.2ch;

    font-size:
      clamp(2.65rem, 12.1vw, 3.95rem);

    line-height: 0.955;
    letter-spacing: -0.064em;
  }

  .overview-lead {
    max-width: 34ch;

    margin-top: 1.25rem;

    font-size: 0.98rem;
    line-height: 1.60;
  }

  /* Reduce costly glass work on mobile, not the visual identity. */
  .header {
    -webkit-backdrop-filter:
      blur(14px)
      saturate(106%);
    backdrop-filter:
      blur(14px)
      saturate(106%);
  }

  .overview-projects::before {
    -webkit-backdrop-filter:
      blur(12px)
      saturate(104%);
    backdrop-filter:
      blur(12px)
      saturate(104%);
  }

  .overview-card-media img {
    transition:
      filter 260ms ease;
  }

  .overview-card:hover .overview-card-media img {
    transform: none;
  }
}

/* Short phones: compact, still readable, still full-screen reverse scroll. */
@media (max-width: 700px) and (max-height: 720px) {
  .overview-hero .container {
    padding-top: 1.65rem;
    padding-bottom: 1.2rem;
  }

  .overview-intro {
    padding-top: 0.55rem;
  }

  .overview-kicker {
    margin-bottom: 0.72rem;

    font-size: 0.60rem;
  }

  .overview-title {
    font-size:
      clamp(2.25rem, 10.5vw, 3.15rem);
  }

  .overview-lead {
    margin-top: 0.85rem;

    font-size: 0.86rem;
    line-height: 1.48;
  }
}

@media (hover: none) and (pointer: coarse) {
  .overview-card:hover {
    transform: none;
  }
}