@charset "UTF-8";
:root {
  color-scheme: light;
  --ink: #17231f;
  --muted: #707c76;
  --paper: #f4f5f0;
  --green: #c8f16b;
  --deep: #10251f;
  --line: rgba(23, 35, 31, .14);
  font-family: "Manrope", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); }
a { color: inherit; text-decoration: none; }
.site-header, .site-footer { width: min(1320px, calc(100% - 96px)); margin: auto; display: flex; align-items: center; justify-content: space-between; }
.site-header { height: 98px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { height: 28px; width: 28px; display: flex; align-items: end; gap: 3px; padding: 4px; background: var(--green); border-radius: 8px; }
.brand-mark i { display: block; width: 4px; background: var(--deep); border-radius: 3px; }
.brand-mark i:nth-child(1) { height: 9px; }.brand-mark i:nth-child(2) { height: 15px; }.brand-mark i:nth-child(3) { height: 20px; }
.brand-name { font-size: 19px; font-weight: 500; letter-spacing: -.8px; }
.hero { width: min(1320px, calc(100% - 96px)); min-height: 620px; margin: auto; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 70px; padding: 58px 0 72px; }
.hero-copy { padding: 20px 0 0 5.5%; }
.eyebrow { margin: 0; display: flex; align-items: center; gap: 10px; color: #54615a; text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
.eyebrow > span { width: 7px; height: 7px; border-radius: 50%; background: #8db837; }
h1 { margin: 30px 0 22px; font-size: clamp(52px, 6.1vw, 82px); line-height: .99; letter-spacing: -5.5px; font-weight: 600; }
h1 em { font-style: normal; color: #789b3d; }
.hero-lead { max-width: 430px; margin: 0; color: #68736d; font-size: 15px; line-height: 1.85; }
.hero-note { display: flex; align-items: center; gap: 11px; margin-top: 62px; color: #849089; font-size: 10px; letter-spacing: .2px; }.note-line { display: block; width: 32px; height: 1px; background: #a7b09f; }
.hero-art { height: 470px; position: relative; overflow: hidden; background: #dfe7d4; border-radius: 7px; }
.hero-art:before { content: ""; position: absolute; inset: 0; opacity: .45; background-image: linear-gradient(rgba(255,255,255,.34) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.34) 1px, transparent 1px); background-size: 43px 43px; }
.art-orbit { position: absolute; border: 1px solid rgba(36, 66, 51, .15); border-radius: 50%; }.orbit-one { width: 420px; height: 420px; top: 15px; right: -18px; }.orbit-two { width: 290px; height: 290px; top: 80px; right: 48px; }
.art-sun { position: absolute; width: 82px; height: 82px; border-radius: 50%; background: #c7ed78; top: 69px; left: 17%; box-shadow: 0 0 70px rgba(197, 237, 120, .65); }
.building { position: absolute; box-shadow: 22px 27px 40px rgba(40, 63, 48, .16); }
.building-back { z-index: 1; width: 135px; height: 220px; top: 99px; right: 25%; transform: skewY(-10deg); background: #9caf8a; display: flex; flex-direction: column; justify-content: space-evenly; padding: 18px; }
.building-back span { width: 100%; height: 1px; background: rgba(241, 247, 230, .7); }
.building-front { z-index: 2; width: 240px; height: 280px; top: 93px; right: 16%; background: #274639; transform: skewY(5deg); padding: 21px 20px 0; }
.building-top { position: absolute; left: -18px; right: 18px; top: -18px; height: 24px; background: #41614d; transform: skewX(-43deg); }
.windows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 3px; }.windows i { height: 32px; background: #b8d28c; opacity: .83; }.windows i:nth-child(3n + 2) { background: #d4e7b1; }.windows i:nth-child(4n) { opacity: .45; }
.building-base { position: absolute; bottom: -2px; left: 0; right: -22px; height: 51px; background: #18342a; transform: skewX(-28deg); transform-origin: left bottom; }
.art-caption { z-index: 3; position: absolute; right: 21px; bottom: 19px; left: 21px; display: flex; justify-content: space-between; color: #536654; font-size: 9px; letter-spacing: .8px; text-transform: uppercase; }
.details { width: min(1110px, calc(100% - 96px)); margin: 30px auto 100px; padding: 68px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; }
h2 { margin: 24px 0 0; font-size: clamp(34px, 4vw, 48px); line-height: 1.09; letter-spacing: -2.2px; font-weight: 600; }
.contact-card { padding: 4px 0 0; }
.contact-row { display: grid; grid-template-columns: 1fr 1.7fr; padding: 19px 0; border-bottom: 1px solid var(--line); }.contact-label { color: #7a857f; font-size: 11px; }.contact-value { font-size: 16px; font-weight: 600; line-height: 1.7; }.contact-extra { grid-column: 2; margin-top: 4px; color: #7a857f; font-size: 11px; } address { font-style: normal; }
.site-footer { min-height: 95px; border-top: 1px solid var(--line); }.footer-brand .brand-mark { transform: scale(.84); }.footer-brand .brand-name { font-size: 16px; }.copyright { font-size: 10px; color: #77817b; }
@media (max-width: 900px) { .hero { gap: 30px; grid-template-columns: .9fr 1.1fr; }.hero-art { height: 410px; }.building-front { transform: scale(.86) skewY(5deg); transform-origin: bottom right; right: 10%; }.building-back { right: 20%; } h1 { letter-spacing: -3.7px; } }
@media (max-width: 680px) { .site-header, .site-footer, .hero { width: calc(100% - 40px); }.site-header { height: 75px; }.hero { display: flex; flex-direction: column; align-items: stretch; gap: 42px; padding: 45px 0 54px; }.hero-copy { padding: 0; } h1 { font-size: clamp(54px, 14vw, 76px); margin-top: 24px; }.hero-lead { font-size: 14px; }.hero-note { margin-top: 38px; }.hero-art { height: 340px; }.building-front { width: 205px; height: 247px; top: 69px; right: 12%; padding: 18px 17px 0; transform: skewY(5deg); }.building-back { top: 78px; right: 27%; height: 194px; width: 110px; }.windows { gap: 9px; }.windows i { height: 27px; }.orbit-one { right: -135px; }.orbit-two { right: -75px; }.details { width: calc(100% - 40px); margin: 14px auto 65px; padding-top: 45px; display: block; }.details-heading { margin-bottom: 34px; } h2 { font-size: 39px; }.contact-row { grid-template-columns: .9fr 1.3fr; gap: 8px; }.contact-value { font-size: 14px; }.site-footer { min-height: 80px; }.copyright { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }
