/* ============================================================
   Root & Ritual — small-batch botanical skincare
   Palette: oat / espresso / moss / sage / tan  ·  Prata + Nunito Sans
   Mobile-first. Breakpoints: 560 (product grid), 768, 1100.
   ============================================================ */

:root {
  --oat: #F1EFE6;
  --espresso: #3E3226;
  /* Deepened from #5A6B46. On the sage panels it measured 4.30:1 — under AA on
     the four eyebrow labels. 4.64:1 now, a colour difference of dE2000 1.2 that
     is below the threshold at which a side-by-side shows it, and every white-on-
     moss surface gains contrast (5.79:1 -> 6.25:1) rather than losing it. */
  --moss: #556640;
  --sage: #DCE0CE;
  --tan: #C0A98E;

  /* Derived tints of the palette */
  --cream: #FAF8F1;
  --moss-deep: #4A5939;
  --espresso-soft: rgba(62, 50, 38, 0.8);
  --oat-soft: rgba(241, 239, 230, 0.78);
  --rule: rgba(62, 50, 38, 0.15);

  --shadow-soft: 0 10px 30px rgba(62, 50, 38, 0.10), 0 2px 6px rgba(62, 50, 38, 0.06);
  --shadow-lift: 0 22px 44px rgba(62, 50, 38, 0.16), 0 4px 10px rgba(62, 50, 38, 0.08);

  --font-display: "Prata", Georgia, serif;
  --font-body: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;

  --radius-card: 18px;
  --arch: 50% 50% 0 0;
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- Reset & base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--espresso);
  background-color: var(--oat);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Subtle film grain across the whole page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.045;
  background-image: var(--grain);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

svg {
  max-width: 100%;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.16;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

ul, ol {
  list-style: none;
}

:focus-visible {
  outline: 3px solid var(--moss);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The moss ring is legible on every light surface and effectively invisible on
   the two dark bands — moss on --moss-deep is a 1.2:1 step, moss on --espresso
   about 1.7:1 — so a keyboard user crossing into the subscription panel or the
   footer simply loses the cursor. Oat is the type colour already in use on both
   grounds, so the ring matches what is there rather than introducing a colour. */
.subscription :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--oat);
}

::selection {
  background: var(--moss);
  color: var(--oat);
}

/* Scroll/focus anchor for "back to top" — must not sit on the sticky header */
.page-top {
  display: block;
  height: 0;
  outline: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: min(100% - 2.5rem, 1160px);
  margin-inline: auto;
}

.section {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
}

/* ---------- Type helpers ---------- */

.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 0.9rem;
}

.eyebrow--light {
  color: var(--sage);
}

.section__head {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto clamp(2.2rem, 5vw, 3.4rem);
}

.section__head h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
}

.section__lede {
  color: var(--espresso-soft);
  font-size: 1.03rem;
  margin-top: 1rem;
}

.section__head--left {
  text-align: left;
  margin-inline: 0;
  margin-bottom: 2rem;
}

/* ---------- Squiggles (stroke-draw on reveal) ---------- */

.squiggle {
  display: block;
  overflow: visible;
  color: var(--tan);
}

.squiggle path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s ease 0.4s;
}

.revealed .squiggle path {
  stroke-dashoffset: 0;
}

.squiggle-wrap {
  position: relative;
  display: inline-block;
  color: var(--moss);
}

.squiggle--under {
  position: absolute;
  left: 2%;
  bottom: -0.34em;
  width: 96%;
  height: 0.26em;
}

.squiggle--title {
  width: min(200px, 60%);
  height: 18px;
  margin: 0.9rem auto 0;
}

.squiggle--left {
  margin-inline: 0;
  width: 190px;
}

/* ---------- Buttons & links ---------- */

.btn {
  display: inline-block;
  padding: 0.9rem 1.9rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
  background: var(--moss);
  color: var(--oat);
  box-shadow: 0 8px 20px rgba(90, 107, 70, 0.28);
  transition: transform 0.25s var(--ease-settle), box-shadow 0.25s ease,
              background-color 0.25s ease, color 0.25s ease;
}

