/* ==========================================================================
   PLANT — Stylesheet
   A modern plant nursery site. Serif-only type system (Fraunces + Literata).
   Palette grounded in greenhouse dusk (ink) and flowering nursery stock
   (bloom magenta), not the usual nursery brown/gold cliché.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

/* ---------- Design tokens ---------- */
:root{
  /* Color — Ink Forest (dark), Paper (light), Bloom (magenta accent), Moss (green accent) */
  --ink:        #0F1E17;
  --ink-deep:   #081109;
  --ink-raise:  #172B22;
  --paper:      #F3F5EE;
  --paper-alt:  #E8ECDF;
  --bloom:      #E23E76;
  --bloom-dark: #B92C5C;
  --bloom-soft: #F6D9E2;
  --moss:       #4C7A5E;
  --moss-light: #7FA98D;
  --ink-text:   #16241D;
  --paper-text: #F4F6EF;
  --muted:      #5B6B60;
  --muted-on-ink: #A9BBAE;
  --line:       rgba(22, 36, 29, 0.13);
  --line-on-ink: rgba(244, 246, 239, 0.16);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body: "Literata", "Iowan Old Style", serif;

  /* Space scale */
  --sp-1: .5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.25rem;
  --sp-5: 3.5rem;
  --sp-6: 5rem;
  --sp-7: 7.5rem;

  --radius: 4px;
  --radius-lg: 10px;
  --ease: cubic-bezier(.22,1,.36,1);
  --container: 1240px;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; overflow-x: hidden; }
body{
  background: var(--paper);
  color: var(--ink-text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (min-width: 820px){ body{ font-size: 17.5px; } }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--ink-text);
}
.on-ink h1, .on-ink h2, .on-ink h3, .on-ink p, .on-ink span,
h1.on-ink, h2.on-ink, h3.on-ink, p.on-ink, span.on-ink { color: var(--paper-text); }

p { max-width: 62ch; color: var(--ink-text); }
p.lead{ font-size: clamp(1.05rem, .9vw + .8rem, 1.3rem); color: var(--muted); }
.on-ink p.lead, p.lead.on-ink{ color: var(--muted-on-ink); }

::selection{ background: var(--bloom); color: var(--paper-text); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, label:focus-visible {
  outline: 2px solid var(--bloom);
  outline-offset: 3px;
}

/* ---------- Layout helpers ---------- */
.wrap{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.section{ padding-block: clamp(3.5rem, 7vw, 6.5rem); position: relative; }
.section--tight{ padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--ink{ background: var(--ink); color: var(--paper-text); }
.section--paper-alt{ background: var(--paper-alt); }
.section--clip{ overflow: hidden; }

.section__head{
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.section__head--row{
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  max-width: none;
  gap: var(--sp-3);
}
.section__title{ font-size: clamp(1.9rem, 1.1vw + 1.5rem, 2.75rem); }
.section__title em{ font-style: italic; color: var(--bloom); }
.on-ink .section__title em{ color: var(--bloom); }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .98rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform .35s var(--ease), background-color .3s ease, color .3s ease, border-color .3s ease;
  white-space: nowrap;
}
.btn--primary{ background: var(--bloom); color: #fff; }
.btn--primary:hover{ background: var(--bloom-dark); transform: translateY(-2px); }
.btn--dark{ background: var(--ink); color: var(--paper-text); }
.btn--dark:hover{ background: var(--ink-deep); transform: translateY(-2px); }
.btn--ghost{ border-color: currentColor; background: transparent; }
.btn--ghost:hover{ background: var(--ink-text); color: var(--paper); border-color: var(--ink-text); }
.on-ink .btn--ghost, .nav__cta .btn--ghost{ border-color: var(--line-on-ink); color: var(--paper-text); }
.on-ink .btn--ghost:hover, .nav__cta .btn--ghost:hover{ background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--sm{ padding: .6rem 1.15rem; font-size: .88rem; }

/* ---------- Nav ---------- */
.nav{
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(15, 30, 23, .78);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--line-on-ink);
}
.nav .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.05rem;
}
.nav__brand{
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 620;
  color: var(--paper-text);
  letter-spacing: -0.01em;
}
.nav__links{
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2vw, 2.25rem);
}
.nav__links a{
  color: var(--muted-on-ink);
  font-size: .98rem;
  position: relative;
  padding-block: .25rem;
  transition: color .25s ease;
}
.nav__links a:hover{ color: var(--paper-text); }
.nav__links a::after{
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1px;
  background: var(--bloom);
  transition: right .3s var(--ease);
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after{ right: 0; }
.nav__links a[aria-current="page"]{ color: var(--paper-text); }
.nav__cta{ display: flex; align-items: center; gap: var(--sp-2); }

.nav__toggle{ display: none; }
.nav__toggle-btn{
  display: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav__toggle-btn span, .nav__toggle-btn span::before, .nav__toggle-btn span::after{
  display: block;
  width: 20px; height: 1.5px;
  background: var(--paper-text);
  position: relative;
  transition: transform .3s ease, opacity .3s ease;
}
.nav__toggle-btn span::before, .nav__toggle-btn span::after{ content:""; position:absolute; left:0; }
.nav__toggle-btn span::before{ top: -6px; }
.nav__toggle-btn span::after{ top: 6px; }
.nav__toggle:checked ~ .wrap .nav__toggle-btn span{ background: transparent; }
.nav__toggle:checked ~ .wrap .nav__toggle-btn span::before{ top:0; transform: rotate(45deg); }
.nav__toggle:checked ~ .wrap .nav__toggle-btn span::after{ top:0; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{ background: var(--ink); color: var(--paper-text); position: relative; overflow: hidden; }
.hero .wrap{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem);
}
.hero__title{
  font-size: clamp(2.6rem, 3vw + 1.6rem, 4.6rem);
  color: var(--paper-text);
}
.hero__title em{ font-style: italic; color: var(--bloom); }
.hero__lead{ margin-top: var(--sp-2); max-width: 40ch; }
.hero__actions{ display: flex; gap: var(--sp-2); margin-top: var(--sp-4); flex-wrap: wrap; }

.hero__media{
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 63% 37% 54% 46% / 46% 40% 60% 54%;
  overflow: hidden;
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transition: transform .6s var(--ease);
  box-shadow: -30px 40px 90px rgba(0,0,0,.45);
}
.hero__media:hover{ transform: perspective(1400px) rotateY(0deg) rotateX(0deg) scale(1.015); }
.hero__media img{ width:100%; height:100%; object-fit: cover; }
.hero__media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(200deg, rgba(226,62,118,.18), transparent 55%);
  mix-blend-mode: overlay;
}
.hero__badge{
  position: absolute;
  bottom: -1.25rem; left: -1.25rem;
  background: var(--paper);
  color: var(--ink-text);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  max-width: 13rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  font-family: var(--font-display);
  font-size: .95rem;
}
.hero__badge strong{ display:block; font-size: 1.6rem; color: var(--bloom-dark); }

/* One orchestrated load-in moment for the hero (respects reduced motion below) */
.hero__title span{ display:inline-block; opacity:0; transform: translateY(22px); animation: riseIn .8s var(--ease) forwards; }
.hero__title span:nth-child(1){ animation-delay: .05s; }
.hero__title span:nth-child(2){ animation-delay: .16s; }
.hero__title span:nth-child(3){ animation-delay: .27s; }
.hero__lead{ opacity:0; animation: riseIn .8s var(--ease) forwards; animation-delay: .4s; }
.hero__actions{ opacity:0; animation: riseIn .8s var(--ease) forwards; animation-delay: .52s; }
.hero__media{ opacity:0; animation: heroImgIn 1s var(--ease) forwards; animation-delay: .2s; }
@keyframes riseIn{ to{ opacity:1; transform: translateY(0); } }
@keyframes heroImgIn{
  from{ opacity:0; transform: perspective(1400px) rotateY(-6deg) rotateX(2deg) scale(1.08); }
  to{ opacity:1; transform: perspective(1400px) rotateY(-6deg) rotateX(2deg) scale(1); }
}

/* ---------- Marquee (auto-scrolling, CSS-only) ---------- */
.marquee{
  background: var(--ink-deep);
  border-top: 1px solid var(--line-on-ink);
  border-bottom: 1px solid var(--line-on-ink);
  overflow: hidden;
  padding-block: .95rem;
}
.marquee__track{
  display: flex;
  width: max-content;
  gap: clamp(2rem, 4vw, 4rem);
  animation: scrollX 32s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state: paused; }
.marquee__item{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--muted-on-ink);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}
.marquee__item::after{ content: "•"; color: var(--bloom); margin-left: clamp(2rem, 4vw, 4rem); font-style: normal; }
@keyframes scrollX{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------- Radio-controlled carousel (Featured collection) ---------- */
.carousel{ position: relative; }
.carousel__radio{ position: absolute; opacity: 0; pointer-events: none; }
.carousel__track{
  display: flex;
  transition: transform .7s var(--ease);
}
.carousel__slide{
  min-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
.carousel__media{
  aspect-ratio: 5/4;
  overflow: hidden;
  border-radius: 58% 42% 45% 55% / 50% 45% 55% 50%;
}
.carousel__media img{ width:100%; height:100%; object-fit: cover; transition: transform .8s var(--ease); }
.carousel__slide:hover .carousel__media img{ transform: scale(1.06); }
.carousel__eyebrow{ color: var(--bloom); font-family: var(--font-display); font-style: italic; }
.carousel__name{ font-size: clamp(1.7rem, 1.4vw + 1.2rem, 2.5rem); margin-top: .35rem; }
.carousel__price{ font-family: var(--font-display); font-size: 1.3rem; color: var(--moss); margin-top: .5rem; }
.carousel__desc{ margin-top: var(--sp-2); color: var(--muted); }

#feat-1:checked ~ .carousel__track{ transform: translateX(0%); }
#feat-2:checked ~ .carousel__track{ transform: translateX(-100%); }
#feat-3:checked ~ .carousel__track{ transform: translateX(-200%); }
#feat-4:checked ~ .carousel__track{ transform: translateX(-300%); }

.carousel__dots{ display:flex; gap:.6rem; margin-top: var(--sp-4); }
.carousel__dots label{
  width: 34px; height: 4px;
  background: var(--line);
  cursor: pointer;
  transition: background .3s ease, width .3s ease;
}
#feat-1:checked ~ .carousel__dots label[for="feat-1"],
#feat-2:checked ~ .carousel__dots label[for="feat-2"],
#feat-3:checked ~ .carousel__dots label[for="feat-3"],
#feat-4:checked ~ .carousel__dots label[for="feat-4"]{ background: var(--bloom); width: 54px; }

/* ---------- Process / real sequence (numbers justified: it IS a sequence) ---------- */
.process{ display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-4); position: relative; }
.process::before{
  content:"";
  position:absolute; top: 4.4rem; left: 6%; right: 6%;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--line-on-ink) 0 10px, transparent 10px 18px);
}
.process__step{ position: relative; }
.process__num{
  font-family: var(--font-display);
  font-size: 1rem;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--line-on-ink);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: var(--sp-3);
  color: var(--bloom);
  background: var(--ink);
  position: relative; z-index: 2;
}
.process__media{
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-2);
  transform: perspective(900px) rotateX(0) rotateY(0);
  transition: transform .5s var(--ease);
}
.process__media:hover{ transform: perspective(900px) rotateX(6deg) rotateY(-8deg) scale(1.04); }
.process__media img{ width:100%; height:100%; object-fit:cover; }
.process__title{ font-size: 1.15rem; color: var(--paper-text); margin-bottom: .35rem; }
.process__step p{ color: var(--muted-on-ink); font-size: .95rem; }

/* ---------- Bento gallery ---------- */
.bento{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 11rem;
  gap: var(--sp-2);
}
.bento__item{ position:relative; overflow:hidden; border-radius: var(--radius-lg); }
.bento__item img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.bento__item:hover img{ transform: scale(1.08) rotate(-1deg); }
.bento__item--a{ grid-column: span 3; grid-row: span 2; }
.bento__item--b{ grid-column: span 3; grid-row: span 1; }
.bento__item--c{ grid-column: span 2; grid-row: span 1; }
.bento__item--d{ grid-column: span 2; grid-row: span 2; }
.bento__item--e{ grid-column: span 2; grid-row: span 1; }
.bento__item--f{ grid-column: span 3; grid-row: span 1; }
.bento__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding: 1rem 1.15rem;
  background: linear-gradient(0deg, rgba(8,17,9,.82), transparent);
  color: var(--paper-text);
  font-family: var(--font-display);
  font-style: italic;
  font-size: .95rem;
}

/* ---------- Plant / flip cards (3D) ---------- */
.plants{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.plant-card{ perspective: 1400px; }
.plant-card__inner{
  position: relative;
  aspect-ratio: 3/4;
  transform-style: preserve-3d;
  transition: transform .7s var(--ease);
  border-radius: var(--radius-lg);
}
.plant-card:hover .plant-card__inner,
.plant-card:focus-within .plant-card__inner{ transform: rotateY(180deg); }
.plant-card__face{
  position:absolute; inset:0;
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
  overflow:hidden;
}
.plant-card__face--front img{ width:100%; height:100%; object-fit:cover; }
.plant-card__front-cap{
  position:absolute; left:0; right:0; bottom:0;
  padding: 1rem;
  background: linear-gradient(0deg, rgba(8,17,9,.85), transparent 70%);
  color:#fff;
}
.plant-card__front-cap .name{ font-family: var(--font-display); font-size: 1.15rem; }
.plant-card__front-cap .price{ color: var(--bloom-soft); font-size: .9rem; margin-top:.15rem; }
.plant-card__face--back{
  transform: rotateY(180deg);
  background: var(--ink);
  color: var(--paper-text);
  padding: 1.35rem;
  display:flex; flex-direction:column; justify-content:center; gap:.6rem;
}
.plant-card__face--back .name{ font-family: var(--font-display); font-size: 1.2rem; margin-bottom:.25rem; }
.care-row{ display:flex; justify-content:space-between; font-size: .85rem; color: var(--muted-on-ink); border-bottom: 1px solid var(--line-on-ink); padding-block: .4rem; }
.care-row b{ color: var(--paper-text); font-weight: 600; }
.plant-card__cta{ margin-top:.6rem; align-self:flex-start; }

/* ---------- Testimonials (radio carousel, single slide) ---------- */
.testi{ position: relative; max-width: 46rem; margin-inline:auto; text-align:center; }
.testi__radio{ position:absolute; opacity:0; pointer-events:none; }
.testi__track{ display:flex; transition: transform .6s var(--ease); }
.testi__slide{ min-width:100%; padding-inline: var(--sp-2); }
.testi__quote{ font-family: var(--font-display); font-size: clamp(1.3rem, 1vw + 1.05rem, 1.9rem); line-height:1.35; }
.testi__quote em{ color: var(--bloom); font-style:italic; }
.testi__person{ display:flex; align-items:center; justify-content:center; gap:.75rem; margin-top: var(--sp-3); }
.testi__avatar{ width:46px; height:46px; border-radius:50%; overflow:hidden; }
.testi__avatar img{ width:100%; height:100%; object-fit:cover; }
.testi__avatar--mono{
  display:flex; align-items:center; justify-content:center;
  background: var(--moss); color:#fff; font-family: var(--font-display); font-size: 1.1rem;
}
.testi__name{ font-size:.92rem; color: var(--muted); text-align:left; }
.testi__name b{ display:block; color: var(--ink-text); font-weight:600; }

#t-1:checked ~ .testi__track{ transform: translateX(0%); }
#t-2:checked ~ .testi__track{ transform: translateX(-100%); }
#t-3:checked ~ .testi__track{ transform: translateX(-200%); }
.testi__dots{ display:flex; gap:.5rem; justify-content:center; margin-top: var(--sp-4); }
.testi__dots label{ width:8px; height:8px; border-radius:50%; background: var(--line); cursor:pointer; transition: background .3s ease, transform .3s ease; }
#t-1:checked ~ .testi__dots label[for="t-1"],
#t-2:checked ~ .testi__dots label[for="t-2"],
#t-3:checked ~ .testi__dots label[for="t-3"]{ background: var(--bloom); transform: scale(1.3); }

/* ---------- CTA band ---------- */
.cta-band{
  background: var(--ink);
  color: var(--paper-text);
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4);
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-band::before{
  content:"";
  position:absolute; width: 26rem; height: 26rem;
  background: radial-gradient(circle, rgba(226,62,118,.35), transparent 70%);
  right: -8rem; top: -10rem;
}
.cta-band h2{ color: var(--paper-text); max-width: 24rem; position:relative; }
.cta-band .btn{ position:relative; }

/* ---------- Footer (contact + credit ONLY) ---------- */
.footer{ background: var(--ink); color: var(--paper-text); border-top: 1px solid var(--line-on-ink); }
.footer .wrap{
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: var(--sp-3);
}
.footer__contact{ display:flex; flex-wrap:wrap; justify-content:center; gap: clamp(1.75rem,4vw,3.5rem); }
.footer__contact div{ display:flex; flex-direction:column; gap:.2rem; }
.footer__contact span{ font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-on-ink); }
.footer__contact a, .footer__contact p{ font-family: var(--font-display); font-size: 1.05rem; color: var(--paper-text); }
.footer__bottom{
  border-top: 1px solid var(--line-on-ink);
  padding-block: 1.1rem;
  text-align:center;
  font-size: .82rem;
  color: var(--muted-on-ink);
}

/* ---------- Scroll-driven reveal (progressive enhancement, section headers only) ---------- */
@supports (animation-timeline: view()) {
  @keyframes fadeUpReveal{ from{ opacity:0; transform: translateY(36px);} to{ opacity:1; transform:translateY(0);} }
  .reveal{
    animation: fadeUpReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero__title span, .hero__lead, .hero__actions, .hero__media{ opacity: 1; transform: none; animation: none; }
}

/* ---------- Misc shared ---------- */
.tag{
  display:inline-flex; align-items:center; gap:.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .35rem .85rem;
  font-size: .8rem;
  color: var(--moss);
}
.on-ink .tag{ border-color: var(--line-on-ink); color: var(--moss-light); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(2rem,4vw,4rem); align-items:center; }
.stat{ display:flex; flex-direction:column; gap:.2rem; }
.stat b{ font-family: var(--font-display); font-size: clamp(2rem,2vw + 1rem,3rem); color: var(--bloom); }
.stat span{ color: var(--muted); font-size: .9rem; }
.stats-row{ display:flex; gap: clamp(2rem,5vw,4.5rem); flex-wrap:wrap; }

.blob-mask{ border-radius: 63% 37% 54% 46% / 46% 40% 60% 54%; overflow:hidden; }
.blob-mask--alt{ border-radius: 42% 58% 63% 37% / 41% 47% 53% 59%; overflow:hidden; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero{ background: var(--ink); color: var(--paper-text); }
.page-hero .wrap{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,4vw,4rem);
  align-items:center; padding-block: clamp(3rem,6vw,5.5rem);
}
.page-hero__title{ font-size: clamp(2.4rem, 2.4vw + 1.4rem, 3.75rem); color: var(--paper-text); }
.page-hero__title em{ font-style:italic; color: var(--bloom); }
.page-hero__lead{ margin-top: var(--sp-2); max-width: 42ch; }
.page-hero__media{ aspect-ratio: 6/5; overflow:hidden; }
.page-hero__media img{ width:100%; height:100%; object-fit:cover; }
.crumbs{ display:flex; gap:.5rem; align-items:center; color: var(--muted-on-ink); font-size:.9rem; margin-bottom: var(--sp-2); }
.crumbs a{ color: var(--muted-on-ink); transition: color .2s ease; }
.crumbs a:hover{ color: var(--paper-text); }

/* ---------- Pull statement / quote block ---------- */
.statement{ display:grid; grid-template-columns: .7fr 1.3fr; gap: var(--sp-4); align-items:start; }
.statement__label{ font-family: var(--font-display); font-style: italic; color: var(--bloom); font-size: 1.05rem; }
.statement__text{ font-size: clamp(1.5rem, 1.6vw + 1rem, 2.4rem); line-height:1.28; }
.statement__text em{ color: var(--moss); font-style: italic; }

/* ---------- Timeline (real sequence: founding history) ---------- */
.timeline{ position:relative; max-width: 46rem; }
.timeline::before{ content:""; position:absolute; left: 1.1rem; top:.5rem; bottom:.5rem; width:1px; background: var(--line); }
.timeline__item{ position:relative; padding-left: 3.25rem; padding-bottom: var(--sp-5); }
.timeline__item:last-child{ padding-bottom:0; }
.timeline__dot{
  position:absolute; left:0; top:.15rem;
  width: 2.3rem; height:2.3rem; border-radius:50%;
  background: var(--paper); border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size:.82rem; color: var(--bloom);
}
.timeline__year{ font-family: var(--font-display); font-style:italic; color: var(--moss); font-size:.95rem; }
.timeline__item h3{ font-size:1.4rem; margin-top:.2rem; margin-bottom:.4rem; }
.timeline__item p{ color: var(--muted); }

/* ---------- Team ---------- */
.team{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3); }
.team__card{ perspective: 1200px; }
.team__media{
  aspect-ratio: 4/5; overflow:hidden; border-radius: var(--radius-lg);
  transform: perspective(1000px) rotateY(0) rotateX(0);
  transition: transform .5s var(--ease);
}
.team__card:hover .team__media{ transform: perspective(1000px) rotateY(-8deg) rotateX(4deg) scale(1.03); }
.team__media img{ width:100%; height:100%; object-fit:cover; }
.team__name{ font-family: var(--font-display); font-size:1.25rem; margin-top: var(--sp-2); }
.team__role{ color: var(--muted); font-size:.92rem; }

/* ---------- Values (alternating rows, icon + text) ---------- */
.values{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-4) var(--sp-4); }
.value{ display:flex; gap:1rem; }
.value__icon{
  flex-shrink:0; width:3rem; height:3rem; border-radius:50%;
  background: var(--paper-alt); display:flex; align-items:center; justify-content:center;
  color: var(--moss);
}
.on-ink .value__icon, .section--ink .value__icon{ background: var(--ink-raise); color: var(--bloom); }
.value h3{ font-size:1.2rem; margin-bottom:.35rem; }
.section--ink .value h3{ color: var(--paper-text); }
.value p{ color: var(--muted); font-size:.95rem; }
.on-ink .value p, .section--ink .value p{ color: var(--muted-on-ink); }

/* ---------- Service rows (alternating image/text) ---------- */
.service-row{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,4rem); align-items:center; }
.service-row:nth-child(even) .service-row__media{ order: 2; }
.service-row + .service-row{ margin-top: clamp(3.5rem,6vw,6rem); }
.service-row__media{ aspect-ratio: 5/4; overflow:hidden; }
.service-row__media img{ width:100%; height:100%; object-fit:cover; }
.service-row__num{ font-family: var(--font-display); font-style:italic; color: var(--bloom); font-size:1rem; }
.service-row h3{ font-size: clamp(1.6rem,1.2vw + 1.2rem,2.1rem); margin-top:.4rem; margin-bottom:.75rem; }
.service-row ul{ margin-top: var(--sp-2); display:flex; flex-direction:column; gap:.5rem; }
.service-row li{ display:flex; gap:.6rem; color: var(--muted); font-size:.95rem; }
.service-row li::before{ content:"—"; color: var(--moss); flex-shrink:0; }

/* ---------- Pricing tiers ---------- */
.pricing{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-3); align-items:stretch; }
.price-card{
  border: 1px solid var(--line-on-ink);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  display:flex; flex-direction:column;
}
.price-card--featured{
  background: var(--bloom);
  border-color: var(--bloom);
  transform: translateY(-.75rem);
}
.price-card--featured *{ color:#fff; }
.price-card--featured .care-row{ border-color: rgba(255,255,255,.28); }
.price-card__name{ font-family: var(--font-display); font-size:1.4rem; }
.price-card__price{ font-family: var(--font-display); font-size: 2.4rem; margin-block:.5rem; }
.price-card__price span{ font-size:1rem; font-family: var(--font-body); color: var(--muted-on-ink); }
.price-card--featured .price-card__price span{ color: rgba(255,255,255,.8); }
.price-card ul{ display:flex; flex-direction:column; gap:.65rem; margin-block: var(--sp-3); flex-grow:1; }
.price-card li{ font-size:.92rem; color: var(--muted-on-ink); display:flex; gap:.5rem; }
.price-card--featured li{ color: rgba(255,255,255,.92); }
.price-card li::before{ content:"✓"; color: var(--moss-light); flex-shrink:0; font-weight:700; }
.price-card--featured li::before{ color:#fff; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,4rem); align-items:start; }
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom: var(--sp-3); }
.field label{ font-size:.85rem; color: var(--muted); }
.field input, .field textarea{
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding-block: .6rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink-text);
  resize: vertical;
  transition: border-color .25s ease;
}
.field input:focus, .field textarea:focus{ border-color: var(--bloom); outline:none; }
.map-frame{ border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 4/3; border: 1px solid var(--line); }
.map-frame iframe{ width:100%; height:100%; border:0; filter: grayscale(.25) contrast(1.05); }

