/* The public landing page shares its base styles with the private cabinet. */
:root { --paper: #fbfcf8; --border: #dfe5d9; }
.wrap { width: min(1160px, calc(100% - 96px)); }
.section { padding-block: 96px; }
.site-header { min-height: 100px; border-bottom: 0; }
.site-header nav { gap: 26px; }
.hero { grid-template-columns: 1fr 1fr; gap: 72px; padding-block: 48px 88px; }
.hero-copy { padding-block: 20px; }
.hero h1 { font-size: clamp(2.7rem, 4.25vw, 4.25rem); line-height: 1.13; letter-spacing: -.05em; }
.hero .eyebrow { font-size: .7rem; margin-bottom: 28px; }
.hero-description { max-width: 360px; font-size: 1rem; margin-block: 28px 32px; }
.hero-image { min-height: 510px; border-radius: 100px 8px 8px 8px; }
.hero .button { font-size: .94rem; }
.section-top { gap: 40px; margin-bottom: 44px; }
.section-description { max-width: 360px; font-size: .94rem; }
.services { border-top: 0; padding-top: 32px; }
.services .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; border: 0; }
.services .service { padding: 0 !important; border: 0; }
.service-symbol { display: block; height: 44px; margin-bottom: 22px; font-size: 2.1rem; }
.services .service h3 { min-height: 0; font-size: 1.65rem; line-height: 1.25; }
.services .service p { max-width: 31ch; margin-block: 16px 18px; font-size: .92rem; }
.service-action { border: 0; justify-content: flex-start; gap: 18px; width: fit-content; padding: 10px 0; font-size: .88rem; }
.service-note { margin-top: 38px; font-size: .78rem; }

