:root {
  --ink: #23352e;
  --button: #783e2b;
  --paper: #f8f3e9;
  --sand: #eae0d0;
  --dark: #192b24;
  --accent: #d8a68d;
  --gutter: clamp(1.2rem, 5vw, 6.5rem);
}

body { background: var(--paper); }
.wrap { width: min(100% - 2 * var(--gutter), 83rem); }
.section-space { padding-block: clamp(4rem, 8vw, 9rem); }

.site-bar { background: var(--dark); box-shadow: 0 2px 12px #15251e38; }
.site-bar nav { justify-content: flex-end; min-height: 4rem; }
.site-bar .wordmark {
  margin-right: auto;
  padding-inline: 0;
  font: 400 clamp(1.6rem, 2.7vw, 2.15rem)/1 var(--display-font);
  letter-spacing: -.06em;
}
.wordmark span { color: var(--accent); }
.site-bar a { font-weight: 400; font-size: .88rem; }
.site-bar a:hover { color: #f2cbb8; }

.hero {
  justify-content: flex-end;
  min-height: clamp(36rem, 84svh, 62rem);
  padding: 5rem var(--gutter) clamp(3.5rem, 9vw, 9rem);
  background:
    linear-gradient(90deg, #101a14bb, #101a141a 90%),
    linear-gradient(0deg, #101a147a, transparent 70%),
    url("images/pool-hero.jpg") center 54% / cover no-repeat #342f25;
}
.brand {
  padding: 0 0 .55rem;
  border-bottom: 1px solid #f6e7d6a3;
  border-radius: 0;
  background: transparent;
  color: #fff4e3;
  font-size: clamp(.78rem, 1.3vw, 1.05rem);
  letter-spacing: .09em;
}
.hero h1 {
  margin: .34em 0 0;
  font-size: clamp(2.85rem, 6.1vw, 7.4rem);
  letter-spacing: -.055em;
  text-shadow: 0 2px 18px #101a1480;
}
.button {
  min-inline-size: 0;
  padding: .8em 1.4em;
  border: 1px solid transparent;
  border-radius: 0;
  font-size: .9rem;
}
.button:hover { background: #5e2e20; }
.hero-button {
  align-self: flex-start;
  margin-top: clamp(1.9rem, 4vw, 3.4rem);
  border-color: #fff4e3;
  background: var(--paper);
  color: var(--dark);
}
.hero-button:hover { background: var(--dark); color: white; }

.about {
  min-height: 0;
  padding: clamp(4.5rem, 11vw, 11rem) var(--gutter);
}
.about h2, .center-panel h2, .services h2, .services h3,
.collection h2, .biography h2, .contact h2 {
  font-family: var(--display-font);
  font-weight: 400;
  letter-spacing: -.04em;
  text-transform: none;
  text-wrap: balance;
}
.about h2 { font-size: clamp(1.9rem, 4vw, 4rem); }
.about h2 strong { color: var(--button); font-weight: inherit; }
.about p { font-size: clamp(1rem, 1.6vw, 1.25rem); }
.about hr, .center-panel hr { width: 4.5rem; margin-block: 1.6rem; border-color: var(--button); }
.about .button { margin-top: 2rem; }

.home-collage {
  grid-template-columns: 1.02fr .85fr 1.15fr;
  gap: clamp(.45rem, 2.5vw, 2.5rem);
  align-items: start;
}
.home-collage > svg { margin-top: 18%; }
.home-collage > img { margin-top: 10%; }
.home-collage > svg, .home-collage img, .service-collage > * { border-radius: 0; }
.center-panel { padding-block: clamp(4rem, 8vw, 8rem); }
.center-panel h2 { font-size: clamp(2rem, 4.6vw, 4.5rem); }
.center-panel p { max-width: 57ch; font: 400 clamp(1rem, 1.65vw, 1.35rem)/1.65 "Open Sans", sans-serif; }
.center-panel .button { margin-top: 2rem; }
.gray { background: var(--sand); }

.services { color: var(--ink); font-size: clamp(1rem, 1.45vw, 1.26rem); }
.eyebrow {
  display: flex;
  gap: 1rem;
  align-items: center;
  color: var(--button);
  letter-spacing: .12em;
  font-size: .8rem;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: #aa79665e; }
.service-intro { align-items: center; }
.services h2, .services h3 { font-size: clamp(2rem, 4vw, 4rem); }
.service-intro h2 { text-align: left; }
.service-detail + .service-detail { margin-top: clamp(3rem, 8vw, 7rem); }
@media (min-width: 49rem) {
  .service-detail:nth-of-type(3) > .service-collage { grid-column: 2; grid-row: 1; }
  .service-detail:nth-of-type(3) > div:last-child { grid-column: 1; grid-row: 1; }
}
.partners { border-top: 1px solid #aa79665e; padding-top: clamp(2.75rem, 6vw, 5rem); }
.partner-grid { gap: clamp(1rem, 3vw, 3rem); margin-top: 2.5rem; }
.partner-grid > div { padding: 1.4rem; border: 1px solid #aa79665e; background: #fffaf2; }
.partner-grid h4 { color: var(--button); font-size: .87rem; letter-spacing: .1em; }

.collection-band { background: var(--dark); color: var(--paper); }
.collection h2 { max-width: 20ch; margin: 0 0 clamp(2.2rem, 6vw, 6rem); text-align: left; font-size: clamp(2.2rem, 6vw, 6rem); line-height: 1.07; }
.gallery-row { gap: clamp(.5rem, 2.2vw, 2rem); margin-bottom: clamp(1.5rem, 5vw, 5rem); }
.gallery-column > * { border-radius: 0; }
.gallery-end { color: #f2cbb8; font-size: clamp(.75rem, 1.5vw, 1rem); letter-spacing: .14em; }
.row-2, .row-5 { grid-template-columns: .85fr 1.25fr .85fr; }
.row-3, .row-7 { grid-template-columns: 1.15fr .85fr 1fr; }
.row-6::after { background: var(--accent); }

.biography h2, .contact h2 { font-size: clamp(2.35rem, 5.4vw, 5.5rem); line-height: 1.1; }
.biography p { font-size: clamp(1rem, 1.7vw, 1.43rem); }
.biography p + p { margin-top: .75rem; }
.biography > svg { border-radius: 48% 48% 0 0 / 36% 36% 0 0; }
.director { font-size: clamp(1rem, 2vw, 1.8rem); }
.director h3 { color: var(--button); }
.contact-band { background: #fffaf2; }
.contact-list li { border: 0; border-bottom: 1px solid #aa79665e; border-radius: 0; padding-inline: .3rem; }
.contact-list .icon { color: var(--button); }
.contact-details { margin-top: 1.65rem; }

@media (max-width: 48rem) {
  .hero { min-height: clamp(32rem, 76svh, 47rem); background-position: 54% center; }
  .hero h1 { font-size: clamp(2.65rem, 8.5vw, 4.2rem); }
  .gallery-row { gap: .4rem; }
}

@media (max-width: 42rem) {
  html { scroll-padding-top: 7.25rem; }
  .site-bar nav { width: 100%; justify-content: center; gap: 0 .18rem; padding: .35rem .4rem; }
  .site-bar .wordmark { flex-basis: 100%; margin-right: 0; padding-block: .2rem; text-align: center; }
  .site-bar a { padding: .25rem .35rem; font-size: .78rem; }
}