:root {
  color-scheme: light;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #023020;
  background: #edf1e9;
  --green: #023020;
  --muted: #36555c;
  --gutter: clamp(24px, 5.85vw, 112px);
  --contact-duration: 440ms;
  --contact-easing: cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  mix-blend-mode: multiply;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(24px, 3vh, 36px) var(--gutter);
}

.brand {
  display: block;
  flex-shrink: 0;
  width: clamp(68px, 5.2vw, 88px);
  aspect-ratio: 468 / 575;
  overflow: hidden;
}

.brand__logo {
  display: block;
  width: 130.35%;
  height: auto;
  transform: translate(-11.15%, -12.08%);
  filter: brightness(1.04);
}

.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 12px;
  color: var(--muted);
  font-size: clamp(14px, 1.1vw, 18px);
  white-space: nowrap;
}

.nav-phone svg { width: 21px; height: 21px; }

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(176px, 24.5svh, 300px) var(--gutter) 64px;
  isolation: isolate;
}

.hero__background {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.hero__content { width: max-content; max-width: 55%; }

.hero__eyebrow {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: clamp(11px, 0.98vw, 16px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: var(--green);
  font-size: clamp(64px, 5.8vw, 112px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.05em;
}

h1 > span, .hero__services > span { display: block; }

.hero__services {
  margin: 26px 0 0;
  color: var(--muted);
  font-size: clamp(20px, 1.72vw, 29px);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.separator { margin-inline: 0.25em; }

.contact-trigger {
  position: relative;
  margin-top: 28px;
  padding: 16px 36px;
  border: 1px solid var(--green);
  border-radius: 0;
  background: var(--green);
  color: #f8faf4;
  font-size: clamp(16px, 1.25vw, 21px);
  line-height: 1.25;
}

.contact-trigger:hover { background: #0d4232; }
.contact-trigger__fill {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--green);
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
  transition: clip-path var(--contact-duration) var(--contact-easing);
}
body:has(.contact-panel:popover-open) .contact-trigger__fill { clip-path: inset(0); }
.contact-trigger:focus-visible { outline-color: var(--green); }

/* The clipping edge stays on the viewport's center fold. */
.contact-panel {
  position: fixed;
  inset: var(--contact-top, 50%) auto auto 50%;
  width: min(460px, calc(50vw - var(--gutter)));
  max-height: calc(100dvh - var(--contact-top, 50dvh) - 24px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f8faf4;
  overflow: clip;
  transition: display var(--contact-duration) allow-discrete, overlay var(--contact-duration) allow-discrete;
}

.contact-card {
  position: relative;
  max-height: inherit;
  padding: clamp(36px, 3.3vw, 56px);
  overflow-y: auto;
  background: var(--green);
  transform: translateX(-100%);
  transition: transform var(--contact-duration) var(--contact-easing);
}

.contact-panel:popover-open .contact-card { transform: translate(0); }

@starting-style {
  .contact-panel:popover-open .contact-card { transform: translateX(-100%); }
}

.contact-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.contact-close svg { width: 18px; height: 18px; }
.contact-close:hover { opacity: 0.7; }
.contact-eyebrow { margin: 0 0 24px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.contact-card h2 { margin: 0 0 28px; font-size: clamp(26px, 1.9vw, 32px); font-weight: 400; line-height: 1.2; letter-spacing: -0.025em; }
.contact-card address { font-size: 17px; font-style: normal; line-height: 1.6; }
.contact-card address p { margin: 0; }
.contact-card .contact-links { display: grid; gap: 4px; margin-top: 26px; }
.contact-links a { width: fit-content; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: rgb(248 250 244 / 35%); text-underline-offset: 4px; }
.contact-links a:hover { text-decoration-color: currentColor; }

@media (max-width: 1024px) {
  body { min-height: var(--contact-page-height, 100svh); }
  .hero__background { position: fixed; }
  .contact-trigger__fill { clip-path: inset(0 0 100% 0); }

  .contact-panel {
    position: absolute;
    inset: var(--contact-top, 50%) auto auto var(--gutter);
    width: min(460px, calc(100% - var(--gutter) * 2));
    max-height: none;
  }

  .contact-card { padding: 36px 32px; transform: translateY(-100%); }

  @starting-style {
    .contact-panel:popover-open .contact-card { transform: translateY(-100%); }
  }
}

@media (max-width: 760px) {
  :root { --gutter: 24px; }
  .site-nav { padding-block: 20px; }
  .brand { width: 64px; }
  .nav-phone { gap: 8px; font-size: 14px; }
  .nav-phone svg { width: 18px; height: 18px; }
  .hero { padding-top: max(176px, 22svh); }
  .hero__background { object-position: 65% center; }
  .hero__content { max-width: 100%; }
  .hero__eyebrow { max-width: 32em; font-size: 10px; line-height: 1.6; }
  h1 { font-size: clamp(42px, 11.8vw, 80px); }
  .hero__services { margin-top: 26px; font-size: clamp(18px, 4.7vw, 25px); line-height: 1.45; }
  .contact-trigger { margin-top: 28px; padding: 16px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-panel, .contact-card, .contact-trigger__fill { transition: none; }
}

@media (max-height: 640px) and (orientation: landscape) {
  .site-nav { padding-block: 14px; }
  .brand { width: 48px; }
  .hero { padding-top: clamp(96px, 22svh, 140px); padding-bottom: 16px; }
  .hero__eyebrow { max-width: none; margin-bottom: 12px; font-size: 10px; line-height: 1.5; }
  h1 { font-size: clamp(38px, 10.5svh, 68px); }
  .hero__services { margin-top: clamp(12px, 3svh, 18px); font-size: clamp(16px, 3svh, 20px); line-height: 1.3; }
  .contact-trigger { margin-top: 14px; padding: 10px 24px; font-size: clamp(14px, 2.6svh, 16px); }
}