/* ==========================================================================
   Pages
   Section-level layouts that are specific to one or two pages. Anything
   reused widely lives in components.css instead.
   ========================================================================== */

/* --- Page strip colours (iOS 26 Safari) --------------------------------
   Safari paints the strip behind the iPhone status bar with the BODY's
   computed background-color, and the canvas below the footer (bottom chin
   and overscroll) with the ROOT's — gradients are ignored in both. So body
   carries each page's hero-top shade (sampled from live renders at mobile
   width) and html carries the shared footer forest so the bottom matches
   the footer. Reviews intentionally keeps the cream default from base.css
   for now. */
body[data-page="home"],
body[data-page="about"],
body[data-page="contact"],
body[data-page="locations"] {
  background-color: #98A16C;
}
body[data-page="products"] {
  background-color: #EDE5DA;
}
html:has(body[data-page="home"]),
html:has(body[data-page="about"]),
html:has(body[data-page="contact"]),
html:has(body[data-page="locations"]),
html:has(body[data-page="products"]) {
  background-color: var(--c-forest);
}

/* --- Shared section header (title + trailing link) --------------------- */
.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 44px;
}
.section-head--center { justify-content: center; text-align: center; margin-bottom: 54px; }
.section-head--stacked { display: block; }
.section-head__title { max-width: 520px; }

/* --- Reusable card grid ------------------------------------------------ */
.card-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.card-grid--wide { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card-grid--fill { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* --- Decorative map surface (sage tile with grid lines) ---------------- */
.map-surface {
  position: relative;
  background: var(--c-sage);
  background-image:
    repeating-linear-gradient(0deg,  rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 40px);
}

.map-pin {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--c-coral);
  box-shadow: 0 0 12px rgba(244, 135, 107, 0.7), 0 0 0 5px rgba(244, 135, 107, 0.2);
}
.map-pin--ping {
  box-shadow: none;
  animation: bt-ping 2.4s ease-out infinite;
}

.map-tag {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--c-ink);
  background: rgba(252, 251, 247, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  padding: 10px 16px;
}

/* ==========================================================================
   HOME
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate; /* own stacking context so the watermark can sit at z:-1 */
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  /* Layered, out-of-focus shapes build depth so the hero doesn't read as a
     single flat plane. Painted front-to-back:
       1. warm coral/peach light spilling out from behind the image card,
          stretched wide so both halves share one light source;
       2. soft daylight falling from the top;
       3-5. large, blurred organic blobs in lighter / warmer greens;
       6. the base sage wash. */
  background:
    radial-gradient(80% 95% at 72% 42%, rgba(244, 135, 107, 0.16), rgba(244, 135, 107, 0.06) 40%, transparent 72%),
    radial-gradient(120% 70% at 72% -8%, rgba(255, 255, 255, 0.12), transparent 55%),
    radial-gradient(48% 52% at 12% 18%, rgba(205, 214, 156, 0.20), transparent 62%),
    radial-gradient(44% 50% at 88% 80%, rgba(176, 190, 112, 0.18), transparent 64%),
    radial-gradient(40% 44% at 34% 92%, rgba(222, 228, 182, 0.14), transparent 60%),
    radial-gradient(125% 115% at 46% 32%, #9CA86E 0%, var(--c-sage-deep) 52%, var(--c-sage-dark) 100%);
}
/* Fine matte grain over the whole hero — kills the flat digital colour and
   gives the surface a tactile, paper-like quality. Kept very subtle. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background: url("../img/hero-grain.png") repeat;
  background-size: 180px 180px;
}

/* Cannabis-leaf watermark: rooted in the bottom-left corner, behind the text
   like a soft shadow, fanning and fading out toward the top-right. Rendered as
   a mask so it can be brand-tinted; the gradient mask layer creates the fade. */
.hero__watermark {
  position: absolute;
  left: -90px;
  bottom: -90px;
  width: 460px;
  height: auto;
  z-index: -1;        /* behind the hero content */
  opacity: 0.1;
  pointer-events: none;
  transform: rotate(45deg);  /* stem toward the corner, leaf points top-right */
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  padding: calc(var(--nav-height) + 40px) 0 72px;
}

.hero__copy { padding-left: 0; }
.hero__copy .eyebrow { margin-left: 0; }

/* Title sits beside a glowing vertical bar. */
.hero__title-wrap {
  display: flex;
  gap: 22px;
  margin: 0 0 24px;
}
.hero__title-bar {
  flex: 0 0 4px;
  align-self: stretch;
  border-radius: 4px;
  background: var(--c-coral);
  box-shadow: 0 0 12px rgba(244, 135, 107, 0.38), 0 0 24px rgba(255, 154, 122, 0.2);
  animation: bt-neon 3.6s ease-in-out infinite;
}

/* Hero copy reversed to light for contrast over the green + leaf watermark. */
.hero .display-1 {
  color: #FFF8ED;
  text-shadow: 0 16px 46px rgba(27, 36, 19, 0.24);
}
.hero .eyebrow--on-sage .eyebrow__label {
  color: rgba(255, 248, 237, 0.86);
}

/* Soft neon glow on the accent word in the headline. */
.hero .display-1 .text-coral {
  color: var(--c-coral-soft);
  text-shadow: 0 0 14px rgba(255, 184, 158, 0.42),
               0 0 30px rgba(255, 154, 122, 0.24);
}

.hero__lead {
  max-width: 480px;
  margin-bottom: 36px;
  color: rgba(255, 248, 237, 0.78);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Small trust indicators filling the space below the CTAs. */
.hero__trust {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: rgba(255, 248, 237, 0.74);
}
.hero__trust li { white-space: nowrap; }
.hero__trust li:not(:first-child)::before {
  content: "·";
  margin: 0 12px;
  color: rgba(255, 248, 237, 0.42);
}

/* Social pills live in the touch hero only (desktop reveals them from the
   photo card). Hidden here, switched on in the touch-mode block below. */
.hero__socials {
  display: none;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
/* Rating folds into the trust row on touch; on desktop the photo badge shows
   it instead, so it stays hidden there. */
.hero__trust-rating { display: none; }
.hero__trust-star { color: var(--c-gold); }

/* Touch mode: drop the floating photo card (and its hover-only socials), keep
   the green-gradient text hero, and surface the socials as tappable buttons. */
@media (pointer: coarse), (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__figure { display: none; }
  .hero__socials {
    display: flex;
    flex-wrap: nowrap;
  }
  .hero__socials .social-btn {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    padding-inline: 10px;
    font-size: 12px;
  }
  .hero__socials .social-btn__icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }
  .hero__socials .social-btn__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hero__trust-rating { display: block; }
}

.hero__figure { position: relative; }
.hero__image {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: min(680px, 72vh); /* large, but scales down on short screens */
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* A large, diffused warm halo instead of a tight shadow, so the card reads
     as a light source rather than an object on a surface. */
  box-shadow: 0 20px 80px rgba(244, 135, 107, 0.2),
              0 40px 120px rgba(244, 135, 107, 0.1);
  background: url("../img/IMG_3699.jpg") center / cover no-repeat;
  /* Rests with a slight lean toward the headline (--tilt-z). On a fine pointer,
     tilt.js feeds the cursor position into --tilt-x/y so the card responds in
     3D — the vintage badge becomes a pressed object you turn in the light. */
  --tilt-z: -3deg;
  transform: perspective(1000px)
             rotateX(var(--tilt-x, 0deg))
             rotateY(var(--tilt-y, 0deg))
             rotateZ(var(--tilt-z));
  transition: transform 0.2s var(--ease-out), box-shadow var(--t-slow) var(--ease-out);
}
/* Cursor-tracked glare — a soft highlight that slides across the glossy card. */
.hero__image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(circle at var(--tilt-glare-x, 50%) var(--tilt-glare-y, 50%),
              rgba(255, 255, 255, 0.28), transparent 46%);
  transition: opacity var(--t-fast) var(--ease-out);
}
.hero__image.is-tilting {
  box-shadow: 0 28px 90px rgba(244, 135, 107, 0.26),
              0 50px 130px rgba(244, 135, 107, 0.14);
}
.hero__image.is-tilting::after { opacity: 1; }
/* On narrow screens the image is full-width, so the tilt would clip at the
   screen edge — keep it straight there. */
@media (max-width: 860px) {
  .hero__image { transform: none; }
}

/* Instagram reveal — a frosted "petal" sweeps out of the bottom-left corner
   when the card is hovered or focused. Clipped by the image's overflow:hidden,
   so it's invisible until it slides into place. */
.hero__social {
  position: absolute;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 12px;
  /* Frosted glass base — the brand colour is layered on per-network below.
     Moderate blur + ~0.7 alpha keeps the colours vivid rather than washed. */
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-top: 2px solid rgba(255, 255, 255, 0.7);
  border-right: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 10% 13% 42% 0% / 10% 12% 75% 0%;
  box-shadow: rgba(27, 36, 19, 0.22) -6px 6px 22px 0px;
  transform-origin: bottom left;
  transition: bottom 0.8s ease-in-out, left 0.8s ease-in-out;
}

/* Sizes + stagger: the largest sweeps first, the smaller ones layer on top. */
.hero__social--ig       { width: 44%; height: 44%; bottom: -46%; left: -46%; }
.hero__social--tiktok   { width: 32%; height: 32%; bottom: -34%; left: -34%; transition-delay: 0.12s; }
.hero__social--whatsapp { width: 20%; height: 20%; bottom: -22%; left: -22%; transition-delay: 0.24s; }

/* Brand-tinted frosted fills. */
.hero__social--ig {
  background: radial-gradient(circle at 30% 107%,
              rgba(253, 244, 151, 0.72) 0%,
              rgba(253, 89, 73, 0.68) 45%,
              rgba(214, 36, 159, 0.68) 62%,
              rgba(79, 91, 213, 0.68) 92%);
}
.hero__social--tiktok {
  background: linear-gradient(135deg,
              rgba(37, 244, 238, 0.6) 0%,
              rgba(22, 22, 24, 0.55) 50%,
              rgba(254, 44, 85, 0.64) 100%);
}
.hero__social--whatsapp {
  background: linear-gradient(135deg,
              rgba(37, 211, 102, 0.74) 0%,
              rgba(18, 140, 126, 0.7) 100%);
}

.hero__figure:hover .hero__social,
.hero__figure:focus-within .hero__social {
  bottom: -1px;
  left: -1px;
}

.hero__social-svg {
  width: 22px;
  height: 22px;
  fill: #fff;
  transition: filter 0.4s ease;
}
.hero__social:hover .hero__social-svg,
.hero__social:focus-visible .hero__social-svg {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
}

/* Floating glass rating badge. */
.hero__badge {
  position: absolute;
  bottom: 22px;
  right: -14px;
  background: rgba(252, 251, 247, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(27, 36, 19, 0.18);
  padding: 16px 20px;
}
.hero__badge-score { font-family: var(--font-mono); font-size: 20px; color: var(--c-ink); }
.hero__badge-score span { color: var(--c-gold); }
.hero__badge-meta { font-size: 12px; color: var(--c-moss); margin-top: 2px; }

/* Intro statement strip. */
.home-flow {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 120% at 0% 0%, rgba(151, 163, 106, 0.18), transparent 62%),
    radial-gradient(70% 120% at 100% 0%, rgba(244, 135, 107, 0.12), transparent 62%),
    var(--c-cream);
}
.home-flow::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.10;
  pointer-events: none;
  background: url("../img/hero-grain.png") repeat;
  background-size: 180px 180px;
}
.home-flow__inner {
  position: relative;
  max-width: var(--container-text);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.58fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.intro { max-width: 760px; }
.intro__text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.home-flow__stats {
  display: grid;
  gap: 12px;
}
.home-flow__stats div {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(218, 211, 194, 0.78);
  border-radius: var(--radius-md);
  background: rgba(252, 251, 247, 0.78);
  box-shadow: var(--shadow-soft);
  padding: 18px 20px;
}
.home-flow__stats div::after {
  content: "";
  position: absolute;
  right: -38px;
  bottom: -48px;
  width: 110px;
  height: 110px;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle, rgba(244, 135, 107, 0.16), transparent 68%);
}
.home-flow__stats span {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 6px;
  color: var(--c-coral);
  font-family: var(--font-mono);
  font-size: 11px;
}
.home-flow__stats strong {
  position: relative;
  z-index: 1;
  color: var(--c-forest);
  font-weight: 500;
}
.home-featured {
  padding-top: clamp(34px, 5vw, 58px);
}

