/* ============================================================
   Brand tokens (mirrors src/index.css HSL variables)
   ============================================================ */
:root {
  --pf-background: hsl(30, 25%, 97%);
  --pf-foreground: hsl(25, 10%, 15%);
  --pf-card: hsl(30, 20%, 99%);
  --pf-primary: hsl(24, 72%, 50%);
  /*
   * The brand orange is a DECORATIVE colour. At hsl(24,72%,50%) it is 3.29:1 as
   * text on near-white and 3.37:1 behind white text - both fail WCAG AA, so it
   * can only be used for borders, tints, masked shapes and large display type.
   *
   * Use this token instead for ANY text at or below ~18px, and for any surface
   * that carries white text (buttons, active pills).
   *
   * L34%, and it has to be: the binding constraint is the `accent` surface
   * (#EBE2D9), the darkest background this colour lands on. There it is 4.87:1 -
   * L36% was 4.46:1 and L38% worse still. On cream it is 5.64:1 and behind white
   * text 6.23:1. This is deliberately the SAME value as the `primary` palette
   * entry in the global styles, so block content and hand-written CSS cannot drift into
   * two different "accessible oranges". Change one, change the other.
   */
  --pf-primary-accessible: hsl(24, 80%, 34%);
  --pf-primary-soft: hsl(24, 72%, 50%, 0.12);
  --pf-secondary: hsl(20, 55%, 45%);
  --pf-muted: hsl(30, 15%, 94%);
  /* L38%, down from an original 45% (#7c716a, 4.29:1 on cream - failing).
     40% cleared cream at 5.17:1 but was still only 4.47:1 on the `accent`
     surface (#EBE2D9), which is the darkest background this lands on; 38% is
     4.83:1 there and 5.59:1 on cream. Matches the `muted-foreground` palette
     entry in the global styles on purpose - keep the two in step. Do not raise it. */
  --pf-muted-foreground: hsl(25, 8%, 38%);
  --pf-border: hsl(30, 15%, 88%);
  --pf-charcoal: #2D2926;
  --pf-charcoal-dark: #1A1816;
  --pf-stone: #D9D4CD;
  --pf-radius: 0.75rem;
}

/* ============================================================
   Base typography refinements
   ============================================================ */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  letter-spacing: -0.02em;
}

html {
  scroll-behavior: smooth;
}

/* Prevent sideways page scroll on mobile when an element overflows the viewport.
   `clip` (not `hidden`) is used on purpose: it stops horizontal scrolling without
   creating a scroll container, so it does NOT break position:sticky elements. */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

/* Footer top-margin reset (direct child of .wp-site-blocks) */
.wp-site-blocks > footer {
  margin-block-start: 0;
}

/* ============================================================
   Custom scrollbar (ported from src/index.css)
   ============================================================ */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* ============================================================
   .nav-link - underline-grow animation
   ============================================================ */
.nav-link {
  position: relative;
  padding: 0.5rem 0;
  color: hsl(25, 15%, 30%);
  transition: color 0.3s ease;
  text-decoration: none;
}
.nav-link:hover {
  color: var(--pf-primary);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 0;
  background: var(--pf-primary);
  transition: width 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-link:hover::after {
  width: 100%;
}
/* nav-links rendered as core navigation items on a dark header */
.pf-header .wp-block-navigation .wp-block-navigation-item__content {
  position: relative;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.3s ease;
}
.pf-header .wp-block-navigation a.wp-block-navigation-item__content:hover {
  color: #fff;
}

/* ============================================================
   .glass-card - frosted glass
   ============================================================ */
.glass-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.45));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 1.25rem;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 8px 24px rgba(0, 0, 0, 0.05);
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.glass-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.06),
    0 0 28px hsl(24, 72%, 50%, 0.22);
}

/* ============================================================
   .card-organic - soft shadow card + hover lift
   ============================================================ */
.card-organic {
  background: hsl(30, 20%, 99%);
  border: 1px solid hsl(30, 15%, 90%);
  border-radius: 1.25rem;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.02),
    0 4px 12px rgba(0, 0, 0, 0.04),
    0 16px 32px rgba(0, 0, 0, 0.03);
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-organic:hover {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.02),
    0 8px 20px rgba(0, 0, 0, 0.06),
    0 24px 48px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

/* ============================================================
   .gradient-button - burnt-orange primary CTA
   Static rich radial gradient (the React build animates @property
   custom props; this is a faithful static fallback that warms on hover).
   ============================================================ */
.gradient-button .wp-block-button__link,
.wp-block-button.gradient-button .wp-block-button__link {
  position: relative;
  color: var(--pf-charcoal) !important;
  background: radial-gradient(
    150% 180% at 11% 140%,
    #fdf6f0 37%,
    #faeee4 61%,
    #f5dece 78%,
    #f0cfb8 89%,
    #ecc2a5 100%
  ) !important;
  border: 1px solid hsl(24, 72%, 50%, 0.3);
  box-shadow: 0 6px 18px hsl(24, 72%, 50%, 0.18);
  transition: background 0.5s ease, box-shadow 0.5s ease, transform 0.3s ease, border-color 0.5s ease;
}
.gradient-button .wp-block-button__link:hover,
.wp-block-button.gradient-button .wp-block-button__link:hover {
  background: radial-gradient(
    120% 103% at 0% 92%,
    #fff5ec 0%,
    #fde4cc 9%,
    #f8c49a 21%,
    #f0a56b 71%,
    #e8924f 86%
  ) !important;
  border-color: hsl(24, 72%, 60%, 0.7);
  box-shadow: 0 8px 26px hsl(24, 72%, 50%, 0.32);
  transform: translateY(-1px);
}

/* Solid burnt-orange CTA on dark bands (keeps high contrast) */
.cta-on-dark .wp-block-button__link {
  background: var(--pf-primary) !important;
  color: #fff !important;
  box-shadow: 0 0 22px hsl(24, 72%, 50%, 0.5);
  transition: box-shadow 0.3s ease, transform 0.3s ease, background 0.3s ease;
}
.cta-on-dark .wp-block-button__link:hover {
  background: hsl(24, 72%, 56%) !important;
  box-shadow: 0 0 34px hsl(24, 72%, 55%, 0.7);
  transform: translateY(-1px);
}

/* ============================================================
   Foundry Club pill (glowing burnt-orange badge in header)
   ============================================================ */
.foundry-club-pill a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  background: var(--pf-charcoal);
  border: 1px solid hsl(24, 72%, 50%, 0.4);
  color: var(--pf-primary) !important;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 12px hsl(24, 72%, 50%, 0.4);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.foundry-club-pill a::before {
  content: '';
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--pf-primary);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  filter: drop-shadow(0 0 4px hsl(24, 72%, 50%, 0.7));
}
.foundry-club-pill a:hover {
  background: hsl(25, 12%, 18%);
  box-shadow: 0 0 18px hsl(24, 72%, 50%, 0.65);
}

/* ============================================================
   Data type - IBM Plex Mono utility (CAS numbers, specs, prices)
   ============================================================ */
.data-mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.01em;
}

/* Emphasized hero word.
 *
 * Was a real Playfair italic. Headings moved to Hanken Grotesk on 2026-08-07 and
 * the shipped woff2 is a normal-style variable face only (weight 400-800, no
 * italic), so `font-style: italic` here bought a browser-SYNTHESIZED oblique -
 * a mechanical slant with uneven stems and no true italic letterforms. That
 * reads as a defect at 48px. Emphasis is carried by the orange + a weight step
 * instead, which is how a grotesque is normally emphasized.
 *
 * To go back to a real italic, ship hanken-grotesk-latin-italic.woff2 alongside
 * the roman, add a matching fontFace entry with "fontStyle": "italic" to the
 * `sans` family in the global styles, then restore `font-style: italic` below. Do not
 * restore it without the font file.
 */
.editorial-italic {
  font-family: 'Hanken Grotesk', sans-serif;
  font-style: normal;
  font-weight: 500;
}

/* Eyebrow / kicker label */
.pf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  color: var(--pf-primary);
}

/* ============================================================
   Trust facts - equal-height cards
   ============================================================ */
.equal-cards > .wp-block-column {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}
.equal-cards > .wp-block-column > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.equal-cards .cta-bottom {
  margin-top: auto;
  justify-content: center;
}

.trust-fact {
  border: 1px solid var(--pf-border);
  border-radius: 1rem;
  background: hsl(30, 20%, 99%);
  text-align: center;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.trust-fact:hover {
  transform: translateY(-3px);
  border-color: hsl(24, 72%, 50%, 0.4);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
}

/* ============================================================
   Section divider (organic gradient hairline)
   ============================================================ */
.divider-organic {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, hsl(30, 15%, 80%), transparent);
}

/* ============================================================
   Footer logo - render the dark PNG as a soft white mark on charcoal
   ============================================================ */
.pf-footer .wp-block-image img {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

/* ============================================================
   WooCommerce - inherit brand
   ============================================================ */
.woocommerce ul.products li.product,
.wc-block-grid__product {
  text-align: left;
}
.woocommerce .price,
.wc-block-grid__product-price,
.wp-block-woocommerce-product-price {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--pf-foreground);
}
.woocommerce a.button,
.woocommerce button.button,
.wp-block-button__link.add_to_cart_button {
  background: var(--pf-primary);
  color: #fff;
  border-radius: var(--pf-radius);
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
  transition: background 0.3s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--pf-secondary);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
  font-family: 'Hanken Grotesk', sans-serif;
}

/* ============================================================
   Entrance / scroll-reveal animations (ported reveal-up)
   ============================================================ */
@keyframes reveal-up {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

.fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: reveal-up 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.animate-on-scroll {
  transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1), transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
/* Only hide-then-reveal when JS is active (progressive enhancement: no-JS = visible). */
.js .animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
}
.js .animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js .animate-on-scroll,
  .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  animation: reveal-up 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.08s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.18s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.28s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.38s; }

/* ============================================================
   prefers-reduced-motion (required)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .animate-on-scroll,
  .fade-up,
  .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   Editor: keep animated content visible while editing (required)
   ============================================================ */
