﻿/* ============================================================
   Soil Ecoculture - Responsive Layer
   Separate breakpoint rules for visibility, accessibility, and spacing.
   Loaded after page styles so these rules normalize every screen size.
   ============================================================ */

/* Shared responsive foundations */
@media (min-width: 1440px) {
  :root {
    --nav-y: clamp(1.8rem, 2.4vw, 3rem);
    --nav-x: clamp(3rem, 4vw, 5.5rem);
    --menu-w: clamp(280px, 18vw, 360px);
    --menu-btn-w: var(--menu-w);
    --menu-panel-w: var(--menu-w);
  }

  .container {
    width: min(88vw, 1320px);
  }

  section {
    padding-block: clamp(5rem, 7vw, 8rem);
  }
}

@media (max-width: 1366px) {
  :root {
    --nav-y: clamp(1.35rem, 3vw, 2.25rem);
    --nav-x: clamp(1.6rem, 3vw, 3.25rem);
    --menu-w: clamp(220px, 22vw, 320px);
    --menu-btn-w: var(--menu-w);
    --menu-panel-w: var(--menu-w);
  }

  .container {
    width: min(90vw, 1120px);
  }

  section {
    padding-block: clamp(4rem, 6vw, 6rem);
  }

  .section-heading {
    max-width: 15ch;
  }
}

/* Hero image pages: desktop keeps artwork visible without oversized empty bands. */
@media (min-width: 901px) {
  body.home-page::before {
    height: min(38vw, 620px);
    background-size: 100% auto;
    background-position: center top;
  }

  body.environmental-page::before {
    height: 53.35vw;
    background-size: 100% auto;
    background-position: center top;
  }

  .hero {
    min-height: min(38vw, 620px) !important;
  }

  section.domains-hero {
    min-height: 53.35vw !important;
  }
}

@media (orientation: landscape) and (max-width: 900px) {
  body.home-page::before {
    height: 54.55vw !important;
    background-size: 100% auto !important;
    background-position: center top !important;
  }

  body.environmental-page::before {
    height: 53.35vw !important;
    background-size: 100% auto !important;
    background-position: center top !important;
  }

  body.home-page .hero {
    min-height: max(54.55vw, 340px) !important;
  }

  section.domains-hero {
    min-height: max(53.35vw, 400px) !important;
  }
}

/* Tablet landscape */
@media (max-width: 1180px) {
  :root {
    --nav-y: 1.25rem;
    --nav-x: 1.5rem;
    --menu-w: clamp(210px, 26vw, 300px);
    --menu-btn-w: var(--menu-w);
    --menu-panel-w: var(--menu-w);
  }

  .nav-logo img {
    height: clamp(58px, 6vw, 76px);
  }

  .hero,
  .about-hero,
  .contact-hero,
  .deterx-hero,
  section.domains-hero {
    padding-top: clamp(6.25rem, 12vw, 8.5rem) !important;
  }

  .hero-inner,
  .how-grid,
  .stats-grid,
  .projects-grid,
  .team-grid,
  .topics-grid,
  .domain-grid,
  .focus-grid,
  .domains-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(1rem, 2.4vw, 1.6rem) !important;
  }

  .hero-inner {
    align-items: start;
  }

  .cap-card {
    grid-template-columns: 3.25rem minmax(0, 1fr) !important;
  }

  .cap-card-main {
    grid-template-columns: 1fr !important;
    gap: 0.35rem !important;
  }

  .cap-card h3,
  .cap-card p {
    white-space: normal !important;
  }
}

/* Tablet portrait */
@media (max-width: 900px) {
  html {
    font-size: 17px;
  }

  body.home-page::before,
  body.environmental-page::before {
    height: clamp(360px, 72vw, 560px);
    background-size: cover;
    background-position: center top;
  }

  .hero,
  section.domains-hero {
    min-height: clamp(360px, 72vw, 560px) !important;
  }

  .hero-content {
    width: min(100%, 760px) !important;
    transform: translateY(-2rem) !important;
  }

  .hero h1,
  section.domains-hero h1,
  .about-hero h1,
  .contact-hero h1,
  .deterx-hero h1 {
    max-width: 12ch;
    font-size: clamp(2.5rem, 8.5vw, 4.6rem) !important;
    line-height: 0.98;
  }

  .about-hero .subtitle,
  .contact-hero .subtitle,
  .deterx-hero .subtitle,
  section.domains-hero .subtitle {
    max-width: 58ch;
    font-size: clamp(1rem, 2.2vw, 1.15rem) !important;
  }

  .hero-inner,
  .how-grid,
  .stats-grid,
  .projects-grid,
  .team-grid,
  .topics-grid,
  .domain-grid,
  .focus-grid,
  .domains-grid {
    grid-template-columns: 1fr !important;
  }

  .team-card {
    grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
    align-items: stretch;
  }

  .support-logo-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
}

/* Mobile standard and large phones */
@media (max-width: 640px) {
  :root {
    --nav-y: 0.85rem;
    --nav-x: 1rem;
    --menu-btn-w: clamp(128px, 36vw, 160px);
    --menu-panel-w: min(280px, calc(100vw - 2rem));
    --menu-h: 36px;
  }

  html {
    font-size: 16px;
  }

  .nav {
    padding: var(--nav-y) var(--nav-x) !important;
    gap: 0.75rem;
  }

  .nav-logo img {
    height: clamp(50px, 14vw, 62px) !important;
  }

  .nav-menu-btn {
    width: var(--menu-btn-w) !important;
    flex-basis: var(--menu-btn-w) !important;
    height: var(--menu-h) !important;
    padding-inline: 0.95rem !important;
    font-size: 0.72rem !important;
  }

  .nav-panel {
    right: var(--nav-x) !important;
    width: var(--menu-panel-w) !important;
    top: calc(var(--nav-y) + var(--menu-h) + 0.45rem) !important;
    max-height: calc(100svh - 5.25rem);
    overflow-y: auto;
  }

  body.home-page::before,
  body.environmental-page::before {
    height: clamp(390px, 108vw, 520px);
    background-size: auto 100%;
    background-position: center top;
  }

  .hero,
  section.domains-hero {
    min-height: clamp(390px, 108vw, 520px) !important;
    padding-top: clamp(5.5rem, 19vw, 6.75rem) !important;
    padding-bottom: 2rem !important;
  }

  .about-hero,
  .contact-hero,
  .deterx-hero {
    padding-top: clamp(5.5rem, 18vw, 6.5rem) !important;
    padding-bottom: 2.5rem !important;
  }

  .hero-content {
    transform: translateY(-0.75rem) !important;
  }

  .hero h1,
  section.domains-hero h1,
  .about-hero h1,
  .contact-hero h1,
  .deterx-hero h1 {
    max-width: 11ch;
    font-size: clamp(2.2rem, 12vw, 3.4rem) !important;
    letter-spacing: -0.055em;
  }

  .section-heading {
    font-size: clamp(2rem, 9vw, 3.1rem) !important;
    max-width: 12ch;
  }

  .section-sub,
  .about-hero .subtitle,
  .contact-hero .subtitle,
  .deterx-hero .subtitle,
  section.domains-hero .subtitle {
    font-size: 1rem !important;
    line-height: 1.65 !important;
  }

  section {
    padding: 3rem 1rem !important;
  }

  .container {
    width: min(100%, calc(100vw - 2rem)) !important;
  }

  .how-card,
  .domain-card,
  .stat-card,
  .project-card,
  .d-card,
  .focus-card,
  .contact-form-section,
  .cap-card {
    border-radius: 0 !important;
  }

  .team-card,
  .cap-card {
    grid-template-columns: 1fr !important;
  }

  .team-photo {
    min-height: 280px;
  }

  .support-logo-row {
    grid-template-columns: 1fr !important;
  }

  .support-logo-card {
    min-height: 112px !important;
  }
  .footer-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "brand"
      "social"
      "links"
      "legal"
      "copy" !important;
    justify-items: center !important;
    gap: 1.1rem !important;
    text-align: center !important;
  }

  .footer-brand {
    justify-items: center !important;
    text-align: center !important;
  }

  .footer-address {
    max-width: 32ch !important;
  }

  .footer-links {
    align-items: center !important;
    text-align: center !important;
  }

  .footer-legal-links {
    justify-content: center !important;
    gap: 0.55rem 1rem !important;
    padding-top: 0 !important;
  }
}