/* A card grid tagged [data-carousel] becomes a horizontal swipe carousel on
   phones rather than a tall vertical stack — native scroll-snap, no JS. The
   next card peeks to signal there's more to swipe; the track bleeds to the
   screen edges. Used on the home featured products, reviews and journal. A grid
   can additionally opt into the same treatment on touch tablets with
   [data-carousel-tablet] (see the tablet block below). */
@media (max-width: 640px) {
  [data-carousel] {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  [data-carousel]::-webkit-scrollbar { display: none; }
  [data-carousel] > * {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  /* Carousel cards must not stay hidden waiting on a vertical-scroll reveal
     (the off-screen ones are off to the side, not below). */
  [data-carousel] > [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* Tablet (iPad and other touch tablets, wider than a phone): grids that opt in
   with [data-carousel-tablet] — featured products, reviews and journal — also
   become carousels here, sized to show ~2 cards per view rather than one giant
   card.
   Uses any-pointer (not pointer) so an attached keyboard/trackpad or mouse —
   which makes the iPad's *primary* pointer report as fine — doesn't switch the
   carousel off; the touchscreen still counts as a coarse pointer. */
@media (any-pointer: coarse) and (min-width: 641px), (min-width: 641px) and (max-width: 860px) {
  [data-carousel-tablet] {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  [data-carousel-tablet]::-webkit-scrollbar { display: none; }
  [data-carousel-tablet] > * {
    flex: 0 0 46%;
    scroll-snap-align: start;
  }
  [data-carousel-tablet] > [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .reviews-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .reviews-carousel::-webkit-scrollbar { display: none; }
  .reviews-carousel > .review-card {
    flex: 0 0 46%;
    margin: 0;
    scroll-snap-align: start;
  }
  .reviews-carousel > [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* Reviews carousel (phone): same placement model as the other home carousels,
   with review-card width preserved and only a tight track gap between cards. */
@media (max-width: 640px) {
  .reviews-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .reviews-carousel::-webkit-scrollbar { display: none; }
  .reviews-carousel > .review-card {
    flex: 0 0 90%;
    margin: 0;
    scroll-snap-align: start;
  }
  .reviews-carousel > [data-reveal] {
    opacity: 1;
    transform: none;
  }
}
.home-locations {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 130% at 100% 0%, rgba(244, 135, 107, 0.14), transparent 64%),
    radial-gradient(70% 120% at 0% 100%, rgba(151, 163, 106, 0.16), transparent 62%),
    var(--c-sand);
}
.home-locations::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.10;
  pointer-events: none;
  background: url("../img/hero-grain.png") repeat;
  background-size: 180px 180px;
}
.home-locations > * {
  position: relative;
}

/* Value props (on sage). */
.values { position: relative; overflow: hidden; }
.values::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(100% 70% at 15% 0%, rgba(255, 255, 255, 0.12), transparent 55%);
}
.values__inner { position: relative; max-width: 1100px; margin-inline: auto; }

/* Flexbox (not grid) for the value props so that when the row wraps to 2+1 at
   handheld tablet widths (e.g. iPad mini portrait), the lone third prop fills —
   and so reads as centered, since the box is transparent — its own row instead
   of floating in the left grid column. Identical to grid at 1 and 3 columns. */
.values .card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.value-prop { flex: 1 1 280px; text-align: center; padding: 8px 12px; }
.value-prop__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 22px;
  border-radius: 18px;
  background: rgba(252, 251, 247, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-coral);
}
.value-prop__icon svg { width: 28px; height: 28px; }
.value-prop__icon svg.icon--lg { width: 35px; height: 35px; }
.value-prop__title { font-weight: 500; font-size: 19px; margin-bottom: 10px; }
.value-prop__body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--c-forest);
  max-width: 300px;
  margin-inline: auto;
}

/* Reviews band (dark, glass cards). */
.reviews-band {
  position: relative;
  padding: clamp(72px, 10vw, 120px) var(--gutter);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(44, 58, 34, 0.96), rgba(44, 58, 34, 0.88) 48%, rgba(44, 58, 34, 0.72)),
    url("../img/weed-plant-wallpaper.avif") center right / cover no-repeat,
    var(--c-forest);
}
.reviews-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(70% 120% at 82% 20%, rgba(244, 135, 107, 0.18), transparent 62%);
}
.reviews-band__streak { top: -10%; right: 12%; height: 120%; transform: rotate(-12deg); }
.reviews-band__inner { position: relative; max-width: 1140px; margin-inline: auto; }
.reviews-band__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
}
.reviews-band__meta span {
  border: 1px solid rgba(245, 242, 234, 0.24);
  border-radius: var(--radius-pill);
  background: rgba(245, 242, 234, 0.08);
  padding: 9px 13px;
  color: rgba(245, 242, 234, 0.76);
  font-family: var(--font-mono);
  font-size: 12px;
}