.btn:hover {
  background: var(--moss-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(90, 107, 70, 0.36);
}

.btn:active {
  transform: translateY(0);
}

.btn--small {
  padding: 0.55rem 1.15rem;
  font-size: 0.84rem;
  background: transparent;
  color: var(--moss);
  border-color: var(--moss);
  box-shadow: none;
}

.btn--small:hover {
  background: var(--moss);
  color: var(--oat);
  box-shadow: none;
}

.btn--small.is-added {
  background: var(--moss);
  color: var(--oat);
  transform: none;
}

.btn--small:disabled,
.btn--small[aria-disabled="true"] {
  cursor: default;
}

.btn--light {
  background: var(--oat);
  color: var(--espresso);
  box-shadow: 0 10px 24px rgba(29, 24, 16, 0.28);
}

.btn--light:hover {
  background: var(--cream);
  color: var(--espresso);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--moss);
  text-decoration: none;
  border-bottom: 2px solid var(--tan);
  padding-bottom: 3px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.link-arrow svg {
  width: 28px;
  height: 12px;
  flex: none;
  transition: transform 0.3s var(--ease-settle);
}

.link-arrow:hover {
  color: var(--moss-deep);
  border-color: var(--moss);
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

/* ---------- Stars ---------- */

.star {
  width: 17px;
  height: 17px;
  fill: currentColor;
  flex: none;
}

.star--inline {
  width: 15px;
  height: 15px;
  color: var(--moss);
}

/* ---------- Decorative botanicals ---------- */

.deco {
  position: absolute;
  height: auto;
  pointer-events: none;
}

.deco--leaf {
  color: var(--moss);
  animation: sway 9s ease-in-out infinite;
}

.deco--aster {
  color: var(--tan);
  animation: twinkle 7s ease-in-out infinite;
}

.bullet-aster,
.announcement__spark {
  fill: none;
}

.check {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--tan);
}

/* ---------- Announcement bar ---------- */

.announcement {
  background: var(--espresso);
  color: var(--oat);
  text-align: center;
  padding: 0.55rem 1rem;
}

.announcement p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.announcement__spark {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--tan);
}

.announcement__extra {
  display: none;
  color: var(--oat-soft);
}

/* ---------- Header & navigation ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(241, 239, 230, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(62, 50, 38, 0.08);
  transition: box-shadow 0.3s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 8px 24px rgba(62, 50, 38, 0.08);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
}

.logo__mark {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--moss);
  transition: transform 0.55s var(--ease-settle);
}

.logo:hover .logo__mark {
  transform: rotate(45deg);
}

.logo__word {
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.logo__word em {
  font-style: normal;
  color: var(--moss);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.basket {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: background-color 0.25s ease;
}

.basket svg {
  width: 24px;
  height: 24px;
}

.basket:hover {
  background: var(--sage);
}

.basket__count {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  background: var(--moss);
  color: var(--oat);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  transition: transform 0.3s var(--ease-settle);
}

.basket__count.is-bumped {
  transform: scale(1.35);
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: background-color 0.25s ease;
}

.nav-toggle:hover {
  background: var(--sage);
}

.nav-toggle__line {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--espresso);
  transition: transform 0.3s var(--ease-settle), opacity 0.2s ease;
}

.nav-open .nav-toggle__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-open .nav-toggle__line:nth-child(2) {
  opacity: 0;
}

.nav-open .nav-toggle__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav panel */
.primary-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--oat);
  border-bottom: 1px solid rgba(62, 50, 38, 0.1);
  box-shadow: 0 24px 40px rgba(62, 50, 38, 0.12);
  padding: 1rem 1.25rem 1.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s var(--ease-settle), visibility 0.3s;
}

.nav-open .primary-nav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.primary-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.primary-nav a {
  display: block;
  padding: 0.6rem 0.4rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.primary-nav a:hover {
  background: var(--sage);
  color: var(--moss-deep);
}

/* ---------- Arch / blob image masks ---------- */

.arch,
.blob,
.product-card__media {
  position: relative;
  overflow: hidden;
  background: var(--tan);
  isolation: isolate;
}

.arch {
  border-radius: var(--arch);
  box-shadow: var(--shadow-lift);
}

.arch img,
.blob img,
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* faint grain over every masked photo */
.arch::after,
.blob::after,
.product-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.10;
  mix-blend-mode: multiply;
  background-image: var(--grain);
}

.blob {
  border-radius: 58% 42% 50% 50% / 55% 48% 52% 45%;
  box-shadow: var(--shadow-lift);
  animation: blob-drift 16s ease-in-out infinite alternate;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background: var(--oat);
  padding: clamp(2.4rem, 6vw, 4.6rem) 0 clamp(2.2rem, 5vw, 3.6rem);
}

.hero__inner {
  position: relative;
  display: grid;
  gap: clamp(2.6rem, 7vw, 3.4rem);
  align-items: center;
}