/* Final Environmental Domains hero fill/fit pass */
body.environmental-page::before {
  background-image: url('mppqrvrv-ed_desktop.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  height: clamp(560px, 56.28vw, 900px) !important;
  min-height: clamp(560px, 56.28vw, 900px) !important;
}

body.environmental-page .domains-hero {
  height: clamp(560px, 56.28vw, 900px) !important;
  min-height: clamp(560px, 56.28vw, 900px) !important;
  overflow: hidden !important;
}

@media (min-width: 768px) and (max-width: 1180px) {
  body.environmental-page::before {
    background-image: url('mppqrvfz-ed_tab.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    height: min(100svh, calc(100vw * 1.3334)) !important;
    min-height: min(100svh, calc(100vw * 1.3334)) !important;
  }

  body.environmental-page .domains-hero {
    height: min(100svh, calc(100vw * 1.3334)) !important;
    min-height: min(100svh, calc(100vw * 1.3334)) !important;
  }
}

@media (max-width: 767px) {
  body.environmental-page::before {
    background-image: url('mppqrvlg-ed_phone.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    height: 100svh !important;
    min-height: 100svh !important;
  }

  body.environmental-page .domains-hero {
    height: 100svh !important;
    min-height: 100svh !important;
  }
}

/* Small phones */
@media (max-width: 430px) {
  :root {
    --menu-btn-w: clamp(118px, 34vw, 142px);
    --menu-panel-w: calc(100vw - 1.5rem);
    --nav-x: 0.75rem;
  }

  .nav-logo img {
    height: 48px !important;
  }

  .nav-menu-btn {
    letter-spacing: 0.12em !important;
  }

  .hero h1,
  section.domains-hero h1,
  .about-hero h1,
  .contact-hero h1,
  .deterx-hero h1 {
    font-size: clamp(2rem, 13vw, 2.95rem) !important;
  }

  .hero-eyebrow,
  section.domains-hero .eyebrow,
  .about-hero .eyebrow,
  .contact-hero .eyebrow,
  .deterx-hero .eyebrow,
  .section-label {
    font-size: 0.72rem !important;
    letter-spacing: 0.14em !important;
  }
  .cta-section,
  .contact-cta {
    text-align: left !important;
  }
  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* Accessibility and motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Final hero/header alignment pass
   Keeps headings below the logo zone and makes hero starts uniform.
   ============================================================ */
:root {
  --site-logo-h: clamp(64px, 5.2vw, 80px);
  --hero-content-top: clamp(4.75rem, 7vw, 6.5rem);
  --home-hero-content-top: calc(var(--nav-y) + var(--site-logo-h) + clamp(2rem, 3.5vw, 3.75rem));
}

.nav {
  min-height: calc((var(--nav-y) * 2) + var(--site-logo-h));
}

.nav-logo {
  min-width: 0;
  max-width: min(44vw, 220px);
  flex: 1 1 auto;
}

.nav-logo img {
  height: var(--site-logo-h) !important;
  max-width: 100%;
  object-fit: contain;
}

.nav-menu-btn {
  flex-shrink: 0;
  margin-left: auto !important;
}

body.home-page .hero {
  align-items: flex-start !important;
  padding-top: var(--home-hero-content-top) !important;
}

body.home-page .hero-content {
  transform: none !important;
  max-width: min(940px, calc(100vw - (var(--nav-x) * 2))) !important;
}

.about-hero,
.contact-hero,
.deterx-hero,
section.domains-hero {
  padding-top: var(--hero-content-top) !important;
}

.hero-eyebrow,
section.domains-hero .eyebrow,
.about-hero .eyebrow,
.contact-hero .eyebrow,
.deterx-hero .eyebrow {
  max-width: min(100%, 72ch);
}

.hero h1,
section.domains-hero h1,
.about-hero h1,
.contact-hero h1,
.deterx-hero h1 {
  margin-top: 0;
}

@media (max-width: 900px) {
  :root {
    --site-logo-h: clamp(52px, 10vw, 68px);
    --hero-content-top: clamp(4.25rem, 9vw, 5.75rem);
    --home-hero-content-top: calc(var(--nav-y) + var(--site-logo-h) + clamp(1.25rem, 5vw, 2.5rem));
  }
}

@media (max-width: 640px) {
  :root {
    --site-logo-h: clamp(44px, 12vw, 56px);
    --menu-btn-w: clamp(112px, 34vw, 142px);
    --hero-content-top: clamp(3.75rem, 11vw, 5rem);
    --home-hero-content-top: calc(var(--nav-y) + var(--site-logo-h) + clamp(1.25rem, 6vw, 2rem));
  }

  .nav-logo {
    max-width: min(45vw, 150px);
  }

  .nav-menu-btn {
    min-width: 0;
    padding-inline: 0.85rem !important;
  }
}

@media (max-width: 430px) {
  :root {
    --site-logo-h: clamp(40px, 12vw, 48px);
    --menu-btn-w: clamp(104px, 32vw, 126px);
  }

  .nav-logo {
    max-width: 42vw;
  }
}
/* Final hero image visibility overrides: loaded last to beat page/mobile rules. */
@media (min-width: 901px) {
  body.home-page::before {
    height: 54.55vw !important;
    background-size: 100% auto !important;
    background-position: center top !important;
  }

  body.environmental-page::before {
    height: 53.35vw !important;
    background-size: 100% auto !important;
    background-position: center top !important;
  }

  body.home-page .hero {
    min-height: 54.55vw !important;
  }

  body.environmental-page section.domains-hero {
    min-height: 53.35vw !important;
  }
}

@media (orientation: landscape) and (max-width: 900px) {
  body.home-page::before {
    height: 54.55vw !important;
    background-size: 100% auto !important;
    background-position: center top !important;
  }

  body.environmental-page::before {
    height: 53.35vw !important;
    background-size: 100% auto !important;
    background-position: center top !important;
  }

  body.home-page .hero {
    min-height: max(54.55vw, 340px) !important;
  }

  body.environmental-page section.domains-hero {
    min-height: max(53.35vw, 400px) !important;
  }
}

@media (max-width: 760px) {
  .contact-social-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .contact-social-links,
  .footer-social-links {
    justify-content: center;
  }
}

/* Final mobile composition pass: keeps hero copy below the logo/menu,
   avoids oversized blank bands, and preserves image visibility on phones. */
@media (max-width: 640px) {
  body.home-page::before {
    height: clamp(455px, 118vw, 560px) !important;
    background-size: auto 100% !important;
    background-position: center top !important;
  }

  body.home-page .hero {
    min-height: clamp(455px, 118vw, 560px) !important;
    padding-top: calc(var(--nav-y) + var(--site-logo-h) + clamp(1.5rem, 5vw, 2.15rem)) !important;
    padding-bottom: 0 !important;
  }

  body.home-page .hero-content {
    width: min(100%, 23rem) !important;
    max-width: min(100%, 23rem) !important;
    transform: none !important;
  }

  body.home-page .hero-eyebrow {
    max-width: 32ch !important;
    font-size: 0.72rem !important;
    line-height: 1.45 !important;
  }

  body.home-page .hero h1 {
    max-width: 10.5ch !important;
    font-size: clamp(2.2rem, 10.8vw, 3.05rem) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.06em !important;
  }

  body.environmental-page::before {
    height: clamp(300px, 74vw, 430px) !important;
    background-size: 100% auto !important;
    background-position: center top !important;
  }

  body.environmental-page section.domains-hero {
    min-height: clamp(300px, 74vw, 430px) !important;
    padding-top: calc(var(--nav-y) + var(--site-logo-h) + clamp(1.25rem, 4vw, 2rem)) !important;
    padding-bottom: 1rem !important;
  }

  .about-hero,
  .contact-hero,
  .deterx-hero {
    padding-top: calc(var(--nav-y) + var(--site-logo-h) + clamp(1.5rem, 5vw, 2.25rem)) !important;
    padding-bottom: 2rem !important;
  }

  .about-hero h1,
  .contact-hero h1,
  .deterx-hero h1,
  section.domains-hero h1 {
    max-width: 11.5ch !important;
    font-size: clamp(2.05rem, 10.5vw, 3rem) !important;
    line-height: 1 !important;
  }

  section {
    padding-top: 2.65rem !important;
    padding-bottom: 2.65rem !important;
  }

  .cap-card,
  .team-card,
  .domain-card,
  .d-card,
  .focus-card,
  .project-card,
  .stat-card,
  .how-card {
    padding: clamp(1.2rem, 5vw, 1.55rem) !important;
  }

  .cap-card h3,
  .domain-card h3,
  .d-card h3,
  .focus-card h3,
  .project-card h3 {
    font-size: clamp(1.05rem, 4.6vw, 1.25rem) !important;
    line-height: 1.2 !important;
  }

  body.home-page .hero {
    padding-top: calc(var(--nav-y) + var(--site-logo-h) + clamp(1.5rem, 5vw, 2.15rem)) !important;
    padding-bottom: 0 !important;
  }

  body.environmental-page section.domains-hero {
    padding-top: calc(var(--nav-y) + var(--site-logo-h) + clamp(1.25rem, 4vw, 2rem)) !important;
    padding-bottom: 1rem !important;
  }

  .about-hero,
  .contact-hero,
  .deterx-hero {
    padding-top: calc(var(--nav-y) + var(--site-logo-h) + clamp(1.5rem, 5vw, 2.25rem)) !important;
    padding-bottom: 2rem !important;
  }
}

@media (max-width: 430px) {
  body.home-page::before,
  body.home-page .hero {
    height: auto !important;
    min-height: clamp(430px, 118vw, 520px) !important;
  }

  body.home-page .hero h1 {
    font-size: clamp(2rem, 11.2vw, 2.75rem) !important;
  }

  .nav {
    align-items: flex-start !important;
  }
}
/* Tablet footer - mirror mobile organization with wider spacing */
@media (min-width: 769px) and (max-width: 1024px) {
  .footer {
    padding: 2.25rem 1.5rem 1.35rem !important;
  }

  .footer-inner {
    width: min(100%, 720px) !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "brand"
      "social"
      "links"
      "legal"
      "copy" !important;
    justify-items: center !important;
    align-items: center !important;
    row-gap: 1.2rem !important;
    text-align: center !important;
  }

  .footer-brand {
    width: 100% !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 0.65rem !important;
    padding-bottom: 1.1rem !important;
    border-bottom: 1.5px solid var(--section-divider) !important;
  }

  .footer-brand-icon {
    width: clamp(58px, 8vw, 72px) !important;
  }

  .footer-address {
    max-width: 44ch !important;
    margin-inline: auto !important;
    font-size: clamp(0.78rem, 1.45vw, 0.9rem) !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }

  .footer-social-links {
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0.65rem !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .footer-social-links a {
    width: 42px !important;
    height: 42px !important;
  }

  .footer-social-links img {
    width: 27px !important;
    height: 27px !important;
  }

  .footer-links {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.7rem clamp(1.25rem, 3.2vw, 2rem) !important;
    padding: 1.1rem 0 0 !important;
    margin: 0 !important;
    border-top: 1.5px solid var(--section-divider) !important;
    text-align: center !important;
  }

  .footer-links li,
  .footer-links a {
    width: auto !important;
    text-align: center !important;
  }

  .footer-links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: none !important;
    font-size: clamp(0.92rem, 1.6vw, 1rem) !important;
    line-height: 1.25 !important;
    color: var(--fg) !important;
  }

  .footer-legal-links {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem clamp(0.9rem, 2.2vw, 1.35rem) !important;
    padding: 1rem 0 0 !important;
    margin: 0 !important;
    border-top: 1.5px solid var(--section-divider) !important;
    text-align: center !important;
  }

  .footer-legal-links a {
    font-size: clamp(0.64rem, 1.2vw, 0.74rem) !important;
    letter-spacing: 0.065em !important;
    line-height: 1.35 !important;
    text-align: center !important;
    color: var(--muted) !important;
  }

  .footer-copy {
    width: 100% !important;
    max-width: 48ch !important;
    margin-inline: auto !important;
    padding-top: 1rem !important;
    border-top: 1.5px solid var(--section-divider) !important;
    font-size: clamp(0.68rem, 1.25vw, 0.76rem) !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }
}
/* Mobile footer - clean phone-only composition */
@media (max-width: 768px) {
  .footer {
    padding: 1.6rem 1rem 1rem !important;
  }

  .footer-inner {
    width: min(100%, 430px) !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "brand"
      "social"
      "links"
      "legal"
      "copy" !important;
    justify-items: center !important;
    align-items: center !important;
    row-gap: 1.05rem !important;
    text-align: center !important;
  }

  .footer-brand {
    width: 100% !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 0.55rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1.5px solid var(--section-divider) !important;
  }

  .footer-brand-icon {
    width: clamp(48px, 13vw, 60px) !important;
  }

  .footer-address {
    max-width: 34ch !important;
    margin-inline: auto !important;
    font-size: clamp(0.74rem, 2.8vw, 0.82rem) !important;
    line-height: 1.42 !important;
    text-align: center !important;
  }

  .footer-address span {
    display: inline !important;
  }

  .address-break-desktop {
    display: none !important;
  }

  .address-break-mobile {
    display: block !important;
  }

  .footer-social-links {
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: clamp(0.45rem, 2.3vw, 0.65rem) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .footer-social-links a {
    width: clamp(34px, 9vw, 40px) !important;
    height: clamp(34px, 9vw, 40px) !important;
  }

  .footer-social-links img {
    width: clamp(22px, 5.8vw, 26px) !important;
    height: clamp(22px, 5.8vw, 26px) !important;
  }

  .footer-links {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.65rem clamp(1rem, 5vw, 1.7rem) !important;
    padding: 1rem 0 0 !important;
    margin: 0 !important;
    border-top: 1.5px solid var(--section-divider) !important;
    text-align: center !important;
  }

  .footer-links li,
  .footer-links a {
    width: auto !important;
    text-align: center !important;
  }

  .footer-links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: none !important;
    font-size: clamp(0.86rem, 3.4vw, 0.98rem) !important;
    line-height: 1.25 !important;
    color: var(--fg) !important;
  }

  .footer-legal-links {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem clamp(0.75rem, 3.5vw, 1.2rem) !important;
    padding: 0.95rem 0 0 !important;
    margin: 0 !important;
    border-top: 1.5px solid var(--section-divider) !important;
    text-align: center !important;
  }

  .footer-legal-links a {
    font-size: clamp(0.61rem, 2.45vw, 0.7rem) !important;
    letter-spacing: 0.065em !important;
    line-height: 1.35 !important;
    text-align: center !important;
    color: var(--muted) !important;
  }

  .footer-copy {
    width: 100% !important;
    max-width: 34ch !important;
    margin-inline: auto !important;
    padding-top: 0.9rem !important;
    border-top: 1.5px solid var(--section-divider) !important;
    font-size: clamp(0.62rem, 2.45vw, 0.72rem) !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }
}

@media (max-width: 380px) {
  .footer {
    padding-inline: 0.75rem !important;
  }

  .footer-inner {
    width: min(100%, 350px) !important;
    row-gap: 0.95rem !important;
  }

  .footer-links {
    gap: 0.55rem 0.95rem !important;
  }

  .footer-legal-links {
    gap: 0.38rem 0.72rem !important;
  }
}

/* Device-specific homepage hero artwork */
@media (min-width: 768px) and (max-width: 1180px) {
  body.home-page::before {
    background-image: url('mpp50453-Smart-Agriculture-Drones-Terraced-Farming.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    height: min(calc(100vw * 1.3334), 100svh) !important;
    min-height: min(calc(100vw * 1.3334), 100svh) !important;
  }

  body.home-page .hero {
    min-height: min(calc(100vw * 1.3334), 100svh) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  body.home-page .hero-content {
    transform: none !important;
    max-width: min(82vw, 720px) !important;
    margin-block: auto !important;
  }
}

@media (max-width: 767px) {
  body.home-page::before {
    background-image: url('mpp50453-Smart-Agriculture-Drones-Terraced-Farming.png') !important;
    background-size: cover !important;
    background-position: center top !important;
    height: min(calc(100vw * 1.7779), 100svh) !important;
    min-height: min(calc(100vw * 1.7779), 100svh) !important;
  }

  body.home-page .hero {
    min-height: min(calc(100vw * 1.7779), 100svh) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  body.home-page .hero-content {
    transform: none !important;
    max-width: min(88vw, 430px) !important;
    margin-block: auto !important;
  }
}

@media (min-width: 1025px) {
  body.home-page .hero .container {
    display: flex;
    justify-content: center;
  }

  body.home-page .hero-inner {
    justify-content: center;
    justify-items: center;
    text-align: center;
    margin-inline: auto;
  }

  body.home-page .hero-content {
    margin-inline: auto !important;
    text-align: center;
  }

  body.home-page .hero h1 {
    margin-inline: auto;
  }
}

/* Final hero heading alignment pass */
body.home-page .hero .container,
body.home-page .hero-inner,
body.home-page .hero-content {
  margin-inline: auto !important;
}

body.home-page .hero .container {
  width: min(100% - 2rem, var(--container-max)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.home-page .hero-inner {
  width: 100% !important;
  grid-template-columns: minmax(0, min(100%, 980px)) !important;
  justify-content: center !important;
  justify-items: center !important;
  text-align: center !important;
}

body.home-page .hero-content {
  width: min(100%, 940px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

body.home-page .hero-eyebrow,
body.home-page .hero h1 {
  width: 100% !important;
  margin-inline: auto !important;
  text-align: center !important;
  text-wrap: balance;
}

.about-hero .container,
.contact-hero .container,
.deterx-hero .container,
.ecosystem-hero .container,
.domains-hero .container,
.legal-hero-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.about-hero h1,
.contact-hero h1,
.deterx-hero h1,
.ecosystem-hero h1,
.domains-hero h1,
.legal-hero h1 {
  max-width: min(100%, 980px) !important;
  margin-inline: auto !important;
  text-align: center !important;
  text-wrap: balance;
}

@media (min-width: 768px) and (max-width: 1180px) {
  body.home-page .hero-content {
    justify-content: center !important;
    min-height: 0 !important;
  }
}

@media (max-width: 767px) {
  body.home-page .hero .container {
    width: min(100% - 1.5rem, 430px) !important;
  }

  body.home-page .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }

  body.home-page .hero h1 {
    max-width: 11ch !important;
    margin-inline: auto !important;
  }
}

/* Final tablet/mobile nav scale pass */
@media (min-width: 768px) and (max-width: 1180px) {
  :root {
    --site-logo-h: clamp(82px, 9.2vw, 104px);
    --menu-btn-w: clamp(250px, 32vw, 340px);
    --menu-panel-w: var(--menu-btn-w);
    --menu-h: 46px;
  }

  .nav-logo {
    max-width: min(46vw, 300px) !important;
  }

  .nav-logo img {
    height: var(--site-logo-h) !important;
  }

  .nav-menu-btn {
    width: var(--menu-btn-w) !important;
    flex-basis: var(--menu-btn-w) !important;
    height: var(--menu-h) !important;
    padding-inline: 1.25rem 0.75rem !important;
    font-size: 0.82rem !important;
    gap: 1.45rem !important;
  }
}

/* Environmental Domains device-specific hero artwork */
@media (min-width: 768px) and (max-width: 1180px) {
  body.environmental-page::before {
    background-image: url('mppqrvfz-ed_tab.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    height: min(calc(100vw * 1.3334), 100svh) !important;
    min-height: min(calc(100vw * 1.3334), 100svh) !important;
  }

  body.environmental-page .domains-hero {
    min-height: min(calc(100vw * 1.3334), 100svh) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  body.environmental-page .domains-hero .container {
    transform: none !important;
    margin-block: auto !important;
  }
}

@media (max-width: 767px) {
  body.environmental-page::before {
    background-image: url('mppqrvlg-ed_phone.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    height: min(calc(100vw * 1.7768), 100svh) !important;
    min-height: min(calc(100vw * 1.7768), 100svh) !important;
  }

  body.environmental-page .domains-hero {
    min-height: min(calc(100vw * 1.7768), 100svh) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  body.environmental-page .domains-hero .container {
    transform: none !important;
    margin-block: auto !important;
    max-width: min(88vw, 430px) !important;
  }
}

/* Final Environmental Domains phone hero fit pass */
@media (max-width: 767px) and (orientation: portrait) {
  body.environmental-page::before {
    background-image: url('mppqrvlg-ed_phone.png') !important;
    background-size: cover !important;
    background-position: center top !important;
    width: 100% !important;
    height: clamp(640px, 100svh, 860px) !important;
    min-height: clamp(640px, 100svh, 860px) !important;
  }

  body.environmental-page .domains-hero {
    height: clamp(640px, 100svh, 860px) !important;
    min-height: clamp(640px, 100svh, 860px) !important;
    overflow: hidden !important;
    padding-block: 0 !important;
  }

  body.environmental-page .domains-hero .container {
    align-self: flex-start !important;
    width: min(82vw, 420px) !important;
    max-width: 420px !important;
    margin: clamp(112px, 16svh, 148px) auto 0 !important;
    text-align: center !important;
  }

  body.environmental-page .domains-hero .eyebrow,
  body.environmental-page .domains-hero h1,
  body.environmental-page .domains-hero .subtitle {
    text-align: center !important;
    margin-inline: auto !important;
  }
}
/* Final accessibility contrast pass for image-backed heroes */
body.home-page .hero-eyebrow,
body.home-page .hero h1,
body.environmental-page .domains-hero .eyebrow,
body.environmental-page .domains-hero h1,
body.environmental-page .domains-hero .subtitle {
  color: #061b12 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.96),
    0 8px 26px rgba(255, 255, 255, 0.72),
    0 0 1px rgba(255, 255, 255, 0.95) !important;
}

body.home-page .hero h1,
body.environmental-page .domains-hero h1 {
  font-weight: 820 !important;
  letter-spacing: -0.045em !important;
}

body.home-page .hero-eyebrow,
body.environmental-page .domains-hero .eyebrow {
  font-weight: 820 !important;
  letter-spacing: 0.16em !important;
}

body.environmental-page .domains-hero .subtitle {
  color: #0c2b1f !important;
  font-weight: 560 !important;
}

@media (min-width: 768px) and (max-width: 1180px) {
  body.home-page .hero-content,
  body.environmental-page .domains-hero .container {
    max-width: min(78vw, 760px) !important;
  }

  body.home-page .hero h1,
  body.environmental-page .domains-hero h1 {
    font-size: clamp(3rem, 7.2vw, 5.2rem) !important;
    line-height: 1.02 !important;
    max-width: 12ch !important;
  }
}

@media (max-width: 767px) {
  body.home-page .hero-eyebrow,
  body.home-page .hero h1,
  body.environmental-page .domains-hero .eyebrow,
  body.environmental-page .domains-hero h1,
  body.environmental-page .domains-hero .subtitle {
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.98),
      0 6px 20px rgba(255, 255, 255, 0.74),
      0 0 1px rgba(255, 255, 255, 0.96) !important;
  }

  body.home-page .hero h1,
  body.environmental-page .domains-hero h1 {
    font-size: clamp(2.35rem, 12vw, 3.7rem) !important;
    line-height: 1.02 !important;
    max-width: 10.75ch !important;
  }

  body.environmental-page .domains-hero .subtitle {
    max-width: 28ch !important;
    font-size: clamp(0.95rem, 4vw, 1.06rem) !important;
    line-height: 1.45 !important;
  }
}
/* Final tablet/phone whitespace + text-box width pass */
@media (min-width: 768px) and (max-width: 1180px) {
  .container {
    width: min(100% - 3rem, 1040px) !important;
  }

  .section-heading,
  .about-hero h1,
  .contact-hero h1,
  .deterx-hero h1,
  .ecosystem-hero h1,
  .domains-hero h1,
  .legal-hero h1 {
    max-width: min(100%, 860px) !important;
  }

  .subtitle,
  .lead,
  .intro-panel,
  .entry-copy,
  .team-copy,
  .contact-form-section,
  .contact-social-card {
    max-width: min(100%, 820px) !important;
  }

  .how-card p,
  .domain-card p,
  .stat-card p,
  .project-card p,
  .team-copy p,
  .topics-grid p,
  .d-card p,
  .focus-card p,
  .entry-card p,
  .map-node p,
  .cap-card p {
    max-width: 64ch !important;
  }

  .cap-card-content,
  .entry-copy,
  .team-copy {
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 767px) {
  .container {
    width: min(100% - 1.5rem, 100%) !important;
  }

  .section-heading,
  .about-hero h1,
  .contact-hero h1,
  .deterx-hero h1,
  .ecosystem-hero h1,
  .domains-hero h1,
  .legal-hero h1 {
    max-width: min(100%, 22rem) !important;
  }

  .subtitle,
  .lead,
  .intro-panel,
  .entry-copy,
  .team-copy,
  .contact-form-section,
  .contact-social-card,
  .cta-section .container {
    max-width: 100% !important;
    width: 100% !important;
  }

  .how-card,
  .domain-card,
  .stat-card,
  .project-card,
  .team-card,
  .topic-card,
  .d-card,
  .focus-card,
  .entry-card,
  .map-node,
  .cap-card,
  .contact-form-section,
  .contact-social-card,
  .intro-panel {
    width: 100% !important;
  }

  .how-card p,
  .domain-card p,
  .stat-card p,
  .project-card p,
  .team-copy p,
  .topic-card p,
  .d-card p,
  .focus-card p,
  .entry-card p,
  .map-node p,
  .cap-card p,
  .subtitle,
  .lead {
    max-width: 100% !important;
  }
}

@media (max-width: 420px) {
  .section-heading,
  .about-hero h1,
  .contact-hero h1,
  .deterx-hero h1,
  .ecosystem-hero h1,
  .domains-hero h1,
  .legal-hero h1 {
    max-width: 100% !important;
  }
}
/* Phone-only headline line break */
.phone-only-break {
  display: none;
}

@media (max-width: 767px) {
  .phone-only-break {
    display: block;
  }
}
/* Homepage About heading desktop line control */
.desktop-about-break { display: none; }
@media (min-width: 1025px) {
  .home-page .about-preview .desktop-about-break { display: block; }
}

/* Final line-break hygiene for narrow screens */
@media (max-width: 767px) {
  .keep-line {
    white-space: normal;
  }

  h1 .keep-line,
  h2 .keep-line,
  h3 .keep-line {
    display: inline;
  }

  .home-page .hero h1 .keep-line,
  .domains-page .domains-hero h1 .keep-line {
    display: inline-block;
    white-space: normal;
  }
}

@media (min-width: 768px) {
  .keep-line {
    white-space: nowrap;
  }
}

/* Environmental Domains hero text visibility + image-aware alignment */
body.environmental-page .domains-hero {
  align-items: flex-start !important;
}

body.environmental-page .domains-hero .container {
  width: min(46vw, 760px) !important;
  max-width: 760px !important;
  margin: clamp(118px, 13vw, 190px) auto 0 clamp(44px, 7vw, 132px) !important;
  text-align: left !important;
}

body.environmental-page .domains-hero .eyebrow,
body.environmental-page .domains-hero h1,
body.environmental-page .domains-hero .subtitle {
  color: #04170f !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 1),
    0 10px 28px rgba(255, 255, 255, 0.86),
    0 0 2px rgba(255, 255, 255, 0.96) !important;
}

body.environmental-page .domains-hero h1 {
  max-width: 11.5ch !important;
  line-height: 0.98 !important;
}

body.environmental-page .domains-hero .subtitle {
  max-width: 34rem !important;
  color: #0b2a1d !important;
}

@media (min-width: 768px) and (max-width: 1180px) {
  body.environmental-page .domains-hero .container {
    width: min(76vw, 680px) !important;
    max-width: 680px !important;
    margin: clamp(122px, 16vw, 176px) auto 0 clamp(30px, 6vw, 72px) !important;
  }

  body.environmental-page .domains-hero h1 {
    max-width: 12ch !important;
  }
}

@media (max-width: 767px) {
  body.environmental-page .domains-hero .container {
    align-self: flex-start !important;
    width: min(88vw, 390px) !important;
    max-width: 390px !important;
    margin: clamp(102px, 15svh, 142px) auto 0 !important;
    text-align: center !important;
  }

  body.environmental-page .domains-hero .eyebrow,
  body.environmental-page .domains-hero h1,
  body.environmental-page .domains-hero .subtitle {
    text-align: center !important;
    margin-inline: auto !important;
  }

  body.environmental-page .domains-hero h1 {
    max-width: 10.8ch !important;
  }

body.environmental-page .domains-hero .subtitle {
    max-width: 28ch !important;
  }
}

/* Final Environmental Domains hero image fit + upper-third copy placement */
body.environmental-page::before {
  background-size: cover !important;
  background-position: center top !important;
}

body.environmental-page .domains-hero {
  align-items: flex-start !important;
  padding-block: 0 !important;
}

body.environmental-page .domains-hero .container {
  width: min(48vw, 760px) !important;
  max-width: 760px !important;
  margin: clamp(32px, 4.2vw, 72px) auto 0 clamp(44px, 7vw, 132px) !important;
  text-align: left !important;
}

body.environmental-page .domains-hero .eyebrow,
body.environmental-page .domains-hero h1,
body.environmental-page .domains-hero .subtitle {
  color: #04170f !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 1),
    0 8px 24px rgba(255, 255, 255, 0.9),
    0 0 2px rgba(255, 255, 255, 0.96) !important;
}

@media (min-width: 768px) and (max-width: 1180px) {
  body.environmental-page::before {
    background-image: url('mppqrvfz-ed_tab.png') !important;
    background-size: cover !important;
    background-position: center top !important;
    height: min(calc(100vw * 1.3334), 100svh) !important;
    min-height: min(calc(100vw * 1.3334), 100svh) !important;
  }

  body.environmental-page .domains-hero {
    height: min(calc(100vw * 1.3334), 100svh) !important;
    min-height: min(calc(100vw * 1.3334), 100svh) !important;
  }

  body.environmental-page .domains-hero .container {
    width: min(72vw, 680px) !important;
    max-width: 680px !important;
    margin: clamp(34px, 4.8svh, 64px) auto 0 clamp(30px, 6vw, 72px) !important;
  }
}

@media (max-width: 767px) {
  body.environmental-page::before {
    background-image: url('mppqrvlg-ed_phone.png') !important;
    background-size: cover !important;
    background-position: center top !important;
    height: clamp(640px, 100svh, 860px) !important;
    min-height: clamp(640px, 100svh, 860px) !important;
  }

  body.environmental-page .domains-hero {
    height: clamp(640px, 100svh, 860px) !important;
    min-height: clamp(640px, 100svh, 860px) !important;
  }

  body.environmental-page .domains-hero .container {
    width: min(88vw, 420px) !important;
    max-width: 420px !important;
    margin: clamp(30px, 4.5svh, 56px) auto 0 !important;
    text-align: center !important;
  }

  body.environmental-page .domains-hero .eyebrow,
  body.environmental-page .domains-hero h1,
  body.environmental-page .domains-hero .subtitle {
    text-align: center !important;
    margin-inline: auto !important;
  }
}

/* Final Environmental Domains hero fill pass */
body.environmental-page::before {
  background-image: url('mppqrvrv-ed_desktop.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  height: clamp(560px, 56.28vw, 900px) !important;
  min-height: clamp(560px, 56.28vw, 900px) !important;
}

body.environmental-page .domains-hero {
  height: clamp(560px, 56.28vw, 900px) !important;
  min-height: clamp(560px, 56.28vw, 900px) !important;
  overflow: hidden !important;
}

@media (min-width: 768px) and (max-width: 1180px) {
  body.environmental-page::before {
    background-image: url('mppqrvfz-ed_tab.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    height: min(100svh, calc(100vw * 1.3334)) !important;
    min-height: min(100svh, calc(100vw * 1.3334)) !important;
  }

  body.environmental-page .domains-hero {
    height: min(100svh, calc(100vw * 1.3334)) !important;
    min-height: min(100svh, calc(100vw * 1.3334)) !important;
  }
}

@media (max-width: 767px) {
  body.environmental-page::before {
    background-image: url('mppqrvlg-ed_phone.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    height: 100svh !important;
    min-height: 100svh !important;
  }

  body.environmental-page .domains-hero {
    height: 100svh !important;
    min-height: 100svh !important;
  }
}

/* Final Environmental Domains hero composition fix */
body.environmental-page .domains-hero .container {
  width: min(52vw, 840px) !important;
  max-width: 840px !important;
  margin: clamp(62px, 7.4vw, 118px) auto 0 clamp(48px, 6.2vw, 112px) !important;
  text-align: left !important;
}

body.environmental-page .domains-hero h1 {
  max-width: 13.25ch !important;
  font-size: clamp(3.35rem, 4.45vw, 5.05rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.065em !important;
  color: #03160f !important;
}

body.environmental-page .domains-hero .eyebrow {
  color: #03160f !important;
  margin-bottom: 0.82rem !important;
}

body.environmental-page .domains-hero .subtitle {
  max-width: 41ch !important;
  font-size: clamp(1rem, 1.16vw, 1.18rem) !important;
  line-height: 1.55 !important;
  color: #0a281c !important;
}

body.environmental-page .domains-hero .eyebrow,
body.environmental-page .domains-hero h1,
body.environmental-page .domains-hero .subtitle {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.96),
    0 10px 26px rgba(255, 255, 255, 0.82),
    0 0 2px rgba(255, 255, 255, 0.92) !important;
}

@media (min-width: 768px) and (max-width: 1180px) {
  body.environmental-page .domains-hero .container {
    width: min(76vw, 680px) !important;
    max-width: 680px !important;
    margin: clamp(58px, 8svh, 92px) auto 0 clamp(32px, 6vw, 72px) !important;
  }

  body.environmental-page .domains-hero h1 {
    max-width: 12.5ch !important;
    font-size: clamp(3rem, 7vw, 4.9rem) !important;
  }
}

@media (max-width: 767px) {
  body.environmental-page .domains-hero .container {
    width: min(86vw, 390px) !important;
    max-width: 390px !important;
    margin: clamp(88px, 13svh, 128px) auto 0 !important;
    text-align: center !important;
  }

  body.environmental-page .domains-hero .eyebrow,
  body.environmental-page .domains-hero h1,
  body.environmental-page .domains-hero .subtitle {
    text-align: center !important;
    margin-inline: auto !important;
  }

  body.environmental-page .domains-hero h1 {
    max-width: 11.25ch !important;
    font-size: clamp(2.5rem, 12vw, 4rem) !important;
  }

  body.environmental-page .domains-hero .subtitle {
    max-width: 30ch !important;
    font-size: clamp(0.94rem, 4.3vw, 1.08rem) !important;
  }
}

/* Final override: remove Environmental Domains hero artwork */
body.environmental-page::before {
  display: none !important;
  background-image: none !important;
  height: 0 !important;
}

body.environmental-page .domains-hero {
  background: var(--bg) !important;
  min-height: auto !important;
  padding-top: clamp(6rem, 10vw, 9rem) !important;
  padding-bottom: clamp(4rem, 8vw, 6rem) !important;
}

@media (max-width: 1024px) {
  body.environmental-page .domains-hero {
    min-height: auto !important;
    padding-top: clamp(5.5rem, 10vw, 7rem) !important;
    padding-bottom: clamp(3.5rem, 8vw, 5rem) !important;
  }
}

@media (max-width: 767px) {
  body.environmental-page .domains-hero {
    min-height: auto !important;
    padding-top: 5.5rem !important;
    padding-bottom: 3.5rem !important;
  }
}
/* Final DeterX hero vertical centering */
.deterx-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: clamp(620px, 56vw, 760px) !important;
  padding-top: clamp(5rem, 7vw, 6.25rem) !important;
  padding-bottom: clamp(5rem, 7vw, 6.25rem) !important;
}

.deterx-hero > .container {
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@media (min-width: 768px) and (max-width: 1180px) {
  .deterx-hero {
    min-height: min(760px, 78svh) !important;
    padding-top: clamp(5.75rem, 10vw, 7rem) !important;
    padding-bottom: clamp(4.75rem, 8vw, 6rem) !important;
  }
}

@media (max-width: 767px) {
  .deterx-hero {
    min-height: min(680px, 86svh) !important;
    padding-top: clamp(5.5rem, 18vw, 6.75rem) !important;
    padding-bottom: clamp(4.25rem, 14vw, 5.75rem) !important;
  }
}
/* Final hero eyebrow scale + weight pass - applies across all page heroes */
body.home-page .hero-eyebrow,
.about-hero .eyebrow,
.contact-hero .eyebrow,
.deterx-hero .eyebrow,
.ecosystem-hero .eyebrow,
body.environmental-page .domains-hero .eyebrow,
.legal-hero .eyebrow {
  font-size: clamp(0.92rem, 0.78rem + 0.42vw, 1.16rem) !important;
  font-weight: 520 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.12em !important;
}

@media (max-width: 767px) {
  body.home-page .hero-eyebrow,
  .about-hero .eyebrow,
  .contact-hero .eyebrow,
  .deterx-hero .eyebrow,
  .ecosystem-hero .eyebrow,
  body.environmental-page .domains-hero .eyebrow,
  .legal-hero .eyebrow {
    font-size: clamp(0.86rem, 3.4vw, 1rem) !important;
    font-weight: 500 !important;
    letter-spacing: 0.105em !important;
  }
}
/* Final menu button page-name label sizing */
.nav-menu-btn .nav-menu-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 769px) and (max-width: 1180px) {
  :root {
    --menu-w: clamp(260px, 32vw, 380px);
    --menu-btn-w: var(--menu-w);
    --menu-panel-w: var(--menu-w);
  }

  .nav-menu-btn {
    letter-spacing: 0.105em !important;
  }
}

@media (max-width: 768px) {
  :root {
    --menu-btn-w: clamp(150px, 46vw, 208px);
    --menu-panel-w: min(300px, calc(100vw - 2rem));
  }

  .nav-menu-btn {
    justify-content: space-between !important;
    gap: 0.75rem !important;
    padding-inline: 1rem 0.55rem !important;
    letter-spacing: 0.08em !important;
  }

  .nav-menu-btn .nav-menu-label {
    font-size: clamp(0.68rem, 2.15vw, 0.82rem);
  }
}

@media (max-width: 420px) {
  :root {
    --menu-btn-w: clamp(136px, 43vw, 172px);
    --menu-panel-w: min(280px, calc(100vw - 1.5rem));
  }

  .nav-menu-btn .nav-menu-label {
    font-size: 0.66rem;
    letter-spacing: 0.055em;
  }
}

/* Final nav pill intrinsic sizing: page-name menu buttons follow text width. */
.nav-menu-btn {
  flex: 0 1 auto !important;
  width: fit-content !important;
  min-width: max-content !important;
  max-width: min(42vw, 420px) !important;
  padding-inline: clamp(1.25rem, 2.1vw, 1.8rem) 0.62rem !important;
}

.nav-menu-btn .nav-menu-label {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(min(42vw, 420px) - 3.6rem) !important;
}

@media (min-width: 769px) and (max-width: 1180px) {
  .nav-menu-btn {
    max-width: min(46vw, 360px) !important;
    padding-inline: 1.28rem 0.58rem !important;
  }

  .nav-menu-btn .nav-menu-label {
    max-width: calc(min(46vw, 360px) - 3.25rem) !important;
  }
}

@media (max-width: 768px) {
  .nav-menu-btn {
    flex-shrink: 1 !important;
    width: fit-content !important;
    min-width: max-content !important;
    max-width: min(58vw, 240px) !important;
    padding-inline: 1rem 0.52rem !important;
    gap: 0.68rem !important;
  }

  .nav-menu-btn .nav-menu-label {
    max-width: calc(min(58vw, 240px) - 2.85rem) !important;
  }
}

@media (max-width: 420px) {
  .nav-menu-btn {
    max-width: min(58vw, 216px) !important;
    padding-inline: 0.9rem 0.48rem !important;
    gap: 0.55rem !important;
  }

  .nav-menu-btn .nav-menu-label {
    max-width: calc(min(58vw, 216px) - 2.55rem) !important;
  }
}

/* Safety correction for intrinsic nav sizing: allow fit-content, prevent overflow. */
.nav-menu-btn {
  min-width: clamp(8.25rem, 12vw, 10.5rem) !important;
}

@media (max-width: 768px) {
  .nav-menu-btn {
    min-width: clamp(7rem, 32vw, 9rem) !important;
  }
}

@media (max-width: 420px) {
  .nav-menu-btn {
    min-width: clamp(6.4rem, 30vw, 8.25rem) !important;
  }
}

/* Final Environmental Domains hero centering + whitespace cleanup */
body.environmental-page .domains-hero {
  min-height: clamp(420px, 52svh, 560px) !important;
  padding-block: clamp(4.5rem, 7vw, 6rem) clamp(3.25rem, 5vw, 4.5rem) !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
}

body.environmental-page .domains-hero > .container {
  width: min(92vw, 980px) !important;
  margin-inline: auto !important;
  display: grid !important;
  justify-items: center !important;
  text-align: center !important;
}

body.environmental-page .domains-hero .eyebrow,
body.environmental-page .domains-hero h1,
body.environmental-page .domains-hero .subtitle {
  margin-inline: auto !important;
  text-align: center !important;
}

body.environmental-page .domains-hero h1 {
  max-width: min(920px, 100%) !important;
}

body.environmental-page .domains-hero .subtitle {
  max-width: min(720px, 100%) !important;
}

@media (max-width: 1024px) {
  body.environmental-page .domains-hero {
    min-height: clamp(400px, 58svh, 540px) !important;
    padding-block: clamp(4.25rem, 9vw, 5.75rem) clamp(2.75rem, 7vw, 4rem) !important;
  }

  body.environmental-page .domains-hero > .container {
    width: min(90vw, 760px) !important;
  }
}

@media (max-width: 767px) {
  body.environmental-page .domains-hero {
    min-height: clamp(360px, 62svh, 480px) !important;
    padding-block: clamp(4rem, 18vw, 5.25rem) clamp(2.5rem, 11vw, 3.5rem) !important;
  }

  body.environmental-page .domains-hero > .container {
    width: min(88vw, 420px) !important;
  }
}

/* Final site-wide responsive + accessibility QA pass */
:root {
  --hero-readable: #071d13;
  --hero-readable-soft: #183428;
  --hero-light-halo: 0 1px 18px rgba(255, 255, 255, 0.9), 0 0 2px rgba(255, 255, 255, 0.95);
}

html,
body {
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

:is(.hero h1, .about-hero h1, .contact-hero h1, .deterx-hero h1, .ecosystem-hero h1, .domains-hero h1, .legal-hero h1) {
  color: var(--hero-readable) !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.98 !important;
  text-wrap: balance;
}

:is(.hero-eyebrow, .eyebrow, .section-label) {
  font-weight: 500 !important;
  letter-spacing: 0.105em !important;
}

:is(.hero .subtitle, .about-hero .subtitle, .contact-hero .subtitle, .deterx-hero .subtitle, .ecosystem-hero .subtitle, .domains-hero .subtitle, .legal-hero .subtitle, .section-sub) {
  color: var(--hero-readable-soft) !important;
  font-weight: 430 !important;
  line-height: 1.55 !important;
  text-wrap: pretty;
}

:is(.section-heading, .card h3, .entry-card h3, .d-card h3, .legal-card h2) {
  font-weight: 650 !important;
  letter-spacing: -0.035em !important;
  text-wrap: balance;
}

body.home-page .hero-eyebrow,
body.home-page .hero h1 {
  text-shadow: var(--hero-light-halo) !important;
}

body.home-page .hero {
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  padding-inline: clamp(1.25rem, 4vw, 3rem) !important;
}

body.home-page .hero-content {
  width: min(92vw, 1040px) !important;
  margin-inline: auto !important;
  text-align: center !important;
  transform: none !important;
}

body.home-page .hero h1 {
  max-width: min(100%, 12.5ch) !important;
  margin-inline: auto !important;
}

body.home-page::before {
  background-position: center top !important;
}

:is(.about-hero, .contact-hero, .ecosystem-hero, .legal-hero) {
  min-height: auto !important;
  display: grid !important;
  align-items: center !important;
  padding-block: clamp(5rem, 8vw, 7rem) clamp(3.75rem, 6vw, 5rem) !important;
}

:is(.about-hero, .contact-hero, .ecosystem-hero, .legal-hero) > .container,
body.environmental-page .domains-hero > .container,
.deterx-hero > .container {
  width: min(92vw, 1040px) !important;
  margin-inline: auto !important;
}

.deterx-hero {
  min-height: clamp(520px, 62svh, 680px) !important;
  padding-block: clamp(4.75rem, 7vw, 6rem) !important;
}

body.environmental-page .domains-hero {
  min-height: auto !important;
  padding-block: clamp(5rem, 8vw, 6.5rem) clamp(3.5rem, 5vw, 4.75rem) !important;
  background: var(--bg) !important;
}

body.environmental-page .domains-hero h1,
body.environmental-page .domains-hero .subtitle,
body.environmental-page .domains-hero .eyebrow {
  text-shadow: none !important;
}

@media (min-width: 768px) and (max-width: 1180px) {
  .container {
    width: min(92vw, 960px) !important;
  }

  section:not(.hero):not(.about-hero):not(.contact-hero):not(.deterx-hero):not(.ecosystem-hero):not(.domains-hero):not(.legal-hero) {
    padding-block: clamp(3.5rem, 7vw, 5rem) !important;
  }

  :is(.section-heading, .about-hero h1, .contact-hero h1, .deterx-hero h1, .ecosystem-hero h1, .domains-hero h1, .legal-hero h1) {
    max-width: min(100%, 16ch) !important;
    margin-inline: auto !important;
  }

  :is(.section-sub, .about-hero .subtitle, .contact-hero .subtitle, .deterx-hero .subtitle, .ecosystem-hero .subtitle, .domains-hero .subtitle, .legal-hero .subtitle) {
    max-width: min(100%, 68ch) !important;
    margin-inline: auto !important;
  }

  body.home-page .hero-content {
    width: min(90vw, 820px) !important;
  }

  body.home-page .hero h1 {
    max-width: min(100%, 11.5ch) !important;
  }

  :is(.about-hero, .contact-hero, .ecosystem-hero, .legal-hero) {
    padding-block: clamp(4.75rem, 9vw, 6rem) clamp(3.25rem, 7vw, 4.25rem) !important;
  }

  .deterx-hero {
    min-height: min(660px, 72svh) !important;
    padding-block: clamp(4.5rem, 9vw, 5.75rem) !important;
  }

  body.environmental-page .domains-hero {
    padding-block: clamp(4.5rem, 9vw, 5.75rem) clamp(3rem, 7vw, 4rem) !important;
  }
}

@media (max-width: 767px) {
  .container {
    width: min(91vw, 520px) !important;
  }

  section:not(.hero):not(.about-hero):not(.contact-hero):not(.deterx-hero):not(.ecosystem-hero):not(.domains-hero):not(.legal-hero) {
    padding-block: clamp(2.75rem, 12vw, 4rem) !important;
  }

  :is(.hero h1, .about-hero h1, .contact-hero h1, .deterx-hero h1, .ecosystem-hero h1, .domains-hero h1, .legal-hero h1) {
    max-width: min(100%, 12.5ch) !important;
    font-weight: 680 !important;
    line-height: 1.02 !important;
    margin-inline: auto !important;
  }

  :is(.hero .subtitle, .about-hero .subtitle, .contact-hero .subtitle, .deterx-hero .subtitle, .ecosystem-hero .subtitle, .domains-hero .subtitle, .legal-hero .subtitle, .section-sub) {
    max-width: min(100%, 36ch) !important;
    font-size: clamp(0.98rem, 3.4vw, 1.08rem) !important;
    line-height: 1.55 !important;
    margin-inline: auto !important;
  }

  body.home-page .hero {
    min-height: min(100svh, max(560px, 128vw)) !important;
    padding-block: clamp(5rem, 16vw, 6.25rem) clamp(3rem, 12vw, 4rem) !important;
  }

  body.home-page .hero-content {
    width: min(88vw, 440px) !important;
  }

  body.home-page .hero h1 {
    max-width: min(100%, 10.5ch) !important;
  }

  :is(.about-hero, .contact-hero, .ecosystem-hero, .legal-hero) {
    padding-block: clamp(4.25rem, 17vw, 5.5rem) clamp(2.75rem, 10vw, 3.75rem) !important;
  }

  .deterx-hero {
    min-height: min(620px, 78svh) !important;
    padding-block: clamp(4.5rem, 17vw, 5.75rem) clamp(3rem, 12vw, 4rem) !important;
  }

  body.environmental-page .domains-hero {
    padding-block: clamp(4.25rem, 17vw, 5.5rem) clamp(2.75rem, 10vw, 3.75rem) !important;
  }

  :is(.grid, .domain-grid, .team-grid, .ecosystem-entry-grid, .legal-grid, .capability-list, .contact-grid) {
    width: 100% !important;
  }
}

@media (max-width: 420px) {
  .container {
    width: min(90vw, 390px) !important;
  }

  :is(.hero h1, .about-hero h1, .contact-hero h1, .deterx-hero h1, .ecosystem-hero h1, .domains-hero h1, .legal-hero h1) {
    max-width: 11.5ch !important;
  }

  body.home-page .hero {
    min-height: min(96svh, max(540px, 136vw)) !important;
  }
}

:is(a, button, input, textarea, select):focus-visible {
  outline: 3px solid color-mix(in oklch, var(--accent) 78%, white) !important;
  outline-offset: 4px !important;
}

/* Final Environmental Domains selected hero container centering */
body.environmental-page .domains-hero {
  display: grid !important;
  place-items: center !important;
  min-height: clamp(440px, 52svh, 620px) !important;
  padding-block: clamp(3.5rem, 6vw, 5rem) !important;
  text-align: center !important;
}

body.environmental-page .domains-hero > .container {
  width: min(88vw, 920px) !important;
  margin-inline: auto !important;
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  text-align: center !important;
}

body.environmental-page .domains-hero :is(.eyebrow, h1, .subtitle) {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

@media (max-width: 1024px) {
  body.environmental-page .domains-hero {
    min-height: clamp(400px, 54svh, 560px) !important;
    padding-block: clamp(3.25rem, 8vw, 4.75rem) !important;
  }

  body.environmental-page .domains-hero > .container {
    width: min(90vw, 760px) !important;
  }
}

@media (max-width: 767px) {
  body.environmental-page .domains-hero {
    min-height: clamp(360px, 58svh, 500px) !important;
    padding-block: clamp(3rem, 14vw, 4.5rem) !important;
  }

  body.environmental-page .domains-hero > .container {
    width: min(88vw, 430px) !important;
  }
}

/* Final Environmental Domains true center correction */
body.environmental-page .domains-hero {
  display: grid !important;
  place-items: center !important;
  min-height: clamp(460px, 62svh, 660px) !important;
  padding-block: 0 !important;
}

body.environmental-page .domains-hero > .container {
  margin: 0 auto !important;
  place-self: center !important;
  width: min(88vw, 920px) !important;
  max-width: 920px !important;
  text-align: center !important;
}

body.environmental-page .domains-hero :is(.eyebrow, h1, .subtitle) {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

@media (max-width: 1024px) {
  body.environmental-page .domains-hero {
    min-height: clamp(430px, 60svh, 620px) !important;
  }

  body.environmental-page .domains-hero > .container {
    width: min(88vw, 760px) !important;
  }
}

@media (max-width: 767px) {
  body.environmental-page .domains-hero {
    min-height: clamp(380px, 58svh, 520px) !important;
  }

  body.environmental-page .domains-hero > .container {
    width: min(88vw, 430px) !important;
  }
}

/* Final compact Environmental Domains hero spacing */
body.environmental-page .domains-hero {
  min-height: clamp(320px, 42svh, 460px) !important;
  padding-block: clamp(1.5rem, 3vw, 2.5rem) !important;
  align-content: center !important;
}

body.environmental-page .domains-hero > .container {
  width: min(86vw, 840px) !important;
  max-width: 840px !important;
  margin: 0 auto !important;
}

@media (max-width: 1024px) {
  body.environmental-page .domains-hero {
    min-height: clamp(300px, 42svh, 420px) !important;
    padding-block: clamp(1.25rem, 4vw, 2rem) !important;
  }
}

@media (max-width: 767px) {
  body.environmental-page .domains-hero {
    min-height: clamp(280px, 46svh, 380px) !important;
    padding-block: clamp(1.5rem, 7vw, 2.25rem) !important;
  }

  body.environmental-page .domains-hero > .container {
    width: min(88vw, 390px) !important;
  }
}

/* Browser comment: lift home hero copy into the white band of the artwork */
body.home-page .hero-content {
  transform: translateY(clamp(-3.25rem, -4.4vw, -2rem)) !important;
}

@media (max-width: 767px) {
  body.home-page .hero-content {
    transform: translateY(clamp(-1.5rem, -5vw, -0.75rem)) !important;
  }
}

/* Browser annotation: compact Environmental Domains hero height */
body.environmental-page .domains-hero {
  min-height: clamp(240px, 26vw, 340px) !important;
  height: auto !important;
  padding-block: clamp(1.25rem, 2.5vw, 2rem) !important;
}

@media (max-width: 1024px) {
  body.environmental-page .domains-hero {
    min-height: clamp(230px, 34svh, 320px) !important;
    height: auto !important;
    padding-block: clamp(1.25rem, 4vw, 2rem) !important;
  }
}

@media (max-width: 767px) {
  body.environmental-page .domains-hero {
    min-height: clamp(220px, 38svh, 300px) !important;
    padding-block: clamp(1.25rem, 7vw, 2rem) !important;
  }
}

/* Browser comment: keep Environmental Domains selected hero section minimal */
body.environmental-page section.domains-hero.domains-hero {
  min-height: clamp(240px, 26vw, 340px) !important;
  height: auto !important;
  padding-top: clamp(1.25rem, 2.5vw, 2rem) !important;
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem) !important;
}

@media (max-width: 1024px) {
  body.environmental-page section.domains-hero.domains-hero {
    min-height: clamp(230px, 34svh, 320px) !important;
    height: auto !important;
    padding-top: clamp(1.25rem, 4vw, 2rem) !important;
    padding-bottom: clamp(1.25rem, 4vw, 2rem) !important;
  }
}

@media (max-width: 767px) {
  body.environmental-page section.domains-hero.domains-hero {
    min-height: clamp(220px, 38svh, 300px) !important;
    padding-top: clamp(1.25rem, 7vw, 2rem) !important;
    padding-bottom: clamp(1.25rem, 7vw, 2rem) !important;
  }
}

/* Browser request: use the single hero image responsively across screen sizes. */
body.home-page::before,
body.environmental-page::before {
  display: block !important;
  content: "" !important;
  background-image: url("mpp50453-Smart-Agriculture-Drones-Terraced-Farming.png") !important;
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;
  background-position: center bottom !important;
  height: 100svh !important;
  min-height: 100svh !important;
}

body.home-page .hero {
  min-height: 100svh !important;
}

body.environmental-page::before {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  background-image: none !important;
}

body.environmental-page section.domains-hero.domains-hero {
  background: transparent !important;
}

@media (min-width: 901px) and (max-width: 1180px) {
  body.home-page::before {
    background-size: min(1180px, 104vw) auto !important;
    background-position: center bottom !important;
  }

  body.home-page .hero {
    padding-top: calc(var(--nav-y) + var(--site-logo-h) + 0.75rem) !important;
    padding-bottom: clamp(13rem, 24svh, 17rem) !important;
    align-items: center !important;
  }

  body.home-page .hero-content {
    transform: translateY(clamp(-4rem, -7svh, -2rem)) !important;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  body.home-page::before {
    background-size: min(1160px, 136vw) auto !important;
    background-position: center bottom !important;
  }

  body.home-page .hero {
    padding-top: calc(var(--nav-y) + var(--site-logo-h) + 0.75rem) !important;
    padding-bottom: clamp(14rem, 27svh, 18rem) !important;
    align-items: center !important;
  }

  body.home-page .hero-content {
    transform: translateY(clamp(-4.5rem, -8svh, -2.5rem)) !important;
  }
}

@media (max-width: 640px) {
  body.home-page::before {
    background-size: auto clamp(330px, 50svh, 440px) !important;
    background-position: center bottom !important;
  }

  body.home-page .hero {
    padding-top: calc(var(--nav-y) + var(--site-logo-h) + 0.75rem) !important;
    padding-bottom: clamp(11rem, 28svh, 15rem) !important;
  }

  body.home-page .hero-content {
    transform: translateY(clamp(-3.25rem, -7svh, -1.75rem)) !important;
  }

  body.environmental-page::before {
    display: none !important;
    height: 0 !important;
    background-image: none !important;
  }
}

/* Site-wide alignment and responsive QA pass */
:root {
  --page-gutter: clamp(1rem, 4vw, 2.75rem);
  --content-max: 1200px;
  --copy-max: 68ch;
  --hero-copy-max: 1040px;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip !important;
}

@supports not (overflow-x: clip) {
  html,
  body {
    overflow-x: hidden !important;
  }
}

body :is(section, .footer) {
  width: 100%;
}

body.reveal-ready section,
body.reveal-ready .footer,
body.reveal-ready section.is-visible,
body.reveal-ready .footer.is-visible {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

body :is(.container, .footer-inner, .legal-hero-inner) {
  width: min(calc(100vw - (var(--page-gutter) * 2)), var(--content-max)) !important;
  max-width: var(--content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body :is(
  .hero > .container,
  .about-hero > .container,
  .contact-hero > .container,
  .deterx-hero > .container,
  .ecosystem-hero > .container,
  .domains-hero > .container,
  .legal-hero > .container,
  .legal-hero-inner
) {
  width: min(calc(100vw - (var(--page-gutter) * 2)), var(--hero-copy-max)) !important;
  display: grid !important;
  justify-items: center !important;
  text-align: center !important;
}

body.home-page .hero > .container {
  font-size: inherit !important;
  font-weight: inherit !important;
}

body.home-page :is(.hero-inner, .hero-content) {
  width: 100% !important;
  max-width: var(--hero-copy-max) !important;
  display: grid !important;
  justify-items: center !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body :is(
  .section-label,
  .section-heading,
  .section-sub,
  .hero-eyebrow,
  .eyebrow,
  .hero h1,
  .about-hero h1,
  .contact-hero h1,
  .deterx-hero h1,
  .ecosystem-hero h1,
  .domains-hero h1,
  .legal-hero h1
) {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

body:not(.home-page) :is(
  .about-hero,
  .contact-hero,
  .deterx-hero,
  .ecosystem-hero,
  .domains-hero,
  .legal-hero
) :is(.eyebrow, .section-label, h1, .subtitle, p) {
  opacity: 1 !important;
  text-shadow: none !important;
}

body:not(.home-page) :is(
  .about-hero,
  .contact-hero,
  .deterx-hero,
  .ecosystem-hero,
  .domains-hero,
  .legal-hero
) :is(h1, .eyebrow, .section-label) {
  color: #071d13 !important;
}

body:not(.home-page) :is(
  .about-hero,
  .contact-hero,
  .deterx-hero,
  .ecosystem-hero,
  .domains-hero,
  .legal-hero
) :is(.subtitle, p) {
  color: #183428 !important;
}

body :is(
  .section-sub,
  .problem-body,
  .why-body,
  .biz-body,
  .about-body,
  .cta-section p,
  .contact-cta p,
  .legal-card p,
  .contact-social-card p
) {
  max-width: var(--copy-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body :is(.problem-body, .why-body, .biz-body, .about-body) {
  text-align: center !important;
}

body :is(
  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .how-grid,
  .domains-grid,
  .domain-grid,
  .focus-grid,
  .stats-grid,
  .projects-grid,
  .team-grid,
  .topics-grid,
  .capability-list,
  .contact-grid,
  .legal-grid,
  .ecosystem-entry-grid,
  .support-logo-row
) {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-items: stretch !important;
}

body :is(.grid-2, .domain-grid, .contact-grid, .legal-grid) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body :is(.grid-3, .how-grid, .focus-grid, .projects-grid, .topics-grid, .ecosystem-entry-grid) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body :is(.grid-4, .stats-grid, .domains-grid) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body :is(
  .card,
  .how-card,
  .domain-card,
  .d-card,
  .focus-card,
  .stat-card,
  .project-card,
  .topic-card,
  .legal-card,
  .cap-card,
  .entry-card,
  .contact-form-section,
  .contact-social-card
) {
  width: 100% !important;
  min-width: 0 !important;
  text-align: left !important;
}

body :is(
  .card h3,
  .how-card h3,
  .domain-card h3,
  .d-card h3,
  .focus-card h3,
  .project-card h3,
  .topic-card h3,
  .legal-card h2,
  .cap-card h3,
  .entry-card h3
) {
  text-align: left !important;
}

body :is(.stat-card, .support-logo-card) {
  text-align: center !important;
}

body :is(input, textarea, select, button) {
  max-width: 100%;
}

body :is(.contact-form, .contact-form-section form) {
  width: 100% !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body .contact-social-card {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

body .footer-inner {
  display: grid !important;
  align-items: start !important;
}

body .footer-brand {
  justify-items: start !important;
  text-align: left !important;
}

body .footer-links {
  align-items: end !important;
  text-align: right !important;
}

@media (max-width: 1180px) {
  :root {
    --page-gutter: clamp(1rem, 4vw, 2rem);
  }

  body :is(.grid-4, .stats-grid, .domains-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body :is(.grid-3, .how-grid, .focus-grid, .projects-grid, .topics-grid, .ecosystem-entry-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  :root {
    --page-gutter: clamp(1rem, 5vw, 1.35rem);
  }

  body section {
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
  }

  body :is(
    .grid,
    .grid-2,
    .grid-3,
    .grid-4,
    .how-grid,
    .domains-grid,
    .domain-grid,
    .focus-grid,
    .stats-grid,
    .projects-grid,
    .team-grid,
    .topics-grid,
    .capability-list,
    .contact-grid,
    .legal-grid,
    .ecosystem-entry-grid,
    .support-logo-row
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(0.85rem, 4vw, 1.25rem) !important;
  }

  body :is(.card, .how-card, .domain-card, .d-card, .focus-card, .stat-card, .project-card, .topic-card, .legal-card, .cap-card, .entry-card, .contact-form-section) {
    padding: clamp(1.15rem, 5vw, 1.6rem) !important;
  }

  body :is(.problem-body, .why-body, .biz-body, .about-body) {
    text-align: left !important;
  }

  body .contact-social-card {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    text-align: center !important;
  }

  body .footer-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    text-align: center !important;
  }

  body .footer-brand,
  body .footer-links {
    justify-items: center !important;
    align-items: center !important;
    text-align: center !important;
  }
}

/* Browser comments: tablet-centered footer, DeterX logo, and About CTA alignment */
body .footer-brand {
  width: 100% !important;
  justify-items: center !important;
  align-content: start !important;
  text-align: center !important;
}

body .footer-brand-icon {
  justify-self: center !important;
}

body .footer-address {
  max-width: min(100%, 24rem) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

body.home-page .how-section > .container {
  display: grid !important;
  justify-items: center !important;
  text-align: center !important;
}

body.home-page .how-section > .container > img {
  display: block !important;
  width: min(13.75rem, 42vw) !important;
  height: auto !important;
  margin: 0 auto clamp(1rem, 2vw, 1.5rem) !important;
  justify-self: center !important;
}

body.home-page .about-preview > .container {
  display: grid !important;
  justify-items: center !important;
  text-align: center !important;
}

body.home-page .about-preview .about-body {
  text-align: center !important;
}

body.home-page .about-preview :is(.btn-primary, .btn-secondary) {
  justify-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 1180px) {
  body .footer-inner {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "brand"
      "social"
      "links"
      "legal"
      "copy" !important;
    justify-items: center !important;
    text-align: center !important;
    row-gap: clamp(1.2rem, 3vw, 1.75rem) !important;
  }

  body .footer-links {
    justify-content: center !important;
    justify-items: center !important;
    align-items: center !important;
    text-align: center !important;
  }
}

/* Browser comments: About page mission and team-photo alignment */
body .mission-section > .container {
  text-align: left !important;
}

body .mission-section :is(.section-label, .section-heading, .mission-body) {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

body .mission-section .mission-body {
  max-width: min(100%, 44rem) !important;
}

body .team-section .team-grid {
  justify-items: stretch !important;
}

body .team-section .team-card {
  align-items: center !important;
}

body .team-section .team-photo-slot {
  width: 9.625rem !important;
  height: auto !important;
  aspect-ratio: 154 / 214 !important;
  max-height: none !important;
  border: 1px solid #ffffff !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

body .team-section .team-photo-slot img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center top !important;
  border: 0 !important;
}

@media (max-width: 640px) {
  body .team-section .team-card {
    justify-items: start !important;
    text-align: left !important;
  }

  body .team-section .team-photo-slot {
    width: min(12rem, 62vw) !important;
  }
}

/* Browser comment: wide footer blocks should be left-aligned with readable text indent */
@media (min-width: 1181px) {
  body .footer-inner {
    justify-items: stretch !important;
    text-align: left !important;
  }

  body .footer-brand {
    justify-items: start !important;
    text-align: left !important;
    padding-left: clamp(1.25rem, 3vw, 2.75rem) !important;
  }

  body .footer-brand-icon {
    justify-self: start !important;
    margin-left: clamp(0.35rem, 0.8vw, 0.75rem) !important;
  }

  body .footer-address {
    margin-left: clamp(0.35rem, 0.8vw, 0.75rem) !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  body .footer-links {
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    text-align: left !important;
    padding-left: clamp(1.25rem, 1.8vw, 1.9rem) !important;
    padding-right: clamp(0.75rem, 1.8vw, 1.9rem) !important;
  }

  body .footer-links li {
    width: 100% !important;
    text-align: left !important;
  }

  body .footer-links a {
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    text-align: left !important;
    padding-left: 0 !important;
  }
}

/* Match desktop footer separation on medium laptop widths as well */
@media (min-width: 1025px) and (max-width: 1180px) {
  body .footer-inner {
    grid-template-columns: minmax(210px, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "brand links links"
      "brand social social"
      "legal legal legal"
      "copy copy copy" !important;
    align-items: start !important;
    row-gap: clamp(0.85rem, 1.4vw, 1.25rem) !important;
  }

  body .footer-links {
    grid-area: links !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    text-align: right !important;
    gap: 0.45rem clamp(0.7rem, 1.2vw, 1.2rem) !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .footer-links li {
    flex: 0 0 auto !important;
  }

  body .footer-social-links {
    grid-area: social !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    gap: clamp(0.35rem, 0.75vw, 0.6rem) !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding-top: 0.7rem !important;
    border-top: 1px solid var(--section-divider) !important;
  }
}

/* Final footer nav correction: keep the column right-aligned and indent from the right edge. */
@media (min-width: 1181px) {
  body .footer-links {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    justify-items: end !important;
    text-align: right !important;
    padding-left: 0 !important;
    padding-right: clamp(6rem, 8vw, 8.75rem) !important;
  }

  body .footer-links li {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
  }

  body .footer-links a {
    width: max-content !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 !important;
    padding-left: 0 !important;
    text-align: right !important;
  }
}

/* Final footer layout correction: large tablets and desktops use the reference 3-column footer. */
@media (min-width: 1025px) {
  body .footer {
    padding: clamp(2rem, 3vw, 2.75rem) var(--page-gutter) clamp(1.4rem, 2vw, 2rem) !important;
  }

  body .footer-inner {
    width: min(calc(100vw - (var(--page-gutter) * 2)), var(--content-max)) !important;
    max-width: 1200px !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) minmax(300px, auto) minmax(220px, 1fr) !important;
    grid-template-areas:
      "brand social links"
      "legal legal legal"
      "copy copy copy" !important;
    align-items: start !important;
    justify-items: stretch !important;
    column-gap: clamp(1.5rem, 4vw, 4rem) !important;
    row-gap: clamp(1.2rem, 2vw, 1.75rem) !important;
    text-align: left !important;
  }

  body .footer-brand {
    grid-area: brand !important;
    width: auto !important;
    justify-items: start !important;
    text-align: left !important;
    gap: 0.55rem !important;
    padding: 0 !important;
    border: 0 !important;
  }

  body .footer-brand-icon {
    justify-self: start !important;
    width: clamp(56px, 5vw, 72px) !important;
    margin: 0 !important;
  }

  body .footer-address {
    max-width: 32ch !important;
    margin: 0 !important;
    text-align: left !important;
    line-height: 1.45 !important;
  }

  body .footer-social-links {
    grid-area: social !important;
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: center !important;
    justify-self: center !important;
    gap: clamp(0.55rem, 1.2vw, 0.9rem) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }

  body .footer-social-links a {
    width: 40px !important;
    height: 40px !important;
  }

  body .footer-links {
    grid-area: links !important;
    width: auto !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    justify-self: end !important;
    gap: 0.45rem !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    text-align: right !important;
  }

  body .footer-links li {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
  }

  body .footer-links a {
    width: auto !important;
    max-width: none !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    line-height: 1.45 !important;
  }

  body .footer-legal-links {
    grid-area: legal !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.65rem clamp(1.25rem, 3vw, 3.5rem) !important;
    padding: clamp(1rem, 1.8vw, 1.5rem) 0 0 !important;
    margin: 0 !important;
    border: 0 !important;
    text-align: center !important;
  }

  body .footer-copy {
    grid-area: copy !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: center !important;
  }
}

/* Browser comment: keep the centered tablet footer address on one line. */
@media (min-width: 769px) and (max-width: 1024px) {
  body .footer-address {
    width: max-content !important;
    max-width: calc(100vw - (var(--page-gutter) * 2)) !important;
    white-space: nowrap !important;
  }

  body .footer-address span {
    display: inline !important;
  }

  body .footer-address br {
    display: none !important;
  }
}

/* Browser comment: compact the Home hero on very narrow tall phones. */
@media (max-width: 430px) and (orientation: portrait) {
  body.home-page::before {
    height: clamp(660px, 78svh, 760px) !important;
    min-height: clamp(660px, 78svh, 760px) !important;
    background-size: auto clamp(320px, 44svh, 400px) !important;
    background-position: center bottom !important;
  }

  body.home-page .hero {
    min-height: clamp(660px, 78svh, 760px) !important;
    height: auto !important;
    padding-top: calc(var(--nav-y) + var(--site-logo-h) + 0.35rem) !important;
    padding-bottom: clamp(7rem, 20svh, 11rem) !important;
  }

  body.home-page .hero-content {
    transform: translateY(clamp(-2.2rem, -5svh, -1.1rem)) !important;
  }
}

/* Browser annotation: keep the Business Model heading lines intact on phones. */
@media (max-width: 767px) {
  body.home-page .business-model-section .section-heading {
    max-width: min(100%, 28rem) !important;
    font-size: 36px !important;
    line-height: 1.08 !important;
  }

  body.home-page .business-model-section .section-heading .keep-line {
    display: block !important;
    white-space: nowrap !important;
  }
}

/* Browser comment: keep the Home problem heading to two lines on tablet/wide layouts. */
@media (min-width: 768px) {
  body.home-page .problem-section .problem-heading {
    max-width: min(100%, 24ch) !important;
  }

  body.home-page .problem-section .problem-heading-line {
    display: block !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 767px) {
  body.home-page .problem-section .problem-heading-line {
    display: inline !important;
    white-space: normal !important;
  }
}

/* Final recent browser-request responsive corrections. */
body.home-page .about-preview .about-heading-line {
  display: block !important;
}

@media (min-width: 1025px) and (max-width: 1180px) {
  body.home-page .how-section .how-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(1.5rem, 3vw, 2rem) !important;
  }

  body.home-page .how-section .how-card {
    padding: clamp(2rem, 3vw, 2.5rem) !important;
  }

  body.home-page .about-preview .section-heading {
    max-width: min(100%, 34ch) !important;
  }

  body.home-page .about-preview .about-heading-line {
    white-space: nowrap !important;
  }
}

@media (min-width: 768px) {
  body.home-page .problem-section .problem-heading {
    max-width: min(100%, 24ch) !important;
  }

  body.home-page .problem-section .problem-heading-line {
    display: block !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 500px) and (max-width: 1024px) {
  body.home-page .about-preview .section-heading {
    max-width: min(100%, 34rem) !important;
  }

  body.home-page .about-preview .about-heading-line {
    white-space: nowrap !important;
  }
}

@media (max-width: 767px) {
  body.home-page .problem-section .section-heading,
  body.home-page .how-section .section-heading {
    font-size: 36px !important;
    line-height: 1.08 !important;
  }

  body.home-page .problem-section .problem-heading-line {
    display: inline !important;
    white-space: normal !important;
  }

  body.home-page .business-model-section .section-heading {
    max-width: min(100%, 28rem) !important;
    font-size: 33px !important;
    line-height: 1.08 !important;
  }

  body.home-page .business-model-section .section-heading .keep-line {
    display: block !important;
    white-space: nowrap !important;
  }

  body.home-page .about-preview .section-heading {
    max-width: min(100%, 34rem) !important;
    font-size: clamp(34px, 5.1vw, 40px) !important;
    line-height: 1.08 !important;
  }

  body.home-page .domains-section .domains-grid,
  body.home-page .why-stack {
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    margin-inline: auto !important;
  }

  body.home-page .domains-section .domain-card,
  body.home-page .why-note {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 499px) {
  body.home-page .about-preview .section-heading {
    font-size: 33px !important;
  }

  body.home-page .about-preview .about-heading-line {
    white-space: normal !important;
  }
}

/* Browser comment: keep the second Problem paragraph on one line on wide screens. */
@media (min-width: 1181px) {
  body.home-page .problem-section .problem-body {
    max-width: min(100%, 96ch) !important;
  }

  body.home-page .problem-section .problem-body p:nth-child(2) {
    white-space: nowrap !important;
  }
}

/* Browser comment: keep the Home hero headline to two lines on wide screens. */
body.home-page .hero h1 .hero-heading-line {
  display: block !important;
}

@media (min-width: 1181px) {
  body.home-page .hero h1 {
    max-width: min(100%, 980px) !important;
  }

  body.home-page .hero h1 .hero-heading-line {
    white-space: nowrap !important;
  }
}

@media (max-width: 1180px) {
  body.home-page .hero h1 .hero-heading-line {
    white-space: normal !important;
  }
}

/* Final grammatical line-break hygiene pass. */
body :is(h1, h2, h3, p, .section-heading, .subtitle, .section-sub, .problem-body, .why-body, .biz-body, .about-body, .mission-body) {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: manual !important;
}

body :is(.subtitle, .section-sub, .problem-body p, .why-body p, .biz-body, .about-body p, .mission-body, .cta-section p, .contact-cta p) {
  text-wrap: pretty !important;
}

body :is(h1, h2, h3, .section-heading) {
  text-wrap: balance !important;
}

@media (min-width: 1181px) {
  body.home-page .hero h1 {
    max-width: min(100%, 15.5ch) !important;
    font-size: clamp(4.25rem, 5.15vw, 5.1rem) !important;
  }

  body.home-page .hero h1 .hero-heading-line,
  body.home-page .problem-section .problem-heading-line,
  body.home-page .about-preview .about-heading-line,
  .about-hero h1 .keep-line {
    white-space: nowrap !important;
  }

  body.home-page .problem-section .problem-heading {
    max-width: min(100%, 22ch) !important;
  }

  body.home-page .about-preview .section-heading,
  .about-hero h1 {
    max-width: min(100%, 24ch, 920px) !important;
  }

  body.home-page .biz-body,
  body.home-page .problem-body,
  body.home-page .about-body {
    max-width: min(100%, 96ch) !important;
  }

  body :is(.section-heading) {
    max-width: min(100%, 24ch, 920px) !important;
  }

  .contact-hero h1,
  .insight-hero h1,
  .legal-hero h1 {
    max-width: min(100%, 18ch, 1120px) !important;
  }

  .contact-hero h1 {
    font-size: clamp(3.5rem, 4.8vw, 4.75rem) !important;
  }

  .insight-hero h1,
  .legal-hero h1 {
    font-size: clamp(3.25rem, 4.6vw, 4.65rem) !important;
  }

  .legal-page .legal-hero-inner {
    max-width: min(100%, 1180px) !important;
  }
}

@media (min-width: 768px) and (max-width: 1180px) {
  body.home-page .hero h1 {
    max-width: min(100%, 15.5ch) !important;
    font-size: clamp(3rem, 5.15vw, 3.95rem) !important;
  }

  body.home-page .hero h1 .hero-heading-line,
  body.home-page .problem-section .problem-heading-line,
  body.home-page .about-preview .about-heading-line,
  .about-hero h1 .keep-line {
    white-space: nowrap !important;
  }

  body.home-page .problem-section .problem-heading {
    max-width: min(100%, 22ch) !important;
  }

  body.home-page .about-preview .section-heading,
  .about-hero h1 {
    max-width: min(100%, 25ch, 760px) !important;
  }

  body :is(.section-heading) {
    max-width: min(100%, 24ch, 760px) !important;
  }

  .contact-hero h1,
  .insight-hero h1,
  .legal-hero h1 {
    max-width: min(100%, 19ch, 900px) !important;
  }

  .contact-hero h1 {
    font-size: clamp(3rem, 5.4vw, 4rem) !important;
  }

  .insight-hero h1,
  .legal-hero h1 {
    font-size: clamp(2.85rem, 5.25vw, 3.85rem) !important;
  }

  .contact-hero .subtitle,
  .insight-hero .subtitle,
  .legal-hero p {
    max-width: min(100%, 78ch) !important;
  }
}

@media (min-width: 500px) and (max-width: 767px) {
  body.home-page .hero h1 {
    max-width: min(100%, 15.5ch) !important;
    font-size: clamp(2.25rem, 6.9vw, 3rem) !important;
  }

  body.home-page .hero h1 .hero-heading-line,
  body.home-page .problem-section .problem-heading-line,
  body.home-page .about-preview .about-heading-line,
  .about-hero h1 .keep-line {
    display: block !important;
    white-space: nowrap !important;
  }

  body.home-page .problem-section .problem-heading,
  body.home-page .about-preview .section-heading,
  .about-hero h1 {
    max-width: min(100%, 25ch) !important;
  }

  body :is(.section-heading) {
    max-width: min(100%, 22ch) !important;
  }

  .contact-hero h1,
  .insight-hero h1,
  .legal-hero h1 {
    max-width: min(100%, 18ch) !important;
    font-size: clamp(2.35rem, 8vw, 3.2rem) !important;
  }
}

@media (max-width: 499px) {
  body.home-page .hero h1 {
    max-width: min(100%, 15ch) !important;
    font-size: clamp(2rem, 9vw, 2.55rem) !important;
  }

  body.home-page .problem-section .problem-heading,
  body.home-page .about-preview .section-heading,
  body :is(.section-heading) {
    max-width: min(100%, 20ch) !important;
  }

  .contact-hero h1,
  .insight-hero h1,
  .legal-hero h1 {
    max-width: min(100%, 17ch) !important;
    font-size: clamp(2.1rem, 9vw, 2.8rem) !important;
  }
}

/* Final targeted line-count reductions where the viewport can support them. */
@media (min-width: 901px) {
  body.home-page .about-preview .about-heading-line {
    display: inline !important;
    white-space: normal !important;
  }

  .about-hero h1 .keep-line {
    display: inline !important;
    white-space: normal !important;
  }
}

@media (min-width: 641px) {
  .deterx-hero h1 {
    max-width: min(100%, 20ch, 980px) !important;
  }
}

@media (min-width: 768px) {
  .insight-hero h1 {
    max-width: min(100%, 24ch, 1180px) !important;
    font-size: clamp(2.8rem, 3.65vw, 4rem) !important;
  }

  .insight-content .section-heading {
    max-width: min(100%, 28ch, 980px) !important;
  }

  body.environmental-page .domains-hero h1 {
    max-width: min(100%, 19ch, 980px) !important;
    font-size: clamp(2.8rem, 4.4vw, 4.65rem) !important;
  }

  .legal-page .legal-hero h1 {
    max-width: min(100%, 24ch, 1220px) !important;
    font-size: clamp(2.55rem, 3.8vw, 3.95rem) !important;
  }
}

@media (min-width: 768px) and (max-width: 1180px) {
  .insight-hero h1 {
    font-size: clamp(2.65rem, 4.6vw, 3.3rem) !important;
  }

  body.environmental-page .domains-hero h1 {
    font-size: clamp(2.65rem, 5.3vw, 3.75rem) !important;
  }

  .legal-page .legal-hero h1 {
    font-size: clamp(2.35rem, 4.35vw, 3.1rem) !important;
  }
}

@media (max-width: 767px) {
  .insight-content .section-heading {
    max-width: min(100%, 30ch) !important;
  }

  body.environmental-page .domains-hero h1,
  .insight-hero h1,
  .legal-page .legal-hero h1 {
    max-width: min(100%, 22ch) !important;
  }
}

/* Final oversized title corrections after visual line-break audit. */
@media (min-width: 901px) {
  .insight-hero h1 {
    max-width: min(100%, 30ch, 1180px) !important;
    font-size: clamp(2.85rem, 3.15vw, 3.35rem) !important;
    white-space: nowrap !important;
  }

  .legal-page .legal-hero h1 {
    max-width: min(100%, 30ch, 1220px) !important;
    font-size: clamp(2.75rem, 3.1vw, 3.25rem) !important;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  .insight-hero h1 {
    max-width: min(100%, 30ch) !important;
    font-size: clamp(2.45rem, 5.1vw, 2.9rem) !important;
  }

  .legal-page .legal-hero h1 {
    max-width: min(100%, 30ch) !important;
    font-size: clamp(2.35rem, 4.8vw, 2.75rem) !important;
  }
}

@media (max-width: 767px) {
  body.environmental-page .domains-hero h1 {
    max-width: min(100%, 24ch) !important;
    font-size: clamp(2.1rem, 6.2vw, 2.5rem) !important;
  }

  .insight-hero h1 {
    max-width: min(100%, 28ch) !important;
    font-size: clamp(2.05rem, 6.6vw, 2.45rem) !important;
  }

  .legal-page .legal-hero h1 {
    max-width: min(100%, 28ch) !important;
    font-size: clamp(2rem, 6.5vw, 2.4rem) !important;
  }
}

/* Final paragraph measure and narrow-phone orphan cleanup. */
@media (min-width: 901px) {
  body.home-page .biz-body,
  .ecosystem-hero .subtitle,
  .insight-hero .subtitle,
  .contact-hero .subtitle {
    max-width: min(100%, 110ch) !important;
    text-wrap: normal !important;
  }

  .about-hero .subtitle {
    max-width: min(100%, 110ch) !important;
    text-wrap: normal !important;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  body.home-page .biz-body,
  .ecosystem-hero .subtitle,
  .insight-hero .subtitle,
  .contact-hero .subtitle {
    max-width: min(100%, 86ch) !important;
    text-wrap: normal !important;
  }
}

@media (max-width: 499px) {
  body.home-page .hero h1 {
    font-size: clamp(1.95rem, 8.4vw, 2.35rem) !important;
  }

  body.home-page .hero h1 .hero-heading-line {
    white-space: nowrap !important;
  }

  body.home-page .about-preview .section-heading,
  .about-hero h1 {
    font-size: 30px !important;
    max-width: min(100%, 24ch) !important;
  }
}

@media (max-width: 359px) {
  body.home-page .hero h1 .hero-heading-line {
    white-space: normal !important;
  }
}

/* Site-wide responsive accessibility pass. */
body :is(a, button, input, textarea, select):focus-visible {
  outline: 3px solid #1f6b3a !important;
  outline-offset: 4px !important;
}

body :is(.nav-logo, .nav-menu-btn, .nav-overlay-close, .btn-primary, .btn-secondary, .footer-social-links a, .contact-social-links a) {
  min-width: 44px !important;
  min-height: 44px !important;
}

body .nav-menu-btn {
  height: auto !important;
}

body :is(.footer-links a, .footer-legal-links a, .legal-doc-nav a) {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 44px !important;
  min-height: 40px !important;
}

body .footer-links a {
  justify-content: flex-end !important;
}

body .footer-legal-links a,
body .legal-doc-nav a {
  justify-content: center !important;
}

body :is(input, textarea, select) {
  min-height: 44px !important;
  font-size: 16px !important;
}

@media (max-width: 767px) {
  body :is(.footer-links a, .footer-legal-links a, .legal-doc-nav a) {
    min-height: 44px !important;
  }

  body .footer-links a {
    justify-content: center !important;
  }
}

@media (min-width: 500px) and (max-width: 767px) {
  .about-hero h1 {
    max-width: min(100%, 24ch) !important;
    font-size: clamp(2.05rem, 6.1vw, 2.45rem) !important;
  }

  .about-hero h1 .keep-line {
    white-space: nowrap !important;
  }
}

@media (max-width: 499px) {
  .about-hero h1 .keep-line {
    white-space: normal !important;
  }
}

/* Ultra-wide footer: keep the primary footer navigation horizontal and centered. */
@media (min-width: 1600px) {
  body .footer-inner {
    width: min(calc(100vw - (var(--page-gutter) * 2)), 1480px) !important;
    max-width: 1480px !important;
    grid-template-columns: minmax(260px, 0.85fr) minmax(420px, 1.3fr) minmax(260px, 0.85fr) !important;
    grid-template-areas:
      "brand social social"
      "links links links"
      "legal legal legal"
      "copy copy copy" !important;
    column-gap: clamp(2rem, 4vw, 5rem) !important;
    row-gap: clamp(1.4rem, 2vw, 2.25rem) !important;
  }

  body .footer-social-links {
    grid-area: social !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    align-self: center !important;
  }

  body .footer-links {
    grid-area: links !important;
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 0.5rem clamp(1.1rem, 1.8vw, 2rem) !important;
    padding: 0 !important;
    text-align: center !important;
  }

  body .footer-links li {
    width: auto !important;
    text-align: center !important;
  }

  body .footer-links a {
    width: auto !important;
    max-width: none !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 0.15rem !important;
    text-align: center !important;
  }

  body .footer-legal-links {
    grid-area: legal !important;
    justify-content: center !important;
  }

  body .footer-copy {
    grid-area: copy !important;
  }
}

/* Encoding-safe close icon: draw the mark in CSS instead of relying on a text glyph. */
body .nav-overlay-close {
  display: inline-grid !important;
  place-items: center !important;
  color: #123327 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

body .nav-overlay-close .nav-close-mark {
  position: relative !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
}

body .nav-overlay-close .nav-close-mark::before,
body .nav-overlay-close .nav-close-mark::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 18px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform-origin: center !important;
}

body .nav-overlay-close .nav-close-mark::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

body .nav-overlay-close .nav-close-mark::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* Final desktop symmetry pass: stabilize large-screen composition across pages. */
@media (min-width: 1181px) {
  :root {
    --content-max: 1240px;
    --hero-copy-max: 1120px;
    --copy-max: 72ch;
    --desktop-grid-gap: clamp(1.2rem, 1.8vw, 2rem);
  }

  body :is(.container, .footer-inner, .legal-hero-inner) {
    width: min(calc(100vw - (var(--page-gutter) * 2)), var(--content-max)) !important;
    max-width: var(--content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body :is(
    .how-grid,
    .focus-grid,
    .projects-grid,
    .topics-grid,
    .ecosystem-entry-grid
  ) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--desktop-grid-gap) !important;
  }

  body :is(.stats-grid, .domains-grid) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: var(--desktop-grid-gap) !important;
  }

  body :is(.domain-grid, .contact-grid, .legal-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--desktop-grid-gap) !important;
  }

  body :is(
    .card,
    .how-card,
    .domain-card,
    .d-card,
    .focus-card,
    .stat-card,
    .project-card,
    .topic-card,
    .legal-card,
    .entry-card,
    .contact-form-section
  ) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: 100% !important;
  }

  body .capabilities-section > .container {
    max-width: min(var(--content-max), 1120px) !important;
  }

  body .capabilities-list {
    max-width: min(100%, 1100px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: clamp(0.8rem, 1vw, 1.05rem) !important;
  }

  body .support-logo-row {
    grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
    max-width: min(100%, 980px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    column-gap: clamp(2rem, 4vw, 4.5rem) !important;
    row-gap: clamp(1.2rem, 2vw, 2rem) !important;
  }

  body .support-logo-card {
    min-height: 150px !important;
  }

  body .footer-inner {
    width: min(calc(100vw - (var(--page-gutter) * 2)), var(--content-max)) !important;
    max-width: var(--content-max) !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) minmax(460px, 2fr) minmax(340px, 1fr) !important;
    grid-template-areas:
      "brand links social"
      "legal legal legal"
      "copy copy copy" !important;
    align-items: start !important;
    justify-items: stretch !important;
    column-gap: clamp(1.5rem, 3vw, 3rem) !important;
    row-gap: clamp(1rem, 1.5vw, 1.6rem) !important;
  }

  body .footer-brand {
    justify-items: start !important;
    text-align: left !important;
    width: auto !important;
  }

  body .footer-social-links {
    justify-content: flex-end !important;
    align-items: center !important;
    justify-self: end !important;
    align-self: center !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    gap: clamp(0.45rem, 0.8vw, 0.7rem) !important;
    margin: 0 !important;
  }

  body .footer-links {
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    text-align: center !important;
    gap: 0.5rem clamp(1rem, 2vw, 1.8rem) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .footer-links li,
  body .footer-links a {
    width: auto !important;
    text-align: center !important;
  }

  body .footer-links a {
    justify-content: center !important;
  }

  body .footer-legal-links {
    justify-content: center !important;
  }

  body .footer-copy {
    text-align: center !important;
  }
}

@media (min-width: 1600px) {
  :root {
    --content-max: 1320px;
    --hero-copy-max: 1160px;
  }

  body .footer-inner {
    max-width: 1320px !important;
    grid-template-columns: minmax(240px, 1fr) minmax(520px, 2.1fr) minmax(380px, 1fr) !important;
  }

  body .footer-links {
    flex-direction: row !important;
    justify-content: center !important;
  }
}

/* Contact page: keep the form block centered on wide screens. */
body .contact-form-section {
  margin-left: auto !important;
  margin-right: auto !important;
}

body .contact-form .btn-primary {
  align-self: center !important;
}

/* Absolute final footer override for 1025-1180px viewports (browser comment fix). */
@media (min-width: 1025px) and (max-width: 1180px) {
  body .footer-inner {
    display: grid !important;
    grid-template-columns: minmax(210px, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "brand social social"
      "brand links links"
      "legal legal legal"
      "copy copy copy" !important;
    align-items: start !important;
    row-gap: 0.9rem !important;
  }

  body .footer-social-links {
    grid-area: social !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    gap: 0.45rem !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 0 0.65rem 0 !important;
    border-bottom: 1px solid var(--section-divider) !important;
  }

  body .footer-links {
    grid-area: links !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    text-align: right !important;
    gap: 0.5rem 1rem !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .footer-links li,
  body .footer-links a {
    width: auto !important;
    flex: 0 0 auto !important;
  }
}

/* Browser comment follow-up: enforce desktop footer symmetry with single-row nav + social */
@media (min-width: 1181px) {
  body .footer-inner {
    grid-template-columns: minmax(220px, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "brand links links"
      "brand social social"
      "legal legal legal"
      "copy copy copy" !important;
    align-items: start !important;
    row-gap: clamp(0.9rem, 1.4vw, 1.35rem) !important;
  }

  body .footer-links {
    grid-area: links !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    text-align: right !important;
    gap: 0.45rem clamp(0.85rem, 1.5vw, 1.45rem) !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  body .footer-links li {
    flex: 0 0 auto !important;
  }

  body .footer-social-links {
    grid-area: social !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    gap: clamp(0.4rem, 0.8vw, 0.65rem) !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding-top: 0.7rem !important;
    border-top: 1px solid var(--section-divider) !important;
  }
}