/* Education / journal teasers. */
.article-card__media {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-sand);
  background-image: radial-gradient(70% 80% at 50% 10%, rgba(244, 135, 107, 0.16), transparent 62%);
}
.article-card__media span { font-family: var(--font-mono); font-size: 11px; color: var(--c-moss-light); }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-card__body { padding: 24px; }
.article-card__tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-leaf);
}
.article-card__title { font-weight: 500; font-size: 19px; line-height: 1.3; margin: 12px 0 10px; }
.article-card__snippet { font-size: 14px; line-height: 1.6; color: var(--c-moss); margin-bottom: 16px; }
.article-card__more { font-size: 14px; font-weight: 500; color: var(--c-coral); }

/* Locations call-to-action. */
.location-cta__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px;
  align-items: center;
}
.location-cta__copy-lead { max-width: 420px; margin-bottom: 30px; }
.location-cta__map {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card-hover);
  display: flex;
  align-items: center;
  justify-content: center;
}
.location-cta__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.location-cta__map > span { font-family: var(--font-mono); font-size: 12px; color: rgba(245, 242, 234, 0.8); }

@media (max-width: 860px) {
  .home-flow__inner {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--c-sage);
  padding: clamp(72px, 10vw, 120px) var(--gutter);
  padding-top: calc(var(--nav-height) + clamp(72px, 10vw, 120px));
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(110% 80% at 85% 0%, rgba(255, 255, 255, 0.16), transparent 60%);
}
.page-hero__inner { position: relative; z-index: 1; max-width: var(--container); margin-inline: auto; }
.page-hero--compact {
  padding: clamp(56px, 8vw, 88px) var(--gutter);
  padding-top: calc(var(--nav-height) + clamp(56px, 8vw, 88px));
}

/* Richer gradient hero — same layered composition as the HOME hero (per Ryan):
   centred bright sage radial behind the copy, soft daylight from the top
   right, warm coral light at centre-right, and blurred organic sage blobs. */
.page-hero--rich {
  isolation: isolate; /* own stacking context for the z:-1 leaf watermark */
  background:
    radial-gradient(80% 95% at 72% 42%, rgba(244, 135, 107, 0.16), rgba(244, 135, 107, 0.06) 40%, transparent 72%),
    radial-gradient(120% 70% at 72% -8%, rgba(255, 255, 255, 0.12), transparent 55%),
    radial-gradient(48% 52% at 12% 18%, rgba(205, 214, 156, 0.20), transparent 62%),
    radial-gradient(44% 50% at 88% 80%, rgba(176, 190, 112, 0.18), transparent 64%),
    radial-gradient(40% 44% at 34% 92%, rgba(222, 228, 182, 0.14), transparent 60%),
    radial-gradient(125% 115% at 46% 32%, #9CA86E 0%, var(--c-sage-deep) 52%, var(--c-sage-dark) 100%);
}
/* Status-bar strip tint (iOS 26 Safari): paints ONLY the safe-area zone under
   the iPhone status bar with a mirrored version of the hero's own top edge
   (matching the HOME hero's top edge, per Ryan — all sage, no tan), fading
   softly into the untouched hero below. Zero-height on devices with no top
   inset, so desktop is unaffected. Colours sampled from the mirrored hero's
   top edge at 390px width. */
.page-hero__strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: linear-gradient(90deg, #919F65 0%, #96A26A 25%, #9DA470 50%, #9CA26F 75%, #969F6A 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  pointer-events: none;
}
/* Soft grain for a matte, tactile finish. */
.page-hero--rich::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: overlay;
  background: url("../img/hero-grain.png") repeat;
  background-size: 180px 180px;
}