.request-section { padding-block: 88px; background: #f0f4eb; }
.request-layout { grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: start; }
.request-intro { padding-top: 18px; }
.request-intro .eyebrow { margin: 0 0 28px; font-size: .68rem; }
.request-intro h2 { font-size: clamp(2.3rem, 3.3vw, 3.35rem); line-height: 1.17; }
.request-intro > p:not(.eyebrow) { margin-top: 25px; max-width: 310px; font-size: .96rem; }
.contact-block { margin-top: 42px; gap: 10px; }
.contact-block > a { font-size: 1.25rem; }
.request-card { padding: 36px; border-radius: 12px; }
.service-options { margin-bottom: 25px; }
.service-options legend { font-size: 1rem; margin-bottom: 15px; }
.service-options legend small { font-size: .76rem; margin-top: 6px; }
.checkbox-grid { gap: 10px; }
.checkbox-grid > label { padding: 12px 10px; font-size: .82rem; gap: 9px; }
.future-options { padding: 0; }
.form-service-note { font-size: .75rem; line-height: 1.5; color: var(--muted); margin-top: 12px; }
.form-row { gap: 16px; }
.field { margin-bottom: 20px; font-size: .82rem; }
.request-details { border-block: 1px solid var(--border); margin-block: 4px 24px; }
.request-details summary { padding-block: 16px; font-size: .84rem; cursor: pointer; outline-offset: 3px; }
.request-details summary::marker { color: #547348; font-size: .8em; }
.request-details summary > span { color: var(--muted); font-size: .75rem; margin-left: 8px; }
.request-details-fields { padding-top: 9px; }
.request-details-fields .field:last-child { margin-bottom: 20px; }
.consent { font-size: .74rem; margin-bottom: 24px; }

.comparison-section { max-width: 920px; }
.comparison-section h2 em { color: #4a7046; }
.comparison-frame { --split: 50%; position: relative; isolation: isolate; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 10px; background: #e5dfd2; user-select: none; }
.comparison-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.comparison-before { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.comparison-label { position: absolute; top: 23px; z-index: 2; background: var(--paper); padding: 10px 17px; border-radius: 5px; font-size: .8rem; font-weight: 500; pointer-events: none; }
.label-before { left: 23px; }
.label-after { right: 23px; background: var(--green); color: var(--paper); }
.comparison-divider { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; background: var(--paper); transform: translateX(-50%); pointer-events: none; z-index: 2; box-shadow: 0 0 4px #153c2e40; }
.comparison-handle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: 10px; width: 60px; height: 60px; border-radius: 50%; background: var(--paper); color: var(--green); box-shadow: 0 2px 16px #153c2e25; font-family: Arial, sans-serif; font-size: 30px; line-height: 1; }
.comparison-handle > span { display: block; width: 1px; height: 20px; background: var(--border); }
.comparison-range { appearance: none; -webkit-appearance: none; position: absolute; z-index: 3; inset: 0 auto 0 -22px; width: calc(100% + 44px); height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.comparison-range::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.comparison-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 44px; height: 100%; background: transparent; border: 0; }
.comparison-range::-moz-range-track { height: 100%; background: transparent; }
.comparison-range::-moz-range-thumb { width: 44px; height: 100%; background: transparent; border: 0; }
.comparison-frame:has(.comparison-range:focus-visible) { outline: 3px solid #709847; outline-offset: 6px; }
.comparison-frame:has(.comparison-range:focus-visible) .comparison-handle { box-shadow: 0 0 0 4px var(--green); }
.comparison-caption { display: flex; justify-content: space-between; align-items: start; gap: 24px; margin-top: 20px; }
.comparison-caption p { color: var(--muted); font-size: .74rem; line-height: 1.6; }
.comparison-caption #comparison-hint { color: var(--green); }
.comparison-caption #comparison-hint > span { font-size: 1.1rem; margin-right: 7px; }
.comparison-disclosure { max-width: 290px; }

.landscape-section { padding-top: 32px; }
.landscape-section .section-description { max-width: 345px; }
.greening-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.greening-card { padding: 36px 40px; border-radius: 10px; background: #f0f3ea; }
.greening-card h3 { font-size: 1.7rem; }
.greening-card p { color: var(--muted); font-size: .94rem; margin-block: 18px 24px; max-width: 38ch; }
.greening-card .text-link { padding: 10px 0; min-height: 44px; font-size: .88rem; }
.team-section { padding-top: 32px; }
.team-section .section-top { max-width: 920px; margin-inline: auto; }
.team-section .section-top > .text-link { font-size: .9rem; padding-block: 10px; min-height: 44px; }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; max-width: 920px; margin-inline: auto; }
.team-photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; background: #e7e6db; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.team-member figcaption { padding-top: 23px; }
.team-member h3 { font-size: 1.8rem; }
.team-role { margin-top: 7px; font-size: .9rem; color: var(--muted); }
.site-footer { border-top: 1px solid var(--border); padding-block: 32px; }

@media (max-width: 1100px) {
  .wrap { width: calc(100% - 64px); }
  .hero { gap: 40px; }
  .hero-image { min-height: 475px; }
  .hero h1 { font-size: clamp(2.6rem, 4.25vw, 3.7rem); }
  .services .service-grid { gap: 30px; }
  .services .service h3 { font-size: 1.45rem; }
  .request-layout { gap: 40px; grid-template-columns: .8fr 1.2fr; }
  .request-card { padding: 30px; }
}
@media (max-width: 850px) {
  .wrap { width: calc(100% - 48px); }
  .section { padding-block: 72px; }
  .site-header { min-height: 88px; }
  .hero { padding-block: 32px 68px; gap: 30px; }
  .hero h1 { font-size: clamp(2.3rem, 4.9vw, 2.85rem); }
  .hero .eyebrow { font-size: .64rem; }
  .hero-image { min-height: 430px; border-top-left-radius: 75px; }
  .hero-description { font-size: .93rem; }
  .services { padding-top: 24px; }
  .services .service h3 { font-size: 1.32rem; }
  .services .service p { font-size: .86rem; }
  .request-section { padding-block: 64px; }
  .request-layout { grid-template-columns: 1fr; gap: 36px; }
  .request-intro { padding: 0; }
  .request-intro h2 { font-size: 2.8rem; max-width: 530px; }
  .request-intro h2 em { display: block; }
  .request-intro > p:not(.eyebrow) { max-width: 430px; margin-top: 20px; }
  .request-intro .contact-block { margin-top: 25px; gap: 7px; }
  .request-card { padding: 32px; }
  .comparison-caption { display: block; }
  .comparison-disclosure { margin-top: 8px; max-width: none; }
  .greening-card { padding: 28px; }
  .greening-card h3 { font-size: 1.5rem; }
  .team-grid { gap: 30px; }
  .landscape-section, .team-section { padding-top: 16px; }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 40px); }
  .section { padding-block: 60px; }
  .hero { grid-template-columns: 1fr; gap: 30px; padding-block: 28px 48px; }
  .hero-copy { padding-block: 12px 0; }
  .hero h1 { font-size: clamp(2.5rem, 10.8vw, 3.7rem); line-height: 1.14; }
  .hero .eyebrow { margin-bottom: 24px; }
  .hero-description { max-width: 350px; margin-block: 23px 27px; font-size: .97rem; }
  .hero-image { height: 330px; min-height: 0; margin: 0; border-radius: 60px 7px 7px 7px; }
  .hero .button { font-size: .94rem; }
  .section-top { display: flex; flex-wrap: wrap; align-items: start; gap: 16px; margin-bottom: 32px; }
  .section-description { margin: 0; font-size: .9rem; }
  .section-top .eyebrow { margin-bottom: 15px; }
  .services { padding-top: 20px; }
  .services .section-top { display: block; margin-bottom: 34px; }
  .services .section-description { margin-top: 16px; }
  .services .service-grid { grid-template-columns: 1fr; gap: 30px; }
  .services .service { display: grid; grid-template-columns: 30px 1fr; column-gap: 16px; }
  .service-symbol { height: auto; margin: 0; font-size: 1.8rem; line-height: 1.1; grid-row: 1 / 4; }
  .services .service h3 { font-size: 1.5rem; }
  .services .service p { font-size: .9rem; max-width: none; margin-block: 10px 6px; }
  .service-action { font-size: .85rem; grid-column: 2; }
  .service-note { margin-top: 28px; font-size: .76rem; }
  .request-section { padding-block: 50px; }
  .request-layout { gap: 32px; }
  .request-intro .eyebrow { font-size: .65rem; margin-bottom: 22px; }
  .request-intro h2 { font-size: clamp(2rem, 8.4vw, 2.8rem); line-height: 1.2; }
  .request-intro > p:not(.eyebrow) { max-width: 320px; font-size: .92rem; }
  .request-card { padding: 27px 20px; border-radius: 9px; }
  .service-options legend { font-size: .97rem; }
  .checkbox-grid { grid-template-columns: 1fr; gap: 9px; }
  .future-options .checkbox-grid { grid-template-columns: 1fr 1fr; }
  .checkbox-grid > label { font-size: .82rem; padding: 12px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .request-details summary { font-size: .8rem; }
  .request-details summary > span { display: block; padding-left: 15px; margin: 5px 0 0; font-size: .72rem; }
  .comparison-section .section-top { margin-bottom: 28px; }
  .comparison-label { top: 12px; padding: 7px 10px; font-size: .7rem; }
  .label-before { left: 12px; }
  .label-after { right: 12px; }
  .comparison-handle { width: 46px; height: 46px; font-size: 25px; gap: 7px; }
  .comparison-handle > span { height: 16px; }
  .comparison-caption { margin-top: 16px; }
  .comparison-caption p { font-size: .72rem; }
  .landscape-section, .team-section { padding-top: 12px; }
  .greening-grid { grid-template-columns: 1fr; gap: 20px; }
  .greening-card { padding: 28px; }
  .greening-card p { margin-block: 15px 20px; font-size: .91rem; }
  .team-section .section-top { align-items: center; }
  .team-section .section-top > .text-link { font-size: .85rem; }
  .team-member figcaption { padding-top: 18px; }
  .team-member h3 { font-size: 1.6rem; }
  .team-role { font-size: .87rem; }
}
@media (max-width: 500px) {
  .team-grid { grid-template-columns: 1fr; gap: 36px; }
}