.hero__copy h1 {
  font-size: clamp(2.4rem, 1.6rem + 4.4vw, 4.2rem);
  margin-bottom: 1.3rem;
}

.hero__lede {
  max-width: 32rem;
  font-size: 1.06rem;
  color: var(--espresso-soft);
  margin-bottom: 1.8rem;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.6rem;
}

.hero__trust {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--espresso-soft);
}

.hero__media {
  position: relative;
  width: 100%;
  /* Inset leaves room for the botanical accents that sit outside the arch */
  max-width: min(440px, calc(100% - 2.5rem));
  margin-inline: auto;
}

.arch--hero {
  aspect-ratio: 4 / 5;
}

.arch--hero img {
  transform: scale(1.06);
}

/* The stamp straddles the arch's bottom-left corner, so it needs its own
   opaque oat disc — otherwise the photo edge slices the ring and the type
   becomes unreadable. The disc stays put while only the ring spins. */
.stamp {
  position: absolute;
  left: -22px;
  bottom: -30px;
  z-index: 3;
  width: clamp(92px, 23vw, 122px);
  aspect-ratio: 1;
  color: var(--espresso);
  background: var(--oat);
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(62, 50, 38, 0.16);
}

.stamp svg {
  display: block;
  width: 100%;
  height: auto;
  animation: spin 46s linear infinite;
}

/* Sized so the full legend fits the arc once round without the tail
   overrunning the start of the string. */
.stamp__text {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  fill: var(--espresso);
}

.hero__leaf-1 {
  top: -3%;
  left: -6%;
  width: clamp(42px, 9vw, 62px);
  transform: rotate(-24deg);
}

.hero__aster-1 {
  top: 6%;
  right: -4%;
  width: 28px;
}

.hero__leaf-2 {
  display: none;
}

/* ---------- Wave dividers ---------- */

.wave {
  line-height: 0;
  background: var(--wave-top, var(--oat));
}

.wave svg {
  display: block;
  width: 100%;
  height: clamp(38px, 6vw, 70px);
}

.wave svg path {
  fill: var(--wave-fill, var(--sage));
}

.wave--flip {
  transform: scaleX(-1);
}

/* ---------- Values strip ---------- */

.values {
  background: var(--sage);
  padding: clamp(2.4rem, 5vw, 4rem) 0 clamp(2.8rem, 6vw, 4.4rem);
}

.values__grid {
  display: grid;
  gap: 2.2rem;
}

.value {
  text-align: center;
  max-width: 22rem;
  margin-inline: auto;
}

.value__icon {
  display: inline-grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 1rem;
  background: var(--oat);
  color: var(--moss);
  border-radius: 50% 50% 50% 8px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease-settle), border-radius 0.4s var(--ease-settle);
}

.value:hover .value__icon {
  transform: rotate(-8deg) scale(1.06);
  border-radius: 50%;
}

.value__icon svg {
  width: 40px;
  height: 40px;
}

.value__title {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.value p {
  font-size: 0.94rem;
  color: var(--espresso-soft);
}

/* ---------- Bestsellers ---------- */

.bestsellers {
  background: var(--oat);
}

.product-grid {
  display: grid;
  gap: 1.6rem;
}

.product-card {
  height: 100%;
}

.product-card__tilt {
  --rx: 0deg;
  --ry: 0deg;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--cream);
  border-radius: var(--radius-card);
  padding: 1rem 1rem 1.3rem;
  box-shadow: var(--shadow-soft);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.25s ease-out, box-shadow 0.35s ease;
}

.product-card__tilt:hover {
  box-shadow: var(--shadow-lift);
}

.product-card__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--arch);
  background: var(--sage);
  margin-bottom: 1rem;
}

.product-card__media img {
  transform: scale(1.06);
}

.product-card__tag {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  padding: 0.3rem 0.75rem;
  background: var(--oat);
  color: var(--espresso);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(62, 50, 38, 0.15);
}

.product-card__tag--tan {
  background: var(--tan);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-card__body h3 {
  font-size: 1.16rem;
  margin-bottom: 0.25rem;
}

.product-card__note {
  font-size: 0.84rem;
  color: var(--espresso-soft);
  margin-bottom: 1rem;
}

.product-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-top: auto;
}

.product-card__price {
  font-family: var(--font-display);
  font-size: 1.32rem;
}

.bestsellers__foot {
  margin-top: 2.4rem;
  text-align: center;
  font-size: 0.92rem;
  color: var(--espresso-soft);
}