/* Cannabis-leaf watermark rooted in the bottom-RIGHT corner (mirror of the
   home hero), behind the content. Stem in the corner, leaf points top-left. */
.page-hero__leaf {
  position: absolute;
  right: -90px;
  bottom: -90px;
  width: 460px;
  height: auto;
  z-index: -1;
  opacity: 0.1;
  pointer-events: none;
  transform: rotate(-45deg);
}

.about-hero {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
}
.about-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.72fr);
  gap: clamp(34px, 7vw, 92px);
  align-items: center;
}
.about-hero__copy {
  max-width: 700px;
}
.about-hero__copy .display-2 {
  font-size: clamp(42px, 6.5vw, 72px);
  line-height: 1;
  color: var(--c-cream);
  text-shadow: 0 12px 40px rgba(27, 36, 19, 0.18);
}
.about-hero__copy .eyebrow__label {
  color: var(--c-cream);
}
.about-hero__lead {
  max-width: 620px;
  margin-top: 26px;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.55;
  color: rgba(245, 242, 234, 0.82);
}
.about-hero__markers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.about-hero__markers span {
  border: 1px solid rgba(245, 242, 234, 0.32);
  border-radius: var(--radius-pill);
  background: rgba(245, 242, 234, 0.12);
  padding: 9px 13px;
  color: var(--c-cream);
  font-family: var(--font-mono);
  font-size: 12px;
}
.about-hero__visual {
  position: relative;
  justify-self: end;
  width: min(100%, 430px);
  aspect-ratio: 0.86;
  border-radius: var(--radius-lg);
  box-shadow: 0 28px 70px rgba(27, 36, 19, 0.30);
  --tilt-z: 2deg;
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) rotateZ(var(--tilt-z));
  transform-style: preserve-3d;
  transition: transform 0.18s ease-out, box-shadow var(--t-slow) ease;
  will-change: transform;
}
.about-hero__visual::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid rgba(245, 242, 234, 0.28);
  border-radius: inherit;
}
.about-hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--tilt-glare-x, 50%) var(--tilt-glare-y, 50%), rgba(255, 255, 255, 0.24), transparent 46%);
  transition: opacity var(--t-fast) ease;
}
.about-hero__visual.is-tilting {
  box-shadow: 0 34px 82px rgba(27, 36, 19, 0.34);
}
.about-hero__visual.is-tilting::after {
  opacity: 1;
}
.about-hero__visual img {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}
.about-hero__note {
  position: absolute;
  left: -34px;
  bottom: 32px;
  max-width: 220px;
  border-radius: var(--radius-md);
  background: rgba(252, 251, 247, 0.88);
  box-shadow: var(--shadow-float);
  padding: 16px 18px;
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
}
.about-hero__note span {
  display: block;
  margin-bottom: 6px;
  color: var(--c-coral);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.about-hero__note strong {
  color: var(--c-forest);
  font-weight: 500;
  line-height: 1.25;
}
/* Touch mode: about hero goes text-forward like the home hero — the photo
   card (and its decorative note) drop, and the copy fills the width. The
   pointer-coarse arm catches touch tablets in landscape (wider than 860). */
@media (pointer: coarse), (max-width: 860px) {
  .about-hero__inner {
    grid-template-columns: 1fr;
  }
  .about-hero__visual { display: none; }
}

.statement-grid {
  max-width: var(--container-text);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}
.statement-card {
  position: relative;
  overflow: hidden;
  background: var(--c-cream-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(28px, 4vw, 44px);
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: opacity 0.7s var(--ease-out), transform 0.18s ease-out, box-shadow var(--t-slow) ease;
  will-change: transform;
}
.statement-card[data-reveal]:not(.is-visible) {
  transform: translateY(20px);
}
.statement-card[data-tilt].is-visible {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}
.statement-card.is-tilting {
  box-shadow: var(--shadow-float);
}
.statement-card::before {
  content: "";
  position: absolute;
  right: -64px;
  bottom: -76px;
  width: 190px;
  height: 190px;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle, rgba(244, 135, 107, 0.22), transparent 68%);
}
.statement-card > * {
  position: relative;
  z-index: 1;
}
.statement-card__kicker {
  display: inline-block;
  margin-top: 22px;
  color: var(--c-coral);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.statement-card__title { font-weight: 400; font-size: clamp(22px, 3vw, 24px); margin: 24px 0 16px; }
.statement-card__body { font-size: 16px; line-height: 1.7; color: var(--c-moss); }
.statement-card__detail {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(218, 211, 194, 0.8);
}
.statement-card__detail span {
  color: var(--c-coral);
  font-family: var(--font-mono);
  font-size: 12px;
}
.statement-card__detail strong {
  color: var(--c-forest);
  font-weight: 500;
}

.statement-card--dark {
  position: relative;
  overflow: hidden;
  background: var(--c-forest);
}
.statement-card--dark::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  background: var(--c-coral);
  box-shadow: 0 0 12px rgba(244, 135, 107, 0.4);
}
.statement-card--dark .statement-card__title { color: var(--c-cream); }
.statement-card--dark .statement-card__body { color: rgba(245, 242, 234, 0.78); }
.statement-card--dark .statement-card__detail {
  border-top-color: rgba(245, 242, 234, 0.18);
}
.statement-card--dark .statement-card__detail strong {
  color: var(--c-cream);
}

/* Alternating media / text rows. */
.feature-row {
  max-width: var(--container-text);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.feature-row__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-card-hover);
  background: var(--c-sage) center / cover no-repeat;
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) ease;
}
.feature-row__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(27, 36, 19, 0.58));
}
/* Larger, more editorial heading for the feature rows. */
.feature-row__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--c-ink);
  margin-bottom: 18px;
}
@media (hover: hover) and (pointer: fine) {
  .feature-row:hover .feature-row__media {
    transform: translateY(-4px);
    box-shadow: var(--shadow-float);
  }
}
.feature-row__caption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 1;
  border-radius: var(--radius-pill);
  background: rgba(245, 242, 234, 0.88);
  padding: 9px 12px;
  color: var(--c-forest);
  font-family: var(--font-mono);
  font-size: 11px;
}
.feature-row__copy-lead { max-width: 440px; }
.feature-row__rituals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.feature-row__rituals span {
  border: 1px solid rgba(106, 152, 77, 0.24);
  border-radius: var(--radius-pill);
  background: rgba(106, 152, 77, 0.08);
  padding: 8px 12px;
  color: var(--c-forest);
  font-size: 13px;
}
/* Reverse column order on wide screens without breaking source order. */
@media (min-width: 760px) {
  .feature-row--reverse .feature-row__media { order: 2; }
}

/* Lifestyle tile strip. */
.lifestyle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}
.lifestyle-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-sage);
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
  transition: transform var(--t-slow) ease, box-shadow var(--t-slow) ease;
}
.lifestyle-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 36, 19, 0.08), rgba(27, 36, 19, 0.76));
}
@media (hover: hover) and (pointer: fine) {
  .lifestyle-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.18);
  }
}
.lifestyle-tile--lounge { background-image: url("../img/IMG_3701.jpg"); }
.lifestyle-tile--flower { background-image: url("../img/IMG_3705.jpg"); }
.lifestyle-tile--counter { background-image: url("../img/IMG_3699.jpg"); }
.lifestyle-tile--quiet { background-image: url("../img/IMG_3702.jpg"); }
.lifestyle-tile span {
  position: relative;
  z-index: 1;
  color: rgba(245, 242, 234, 0.92);
}
.lifestyle-tile strong {
  display: block;
  font-weight: 500;
  font-size: 15px;
}
.lifestyle-tile small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(245, 242, 234, 0.68);
}

/* Coral CTA band. */
.cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(62% 120% at 88% 0%, rgba(245, 242, 234, 0.36), transparent 62%),
    radial-gradient(70% 120% at 8% 100%, rgba(44, 58, 34, 0.18), transparent 64%),
    var(--c-coral);
  padding: clamp(56px, 8vw, 96px) var(--gutter);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background: url("../img/hero-grain.png") repeat;
  background-size: 180px 180px;
}
.cta-band__inner {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.cta-band .eyebrow {
  margin-bottom: 16px;
}
.cta-band .eyebrow__label {
  color: var(--c-ink);
}
.cta-band .eyebrow::before {
  background: var(--c-ink);
}
.cta-band__copy {
  max-width: 520px;
  margin: -10px auto 28px;
  color: rgba(27, 36, 19, 0.78);
  font-size: 16px;
  line-height: 1.6;
}
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cta-band .btn--ghost { border-color: var(--c-ink); }
.cta-band .btn--ghost:hover { background: rgba(27, 36, 19, 0.08); }

/* Manifesto — the page's single big typographic moment, on a sage band. */
.manifesto {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 120% at 6% 0%, rgba(255, 255, 255, 0.12), transparent 55%),
    radial-gradient(72% 120% at 100% 100%, rgba(108, 123, 70, 0.5), transparent 60%),
    var(--c-sage);
  padding: clamp(72px, 11vw, 132px) var(--gutter);
}
.manifesto::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background: url("../img/hero-grain.png") repeat;
  background-size: 180px 180px;
}
.manifesto__inner {
  position: relative;
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
}
.manifesto__rule {
  display: block;
  width: 46px;
  height: 3px;
  margin: 0 auto 30px;
  border-radius: 3px;
  background: var(--c-coral);
  box-shadow: var(--glow-coral-sm);
}
.manifesto__quote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(27px, 4.4vw, 50px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #FFF8ED;
  text-shadow: 0 12px 40px rgba(27, 36, 19, 0.18);
}
.manifesto__quote .text-coral {
  color: var(--c-coral-soft);
  text-shadow: 0 0 22px rgba(255, 184, 158, 0.4);
}
.manifesto__attr {
  margin-top: 30px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 248, 237, 0.76);
}

/* House facts — a quiet ledger of the brand's real credentials. */
.about-facts {
  max-width: var(--container-text);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-cream-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.about-fact {
  padding: clamp(26px, 3.4vw, 40px) clamp(14px, 2vw, 26px);
  text-align: center;
  border-left: 1px solid var(--c-border);
}
.about-fact:first-child { border-left: 0; }
.about-fact__num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
  color: var(--c-forest);
}
.about-fact__num span { color: var(--c-coral); }
.about-fact__label {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--c-moss-light);
}
@media (max-width: 720px) {
  .about-facts { grid-template-columns: repeat(2, 1fr); }
  .about-fact { border-top: 1px solid var(--c-border); }
  .about-fact:nth-child(-n + 2) { border-top: 0; }
  .about-fact:nth-child(odd) { border-left: 0; }
}

/* ==========================================================================
   PRODUCTS
   ========================================================================== */

