:root {
  --terracotta: #8b4633;
  --ochre: #eed8a3;
  --lavender: #e6dced;
  --rose: #ecd3cc;
}
.hero { background: #f6ebd1; }
.garden-note {
  position: absolute;
  bottom: 17%;
  left: 9%;
  z-index: -1;
  color: var(--terracotta);
  font: italic 1.65rem/1 var(--serif);
  transform: rotate(-7deg);
}
.garden-note::after {
  content: "";
  display: block;
  width: 59%;
  height: .45rem;
  margin: .15rem 0 0 30%;
  border-top: 1px solid currentColor;
  border-radius: 54% 61% 0 0;
  transform: rotate(-3deg);
}
.meaning {
  position: relative;
  gap: clamp(2rem, 7vw, 7rem);
  padding-block: clamp(4.5rem, 8vw, 8rem);
  grid-template-columns: .95fr 1.05fr;
}
.name-plate {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  isolation: isolate;
  width: min(100%, 370px);
  min-height: clamp(160px, 22vw, 320px);
}
.name-plate::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1% 3% 5% 6%;
  background: var(--cream);
  border: 1px solid #8f9c83;
  border-radius: 48% 53% 44% 45% / 44% 53% 47% 55%;
  transform: rotate(-9deg);
}
.name-plate .hebrew { font-size: clamp(4.3rem, 7vw, 7rem); }
.name-plate img {
  position: absolute;
  right: -5%;
  bottom: -13%;
  width: 29%;
  transform: rotate(22deg);
  mix-blend-mode: multiply;
  
}
.offerings { overflow: hidden; padding: clamp(4rem, 8vw, 8rem) clamp(1.35rem, 10vw, 10rem); }
.offerings .section-heading { text-align: left; position: relative; z-index: 1; }
.service-composition { max-width: 1080px; margin: clamp(2rem, 5vw, 4.5rem) auto 0; }
.offering {
  position: relative;
  isolation: isolate;
  min-height: 260px;
  display: flex;
  align-items: center;
  padding: clamp(2rem, 4.5vw, 4.7rem);
}
.offering h3 { font-size: clamp(2.8rem, 4.5vw, 4.7rem); line-height: .94; }
.offering p { max-width: 43ch; margin-top: 1rem; }
.offering img {
  position: absolute;
  height: 109%;
  max-width: 42%;
  object-fit: contain;
  mix-blend-mode: multiply;
  
  pointer-events: none;
}
.therapy {
  width: 70%;
  background: var(--rose);
  border-radius: 49% 7% 5% 14% / 15% 11% 6% 11%;
  margin-left: 8%;
}
.therapy .offering-copy { max-width: 74%; }
.therapy img { right: -5%; bottom: 2%; transform: rotate(13deg); }
.integration {
  justify-content: flex-end;
  width: 79%;
  margin: 2.7rem 0 0 auto;
  background: var(--lavender);
  border-radius: 43% 48% 6% 4% / 20% 11% 9% 6%;
}
.integration .offering-copy { max-width: 67%; }
.integration img { left: 2%; bottom: -4%; height: 118%; transform: rotate(-14deg); }
.navigation {
  width: 60%;
  margin: 2.5rem 0 0 1%;
  background: var(--ochre);
  border-radius: 5% 45% 7% 8% / 10% 28% 10% 8%;
}
.navigation .offering-copy { max-width: 75%; }
.navigation img { right: -14%; bottom: -7%; transform: rotate(17deg); }
.about {
  background: #edd9cf;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  position: relative;
  gap: clamp(2rem, 9vw, 9rem);
}
.portrait {
  margin: 0;
  position: relative;
  width: min(100%, 410px);
  justify-self: center;
  padding: .72rem;
  border: 1px solid var(--terracotta);
  border-radius: 49% 49% 2% 2% / 33% 33% 2% 2%;
  transform: rotate(-5deg);
}
.photo-surface { position: relative; isolation: isolate; display: grid; place-items: center; overflow: hidden; }
.portrait .photo-surface {
  aspect-ratio: 4 / 5;
  border-radius: inherit;
  background: #e2e6d6;
}
.placeholder-art {
  position: absolute;
  bottom: -25%;
  right: -4%;
  width: 47%;
  transform: rotate(23deg);
  
  mix-blend-mode: multiply;
  opacity: .64;
  z-index: -1;
}
.slot-label {
  display: block;
  max-width: 16ch;
  text-align: center;
  font: italic clamp(1.35rem, 2.75vw, 2.15rem)/1 var(--serif);
  padding: .65rem;
}
.portrait .slot-label { border-block: 1px solid #6e816d; }
.photo-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.founder-copy { padding-block: 1rem; }
.personal {
  background: #e6e9d9;
  padding: clamp(4rem, 8vw, 8rem) clamp(1.35rem, 12vw, 10rem);
}
.personal h2 { text-align: right; margin-right: 5%; }
.photo-album {
  margin-top: 1.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(.65rem, 2.8vw, 3rem);
}
.snapshot {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  background: var(--cream);
  padding: clamp(.35rem, .9vw, .8rem);
  padding-bottom: clamp(.57rem, 1.6vw, 1.65rem);
  box-shadow: 1px 4px 13px #3846302b;
}
.first { transform: rotate(-8deg) translateY(-8%); }
.second { transform: rotate(5deg) translateY(9%); }
.workspace { transform: rotate(-4deg) translateY(-3%); }
.snapshot .photo-surface { aspect-ratio: 5 / 4; }
.first .photo-surface { background: var(--rose); }
.second .photo-surface { background: var(--lavender); aspect-ratio: 4 / 5; }
.workspace .photo-surface { background: var(--ochre); }
.questions { background: var(--cream); }
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.contact::before {
  content: "";
  position: absolute;
  inset: 1.15rem;
  border: 1px solid #d4bc89;
  border-radius: 46% 46% 2% 2% / 8% 8% 5% 5%;
  opacity: .56;
  z-index: -1;
}
@media (max-width: 900px) {
  .therapy, .navigation { width: 78%; }
  .integration { width: 86%; }
}
@media (max-width: 720px) {
  .garden-note { display: none; }
  .meaning { grid-template-columns: 1fr; padding-block: 3.2rem 3.75rem; }
  .name-plate { width: min(78%, 315px); justify-self: start; margin-left: .15rem; }
  .name-plate img { width: 24%; }
  .offerings { padding-block: 3.5rem 4.1rem; }
  .offering { display: block; padding: 2rem 1.5rem; min-height: 0; width: 94%; }
  .offering h3 { font-size: clamp(2.15rem, 8vw, 3rem); }
  .offering p { font-size: .93rem; }
  .offering img { width: 28%; height: auto; max-height: 70%; }
  .therapy { margin-left: 0; }
  .therapy .offering-copy { max-width: 80%; }
  .therapy img { right: -8%; bottom: 7%; width: 23%; }
  .integration { margin-top: 1.8rem; }
  .integration .offering-copy { max-width: 85%; margin-left: auto; }
  .integration img { left: -12%; bottom: 3%; height: 75%; max-height: none; }
  .navigation { margin: 1.8rem auto 0 0; }
  .navigation .offering-copy { max-width: 80%; }
  .navigation img { right: -7%; bottom: -4%; }
  .about { grid-template-columns: 1fr; gap: 1.1rem; padding-block: 3.3rem; }
  .portrait { width: min(72%, 325px); justify-self: start; margin-left: 8%; }
  .personal { padding-block: 3.3rem 4rem; }
  .personal h2 { margin-right: 0; }
  .photo-album { flex-wrap: wrap; gap: .55rem 1rem; }
  .snapshot { flex: 0 1 42%; }
  .workspace { flex-basis: 55%; margin: .85rem 0 0 auto; }
  .snapshot .slot-label { font-size: 1.15rem; padding: .25rem; overflow-wrap: anywhere; }
}