/* ---------- Ingredient story ---------- */

.story {
  background: var(--oat);
  padding-top: 0;
}

.story__inner {
  display: grid;
  gap: clamp(3rem, 8vw, 3.6rem);
  align-items: center;
}

.story__media {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
}

.story__media .blob {
  aspect-ratio: 1 / 1.12;
}

.story__chip {
  position: absolute;
  right: 2%;
  bottom: -14px;
  z-index: 2;
  max-width: 62%;
  padding: 0.5rem 0.9rem;
  background: var(--cream);
  border-radius: 12px;
  box-shadow: var(--shadow-lift);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--espresso-soft);
  transform: rotate(4deg);
  transition: transform 0.45s var(--ease-settle);
}

.story__chip:hover {
  transform: rotate(1deg) translateY(-4px);
}

.story__aster {
  top: -4%;
  right: 8%;
  width: 26px;
  color: var(--moss);
}

.story__copy h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
}

.story__copy > p {
  color: var(--espresso-soft);
  margin-top: 1rem;
}

.story__list {
  display: grid;
  gap: 0.85rem;
  margin: 1.6rem 0;
}

.story__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.96rem;
  color: var(--espresso-soft);
}

.story__list strong {
  color: var(--espresso);
}

.bullet-aster {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 0.45rem;
  color: var(--tan);
}

/* ---------- The ritual ---------- */

.ritual {
  background: var(--sage);
  padding: clamp(2.8rem, 6vw, 4.6rem) 0 clamp(3rem, 7vw, 5rem);
}

.ritual__inner {
  display: grid;
  gap: clamp(2.6rem, 7vw, 3.6rem);
  align-items: center;
}

.ritual__media {
  position: relative;
  width: 100%;
  /* Inset leaves room for the botanical accents that sit outside the arch */
  max-width: min(420px, calc(100% - 2.5rem));
  margin-inline: auto;
}

.arch--ritual {
  aspect-ratio: 4 / 5;
}

.ritual__leaf {
  bottom: 4%;
  right: -5%;
  width: clamp(42px, 8vw, 58px);
  color: var(--moss-deep);
  transform: rotate(28deg);
}

.ritual__steps {
  min-width: 0;
}

.steps {
  display: grid;
  gap: 1.1rem;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  background: var(--cream);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.4rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease-settle), box-shadow 0.4s ease;
}

.step:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
}

.step__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50% 50% 50% 10px;
  background: var(--sage);
  color: var(--moss-deep);
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
}

.step__body h3 {
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
}

.step__body p {
  font-size: 0.95rem;
  color: var(--espresso-soft);
}

.step__meta {
  margin-top: 0.9rem;
  display: inline-block;
  padding: 0.28rem 0.85rem;
  background: var(--sage);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--moss-deep);
}

/* ---------- Reviews ---------- */

.reviews {
  background: var(--oat);
}

.reviews__grid {
  display: grid;
  gap: 1.8rem;
  max-width: 30rem;
  margin-inline: auto;
}

.review {
  position: relative;
  background: var(--cream);
  border-radius: var(--radius-card);
  padding: 1.9rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease-settle), box-shadow 0.4s ease;
}

.review:hover {
  transform: translateY(-6px) rotate(-0.5deg);
  box-shadow: var(--shadow-lift);
}

.review__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--moss);
  margin-bottom: 0.9rem;
}

.review blockquote p {
  font-size: 1.01rem;
  margin-bottom: 1.4rem;
}

.review__person {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border-top: 1px dashed var(--tan);
  padding-top: 1.2rem;
}

.review__portrait {
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 50% 50% 50% 10px;
  object-fit: cover;
  background: var(--sage);
}

.review__person strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.02rem;
}

.review__person small {
  font-size: 0.79rem;
  color: var(--espresso-soft);
}

/* ---------- Subscription ---------- */

.subscription {
  background: var(--moss-deep);
  color: var(--oat);
  padding: clamp(2.8rem, 6vw, 4.6rem) 0 clamp(3rem, 7vw, 5rem);
}

.subscription__inner {
  display: grid;
  gap: clamp(2.8rem, 7vw, 3.6rem);
  align-items: center;
}

.subscription__copy h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
}

.subscription__lede {
  max-width: 32rem;
  margin: 1rem 0 1.6rem;
  color: rgba(241, 239, 230, 0.85);
}

.subscription__list {
  display: grid;
  gap: 0.65rem;
  margin-bottom: 1.8rem;
}