.products-intro {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-height) + clamp(54px, 7vw, 82px)) var(--gutter) clamp(34px, 5vw, 58px);
  background:
    radial-gradient(62% 110% at 92% 0%, rgba(244, 135, 107, 0.18), transparent 64%),
    radial-gradient(70% 120% at 0% 0%, rgba(151, 163, 106, 0.20), transparent 64%),
    var(--c-cream);
}
.products-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.12;
  pointer-events: none;
  background: url("../img/hero-grain.png") repeat;
  background-size: 180px 180px;
}
.products-intro__inner {
  position: relative;
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.74fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: end;
}
.products-intro__copy .display-2 {
  max-width: 720px;
  font-size: clamp(40px, 5.8vw, 68px);
  line-height: 1;
  color: var(--c-forest);
}
.products-intro__lead {
  max-width: 620px;
  margin-top: 22px;
  font-size: clamp(17px, 2vw, 20px);
}
.menu-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.menu-highlight {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(218, 211, 194, 0.78);
  border-radius: var(--radius-md);
  background: rgba(252, 251, 247, 0.72);
  box-shadow: var(--shadow-soft);
  padding: 18px;
}
.menu-highlight::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -44px;
  width: 100px;
  height: 100px;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle, rgba(244, 135, 107, 0.18), transparent 68%);
}
.menu-highlight__num {
  position: relative;
  z-index: 1;
  display: block;
  color: var(--c-forest);
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1;
}
.menu-highlight__label {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 8px;
  color: var(--c-moss-light);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Cards cascade in on first render and on every filter change. "backwards"
   fill holds the from-state through the staggered delay and leaves nothing
   applied afterward, so the hover lift still works once a card has landed. */
@keyframes product-card-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.product-card--enter {
  animation: product-card-in 0.5s var(--ease-out) calc(var(--i, 0) * 55ms) backwards;
}

.products-catalog {
  padding: 0 var(--gutter) clamp(64px, 8vw, 104px);
}
/* Mobile (phones) + small tablets (iPad mini): 2 per row */
.products-catalog [data-products-grid] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Large tablets (iPad Pro, etc.): 3 per row */
@media (min-width: 820px) {
  .products-catalog [data-products-grid] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Laptop & desktop: 4 per row */
@media (min-width: 1120px) {
  .products-catalog [data-products-grid] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.products-toolbar {
  position: sticky;
  top: var(--nav-offset);
  z-index: 20;
  max-width: var(--container);
  margin: 0 auto clamp(28px, 4vw, 42px);
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(218, 211, 194, 0.82);
  border-radius: var(--radius-lg);
  background: rgba(252, 251, 247, 0.86);
  box-shadow: var(--shadow-card);
  padding: 14px;
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
}
.products-toolbar__label {
  display: block;
  color: var(--c-coral);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.products-toolbar strong {
  color: var(--c-forest);
  font-weight: 500;
}
.filter-bar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.filter-chip {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-pill);
  padding: 9px 20px;
  color: var(--c-moss);
  background: rgba(245, 242, 234, 0.72);
  border: 1.5px solid var(--c-border);
  transition: color var(--t-fast) ease, background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.filter-chip:hover { border-color: var(--c-coral); }
.filter-chip[aria-pressed="true"] {
  color: var(--c-ink);
  background: var(--c-coral);
  border-color: var(--c-coral);
}

.load-more-wrap { text-align: center; margin-top: 48px; }
.load-more-wrap[hidden] { display: none; }

@media (max-width: 860px) {
  .products-intro__inner {
    grid-template-columns: 1fr;
  }
  .menu-highlights {
    grid-template-columns: 1fr;
  }
  .products-toolbar {
    position: relative;
    top: auto;
    align-items: flex-start;
    flex-direction: column;
  }
  .filter-bar__inner {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .products-catalog {
    padding-inline: 12px;
  }
  .products-catalog > .container {
    padding-inline: 0;
  }
  .products-catalog [data-products-grid] {
    gap: 10px;
  }
  .products-catalog .product-card__media--wide {
    aspect-ratio: 1 / 1;
  }
  .products-catalog .product-card__body {
    padding: 14px;
  }
  .products-catalog .product-card__title {
    font-size: 15px;
  }
  .products-catalog .product-card__type,
  .products-catalog .product-card__spec {
    font-size: 11px;
  }
  .products-catalog .product-card__row {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .products-catalog .product-card__price {
    font-size: 16px;
  }
}

/* ==========================================================================
   LOCATIONS
   ========================================================================== */

.locations-hero {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
}
.locations-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(34px, 7vw, 92px);
  align-items: center;
}
.locations-hero__copy {
  max-width: 760px;
}
.locations-hero__copy .display-2 {
  color: var(--c-cream);
  font-size: clamp(42px, 6.5vw, 72px);
  line-height: 1;
  text-shadow: 0 16px 46px rgba(27, 36, 19, 0.24);
}
.locations-hero__copy .eyebrow__label {
  color: var(--c-cream);
}
.locations-hero__lead {
  max-width: 640px;
  margin-top: 26px;
  color: rgba(245, 242, 234, 0.82);
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.55;
}
.locations-hero__markers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}
.locations-hero__markers span {
  border: 1px solid rgba(245, 242, 234, 0.32);
  border-radius: var(--radius-pill);
  background: rgba(245, 242, 234, 0.12);
  padding: 9px 13px;
  color: var(--c-cream);
  font-family: var(--font-mono);
  font-size: 12px;
}
.locations-section {
  position: relative;
}
.locations-layout {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(340px, 0.92fr) minmax(360px, 1.08fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: stretch;
}

.locations-map-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--c-cream-card);
  box-shadow: var(--shadow-card-hover);
}
.locations-map {
  flex: 1;
  min-height: 360px;
  overflow: hidden;
  background: var(--c-sage);
}
.locations-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.locations-map-card__footer {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
.locations-map-card__label {
  display: block;
  color: var(--c-coral);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.locations-map-card__footer strong {
  color: var(--c-forest);
  font-weight: 500;
}

.store-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.store-list__head {
  margin-bottom: 10px;
}
.store-list__head .heading {
  max-width: 520px;
}

.store-card {
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--c-cream-card);
  border: 1px solid rgba(218, 211, 194, 0.72);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(22px, 3vw, 28px);
  transition: box-shadow var(--t-base) ease, transform var(--t-base) ease, border-color var(--t-base) ease;
}
.store-card::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -78px;
  width: 180px;
  height: 180px;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle, rgba(244, 135, 107, 0.16), transparent 68%);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .store-card:hover {
    border-color: rgba(244, 135, 107, 0.38);
    box-shadow: 0 16px 34px rgba(27, 36, 19, 0.12), 0 0 18px rgba(244, 135, 107, 0.22);
    transform: translateY(-3px);
  }
}
.store-card__num {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--c-forest);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-cream);
}
.store-card__body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
}
.store-card__topline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.store-card__name {
  color: var(--c-forest);
  font-weight: 500;
  font-size: clamp(19px, 2vw, 22px);
}
.store-card__tag {
  border-radius: var(--radius-pill);
  background: rgba(106, 152, 77, 0.10);
  padding: 6px 9px;
  color: var(--c-leaf);
  font-family: var(--font-mono);
  font-size: 11px;
}
.store-card__addr {
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-moss-light);
  margin-bottom: 7px;
}
.store-card__hours {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-moss);
  margin-bottom: 16px;
}
.store-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-coral);
  text-decoration: none;
}
.store-card__link::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t-fast) ease;
}
@media (hover: hover) and (pointer: fine) {
  .store-card__link:hover::after {
    transform: translateX(3px) rotate(45deg);
  }
}

.locations-cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(62% 120% at 88% 0%, rgba(245, 242, 234, 0.36), transparent 62%),
    radial-gradient(70% 120% at 8% 100%, rgba(44, 58, 34, 0.18), transparent 64%),
    var(--c-coral);
  padding: clamp(64px, 8vw, 104px) var(--gutter);
}
.locations-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background: url("../img/hero-grain.png") repeat;
  background-size: 180px 180px;
}
.locations-cta__inner {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.locations-cta .eyebrow {
  margin-bottom: 16px;
}
.locations-cta .eyebrow__label {
  color: var(--c-ink);
}
.locations-cta .eyebrow::before {
  background: var(--c-ink);
}
.locations-cta .heading {
  margin-bottom: 18px;
}
.locations-cta__copy {
  max-width: 560px;
  margin: 0 auto 30px;
  color: rgba(27, 36, 19, 0.78);
  font-size: 16px;
  line-height: 1.65;
}

@media (max-width: 860px), (pointer: coarse) {
  .locations-hero__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .locations-layout {
    grid-template-columns: 1fr;
  }
  .locations-map-card {
    position: relative;
    top: auto;
  }
  .locations-map {
    flex: none;
    min-height: 0;
    aspect-ratio: 16 / 12;
  }
}

/* ==========================================================================
   REVIEWS
   ========================================================================== */

.reviews-hero {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: clamp(64px, 9vw, 104px) var(--gutter) clamp(56px, 8vw, 88px);
  padding-top: calc(var(--nav-height) + clamp(64px, 9vw, 104px));
}
.reviews-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  margin-top: 24px;
}
.reviews-hero__score { display: flex; align-items: baseline; gap: 10px; }
.reviews-hero__score-num { font-family: var(--font-mono); font-size: 32px; color: var(--c-cream); }
.reviews-hero__score-stars { font-family: var(--font-mono); font-size: 16px; letter-spacing: 1px; color: var(--c-gold); }
.reviews-hero__count { font-size: 14px; color: rgba(245, 242, 234, 0.6); }

.reviews-masonry-section {
  position: relative;
  overflow: hidden;
  background: var(--c-sage);
  padding: clamp(48px, 7vw, 80px) var(--gutter) clamp(56px, 8vw, 96px);
}
.reviews-masonry-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(80% 90% at 85% 0%, rgba(245, 242, 234, 0.10), transparent 60%);
}
.reviews-masonry {
  position: relative;
  max-width: var(--container);
  margin-inline: auto;
  columns: 320px;
  column-gap: 24px;
}

