:root {
  color-scheme:light;
  --paper:#f5f3ec;
  --ink:#183c31;
  --muted:#54655c;
  --line:#cdd2c7;
  --green:#315943;
  --lime:#d3e6a1;
  font-family:'Sora',Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none}

* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:30px}
body {
  margin:0}
a {
  color:inherit;
  text-decoration:none}
a:focus-visible {
  outline:3px solid currentColor;
  outline-offset:6px}
a:hover {
  text-decoration:underline;
  text-underline-offset:5px}
::selection {
  background:var(--lime);
  color:var(--ink)}
.skip {
  position:absolute;
  left:20px;
  top:-100px;
  background:var(--ink);
  color:var(--paper);
  padding:15px;
  z-index:10}
.skip:focus {
  top:10px}
.page {
  max-width:1440px;
  margin:auto;
  padding:0 72px}
.header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:34px 0;
  border-bottom:1px solid var(--line)}
.wordmark {
  font-weight:700;
  font-size:35px;
  letter-spacing:-.03em;
  line-height:1}
.wordmark span {
  color:#749254}
.header nav {
  display:flex;
  gap:38px;
  font-size:14px;
  font-weight:600}
.header nav span {
  margin-left:8px}
.hero {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  align-items:center;
  gap:25px;
  padding:98px 0 82px;
  min-height:630px}
.hero h1 {
  font-size:clamp(44px,5vw,72px);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.05;
  margin:0 0 30px}
.hero h1 span {
  color:#6a805a}
.intro {
  font-size:18px;
  line-height:1.75;
  max-width:490px;
  color:var(--muted);
  margin:0 0 34px}
.button {
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:36px;
  padding:18px 23px;
  background:var(--ink);
  color:var(--paper);
  font-size:14px;
  font-weight:600;
  border-radius:3px;
  transition:background .2s}
.button:hover {
  background:#315943;
  text-decoration:none}
.button span {
  font-size:21px;
  font-weight:400}
.hero-note {
  font-size:13px;
  color:var(--muted);
  margin-top:21px;
  letter-spacing:.3px}
.hero-art {
  position:relative;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  isolation:isolate}
.orbit {
  position:absolute;
  width:95%;
  height:95%;
  border:1px solid var(--line);
  border-radius:50%;
  z-index:-1}
.orbit-two {
  width:73%;
  height:73%}
.petals {
  width:66%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  transform:rotate(-13deg)}
.petals i {
  aspect-ratio:1;
  border-radius:100% 100% 5% 100%;
  background:#315943}
.petals i:nth-child(2) {
  transform:rotate(90deg);
  background:#80976c}
.petals i:nth-child(3) {
  transform:rotate(-90deg);
  background:#adc18d}
.petals i:nth-child(4) {
  transform:rotate(180deg);
  background:#d5dfbe}
.art-label,.art-coordinate {
  position:absolute;
  font-size:9px;
  letter-spacing:1.5px;
  color:var(--muted);
  background:var(--paper);
  padding:8px}
.art-label {
  bottom:0;
  left:6%}
.art-coordinate {
  top:3%;
  right:0}
.services {
  display:grid;
  grid-template-columns:.9fr 1.4fr;
  gap:80px;
  border-top:1px solid var(--line);
  padding:66px 0 80px}
.section-heading h2 {
  font-size:34px;
  letter-spacing:-.03em;
  font-weight:500;
  line-height:1.12;
  margin:0 0 22px}
.section-heading>p:last-child {
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
  max-width:280px}
.service-list article {
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  padding:25px 0;
  border-bottom:1px solid var(--line)}
.service-list article:first-child {
  padding-top:0}
.service-list h3 {
  font-size:23px;
  font-weight:500;
  letter-spacing:-.03em;
  margin:0 0 12px}
.service-list p {
  font-size:15px;
  line-height:1.75;
  color:var(--muted);
  max-width:450px;
  margin:0}
.contact {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  background:var(--ink);
  color:var(--paper);
  padding:54px 56px;
  border-radius:4px}
.contact h2 {
  font-size:46px;
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.03em;
  margin:0}
.contact-copy {
  align-self:end}
.contact-copy p {
  font-size:16px;
  line-height:1.75;
  color:#d3dbd0;
  max-width:345px;
  margin:0 0 28px}
.email {
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:clamp(19px,2.4vw,27px);
  padding-bottom:12px;
  border-bottom:1px solid #80977d}
.email span {
  color:var(--lime)}
footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:37px 0 40px}
footer .wordmark {
  font-size:25px}
footer p,footer>a:last-child {
  font-size:13px;
  color:var(--muted)}

@media(min-width:1600px) {
  .hero h1 {
  font-size:72px}
}

@media(max-width:1000px) {
  .page {
  padding:0 36px}
.hero {
  padding:72px 0;
  min-height:auto;
  grid-template-columns:1.5fr 1fr}
.hero h1 {
  font-size:48px;
  letter-spacing:-.03em}
.intro {
  font-size:16px}
.services {
  gap:40px}
.contact {
  padding:40px;
  gap:35px}
.contact h2 {
  font-size:43px}
}

@media(max-width:700px) {
  .page {
  padding:0 24px}
.header {
  padding:26px 0}
.wordmark {
  font-size:30px}
.header nav {
  gap:22px;
  font-size:14px}
.hero {
  padding:52px 0 42px;
  grid-template-columns:1fr;
  gap:20px}
.hero h1 {
  font-size:clamp(32px,10vw,58px);
  letter-spacing:-.03em}
.intro {
  max-width:500px}
.hero-art {
  width:65%;
  max-width:290px;
  justify-self:center}
.art-label,.art-coordinate {
  font-size:8px}
.services {
  grid-template-columns:1fr;
  gap:27px;
  padding:44px 0}
.section-heading h2 {
  font-size:34px}
.section-heading>p:last-child {
  max-width:400px}
.service-list article {
  gap:0;
  grid-template-columns:1fr}
.service-list h3 {
  font-size:21px}
.contact {
  grid-template-columns:1fr;
  gap:30px;
  padding:32px 26px}
.contact h2 {
  font-size:42px}
.email {
  font-size:23px}
footer {
  flex-wrap:wrap;
  padding:30px 0}
footer p {
  order:3;
  width:100%;
  margin:0}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
.button {
  transition:none}
}


h1,h2,h3 {
  text-wrap:balance}
p {
  text-wrap:pretty}
.hero-copy,.contact-copy {
  min-width:0}
.icon-arrow {
  display:inline-block;
  width:1.15em;
  height:1.15em;
  flex:none;
  vertical-align:middle}
.button .icon-arrow {
  width:22px;
  height:22px}
.header nav a,footer a,.phone {
  display:inline-flex;
  align-items:center;
  min-height:44px}
.header nav a {
  gap:8px}
.button:active {
  filter:brightness(.9)}
html {
  scrollbar-color:var(--muted) var(--paper)}
.contact a:focus-visible {
  outline-color:var(--paper)}


footer > a:last-child { gap: 8px; }