:root {
  --paper:#f7f7f2;
  --ink:#17281c;
  --forest:#263f2f;
  --muted:#666b60;
  --u:calc(100vw / 519);
  color-scheme:light;
  font-family:"Times New Roman",Times,serif;
  color:var(--ink);
  background:var(--paper)
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
img {
  display:block;
  max-width:100%
}
h1,h2,h3,p,figure {
  margin:0
}
h1,h2,h3 {
  font-weight:400
}
a,button {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible {
  outline:3px solid #a98b42;
  outline-offset:5px
}
.svg-library {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.site-shell {
  position:relative;
  max-width:1680px;
  margin:auto;
  overflow:clip
}
.icon {
  display:inline-block;
  width:calc(9 * var(--u));
  height:calc(9 * var(--u));
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  vertical-align:middle
}
.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  z-index:100;
  background:var(--forest);
  color:white;
  padding:14px 20px;
  transform:translateY(-160%)
}
.skip-link:focus {
  transform:none
}
.eyebrow {
  font-family:Arial,sans-serif;
  font-size:calc(4.35 * var(--u));
  line-height:1.3;
  letter-spacing:calc(1.05 * var(--u));
  text-transform:uppercase;
  font-weight:500;
  color:var(--muted)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:calc(5 * var(--u));
  height:calc(21 * var(--u));
  padding:0 calc(14 * var(--u));
  border:1px solid #54674e;
  border-radius:999px;
  background:#203d2a;
  color:#f5f5e9;
  font-size:calc(7.2 * var(--u));
  white-space:nowrap;
  transition:background-color 180ms,border-color 180ms
}
.button:hover {
  background:#36533c;
  border-color:#76916a
}
.button .icon {
  width:calc(8 * var(--u));
  height:calc(8 * var(--u));
  transition:transform 180ms
}
.button:hover .icon,.text-link:hover .icon {
  transform:translateX(3px)
}
.button--outline {
  height:calc(20 * var(--u));
  padding:0 calc(10 * var(--u));
  border-color:#9ba68a;
  background:transparent
}
.button--small {
  height:calc(16 * var(--u));
  font-size:calc(5.5 * var(--u));
  padding:0 calc(13 * var(--u));
  gap:calc(4 * var(--u))
}
.button--small .icon {
  width:calc(6 * var(--u));
  height:calc(6 * var(--u))
}
.site-header {
  height:calc(64 * var(--u));
  position:relative;
  z-index:5
}
.brand {
  position:absolute;
  left:calc(33 * var(--u));
  top:calc(8 * var(--u));
  width:calc(132 * var(--u));
  height:calc(40 * var(--u))
}
.brand__mark {
  position:absolute;
  left:calc(-3 * var(--u));
  top:calc(-2 * var(--u));
  width:calc(38 * var(--u));
  height:calc(35 * var(--u))
}
.brand__name {
  display:block;
  position:absolute;
  left:calc(38 * var(--u));
  top:calc(7 * var(--u));
  font-size:calc(10.5 * var(--u));
  letter-spacing:calc(2.15 * var(--u));
  line-height:1.2;
  text-transform:uppercase;
  white-space:nowrap
}
.brand__tagline {
  position:absolute;
  left:calc(4 * var(--u));
  top:calc(35 * var(--u));
  font:calc(3.6 * var(--u))/1 Arial,sans-serif;
  letter-spacing:calc(1.1 * var(--u));
  text-transform:uppercase;
  white-space:nowrap
}
.navigation {
  position:absolute;
  left:calc(211 * var(--u));
  top:calc(19 * var(--u));
  display:flex;
  align-items:center;
  gap:calc(15 * var(--u));
  font:calc(5.3 * var(--u))/1.4 Arial,sans-serif
}
.navigation a,.footer-nav a {
  position:relative;
  padding:calc(4 * var(--u)) 0
}
.navigation a:after,.footer-nav a:after {
  position:absolute;
  content:"";
  height:1px;
  left:0;
  right:0;
  bottom:calc(1 * var(--u));
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 180ms
}
.navigation a:hover:after,.navigation a[aria-current]:after,.footer-nav a:hover:after,.footer-nav a[aria-current]:after {
  transform:scaleX(1)
}
.header-contact {
  position:absolute;
  top:calc(4 * var(--u));
  right:calc(33 * var(--u));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(5 * var(--u))
}
.location {
  display:inline-flex;
  align-items:center;
  gap:calc(4 * var(--u));
  font-size:calc(5.5 * var(--u));
  line-height:1.4
}
.location .icon {
  width:calc(5 * var(--u));
  height:calc(7 * var(--u))
}
.menu-toggle {
  display:none
}
.hero {
  height:calc(215 * var(--u));
  position:relative;
  background:#f7f6f2
}
.hero:after {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:calc(42 * var(--u));
  background:#fafbf8;
  clip-path:polygon(0 14%,6% 38%,14% 63%,27% 82%,44% 75%,63% 86%,82% 100%,100% 100%,100% 100%,0 100%);
  z-index:0
}
.hero__copy {
  position:absolute;
  left:calc(34 * var(--u));
  top:calc(17 * var(--u));
  z-index:2
}
.hero h1 {
  margin-top:calc(5 * var(--u));
  font-size:calc(23 * var(--u));
  line-height:.98;
  letter-spacing:calc(-.35 * var(--u));
  color:#0d1a10
}
.hero__description {
  margin-top:calc(6 * var(--u));
  font-size:calc(7.8 * var(--u));
  line-height:1.32;
  color:#64665c
}
.hero .button {
  margin-top:calc(9 * var(--u))
}
.hero__promise {
  display:flex;
  align-items:center;
  gap:calc(5 * var(--u));
  margin-top:calc(9 * var(--u));
  font:calc(4.1 * var(--u))/1.4 Arial,sans-serif;
  letter-spacing:calc(.8 * var(--u));
  text-transform:uppercase;
  color:#7a8071
}
.hero__promise .icon {
  width:calc(12 * var(--u));
  height:calc(10 * var(--u));
  transform:rotate(25deg);
  color:#475f44
}
.hero__image {
  position:absolute;
  top:calc(-41 * var(--u));
  right:0;
  width:calc(296 * var(--u));
  height:calc(256 * var(--u));
  max-width:none;
  z-index:1
}
.botanical {
  position:absolute;
  pointer-events:none
}
.hero__leaf-left {
  width:calc(30 * var(--u));
  height:calc(75 * var(--u));
  left:0;
  top:calc(4 * var(--u));
  opacity:.38
}
.hero__leaf-right {
  width:calc(74 * var(--u));
  height:calc(100 * var(--u));
  left:calc(212 * var(--u));
  top:calc(113 * var(--u));
  transform:rotate(-10deg);
  opacity:.23;
  z-index:2
}
.services {
  position:relative;
  height:calc(199 * var(--u));
  background:#fafbf8;
  padding-top:calc(6 * var(--u))
}
.services__heading {
  margin:0 calc(34 * var(--u));
  height:calc(57 * var(--u));
  position:relative
}
.services h2 {
  margin-top:calc(3 * var(--u));
  font-size:calc(17.5 * var(--u));
  line-height:1.03;
  letter-spacing:0
}
.services__intro {
  position:absolute;
  left:calc(228 * var(--u));
  top:calc(12 * var(--u));
  width:calc(176 * var(--u));
  font-size:calc(6.6 * var(--u));
  line-height:1.35;
  color:#66695e
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:calc(4 * var(--u));
  border-bottom:1px solid #9ca393;
  padding-bottom:calc(3 * var(--u));
  font-size:calc(5.7 * var(--u));
  line-height:1.2
}
.text-link .icon {
  width:calc(6 * var(--u));
  height:calc(6 * var(--u));
  transition:transform 180ms
}
.services__all {
  position:absolute;
  right:calc(-1 * var(--u));
  top:calc(33 * var(--u))
}
.service-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:calc(8 * var(--u));
  margin:0 calc(23 * var(--u))
}
.service-card {
  background:linear-gradient(#f7f7f1,#f7f6f2);
  min-width:0;
  border-radius:calc(5 * var(--u));
  transition:background-color 180ms
}
.service-card>img {
  width:100%;
  height:calc(87 * var(--u));
  object-fit:cover;
  border-radius:calc(5 * var(--u)) calc(5 * var(--u)) calc(14 * var(--u)) 0
}
.service-card__copy {
  padding:calc(5 * var(--u)) calc(10 * var(--u)) calc(7 * var(--u));
  min-height:calc(42 * var(--u))
}
.service-card h3 {
  font-size:calc(9 * var(--u));
  line-height:1.3
}
.service-card p {
  font-size:calc(7 * var(--u));
  line-height:1.3;
  color:#797b70
}
.service-card:hover h3 {
  text-decoration:underline;
  text-underline-offset:3px
}
.service-card:hover {
  background:#eef0e8
}
.project {
  height:calc(168 * var(--u));
  position:relative;
  isolation:isolate;
  color:#f5f5e9
}
.project__shape {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  fill:#293f31
}
.project__photos {
  position:absolute;
  left:calc(19 * var(--u));
  top:calc(19 * var(--u));
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:calc(4 * var(--u));
  width:calc(266 * var(--u))
}
.project__photos figure {
  position:relative;
  min-width:0
}
.project__photos img {
  width:100%;
  height:calc(126 * var(--u));
  object-fit:cover
}
.project__photos figure:first-child img {
  border-radius:calc(8 * var(--u)) 0 0 0
}
.project__photos figure:last-child img {
  border-radius:0 calc(34 * var(--u)) 0 0
}
.project__photos figcaption {
  position:absolute;
  left:calc(8 * var(--u));
  bottom:calc(8 * var(--u));
  min-width:calc(26 * var(--u));
  padding:calc(2 * var(--u)) calc(5 * var(--u));
  font-size:calc(5.5 * var(--u));
  line-height:1.25;
  text-align:center;
  background:#f3f3e9;
  color:#57604b;
  border:1px solid #c3c9b5
}
.project__copy {
  position:absolute;
  left:calc(305 * var(--u));
  top:calc(38 * var(--u));
  width:calc(163 * var(--u));
  z-index:1
}
.project .eyebrow {
  color:#d2dbc6;
  font-size:calc(4.1 * var(--u));
  letter-spacing:calc(.85 * var(--u))
}
.project h2 {
  font-size:calc(15.5 * var(--u));
  line-height:1.02;
  margin-top:calc(5 * var(--u));
  letter-spacing:calc(-.15 * var(--u))
}
.project__copy>p:not(.eyebrow) {
  font:calc(6.4 * var(--u))/1.32 Arial,sans-serif;
  margin-top:calc(5 * var(--u));
  max-width:calc(153 * var(--u));
  color:#dde1ce
}
.project .button {
  margin-top:calc(8 * var(--u));
  font-size:calc(6.6 * var(--u))
}
.project__branch {
  right:calc(-3 * var(--u));
  top:calc(41 * var(--u));
  width:calc(60 * var(--u));
  height:calc(101 * var(--u));
  opacity:.38
}
.about {
  position:relative;
  height:calc(161 * var(--u));
  background:var(--paper)
}
.about__image {
  position:absolute;
  left:0;
  top:calc(-3 * var(--u));
  width:calc(245 * var(--u));
  height:calc(161 * var(--u));
  max-width:none
}
.about__copy {
  position:absolute;
  left:calc(262 * var(--u));
  top:calc(17 * var(--u));
  width:calc(240 * var(--u))
}
.about .eyebrow {
  font-size:calc(4.1 * var(--u));
  letter-spacing:calc(.75 * var(--u))
}
.about h2 {
  font-size:calc(15 * var(--u));
  line-height:1.02;
  margin-top:calc(5 * var(--u));
  letter-spacing:calc(-.15 * var(--u))
}
.about__description {
  font-size:calc(7 * var(--u));
  line-height:1.28;
  color:#66695e;
  margin-top:calc(6 * var(--u))
}
.about .button {
  height:calc(20 * var(--u));
  margin-top:calc(11 * var(--u));
  padding:0 calc(12 * var(--u));
  font-size:calc(6.8 * var(--u))
}
.values {
  display:flex;
  align-items:center;
  justify-content:space-between;
  list-style:none;
  margin:calc(10 * var(--u)) 0 0;
  padding:0;
  font-size:calc(5.2 * var(--u));
  color:#616959;
  white-space:nowrap
}
.values li {
  display:flex;
  align-items:center;
  gap:calc(4 * var(--u))
}
.values .icon {
  width:calc(6 * var(--u));
  height:calc(11 * var(--u));
  color:#405b40
}
.site-footer {
  position:relative;
  height:calc(116 * var(--u));
  color:#e0e5d4
}
.footer__landscape {
  position:absolute;
  left:0;
  top:calc(-12 * var(--u));
  width:100%;
  height:calc(128 * var(--u));
  z-index:0;
  pointer-events:none
}
.brand--footer {
  left:calc(25 * var(--u));
  top:calc(23 * var(--u));
  transform:scale(.88);
  transform-origin:top left
}
.brand--footer .brand__mark {
  filter:brightness(0) invert(.91)
}
.footer-nav {
  position:absolute;
  left:calc(195 * var(--u));
  top:calc(44 * var(--u));
  display:flex;
  gap:calc(13 * var(--u));
  font:calc(5.2 * var(--u))/1.3 Arial,sans-serif
}
.footer-contact {
  position:absolute;
  right:calc(26 * var(--u));
  top:calc(35 * var(--u));
  text-align:right;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:calc(5 * var(--u))
}
.social-icons {
  display:flex;
  gap:calc(5 * var(--u))
}
.social-icons .icon {
  width:calc(8 * var(--u));
  height:calc(8 * var(--u));
  stroke-width:1.8
}
.footer-contact p {
  font-size:calc(5.2 * var(--u));
  color:#d4dac9
}
.copyright {
  position:absolute;
  left:calc(25 * var(--u));
  bottom:calc(12 * var(--u));
  font-size:calc(4.7 * var(--u));
  color:#b7c0ac
}
.legal {
  position:absolute;
  right:calc(26 * var(--u));
  bottom:calc(12 * var(--u));
  display:flex;
  gap:calc(6 * var(--u));
  font-size:calc(4.7 * var(--u));
  color:#b7c0ac
}
@media(min-width:1680px) {
  :root {
    --u:3.236994px
  }
}
@media(min-width:768px) and (max-width:1023px) {
  .site-header {
    height:115px
  }
  .brand {
    top:16px;
    left:28px
  }
  .navigation {
    left:auto;
    right:28px;
    top:74px;
    font-size:12px;
    gap:24px
  }
  .navigation a {
    min-height:30px
  }
  .header-contact {
    top:13px;
    right:28px;
    gap:8px
  }
  .location {
    font-size:11px
  }
  .button--small {
    height:32px;
    font-size:12px
  }
  .hero {
    height:calc(215 * var(--u))
  }
  .services {
    height:auto;
    padding:24px 0 30px
  }
  .services__heading {
    height:125px;
    margin:0 40px
  }
  .services h2 {
    font-size:31px
  }
  .eyebrow {
    font-size:9px
  }
  .services__intro {
    font-size:13px;
    width:40%;
    left:auto;
    right:0;
    top:17px
  }
  .services__all {
    top:92px;
    font-size:12px
  }
  .service-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
    margin:0 40px
  }
  .service-card>img {
    height:auto;
    aspect-ratio:113/87
  }
  .service-card__copy {
    padding:14px 18px 20px
  }
  .service-card h3 {
    font-size:22px
  }
  .service-card p {
    font-size:16px
  }
  .project__copy>p:not(.eyebrow) {
    font-size:12px
  }
  .project .button {
    font-size:12px;
    height:36px
  }
  .project__copy {
    top:calc(33 * var(--u))
  }
  .about {
    height:calc(180 * var(--u))
  }
  .about__description {
    font-size:13px
  }
  .desktop-break {
    display:none
  }
  .values {
    flex-wrap:wrap;
    gap:10px;
    font-size:10px;
    justify-content:flex-start
  }
  .values li {
    width:46%
  }
  .about .button {
    height:36px;
    font-size:12px
  }
  .footer-nav {
    font-size:10px;
    gap:15px
  }
  .footer-contact p,.copyright,.legal {
    font-size:9px
  }
}
@media(max-width:767px) {
  :root {
    --u:1px
  }
  .site-shell {
    width:100%
  }
  .site-header {
    height:102px;
    background:var(--paper);
    display:flex;
    align-items:center;
    padding:16px 24px
  }
  .brand {
    left:24px;
    top:17px;
    width:205px;
    height:65px
  }
  .brand__mark {
    width:57px;
    height:56px;
    left:-3px;
    top:-2px
  }
  .brand__name {
    left:58px;
    top:9px;
    font-size:16px;
    letter-spacing:3.1px
  }
  .brand__tagline {
    top:53px;
    left:3px;
    font-size:5.6px;
    letter-spacing:1.4px
  }
  .header-contact {
    display:none
  }
  .menu-toggle {
    display:flex;
    position:absolute;
    right:18px;
    top:27px;
    width:48px;
    height:48px;
    border:1px solid #cad0c0;
    border-radius:50%;
    background:transparent;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    color:var(--forest);
    cursor:pointer
  }
  .menu-toggle span {
    display:block;
    width:20px;
    height:1.5px;
    background:currentColor;
    transition:transform 180ms,opacity 180ms
  }
  .menu-toggle[aria-expanded=true] span:nth-child(1) {
    transform:translateY(6.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span:nth-child(2) {
    opacity:0
  }
  .menu-toggle[aria-expanded=true] span:nth-child(3) {
    transform:translateY(-6.5px) rotate(-45deg)
  }
  .navigation {
    display:none;
    position:absolute;
    top:91px;
    left:18px;
    right:18px;
    padding:16px 24px;
    border:1px solid #d4d9cc;
    background:var(--paper);
    border-radius:18px;
    box-shadow:0 14px 25px #203d2a15;
    font-size:16px
  }
  .navigation.is-open {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0
  }
  .navigation a {
    padding:14px 4px;
    min-height:48px
  }
  .navigation a:after {
    right:auto;
    width:30px;
    bottom:8px
  }
  .eyebrow {
    font-size:9px;
    line-height:1.5;
    letter-spacing:1.5px
  }
  .hero {
    height:auto;
    display:flex;
    flex-direction:column;
    padding-top:22px;
    background:#f7f6f2
  }
  .hero:after {
    height:60px
  }
  .hero__copy {
    position:relative;
    inset:auto;
    padding:0 26px
  }
  .hero h1 {
    font-size:clamp(34px,6.25vw,46px);
    line-height:1.03;
    letter-spacing:-1px;
    margin-top:12px
  }
  .hero__description {
    font-size:16px;
    line-height:1.5;
    margin-top:18px;
    max-width:490px
  }
  .desktop-break {
    display:none
  }
  .button {
    height:46px;
    padding:0 23px;
    font-size:15px;
    gap:10px
  }
  .button .icon {
    width:15px;
    height:15px
  }
  .hero .button {
    margin-top:22px
  }
  .hero__promise {
    margin-top:18px;
    font-size:8px;
    letter-spacing:1.2px;
    gap:10px
  }
  .hero__promise .icon {
    width:19px;
    height:20px
  }
  .hero__image {
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    margin-top:25px;
    max-width:100%;
    z-index:1;
    align-self:flex-end
  }
  .hero__leaf-left {
    width:50px;
    height:95px;
    left:-32px;
    top:9px
  }
  .hero__leaf-right {
    width:95px;
    height:135px;
    left:auto;
    right:4px;
    top:210px;
    z-index:0
  }
  .services {
    height:auto;
    padding:30px 24px 40px
  }
  .services__heading {
    height:auto;
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:17px
  }
  .services h2 {
    font-size:34px;
    line-height:1.03;
    letter-spacing:-.7px;
    margin-top:9px
  }
  .services__intro {
    position:static;
    width:auto;
    font-size:16px;
    line-height:1.5;
    max-width:500px
  }
  .services__all {
    position:static;
    margin-bottom:22px;
    font-size:14px;
    min-height:44px;
    padding:10px 0;
    gap:8px
  }
  .text-link .icon {
    width:13px;
    height:13px
  }
  .service-grid {
    margin:0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 16px
  }
  .service-card {
    border-radius:9px
  }
  .service-card>img {
    height:auto;
    aspect-ratio:113/87;
    border-radius:9px 9px 25px 0
  }
  .service-card__copy {
    padding:14px 16px 20px;
    min-height:95px
  }
  .service-card h3 {
    font-size:23px;
    line-height:1.3
  }
  .service-card p {
    font-size:16px;
    line-height:1.45;
    margin-top:3px
  }
  .service-card p br {
    display:none
  }
  .project {
    height:auto;
    padding:49px 24px 56px;
    background:#293f31;
    display:flex;
    flex-direction:column;
    gap:29px
  }
  .project__shape {
    top:-19px;
    height:calc(100% + 38px)
  }
  .project__photos {
    position:relative;
    inset:auto;
    width:100%;
    gap:8px
  }
  .project__photos img {
    height:auto;
    aspect-ratio:131/126
  }
  .project__photos figure:first-child img {
    border-radius:14px 0 0 0
  }
  .project__photos figure:last-child img {
    border-radius:0 45px 0 0
  }
  .project__photos figcaption {
    left:6.1%;
    bottom:6.3%;
    font-size:12px;
    min-width:21%;
    padding:5px 8px
  }
  .project__copy {
    position:relative;
    inset:auto;
    width:100%;
    z-index:1
  }
  .project .eyebrow {
    font-size:9px;
    letter-spacing:1.5px
  }
  .project h2 {
    font-size:32px;
    line-height:1.06;
    margin-top:11px
  }
  .project__copy>p:not(.eyebrow) {
    font-size:15px;
    line-height:1.5;
    max-width:420px;
    margin-top:16px
  }
  .project .button {
    font-size:14px;
    height:46px;
    margin-top:22px;
    padding:0 23px
  }
  .project__branch {
    width:100px;
    height:165px;
    top:auto;
    bottom:25px;
    right:-15px;
    opacity:.18
  }
  .about {
    height:auto;
    display:flex;
    flex-direction:column;
    padding-top:20px
  }
  .about__image {
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    max-width:100%
  }
  .about__copy {
    position:relative;
    inset:auto;
    width:auto;
    padding:30px 24px 42px
  }
  .about .eyebrow {
    font-size:9px;
    letter-spacing:1.2px
  }
  .about h2 {
    font-size:30px;
    line-height:1.08;
    margin-top:11px;
    letter-spacing:-.5px
  }
  .about__description {
    font-size:16px;
    line-height:1.5;
    margin-top:18px
  }
  .about .button {
    height:46px;
    font-size:15px;
    margin-top:23px;
    padding:0 23px
  }
  .values {
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:18px 10px;
    margin-top:26px;
    font-size:12px;
    white-space:normal
  }
  .values li {
    width:calc(50% - 5px);
    gap:8px
  }
  .values .icon {
    width:13px;
    height:22px
  }
  .site-footer {
    height:auto;
    min-height:340px;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:46px 24px 24px;
    gap:25px;
    background:#263c2e
  }
  .footer__landscape {
    top:-15px;
    height:calc(100% + 15px)
  }
  .brand--footer {
    position:relative;
    inset:auto;
    width:205px;
    height:65px;
    transform:none
  }
  .footer-nav {
    position:relative;
    inset:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 20px;
    font-size:13px
  }
  .footer-nav a {
    display:flex;
    align-items:center;
    min-height:44px;
    padding:8px 0
  }
  .footer-contact {
    position:relative;
    inset:auto;
    align-items:center;
    gap:10px;
    text-align:center
  }
  .social-icons {
    gap:13px
  }
  .social-icons .icon {
    width:19px;
    height:19px
  }
  .location {
    font-size:13px;
    gap:6px
  }
  .location .icon {
    width:10px;
    height:14px
  }
  .footer-contact p {
    font-size:12px
  }
  .copyright {
    position:relative;
    inset:auto;
    font-size:10px;
    text-align:center
  }
  .legal {
    position:relative;
    inset:auto;
    font-size:10px;
    gap:12px;
    margin-top:-10px
  }
}
@media(max-width:479px) {
  .service-grid {
    grid-template-columns:1fr
  }
  .project__photos {
    grid-template-columns:1fr;
    gap:16px
  }
  .project__photos figure:first-child img {
    border-radius:16px 40px 0 0
  }
  .project__photos figure:last-child img {
    border-radius:16px 40px 0 0
  }
  .project__photos figcaption {
    font-size:14px
  }
  .service-card__copy {
    min-height:auto
  }
  .hero h1 {
    font-size:34px
  }
  .about h2 {
    font-size:28px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    transition:none!important;
    scroll-behavior:auto!important
  }
}
.button {
  position:relative
}
.button:before,.navigation a:before,.footer-nav a:before {
  content:"";
  position:absolute;
  inset:50% 0 auto;
  height:max(100%,44px);
  transform:translateY(-50%)
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header {
    background: var(--paper);
  }
  .hero {
    height: calc(245 * var(--u));
  }
  .hero__copy {
    width: 40%;
  }
  .hero__description {
    font-size: 14px;
    line-height: 1.4;
  }
  .hero__image {
    top: 0;
    width: calc(270 * var(--u));
    height: auto;
  }
}

.site-header {
  display:grid;
  grid-template-columns:minmax(300px,.9fr) minmax(400px,auto) minmax(236px,.65fr);
  grid-template-areas:"brand navigation contact";
  align-items:center;
  column-gap:clamp(24px,2.25vw,38px);
  height:auto;
  min-height:clamp(168px,calc(64 * var(--u)),208px);
  padding:18px clamp(28px,3.35vw,56px);
  background:var(--paper)
}
.site-header>.brand {
  grid-area:brand;
  position:relative;
  inset:auto;
  width:clamp(300px,calc(132 * var(--u)),428px);
  height:clamp(92px,calc(40 * var(--u)),130px)
}
.site-header>.navigation {
  grid-area:navigation;
  position:relative;
  inset:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,1.3vw,22px);
  min-width:0;
  font:clamp(14px,1.02vw,16px)/1.35 Arial,sans-serif;
  white-space:nowrap;
  transform:translateY(clamp(12px,.9vw,15px))
}
.navigation>a,.navigation .nav-trigger {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  justify-content:center;
  white-space:nowrap
}
.navigation .nav-group {
  position:relative
}
.navigation .nav-trigger {
  gap:5px;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  font:inherit
}
.nav-trigger svg {
  width:12px;
  height:12px;
  transition:transform 180ms
}
.nav-group.is-open .nav-trigger svg {
  transform:rotate(180deg)
}
.nav-menu {
  display:none;
  position:absolute;
  top:calc(100% + 2px);
  left:-18px;
  z-index:30;
  width:220px;
  padding:10px;
  border:1px solid #d9ddd3;
  border-radius:10px;
  background:#fff;
  box-shadow:0 16px 32px rgba(23,40,28,.14);
  white-space:normal
}
.navigation .nav-group:last-of-type .nav-menu {
  right:0;
  left:auto
}
.nav-group.is-open .nav-menu {
  display:grid
}
.nav-menu a {
  display:flex;
  min-height:44px;
  align-items:center;
  padding:9px 12px;
  font-size:13px;
  line-height:1.25
}
.nav-menu a:after {
  display:none
}
.header-contact {
  grid-area:contact;
  position:relative;
  inset:auto;
  display:grid;
  justify-items:end;
  gap:8px;
  min-width:0
}
.header-contact .location {
  font-size:clamp(13px,.96vw,16px);
  white-space:nowrap
}
.header-contact .button--small {
  height:clamp(46px,calc(16 * var(--u)),52px);
  padding-inline:clamp(20px,1.55vw,26px);
  font-size:clamp(14px,.96vw,16px);
  white-space:nowrap
}
.site-footer {
  display:grid;
  grid-template-columns:minmax(300px,.85fr) minmax(410px,1.2fr) minmax(236px,.65fr);
  grid-template-areas:"footer-brand footer-navigation footer-contact" "copyright copyright legal";
  align-items:start;
  column-gap:clamp(24px,2.25vw,38px);
  row-gap:32px;
  height:auto;
  min-height:clamp(340px,calc(116 * var(--u)),376px);
  padding:clamp(76px,6vw,98px) clamp(28px,3.35vw,56px) 34px;
  background:transparent
}
.footer__landscape {
  top:-38px;
  height:calc(100% + 38px)
}
.site-footer>.brand--footer {
  grid-area:footer-brand;
  position:relative;
  inset:auto;
  width:clamp(300px,calc(132 * var(--u)),428px);
  height:clamp(92px,calc(40 * var(--u)),130px);
  transform:scale(.88);
  transform-origin:top left
}
.site-footer>.footer-nav {
  grid-area:footer-navigation;
  position:relative;
  inset:auto;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(max-content,1fr));
  align-items:start;
  justify-content:stretch;
  gap:2px clamp(16px,1.4vw,24px);
  row-gap:2px!important;
  max-width:none;
  font:13px/1.3 Arial,sans-serif
}
.footer-nav a {
  display:flex;
  min-height:44px;
  align-items:center;
  padding:7px 0;
  white-space:nowrap
}
.footer-contact {
  grid-area:footer-contact;
  position:relative;
  inset:auto;
  z-index:1;
  display:grid;
  justify-items:end;
  gap:10px;
  min-width:0;
  text-align:right
}
.footer-contact .location {
  font-size:13px;
  white-space:nowrap
}
.footer-contact p {
  font-size:13px
}
.copyright {
  grid-area:copyright;
  position:relative;
  inset:auto;
  z-index:1;
  align-self:end;
  font-size:12px
}
.legal {
  grid-area:legal;
  position:relative;
  inset:auto;
  z-index:1;
  align-self:end;
  justify-self:end;
  gap:18px;
  font-size:12px;
  white-space:nowrap
}

@media(min-width:768px) and (max-width:1199px) {
  .site-header {
    grid-template-columns:minmax(230px,1fr) auto;
    grid-template-areas:"brand contact" "navigation navigation";
    column-gap:24px;
    row-gap:8px;
    min-height:0;
    padding:14px clamp(24px,3.5vw,38px) 12px
  }
  .site-header>.brand {
    width:clamp(230px,calc(132 * var(--u)),305px);
    height:clamp(70px,calc(40 * var(--u)),93px)
  }
  .site-header>.navigation {
    width:100%;
    justify-content:center;
    gap:clamp(18px,3vw,34px);
    border-top:1px solid #dfe2da;
    font-size:14px;
    transform:none
  }
  .navigation>a,.navigation .nav-trigger {
    min-height:46px
  }
  .header-contact {
    align-self:center
  }
  .header-contact .button--small {
    height:46px;
    font-size:14px
  }
  .site-footer {
    grid-template-columns:minmax(270px,1fr) auto;
    grid-template-areas:"footer-brand footer-contact" "footer-navigation footer-navigation" "copyright legal";
    column-gap:24px;
    row-gap:20px;
    min-height:420px;
    padding:76px clamp(24px,3.5vw,38px) 30px
  }
  .site-footer>.brand--footer {
    width:clamp(260px,calc(132 * var(--u)),305px);
    height:clamp(79px,calc(40 * var(--u)),93px)
  }
  .site-footer>.footer-nav {
    width:100%;
    grid-template-columns:repeat(3,minmax(0,1fr));
    border-top:1px solid rgba(224,229,212,.22);
    border-bottom:1px solid rgba(224,229,212,.22);
    padding-block:6px;
    row-gap:2px!important
  }
}

@media(max-width:767px) {
  .site-header {
    display:flex;
    height:102px;
    min-height:102px;
    padding:16px 24px
  }
  .site-header>.brand {
    position:absolute;
    top:17px;
    left:24px;
    width:205px;
    height:65px
  }
  .site-header>.header-contact {
    display:none
  }
  .site-header>.navigation {
    display:none;
    position:absolute;
    top:91px;
    right:18px;
    left:18px;
    z-index:40;
    width:auto;
    max-height:calc(100vh - 109px);
    max-height:calc(100dvh - 109px);
    padding:14px 20px;
    overflow-y:auto;
    overscroll-behavior:contain;
    border:1px solid #d4d9cc;
    border-radius:18px;
    background:var(--paper);
    box-shadow:0 14px 25px #203d2a15;
    font-size:16px;
    white-space:normal;
    transform:none
  }
  .site-header>.navigation.is-open {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0
  }
  .navigation>a {
    justify-content:flex-start;
    min-height:48px;
    padding:12px 4px;
    font-size:16px
  }
  .navigation .nav-group {
    width:100%
  }
  .navigation .nav-trigger {
    width:100%;
    min-height:48px;
    justify-content:space-between;
    padding:12px 4px;
    font-size:16px
  }
  .nav-menu,.navigation .nav-group:last-of-type .nav-menu {
    position:static;
    width:100%;
    margin:0;
    padding:4px 0 8px;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none
  }
  .nav-menu a {
    min-height:44px;
    padding:9px 18px;
    font-size:14px
  }
  .site-footer {
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:"footer-brand" "footer-navigation" "footer-contact" "copyright" "legal";
    justify-items:center;
    row-gap:18px;
    min-height:0;
    padding:66px 24px 26px;
    background:transparent;
    text-align:center
  }
  .footer__landscape {
    top:-24px;
    height:calc(100% + 24px)
  }
  .site-footer>.brand--footer {
    width:205px;
    height:65px;
    transform:none
  }
  .site-footer>.footer-nav {
    width:min(100%,420px);
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0 8px;
    padding:4px 0;
    border-top:1px solid rgba(224,229,212,.22);
    border-bottom:1px solid rgba(224,229,212,.22);
    font-size:13px;
    row-gap:0!important
  }
  .site-footer>.footer-nav a {
    min-width:0;
    justify-content:center;
    padding:7px 2px;
    white-space:normal
  }
  .footer-contact {
    justify-items:center;
    text-align:center
  }
  .copyright {
    max-width:320px;
    font-size:11px;
    text-align:center
  }
  .legal {
    justify-self:center;
    gap:16px;
    margin:0;
    font-size:11px
  }
}

@media(max-width:389px) {
  .site-header {
    padding-inline:18px
  }
  .site-header>.brand {
    left:18px;
    width:190px;
    transform:scale(.93);
    transform-origin:left center
  }
  .menu-toggle {
    right:14px
  }
  .site-footer {
    padding-inline:18px
  }
  .site-footer>.footer-nav {
    column-gap:3px;
    font-size:13px
  }
}