/* Light glass card for the masonry (over sage rather than forest). */
.review-card--frost {
  break-inside: avoid;
  margin-bottom: 24px;
  background: rgba(252, 251, 247, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 22px;
  box-shadow: 0 8px 32px rgba(27, 36, 19, 0.14);
  padding: 26px;
  transition: transform var(--t-slow) ease, box-shadow var(--t-slow) ease;
}
@media (hover: hover) and (pointer: fine) {
  .review-card--frost:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 38px rgba(27, 36, 19, 0.18);
  }
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact-layout {
  max-width: var(--container-text);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: stretch;
}

/* Details — dark forest card with coral icon rows (mirrors the About cards). */
.contact-info {
  position: relative;
  overflow: hidden;
  background: var(--c-forest);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  padding: clamp(28px, 4vw, 44px);
  color: var(--c-cream);
}
.contact-info::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  background: var(--c-coral);
  box-shadow: 0 0 12px rgba(244, 135, 107, 0.4);
}
.contact-info .rule { margin-bottom: 22px; }
.contact-info__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 26px);
  color: var(--c-cream);
  margin-bottom: 30px;
}
.contact-info__list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.contact-info__item { display: flex; gap: 16px; align-items: flex-start; }
.contact-info__icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(244, 135, 107, 0.14);
  border: 1px solid rgba(244, 135, 107, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-coral);
}
.contact-info__icon svg { width: 20px; height: 20px; }
.contact-info__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-coral);
}
.contact-info__value {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(245, 242, 234, 0.9);
  margin-top: 5px;
}
.contact-info__value.mono { font-family: var(--font-mono); }

/* Form — light card. */
.contact-form-card {
  background: var(--c-cream-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 4vw, 40px);
}
.contact-form-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 26px);
  margin-bottom: 22px;
}
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-form__note { font-size: 12px; color: var(--c-moss-light); text-align: center; }

.contact-form__success { text-align: center; padding: 40px 8px; }
.contact-form__success[hidden] { display: none; }
.contact-form__success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: var(--radius-pill);
  background: var(--c-leaf);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-cream);
  font-size: 26px;
}
.contact-form__success-title { font-weight: 400; font-size: 22px; margin-bottom: 8px; }
.contact-form__success-text { font-size: 15px; color: var(--c-moss); }

/* Hero: copy beside a fan of selectable social cards. */
.contact-page-hero {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
}
.about-hero,
.locations-hero,
.contact-page-hero {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  padding-top: var(--nav-height);
  padding-bottom: 0;
}
.contact-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(34px, 6vw, 76px);
  align-items: center;
}
.contact-hero__title {
  max-width: 640px;
  margin-bottom: 16px;
  font-size: clamp(46px, 7vw, 78px);
  line-height: 1;
  color: var(--c-cream);
}
.contact-hero__copy .eyebrow__label {
  color: var(--c-cream);
}
.contact-hero__lead {
  max-width: 620px;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.55;
  color: rgba(245, 242, 234, 0.82);
}

/* Social cards: a fanned "hand" of platform cards. Calm frosted glass at
   rest; on hover/focus each one floods with its network's signature gradient. */
.social-fan {
  display: grid;
  grid-template-columns: repeat(3, minmax(132px, 1fr));
  gap: 16px;
  justify-content: center;
  align-items: center;
  isolation: isolate;
}
.social-fan__card {
  position: relative;
  z-index: 1;
  min-height: 322px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  text-decoration: none;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.46), transparent 62%),
    linear-gradient(145deg, rgba(252, 251, 247, 0.72), rgba(245, 242, 234, 0.34));
  box-shadow: var(--shadow-float);
  padding: 34px 18px;
  transform: rotate(calc(var(--r) * 1deg));
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 0.5s var(--ease-spring),
              box-shadow 0.35s var(--ease-out),
              border-color 0.35s var(--ease-out);
}
/* Brand-gradient flood — hidden at rest, fades in on hover/focus (z below content). */
.social-fan__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
/* Glossy sheen, painted above the flood. */
.social-fan__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.42), transparent 40%);
}
.social-fan__card > * {
  position: relative;
  z-index: 3;
}
.social-fan__card:hover,
.social-fan__card:focus-visible {
  z-index: 4;
  transform: rotate(0deg) translateY(-12px) scale(1.02);
  box-shadow: 0 30px 60px rgba(27, 36, 19, 0.32);
  border-color: rgba(255, 255, 255, 0.85);
  outline: none;
}
.social-fan__card:hover::after,
.social-fan__card:focus-visible::after { opacity: 1; }

.social-fan__icon {
  width: 66px;
  height: 66px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 16px rgba(27, 36, 19, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s var(--ease-spring);
}
.social-fan__card:hover .social-fan__icon,
.social-fan__card:focus-visible .social-fan__icon {
  transform: translateY(-2px) scale(1.07);
}
.social-fan__icon svg {
  width: 30px;
  height: 30px;
}
.social-fan__label {
  font-weight: 600;
  font-size: 18px;
  color: var(--c-ink);
  transition: color 0.3s var(--ease-out);
}
.social-fan__meta {
  max-width: 132px;
  color: rgba(27, 36, 19, 0.6);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  transition: color 0.3s var(--ease-out);
}
.social-fan__action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: rgba(27, 36, 19, 0.08);
  color: var(--c-ink);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.social-fan__action::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t-fast) var(--ease-out);
}
.social-fan__card:hover .social-fan__action::after,
.social-fan__card:focus-visible .social-fan__action::after {
  transform: translateX(3px) rotate(45deg);
}

/* Flooded state: flip text to white (with a faint shadow so it stays legible
   over the brighter parts of each gradient) and turn the action pill solid. */