.subscription__list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.96rem;
  font-weight: 600;
}

.subscription__pricing {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
}

.subscription__price {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 2rem + 2.4vw, 3.4rem);
  line-height: 1;
}

.subscription__price small {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sage);
}

.subscription__compare {
  font-size: 0.92rem;
  color: var(--sage);
  text-decoration: line-through;
}

.subscription__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

.subscription__note {
  font-size: 0.82rem;
  color: var(--sage);
}

.subscription__media {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}

.arch--sub {
  aspect-ratio: 4 / 5;
  background: var(--moss);
  box-shadow: 0 26px 50px rgba(29, 24, 16, 0.35);
}

.arch--sub img {
  transform: scale(1.06);
}

.subscription__badge {
  position: absolute;
  z-index: 3;
  top: -14px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--tan);
  color: var(--espresso);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 10px 22px rgba(29, 24, 16, 0.3);
  transform: rotate(-8deg);
}

/* ---------- FAQ ---------- */

.faq {
  background: var(--oat);
}

.faq__container {
  max-width: 780px;
}

.faq__list {
  border-top: 1px solid var(--rule);
}

.faq__item {
  border-bottom: 1px solid var(--rule);
}

.faq__heading {
  margin: 0;
}

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  text-align: left;
  padding: 1.25rem 0.25rem;
  font-family: var(--font-display);
  font-size: 1.06rem;
  line-height: 1.35;
  transition: color 0.25s ease;
}

.faq__question:hover {
  color: var(--moss);
}

.faq__icon {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sage);
  transition: background-color 0.3s ease, transform 0.4s var(--ease-settle);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--espresso);
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--ease-settle), background-color 0.3s ease;
}

.faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__question[aria-expanded="true"] .faq__icon {
  background: var(--moss);
  transform: rotate(180deg);
}

.faq__question[aria-expanded="true"] .faq__icon::before,
.faq__question[aria-expanded="true"] .faq__icon::after {
  background: var(--oat);
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease-settle);
}

.faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
}

.faq__answer-inner {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 0.45s;
}

.faq__item.is-open .faq__answer-inner {
  visibility: visible;
  transition-delay: 0s;
}

.faq__answer-inner p {
  padding: 0 2.6rem 1.4rem 0.25rem;
  color: var(--espresso-soft);
}

/* ---------- Newsletter ---------- */

.newsletter {
  background: var(--oat);
  padding-top: 0;
}

.newsletter__panel {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  background: var(--sage);
  border-radius: 200px 200px 24px 24px;
  padding: clamp(3rem, 7vw, 4.4rem) clamp(1.4rem, 5vw, 4rem) clamp(2.4rem, 5vw, 3.2rem);
  overflow: hidden;
}

.newsletter__panel h2 {
  font-size: clamp(1.75rem, 1.3rem + 2.2vw, 2.7rem);
}

.newsletter__aster {
  top: 12%;
  left: 11%;
  width: 24px;
  color: var(--moss);
}

.newsletter__lede {
  max-width: 32rem;
  margin: 1rem auto 1.8rem;
  color: var(--espresso-soft);
}

.newsletter__form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-width: 430px;
  margin-inline: auto;
}

.newsletter__form input {
  width: 100%;
  min-width: 0;
  padding: 0.9rem 1.3rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--cream);
  font: inherit;
  color: var(--espresso);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.newsletter__form input::placeholder {
  color: rgba(62, 50, 38, 0.45);
}

.newsletter__form input:focus {
  outline: none;
  border-color: var(--moss);
  box-shadow: 0 0 0 4px rgba(90, 107, 70, 0.18);
}

.newsletter__form input.is-invalid {
  border-color: #A9563E;
  box-shadow: 0 0 0 4px rgba(169, 86, 62, 0.16);
}

.form-success {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.1rem;
  padding: 0.75rem 1.4rem;
  background: var(--moss);
  color: var(--oat);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.92rem;
  text-align: left;
}

.form-success .check {
  color: var(--sage);
}

.form-success[hidden] {
  display: none;
}

.newsletter__fineprint {
  margin-top: 1.2rem;
  font-size: 0.82rem;
  color: var(--espresso-soft);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--espresso);
  color: var(--oat);
  padding: clamp(2.6rem, 6vw, 4.2rem) 0 1.6rem;
}

.site-footer__inner {
  display: grid;
  gap: 2.4rem;
  padding-bottom: 2.6rem;
}

.logo--footer .logo__word {
  color: var(--oat);
}