/* ---------- Shop category chips ---------- */
.chip-nav{ display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom: var(--sp-5); }
.chip-nav a{
  border:1px solid var(--line); border-radius:999px; padding:.55rem 1.15rem; font-size:.9rem;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.chip-nav a:hover{ background: var(--ink); color: var(--paper-text); border-color: var(--ink); }

.icon{ width:1.4rem; height:1.4rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px){
  .plants{ grid-template-columns: repeat(3,1fr); }
  .bento{ grid-template-columns: repeat(4,1fr); grid-auto-rows: 10rem; }
  .bento__item--a{ grid-column: span 4; grid-row: span 2; }
  .bento__item--b{ grid-column: span 2; }
  .bento__item--c{ grid-column: span 2; }
  .bento__item--d{ grid-column: span 4; grid-row: span 2;}
  .bento__item--e{ grid-column: span 2; }
  .bento__item--f{ grid-column: span 2; }
  .process{ grid-template-columns: repeat(2,1fr); row-gap: var(--sp-5); }
  .process::before{ display:none; }
  .team{ grid-template-columns: repeat(3,1fr); gap: var(--sp-2); }
  .pricing{ grid-template-columns: repeat(3,1fr); gap: var(--sp-2); }
  .price-card--featured{ transform:none; }
}

@media (max-width: 860px){
  .nav__links{
    position: fixed; top: 0; left: 30%; right: 0; height: 100vh; height: 100dvh;
    background: var(--ink);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-5);
    transform: translateX(100%);
    transition: transform .45s var(--ease);
    z-index: 55;
  }
  .nav__toggle:checked ~ .wrap .nav__links{ transform: translateX(0); }
  .nav__links a{ font-family: var(--font-display); font-size: 1.5rem; color: var(--paper-text); }
  .nav__links a::after{ display:none; }
  .nav__cta .btn--ghost{ display:none; }
  .nav__toggle-btn{ display:flex; position:relative; z-index:56; }

  .hero .wrap{ grid-template-columns: 1fr; }
  .hero__media{ order:-1; max-width: 20rem; margin-inline:auto; }
  .hero__badge{ display:none; }

  .carousel__slide{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .plants{ grid-template-columns: repeat(2,1fr); }
  .bento{ grid-template-columns: repeat(2,1fr); }
  .bento__item--a,.bento__item--b,.bento__item--c,.bento__item--d,.bento__item--e,.bento__item--f{ grid-column: span 2; grid-row: span 1; height: 14rem; }
  .cta-band{ flex-direction:column; align-items:flex-start; text-align:left; }
  .footer .wrap{ flex-direction:column; align-items:center; text-align:center; }
  .footer__contact{ flex-direction:column; align-items:center; gap: 1.5rem; }

  .page-hero .wrap{ grid-template-columns: 1fr; }
  .page-hero__media{ order:-1; }
  .statement{ grid-template-columns: 1fr; }
  .team{ grid-template-columns: repeat(2,1fr); }
  .values{ grid-template-columns: 1fr; }
  .service-row{ grid-template-columns: 1fr; }
  .service-row:nth-child(even) .service-row__media{ order: 0; }
  .pricing{ grid-template-columns: 1fr; }
  .price-card--featured{ transform:none; }
  .contact-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .plants{ grid-template-columns: 1fr 1fr; }
  .section{ padding-block: clamp(2.75rem, 10vw, 4rem); }
  .hero__title{ font-size: clamp(2.2rem, 8vw, 3rem); }
  .stats-row{ gap: 2rem; }
}