/* =============================================================================
   HempUA Theme — Main Stylesheet
   Package: HempUA
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Google Fonts Import
   NOTE: Fonts are enqueued via functions.php — no @import needed here.
   ----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   2. CSS Custom Properties (Design Tokens)
   ----------------------------------------------------------------------------- */
:root {
  /* Colors */
  --color-bg:          #1b0f05;
  --color-text:        #fbf5ea;
  --color-accent:      #9e754e;
  --color-green-from:  #abbf7b;
  --color-green-to:    #8ab158;
  --color-overlay:     rgba(27, 15, 5, 0.6);
  --color-divider:     rgba(251, 245, 234, 0.12);
  --color-text-muted:  rgba(251, 245, 234, 0.6);
  --color-text-soft:   rgba(251, 245, 234, 0.85); /* secondary descriptive body text */

  /* Derived color variants */
  --color-bg-lighter:  #2a1a08;
  --color-bg-mid:      #221208;
  --color-accent-dim:  rgba(158, 117, 78, 0.3);
  --color-green-light: #a1c27c;    /* lighter accent green — highlights, quotes, active states */
  --color-accent-hover: #b8875c;   /* accent hover state — lighter warm tone */
  --color-btn-on-green: #020202;   /* text colour on green-gradient buttons */
  --color-bg-muted:         rgba(27, 15, 5, 0.65); /* muted body text on inverted (light) surfaces */
  --color-form-placeholder: rgba(27, 15, 5, 0.45); /* form placeholder text on light inputs */

  /* Typography */
  --font-display: 'Odibee Sans', 'Impact', sans-serif;
  --font-body:    'Manrope', 'Segoe UI', sans-serif;

  /* Font sizes — fluid where appropriate */
  --fs-hero:    clamp(80px, 20vw, 300px);
  --fs-h2:      clamp(36px, 5vw, 54px);
  --fs-h3:      clamp(22px, 3vw, 32px);
  --fs-body:    clamp(15px, 1.1vw, 18px);
  --fs-nav:     12px;
  --fs-label:   clamp(28px, 4vw, 60px);
  --fs-display: clamp(40px, 8vw, 120px);

  /* Spacing */
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   40px;
  --space-xl:   80px;
  --space-2xl:  120px;

  /* Layout */
  --container-max: 1440px;
  --header-height: 72px;
  --card-gap:      24px;

  /* Borders & Radii */
  --radius-pill: 9999px;
  --radius-sm:   8px;
  --radius-md:   16px;

  /* Transitions */
  --ease-smooth:      cubic-bezier(0.25, 1, 0.5, 1);   /* shared easing for all standard motion */
  --transition-base:  0.25s var(--ease-smooth);
  --transition-slow:  0.45s var(--ease-smooth);
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
}

/* -----------------------------------------------------------------------------
   3. CSS Reset & Box Sizing
   ----------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-wrap: break-word; /* prevent long translations from overflowing containers */
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

ul,
ol {
  list-style: none;
}

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

/* Screen reader utility */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Container utility */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

/* =============================================================================
   4. HEADER
   ============================================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  height: var(--header-height);
  background: transparent;
  transition: background var(--transition-slow), box-shadow var(--transition-slow),
              backdrop-filter var(--transition-slow), border-color var(--transition-slow);
}

.site-header--scrolled {
  background: rgba(27, 15, 5, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--color-divider);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 var(--space-md);
  gap: var(--space-lg);
}

/* Logo */
.site-header__logo {
  flex-shrink: 0;
}

.site-header__logo-text {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.site-header__logo-text:hover {
  color: var(--color-accent);
}

.site-header__logo img {
  height: 40px;
  width: auto;
}

/* Primary Navigation */
.site-header__nav {
  flex: 1;
  min-width: 0; /* allow shrinking below content size */
  display: flex;
  justify-content: center;
}

.site-header__menu {
  display: flex;
  align-items: center;
  gap: 40px;
}

.site-header__menu li {
  position: relative;
}

.site-header__menu a {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  padding: 4px 0;
  white-space: nowrap;
  transition: color var(--transition-base);
}

.site-header__menu a::after {
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-base);
  margin-top: 2px;
}

.site-header__menu a:hover {
  color: var(--color-accent);
}

.site-header__menu a:hover::after {
  transform: scaleX(1);
}

/* Active / current page — exact match only.
   current-menu-ancestor intentionally excluded: WordPress adds it whenever
   the current page is a descendant of a menu item's page (e.g. Long Fiber
   is a child of Merch), causing parent items to look "pressed" on all child
   pages. Only the exact current page should appear active. */
.site-header__menu .current-menu-item > a,
.site-header__menu .current_page_item > a {
  color: var(--color-green-light);
}

.site-header__menu .current-menu-item > a::after,
.site-header__menu .current_page_item > a::after {
  transform: scaleX(1);
}

/* Scroll-spy active state — set by initActiveNavOnScroll() in main.js
   when a home-page section enters the viewport while scrolling. */
.site-header__menu .is-active-scroll > a {
  color: var(--color-green-light);
}

.site-header__menu .is-active-scroll > a::after {
  transform: scaleX(1);
}

/* Right controls */
.site-header__controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* Language Switcher */
.lang-switcher {
  position: relative;
}

.lang-switcher__btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-text);
  padding: 4px 0;
  min-height: 44px; /* WCAG 2.5.5 touch target */
  transition: color var(--transition-base);
}

.lang-switcher__btn:hover {
  color: var(--color-accent);
}

.lang-switcher__caret {
  width: 8px;
  height: 5px;
  transition: transform var(--transition-base);
}

.lang-switcher__btn[aria-expanded="true"] .lang-switcher__caret {
  transform: rotate(180deg);
}

.lang-switcher__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 80px;
  background: var(--color-bg-lighter);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  overflow: hidden;
  z-index: 200;
  /* Animated open/close */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease-out-expo),
              transform 0.2s var(--ease-out-expo),
              visibility 0.2s;
}

.lang-switcher__dropdown.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lang-switcher__dropdown li a {
  display: block;
  padding: 8px 16px;
  font-size: var(--fs-nav);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: background var(--transition-base), color var(--transition-base);
}

.lang-switcher__dropdown li a:hover {
  background: var(--color-accent-dim);
  color: var(--color-text);
}

/* User icon */
.site-header__user-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.site-header__user-icon img {
  width: 32px;
  height: 32px;
}

/* Mobile hamburger */
.site-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
}

.hamburger__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Mobile overlay */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(27, 15, 5, 0.7);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
}

.mobile-menu-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* =============================================================================
   5. FOOTER
   ============================================================================= */
.site-footer {
  background: var(--color-bg);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-lg) var(--space-lg);
  gap: var(--space-md); /* prevent three items from crowding on mid-size viewports */
}

.site-footer__text,
.site-footer__link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}

.site-footer__link:hover {
  color: var(--color-text);
}

.site-footer__link--btn {
  background: none;
  border: none;
  cursor: pointer;
}

/* =============================================================================
   5b. MEGA-MENU — "Our Product" dropdown
   Full-width cream panel that slides down from the header.
   ============================================================================= */
.mega-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999; /* below header (1000) */
  background: #fbf5ea;
  padding: 24px var(--space-lg) var(--space-lg);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.45s var(--ease-out-expo), opacity 0.35s ease, visibility 0s 0.45s;
}

.mega-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.45s var(--ease-out-expo), opacity 0.35s ease, visibility 0s 0s;
}

.mega-menu__inner {
  display: flex;
  gap: 16px;
  max-width: var(--container-max);
  margin-inline: auto;
  /* push cards below the header */
  padding-top: calc(var(--header-height, 72px) + 24px);
}

.mega-menu__card {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 386px;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text);
}

.mega-menu__card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s var(--ease-out-expo);
}

.mega-menu__card:hover .mega-menu__card-bg {
  transform: scale(1.05);
}

.mega-menu__card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(27, 15, 5, 0.6);
}

.mega-menu__card-content {
  position: relative;
  z-index: 1;
  padding: var(--space-lg);
}

.mega-menu__card-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: #fbf5ea;
  text-transform: uppercase;
  line-height: 1.2;
}

.mega-menu__card-arrow {
  display: block;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
}

.mega-menu__card-arrow img {
  transition: transform 0.3s var(--ease-out-expo);
}

.mega-menu__card:hover .mega-menu__card-arrow img {
  transform: translateX(8px);
}

/* Reuse the same product background gradients */
.mega-menu__card-bg.product-card__bg--long-fiber,
.mega-menu__card-bg.product-card__bg--short-fiber,
.mega-menu__card-bg.product-card__bg--chaff {
  /* These inherit from the existing product-card__bg--* rules */
}

/* =============================================================================
   6. HERO SECTION
   Figma node 1:102 — 886px tall on 1625px canvas.
   Text and plant live in the LOWER portion of the section.
   All positions expressed as percentages of section height / vw of canvas width
   so the layout scales proportionally across viewport sizes.
   ============================================================================= */
.hero {
  position: relative;
  width: 100%;
  /* Figma: 886px on 1625px-wide canvas ≈ 54.5vw; clamp adds floor/ceiling */
  height: clamp(480px, 54.5vw, 960px);
  overflow: hidden;
}

/* Background video — fills the hero, covers, top-aligned. */
.hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}

/* Gradient overlay — sits above the photo, below grain and content. */
.hero__bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(27, 15, 5, 0.05) 0%, rgba(27, 15, 5, 0.65) 100%);
  z-index: 0;
}

/* Subtle grain texture overlay */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  pointer-events: none;
}

/* Constrained inner container — centers content within the section
   while keeping bg/grain full-bleed. overflow:visible so the title
   can overflow the container edges at large viewports. */
.hero__inner {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  overflow: visible;
}

/* "ECOLOGICAL PRODUCT" label
   Figma: left ≈ 40px from container edge, top 448/886 = 50.6% */
.hero__label {
  position: absolute;
  left: var(--space-lg);
  top: 50.6%;
  font-family: var(--font-display);
  /* Figma: 60px on 1625px canvas = 3.69vw */
  font-size: clamp(18px, 3.7vw, 60px);
  color: var(--color-accent);
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  z-index: 4;

  opacity: 0;
  transform: translateY(20px);
  animation: hero-fade-up 0.8s var(--ease-out-expo) 0.15s forwards;
}

/* Main display heading — single line, lower portion of section
   Figma: 300px font, top 520/886 = 58.7%, centered.
   Use left:0 right:0 + text-align:center so the fade animation (translateY only)
   doesn't conflict with any translateX centering. */
.hero__title {
  position: absolute;
  left: 0;
  right: 0;
  top: 58.7%;
  font-family: var(--font-display);
  /* Figma: 300px on 1625px canvas = 18.46vw */
  font-size: clamp(48px, 18.5vw, 300px);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: center;
  z-index: 2;
  pointer-events: none;
  user-select: none;

  opacity: 0;
  transform: translateY(30px);
  animation: hero-fade-up 1s var(--ease-out-expo) 0.05s forwards;
}

/* Gap span between "HEMP" and "FIBERS" — aria-hidden so screen readers
   skip the decorative spacing characters entirely. */
.hero__title-gap {
  /* inherits inline display; no extra styling needed */
}

/* Hemp plant — floats between "HEMP" and "FIBERS"
   Figma: plant center is 68.5px LEFT of canvas center (744px vs 812.5px on 1625px).
   While font scales (< ~1622px): left = calc(50% - 21.5vw)  [4.2vw center + 17.3vw half-width]
   Once font caps at 300px (>= ~1622px): offset must stay fixed at 349px (68.5px + 281px).
   min() switches from the vw formula to the fixed value at that breakpoint. */
.hero__plant {
  position: absolute;
  left: calc(50% - min(21.5vw, 349px));
  top: 54.6%;
  width: clamp(160px, 34.6vw, 562px);
  aspect-ratio: 562 / 564;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
}

.hero__plant img {
  display: block;
  /* Figma: inner image 429×433px inside 562px container = 76.3% */
  width: 76.3%;
  height: auto;
  transform: rotate(-22.64deg);
  transform-origin: center center;
  opacity: 0.8;
}

/* Subtitle — lower right, aligned to container's right edge
   Figma: right ≈ 40px from container edge, top 786/886 = 88.7% */
.hero__subtitle {
  position: absolute;
  right: var(--space-lg);
  top: 88.7%;
  width: clamp(180px, 35vw, 570px);
  font-family: var(--font-body);
  font-size: clamp(13px, 1.48vw, 24px);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.4;
  z-index: 4;

  opacity: 0;
  transform: translateY(16px);
  animation: hero-fade-up 0.8s var(--ease-out-expo) 0.35s forwards;
}

/* Hero animations */
@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(var(--ty, 20px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__label,
  .hero__title,
  .hero__subtitle {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* =============================================================================
   7. WHO WE ARE SECTION
   ============================================================================= */
.who-we-are {
  background: var(--color-bg);
  padding: 40px var(--space-lg);
  margin-bottom: clamp(80px, 23.4vw, 380px);
}

.who-we-are__inner {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  max-width: var(--container-max);
  margin-inline: auto;
}

.who-we-are__left {
  flex: 1;
  min-width: 0;
}

.who-we-are__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  letter-spacing: 0.02em;
  overflow-wrap: break-word;
}

.who-we-are__body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.7;
  max-width: 560px;
  overflow-wrap: break-word;
}


.who-we-are__right {
  flex: 0 1 489px; /* allow shrinking at intermediate viewport widths */
  min-width: 0;
}

.who-we-are__for-heading {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  letter-spacing: 0.02em;
  overflow-wrap: break-word;
}

/* Tag pills */
.tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.pill {
  display: inline-flex;
  align-items: center;
  background: var(--color-accent);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  padding: 6px 24px;
  border-radius: var(--radius-pill);
  line-height: 2.0;
  transition: background var(--transition-base), transform var(--transition-base);
}

.pill:hover {
  background: var(--color-accent-hover);
  transform: translateY(-2px);
}

/* =============================================================================
   8. PRODUCTS SECTION
   ============================================================================= */
.products {
  width: 100%;
}

.products__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 680px;
}

/* Individual product card */
.product-card {
  position: relative;
  overflow: hidden;
  min-height: 680px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
}

/* Product card backgrounds — actual photos from Figma design.
   Background images are gated on .is-visible (added by IntersectionObserver
   in main.js) so they only load once the cards scroll into view. The overlay
   and background-color keep the cards looking intentional while images load. */
.product-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-bg);
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}

/* Images load only when the card enters the viewport */
.product-card.is-visible .product-card__bg--long-fiber {
  background-image: url('../images/products-long-fiber.png');
}

.product-card.is-visible .product-card__bg--short-fiber {
  background-image: url('../images/products-short-fiber.png');
}

.product-card.is-visible .product-card__bg--chaff {
  background-image: url('../images/products-chaff.png');
}

.product-card.is-visible .product-card__bg--merch {
  background-image: url('../images/products-merch.png');
}

.product-card:hover .product-card__bg {
  transform: scale(1.04);
  /* Promote to GPU layer only during the hover animation — not on every paint */
  will-change: transform;
}

/* Dark overlay */
.product-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--color-overlay);
  transition: background var(--transition-slow);
}

.product-card:hover .product-card__overlay {
  background: rgba(27, 15, 5, 0.45);
}

/* Card content */
.product-card__content {
  position: relative;
  z-index: 2;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.product-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  overflow-wrap: break-word;
}

.product-card__description {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-text-soft);
  line-height: 1.6;
  overflow-wrap: break-word;
  /* Clamp to 4 lines — prevents cards with long descriptions from growing
     taller than their siblings in the grid */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Arrow button */
.product-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 1px solid rgba(251, 245, 234, 0.4);
  border-radius: 50%;
  margin-top: var(--space-xs);
  transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-base);
  flex-shrink: 0;
  align-self: flex-start;
}

.product-card__arrow img {
  display: block;
}

.product-card:hover .product-card__arrow,
.cross-sell-card:hover .product-card__arrow {
  border-color: var(--color-accent);
  background: var(--color-accent);
  transform: translateX(8px);
}


/* =============================================================================
   9. UKRAINIAN HEMP SECTION
   ============================================================================= */
.ukrainian-hemp {
  background: var(--color-bg);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}

.ukrainian-hemp__inner {
  max-width: 900px;
  margin-inline: auto;
}

.ukrainian-hemp__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-md);
}

.ukrainian-hemp__divider {
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  margin: 0 auto var(--space-md);
}

.ukrainian-hemp__body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.75;
  max-width: 800px;
  margin-inline: auto;
  overflow-wrap: break-word;
}

/* =============================================================================
   10. WE LOVE SECTION
   ============================================================================= */
.we-love {
  position: relative;
  background: var(--color-bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 14vw, 200px); /* fluid: 80px @ ~570px → 200px @ ~1430px */
  padding: var(--space-xl) var(--space-lg) var(--space-xl);
}

/* Hemp field background photo + gradient overlay */
.we-love__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-bg);
  background-image:
    linear-gradient(180deg, #1b0f05 4%, rgba(27, 15, 5, 0.4) 50%, #1b0f05 96%),
    url('../images/we-love-bg.png');
  background-size: cover;
  background-position: center;
}

/* Large decorative heading — typography image */
.we-love__display-wrap {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.we-love__display-img {
  display: block;
  max-width: 848px;
  width: 100%;
  height: auto;
}

.we-love__display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em;
  align-items: baseline;
}

.we-love__display-dim {
  color: rgba(251, 245, 234, 0.18);
  display: block;
  width: 100%;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--ease-out-expo),
              transform 0.8s var(--ease-out-expo);
}

.we-love__display-bright {
  color: var(--color-text);
  display: block;
  width: 100%;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--ease-out-expo) 0.18s,
              transform 0.8s var(--ease-out-expo) 0.18s;
}

/* Reveal when parent section becomes visible */
.we-love.is-visible .we-love__display-dim {
  opacity: 1;
  transform: translateY(0);
}

.we-love.is-visible .we-love__display-bright {
  opacity: 1;
  transform: translateY(0);
}

/* 3-column features grid */
.we-love__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  max-width: var(--container-max);
  margin-inline: auto;
  width: 100%;
}

/* Feature — no card, transparent against the photo background */
.we-love__feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-md); /* 24px: icon → text block */
  min-width: 0;
}

/* Icon — base (used in We Love: plain 48×48 image, no circle) */
.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 0;
  background: none;
  color: var(--color-text);
  flex-shrink: 0;
  transition: transform 0.25s var(--ease-out-expo);
}

.we-love__feature:hover .feature-icon img {
  transform: scale(1.08) rotate(-5deg);
}

.we-love__feature-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.we-love__feature-body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-soft);
  line-height: 1.65;
  overflow-wrap: break-word;
}

/* =============================================================================
   11. GOOD FOR YOU SECTION
   ============================================================================= */
.good-for-you {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  padding: 40px var(--space-lg);
}

.good-for-you__deco {
  position: absolute;
  left: -175px;
  top: 50%;
  transform: translateY(-50%) rotate(36.37deg);
  width: clamp(200px, 28vw, 430px);
  pointer-events: none;
  z-index: 0;
}

/* Glow centered behind the plant, inside the same deco wrapper */
.good-for-you__glow-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: auto;
}

.good-for-you__plant-img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.8;
  position: relative; /* ensures it stacks above the glow */
}

.good-for-you__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

/* Left column: large heading */
.good-for-you__left {
  flex: 0 1 487px; /* allow shrinking at intermediate viewport widths */
  min-width: 0;
  position: sticky;
  top: calc(var(--header-height) + var(--space-lg));
}

.good-for-you__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  overflow-wrap: break-word;
}

/* Middle column: feature rows */
.good-for-you__middle {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.good-for-you__divider {
  height: 1px;
  background: var(--color-divider);
  flex-shrink: 0;
}

.good-for-you__feature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* GFY icons are plain images, not the circular accent-colored icons used in We Love */
.good-for-you__feature .feature-icon {
  background: none;
  border-radius: 0;
  width: 48px;
  height: 48px;
}

.good-for-you__feature .feature-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.good-for-you__feature-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.good-for-you__feature-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  overflow-wrap: break-word;
}

.good-for-you__feature-body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* Right column: hemp field photo */
.good-for-you__right {
  flex: 0 1 489px;
}

.good-for-you__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;         /* portrait crop — matches Figma column proportion */
  min-height: 300px;
  max-height: 780px;
  object-fit: cover;
  object-position: center;
}

/* =============================================================================
   12. ABOUT PRODUCTION SECTION
   ============================================================================= */

.about-production {
  position: relative;
  overflow: hidden;
  padding: 60px var(--space-lg);
  min-height: 700px;
}

/* Background photo + gradient overlay */
.about-production__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-bg);
  background-image:
    linear-gradient(0deg, var(--color-bg) 3.713%, rgba(27, 15, 5, 0.4) 49.752%, var(--color-bg) 95.792%),
    url('../images/about-production-bg.png');
  background-size: cover;
  background-position: center;
}

/* Decorative factory silhouette — left side */
.about-production__factory-outline {
  position: absolute;
  left: -8px;
  top: 230px;
  width: 100%;
  max-width: 1488px;
  height: auto;
  z-index: 1;
  pointer-events: none;
  object-fit: contain;
  object-position: left center;
}

/* Content row */
.about-production__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  width: 100%;
}

.about-production__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--color-text);
  text-transform: uppercase;
  line-height: 1;
  flex: 1 0 0;
  min-width: 0;
}

/* Stats wrapper — no blur (blur is an AI slop tell; refined opacity does the job) */
.about-production__stats-wrap {
  flex-shrink: 1;
}

/* 2×2 stats grid */
.about-production__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 488px));
  gap: var(--space-lg);
}

.about-production__stat {
  /* Solid warm cream — reads as grounded, intentional; no glassmorphism */
  background: rgba(251, 245, 234, 0.92);
  border-left: 2px solid var(--color-accent);
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  /* min-height removed — padding + content determines height;
     grid align-items:stretch keeps sibling cards equal height */
}

.about-production__stat-value {
  font-family: var(--font-display);
  font-size: clamp(60px, 8vw, 120px);
  line-height: 0.8;
  color: var(--color-bg);
  text-transform: uppercase;
}

.about-production__stat-label {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--color-bg);
  text-transform: uppercase;
  overflow-wrap: break-word;
}

/* =============================================================================
   13. CONTACT CTA SECTION
   ============================================================================= */
/* .site-footer wraps both contact-cta + footer bar — glow is relative to it */
.site-footer {
  position: relative;
  overflow: hidden;
}

.contact-cta {
  background: transparent; /* inherits site-footer dark bg */
  padding: var(--space-xl) var(--space-lg);
}

/* Glow + plant — anchored to footer bottom, radiates upward.
   The plant image lives inside this element so they move and breathe as one. */
.contact-cta__glow {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(400px, 50vw, 700px);
  height: clamp(500px, 80vh, 900px);
  background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(158, 117, 78, 0.32) 0%, rgba(120, 90, 40, 0.14) 45%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.contact-cta__plant-img {
  display: block;
  width: clamp(45vh, 30vw, 428px);
  height: auto;
  opacity: 0.85;
  transform: rotate(-1.64deg);
  transform-origin: bottom center;
}

.contact-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xl);
  max-width: var(--container-max);
  margin-inline: auto;
}

/* Left column */
.contact-cta__left {
  flex: 0 1 486px; /* allow shrinking at intermediate viewport widths */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

.contact-cta__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  overflow-wrap: break-word;
}

.contact-cta__body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-soft);
  line-height: 1.6;
  text-align: center;
  overflow-wrap: break-word;
}

/* CTA Button */
.btn--cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, var(--color-green-from), var(--color-green-to));
  color: var(--color-btn-on-green);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  padding: 16px 40px;
  border-radius: 44px;
  border: none;
  cursor: pointer;
  transition: filter var(--transition-base), transform var(--transition-base);
  white-space: normal; /* allow wrapping for long translations */
  text-align: center;
}

.btn--cta:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  color: var(--color-btn-on-green);
}

.btn--cta:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

.btn--cta:disabled,
.btn--cta[aria-busy="true"],
.btn--primary:disabled,
.btn--outline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--full {
  width: 100%;
}

/* Right column */
.contact-cta__right {
  flex: 0 1 488px; /* allow shrinking at intermediate viewport widths */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  padding-inline: var(--space-lg);
}

.contact-cta__contact-item {
  /* no border — Figma shows plain spaced items */
}

.contact-cta__contact-link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 0.02em;
  transition: color var(--transition-base), transform var(--transition-base);
  overflow-wrap: break-word;
  word-break: break-all; /* ensure long email addresses wrap on small screens */
  max-width: 100%;
}

.contact-cta__contact-link:hover {
  color: var(--color-accent);
  transform: translateX(10px);
}

/* =============================================================================
   13. GENERIC BUTTON STYLES
   ============================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-pill);
  transition: filter var(--transition-base), transform var(--transition-base), border-color var(--transition-base), color var(--transition-base);
  cursor: pointer;
  border: none;
}

.btn--primary {
  background: linear-gradient(90deg, var(--color-green-from), var(--color-green-to));
  color: var(--color-btn-on-green);
  font-size: 14px;
  padding: 12px 28px;
}

.btn--primary:hover {
  filter: brightness(1.08);
  color: var(--color-btn-on-green);
}

.btn--primary:active {
  filter: brightness(0.96);
  transform: translateY(1px);
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--color-text);
  color: var(--color-text);
  font-size: 14px;
  padding: 11px 27px;
}

.btn--outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn--outline:active {
  filter: brightness(0.9);
  transform: translateY(1px);
}

/* =============================================================================
   14. PAGE & BLOG TEMPLATES
   ============================================================================= */
.site-main {
  /* No padding-top — front-page hero is intentionally full-bleed under the fixed header.
     Inner pages use .page-content which has its own padding-top: 96px clearance. */
}

.site-main--page .container,
.site-main--blog .container {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

/* Page content */
.page-content__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.page-content__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
}

.page-content__hero-image {
  margin-bottom: var(--space-xl);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.page-content__hero-image img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

/* Entry content typography */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.entry-content p {
  margin-bottom: var(--space-sm);
  line-height: 1.75;
}

.entry-content a {
  color: var(--color-accent);
  text-decoration: underline;
}

.entry-content ul,
.entry-content ol {
  padding-left: var(--space-md);
  margin-bottom: var(--space-sm);
  list-style: disc;
}

.entry-content ol {
  list-style: decimal;
}

.entry-content img {
  border-radius: var(--radius-sm);
  margin-block: var(--space-md);
}

/* Blog post cards */
.post-card {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-lg);
  transition: border-color var(--transition-base);
}

.post-card:hover {
  border-color: var(--color-accent-dim);
}

.post-card__thumbnail img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.post-card__content {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.post-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  text-transform: uppercase;
}

.post-card__title a {
  color: var(--color-text);
  transition: color var(--transition-base);
}

.post-card__title a:hover {
  color: var(--color-accent);
}

.post-card__meta {
  font-size: 13px;
  color: var(--color-text-muted);
}

.post-card__excerpt {
  font-size: 15px;
  line-height: 1.65;
}

/* No results */
.no-results {
  text-align: center;
  padding: var(--space-xl) 0;
}

.no-results__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

/* =============================================================================
   15. PAGE HEADER (archive/blog)
   ============================================================================= */
.page-header {
  margin-bottom: var(--space-xl);
}

.page-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
}

/* =============================================================================
   16. ACCESSIBILITY & FOCUS STYLES
   ============================================================================= */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip to content link */
.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 999;
  background: var(--color-accent);
  color: var(--color-text);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  transform: translateY(calc(-100% - var(--space-sm) - 8px));
  transition: transform var(--transition-base);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* =============================================================================
   17. UTILITY CLASSES
   ============================================================================= */
.text-center { text-align: center; }
.text-muted  { color: var(--color-text-muted); }
.mt-auto     { margin-top: auto; }
.sr-only     {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   18. RESPONSIVE — 1280px (tighten layout)
   ============================================================================= */
@media (max-width: 1280px) {
  :root {
    --space-xl: 64px;
  }

  /* Use flex-basis (not width) so the shrinkable flex shorthand is respected */
  .who-we-are__right   { flex-basis: 380px; }
  .good-for-you__left  { flex-basis: 340px; }
  .good-for-you__right { flex-basis: 340px; }
  .contact-cta__left   { flex-basis: 380px; }
  .contact-cta__right  { flex-basis: 380px; }
}

/* =============================================================================
   18b. RESPONSIVE — 1160px (intermediate — prevent flex column collapse)
   Bridges the gap between 1025–1280px where combined fixed flex-bases
   would exceed the container width and collapse the middle column.
   ============================================================================= */
@media (max-width: 1160px) {
  .who-we-are__right   { flex-basis: 300px; }
  .good-for-you__left  { flex-basis: 300px; }
  .good-for-you__right { flex-basis: 300px; }
  .contact-cta__left   { flex-basis: 300px; }
  .contact-cta__right  { flex-basis: 300px; }
}

/* =============================================================================
   19. RESPONSIVE — 1024px (tablet landscape, 2-col products)
   ============================================================================= */
@media (max-width: 1024px) {
  :root {
    --space-xl:   48px;
    --space-lg:   28px;
  }

  /* Products: 2×2 grid */
  .products__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Who We Are: stack */
  .who-we-are__inner {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .who-we-are__right {
    /* in column-flex context, width overrides cross-axis sizing */
    width: 100%;
    flex-basis: auto;
  }

  /* Good For You: stack right column below */
  .good-for-you__inner {
    flex-wrap: wrap;
  }

  .good-for-you__left {
    flex: 0 0 100%; /* override flex-basis so item fills the row when wrapping */
    position: static;
  }

  .good-for-you__right {
    flex: 0 0 100%;
    order: 3;
  }

  .good-for-you__photo {
    aspect-ratio: 16 / 7;  /* landscape crop when photo spans full container width */
    max-height: 480px;
  }

  .good-for-you__middle {
    order: 2;
  }

  /* About Production: stack content, smaller stats */
  .about-production__content {
    flex-direction: column;
    gap: var(--space-md);
  }

  .about-production__stats-wrap {
    width: 100%;
  }

  .about-production__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-production__factory-outline {
    top: 0;
    opacity: 0.4;
  }

  /* Contact CTA: stack */
  .contact-cta__inner {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .contact-cta__left,
  .contact-cta__right {
    flex: 0 0 100%; /* override flex-basis so columns fill full width when stacked */
  }

  /* We Love: adjust grid */
  .we-love__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Good For You: reduce min-height */
  .good-for-you {
    min-height: auto;
  }
}

/* =============================================================================
   20. RESPONSIVE — 768px (tablet portrait / large mobile)
   ============================================================================= */
@media (max-width: 768px) {
  :root {
    --space-xl:   40px;
    --space-lg:   20px;
    --header-height: 60px;
  }

  /* Header: show hamburger, hide nav */
  .site-header__nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(27, 15, 5, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
  }

  .site-header__nav.is-open {
    transform: translateX(0);
  }

  .site-header__menu {
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
  }

  .site-header__menu a {
    font-size: 16px;
    letter-spacing: 0.12em;
  }

  /* Stagger nav items when menu opens */
  .site-header__menu li {
    opacity: 0;
    transform: translateX(-16px);
  }

  .site-header__nav.is-open .site-header__menu li {
    opacity: 1;
    transform: translateX(0);
    transition:
      opacity   0.35s var(--ease-out-expo) calc(0.15s + var(--menu-item-delay, 0ms)),
      transform 0.35s var(--ease-out-expo) calc(0.15s + var(--menu-item-delay, 0ms));
  }

  .site-header__hamburger {
    display: flex;
  }

  /* Hamburger animation when open */
  .site-header__hamburger.is-open .hamburger__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header__hamburger.is-open .hamburger__bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .site-header__hamburger.is-open .hamburger__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }


  /* Hero — mobile: increase min-height, simplify subtitle */
  .hero {
    height: clamp(360px, 110vw, 600px);
  }

  .hero__subtitle {
    left: var(--space-lg);
    right: var(--space-lg);
    width: auto;
    text-align: center;
    font-size: 13px;
  }


  /* Products: single column */
  .products__grid {
    grid-template-columns: 1fr;
  }


  .product-card {
    min-height: 480px;
  }

  /* We Love: single column */
  .we-love__grid {
    grid-template-columns: 1fr;
  }

  /* Footer: stack */
  .site-footer__inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
    padding: var(--space-lg) var(--space-lg);
  }

  /* Ukrainian Hemp */
  .ukrainian-hemp__body {
    font-size: 15px;
  }

  /* Contact CTA glow */
  .contact-cta__glow {
    width: 300px;
    height: 300px;
  }
}

/* =============================================================================
   21. RESPONSIVE — 480px (small mobile)
   ============================================================================= */
@media (max-width: 480px) {
  :root {
    --space-lg: 16px;
  }

  .hero__label {
    font-size: clamp(18px, 5vw, 32px);
  }

  /* Anchor subtitle to the bottom edge instead of using top: 88.7%
     (percentage clips at very small heights). top is unset by using
     bottom so the subtitle always has breathing room. */
  .hero__subtitle {
    top: auto;
    bottom: var(--space-md);
  }

  .product-card__content {
    padding: var(--space-md);
  }

  .product-card__arrow {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }

  .tag-pills {
    gap: 6px;
  }

  .pill {
    font-size: 14px;
    padding: 5px 16px;
  }

  /* Stat cards: tighten horizontal padding so content breathes on narrow phones */
  .about-production__stat {
    padding: 20px 24px;
  }

  .about-production__stat-value {
    font-size: clamp(40px, 10vw, 80px);
  }

  .contact-cta__contact-link {
    font-size: 18px;
  }

  .btn--cta {
    font-size: 16px;
    padding: 14px 28px;
  }
}

/* =============================================================================
   22. SCROLL REVEAL ANIMATION
   ============================================================================= */

/* Initial hidden state — JS adds .reveal on elements to be animated */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity  0.65s var(--ease-smooth) var(--reveal-delay, 0ms),
    transform 0.65s var(--ease-smooth) var(--reveal-delay, 0ms);
}

/* Visible state — JS adds .is-visible when element enters viewport */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================================================
   23. INNER PAGE — SHARED
   ============================================================================= */

/* All inner page <main> elements clear the fixed header */
.page-content {
  padding-top: 96px;
}


/* =============================================================================
   24. PAGE HERO — ABOUT / WE ARE
   ============================================================================= */
.page-hero {
  background: var(--color-bg);
  padding: var(--space-xl) var(--space-2xl);
  border-bottom: 1px solid var(--color-divider);
}

/* About / We Are page hero — background image treatment */
.page-hero--about {
  position: relative;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: center;
  border-bottom: none;
}

.page-hero--about .page-hero__bg {
  position: absolute;
  inset: 0;
  /* CSS placeholder — suggests hemp field/foliage backdrop */
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(60, 90, 20, 0.55) 0%, transparent 70%),
    radial-gradient(ellipse 50% 80% at 85% 70%, rgba(40, 65, 10, 0.4) 0%, transparent 60%),
    linear-gradient(160deg, #0d1a06 0%, #1a2d0a 35%, #1b1905 65%, #1b0f05 100%);
  background-size: cover;
}

.page-hero--about .page-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(27, 15, 5, 0.75) 0%,
    rgba(27, 15, 5, 0.45) 50%,
    rgba(27, 15, 5, 0.65) 100%
  );
}

.page-hero--about .page-hero__inner {
  position: relative;
  z-index: 1;
}

.page-hero__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
  max-width: var(--container-max);
  margin-inline: auto;
}

.page-hero__left {
  flex: 1;
  min-width: 0;
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(60px, 8.5vw, 120px);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-md);
}

.page-hero__body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.7;
  max-width: 560px;
  opacity: 0.9;
}

.page-hero__right {
  width: 400px;
  flex-shrink: 0;
  padding-top: var(--space-sm);
}

.page-hero__for-label {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-sm);
}

/* =============================================================================
   25. MISSION CARDS
   ============================================================================= */
.mission-cards {
  background: var(--color-bg);
  padding: var(--space-xl) var(--space-2xl);
}

/* Partner page: cards float over the hero video — transparent gradient instead of solid bg */
.mission-cards--partner {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(27, 15, 5, 0.55) 40%,
    var(--color-bg) 100%
  );
}

.mission-cards__grid {
  display: flex;
  gap: var(--space-md);
  max-width: var(--container-max);
  margin-inline: auto;
}

.mission-card {
  flex: 1;
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: transform var(--transition-base);
}

.mission-card:hover {
  transform: translateY(-4px);
}

.mission-card__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 400;
  color: var(--color-bg);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.mission-card__body {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-bg-muted);
  line-height: 1.65;
}

/* =============================================================================
   26. REVIVAL SECTION
   ============================================================================= */
.revival-section {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
  padding: var(--space-xl) var(--space-2xl);
  text-align: center;
}

/* Factory photo background + dark vignette overlay */
.revival-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--color-bg) 0%, rgba(27, 15, 5, 0.4) 40%, rgba(27, 15, 5, 0.4) 60%, var(--color-bg) 100%),
    url('../images/about-production-bg.png') center / cover no-repeat;
  pointer-events: none;
}

.revival-section__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  max-width: 900px;
  margin-inline: auto;
  width: 100%;
}

.revival-section__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.revival-section__highlight {
  color: var(--color-green-light);
}

/* =============================================================================
   27. VALUES SECTION
   ============================================================================= */
.values-section {
  background: var(--color-bg);
  padding: var(--space-xl) var(--space-2xl);
}

.values-section__inner {
  max-width: var(--container-max);
  margin-inline: auto;
}

.values-section__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-xl);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.values-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.values-card__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  margin-bottom: 8px; /* 16px gap + 8px = 24px between icon and title */
}

.values-card__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.values-card__body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-soft);
  line-height: 1.7;
}

/* =============================================================================
   28. PRODUCT HERO (product pages)
   ============================================================================= */
.product-hero {
  display: flex;
  min-height: 888px;
  overflow: hidden;
}

/* Left half: image placeholder */
.product-hero__image {
  flex: 0 0 50%;
  position: relative;
  min-height: 888px;
}

.product-hero__image--long-fiber {
  background: url('../images/Long fiber.jpg') center / cover no-repeat;
}

.product-hero__image--short-fiber {
  background: url('../images/Frame 924.jpg') center / cover no-repeat;
}

.product-hero__image--chaff {
  background: url('../images/Chaff.jpg') center / cover no-repeat;
}

/* Overlay on image half */
.product-hero__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(27, 15, 5, 0.6);
}

/* Right half: content */
.product-hero__content {
  flex: 0 0 50%;
  padding-top: 118px;
  padding-right: var(--space-xl);
  padding-left: var(--space-xl);
  padding-bottom: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  background: var(--color-bg);
}

.product-hero__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.product-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}

.product-hero__description {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.65;
  opacity: 0.9;
  max-width: 520px;
}

.product-hero__pills {
  margin-bottom: var(--space-xs);
}

/* =============================================================================
   29. PRODUCT FEATURES LIST
   ============================================================================= */
.product-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  margin-top: var(--space-xs);
}

.product-features-list__item {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.6;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-divider);
}

.product-features-list__item:last-child {
  border-bottom: 1px solid var(--color-divider);
}

/* =============================================================================
   30. INNER UKRAINIAN HEMP + CROSS-SELL (product pages)
   ============================================================================= */
.inner-ukrainian-hemp {
  background: var(--color-bg);
  padding: var(--space-xl) var(--space-2xl);
  text-align: center;
}

.inner-ukrainian-hemp__inner {
  max-width: var(--container-max);
  margin-inline: auto;
}

.inner-ukrainian-hemp__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-md);
}

.inner-ukrainian-hemp__body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-soft);
  line-height: 1.6;
  max-width: 800px;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

.inner-ukrainian-hemp__body p {
  margin-bottom: 0;
}

/* 3-column cross-sell grid */
.cross-sell-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 480px;
  text-align: left;
  border-top: 1px solid var(--color-divider);
}

.cross-sell-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 680px;
  cursor: pointer;
  border-right: 1px solid var(--color-divider);
  transition: opacity var(--transition-base);
}

.cross-sell-card:last-child {
  border-right: none;
}

.cross-sell-card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: transform 0.6s ease;
}

.cross-sell-card:hover .cross-sell-card__bg {
  transform: scale(1.04);
  will-change: transform;
}

.cross-sell-card__bg--long-fiber {
  background: url('../images/Long fiber.jpg') center / cover no-repeat;
}

.cross-sell-card__bg--short-fiber {
  background: url('../images/Short fiber.jpg') center / cover no-repeat;
}

.cross-sell-card__bg--chaff {
  background: url('../images/Chaff.jpg') center / cover no-repeat;
}

.cross-sell-card__bg--merch {
  background: url('../images/Merch.jpg') center / cover no-repeat;
}

.cross-sell-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(27, 15, 5, 0.25) 0%,
    rgba(27, 15, 5, 0.75) 60%,
    rgba(27, 15, 5, 0.9) 100%
  );
  transition: background var(--transition-slow);
}

.cross-sell-card:hover .cross-sell-card__overlay {
  background: linear-gradient(
    to bottom,
    rgba(27, 15, 5, 0.15) 0%,
    rgba(27, 15, 5, 0.6) 60%,
    rgba(27, 15, 5, 0.8) 100%
  );
}

.cross-sell-card__content {
  position: relative;
  z-index: 2;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cross-sell-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.cross-sell-card__description {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.6;
  opacity: 0.85;
}

/* Brown/earth pill variant for product pages */
.pill--earth {
  background: #9e754e;
}

.pill--earth:hover {
  background: #b8855c;
}

/* =============================================================================
   31. HAT SHOWCASE (merch page)
   ============================================================================= */
.hat-showcase {
  position: relative;
  width: 100%;
  min-height: 907px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hat-showcase__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to top, #1b0f05 30%, rgba(27, 15, 5, 0.4) 96%),
    url('../images/20251219_1358_Serene Hemp Sunrise_simple_compose_01kcv7jmwaf28scf5yfsymnwz2.png');
  background-size: cover;
  background-position: center;
}

.hat-showcase__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-xl);
  width: 100%;
  max-width: 1200px;
}

/* Swiper coverflow carousel */
.hat-swiper {
  width: 100%;
  padding-top: 40px;
  padding-bottom: 20px;
  overflow: visible !important;
}

.hat-swiper .swiper-slide {
  width: 380px;
  transition: opacity 0.5s ease;
}

.hat-swiper .swiper-slide:not(.swiper-slide-active) {
  opacity: 0.4;
}

.hat-swiper .swiper-slide-active {
  opacity: 1;
}

.hat-carousel__frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hat-carousel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dot indicator */
.hat-carousel__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(251, 245, 234, 0.25);
  transition: background var(--transition-base);
}

.hat-carousel__dot--green  { background: #4a7c59; }
.hat-carousel__dot--brown  { background: #8b6914; }
.hat-carousel__dot--yellow { background: #c9a84c; }

.hat-carousel__name {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 400;
  color: var(--color-text);
  text-align: center;
}

/* Bottom block: dot + name + price + CTA */
.hat-showcase__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.hat-showcase__active-name {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 400;
  color: var(--color-text);
  text-align: center;
}

/* Price */
.hat-showcase__price {
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 400;
  color: var(--color-text);
  text-align: center;
  line-height: 1;
}

/* =============================================================================
   32. MERCH DESCRIPTION + FEATURES
   ============================================================================= */
.merch-detail {
  background: var(--color-bg);
  padding: var(--space-xl) var(--space-2xl);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

.merch-detail__inner {
  display: flex;
  gap: var(--space-xl);
  max-width: var(--container-max);
  margin-inline: auto;
}

.merch-detail__description,
.merch-detail__features {
  flex: 1;
  min-width: 0;
}

.merch-detail__heading {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-md);
}

.merch-detail__body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.75;
  opacity: 0.88;
}

.merch-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.merch-features-list__item {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.6;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-divider);
  position: relative;
  padding-left: var(--space-md);
}

.merch-features-list__item::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* =============================================================================
   33. MERCH QUOTE
   ============================================================================= */
.merch-quote {
  background: var(--color-bg);
  padding: var(--space-xl) var(--space-2xl);
  text-align: center;
}

.merch-quote__text {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--color-green-light);
  line-height: 1.4;
  max-width: 860px;
  margin-inline: auto;
}

/* =============================================================================
   34. NATURAL MATERIALS GRID (merch page)
   ============================================================================= */
.materials-section {
  background: var(--color-bg);
  padding: var(--space-xl) var(--space-2xl);
  border-top: 1px solid var(--color-divider);
}

.materials-section__inner {
  max-width: var(--container-max);
  margin-inline: auto;
}

.materials-section__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-xl);
  text-align: center;
}

.materials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl) var(--space-lg);
}

.material-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
}

/* Circular image placeholder */
.material-card__image {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: #3d2a14;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.material-card:hover .material-card__image {
  transform: scale(1.06);
}

.material-card__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.material-card__body {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.65;
  opacity: 0.82;
  max-width: 280px;
}

/* =============================================================================
   35. WHY DO I NEED IT (merch page)
   ============================================================================= */
.why-section {
  background: var(--color-bg);
  padding: var(--space-xl) var(--space-2xl);
  border-top: 1px solid var(--color-divider);
}

.why-section__inner {
  display: flex;
  gap: var(--space-xl);
  max-width: var(--container-max);
  margin-inline: auto;
  align-items: stretch;
  min-height: 860px;
}

.why-section__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: relative;
}

.why-section__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}

.why-section__feature {
  position: relative;
  padding-top: var(--space-sm);
  overflow: hidden;
}

.why-section__feature-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin-bottom: var(--space-sm);
}

.why-section__feature-body {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-soft);
  line-height: 1.7;
  max-width: 520px;
}

/* Right image */
.why-section__image {
  flex: 0 0 480px;
  border-radius: var(--radius-md);
  background: url('../images/Merch.jpg') center / cover no-repeat;
  min-height: 400px;
  overflow: hidden;
}

/* Large background number behind feature text */
.why-section__feature-num {
  display: block;
  font-family: var(--font-display);
  font-size: 256px;
  font-weight: 400;
  color: rgba(251, 245, 234, 0.15);
  line-height: 0.8;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  margin-bottom: -120px; /* pull text up over the number */
}

/* 01 / 02 / 03 page navigator */
.why-section__page-nav {
  display: flex;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-lg);
}

.why-section__page-num {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  color: rgba(251, 245, 234, 0.25);
  text-transform: uppercase;
  cursor: default;
  transition: color var(--transition-base);
}

.why-section__page-num--active {
  color: var(--color-text);
}

/* =============================================================================
   36. CONTACTS PAGE
   ============================================================================= */
.contact-page {
  position: relative;
  background: var(--color-bg);
  overflow: hidden;
  min-height: calc(100vh - 96px);
}

/* Decorative radial glow centered on page */
.contact-page__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(158, 117, 78, 0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: glow-breathe 6s ease-in-out infinite;
}

/* Two-column layout */
.contact-page-layout {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 240px;
  padding: 118px 120px 80px;
  max-width: var(--container-max);
  margin-inline: auto;
}

.contact-page__left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 160px;
}

.contact-page__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-page__contacts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-page__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
}

.contact-page__intro {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-soft);
  line-height: 1.7;
  max-width: 440px;
}


.contact-page__contacts-heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
}

.contact-page__contact-link {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 0.02em;
  transition: color var(--transition-base), transform var(--transition-base);
}

.contact-page__contact-link:hover {
  color: var(--color-accent);
  transform: translateX(8px);
}

.contact-page__right {
  flex: 1;
  min-width: 0;
}

/* =============================================================================
   37. CONTACT FORM
   ============================================================================= */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.contact-form__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-field__label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.6;
}

.form-field__input {
  background: var(--color-text);
  border: none;
  border-radius: var(--radius-sm);
  padding: 16px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-bg);
  width: 100%;
  transition: box-shadow var(--transition-base), outline var(--transition-base);
}

.form-field__input::placeholder,
.contact-page__right .wpcf7-form input::placeholder,
.contact-page__right .wpcf7-form textarea::placeholder {
  color: var(--color-form-placeholder);
}

.form-field__input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* CF7 compatibility — mirror native input styles */
.contact-page__right .wpcf7-form input[type="text"],
.contact-page__right .wpcf7-form input[type="email"],
.contact-page__right .wpcf7-form input[type="tel"],
.contact-page__right .wpcf7-form textarea {
  background: var(--color-text);
  border: none;
  border-radius: var(--radius-sm);
  padding: 16px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-bg);
  width: 100%;
  display: block;
  margin-bottom: var(--space-md);
}

.contact-page__right .wpcf7-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, var(--color-green-from), var(--color-green-to));
  color: var(--color-btn-on-green);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  padding: 16px 40px;
  border-radius: 44px;
  border: none;
  cursor: pointer;
  transition: filter var(--transition-base), transform var(--transition-base);
}

.contact-page__right .wpcf7-form input[type="submit"]:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.contact-page__right .wpcf7-form input[type="submit"]:active {
  filter: brightness(0.96);
  transform: translateY(0);
}

.contact-page__right .wpcf7-form input[type="submit"]:disabled,
.contact-page__right .wpcf7-form input[type="submit"][aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* =============================================================================
   38. CONTACT FORM NOTICE
   ============================================================================= */
.contact-notice {
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.contact-notice--success {
  background: rgba(138, 177, 88, 0.12);
  border: 1px solid rgba(138, 177, 88, 0.35);
  color: var(--color-green-light);
}

.contact-notice--error {
  background: rgba(180, 80, 60, 0.1);
  border: 1px solid rgba(180, 80, 60, 0.3);
  color: #e8917a;
}

/* =============================================================================
   39. RESPONSIVE — 1280px (inner pages)
   ============================================================================= */
@media (max-width: 1280px) {
  .page-hero {
    padding: var(--space-xl) var(--space-lg);
  }

  .mission-cards {
    padding: var(--space-xl) var(--space-lg);
  }

  .revival-section {
    padding: var(--space-xl) var(--space-lg);
  }

  .values-section {
    padding: var(--space-xl) var(--space-lg);
  }

  .inner-ukrainian-hemp {
    padding: var(--space-xl) var(--space-lg);
  }

  .merch-detail {
    padding: var(--space-xl) var(--space-lg);
  }

  .merch-quote {
    padding: var(--space-xl) var(--space-lg);
  }

  .materials-section {
    padding: var(--space-xl) var(--space-lg);
  }

  .why-section {
    padding: var(--space-xl) var(--space-lg);
  }

  .why-section__image {
    flex: 0 0 360px;
  }

  .contact-page-layout {
    padding: 118px 64px 80px;
    gap: 80px;
  }
}

/* =============================================================================
   39. RESPONSIVE — 1024px (inner pages, tablet landscape)
   ============================================================================= */
@media (max-width: 1024px) {
  /* About hero */
  .page-hero__inner {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .page-hero__right {
    width: 100%;
  }

  /* Mission cards */
  .mission-cards__grid {
    flex-direction: column;
  }

  /* Values */
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Product hero */
  .product-hero {
    flex-direction: column;
    min-height: auto;
  }

  .product-hero__image {
    flex: none;
    width: 100%;
    height: 400px;
    min-height: 400px;
  }

  .product-hero__content {
    flex: none;
    width: 100%;
    padding: var(--space-lg);
    padding-top: var(--space-lg);
  }

  .product-hero__title {
    font-size: clamp(36px, 6vw, 54px);
  }

  /* Hat showcase */
  .hat-carousel {
    flex-wrap: wrap;
    justify-content: center;
  }

  .hat-carousel__frame {
    width: 280px;
    height: 290px;
  }

  /* Merch detail */
  .merch-detail__inner {
    flex-direction: column;
  }

  /* Why section */
  .why-section__inner {
    flex-direction: column;
  }

  .why-section__image {
    flex: none;
    width: 100%;
    height: 300px;
    min-height: 300px;
  }

  /* Cross-sell grid */
  .cross-sell-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cross-sell-card:nth-child(2) {
    border-right: none;
  }

  .cross-sell-card:nth-child(3) {
    grid-column: 1 / -1;
    border-right: none;
    border-top: 1px solid var(--color-divider);
    min-height: 320px;
  }

  /* Contacts */
  .contact-page-layout {
    flex-direction: column;
    gap: var(--space-xl);
    padding: var(--space-xl) var(--space-lg) var(--space-xl);
  }

  .contact-page__left {
    gap: var(--space-xl);
  }
}

/* =============================================================================
   40. RESPONSIVE — 768px (inner pages, mobile)
   ============================================================================= */
@media (max-width: 768px) {
  .page-content {
    padding-top: 60px;
  }

  /* About hero */
  .page-hero {
    padding: var(--space-lg) var(--space-lg);
  }

  .page-hero--about {
    min-height: 360px;
  }

  .page-hero__title {
    font-size: clamp(48px, 12vw, 80px);
  }

  /* Mission cards */
  .mission-cards {
    padding: var(--space-lg) var(--space-lg);
  }

  /* Revival */
  .revival-section {
    min-height: 400px;
    padding: var(--space-lg) var(--space-lg);
  }

  .revival-section__heading {
    font-size: clamp(28px, 7vw, 44px);
  }

  /* Values */
  .values-section {
    padding: var(--space-lg) var(--space-lg);
  }

  .values-section__heading {
    font-size: clamp(30px, 7vw, 44px);
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  /* Product hero */
  .product-hero__content {
    padding: var(--space-lg);
  }

  /* Product features */
  .product-features-list__item {
    font-size: 15px;
  }

  /* Ukrainian hemp inner */
  .inner-ukrainian-hemp {
    padding: var(--space-lg) var(--space-lg);
  }

  .inner-ukrainian-hemp__heading {
    font-size: clamp(30px, 7vw, 44px);
  }

  /* Cross-sell: single column */
  .cross-sell-grid {
    grid-template-columns: 1fr;
  }

  .cross-sell-card {
    border-right: none;
    border-top: 1px solid var(--color-divider);
    min-height: 320px;
  }

  .cross-sell-card:nth-child(3) {
    grid-column: auto;
  }

  /* Hat showcase */
  .hat-showcase {
    min-height: auto;
    padding: var(--space-xl) var(--space-lg);
  }

  .hat-carousel__item {
    width: 100%;
  }

  .hat-carousel__frame {
    width: 100%;
    max-width: 320px;
    height: 280px;
  }

  .hat-showcase__price {
    font-size: 44px;
  }

  /* Merch detail */
  .merch-detail {
    padding: var(--space-lg) var(--space-lg);
  }

  /* Merch quote */
  .merch-quote {
    padding: var(--space-lg) var(--space-lg);
  }

  .merch-quote__text {
    font-size: 20px;
  }

  /* Materials */
  .materials-section {
    padding: var(--space-lg) var(--space-lg);
  }

  .materials-section__heading {
    font-size: clamp(30px, 7vw, 44px);
  }

  .materials-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg) var(--space-md);
  }

  /* Why section */
  .why-section {
    padding: var(--space-lg) var(--space-lg);
  }

  .why-section__heading {
    font-size: clamp(30px, 7vw, 44px);
  }


  /* Contacts */
  .contact-page-layout {
    padding: var(--space-xl) var(--space-lg) var(--space-xl);
  }

  .contact-page__title,
  .contact-page__contacts-heading {
    font-size: clamp(32px, 8vw, 48px);
  }
}

/* =============================================================================
   41. RESPONSIVE — 480px (inner pages, small mobile)
   ============================================================================= */
@media (max-width: 480px) {
  .materials-grid {
    grid-template-columns: 1fr;
  }

  .hat-carousel {
    flex-direction: column;
    align-items: center;
  }

  .hat-swiper .swiper-slide {
    width: 280px;
  }

  .contact-page-layout {
    padding: var(--space-lg) var(--space-lg) var(--space-xl);
  }

  .product-hero__description {
    font-size: 16px;
  }
}

/* =============================================================================
   23. REDUCED MOTION
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  /* Disable scroll reveal transitions */
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Disable we-love display text animations */
  .we-love__display-dim,
  .we-love__display-bright,
  .we-love.is-visible .we-love__display-dim,
  .we-love.is-visible .we-love__display-bright {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Disable glow pulse */
  .contact-cta__glow,
  .contact-page__glow {
    animation: none;
  }

  /* Disable hover transforms that imply motion */
  .product-card__bg {
    transition: none;
  }

  .product-card:hover .product-card__bg {
    transform: none;
  }

  .product-card:hover .product-card__arrow,
  .cross-sell-card:hover .product-card__arrow {
    transform: none;
  }

  .pill:hover {
    transform: none;
  }

  .btn--cta:hover,
  .btn--cta:active {
    transform: none;
  }

  .we-love__feature:hover .feature-icon img {
    transform: none;
  }

  .contact-cta__contact-link:hover {
    transform: none;
  }

  /* Disable mobile menu stagger */
  .site-header__menu li {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Disable lang dropdown animation */
  .lang-switcher__dropdown {
    transition: none;
  }

  /* Disable hover transforms on inner-page interactive elements */
  .mission-card:hover {
    transform: none;
  }

  /* values-card icons — no hover animation to clean up */

  .material-card:hover .material-card__image {
    transform: none;
  }

  .cross-sell-card:hover .cross-sell-card__bg {
    transform: none;
  }

  .cross-sell-card__bg {
    transition: none;
  }

  .contact-page__contact-link:hover {
    transform: none;
  }

  .contact-page__right .wpcf7-form input[type="submit"]:hover,
  .contact-page__right .wpcf7-form input[type="submit"]:active {
    transform: none;
  }

  /* Hat carousel — suppress coverflow transforms */
  .hat-swiper .swiper-slide {
    transform: none !important;
    transition: opacity var(--transition-base);
  }
}

/* =============================================================================
   24. PRINT STYLES
   ============================================================================= */
@media print {
  .site-header,
  .site-footer,
  .contact-cta__glow {
    display: none;
  }

  .site-main {
    padding-top: 0;
  }

  body {
    background: #fff;
    color: #000;
  }

  a {
    text-decoration: underline;
  }
}

/* =============================================================================
   25. PAGE PARTNER — Hero modifier
   Reuses the existing .page-hero base; this modifier adds a distinct
   background treatment (warm amber/green gradient, no photo needed).
   ============================================================================= */

/* Partner hero — background image treatment */
.page-hero--partner {
  position: relative;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: center;
  border-bottom: none;
}

/* Video fills the hero — same pattern as .hero__bg-video on the front page */
.page-hero--partner .page-hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}

/* Gradient overlay — sits above video, keeps text legible */
.page-hero--partner .page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(27, 15, 5, 0.78) 0%,
    rgba(27, 15, 5, 0.42) 55%,
    rgba(27, 15, 5, 0.62) 100%
  );
}

.page-hero--partner .page-hero__inner {
  position: relative;
  z-index: 2;
}

/* =============================================================================
   26. PAGE PARTNER — Partnership Benefits section
   Three-column card grid mirroring the .values-section / .values-grid pattern.
   ============================================================================= */
.partner-benefits {
  background: var(--color-bg);
  padding: var(--space-xl) var(--space-2xl);
}

.partner-benefits__inner {
  max-width: var(--container-max);
  margin-inline: auto;
}

.partner-benefits__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-xl);
}

.partner-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.partner-benefit-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: #1e1008;
  transition: border-color var(--transition-base), background var(--transition-base);
}

.partner-benefit-card:hover {
  border-color: var(--color-accent-dim);
  background: #261508;
}

/* Accent dot icon — matches .values-card__icon */
.partner-benefit-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  transition: transform 0.25s var(--ease-out-expo);
}

.partner-benefit-card:hover .partner-benefit-card__icon {
  transform: scale(1.08) rotate(-4deg);
}

.partner-benefit-card__title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.partner-benefit-card__body {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-soft);
  line-height: 1.7;
}

/* =============================================================================
   27. PAGE PARTNER — How It Works (numbered steps)
   New pattern: horizontal rule separates steps; accent number is display font.
   ============================================================================= */
.partner-steps {
  background: var(--color-bg-lighter);
  padding: var(--space-xl) var(--space-2xl);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

.partner-steps__inner {
  max-width: var(--container-max);
  margin-inline: auto;
}

.partner-steps__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-xl);
}

.partner-steps__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  list-style: none;
}

.partner-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-top: 2px solid var(--color-accent);
  position: relative;
}

.partner-step__number {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 400;
  color: var(--color-accent);
  line-height: 1;
  opacity: 0.5;
  letter-spacing: -0.02em;
  display: block;
}

.partner-step__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.partner-step__body {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.7;
  opacity: 0.8;
}

/* =============================================================================
   28. PAGE PARTNER — Partner Form section
   Two-column layout mirrors .contact-page-layout.
   The form itself reuses .contact-form and .form-field patterns already defined.
   Additional rules: select and textarea variants of .form-field__input,
   and the glow/layout wrapper unique to this section.
   ============================================================================= */
.partner-form-section {
  position: relative;
  background: var(--color-bg);
  overflow: hidden;
}

/* Decorative radial glow — mirrors .contact-page__glow */
.partner-form-section__glow {
  position: absolute;
  bottom: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse 60% 55% at 50% 100%, rgba(158, 117, 78, 0.22) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.partner-form-section__inner {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--space-2xl);
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-2xl) var(--space-2xl);
}

/* Left column — heading + direct contact links */
.partner-form-section__left {
  flex: 0 0 360px;
  display: flex;
  flex-direction: column;
}

.partner-form-section__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.0;
  margin-bottom: var(--space-md);
}

.partner-form-section__intro {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-xl);
}

.partner-form-section__contacts-heading {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-sm);
}

.partner-form-section__contact-link {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: var(--space-xs);
  transition: color var(--transition-base), transform var(--transition-base);
}

.partner-form-section__contact-link:hover {
  color: var(--color-accent);
  transform: translateX(4px);
}

/* Right column — form */
.partner-form-section__right {
  flex: 1;
  min-width: 0;
}

/* Select field — extends .form-field__input */
.form-field__select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%231b0f05' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  padding-right: 40px;
  cursor: pointer;
}

/* Textarea field — extends .form-field__input */
.form-field__textarea {
  resize: vertical;
  min-height: 120px;
}

/* =============================================================================
   29. PAGE PARTNER — Responsive overrides
   ============================================================================= */

/* 1280px — reduce outer padding */
@media (max-width: 1280px) {
  .partner-benefits {
    padding: var(--space-xl) var(--space-lg);
  }

  .partner-steps {
    padding: var(--space-xl) var(--space-lg);
  }

  .partner-form-section__inner {
    padding: var(--space-2xl) var(--space-lg);
    gap: var(--space-xl);
  }
}

/* 1024px — stack two-column layouts */
@media (max-width: 1024px) {
  .partner-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .partner-steps__list {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }

  .partner-step {
    border-top: none;
    border-left: 2px solid var(--color-accent);
    padding-top: 0;
    padding-left: var(--space-lg);
  }

  .partner-form-section__inner {
    flex-direction: column;
    gap: var(--space-xl);
  }

  .partner-form-section__left {
    flex: none;
    width: 100%;
  }

  .partner-form-section__intro {
    margin-bottom: var(--space-lg);
  }
}

/* 768px — single column, tighten spacing */
@media (max-width: 768px) {
  .partner-benefits {
    padding: var(--space-lg) var(--space-lg);
  }

  .partner-benefits__heading {
    font-size: clamp(30px, 7vw, 44px);
  }

  .partner-benefits__grid {
    grid-template-columns: 1fr;
  }

  .partner-steps {
    padding: var(--space-lg) var(--space-lg);
  }

  .partner-steps__heading {
    font-size: clamp(30px, 7vw, 44px);
  }

  .partner-steps__list {
    max-width: 100%;
  }

  .partner-form-section__inner {
    padding: var(--space-xl) var(--space-lg);
  }

  .partner-form-section__heading {
    font-size: clamp(36px, 9vw, 54px);
  }

  .partner-form-section__left {
    flex: none;
    width: 100%;
  }
}

/* =============================================================================
   30. PAGE PARTNER — reduced-motion overrides
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .partner-benefit-card:hover .partner-benefit-card__icon {
    transform: none;
  }

  .partner-form-section__contact-link:hover {
    transform: none;
  }
}