.social-fan__card:hover .social-fan__label,
.social-fan__card:focus-visible .social-fan__label,
.social-fan__card:hover .social-fan__meta,
.social-fan__card:focus-visible .social-fan__meta {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
.social-fan__card:hover .social-fan__action,
.social-fan__card:focus-visible .social-fan__action {
  background: rgba(255, 255, 255, 0.94);
  text-shadow: none;
}

/* Per-network: resting glyph colour, the flood gradient, the hover verb tint,
   and the fan angle. */
.social-fan__card--ig svg { fill: #E1306C; }
.social-fan__card--wa svg { fill: #25D366; }
.social-fan__card--tt svg { fill: var(--c-ink); }

.social-fan__card--ig::after {
  background: radial-gradient(circle at 30% 107%,
              #FDF497 0%, #FD5949 45%, #D6249F 62%, #4F5BD5 92%);
}
.social-fan__card--wa::after {
  background: linear-gradient(150deg, #25D366 0%, #128C7E 100%);
}
.social-fan__card--tt::after {
  background: linear-gradient(150deg, #25F4EE 0%, #0B0B0F 46%, #FE2C55 100%);
}

.social-fan__card--ig:hover .social-fan__action,
.social-fan__card--ig:focus-visible .social-fan__action { color: #C13584; }
.social-fan__card--wa:hover .social-fan__action,
.social-fan__card--wa:focus-visible .social-fan__action { color: #128C7E; }
.social-fan__card--tt:hover .social-fan__action,
.social-fan__card--tt:focus-visible .social-fan__action { color: #0B0B0F; }

.social-fan__card--ig { --r: -7; }
.social-fan__card--wa { --r: 0; }
.social-fan__card--tt { --r: 7; }

/* Touch press parity with the home social buttons: the brand gradient floods
   on press (:active), matching their tap feedback. Desktop keeps the richer
   hover straighten/lift above. */
.social-fan__card:active { transform: rotate(0deg) scale(0.99); }
.social-fan__card:active::after { opacity: 1; }
.social-fan__card:active .social-fan__label,
.social-fan__card:active .social-fan__meta {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

/* Desktop / laptop (the normal-navbar screen sizes — the exact inverse of the
   burger-nav query below): present the contact socials as a fanned "hand" of
   frosted glass cards. They overlap and tilt at rest; hovering the row
   straightens and opens the hand, and hovering a single card lifts it and
   floods it with its network gradient. Phones + touch tablets (the burger
   media query further down) keep their compact pills untouched.

   Everything scales fluidly with the viewport via the --fan-* tokens below, so
   the hand grows from a 13" MacBook Air up to a 4K display while always staying
   inside its ~40%-wide hero column (the page caps at a 1200px container, so the
   overlap on hover is *reduced* rather than spread to positive margins — that
   keeps all three cards within the column at every width instead of clipping). */
@media (min-width: 861px) and (pointer: fine) {
  .social-fan {
    /* Fluid sizing tokens — clamped so they grow with the window yet never
       exceed what the hero's social column can hold. */
    --fan-w: clamp(138px, 12.6vw, 166px);
    --fan-h: clamp(196px, 18vw, 246px);
    --fan-overlap: clamp(-48px, -3.4vw, -30px); /* resting overlap (negative) */
    --fan-open: clamp(-22px, -1.6vw, -8px);     /* looser overlap on row hover */
    --fan-band: clamp(38px, 3.2vw, 46px);       /* foot label band height */
    --fan-icon: clamp(40px, 3.6vw, 52px);
    --fan-radius: clamp(14px, 1.3vw, 18px);

    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    isolation: isolate;
  }
  .social-fan__card {
    position: relative;
    width: var(--fan-w);
    height: var(--fan-h);
    min-height: 0;
    flex-direction: column;
    justify-content: center;
    gap: clamp(12px, 1.4vw, 18px);
    margin: 0 var(--fan-overlap);
    padding: clamp(22px, 2.4vw, 32px) clamp(12px, 1.4vw, 18px)
             calc(var(--fan-band) + clamp(14px, 1.4vw, 20px));
    border-radius: var(--fan-radius);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(rgba(255, 255, 255, 0.14), transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
    transform: rotate(calc(var(--r) * 1deg));
    transition: transform 0.5s var(--ease-spring),
                margin 0.5s var(--ease-spring),
                box-shadow 0.35s var(--ease-out),
                border-color 0.35s var(--ease-out);
  }
  /* Straighten + open the whole hand when the row is hovered/focused. */
  .social-fan:hover .social-fan__card,
  .social-fan:focus-within .social-fan__card {
    transform: rotate(0deg);
    margin: 0 var(--fan-open);
  }
  /* Lift the single card under the pointer (its brand flood comes from the
     base .social-fan__card:hover::after rule). */
  .social-fan:hover .social-fan__card:hover,
  .social-fan__card:focus-visible {
    transform: rotate(0deg) translateY(-14px) scale(1.04);
    z-index: 4;
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.34);
  }

  /* Wider fan angles than the subtle resting tilt used elsewhere. */
  .social-fan__card--ig { --r: -16; }
  .social-fan__card--wa { --r: 0; }
  .social-fan__card--tt { --r: 16; }

  /* Large white glyph sitting straight on the glass (no pill puck). */
  .social-fan__icon {
    width: auto;
    height: auto;
    flex: none;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .social-fan__icon svg {
    width: var(--fan-icon);
    height: var(--fan-icon);
  }
  .social-fan__card--ig svg,
  .social-fan__card--wa svg,
  .social-fan__card--tt svg {
    fill: #fff;
  }

  /* Platform name as a frosted band pinned to the foot of the card. */
  .social-fan__label {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--fan-band);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: clamp(14px, 1.15vw, 17px);
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .social-fan__card:hover .social-fan__label,
  .social-fan__card:focus-visible .social-fan__label {
    color: #fff;
    text-shadow: none;
    background: rgba(255, 255, 255, 0.16);
  }

  /* Drop the supporting copy + CTA pill so each tile reads as clean glass. */
  .social-fan__meta,
  .social-fan__action {
    display: none;
  }
}

/* Burger-nav mode: collapse the large social cards into one row of compact
   pill buttons, matching phones and touch tablets where the hamburger appears. */
@media (max-width: 860px), (pointer: coarse) {
  .contact-hero { grid-template-columns: 1fr; }
  .social-fan {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 14px;
  }
  .social-fan__card {
    isolation: isolate;
    min-height: 0;
    height: 44px;
    flex-direction: row;
    justify-content: center;
    gap: 5px;
    border-radius: var(--radius-pill);
    border-color: rgba(255, 248, 237, 0.28);
    background: rgba(255, 248, 237, 0.12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 8px 6px;
    color: #FFF8ED;
    transform: none;
    box-shadow: none;
    transition: transform var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
  }
  .social-fan__card::before {
    display: none;
  }
  .social-fan__card::after {
    z-index: 0;
    transition: opacity var(--t-fast) var(--ease-out);
  }
  .social-fan__card:hover::after,
  .social-fan__card:focus-visible::after {
    opacity: 0;
  }
  .social-fan__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background: transparent;
    box-shadow: none;
  }
  .social-fan__card .social-fan__icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
  }
  .social-fan__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    color: currentColor;
  }
  .social-fan__card:hover .social-fan__icon,
  .social-fan__card:focus-visible .social-fan__icon {
    transform: none;
  }
  .social-fan__card:hover .social-fan__label,
  .social-fan__card:focus-visible .social-fan__label,
  .social-fan__card:active .social-fan__label {
    color: currentColor;
    text-shadow: none;
  }
  .social-fan__meta,
  .social-fan__action {
    display: none;
  }
  .social-fan__card:hover,
  .social-fan__card:focus-visible {
    transform: none;
    box-shadow: none;
    border-color: rgba(255, 248, 237, 0.28);
    color: #FFF8ED;
  }
  .social-fan__card:active {
    transform: scale(0.97);
    border-color: transparent;
    color: #fff;
  }
  .social-fan__card:active::after {
    opacity: 1;
  }
}