.editor-styles-wrapper .fade-up,
.editor-styles-wrapper .animate-on-scroll,
.editor-styles-wrapper .stagger-children > * {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* ============================================================
   Homepage hero - faithful reproduction of src/components/Hero.tsx
   (full-bleed video, directional gradient, bottom-left content,
   two-line serif headline, single animated star-button CTA)
   ============================================================ */
.pf-hero {
  overflow: hidden;
  border-bottom-left-radius: 1.75rem;
  border-bottom-right-radius: 1.75rem;
}
@media (min-width: 769px) {
  .pf-hero { border-bottom-left-radius: 2.5rem; border-bottom-right-radius: 2.5rem; }
}
.pf-hero .wp-block-cover__image-background {
  object-fit: cover;
  object-position: center 45%;
}
/* Centered 1152px band; text column capped at 672px, left-aligned.
   Force the cover's inner-container full width (it is a flex child that
   otherwise shrinks to content), so the band can center within the viewport. */
.pf-hero.wp-block-cover .wp-block-cover__inner-container {
  width: 100% !important;
  max-width: none !important;
  flex: 0 0 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pf-hero-band {
  width: 100%;
  max-width: 1152px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 1024px) {
  .pf-hero-band { padding-inline: 2rem; }
}
.pf-hero-col { max-width: 672px; }

/* Headline: Hanken Grotesk, cream, stepped 4xl → 5xl → 6xl like the React build */
.pf-hero-title {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 2.25rem;
  margin: 0;
}
@media (min-width: 640px) { .pf-hero-title { font-size: 3rem; } }
@media (min-width: 1024px) { .pf-hero-title { font-size: 3rem; line-height: 1.1; } }

/* Subheadline: cream/80, sm → lg */
.pf-hero-sub {
  margin-top: 0.5rem;
  max-width: 26.5rem;
  font-size: 0.875rem;
  line-height: 1.3;
  color: rgba(45, 41, 38, 0.78) !important;
}
@media (min-width: 768px) {
  .pf-hero-sub { margin-top: 1rem; font-size: 1rem; }
}

.pf-hero-cta { margin-top: 0.75rem; }
@media (min-width: 768px) { .pf-hero-cta { margin-top: 1.75rem; } }

/* Desktop: Seed-style geometry - hero 92vh, text block upper-left, inset
   3.5rem from the viewport edge (measured from seed.com at 1440px). */
@media (min-width: 769px) {
  .pf-hero.wp-block-cover {
    min-height: calc(100vh - var(--pf-announce-h, 30px) - var(--pf-opening-trust-height)) !important;
    min-height: calc(100svh - var(--pf-announce-h, 30px) - var(--pf-opening-trust-height)) !important;
    padding: 22vh 0 4rem !important;
    align-items: flex-start !important;
  }
  .pf-hero-band { max-width: none; padding-inline: 3.5rem; }
}

/* Staggered entrance (mirrors Hero.tsx reveal-up delays) */
.pf-hero-title,
.pf-hero-sub,
.pf-hero-cta {
  opacity: 0;
  transform: translateY(30px);
  animation: reveal-up 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.pf-hero-title { animation-delay: 0.2s; }
.pf-hero-sub { animation-delay: 0.3s; }
.pf-hero-cta { animation-delay: 0.4s; }

/* Mobile: Seed-style overlay - one full-bleed cover photo (outpainted crop
   with headroom above the vials), text overlaid ~1/5 down, left-aligned.
   Metrics taken from seed.com mobile computed styles: headline lh 1.1,
   -0.025em tracking, sub +1rem, CTA row +1.5rem, hero ~92% viewport. */
@media (max-width: 768px) {
  .pf-hero.wp-block-cover {
    min-height: calc(100vh - var(--pf-announce-h, 30px) - var(--pf-opening-trust-height)) !important;
    min-height: calc(100svh - var(--pf-announce-h, 30px) - var(--pf-opening-trust-height)) !important;
    padding: 10vh 0 0 !important;
    padding: 10svh 0 0 !important;
    align-items: flex-start !important;
  }
  .pf-hero .wp-block-cover__background {
    background: linear-gradient(to bottom, rgba(246, 240, 231, 0.9) 0%, rgba(246, 240, 231, 0.72) 34%, rgba(246, 240, 231, 0.3) 48%, rgba(246, 240, 231, 0) 62%) !important;
  }
  .pf-hero .wp-block-cover__image-background {
    /* The mobile crop is now selected by the <picture> wrapper
       around the hero image. `content: url(/tenants/pfoundry/pages/home/hero-mobile.webp)` used to do it here, but
       `content` only changes what is PAINTED - the preload scanner had already
       taken the desktop file from the img's src, so mobile downloaded 121 KB it
       never showed on top of the 50 KB it did. Do not reinstate it. */
    object-fit: cover;
    object-position: center top;
    height: 126% !important;
    transform: translateY(-11%);
  }
  .pf-hero-col { max-width: none; text-align: left; }
  .pf-hero-title { font-size: 2.5rem; line-height: 1.08; letter-spacing: -0.025em; }
  .pf-hero-title br { display: none; }
  .pf-hero-sub { margin-inline: 0; margin-top: 1rem; font-size: 1rem; line-height: 1.3; max-width: 26rem; }
  .pf-hero-cta { display: flex; justify-content: flex-start; margin-top: 1.5rem; }
  .pf-hero-sub { max-width: 22rem; }
}

/* Tablet uses the sharp desktop image, anchored toward the vial group. */
@media (min-width: 600px) and (max-width: 768px) {
  .pf-hero .wp-block-cover__image-background {
    height: 100% !important;
    transform: none;
    object-position: 75% top;
  }
}

/* The <picture> wrapper around the hero image must not exist as
   far as layout is concerned - WP absolutely positions .wp-block-cover__image-background
   inside the cover, and an inline wrapper box between them would change that.
   display:contents removes the wrapper from the box tree and leaves the img exactly
   where it was. */
.pf-hero picture { display: contents; }

/* ---- Hero CTA row: star button + quiet secondary link (2026-09-14 audit) ---- */
.pf-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.pf-hero-link { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; color: hsl(24,80%,34%); font-family: 'Hanken Grotesk', sans-serif; font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.pf-hero-link svg { width: 1rem; height: 1rem; transition: transform .2s ease; }
.pf-hero-link:hover { color: hsl(24,80%,28%); }
.pf-hero-link:hover svg { transform: translateX(3px); }

/* Reserve the trust strip within the first screen alongside the hero. */
body.home { --pf-opening-trust-height: 7rem; }
body.home .pf-tstrip { box-sizing: border-box; min-height: calc(var(--pf-opening-trust-height) - 1.25rem); display: grid; align-items: center; }
@media (min-width: 769px) {
  body.home { --pf-opening-trust-height: 6.5rem; }
  body.home .pf-tstrip { min-height: calc(var(--pf-opening-trust-height) - 1.75rem); }
}
/* ---- Trust strip under the hero: four facts, hairline rules, no card ---- */
.pf-tstrip { max-width: 1152px; margin: 1.25rem auto 0; padding-inline: 1.5rem; }
.pf-tstrip__list { list-style: none; margin: 0; padding: 0.875rem 0; border-top: 1px solid var(--pf-border,#E5DED4); border-bottom: 1px solid var(--pf-border,#E5DED4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem 0.75rem; }
.pf-tstrip__list li { display: flex; justify-content: center; text-align: center; align-items: center; gap: 0.5rem; font-family: 'Hanken Grotesk', sans-serif; font-size: 0.8125rem; font-weight: 500; line-height: 1.3; color: var(--pf-foreground,#2A2622); }
.pf-tstrip__list svg { width: 1rem; height: 1rem; flex-shrink: 0; color: hsl(24,80%,34%); }
.pf-tstrip__list a { display: inline-flex; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; }
.pf-tstrip__list a:hover span { text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 769px) {
  .pf-tstrip { margin-top: 1.75rem; padding-inline: 3.5rem; max-width: none; }
  .pf-tstrip__list { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 1.125rem 0; }
  .pf-tstrip__list li { justify-content: center; font-size: 0.9375rem; }
}

/* ---- Star-button CTA (port of src/components/ui/star-button.tsx) ---- */
.pf-starbtn {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.875rem 1.75rem;
  border-radius: 1.5rem;
  background: var(--pf-sb-bg, #2D2926);
  color: #F9F7F4;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid rgba(0, 0, 0, 0.1);
}
.pf-starbtn__light {
  position: absolute;
  inset: 0;
  width: 110px;
  aspect-ratio: 1 / 1;
  z-index: 1;
  pointer-events: none;
  offset-path: var(--pf-sb-path);
  offset-distance: 0%;
  background: radial-gradient(ellipse at center, var(--pf-sb-light, #DC7736), transparent, transparent);
  animation: pf-starbtn-sweep var(--pf-sb-duration, 3s) linear infinite;
}
@keyframes pf-starbtn-sweep { to { offset-distance: 100%; } }
.pf-starbtn__stars {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.pf-starbtn__stars svg { display: block; width: 100%; height: 100%; }
.pf-starbtn__content {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.pf-starbtn__hex { width: 1rem; height: 1rem; color: hsl(24, 72%, 50%); flex-shrink: 0; }
.pf-starbtn__label { color: #F9F7F4; }
.pf-starbtn__arrow { width: 1rem; height: 1rem; color: #F9F7F4; flex-shrink: 0; transition: transform 0.3s ease; }
.pf-starbtn:hover .pf-starbtn__arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .pf-hero-title,
  .pf-hero-sub,
  .pf-hero-cta {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .pf-starbtn__light { animation: none !important; }
}

/* ============================================================
   Trust signal cards - faithful reproduction of the Index.tsx pair
   (left light card + right charcoal card, each with a Shop Now CTA
   and a faint corner watermark).
   ============================================================ */
.pf-trust { padding-top: 2rem; padding-bottom: 1.5rem; }
@media (min-width: 768px) { .pf-trust { padding-top: 0; padding-bottom: 2.5rem; } }

.pf-trust-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .pf-trust-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

.pf-trust-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* min-height only from ≥768px - on mobile the card hugs its content */
@media (min-width: 768px) { .pf-trust-card { padding: 2.5rem; min-height: 320px; } }
.pf-trust-card--light { background: var(--pf-card,#FCFAF8); border: 1px solid var(--pf-border,#E5DED4); }
.pf-trust-card--dark { background: var(--pf-charcoal,#2D2926); }

.pf-trust-card__top { position: relative; z-index: 1; }
.pf-trust-card__title {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 1.875rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}
@media (min-width: 768px) { .pf-trust-card__title { font-size: 2.5rem; min-height: 2lh; } }
/* Forced title break is desktop-only; mobile wraps naturally */
@media (max-width: 767px) { .pf-br-desktop { display: none; } }
.pf-trust-card--light .pf-trust-card__title { color: var(--pf-charcoal,#2D2926); }
.pf-trust-card--dark .pf-trust-card__title { color: #fff; }

.pf-trust-card__body { font-size: 0.875rem; line-height: 1.6; margin: 0; }
.pf-trust-card--light .pf-trust-card__body { color: var(--pf-muted-foreground,#79716A); max-width: 220px; }
.pf-trust-card--dark .pf-trust-card__body { color: rgba(255,255,255,0.6); max-width: 240px; }

.pf-trust-card__cta { margin-top: 1.5rem; position: relative; z-index: 1; }
.pf-trust-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  background: var(--pf-primary);
  color: #fff;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  text-decoration: none;
  transition: background 0.2s ease;
}
/* Hover must stay darker than rest, or the state reads as inverted. */
.pf-trust-card__btn:hover { background: hsl(24,72%,46%); }

.pf-trust-card__wm { position: absolute; pointer-events: none; }
.pf-trust-card__wm--pkg { bottom: -2.5rem; right: -1.5rem; width: 10rem; height: 10rem; color: hsl(24,72%,50%,0.08); }
@media (min-width: 768px) { .pf-trust-card__wm--pkg { bottom: -3rem; right: -2rem; width: 14rem; height: 14rem; } }
.pf-trust-card__wm--hex { bottom: -5rem; right: -3rem; width: 12rem; height: 12rem; color: hsl(24,72%,50%,0.10); }
@media (min-width: 768px) { .pf-trust-card__wm--hex { bottom: -6rem; right: -3.5rem; width: 16rem; height: 16rem; } }

/* ============================================================
   Foundry Club CTA - contained charcoal card (Index.tsx)
   ============================================================ */
.pf-club-cta { max-width: 1024px; margin: 0 auto; padding: 4rem 1.5rem; }
@media (min-width: 768px) { .pf-club-cta { padding: 6rem 2rem; } }
.pf-club-cta__card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--pf-charcoal,#2D2926);
  padding: 2.5rem;
  text-align: center;
}
@media (min-width: 768px) { .pf-club-cta__card { padding: 3.5rem; } }
.pf-club-cta__glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 500px;
  max-width: 100%;
  opacity: 0.25;
  background: radial-gradient(circle, hsl(24,72%,50%) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
}
.pf-club-cta__content { position: relative; z-index: 1; }
.pf-club-cta__hex { display: inline-flex; padding: 1rem; background: hsl(24,72%,50%,0.2); border-radius: 1rem; margin-bottom: 1.5rem; }
.pf-club-cta__hex svg { width: 2.5rem; height: 2.5rem; color: var(--pf-primary,#D9772E); }
.pf-club-cta__title { font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; font-size: 1.875rem; line-height: 1.15; color: #fff; margin: 0 0 1rem; }
@media (min-width: 768px) { .pf-club-cta__title { font-size: 2.25rem; } }
.pf-club-cta__body { color: rgba(255,255,255,0.7); max-width: 32rem; margin: 0 auto 2rem; line-height: 1.6; }
.pf-club-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: var(--pf-primary,#D9772E);
  color: #fff;
  border-radius: 9999px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background .3s ease, box-shadow .3s ease;
}
.pf-club-cta__btn:hover { background: hsl(24,72%,46%); box-shadow: 0 10px 25px hsl(24,72%,50%,0.3); }
.pf-club-cta__btn svg { width: 1rem; height: 1rem; flex-shrink: 0; transition: transform .3s ease; }
.pf-club-cta__btn:hover svg { transform: translateX(4px); }
/* Narrow phones: the nowrap label + fixed padding could exceed the card width and
   get clipped by .pf-club-cta__card's overflow:hidden. Cap width and tighten padding;
   allow the label to wrap as a last resort so nothing is cut off. */
@media (max-width: 400px) {
  .pf-club-cta__btn { max-width: 100%; box-sizing: border-box; padding: 0.85rem 1.25rem; gap: 0.5rem; white-space: normal; text-align: center; }
}

/* ============================================================
   Footer link colors - muted white (overrides the theme's orange link)
   ============================================================ */
.pf-footer a { color: rgba(255,255,255,0.6); text-decoration: none; transition: color .2s ease; }
.pf-footer a:hover { color: #fff; }
/* 0.6, not 0.4. At 0.4 these 12px policy links resolved to #817f7d on the
   charcoal footer - 3.61:1, failing AA. 0.6 is 6.18:1 and matches the .pf-footer
   link colour above, so the legal row no longer needs its own lighter override. */
.pf-footer-legal a { color: rgba(255,255,255,0.6); }
.pf-footer-legal a:hover { color: #fff; }

/* ============================================================
   Footer polish (spacing pass) - keep each legal policy link
   on one line so mobile wraps between links, not mid-link
   ============================================================ */
.pf-footer-legal a { white-space: nowrap; }

/* ============================================================
   Payment network badges in the legal row (inline SVG, no assets)
   ============================================================ */
.pf-footer-pay { display: flex; align-items: center; gap: 0.5rem; }
.pf-footer-pay svg, .pf-footer-pay img { height: 20px; width: auto; display: block; }

/* Local design revision: restore the original brand orange on controls.
   Keep the darker text-link token outside controls. */
body:not(.wp-admin) :is(button, input[type="submit"], input[type="button"], .button, .wp-block-button__link, a.primary, [role="button"]) {
  --pf-primary-accessible: var(--pf-primary);
  --wp--preset--color--primary: var(--pf-primary);
}

/* Homepage FAQ: native disclosures retain keyboard and no-script support. */
.pf-home-faq { max-width:1152px; margin:0 auto; padding:4rem 1.5rem 5rem; display:grid; grid-template-columns:1fr 1.45fr; gap:4rem; color:#2D2926; scroll-margin-top:7rem; }
.pf-home-faq__eyebrow { font-size:.7rem; letter-spacing:.16em; color:#A34D16; font-weight:600; margin:0 0 1rem; }
.pf-home-faq h2 { font-size:clamp(2rem,3.5vw,3rem); line-height:1.1; letter-spacing:-.035em; margin:0 0 1rem; }
.pf-home-faq h2 span { color:#C45F20; }
.pf-home-faq__intro > p:not(:first-child) { color:#71685F; line-height:1.6; }
.pf-home-faq a { color:#A34D16; text-underline-offset:4px; font-size:.9375rem; }
.pf-home-faq__list { min-width:0; border-top:1px solid #DCD4CB; }
.pf-home-faq details { border-bottom:1px solid #DCD4CB; }
.pf-home-faq summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer; list-style:none; padding:1.4rem 0; font-weight:600; font-size:1.0625rem; line-height:1.4; }
.pf-home-faq summary::-webkit-details-marker { display:none; }
.pf-home-faq summary::after { content:'+'; color:#A34D16; font-size:1.4rem; font-weight:400; flex:none; width:1.5rem; text-align:center; }
.pf-home-faq details[open] summary::after { content:'−'; }
.pf-home-faq summary:focus-visible { outline:2px solid #C45F20; outline-offset:4px; border-radius:4px; }
.pf-home-faq details > div { padding:0 2rem 1.4rem 0; color:#71685F; font-size:.9375rem; line-height:1.7; }
.pf-home-faq details p { margin:0 0 .5rem; }
.pf-home-faq__more { display:inline-block; margin-top:1.5rem; }
@media(max-width:700px) { .pf-home-faq { grid-template-columns:1fr; gap:2rem; padding:2.5rem 1.5rem 3.5rem; } .pf-home-faq summary { font-size:1rem; padding:1.2rem 0; } }

/* Manufacturing statement bridges the collection and process section. */
.pf-us-statement { max-width:1152px; margin:0 auto; padding:5rem 1.5rem 3rem; text-align:center; }
.pf-us-statement__eyebrow { color:#A34D16; font-size:.72rem; font-weight:600; letter-spacing:.18em; margin:0 0 1.25rem; }
.pf-us-statement h2 { color:#2D2926; font-family:'Hanken Grotesk',sans-serif; font-size:clamp(2.25rem,5.5vw,4.5rem); font-weight:600; line-height:1.08; letter-spacing:-.04em; margin:0; }
.pf-us-statement h2 span { color:#C45F20; }
.pf-us-statement__copy { color:#71685F; font-size:clamp(.9375rem,1.6vw,1.125rem); line-height:1.65; margin:1.5rem auto 0; max-width:35rem; }
@media(max-width:700px) { .pf-us-statement { padding:3.5rem 1.5rem 2rem; } .pf-us-statement__eyebrow { font-size:.65rem; } }

.pf-us-statement h2 { max-width:62rem; margin-inline:auto; font-size:clamp(2rem,4.2vw,3.5rem); }

/* Compact footer navigation on phones, columns on tablets. */
.pf-footer-disclosure > summary { list-style:none; font-size:.8rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.pf-footer-disclosure > summary::-webkit-details-marker { display:none; }
.pf-footer-disclosure > p { margin-top:.8rem; }
.pf-footer-contact-bottom:empty { display:none; }
@media(min-width:600px) {
 .pf-footer-disclosure > summary { pointer-events:none; }
 .pf-footer > .wp-block-columns { display:grid!important; grid-template-columns:2fr 1fr 1fr 1fr; gap:1.5rem!important; }
 .pf-footer > .wp-block-columns > .wp-block-column { min-width:0; }
}
@media(min-width:600px) and (max-width:900px) {
 .pf-footer > .wp-block-columns { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .pf-footer > .wp-block-columns > .wp-block-column:first-child { grid-column:1/-1; }
 .pf-footer > .wp-block-columns > .wp-block-column:first-child p { margin-top:.6rem; }
}
@media(max-width:599px) {
 .pf-footer { padding-top:2rem!important; padding-bottom:1.5rem!important; }
 .pf-footer > .wp-block-columns { gap:0!important; margin-bottom:0!important; }
 .pf-footer > .wp-block-columns > .wp-block-column:first-child { margin-bottom:1.25rem; }
 .pf-footer > .wp-block-columns > .wp-block-column:first-child p { margin-top:.65rem; margin-bottom:0; }
 .pf-footer-disclosure { border-top:1px solid #ffffff26; }
 .pf-footer-disclosure > summary { display:flex; justify-content:space-between; align-items:center; padding:1rem 0; cursor:pointer; }
 .pf-footer-disclosure > summary::after { content:'+'; font-size:1.2rem; }
 .pf-footer-disclosure[open] > summary::after { content:'−'; }
 .pf-footer-disclosure > summary:focus-visible { outline:2px solid #D9772E; outline-offset:2px; }
 .pf-footer-disclosure > p { margin:0 0 1rem; }
 .pf-footer-disclosure .pf-footer-products { margin:0 0 1rem; padding:0; }
 .pf-footer-disclosure .pf-footer-products__list { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .pf-footer-contact-bottom { margin-top:1rem; }
 .pf-footer-contact-bottom p { margin:0; }
 .pf-footer hr { margin-top:1.25rem!important; margin-bottom:1.25rem!important; }
 .pf-footer-legal { gap:.65rem!important; }
 .pf-footer-legal p { margin:0; line-height:1.7; }
}
@media(max-width:599px) {
 .pf-footer-ready > .wp-block-columns > .wp-block-column:not(:first-child), .pf-footer-ready .pf-footer-disclosure { margin-block:0!important; }
 .pf-footer-ready > .wp-block-columns > .wp-block-column:first-child { margin-bottom:.75rem!important; }
}