/* Home page components. Tokens and shared components: styles.css. */

/* ---------------------------------------------------------- hero */
.page-home .hero-photo img { object-position: 51% 50%; }
.hero-badge-link { display: inline-block; border-radius: var(--r-sm); }
.page-home .hero-kicker { max-width: 34ch; }
.page-home .hero { border-bottom: 0; padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.page-home .hero-copy { container-type: inline-size; }
/* The live hero sentence, split by size only: the three words carry the page. */
.hero-quote { display: block; font-size: min(7.25rem, 15.4cqi); line-height: 0.95; letter-spacing: -0.035em; }
.hero-quote > span { display: block; }
.hero-rest {
  display: block; max-width: 24ch; margin-top: 0.85rem;
  font: 700 clamp(1.15rem, 0.95rem + 0.9vw, 1.65rem)/1.25 var(--f-display); letter-spacing: var(--tr-heading);
}

/* hero botanicals: aspen leaves behind the photo, clouds, the foothills ridge into the ink band */
.hero-leaves { position: absolute; z-index: 2; width: 36%; right: -9%; top: -9%; transform: rotate(6deg); --art-fill: var(--c-paper); }
/* a mullein spike growing out of the ridge, between the copy and the photo */
.hero-mullein { position: absolute; z-index: 0; left: 46%; bottom: clamp(1.5rem, 4vw, 3.5rem); width: clamp(5rem, 7vw, 7rem); --art-soft: var(--c-paper); --art-fill: var(--c-lime-pale); }
.hero-cloud { position: absolute; width: clamp(7rem, 12vw, 11rem); left: 43%; top: 7%; opacity: 0.95; }
.hero-cloud-2 { width: clamp(4.5rem, 7vw, 6.5rem); left: auto; right: 2.5%; top: auto; bottom: 22%; }
.hero-ridge {
  position: absolute; left: 0; bottom: -1px; width: 100%; height: clamp(2.75rem, 6.5vw, 5.75rem);
  --art-line: var(--c-ink); --art-snow: var(--c-lime);
}
@media (max-width: 900px) {
  .hero-cloud { left: auto; right: 6%; top: 2.5%; width: 6rem; }
  .hero-cloud-2 { display: none; }
  .hero-leaves { width: 52%; right: -10%; top: -12%; }
  .hero-mullein { left: auto; right: 4%; width: 3.75rem; }
}

/* ---------------------------------------------------------- who we are */
@media (min-width: 901px) { .who .split { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.who-media { position: relative; }
.who-photo { aspect-ratio: 4 / 5; transform: rotate(-1.5deg); }
/* thyme and lemon: the two plants in Jake's two products */
.who-thyme { position: absolute; width: 22%; right: -7%; top: -7%; transform: rotate(18deg); }
.who-lemon { position: absolute; width: 30%; left: -8%; bottom: -6%; transform: rotate(-12deg); }
.who { overflow-x: clip; }
@media (max-width: 900px) {
  .who-thyme { width: 16%; right: -1%; top: -9%; }
  .who-lemon { width: 24%; left: -3%; }
}
.who-photo img { object-position: 50% 30%; }
.who-copy h2 { font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.45rem); }
.who-more { margin-top: 1.5rem; padding: 1rem 1.2rem; background: var(--c-lime-pale); border: var(--bd); border-radius: var(--r-sm); }
.who-copy .btn { margin-top: 0.4rem; }

/* ---------------------------------------------------------- values (lime band) */
/* the band rises out of the page as a lime foothills ridge */
.values { position: relative; margin-top: clamp(2.5rem, 6vw, 5rem); padding-top: clamp(2.5rem, 2rem + 3vw, 5rem); }
.values-ridge {
  position: absolute; left: 0; bottom: calc(100% - 1px); width: 100%; height: clamp(2.5rem, 6vw, 5rem);
  --art-back: var(--c-lime-pale); --art-front: var(--c-lime); --art-snow: var(--c-paper);
}
.values-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1rem var(--gap); align-items: end; margin-bottom: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
.values-kicker { margin: 0; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); line-height: 1.35; }
.values-title { margin: 0; font: 800 var(--fs-h2)/1.06 var(--f-display); letter-spacing: var(--tr-display); text-wrap: balance; }
.values-grid {
  display: grid; gap: 1.75rem;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
}
.value {
  position: relative; display: flex; flex-direction: column; gap: 1.1rem;
  padding: 1rem 1rem 4.25rem; color: var(--c-ink); text-decoration: none;
  background: var(--c-paper); border: var(--bd); border-radius: var(--r); box-shadow: var(--sh);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.value:hover { transform: translate(-3px, -3px); box-shadow: var(--sh-lg); }
.value:active { transform: translate(3px, 3px); box-shadow: var(--sh-press); }
.value h3 { margin: 0 0.4rem; font-size: clamp(1rem, 0.92rem + 0.35vw, 1.2rem); line-height: 1.3; }
.value-photo { display: block; aspect-ratio: 4 / 3; box-shadow: none; border-radius: var(--r-sm); }
.value-lg { grid-row: span 1; background: var(--c-ink); color: var(--c-paper); }
.value-lg .value-photo { aspect-ratio: 5 / 4; }
.value-go {
  position: absolute; right: 1rem; bottom: 1rem;
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  background: var(--c-lime); color: var(--c-ink); border: var(--bd); border-radius: 50%;
  transition: transform var(--t-fast) var(--ease);
}
.value-go svg { width: 1.2rem; height: 1.2rem; }
.value:hover .value-go { transform: rotate(-45deg); }
@media (max-width: 960px) {
  .values-head { grid-template-columns: minmax(0, 1fr); }
  .values-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .value-lg { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .values-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------- services */
.services .split { align-items: start; }
.services-photo { aspect-ratio: 3 / 4; position: sticky; top: 8rem; transform: rotate(1.25deg); }
.services-photo img { object-position: 50% 25%; }
.services-copy > h2:not(.tag) { margin-bottom: 1.5rem; }
.pillars { display: grid; gap: 1.1rem; margin-bottom: 2rem; counter-reset: pillar; }
.pillar {
  position: relative; margin: 0; padding: 1.3rem 1.4rem 1.4rem 4.1rem;
  background: var(--c-paper); border: var(--bd); border-radius: var(--r); box-shadow: var(--sh-sm);
}
.pillar::before {
  counter-increment: pillar; content: counter(pillar);
  position: absolute; left: 1.1rem; top: 1.15rem;
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  background: var(--c-lime); border: 2px solid var(--c-ink); border-radius: 50%;
  font: 800 0.95rem/1 var(--f-display);
}
.pillar b { display: block; margin-bottom: 0.4rem; font: 700 1.08rem/1.3 var(--f-display); }
.verse {
  display: block; margin: 0.9rem 0; padding: 0.9rem 1.1rem;
  background: var(--c-lime-pale); border: var(--hair); border-radius: var(--r-sm);
  font: 500 1.1rem/1.45 var(--f-body); font-style: italic;
}
@media (max-width: 900px) {
  .services-photo { position: relative; top: 0; }
}

/* ---------------------------------------------------------- reviews */
.reviews-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.reviews-head .tag { margin: 0; }
/* an aspen grove standing on the top edge of the review cards */
.reviews-grove { align-self: flex-end; width: clamp(5rem, 8vw, 7.5rem); margin: -4rem 0 calc(-1 * clamp(2rem, 1.5rem + 2vw, 3rem)) auto; }
@media (max-width: 700px) { .reviews-grove { display: none; } }
.reviews-title { margin: 0; font: 800 var(--fs-h2)/1.06 var(--f-display); letter-spacing: var(--tr-display); }

/* ---------------------------------------------------------- instagram */
.insta { padding-bottom: 0; }
.band.insta { padding-bottom: clamp(3rem, 2rem + 4vw, 5rem); }
.insta-title { margin: 0 0 1.5rem; font: 800 clamp(1.3rem, 1rem + 1.4vw, 2rem)/1.15 var(--f-display); }
.insta-title a { text-decoration: none; background: linear-gradient(var(--c-lime), var(--c-lime)) 0 88% / 100% 0.38em no-repeat; }
.insta-title a:hover { background-size: 100% 100%; }
.insta-feed:empty { display: none; }

/* ---------------------------------------------------------- newsletter perk */
@media (min-width: 901px) { .perk .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.perk { position: relative; overflow: hidden; }
.perk-cloud { position: absolute; width: clamp(8rem, 14vw, 13rem); right: 4%; top: 1.5rem; --art-line: var(--c-lime); --art-paper: transparent; opacity: 0.85; }
.perk-photo { aspect-ratio: 4 / 3; border-color: var(--c-ground); box-shadow: 9px 9px 0 var(--c-lime); }
.perk-copy h2 { color: var(--c-paper); }
.perk-copy .lead { color: var(--c-ground); }
.perk-copy .tag { box-shadow: 3px 3px 0 var(--c-ground); }

/* ---------------------------------------------------------- seedling tag bullet */
/* Their brand emoji, drawn: replaces the duct rings on the home section tags. */
.page-home .tag::before {
  width: 1.35em; height: 1.35em; border-radius: 0; background: currentColor;
  -webkit-mask: var(--seedling) center / contain no-repeat; mask: var(--seedling) center / contain no-repeat;
}
.page-home { --seedling: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M22 26h4v16h-4zM10 40h28v4H10z'/%3E%3Cpath d='M24 28C13 30 4 21 4 8c12 0 20 8 20 20zM24 24C25 12 34 4 46 4c0 12-9 21-22 20z'/%3E%3C/svg%3E"); }