/* Refined scale and spacing: compact, readable, and still editorial. */
body {
  font-size: 16px;
}

.site-header {
  height: 96px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.site-header .brand {
  width: 230px;
}

.brand-logo {
  display: block;
  width: 100%;
  height: auto;
}

.brand-mark {
  display: block;
  width: 100%;
  aspect-ratio: 2172 / 350;
  overflow: hidden;
}

.brand-tagline {
  display: block;
  margin-top: 4px;
  color: var(--taupe);
  opacity: .68;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

footer .footer-brand {
  width: 230px;
  max-width: 100%;
}

footer .brand-logo {
  filter: brightness(1.8) saturate(.65);
}

footer .brand-tagline {
  color: var(--taupe);
  opacity: .78;
}

footer > p {
  color: var(--taupe);
  opacity: .72;
}

.site-nav a,
.eyebrow {
  font-size: 12px;
}

.brand-subtitle,
.path-number,
.path-kicker,
.path-arrow,
footer > div a,
footer small,
.about-portrait figcaption {
  font-size: 12px;
}

.hero {
  min-height: auto;
  padding-top: clamp(58px, 7vw, 86px);
  padding-bottom: clamp(62px, 7.5vw, 92px);
}

.hero h1 {
  font-size: clamp(48px, 6vw, 78px);
  line-height: .92;
}

.hero-script {
  font-size: clamp(24px, 2.7vw, 35px);
  margin-top: 17px;
  margin-bottom: 17px;
}

.hero-copy {
  font-size: 14px;
  margin-top: 0;
  margin-bottom: 0;
}

.hero .text-link {
  margin-top: 24px;
}

.text-link,
.button {
  font-size: 12px;
}

.section {
  padding-top: clamp(72px, 8vw, 112px);
  padding-bottom: clamp(72px, 8vw, 112px);
}

.section-heading {
  margin-bottom: 42px;
}

.services.section {
  padding-top: clamp(36px, 4vw, 52px);
  padding-bottom: clamp(48px, 6vw, 76px);
}

.services .section-heading {
  margin-bottom: 26px;
}

.section-heading h2,
.about h2,
.contact h2 {
  font-size: clamp(40px, 4.4vw, 60px);
}

.path-image {
  margin-bottom: 18px;
}

.path-kicker {
  margin-top: 20px;
}

.path-title {
  font-size: clamp(25px, 2.1vw, 34px);
  min-height: 64px;
}

.service-detail {
  padding: 48px 44px;
  gap: clamp(30px, 4vw, 64px);
}

.service-detail h3 {
  font-size: clamp(31px, 3vw, 45px);
}

.service-detail li,
.approach-points p {
  font-size: 13px;
}

.approach {
  gap: 6vw;
}

.approach blockquote {
  font-size: clamp(36px, 4vw, 56px);
}

.approach-points article {
  padding-top: 22px;
  padding-bottom: 22px;
}

.about,
.contact {
  gap: 7vw;
}

.about-copy .lead {
  font-size: 24px;
}

footer {
  position: relative;
  padding-top: 48px;
  padding-bottom: 42px;
  gap: 36px;
}

.studio-easter-egg {
  position: absolute;
  right: clamp(20px, 3vw, 42px);
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  width: 58px;
  height: 28px;
  color: var(--taupe);
  opacity: .055;
  pointer-events: none;
  transition: opacity .35s ease;
}

footer:hover .studio-easter-egg {
  opacity: .11;
}

.reiki-mark {
  position: relative;
  display: block;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
}

.cho-ku-rei {
  background: currentColor;
  -webkit-mask: url("assets/cho-ku-rei-public-domain.svg") center / contain no-repeat;
  mask: url("assets/cho-ku-rei-public-domain.svg") center / contain no-repeat;
}

.abundance i {
  position: absolute;
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 99px;
  transform-origin: left center;
}

.abundance i:nth-child(1) {
  left: 1px;
  top: 21px;
  width: 29px;
  transform: rotate(-34deg);
}

.abundance i:nth-child(2) {
  left: 17px;
  top: 5px;
  width: 10px;
}

.abundance i:nth-child(3) {
  left: 7px;
  top: 3px;
  width: 23px;
  transform: rotate(61deg);
}

@media (max-width: 900px) {
  .site-header {
    height: 90px;
  }

  .site-header .brand {
    width: 220px;
  }

  footer .footer-brand {
    width: 220px;
  }

  .approach-points,
  .about-copy {
    margin-top: 12px;
  }
}

@media (max-width: 680px) {
  body {
    font-size: 15px;
  }

  .site-header .brand {
    width: 180px;
  }

  footer .footer-brand {
    width: 180px;
  }

  .brand-tagline {
    letter-spacing: .1em;
  }

  .hero {
    padding-top: 54px;
    padding-bottom: 60px;
  }

  .hero h1 {
    font-size: clamp(44px, 13vw, 60px);
  }

  .section {
    padding-top: 62px;
    padding-bottom: 62px;
  }

  .services.section {
    padding-top: 34px;
    padding-bottom: 48px;
  }

  .path-title {
    min-height: auto;
  }

  .service-detail {
    padding: 38px 24px;
  }

  .contact {
    gap: 48px;
  }

  .studio-easter-egg {
    right: 16px;
    bottom: 12px;
    transform: scale(.82);
    transform-origin: right bottom;
  }
}