/* Refinement of the existing ESWR design, shared by all 14 routes. */
:root {
  --paper: #edf1e9;
  --cream: #e8eee3;
  --muted: #53695f;
  --line: #cbd8ca;
  --photo-opacity: .66;
  --background-photo-opacity: .20;
}
/* Soften photographs only; brand marks, text and controls stay fully opaque. */
.hero-visual img,
.page-hero-media img,
.service-image img,
.project-feature > img,
.about-detail-image img,
.record-card > img { opacity: var(--photo-opacity); }
.hero-entrance .hero-visual { background: #dce8df; }
body { background: var(--paper); }
h2 { font-size: clamp(36px, 3.55vw, 48px); line-height: 1.45; }
h3 { font-size: 25px; line-height: 1.55; }
.eyebrow, html[lang=en] .eyebrow { font-size: 13px; }
html[lang=en] .eyebrow { letter-spacing: .08em; }
.text-link { font-size: 15px; }
.button { font-size: 15px; }
.site-header { background: #fff; }
.hero-visual picture { display: block; width: 100%; height: 100%; }
.hero-visual img, .hero-visual video { object-position: center; }
.hero-shade, html[dir=ltr] .hero-shade {
  background: linear-gradient(270deg, #032d24f2 0%, #032d24d6 30%, #032d2430 68%, #032d2405 100%),
              linear-gradient(0deg, #03271faa, transparent 38%);
}
html[dir=ltr] .hero-shade {
  background: linear-gradient(90deg, #032d24f2 0%, #032d24d6 30%, #032d2430 68%, #032d2405 100%),
              linear-gradient(0deg, #03271faa, transparent 38%);
}
.hero-copy { max-width: 640px; margin-left: auto; margin-right: 0; }
html[dir=ltr] .hero-copy { margin-left: 0; margin-right: auto; max-width: 565px; }
.hero h1 { font-size: clamp(60px, 5.3vw, 80px); line-height: 1.4; letter-spacing: -.035em; }
html[lang=en] .hero h1 { font-size: clamp(58px, 5.1vw, 78px); line-height: 1.04; }
.hero-description { font-size: 20px; line-height: 1.85; }
.hero-eyebrow, html[lang=en] .hero-eyebrow { font-size: 13px; }
.hero-actions .button { font-size: 15px; }
.hero-caption { font-size: 11px; }
.scroll-cue, .motion-toggle { font-size: 12px; }
.hero-caption, .scroll-cue { color: #e7eedf; }
.hero-entrance .hero-gridlines { display: none; }
.hero-entrance .hero-copy, html[dir=ltr] .hero-entrance .hero-copy { margin-left: 0; margin-right: auto; max-width: 560px; }
.hero-entrance .hero-shade, html[dir=ltr] .hero-entrance .hero-shade {
  background: linear-gradient(90deg, #042820ed 0%, #042820c4 31%, #04282018 65%, transparent 85%);
}
/* The user's seedling reference replaces only the homepage scene. */
.hero-nature .hero-gridlines { display: none; }
.hero-nature .hero-shade {
  background: linear-gradient(270deg, #032d24b3 0%, #032d2480 30%, #032d2412 68%, transparent 100%),
              linear-gradient(0deg, #03271f99, transparent 38%);
}
html[dir=ltr] .hero-nature .hero-shade {
  background: linear-gradient(90deg, #032d24b3 0%, #032d2480 30%, #032d2412 68%, transparent 100%),
              linear-gradient(0deg, #03271f99, transparent 38%);
}
@media (min-width: 701px) {
  html[dir=ltr] .hero-nature .hero-poster { transform: scaleX(-1); }
}
.intro-strip { background: #e3ebdc; }
.intro-strip h2 { font-size: clamp(23px, 2.1vw, 30px); font-weight: 700; line-height: 1.55; }
.intro-strip p { font-size: 15px; }
.intro-year { font-size: 12px; }
.services { background: #edf1e9; }
.section-heading-aside p { font-size: 16px; line-height: 1.9; }
.service-grid { gap: 32px; align-items: stretch; }
.service-card { background: #f4f6ef; border: 1px solid #cdd8c9; display: flex; flex-direction: column; }
.service-image { aspect-ratio: 1.5; }
.service-body { padding: 25px 24px 22px; display: flex; flex-direction: column; flex: 1; }
.service-body h3 { font-size: 25px; min-height: 0; margin-block-end: 16px; line-height: 1.55; }
.service-tagline { font-size: 13px; line-height: 1.8; margin-block-end: 12px; }
.service-body > p:not(.service-tagline) { font-size: 15px; min-height: 0; margin-block-end: 20px; line-height: 1.9; }
html[lang=en] .service-body h3, html[lang=en] .service-body > p:not(.service-tagline) { min-height: 0; }
.service-body .text-link { margin-block-start: auto; padding-block: 13px 0; font-size: 14px; }
.projects { background: #e3eadd; }
.project-copy > p:not(.eyebrow), .about-intro > p:not(.eyebrow), .about-detail p:not(.eyebrow) {
  font-size: 16px; line-height: 1.95;
}
.project-copy .button { font-size: 14px; }
.project-feature { aspect-ratio: 1.35; background: #d5e0d5; }
.project-feature > img { object-position: center; }
.project-feature-caption { font-size: 14px; }
.metric > span:last-child { font-size: 13px; }
.metric-value { font-size: 50px; }
.about { background: #edf1e9; }
.principles-heading { font-size: 14px; font-weight: 700; }
.principle h3, .principles-row .principle h3 { font-size: 23px; }
.principle p { font-size: 15px; line-height: 1.9; }
.sustainability-inner h2 { font-size: clamp(36px, 3.5vw, 47px); line-height: 1.45; }
.sustainability-inner p:not(.eyebrow) { font-size: 16px; line-height: 1.95; }
.media-preview { background: #eaf0e4; }
.media-inner h2 { font-size: 38px; }
.coming-soon-inline { font-size: 12px; }
.contact-cta { background: #dfe9d7; border-top: 1px solid #c9d7bf; }
.cta-inner h2 { font-size: 40px; line-height: 1.5; }
.footer-column { font-size: 14px; gap: 13px; }
.footer-column h2 { font-size: 18px; }
.footer-brand > p { font-size: 16px; }
.footer-contact > span { font-size: 14px; }
.footer-bottom { font-size: 11px; line-height: 1.8; }
.image-note { max-width: 270px; }

/* Each independent page has a photographic atmosphere and its own sage tone. */
body[data-page=about] { --page-color: #dce8df; --page-rgb: 220, 232, 223; --page-art: url('assets/facility-team-eswr-20261002-v2.6.1-3479e54a36.webp'); }
body[data-page=services] { --page-color: #e1e8d7; --page-rgb: 225, 232, 215; --page-art: url('assets/facilities-20261002-v2.6.1-28e61af856.webp'); }
body[data-page=projects] { --page-color: #d8e4dd; --page-rgb: 216, 228, 221; --page-art: url('assets/landfill-eswr-20261002-v2.6.1-bb0898f492.webp'); }
body[data-page=sustainability] { --page-color: #d6e7ce; --page-rgb: 214, 231, 206; --page-art: url('assets/page-sustainability-20261002-v2.6.1-4aad3702e5.webp'); }
body[data-page=media] { --page-color: #dce5e3; --page-rgb: 220, 229, 227; --page-art: url('assets/page-media-20261002-v2.6.1-2e65cb9fc3.webp'); }
body[data-page=contact] { --page-color: #dce8e1; --page-rgb: 220, 232, 225; --page-art: url('assets/meeting-eswr-20261002-v2.6.1-ee9fbd3d45.webp'); }
body:not([data-page=index]) main { position: relative; isolation: isolate; background: var(--page-color); }
body:not([data-page=index]) main::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--page-art) 35% center / cover no-repeat; opacity: var(--background-photo-opacity);
}
body:not([data-page=index]) main > section { position: relative; z-index: 1; }
.page-hero { background: var(--page-color); isolation: isolate; padding-block: 38px 66px; min-height: 520px; overflow: hidden; }
.page-hero-media { position: absolute; inset: 0 auto 0 0; width: 58%; z-index: 0; background: var(--page-color); }
.page-hero-media picture { display: block; width: 100%; height: 100%; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 23% center; }
body[data-page=projects] .page-hero-media img { object-position: center; }
.page-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(270deg, var(--page-color) 0%, var(--page-color) 42%,
    rgba(var(--page-rgb), .88) 48%, rgba(var(--page-rgb), .15) 59%, transparent 70%);
}
.page-hero > .container { position: relative; z-index: 2; }
.page-hero-copy { width: 48%; margin-left: auto; }
.breadcrumb { font-size: 13px; margin-block-end: 35px; color: #4b6458; }
.page-hero h1 { font-size: clamp(48px, 4.7vw, 66px); line-height: 1.45; max-width: 690px; }
.page-description { font-size: 18px; line-height: 1.85; max-width: 600px; color: #3d594e; }
.page-hero-lines { opacity: .55; }
html[dir=ltr] .page-hero .breadcrumb { justify-content: flex-start; }
html[dir=ltr] .page-hero-copy { margin-left: auto; width: 48%; }
html[dir=ltr] .page-hero h1 { font-size: clamp(44px, 4.4vw, 63px); }
.coming-panel { background: #f1f5eccc; border-color: #bacab8; }
.coming-panel h2 { font-weight: 700; color: var(--forest); }
.coming-panel .text-link { font-size: 15px; }
.about-detail-image { border: 1px solid #b7c7b3; aspect-ratio: 1.5; background: var(--page-color); }
.about-detail-image img { object-position: center; }
.about-detail > div:last-child { padding: 30px; background: rgba(var(--page-rgb), .92); border: 1px solid #b7c7b3; }
.principles-section { background: #dde7d4bb; border-block: 1px solid #c4d2bc; }
.image-label { font-size: 13px; }

/* Extend the successful contact form while retaining its email transport. */
.contact-layout { gap: 40px; grid-template-columns: 1.65fr 1fr; }
.contact-form-panel { padding: 38px; background: #f2f5eeed; border: 1px solid #bcccb8; }
.contact-form-panel > h2 { font-size: 36px; line-height: 1.5; }
.form-field label { font-size: 15px; }
.form-field input, .form-field select { font-size: 16px; background: #f9fbf5; border-color: #b6c7b3; }
.form-field textarea { width: 100%; min-height: 180px; padding: 14px 16px; border: 1px solid #b6c7b3; border-radius: 0; background: #f9fbf5; color: var(--ink); font-family: inherit; font-size: 16px; line-height: 1.85; resize: vertical; }
.form-field textarea:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.form-field textarea[aria-invalid=true] { border-color: #b7685a; }
.description-note { margin-block-start: 8px; }
.form-note { font-size: 13px; }
.form-submit { flex-wrap: wrap; }
.form-submit .button { font-size: 16px; }
.form-status { font-size: 15px; }
.contact-details { background: var(--forest); color: #f4f7ed; padding: 36px 30px; }
.contact-details .eyebrow, .contact-detail > .icon { color: var(--lime); }
.contact-details h2 { font-size: 34px; }
.contact-detail { border-color: #ffffff27; }
.contact-detail span { font-size: 12px; color: #c8d9bd; }
.contact-detail a { font-size: 18px; }
.contact-detail p { font-size: 14px; color: #e1ecd7; }
.contact-motto { font-size: 14px; color: var(--lime); border-color: #ffffff27; }

@media (max-width: 1200px) {
  .service-grid { gap: 23px; }
  .service-body { padding-inline: 20px; }
  .service-body h3 { font-size: 23px; }
  .hero-copy { max-width: 565px; }
  .hero h1 { font-size: 64px; }
  html[lang=en] .hero h1 { font-size: 60px; }
  .contact-form-panel { padding: 30px; }
}
@media (max-width: 1020px) {
  .service-grid { grid-template-columns: 1fr; gap: 24px; }
  .service-card { display: grid; grid-template-columns: .95fr 1.05fr; }
  .service-image { aspect-ratio: auto; min-height: 300px; height: 100%; }
  .service-body { padding: 26px; }
  .service-body h3 { font-size: 25px; }
  .project-copy h2 { font-size: 38px; }
  .principles-row .principle { gap: 16px; }
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .contact-details { padding: 32px; }
  .page-hero h1 { max-width: 580px; font-size: 52px; }
  .page-description { max-width: 490px; font-size: 17px; }
  .page-hero-copy, html[dir=ltr] .page-hero-copy { width: 52%; }
  .page-hero-media { width: 60%; }
  .intro-strip h2 { font-size: 23px; }
}
@media (max-width: 700px) {
  h2 { font-size: 34px; line-height: 1.5; }
  h3 { font-size: 24px; }
  .eyebrow, html[lang=en] .eyebrow { font-size: 12px; }
  .text-link { font-size: 14px; }
  .hero { height: calc(100svh - 76px); min-height: 690px; max-height: 900px; padding-block-start: 0; }
  .hero-visual { inset: 0; height: 100%; }
  .hero-container { height: 100%; justify-content: flex-end; padding-block: 32px 24px; }
  .hero-copy, html[dir=ltr] .hero-copy { max-width: none; width: 100%; margin-block: 0 26px; margin-inline: 0; }
  .hero-shade, html[dir=ltr] .hero-shade {
    background: linear-gradient(0deg, #03271ffa 0%, #03271fd9 36%, #03271f8c 57%, #03271f00 83%);
  }
  .hero-nature .hero-shade, html[dir=ltr] .hero-nature .hero-shade {
    background: linear-gradient(0deg, #03271fe6 0%, #03271fa6 36%, #03271f12 62%, transparent 83%);
  }
  .hero-visual img, .hero-visual video { object-position: center; }
  .hero-entrance { height: auto; min-height: 0; max-height: none; }
  .hero-entrance .hero-visual { position: relative; inset: auto; width: 100%; height: clamp(330px, 95vw, 460px); z-index: 0; }
  .hero-entrance .hero-shade { display: none; }
  .hero-entrance .hero-container { height: auto; padding-block: 32px 24px; }
  .hero-entrance .hero-copy, html[dir=ltr] .hero-entrance .hero-copy { width: 100%; max-width: none; margin: 0 0 26px; }
  .hero h1 { font-size: clamp(42px, 10.5vw, 54px); line-height: 1.4; }
  html[lang=en] .hero h1 { font-size: clamp(44px, 10.3vw, 57px); line-height: 1.05; }
  .hero-description { font-size: 17px; max-width: none; line-height: 1.8; margin-block: 17px 24px; }
  .hero-eyebrow, html[lang=en] .hero-eyebrow { font-size: 11px; margin-block-end: 18px; }
  .hero-actions .button { font-size: 12px; padding: 12px; gap: 9px; min-height: 52px; }
  .scroll-cue, .motion-toggle { font-size: 10px; }
  .intro-strip h2 { font-size: 24px; }
  .intro-strip p { font-size: 14px; }
  .intro-year { font-size: 11px; }
  .section-heading-aside p { font-size: 15px; line-height: 1.9; }
  .section-heading-aside .text-link { font-size: 14px; }
  .service-grid { gap: 26px; }
  .service-card { display: flex; }
  .service-image { height: auto; min-height: 0; aspect-ratio: 1.45; }
  .service-body { padding: 22px; }
  .service-body h3 { font-size: 25px; max-width: none; }
  .service-tagline { font-size: 12px; }
  .service-body > p:not(.service-tagline) { font-size: 15px; line-height: 1.95; }
  .service-body .text-link { font-size: 14px; }
  .project-copy h2, .about-detail h2 { font-size: 34px; }
  .project-copy > p:not(.eyebrow), .about-intro > p:not(.eyebrow), .about-detail p:not(.eyebrow) { font-size: 15px; line-height: 1.95; }
  .project-copy .button { font-size: 14px; }
  .metric > span:last-child { font-size: 11px; }
  .metric-value { font-size: 40px; }
  .project-feature { aspect-ratio: 1.5; }
  .project-feature > img { object-position: center; }
  .project-feature-caption { font-size: 12px; }
  .principles-heading { font-size: 13px; }
  .principle h3, .principles-row .principle h3 { font-size: 22px; }
  .principle p { font-size: 14px; line-height: 1.9; }
  .sustainability-inner h2 { font-size: 34px; }
  .sustainability-inner p:not(.eyebrow) { font-size: 15px; }
  .media-inner h2 { font-size: 32px; }
  .media-inner .text-link { font-size: 14px; }
  .coming-soon-inline { font-size: 9px; }
  .cta-inner h2 { font-size: 33px; }
  .cta-inner .button { font-size: 14px; }
  .footer-brand > p { font-size: 15px; }
  .footer-column { font-size: 13px; }
  .footer-column h2 { font-size: 17px; }
  .footer-contact > span { font-size: 12px; }
  .footer-contact .button { font-size: 12px; gap: 10px; }
  .footer-bottom { font-size: 10px; }
  .page-hero { min-height: 0; padding: 0; }
  .page-hero-media { position: relative; inset: auto; width: 100%; height: clamp(240px, 68vw, 380px); }
  .page-hero-media img { object-position: center; }
  body[data-page=contact] .page-hero-media img { object-position: center; }
  .page-hero::after { display: none; }
  .page-hero > .container { padding-block: 28px 42px; }
  .page-hero-copy, html[dir=ltr] .page-hero-copy { width: 100%; margin: 0; }
  .breadcrumb { font-size: 12px; margin-block-end: 24px; }
  .page-hero h1 { font-size: 41px; line-height: 1.45; }
  html[lang=en] .page-hero h1 { font-size: 40px; line-height: 1.14; }
  .page-description { font-size: 16px; line-height: 1.9; }
  .coming-panel { min-height: 320px; }
  .coming-panel h2 { font-size: 42px; }
  .coming-panel .text-link { font-size: 14px; }
  .contact-form-panel { padding: 26px 20px; }
  .contact-form-panel > h2 { font-size: 31px; }
  .form-field label { font-size: 14px; }
  .form-note { font-size: 12px; }
  .form-status { font-size: 14px; }
  .contact-details { padding: 30px 24px; }
  .contact-details h2 { font-size: 32px; }
  .contact-detail span { font-size: 12px; }
  .contact-detail p { font-size: 14px; }
  .about-detail > div:last-child { padding: 24px 20px; }
  body:not([data-page=index]) { --background-photo-opacity: .16; }
  body:not([data-page=index]) main::before { background-position: 25% center; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 40px; }
  .hero-actions .button { font-size: 11px; padding-inline: 9px; }
  .page-hero h1 { font-size: 36px; }
  .footer-top { grid-template-columns: 1fr; }
}