.logo--footer .logo__mark {
  color: var(--tan);
}

.site-footer__brand p {
  margin-top: 1rem;
  max-width: 22rem;
  font-size: 0.92rem;
  color: var(--oat-soft);
}

.site-footer__batch {
  font-weight: 700;
  color: var(--tan) !important;
}

.site-footer__col h3 {
  font-size: 1.02rem;
  margin-bottom: 1rem;
  color: var(--sage);
}

.site-footer__col ul {
  display: grid;
  gap: 0.5rem;
}

.site-footer__col a {
  font-size: 0.92rem;
  color: var(--oat-soft);
  text-decoration: none;
  transition: color 0.25s ease, padding-left 0.25s ease;
}

.site-footer__col a:hover {
  color: var(--oat);
  padding-left: 4px;
}

.site-footer address {
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--oat-soft);
}

.site-footer__hours {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--tan);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  border-top: 1px solid rgba(241, 239, 230, 0.14);
  padding-top: 1.5rem;
  font-size: 0.82rem;
  color: rgba(241, 239, 230, 0.6);
}

.site-footer__legal ul {
  display: flex;
  gap: 1.2rem;
}

.site-footer__legal a {
  text-decoration: none;
  transition: color 0.25s ease;
}

.site-footer__legal a:hover {
  color: var(--oat);
}

/* ---------- Animations ---------- */

@keyframes bob {
  0%, 100% { transform: translateY(0) scale(1.06); }
  50%      { transform: translateY(-8px) scale(1.06); }
}

.float-bob {
  animation: bob 8s ease-in-out infinite;
}

.product-card:nth-child(2) .float-bob { animation-delay: -1.6s; }
.product-card:nth-child(3) .float-bob { animation-delay: -3.2s; }
.product-card:nth-child(4) .float-bob { animation-delay: -4.8s; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes sway {
  0%, 100% { rotate: -4deg; }
  50%      { rotate: 5deg; }
}

@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%      { transform: scale(0.84) rotate(24deg); opacity: 0.7; }
}

@keyframes blob-drift {
  from { border-radius: 58% 42% 50% 50% / 55% 48% 52% 45%; }
  to   { border-radius: 46% 54% 56% 44% / 44% 58% 42% 56%; }
}

/* Scroll reveals: rise + settle from -2deg */
.reveal {
  opacity: 0;
  transform: translateY(28px) rotate(-2deg);
  transition:
    opacity 0.8s ease var(--d, 0s),
    transform 0.9s var(--ease-settle) var(--d, 0s);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

/* ---------- Breakpoints ---------- */

/* Extra step: the product grid genuinely needs 2-up before tablet */
@media (min-width: 560px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .announcement__extra {
    display: inline;
  }

  .values__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3.2rem;
  }

  .hero__leaf-1 {
    left: -12%;
  }

  .hero__aster-1 {
    right: -7%;
  }

  .hero__leaf-2 {
    display: block;
    left: -2%;
    bottom: 4%;
    width: 40px;
    color: var(--tan);
  }

  .story__inner {
    grid-template-columns: 0.92fr 1.08fr;
    gap: 3.6rem;
  }

  .ritual__inner {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 3.4rem;
  }

  .reviews__grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: none;
  }

  .subscription__inner {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3.6rem;
  }

  .newsletter__form {
    flex-direction: row;
  }

  .newsletter__form .btn {
    flex: none;
  }

  .newsletter__form input {
    flex: 1;
  }

  .site-footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 2rem;
  }
}

/* Tablet landscape: 3-up keeps the jars product-sized instead of half-screen */
@media (min-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1100px) {
  /* Desktop nav: inline, always visible */
  .primary-nav {
    position: static;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .primary-nav ul {
    flex-direction: row;
    gap: 0.2rem;
  }

  .primary-nav a {
    padding: 0.45rem 0.85rem;
    font-size: 0.95rem;
  }

  .nav-toggle {
    display: none;
  }

  .product-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.8rem;
  }

  .hero {
    padding-top: 4.4rem;
  }

  .hero__media {
    max-width: 460px;
  }

  .steps {
    gap: 1.3rem;
  }
}

/* ---------- Reduced motion: calm, and everything simply visible ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .squiggle path {
    stroke-dashoffset: 0 !important;
  }

  .float-bob,
  .arch--hero img,
  .arch--sub img,
  .product-card__media img {
    transform: scale(1.06) !important;
  }

  .product-card__tilt {
    transform: none !important;
  }
}