/* Base */
:root {
  font-family: "Noto Serif JP","Yu Mincho",serif;
  font-size: 16px;
  color: #263128;
  background: #fafaf7;
  --green: #344b3b;
  --muted: #637066;
  --line: #d8ddd5
}
* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px
}
body {
  margin: 0
}
a {
  color: inherit;
  text-decoration: none
}
button {
  font: inherit;
  cursor: pointer
}
img {
  display: block;
  max-width: 100%
}
h1,h2,h3,p {
  margin: 0
}
h2 {
  font-size: clamp(1.8rem,3vw,2.8rem);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .07em
}
h3 {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.6
}
p {
  line-height: 2
}
small {
  font-size: .875rem
}
/* Header and navigation */
header {
  height: 96px;
  padding: 0 4%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(250,250,247,.97);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line)
}
.brand {
  font-size: 2rem;
  letter-spacing: .12em
}
.brand small {
  display: block;
  font-size: .75rem;
  margin-top: 3px
}
nav {
  display: flex;
  gap: 25px;
  align-items: center;
  font-size: .875rem
}
.nav-cta {
  border: 1px solid var(--green);
  padding: 15px 20px
}
#menu {
  display: none
}
/* Hero */
.hero {
  position: relative;
  min-height: 660px;
  height: calc(100svh - 96px);
  max-height: 900px;
  overflow: hidden
}
.hero-photo,.wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}
.wash {
  background: linear-gradient(90deg,rgba(250,250,247,.95),rgba(250,250,247,.55) 40%,transparent 72%)
}
.hero-copy {
  position: relative;
  padding: 100px 7% 120px
}
.hero-copy small,.heading>small {
  display: block;
  font-size: .875rem;
  letter-spacing: .16em;
  color: var(--muted);
  margin-bottom: 24px
}
.hero h1 {
  font-size: clamp(2.5rem,4.8vw,4.7rem);
  font-weight: 400;
  letter-spacing: .09em;
  line-height: 1.6
}
.hero-copy p {
  font-size: 1.15rem;
  margin: 24px 0 36px
}
.button {
  background: var(--green);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  padding: 21px 28px;
  transition: background .2s
}
.button:hover {
  background: #213b2a
}
.hero-foot {
  position: absolute;
  bottom: 30px;
  left: 7%;
  right: 7%;
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  letter-spacing: .1em
}
.hero-foot a {
  background: #fafaf7c9;
  padding: 5px 10px
}
/* Shared section layout */
.section {
  padding: 95px max(6%,calc((100% - 1250px)/2))
}
.heading {
  text-align: center;
  margin-bottom: 50px
}
.heading p {
  margin-top: 24px;
  color: var(--muted)
}
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px
}
.services img {
  aspect-ratio: 1.5;
  object-fit: cover;
  width: 100%
}
.services small {
  display: block;
  color: var(--muted);
  margin-top: 22px
}
.services h3 {
  font-size: 1.6rem;
  margin: 7px 0 12px;
  display: flex;
  justify-content: space-between
}
.services p {
  color: var(--muted)
}
/* Foundation work */
.foundation {
  background: #f0f2ed
}
.foundation-banner {
  position: relative;
  min-height: 470px
}
.foundation-banner>img {
  position: absolute;
  width: 65%;
  height: 100%;
  right: 0;
  object-fit: cover
}
.foundation-banner>div {
  position: relative;
  padding: 70px 7%;
  width: 70%;
  background: linear-gradient(90deg,#f0f2ed 60%,transparent)
}
.foundation-banner .heading {
  text-align: left;
  margin: 0
}
.compact {
  padding-top: 55px;
  padding-bottom: 65px
}
.three {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 34px
}
.three article>img {
  width: 100%;
  aspect-ratio: 1.5;
  object-fit: cover
}
.three h3 {
  display: flex;
  gap: 20px;
  align-items: center;
  margin: 20px 0 12px
}
em {
  font-style: normal;
  font-size: 2.6rem;
  color: var(--green);
  font-weight: 400
}
.three p {
  color: var(--muted)
}
.icons {
  display: flex;
  gap: 15px;
  margin-top: 18px
}
.icon {
  width: 80px;
  height: 80px;
  object-fit: contain
}
/* Exterior work */
.four {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 24px
}
.four article>img:not(.icon) {
  aspect-ratio: 1;
  width: 100%;
  object-fit: cover
}
.four .icon {
  margin: 22px 0 12px
}
.four h3 {
  font-size: 1.15rem
}
.four p {
  margin-top: 12px;
  color: var(--muted)
}
/* Values */
.values {
  background: #e9ede7;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center
}
.values-photo {
  position: relative;
  height: 610px
}
.values-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.values-photo p {
  position: absolute;
  bottom: 28px;
  left: 25px;
  right: 25px;
  color: white;
  font-size: 1.35rem;
  text-shadow: 0 1px 8px black
}
.values .heading {
  text-align: left;
  margin-bottom: 30px
}
.values article {
  display: flex;
  gap: 23px;
  border-top: 1px solid #bac4b8;
  padding: 22px 0
}
.values article em {
  font-size: 1.4rem
}
.values article p {
  margin-top: 8px;
  color: var(--muted)
}
/* Project flow */
.flow-head {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: 45px;
  margin-bottom: 50px
}
.flow-head .heading {
  text-align: left;
  margin: 0
}
.flow-head>img {
  aspect-ratio: 1.8;
  object-fit: cover;
  width: 100%
}
.flow-list {
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 28px
}
.flow-list li {
  border-top: 1px solid var(--green);
  padding-top: 25px
}
.flow-list h3 {
  margin: 22px 0 15px;
  font-size: 1.2rem
}
.flow-list p {
  color: var(--muted)
}
.flow-end {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 42px;
  color: var(--muted)
}
/* Before and after gallery */
.works {
  background: #f0f2ed
}
.work-image {
  border: 0;
  padding: 0;
  position: relative;
  display: block;
  width: 100%;
  background: transparent
}
.work-image img {
  width: 100%;
  aspect-ratio: 1.776;
  object-fit: contain
}
.work-image span {
  position: absolute;
  right: 0;
  bottom: 0;
  background: #232d27dd;
  color: white;
  padding: 8px 15px;
  font-size: .75rem
}
.works h3 {
  margin: 18px 0 5px
}
.works article p {
  color: var(--muted)
}
.disclaimer {
  font-size: .75rem;
  color: var(--muted);
  margin-top: 35px;
  text-align: center
}
/* Contact and business information */
.landscape {
  height: 320px;
  position: relative
}
.landscape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%
}
.landscape p {
  position: absolute;
  top: 65px;
  left: 7%;
  color: white;
  font-size: 1.6rem;
  letter-spacing: .15em
}
.contact {
  background: #232c25;
  color: #f4f5ef
}
.contact-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px
}
.contact .heading {
  text-align: left;
  margin-bottom: 30px
}
.contact .heading>small {
  color: #b6c5b7
}
.contact h2 {
  font-size: 2rem
}
dl>div {
  display: grid;
  grid-template-columns: 100px 1fr;
  border-top: 1px solid #59645a;
  padding: 18px 0;
  line-height: 1.9
}
dd {
  margin: 0
}
.contact aside {
  background: #2e3e31;
  border: 1px solid #6d7c6b;
  text-align: center;
  padding: 35px 25px;
  align-self: center
}
.envelope {
  font-size: 2.4rem
}
.contact aside h3 {
  font-size: 1.7rem;
  margin: 10px 0 22px
}
.light {
  background: #f0f2e9;
  color: #263128;
  margin-top: 28px;
  width: 100%;
  gap: 12px;
  padding: 18px
}
.light:hover {
  background: #dce4d7
}
.email {
  display: block;
  overflow-wrap: anywhere;
  font-size: .875rem;
  margin: 20px 0 8px
}
.contact aside small {
  font-size: .75rem;
  color: #cbd2c8
}
/* Footer and accessibility */
footer {
  background: #1b221d;
  color: #d9dfd6;
  text-align: center;
  padding: 45px 6%
}
footer p {
  font-size: .875rem;
  margin: 12px 0
}
footer small,footer .disclaimer {
  font-size: .75rem;
  color: #abb6aa
}
.skip {
  position: fixed;
  top: -100px;
  background: white;
  z-index: 100;
  padding: 15px
}
.skip:focus {
  top: 0
}
:focus-visible {
  outline: 3px solid #a78240;
  outline-offset: 5px
}
/* Enlarged gallery dialog */
dialog {
  border: 0;
  padding: 25px;
  background: #fafaf7;
  max-width: 1200px;
  width: 95%;
  max-height: 95svh
}
dialog::backdrop {
  background: #000c
}
.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px
}
.dialog-head h2 {
  font-size: 1.3rem
}
#close {
  border: 1px solid var(--line);
  background: none;
  padding: 8px 15px
}
#gallery-image {
  max-height: 75svh;
  width: 100%;
  object-fit: contain
}
dialog>p {
  font-size: .75rem;
  color: var(--muted);
  margin-top: 10px
}
/* Responsive layout */
@media(max-width:1050px) {
  nav {
    gap: 14px;
    font-size: .8125rem
  }
  header {
    padding: 0 3%
  }
  .brand {
    font-size: 1.6rem
  }
  .nav-cta {
    padding: 12px
  }
  .four {
    grid-template-columns: repeat(2,1fr)
  }
  .values {
    gap: 35px
  }
  .contact-inner {
    gap: 30px
  }
}
@media(max-width:760px) {
  html {
    scroll-padding-top: 78px
  }
  header {
    height: 78px;
    padding: 0 6%
  }
  .brand {
    font-size: 1.5rem
  }
  #menu {
    display: block;
    border: 0;
    background: none;
    font-size: .875rem;
    padding: 10px 0
  }
  nav {
    display: none;
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    background: #fafaf7;
    padding: 25px 6%;
    border-bottom: 1px solid var(--line);
    font-size: 1rem
  }
  nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0
  }
  nav a {
    padding: 15px 0
  }
  .nav-cta {
    text-align: center;
    margin-top: 10px
  }
  .hero {
    height: 720px;
    min-height: 600px;
    max-height: calc(100svh - 78px)
  }
  .hero-photo {
    object-position: 62% center
  }
  .wash {
    background: linear-gradient(180deg,#fafaf7ef,#fafaf7cc 35%,#fafaf71f 85%)
  }
  .hero-copy {
    padding: 55px 7% 100px
  }
  .hero-copy small {
    font-size: .75rem;
    letter-spacing: .07em
  }
  .hero h1 {
    font-size: clamp(2rem,7.6vw,2.6rem);
    letter-spacing: .035em
  }
  .hero-copy p {
    font-size: 1rem;
    margin: 20px 0 28px
  }
  .button {
    padding: 16px 22px;
    gap: 25px
  }
  .hero-foot {
    bottom: 18px;
    gap: 15px;
    flex-wrap: wrap
  }
  .section {
    padding: 65px 6%
  }
  .heading {
    margin-bottom: 35px
  }
  .heading p {
    margin-top: 20px
  }
  .heading>small {
    font-size: .75rem;
    margin-bottom: 18px
  }
  h2 {
    font-size: 1.8rem;
    letter-spacing: .03em
  }
  .two,.three,.values,.flow-head,.contact-inner {
    grid-template-columns: 1fr
  }
  .two {
    gap: 35px
  }
  .services h3 {
    font-size: 1.4rem
  }
  .foundation-banner {
    padding-top: 230px
  }
  .foundation-banner>img {
    width: 100%;
    height: 290px;
    top: 0
  }
  .foundation-banner>div {
    padding: 40px 6%;
    width: 100%;
    background: linear-gradient(0deg,#f0f2ed 85%,transparent)
  }
  .three {
    gap: 40px
  }
  .three article>img {
    aspect-ratio: 1.65
  }
  .icons .icon {
    width: 55px;
    height: 55px
  }
  .four {
    gap: 35px 18px
  }
  .four article>img:not(.icon) {
    aspect-ratio: .9
  }
  .four h3 {
    font-size: 1rem
  }
  .four .icon {
    height: 65px;
    width: 75px
  }
  .values-photo {
    height: 350px
  }
  .values article {
    padding: 20px 0
  }
  .flow-head {
    gap: 25px
  }
  .flow-list {
    grid-template-columns: 1fr 1fr;
    gap: 30px 20px
  }
  .flow-list h3 {
    font-size: 1.05rem
  }
  .flow-end {
    gap: 15px
  }
  .flow-end p {
    font-size: .875rem
  }
  .flow-end .icon {
    width: 50px;
    height: 50px
  }
  .landscape {
    height: 260px
  }
  .landscape p {
    top: 55px;
    font-size: 1.35rem
  }
  .contact-inner {
    gap: 35px
  }
  .contact h2 {
    font-size: 1.6rem
  }
  .contact aside {
    padding: 30px 18px
  }
  .dialog-head h2 {
    font-size: 1rem
  }
  dialog {
    padding: 15px
  }
  #close {
    white-space: nowrap;
    font-size: .875rem
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }
  * {
    transition: none!important
  }
}