/*
Theme Name: VerdeTerra
Theme URI: https://vtalgae.com
Author: VerdeTerra
Author URI: https://vtalgae.com
Description: A premium, lightweight Gutenberg block theme for VerdeTerra — nature-inspired living air purification systems. Built for luxury wellness, clean typography, and effortless editing.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: verdeterra
Tags: block-theme, full-site-editing, one-column, editor-style, featured-images, template-editing, blog, custom-colors, custom-logo

VerdeTerra WordPress Theme – A premium Gutenberg-native block theme.
*/

/* ============================================================
   VERDETERRA — CSS Custom Properties
   Mirrors theme.json for broader CSS coverage
   ============================================================ */
:root {
  --deep-green: #222E26;
  --forest-green: #31493C;
  --muted-green: #5B9279;
  --soft-green: #8FCB9B;
  --pale-green: #BDD9C0;
  --warm-neutral: #EAE6E5;
  --cream: #F7F5F3;
  --off-white: #FDFCFA;
  --stone: #D4CFC9;
  --sand: #C8BFB3;
  --charcoal: #2A2A2A;
  --warm-gray: #6B6560;
  --muted-bronze: #9C8B7A;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

  --max-width: 1320px;
  --nav-height: 78px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background-color: var(--off-white);
  line-height: 1.7;
  font-size: 16.5px;
  overflow-x: hidden;
}

::selection { background: var(--pale-green); color: var(--deep-green); }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: color 0.3s ease; }
em, i { font-style: italic; }
ul, ol { list-style: none; padding: 0; margin: 0; }

/* Ensure WordPress blocks don't add unwanted margins */
.wp-site-blocks { padding-top: 0 !important; }

/* Prevent WordPress constrained layout from limiting post-content width.
   Product/template pages handle their own max-widths via .container (1320px). */
.wp-block-post-content {
  max-width: none !important;
}
.wp-block-post-content > * {
  max-width: none !important;
}

/* ============================================================
   HOMEPAGE SECTION WIDTH + LAYOUT FIXES
   WordPress Gutenberg adds .is-layout-constrained and
   .has-global-padding to blocks, which inject padding and
   max-width that override our CSS. These rules ensure every
   section and its children render at the correct width,
   matching mockup-four exactly.
   ============================================================ */

/* --- SECTION-LEVEL: full-width, no constrained padding --- */
.hero-section,
.about-section,
.product-section,
.process-section,
.rooms-section,
.testimonials-section,
.evidence-section,
.family-section,
.range-section,
.bespoke-section,
.journal-section,
.preview-section {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* Kill Gutenberg block-gap margin between sections */
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

/* --- KILL has-global-padding on ALL homepage inner groups --- */
/* NOTE: hero-text-col and about-text-col are excluded — they have
   their own padding in the section CSS rules below. */
.hero-video-col.has-global-padding,
.about-visual-col.has-global-padding,
.product-visual-col.has-global-padding,
.process-header.has-global-padding,
.rooms-header.has-global-padding,
.testimonials-header.has-global-padding,
.evidence-image-col.has-global-padding,
.evidence-text-col.has-global-padding,
.family-visual-col.has-global-padding,
.family-text-col.has-global-padding,
.range-header.has-global-padding,
.bespoke-text-col.has-global-padding,
.bespoke-visual-col.has-global-padding,
.journal-text-col.has-global-padding,
.journal-visual-col.has-global-padding,
.preview-text-col.has-global-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}

/* --- KILL is-layout-constrained on ALL homepage inner groups --- */
/* NOTE: hero-text-col and about-text-col are excluded. */
.hero-video-col.is-layout-constrained,
.about-visual-col.is-layout-constrained,
.product-visual-col.is-layout-constrained,
.process-header.is-layout-constrained,
.rooms-header.is-layout-constrained,
.testimonials-header.is-layout-constrained,
.evidence-image-col.is-layout-constrained,
.evidence-text-col.is-layout-constrained,
.family-visual-col.is-layout-constrained,
.family-text-col.is-layout-constrained,
.range-header.is-layout-constrained,
.bespoke-text-col.is-layout-constrained,
.bespoke-visual-col.is-layout-constrained,
.journal-text-col.is-layout-constrained,
.journal-visual-col.is-layout-constrained,
.preview-text-col.is-layout-constrained {
  max-width: none !important;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Restore correct padding on text columns that WordPress may have stripped */
.hero-text-col {
  padding: 6rem 3.5rem 4rem !important;
}

/* Kill Gutenberg constrained layout on hero text column — force 1:1 grid */
@media (min-width: 1025px) {
  .hero-split.is-layout-grid,
  .hero-split.wp-block-group-is-layout-grid {
    grid-template-columns: 1fr 1fr !important;
    min-height: 100vh !important;
  }
}
.hero-split.is-layout-grid > *,
.hero-split.wp-block-group-is-layout-grid > * {
  min-width: 0 !important;
}
.hero-text-col.is-layout-constrained,
.hero-text-col.has-global-padding {
  max-width: none !important;
  width: auto !important;
  padding-left: 3.5rem !important;
  padding-right: 3.5rem !important;
}
.hero-video-col.is-layout-constrained,
.hero-video-col.has-global-padding {
  max-width: none !important;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.about-text-col {
  padding: 4rem 3.5rem 4rem 2.5rem !important;
}

/* ============================================================
   GUTENBERG GRID LAYOUT OVERRIDES — DESKTOP ONLY
   Force correct column counts on all grid sections.
   Scoped to min-width: 1025px so responsive media queries
   at ≤1024px and ≤768px can override without specificity wars.
   ============================================================ */
@media (min-width: 1025px) {
  .wp-block-post-content .hero-split.is-layout-grid,
  .wp-block-post-content .hero-split.is-layout-grid.is-layout-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    min-height: 100vh !important;
  }
  .wp-block-post-content .about-container.is-layout-grid,
  .wp-block-post-content .about-container.is-layout-grid.is-layout-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    max-width: var(--max-width) !important;
    margin: 0 auto !important;
    align-items: center !important;
  }
  .wp-block-post-content .product-split.is-layout-grid,
  .wp-block-post-content .product-split.is-layout-grid.is-layout-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4rem !important;
    align-items: center !important;
  }
  .wp-block-post-content .process-steps.is-layout-grid,
  .wp-block-post-content .process-steps.is-layout-grid.is-layout-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
  }
  .rooms-grid.is-layout-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
  }
  .testimonials-grid.is-layout-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
  }
  .wp-block-post-content .rooms-grid.is-layout-grid,
  .wp-block-post-content .rooms-grid.is-layout-grid.is-layout-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem !important;
  }
  .wp-block-post-content .testimonials-grid.is-layout-grid,
  .wp-block-post-content .testimonials-grid.is-layout-grid.is-layout-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
  }
  .wp-block-post-content .evidence-band.is-layout-grid,
  .wp-block-post-content .evidence-band.is-layout-grid.is-layout-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4rem !important;
    align-items: center !important;
  }
  .wp-block-post-content .family-split.is-layout-grid,
  .wp-block-post-content .family-split.is-layout-grid.is-layout-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4rem !important;
    align-items: center !important;
  }
  .wp-block-post-content .range-grid.is-layout-grid,
  .wp-block-post-content .range-grid.is-layout-grid.is-layout-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
  }
  .wp-block-post-content .bespoke-layout.is-layout-grid,
  .wp-block-post-content .bespoke-layout.is-layout-grid.is-layout-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4rem !important;
    align-items: center !important;
  }
  .wp-block-post-content .journal-layout.is-layout-grid,
  .wp-block-post-content .journal-layout.is-layout-grid.is-layout-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4rem !important;
    align-items: center !important;
  }
  .wp-block-post-content .preview-layout.is-layout-grid,
  .wp-block-post-content .preview-layout.is-layout-grid.is-layout-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4rem !important;
    align-items: center !important;
  }
} /* end @media (min-width: 1025px) grid overrides */

/* ============================================================
   CONTAINER WIDTH CONSTRAINTS
   Sections without explicit .container wrappers need
   max-width constraints on their inner grids to match
   mockup-four. Without these, grids stretch full viewport.
   ============================================================ */
.wp-block-post-content .process-steps.is-layout-grid,
.wp-block-post-content .process-steps.is-layout-grid.is-layout-grid {
  max-width: var(--max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
  box-sizing: border-box !important;
}
.wp-block-post-content .rooms-grid.is-layout-grid,
.wp-block-post-content .rooms-grid.is-layout-grid.is-layout-grid {
  max-width: var(--max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
  box-sizing: border-box !important;
}
.wp-block-post-content .testimonials-grid.is-layout-grid,
.wp-block-post-content .testimonials-grid.is-layout-grid.is-layout-grid {
  max-width: var(--max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
  box-sizing: border-box !important;
}
.wp-block-post-content .range-grid.is-layout-grid,
.wp-block-post-content .range-grid.is-layout-grid.is-layout-grid {
  max-width: var(--max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
  box-sizing: border-box !important;
}

/* 2-column split layouts that need container constraint */
.wp-block-post-content .evidence-band.is-layout-grid,
.wp-block-post-content .evidence-band.is-layout-grid.is-layout-grid,
.wp-block-post-content .family-split.is-layout-grid,
.wp-block-post-content .family-split.is-layout-grid.is-layout-grid,
.wp-block-post-content .bespoke-layout.is-layout-grid,
.wp-block-post-content .bespoke-layout.is-layout-grid.is-layout-grid,
.wp-block-post-content .journal-layout.is-layout-grid,
.wp-block-post-content .journal-layout.is-layout-grid.is-layout-grid,
.wp-block-post-content .preview-layout.is-layout-grid,
.wp-block-post-content .preview-layout.is-layout-grid.is-layout-grid {
  max-width: var(--max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
  box-sizing: border-box !important;
}

/* Other inner content blocks that need container constraint */
.wp-block-post-content .partners-band {
  max-width: var(--max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
  box-sizing: border-box !important;
}
.wp-block-post-content .range-cta {
  max-width: var(--max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
  box-sizing: border-box !important;
}

/* ============================================================
   FALLBACK: class-based grid containers (pre-Gutenberg grid)
   ============================================================ */
.product-hero-inner.wp-block-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2.5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
/* Kill Gutenberg constrained layout max-width on hero sub-containers */
.product-hero .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none !important;
}
.product-hero-img-wrapper.wp-block-group {
  max-width: none !important;
  width: auto !important;
}
.finishes-layout.wp-block-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4rem;
  align-items: center;
}
.comparison-grid.wp-block-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2rem;
  margin-top: 2rem;
}
.anatomy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  align-items: center;
}
.product-specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}

/* About page grids — Gutenberg column overrides
   CRITICAL: Override Gutenberg's .is-layout-constrained max-width (820px)
   Also apply container constraint since container wrapper was removed */
.mission-layout.wp-block-columns,
.story-layout.wp-block-columns,
.founder-layout.wp-block-columns,
.contact-layout.wp-block-columns {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4rem !important;
  align-items: center;
  max-width: var(--max-width) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 2.5rem !important;
  box-sizing: border-box;
}
.approach-grid.wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2rem !important;
  max-width: var(--max-width) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 2.5rem !important;
  box-sizing: border-box;
}
.values-grid.wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
  max-width: var(--max-width) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 2.5rem !important;
  box-sizing: border-box;
}
/* Process header (values/faq headers) also needs container width */
.values-section .process-header,
.faq-section .process-header {
  max-width: var(--max-width) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 2.5rem !important;
  box-sizing: border-box;
}
/* FAQ grid needs container width too */
.faq-section .faq-grid {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2.5rem;
}
/* Override Gutenberg column flex behavior */
.mission-layout > .wp-block-column,
.story-layout > .wp-block-column,
.founder-layout > .wp-block-column,
.contact-layout > .wp-block-column,
.approach-grid > .wp-block-column,
.values-grid > .wp-block-column {
  flex-basis: auto !important;
  max-width: none !important;
}
/* Kill Gutenberg's .is-layout-constrained max-width on about page grids */
.container > .mission-layout,
.container > .story-layout,
.container > .founder-layout,
.container > .contact-layout,
.container > .approach-grid,
.container > .values-grid {
  max-width: none !important;
  width: 100% !important;
}
/* Also kill constrained layout on the section groups themselves */
.mission-section,
.story-section,
.founder-section,
.approach-section,
.values-section,
.faq-section,
.contact-section {
  max-width: none !important;
}
.mission-section > .container > *,
.story-section > .container > *,
.founder-section > .container > *,
.approach-section > .container > *,
.values-section > .container > *,
.faq-section > .container > *,
.contact-section > .container > * {
  max-width: none !important;
}
/* About hero inner */
.about-hero {
  background-color: var(--cream);
  position: relative;
  overflow: hidden;
}
.about-hero-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2.5rem;
  position: relative;
  z-index: 1;
  text-align: center;
}
.about-hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--deep-green);
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.about-hero-title em { color: var(--muted-green); }
.about-hero-subtitle {
  color: var(--warm-gray);
  max-width: 600px;
  margin: 0 auto;
}
/* Story image grid — native Gutenberg layout */
.story-image-grid {
  position: relative;
}
.story-img-main {
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.story-img-main img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
.story-img-accent {
  position: absolute;
  bottom: -24px;
  right: -24px;
  width: 180px;
  height: 180px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 4px solid var(--cream);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
.story-img-accent img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Founder image wrapper — native Gutenberg */
.founder-image-wrapper {
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.founder-image-wrapper img {
  width: 100%;
  height: 480px;
  object-fit: cover;
}
/* Founder credentials — native Gutenberg */
.credential-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  color: var(--charcoal);
}
.credential-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: var(--pale-green);
  color: var(--deep-green);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Approach card — native Gutenberg */
.approach-card {
  padding: 2rem 1.5rem;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(234, 230, 229, 0.6);
  transition: all 0.4s ease;
}
.approach-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(34, 46, 38, 0.08);
}
.approach-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--deep-green);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: 1.25rem;
}
.approach-number p {
  color: #fff !important;
  margin: 0 !important;
}
/* Value card — native Gutenberg */
.value-card {
  text-align: center;
  padding: 2.5rem 2rem;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(234, 230, 229, 0.6);
  transition: all 0.4s ease;
}
.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(34, 46, 38, 0.08);
}
.value-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--pale-green);
  color: var(--deep-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}
/* FAQ grid — native Gutenberg */
.faq-grid {
  max-width: 800px;
  margin: 0 auto;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--deep-green);
  transition: color 0.3s ease;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--muted-green);
  transition: transform 0.3s ease;
}
.faq-item[open] summary::after {
  content: '−';
}
.faq-item summary:hover { color: var(--muted-green); }
.faq-item p {
  padding-top: 1rem;
  font-size: 0.95rem;
  color: var(--warm-gray);
  line-height: 1.7;
}
/* Contact form — native Gutenberg */
.contact-form-wrapper {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}
.form-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--deep-green);
  margin-bottom: 1.5rem;
}
.form-input {
  color: var(--warm-gray);
  background: var(--off-white);
  margin-bottom: 0;
}
/* Contact icon — native Gutenberg */
.contact-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: var(--pale-green);
  color: var(--deep-green);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Journal page grids — enforce correct column counts */
.featured-layout.wp-block-group {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  gap: 0 !important;
}
.blog-grid.wp-block-group {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
}
.topics-grid.wp-block-group {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
}
.preview-layout.wp-block-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4rem !important;
  align-items: center !important;
}

/* Use case items: alternating 2-column grid */
.usecase-item.wp-block-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  min-height: 500px;
}
/* Even use case items swap image/text order */
.usecase-section > .usecase-item:nth-child(even) {
  direction: rtl;
}
.usecase-section > .usecase-item:nth-child(even) > * {
  direction: ltr;
}

/* Ensure the container class works with Gutenberg's constrained layout */
.container {
  max-width: var(--max-width) !important;
  margin: 0 auto !important;
  padding: 0 2.5rem !important;
  box-sizing: border-box;
  width: 100%;
}

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.section-eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-green);
  margin-bottom: 1.5rem;
  display: block;
}
.section-eyebrow--light { color: var(--soft-green); }

/* Display headings with italic accent */
.display-heading {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  color: var(--deep-green);
  letter-spacing: -0.02em;
}
.display-heading em { color: var(--muted-green); }

/* Body text */
.body-text {
  font-size: 1.05rem;
  color: var(--warm-gray);
  line-height: 1.85;
}
.body-text--lg {
  font-size: 1.15rem;
  line-height: 1.9;
}

/* ============================================================
   BUTTON SYSTEM
   ============================================================ */
/* All buttons: WordPress blocks + plain button elements */
.wp-element-button,
.wp-block-button__link,
button.btn-primary,
a.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 1.1rem 2.6rem !important;
  background-color: var(--deep-green) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  text-decoration: none !important;
}
/* Ensure the WordPress button wrapper doesn't duplicate padding */
.wp-block-button.btn-primary {
  padding: 0 !important;
  background: none !important;
  border: none !important;
}
.wp-element-button:hover,
.wp-block-button__link:hover,
button.btn-primary:hover,
a.btn-primary:hover {
  background-color: var(--forest-green) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(34, 46, 38, 0.25) !important;
}

/* Light primary button — for dark backgrounds (CTA section) */
.btn-primary--light,
.btn-primary.btn-primary--light .wp-block-button__link {
  background-color: #fff !important;
  color: var(--deep-green) !important;
}
.btn-primary--light:hover,
.btn-primary.btn-primary--light .wp-block-button__link:hover {
  background-color: var(--warm-neutral) !important;
  box-shadow: 0 12px 32px rgba(255, 255, 255, 0.2) !important;
}

/* Outline button */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--deep-green) !important;
  border: 1.5px solid var(--stone) !important;
  padding: 1rem 2.2rem !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--deep-green) !important;
  background-color: var(--deep-green) !important;
  color: #fff !important;
}

/* Outline button — base */
.btn-outline,
a.btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 1rem 2.2rem !important;
  background-color: transparent !important;
  color: var(--deep-green) !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: 1.5px solid var(--stone) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.4s ease !important;
  text-decoration: none !important;
}
/* Gutenberg: style the link INSIDE the outline wrapper */
.btn-outline .wp-block-button__link,
a.btn-outline .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 1rem 2.2rem !important;
  background-color: transparent !important;
  color: var(--deep-green) !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: 1.5px solid var(--stone) !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.4s ease !important;
  text-decoration: none !important;
}
/* Gutenberg wrapper: reset wrapper padding/border so only the inner link shows the outline */
.wp-block-button.btn-outline {
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
.btn-outline:hover,
a.btn-outline:hover {
  border-color: var(--deep-green) !important;
  background-color: var(--deep-green) !important;
  color: #fff !important;
}
.btn-outline .wp-block-button__link:hover,
a.btn-outline .wp-block-button__link:hover {
  border-color: var(--deep-green) !important;
  background-color: var(--deep-green) !important;
  color: #fff !important;
}
.btn-outline--sm {
  padding: 0.7rem 1.5rem !important;
  font-size: 0.8rem !important;
}

/* Light outline button — for dark backgrounds */
.btn-outline.btn-outline--light,
a.btn-outline.btn-outline--light {
  color: #fff !important;
  border-color: rgba(255,255,255,0.3) !important;
}
.btn-outline.btn-outline--light .wp-block-button__link,
a.btn-outline.btn-outline--light .wp-block-button__link {
  color: #fff !important;
  border-color: rgba(255,255,255,0.3) !important;
}
.btn-outline.btn-outline--light:hover,
a.btn-outline.btn-outline--light:hover {
  border-color: #fff !important;
  background-color: #fff !important;
  color: var(--deep-green) !important;
}
.btn-outline.btn-outline--light:hover .wp-block-button__link,
a.btn-outline.btn-outline--light:hover .wp-block-button__link {
  border-color: #fff !important;
  background-color: #fff !important;
  color: var(--deep-green) !important;
}

/* Text link with arrow */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--deep-green);
  transition: all 0.3s ease;
}
.btn-text .arrow { transition: transform 0.3s ease; }
.btn-text:hover .arrow { transform: translateX(4px); }
.btn-text:hover { color: var(--muted-green); }
.btn-text--light { color: #fff; }
.btn-text--light:hover { color: var(--soft-green); }

.btn-arrow { transition: transform 0.3s ease; }
.btn-outline:hover .btn-arrow { transform: translateX(4px); }

.btn-full { width: 100%; justify-content: center; }

/* Nav button */
.btn-nav,
a.btn-nav,
.wp-block-button.btn-nav .wp-block-button__link {
  display: inline-block !important;
  padding: 0.65rem 1.6rem !important;
  background-color: var(--deep-green) !important;
  color: #fff !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  transition: all 0.35s ease !important;
  text-decoration: none !important;
}
.btn-nav:hover,
a.btn-nav:hover,
.wp-block-button.btn-nav .wp-block-button__link:hover {
  background-color: var(--forest-green) !important;
  box-shadow: 0 4px 16px rgba(34, 46, 38, 0.2) !important;
}

/* ============================================================
   NAVIGATION — Fixed header
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 2.5rem;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  transition: all 0.4s ease;
  background: rgba(253, 252, 250, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
/* Hide stray <p> and <br> tags that wpautop adds inside header shortcode */
.site-header br,
.site-header > p:empty,
.site-header .nav-container br,
.site-header .nav-container > p:empty,
.site-header .nav-actions br,
.site-header .nav-actions > p:empty,
.site-header .cart-dropdown br,
.site-header .cart-dropdown > p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}
.site-header > p:not(:empty) {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}
.site-header.scrolled {
  background: rgba(253, 252, 250, 0.95);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
}

.nav-logo { flex-shrink: 0; }
.logo-img { height: 38px; width: auto; }

.nav-links {
  display: flex;
  gap: 2.5rem;
  align-items: center;
}
.nav-links a {
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em;
  color: var(--deep-green) !important;
  transition: color 0.3s ease;
  position: relative;
  text-decoration: none;
}
.nav-links a:hover { color: var(--muted-green) !important; }
.nav-links a.active {
  color: var(--muted-green);
  font-weight: 600;
}
.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--muted-green);
  border-radius: 1px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-cart {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--deep-green);
  transition: color 0.3s ease;
  position: relative;
}
.nav-cart:hover { color: var(--muted-green); }
.nav-cart svg { flex-shrink: 0; }
.nav-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--muted-green);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  position: absolute;
  top: -6px;
  right: -10px;
}

/* Cart icon bounce animation */
.nav-cart.cart-bounce {
  animation: cartBounce 0.6s ease;
}
@keyframes cartBounce {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.2); }
  60% { transform: scale(0.95); }
}

/* Cart wrapper and dropdown */
.nav-cart-wrapper {
  position: relative;
}
.cart-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 340px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 16px 48px rgba(34, 46, 38, 0.15);
  border: 1px solid var(--warm-neutral);
  z-index: 1001;
  padding: 1.25rem;
  max-height: 400px;
  overflow-y: auto;
}
.cart-dropdown--visible {
  display: block;
}
.cart-dropdown-empty {
  text-align: center;
  color: var(--warm-gray);
  font-size: 0.9rem;
  padding: 1.5rem 0;
}
.cart-dropdown-items {
  margin-bottom: 1rem;
}
.cart-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--warm-neutral);
}
.cart-dropdown-item:last-child {
  border-bottom: none;
}
.cdi-img {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--warm-neutral);
}
.cdi-details {
  flex: 1;
  min-width: 0;
}
.cdi-name {
  display: block;
  color: var(--deep-green);
  font-weight: 500;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cdi-meta {
  display: block;
  color: var(--warm-gray);
  font-size: 0.78rem;
  margin-top: 0.15rem;
}
.cdi-remove {
  color: var(--warm-gray);
  font-size: 1.2rem;
  text-decoration: none;
  padding: 0.25rem;
  line-height: 1;
  transition: color 0.2s;
  flex-shrink: 0;
}
.cdi-remove:hover {
  color: #e74c3c;
}
.cart-dropdown-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-top: 2px solid var(--warm-neutral);
  font-weight: 600;
  color: var(--deep-green);
  font-size: 0.95rem;
}
.cart-dropdown-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.cart-dropdown-actions .btn-primary,
.cart-dropdown-actions a.btn-primary {
  flex: 1;
  text-align: center;
  justify-content: center;
  padding: 0.7rem 1rem !important;
  font-size: 0.78rem !important;
}
.cart-dropdown-actions .btn-outline,
.cart-dropdown-actions a.btn-outline {
  flex: 1;
  text-align: center;
  justify-content: center;
  padding: 0.7rem 1rem !important;
  font-size: 0.78rem !important;
}
.btn-sm {
  padding: 0.7rem 1rem !important;
  font-size: 0.78rem !important;
}

/* ---- MINI CART DROPDOWN — Responsive fixes ---- */
@media (max-width: 768px) {
  /* Mini cart dropdown — full-width fixed panel on mobile */
  .cart-dropdown {
    position: fixed;
    top: 56px;
    right: 8px;
    left: auto;
    width: auto;
    max-width: calc(100vw - 1rem);
    min-width: 280px;
    padding: 1rem;
    max-height: calc(100vh - 72px);
    box-shadow: 0 12px 40px rgba(34, 46, 38, 0.18);
    z-index: 1002;
  }
  /* Cart item layout — ensure it fits */
  .cart-dropdown-item {
    gap: 0.6rem;
    padding: 0.6rem 0;
  }
  .cdi-img {
    width: 48px;
    height: 48px;
  }
  .cdi-name {
    font-size: 0.82rem;
  }
  .cdi-meta {
    font-size: 0.72rem;
  }
  /* Action buttons — stack vertically on very small screens */
  .cart-dropdown-actions {
    flex-direction: column;
    gap: 0.5rem;
  }
  .cart-dropdown-actions .btn-primary,
  .cart-dropdown-actions a.btn-primary,
  .cart-dropdown-actions .btn-outline,
  .cart-dropdown-actions a.btn-outline,
  .btn-sm {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  /* Total row */
  .cart-dropdown-total {
    font-size: 0.88rem;
    padding: 0.6rem 0;
  }
}

/* Mobile menu toggle */
.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 1001;
  line-height: 0;
}
.mobile-toggle br,
.mobile-toggle p,
.mobile-toggle > :not(span) {
  display: none !important;
}
.mobile-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--deep-green);
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* ============================================================
   HERO — Split Screen
   ============================================================ */
.hero-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  overflow: hidden;
}

.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  min-height: 100vh;
}

.hero-text-col {
  display: flex;
  align-items: center;
  padding: 6rem 3.5rem 4rem;
  background: var(--off-white);
}

.hero-text-inner {
  max-width: 520px;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted-green);
  margin-bottom: 1.5rem;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 3.8rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--deep-green);
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.hero-title em { color: var(--muted-green); }

.hero-subtitle {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--warm-gray);
  line-height: 1.8;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 2.5rem;
}
/* Override Gutenberg flex layout on hero-actions */
.hero-actions.is-layout-flex {
  display: flex !important;
  gap: 1.5rem !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
/* Hero CTA text link (inside hero-actions flex) */
.hero-cta-text {
  margin: 0 !important;
}
.hero-cta-text a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--deep-green);
  transition: all 0.3s ease;
}
.hero-cta-text a .arrow { transition: transform 0.3s ease; }
.hero-cta-text a:hover { color: var(--muted-green); }
.hero-cta-text a:hover .arrow { transform: translateX(4px); }

.hero-trust {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid var(--warm-neutral);
}
/* Override Gutenberg flex layout on hero-trust */
.hero-trust.is-layout-flex {
  display: flex !important;
  gap: 1.5rem !important;
  flex-wrap: wrap !important;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--warm-gray);
  letter-spacing: 0.02em;
}
.trust-badge svg { color: var(--muted-green); flex-shrink: 0; }

.hero-video-col {
  position: relative;
  overflow: hidden;
}

.hero-video-wrapper {
  position: absolute;
  inset: 0;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(34, 46, 38, 0.25) 0%,
    rgba(34, 46, 38, 0.15) 50%,
    rgba(34, 46, 38, 0.3) 100%
  );
}

.hero-video-badge {
  position: absolute;
  bottom: 3rem;
  left: 3rem;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  padding: 1rem 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.badge-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--deep-green);
  margin-bottom: 0.15rem;
}
.badge-sub {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-gray);
}

/* ============================================================
   BRAND PHILOSOPHY — Editorial Split
   ============================================================ */
.about-section {
  padding: 8rem 0;
  background: var(--off-white);
  overflow: hidden;
}

.about-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: var(--max-width) !important;
  width: 100% !important;
  margin: 0 auto !important;
  align-items: center;
}

.about-text-col {
  padding: 4rem 3.5rem 4rem 2.5rem;
  display: flex;
  align-items: center;
}
.about-text-inner {
  max-width: 520px;
}
.about-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--deep-green);
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.about-body {
  font-size: 1.05rem;
  color: var(--warm-gray);
  line-height: 1.85;
  margin-bottom: 1rem;
}
.about-body-secondary {
  font-size: 0.95rem;
  color: var(--warm-gray);
  line-height: 1.8;
  margin-bottom: 2rem;
  opacity: 0.85;
}

.about-visual-col {
  position: relative;
  padding: 2rem;
}
.about-image-wrapper {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.about-hero-img {
  width: 100% !important;
  height: 520px !important;
  max-height: 520px !important;
  object-fit: cover;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.about-hero-img img {
  width: 100% !important;
  height: 520px !important;
  max-height: 520px !important;
  object-fit: cover !important;
}
.wp-block-image.about-hero-img {
  height: 520px !important;
  max-height: 520px !important;
  overflow: hidden;
}
.about-established {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.about-established span {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin-bottom: 0.15rem;
}
.about-established strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--deep-green);
  font-weight: 400;
}

/* ============================================================
   BUBBLE ANIMATIONS
   ============================================================ */
.about-bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.about-bubbles .bubble {
  background: radial-gradient(circle at 30% 30%, rgba(189, 217, 192, 0.35), rgba(143, 203, 155, 0.15) 50%, rgba(91, 146, 121, 0.05) 100%);
  border-color: rgba(189, 217, 192, 0.2);
}

.bubble {
  position: absolute;
  bottom: -20px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(189, 217, 192, 0.35),
    rgba(143, 203, 155, 0.15) 50%,
    rgba(91, 146, 121, 0.05) 100%
  );
  border: 1px solid rgba(189, 217, 192, 0.2);
  box-shadow:
    inset 0 -2px 6px rgba(255, 255, 255, 0.1),
    0 0 20px rgba(143, 203, 155, 0.1);
  pointer-events: none;
  animation: bubbleFloat linear infinite;
}
.bubble--1  { width: 8px;  height: 8px;  left: 8%;  animation-duration: 12s; animation-delay: 0s; }
.bubble--2  { width: 12px; height: 12px; left: 15%; animation-duration: 14s; animation-delay: 1s; }
.bubble--3  { width: 6px;  height: 6px;  left: 25%; animation-duration: 10s; animation-delay: 3s; }
.bubble--4  { width: 16px; height: 16px; left: 35%; animation-duration: 16s; animation-delay: 0.5s; }
.bubble--5  { width: 10px; height: 10px; left: 45%; animation-duration: 11s; animation-delay: 2s; }
.bubble--6  { width: 14px; height: 14px; left: 55%; animation-duration: 13s; animation-delay: 4s; }
.bubble--7  { width: 7px;  height: 7px;  left: 65%; animation-duration: 15s; animation-delay: 1.5s; }
.bubble--8  { width: 11px; height: 11px; left: 72%; animation-duration: 12s; animation-delay: 3.5s; }
.bubble--9  { width: 9px;  height: 9px;  left: 80%; animation-duration: 14s; animation-delay: 0.8s; }
.bubble--10 { width: 13px; height: 13px; left: 88%; animation-duration: 11s; animation-delay: 2.5s; }
.bubble--11 { width: 5px;  height: 5px;  left: 92%; animation-duration: 16s; animation-delay: 5s; }
.bubble--12 { width: 10px; height: 10px; left: 42%; animation-duration: 13s; animation-delay: 6s; }

@keyframes bubbleFloat {
  0% {
    bottom: -20px;
    opacity: 0;
    transform: translateX(0) scale(0.8);
  }
  10% {
    opacity: 0.7;
    transform: translateX(10px) scale(1);
  }
  50% {
    opacity: 0.5;
    transform: translateX(-15px) scale(1.05);
  }
  90% {
    opacity: 0.2;
    transform: translateX(8px) scale(0.95);
  }
  100% {
    bottom: 105%;
    opacity: 0;
    transform: translateX(0) scale(0.9);
  }
}

/* Background text */
.about-bg-text {
  position: absolute;
  bottom: -0.5rem;
  left: -1rem;
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 7rem);
  font-weight: 400;
  color: var(--warm-neutral);
  letter-spacing: 0.05em;
  opacity: 0.35;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}

/* ============================================================
   PRODUCT — Split Layout
   ============================================================ */
.product-section {
  padding: 6rem 0 8rem;
  background: var(--cream);
}

.product-split {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4rem;
  align-items: center !important;
}

.product-visual-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.product-image-wrapper {
  background: var(--warm-neutral);
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-hero-img {
  max-height: 500px;
  width: auto;
}
/* WordPress wraps images in figure — ensure img respects constraints */
.product-hero-img img {
  max-height: 500px !important;
  width: auto !important;
  height: auto !important;
}

.product-color-swatches {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  justify-content: center;
}
.swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}
.swatch--active { border-color: var(--muted-green); }
.swatch:hover { transform: scale(1.15); }

.product-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--deep-green);
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.product-desc {
  font-size: 1.05rem;
  color: var(--warm-gray);
  line-height: 1.8;
  margin-bottom: 2.5rem;
}

.product-features-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 2.5rem;
}

.product-feature {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--warm-neutral);
}
.product-feature:first-child { padding-top: 0; }
.product-feature:last-child { border-bottom: none; padding-bottom: 0; }

.feature-icon-circle {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: var(--pale-green);
  color: var(--deep-green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-feature h4 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--deep-green);
  margin-bottom: 0.3rem;
}
.product-feature p {
  font-size: 0.92rem;
  color: var(--warm-gray);
  line-height: 1.65;
}

/* ============================================================
   PROCESS — 3-Step Layout
   ============================================================ */
.process-section {
  padding: 7rem 0 8rem;
  background: var(--off-white);
}

.process-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}

.process-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--deep-green);
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.process-subtitle {
  font-size: 1rem;
  color: var(--warm-gray);
  line-height: 1.75;
}

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

.process-step {
  text-align: center;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--deep-green);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

.step-image {
  width: 100%;
  height: 240px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: var(--warm-neutral);
}
.step-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step-content h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 0.75rem;
}
.step-content p {
  font-size: 1rem;
  color: var(--warm-gray);
  line-height: 1.75;
  max-width: 340px;
  margin: 0 auto;
}

/* ============================================================
   ROOMS — Card Grid
   ============================================================ */
.rooms-section {
  padding: 6rem 0 8rem;
  background: var(--off-white);
}

.rooms-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem !important;
}
/* Ensure Gutenberg-constrained layout doesn't collapse margin */
.rooms-header.is-layout-constrained {
  margin-bottom: 4rem !important;
}

.rooms-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--deep-green);
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.rooms-subtitle {
  font-size: 1rem;
  color: var(--warm-gray);
  line-height: 1.75;
}

.rooms-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.room-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(234, 230, 229, 0.6);
  transition: all 0.4s ease;
}
.room-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(34, 46, 38, 0.1);
}

.room-image {
  height: 260px;
  overflow: hidden;
}
.room-image figure {
  height: 100%;
  margin: 0;
}
.room-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.room-card:hover .room-image img {
  transform: scale(1.05);
}

.room-content {
  padding: 1.75rem 1.5rem;
}
.room-content h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 0.6rem;
}
.room-content p {
  font-size: 0.95rem;
  color: var(--warm-gray);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.room-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.room-tags span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  background: var(--pale-green);
  color: var(--deep-green);
  border-radius: 4px;
}

/* ============================================================
   TESTIMONIALS — Dark Section (Mockup 4 specs-section)
   ============================================================ */
.testimonials-section {
  padding: 6rem 0 8rem;
  background: var(--deep-green);
}

.testimonials-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}

.testimonials-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.02em;
}
.testimonials-headline em { color: var(--soft-green); }

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.testimonial-card {
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.4s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}

.testimonial-stars {
  color: var(--soft-green);
  font-size: 1rem;
  letter-spacing: 3px;
  margin-bottom: 1.25rem;
}

/* Testimonial card text — targets both blockquote and p elements
   since Gutenberg may render testimonial content as plain paragraphs */
.testimonial-card blockquote,
.testimonial-card .testimonial-quote,
.testimonial-card .wp-block-paragraph {
  font-size: 1rem;
  color: rgba(255,255,255,0.8) !important;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  font-style: italic;
}

.testimonial-author cite,
.testimonial-author,
.testimonial-card .testimonial-author {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5) !important;
  font-style: normal;
}

/* ============================================================
   EVIDENCE — CO₂ Reduction Band
   ============================================================ */
.evidence-section {
  padding: 7rem 0;
  background: var(--off-white);
}

.evidence-band {
  background: var(--cream);
  border: 1px solid var(--warm-neutral);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 4rem;
}

.evidence-layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  min-height: 380px;
}

.evidence-image-col {
  overflow: hidden;
  background: var(--warm-neutral);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.evidence-image-col img {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.evidence-text-col {
  padding: 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Override WordPress centering — content should be left-aligned */
.evidence-text-col > * {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.evidence-headline {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 400;
  color: var(--deep-green);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.evidence-body {
  font-size: 1.05rem;
  color: var(--warm-gray);
  line-height: 1.85;
  margin-bottom: 1.5rem;
}

.evidence-stat {
  margin-bottom: 1.5rem;
}
.evidence-stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--muted-green);
  margin-bottom: 0.25rem;
}
.evidence-stat-unit {
  display: block;
  font-size: 0.9rem;
  color: var(--warm-gray);
  letter-spacing: 0.03em;
}

/* Partner logos */
.partners-band {
  text-align: center;
  padding-top: 3rem;
  border-top: 1px solid var(--warm-neutral);
}
.partners-label {
  display: block;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--warm-gray);
  letter-spacing: 0.05em;
  margin-bottom: 2rem;
}
.logos-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}
.partner-logo {
  height: 110px;
  width: auto;
  opacity: 0.5;
  filter: grayscale(100%);
  transition: all 0.4s ease;
}
.partner-logo:hover {
  opacity: 0.9;
  filter: grayscale(0%);
}

/* ============================================================
   FAMILY WELLNESS — Split Layout
   ============================================================ */
.family-section {
  padding: 6rem 0 8rem;
  background: var(--cream);
}

.family-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: none !important;
}

.family-image-stack {
  position: relative;
}

.family-image-main {
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.family-image-main img {
  width: 100%;
  height: 480px;
  object-fit: cover;
}

.family-image-accent {
  position: absolute;
  bottom: -24px;
  right: -24px;
  width: 160px;
  height: 160px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 4px solid var(--cream);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
.family-image-accent img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.family-headline {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--deep-green);
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.family-headline em { color: var(--muted-green); }

.family-body {
  font-size: 1rem;
  color: var(--warm-gray);
  line-height: 1.8;
  margin-bottom: 0.75rem;
}
.family-body-secondary {
  font-size: 0.95rem;
  color: var(--warm-gray);
  line-height: 1.75;
  margin-bottom: 0.5rem;
  opacity: 0.85;
}

.family-checklist {
  margin: 1.5rem 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.check-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.check-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--muted-green);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.check-item span:last-child {
  font-size: 0.95rem;
  color: var(--charcoal);
}

/* ============================================================
   PRODUCT RANGE — 3 Cards
   ============================================================ */
.range-section {
  padding: 6rem 0 7rem;
  background: var(--off-white);
}

.range-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}

.range-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--deep-green);
  letter-spacing: -0.02em;
}

.range-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 4rem;
}

.range-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(234, 230, 229, 0.6);
  transition: all 0.4s ease;
  position: relative;
}
.range-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(34, 46, 38, 0.1);
}

.range-card-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.6rem 1.5rem;
  background: var(--deep-green);
  color: #fff;
  width: 100%;
  text-align: center;
}

.range-card-image {
  height: 300px;
  overflow: hidden;
  background: var(--warm-neutral);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.range-card-image img {
  max-height: 260px;
  width: auto;
  object-fit: contain;
}

.range-card-content {
  padding: 1.75rem 1.5rem;
}
.range-card-content h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 0.6rem;
}
.range-card-content p {
  font-size: 0.95rem;
  color: var(--warm-gray);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.range-cta {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
.range-cta p {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--deep-green);
  margin-bottom: 0.75rem;
}
.range-cta span {
  font-size: 1rem;
  color: var(--warm-gray);
  line-height: 1.8;
  display: block;
}

/* ============================================================
   ALBERO BESPOKE — Split
   ============================================================ */
.bespoke-section {
  padding: 6rem 0 8rem;
  background: var(--cream);
}

.bespoke-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.bespoke-headline {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 400;
  color: var(--deep-green);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.bespoke-body {
  font-size: 1.05rem;
  color: var(--warm-gray);
  line-height: 1.8;
  margin-bottom: 2rem;
}

.bespoke-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
a.bespoke-option-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  outline: none;
}
a.bespoke-option-card-link:focus-visible {
  outline: 2px solid var(--muted-green);
  outline-offset: 2px;
  border-radius: var(--radius-lg);
}
.bespoke-option-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform 0.4s ease;
}
.bespoke-option-card:hover { transform: translateY(-4px); }
.bespoke-option-card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}
.bespoke-option-label {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(34, 46, 38, 0.75);
  backdrop-filter: blur(8px);
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
}

/* ============================================================
   JOURNAL TEASER
   ============================================================ */
.journal-section {
  padding: 6rem 0 6rem;
  background: var(--off-white);
}

.journal-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.journal-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--deep-green);
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.journal-headline em { color: var(--muted-green); }

.journal-subtitle {
  font-size: 1.05rem;
  color: var(--warm-gray);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.journal-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.journal-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.5rem 1.1rem;
  background: var(--warm-neutral);
  color: var(--warm-gray);
  border-radius: 4px;
  transition: all 0.3s ease;
}
.journal-tag:hover {
  background: var(--deep-green);
  color: #fff;
}

.journal-image-stack {
  position: relative;
}
.journal-img-1 {
  border-radius: var(--radius-xl);
  width: 85%;
  height: 380px;
  object-fit: cover;
}
.journal-img-2 {
  position: absolute;
  top: 40px;
  right: 0;
  width: 55%;
  height: 260px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 4px solid var(--off-white);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}

/* ============================================================
   PREVIEW CTA — Dark Section
   ============================================================ */
.preview-section {
  padding: 7rem 0;
  background: var(--forest-green);
}

.preview-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: none !important;
}

.preview-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.preview-body {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.85;
  margin-bottom: 2rem;
}

.preview-benefits {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.preview-benefit {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.benefit-arrow {
  color: var(--soft-green);
  font-weight: 600;
  flex-shrink: 0;
}
.preview-benefit span:last-child {
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
}

/* Preview form card */
/* Preview form card — white card on dark background */
.preview-form-col,
.preview-form,
.preview-form-col.has-global-padding {
  background: #fff !important;
  border-radius: var(--radius-xl) !important;
  padding: 2.5rem !important;
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}
/* Override Gutenberg constrained layout on the form card */
.preview-form-col.is-layout-constrained > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.form-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.form-group {
  margin-bottom: 1rem;
}
.form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--charcoal);
  margin-bottom: 0.4rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--charcoal);
  background: var(--cream);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  transition: all 0.3s ease;
  outline: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--stone); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--muted-green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(91, 146, 121, 0.1);
}
.form-group select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6560' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.form-group textarea { resize: vertical; min-height: 80px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  padding: 4rem 0 0;
  background: var(--deep-green);
  color: rgba(255,255,255,0.6);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-grid.is-layout-grid {
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
}

.footer-logo {
  height: 24px;
  width: auto;
  margin-bottom: 1rem;
  filter: brightness(10);
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Override Gutenberg centering in footer columns */
.footer-brand > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  margin-left: 0 !important;
  margin-right: auto !important;
  max-width: none !important;
}

.footer-tagline {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  margin-bottom: 1.25rem;
  max-width: 300px;
}

.footer-social {
  display: flex;
  gap: 1rem;
}
.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5);
  transition: all 0.3s ease;
}
.social-link:hover {
  border-color: var(--soft-green);
  color: var(--soft-green);
}

.footer-nav h4,
.footer-contact h4,
.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.footer-nav ul,
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.footer-nav ul li a,
.footer-col ul li a {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.5);
  transition: color 0.3s ease;
}
.footer-nav ul li a:hover,
.footer-col ul li a:hover {
  color: #fff;
}

.footer-contact p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.4rem;
}
.footer-contact p a {
  color: rgba(255,255,255,0.5);
  transition: color 0.3s ease;
}
.footer-contact p a:hover {
  color: #fff;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.3);
}

/* ============================================================
   PAGE HERO (Generic for sub-pages)
   ============================================================ */
.page-hero {
  padding: 10rem 0 5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero--cream { background: var(--cream); }
.page-hero--dark { background: var(--forest-green); }
.page-hero--white { background: var(--off-white); }

.page-hero-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2.5rem;
  position: relative;
  z-index: 1;
}

.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.page-hero--cream .page-hero-title,
.page-hero--white .page-hero-title { color: var(--deep-green); }
.page-hero--dark .page-hero-title { color: #fff; }
.page-hero-title em { color: var(--muted-green); }
.page-hero--dark .page-hero-title em { color: var(--soft-green); }

.page-hero-subtitle {
  font-size: 1.15rem;
  line-height: 1.8;
  max-width: 600px;
  margin: 0 auto;
}
.page-hero--cream .page-hero-subtitle,
.page-hero--white .page-hero-subtitle { color: var(--warm-gray); }
.page-hero--dark .page-hero-subtitle { color: rgba(255,255,255,0.7); }

/* ============================================================
   PRODUCT PAGE STYLES (Alberello)
   ============================================================ */
.product-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--cream);
  position: relative;
  overflow: hidden;
}
.product-hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  background: var(--warm-neutral);
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
}
.product-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2.5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.product-hero-text {
  padding: 8rem 0 4rem;
}
.product-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--deep-green);
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.product-hero-title em { color: var(--muted-green); }
.product-hero-desc {
  font-size: 1.1rem;
  color: var(--warm-gray);
  line-height: 1.85;
  margin-bottom: 2.5rem;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 460px;
}
.product-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem;
}
.product-hero-visual .product-hero-img,
.product-hero-img-wrapper .product-hero-img,
.product-hero-img-wrapper img {
  max-height: 560px !important;
  width: auto !important;
  height: auto !important;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.15));
}

/* Story section */
.story-section {
  padding: 8rem 0;
  background: var(--off-white);
}
.story-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.story-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--deep-green);
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
}
.story-headline em { color: var(--muted-green); }
.story-body {
  font-size: 1.15rem;
  color: var(--warm-gray);
  line-height: 1.9;
  margin-bottom: 1.25rem;
}
.story-body:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 3.5rem;
  float: left;
  line-height: 1;
  margin-right: 0.5rem;
  margin-top: 0.1rem;
  color: var(--deep-green);
}

/* Product hero — eyebrow, actions, badges, float */
.product-hero-eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted-green);
  margin-bottom: 1.5rem;
}
.product-hero-actions {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin-bottom: 3rem;
}
.product-hero-badges {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid var(--stone);
  margin-top: 0 !important;
}
.hero-badge { text-align: center; }
/* Kill Gutenberg-injected margin on badge wrapper groups */
.product-hero-badges .wp-block-group {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.hero-badge-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 0.2rem;
}
.hero-badge-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin-top: 0 !important;
}
.product-hero-img-wrapper {
  position: relative;
  display: inline-block;
}
.product-hero-float {
  position: absolute;
  bottom: 2rem;
  right: -1rem;
  background: #fff;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  margin: 0 !important;
}
/* Kill Gutenberg-injected margin on float wrapper */
.product-hero-float .wp-block-group,
.product-hero-float > .wp-block-group {
  margin: 0 !important;
}
.product-hero-float span { display: block; }
.float-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-gray);
  margin-bottom: 0.15rem;
}
.float-value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--deep-green);
}

/* ============================================================
   ALBERELLO — ANATOMY (Exploded View)
   ============================================================ */
.anatomy-section {
  padding: 7rem 0;
  background: var(--cream);
}
.anatomy-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}
.anatomy-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--deep-green);
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.anatomy-headline em { color: var(--muted-green); }
.anatomy-subtitle {
  font-size: 1rem;
  color: var(--warm-gray);
  line-height: 1.75;
}
.anatomy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  align-items: center;
}
.anatomy-features {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.anatomy-feature {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.5rem;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(234, 230, 229, 0.6);
  transition: all 0.4s ease;
}
.anatomy-feature:hover {
  transform: translateX(4px);
  box-shadow: 0 8px 24px rgba(34, 46, 38, 0.06);
}
.anatomy-feature--right {
  flex-direction: row-reverse;
  text-align: right;
}
.anatomy-feature--right:hover { transform: translateX(-4px); }
.anatomy-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: var(--pale-green);
  color: var(--deep-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.anatomy-icon svg {
  display: block;
  stroke: currentColor;
}
.anatomy-feature h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--deep-green);
  margin-bottom: 0.3rem;
}
.anatomy-feature p {
  font-size: 0.88rem;
  color: var(--warm-gray);
  line-height: 1.6;
}
.anatomy-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.anatomy-visual img {
  max-height: 480px;
  width: auto;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.1));
}

/* ============================================================
   ALBERELLO — FINISHES (Color Swatches)
   ============================================================ */
.finishes-section {
  padding: 6rem 0;
  background: var(--off-white);
}
.finishes-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.finishes-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--deep-green);
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.finishes-headline em { color: var(--muted-green); }
.finishes-text p {
  font-size: 1.05rem;
  color: var(--warm-gray);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.finish-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.finish-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--warm-neutral);
  cursor: pointer;
  transition: all 0.3s ease;
}
.finish-option:hover,
.finish-option--active {
  border-color: var(--muted-green);
  box-shadow: 0 4px 16px rgba(34, 46, 38, 0.08);
}
.finish-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.08);
  flex-shrink: 0;
}
.finish-info h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--deep-green);
  margin-bottom: 0.1rem;
}
.finish-info p {
  font-size: 0.82rem;
  color: var(--warm-gray);
  margin-bottom: 0 !important;
}
.finishes-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--warm-neutral);
  border-radius: var(--radius-xl);
  padding: 3rem;
  min-height: 420px;
}
.finishes-visual img {
  max-height: 380px;
  width: auto;
}

/* ============================================================
   ALBERELLO — SPECS (Dark Section)
   ============================================================ */
.product-specs-section {
  padding: 6rem 0;
  background: var(--deep-green);
}
.product-specs-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.product-specs-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 0.75rem;
}
.product-specs-subtitle {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
}
.product-specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
}
.product-spec-card {
  padding: 1.5rem;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}
.spec-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.5rem;
}
.spec-value {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
}

/* ============================================================
   ALBERELLO — COMPARISON
   ============================================================ */
.comparison-section {
  padding: 6rem 0;
  background: var(--cream);
}
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}
.comparison-card {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  border: 1px solid rgba(234, 230, 229, 0.6);
  transition: all 0.4s ease;
}
.comparison-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(34, 46, 38, 0.08);
}
.comparison-card--highlight {
  border-color: var(--muted-green);
  box-shadow: 0 8px 32px rgba(91, 146, 121, 0.12);
}
.comparison-badge {
  display: inline-block;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.5rem 1.2rem;
  background: var(--deep-green);
  color: #fff !important;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  line-height: 1.4 !important;
}
.comparison-card h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 1rem;
  line-height: 1.2;
}
.comparison-card p {
  font-size: 1rem;
  color: var(--warm-gray);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.comparison-features {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 2rem;
  list-style: none;
  padding: 0;
}
.comparison-features li {
  font-size: 0.95rem;
  color: var(--charcoal);
  line-height: 1.5;
}

/* ============================================================
   ALBERELLO — FAQ (Accordion)
   ============================================================ */
.product-faq-section {
  padding: 6rem 0;
  background: var(--off-white);
}
.product-faq-grid {
  max-width: 740px;
  margin: 0 auto;
}
.product-faq-item {
  border-bottom: 1px solid var(--warm-neutral);
  padding: 1.5rem 0;
}
.product-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--deep-green);
  transition: color 0.3s ease;
}
.product-faq-question:hover { color: var(--muted-green); }
.product-faq-icon {
  font-size: 1.4rem;
  color: var(--muted-green);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}
.product-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.product-faq-answer p {
  padding-top: 1rem;
  font-size: 0.95rem;
  color: var(--warm-gray);
  line-height: 1.7;
}

/* FAQ icon — CSS-only plus/minus */
.product-faq-icon::after {
  content: '+';
  font-size: 1.4rem;
  color: var(--muted-green);
  transition: transform 0.3s ease;
}
.faq-open .product-faq-icon::after {
  content: '−';
}
.faq-open .product-faq-answer {
  max-height: none;
  overflow: visible;
}

/* ============================================================
   ALBERELLO — USE CASES (Immersive Lifestyle)
   ============================================================ */
.usecase-section {
  padding: 0;
  background: var(--off-white);
}
.usecase-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 500px;
}
.usecase-item:nth-child(even) .usecase-image { order: 2; }
.usecase-item:nth-child(even) .usecase-content { order: 1; }
.usecase-image {
  overflow: hidden;
}
.usecase-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.usecase-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 3.5rem;
}
.usecase-number {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 400;
  color: var(--pale-green);
  margin-bottom: 0.5rem;
}
.usecase-content h3 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 1rem;
  line-height: 1.2;
}
.usecase-content p {
  font-size: 1.05rem;
  color: var(--warm-gray);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.usecase-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.usecase-tag {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  background: var(--pale-green);
  color: var(--deep-green);
  border-radius: 4px;
}

/* ============================================================
   ALBERELLO — CTA (Dark Green)
   ============================================================ */
.product-cta-section {
  padding: 7rem 0;
  background: var(--forest-green);
  text-align: center;
}
.product-cta-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 2rem;
}
.product-cta-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 1.25rem;
}
.product-cta-body {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.8;
  margin-bottom: 2.5rem;
}
.product-cta-actions {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   ALBERELLO — ROOMS (Card Grid)
   ============================================================ */
.alberello-rooms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.room-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(234, 230, 229, 0.6);
  transition: all 0.4s ease;
}
.room-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(34, 46, 38, 0.08);
}
.room-image {
  height: 240px;
  overflow: hidden;
}
.room-image figure {
  height: 100%;
  margin: 0;
}
.room-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.room-content {
  padding: 1.75rem;
}
.room-content h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 0.75rem;
}
.room-content p {
  font-size: 0.95rem;
  color: var(--warm-gray);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.room-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.room-tags p {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  background: var(--pale-green);
  color: var(--deep-green);
  border-radius: 4px;
  margin-bottom: 0 !important;
  line-height: 1.4;
}

/* ============================================================
   ALBERELLO — RESPONSIVE OVERRIDES
   ============================================================ */

/* ---- TABLET (≤1024px) ---- */
@media (max-width: 1024px) {
  /* Hero */
  .product-hero::before { display: none; }
  .product-hero-inner {
    grid-template-columns: 1fr;
    padding: 0 1.5rem;
  }
  .product-hero-visual { padding: 2rem 0 3rem; }

  /* Anatomy */
  .anatomy-grid { grid-template-columns: 1fr; gap: 2rem; }
  .anatomy-features--right { order: 3; }
  .anatomy-visual { order: 1; }
  .anatomy-features--left { order: 2; }

  /* Finishes */
  .finishes-layout { grid-template-columns: 1fr; gap: 2.5rem; }

  /* Rooms grid — stack to 1 column at tablet */
  .alberello-rooms-grid { grid-template-columns: 1fr; }

  /* Use-case items */
  .usecase-item { grid-template-columns: 1fr; min-height: auto; }
  .usecase-item:nth-child(even) .usecase-image { order: 1; }
  .usecase-item:nth-child(even) .usecase-content { order: 2; }
  .usecase-image { height: 350px; }

  /* Specs */
  .product-specs-grid { grid-template-columns: 1fr 1fr; }

  /* Comparison */
  .comparison-grid { grid-template-columns: 1fr; }

  /* CTA */
  .product-cta-inner { padding: 0 1.5rem; }
}

/* ---- MOBILE (≤768px) ---- */
@media (max-width: 768px) {
  /* Hero — full-width mobile layout */
  .product-hero-inner { padding: 0 8px; }
  .product-hero-text { padding: 6rem 0 1.5rem; }
  .product-hero-visual { padding: 1rem 0 2rem; }
  .product-hero-img,
  .product-hero-visual .product-hero-img,
  .product-hero-img-wrapper .product-hero-img,
  .product-hero-img-wrapper img {
    max-height: 350px !important;
  }
  .product-hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .product-hero-badges { gap: 1.25rem; }
  .product-hero-float {
    bottom: 1rem;
    right: 0;
    padding: 0.75rem 1rem;
  }

  /* Story */
  .story-section { padding: 4rem 0; }

  /* Anatomy */
  .anatomy-section { padding: 4rem 0; }
  .anatomy-feature { padding: 1rem; gap: 1rem; }
  .anatomy-visual img { max-height: 300px; }

  /* Finishes */
  .finishes-section { padding: 4rem 0; }
  .finishes-visual {
    min-height: auto;
    padding: 2rem;
  }
  .finishes-visual img { max-height: 280px; }

  /* Rooms */
  .rooms-header { margin-bottom: 2rem !important; }
  .room-content { padding: 1.25rem; }

  /* Specs */
  .product-specs-section { padding: 4rem 0; }
  .product-specs-grid { grid-template-columns: 1fr; }

  /* Comparison */
  .comparison-section { padding: 4rem 0; }
  .comparison-card { padding: 1.5rem; }

  /* FAQ */
  .product-faq-section { padding: 4rem 0; }
  .product-faq-item { padding: 1.25rem 0; }
  .product-faq-question { font-size: 0.95rem; }

  /* Use-case */
  .usecase-content { padding: 2rem 1.25rem; }
  .usecase-number { font-size: 2rem; }
  .usecase-content h3 { font-size: 1.4rem; }

  /* CTA */
  .product-cta-section { padding: 4rem 0; }
  .product-cta-inner { padding: 0 8px; }
  .product-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .product-cta-actions a {
    text-align: center;
    justify-content: center;
  }
}

/* ---- SMALL MOBILE (≤480px) ---- */
@media (max-width: 480px) {
  .product-hero-text { padding: 5rem 0 1rem; }
  .product-hero-visual { padding: 0.5rem 0 1.5rem; }
  .product-hero-img,
  .product-hero-visual .product-hero-img,
  .product-hero-img-wrapper .product-hero-img,
  .product-hero-img-wrapper img {
    max-height: 280px !important;
  }
  .product-hero-float {
    padding: 0.6rem 0.8rem;
  }
  .float-label { font-size: 0.6rem; }
  .float-value { font-size: 0.95rem; }
  .comparison-card { padding: 1.25rem; }
  .comparison-card h3 { font-size: 1.4rem; }
  .room-image { height: 180px; }
  .anatomy-visual img { max-height: 240px; }
  .finishes-visual { padding: 1.5rem; }
  .finishes-visual img { max-height: 220px; }
}

/* ============================================================
   SCIENCE PAGE STYLES
   ============================================================ */
.research-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 4rem;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.research-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(234, 230, 229, 0.6);
  transition: all 0.4s ease;
}
.research-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(34, 46, 38, 0.08);
}

.research-card-image {
  height: 200px;
  overflow: hidden;
  background: var(--warm-neutral);
}
.research-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.research-card-content {
  padding: 1.75rem;
}

.research-card-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  background: var(--pale-green);
  color: var(--deep-green);
  border-radius: 4px;
  margin-bottom: 1rem;
}

.research-card-content h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}
.research-card-content p {
  font-size: 0.95rem;
  color: var(--warm-gray);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

/* Deep dive sections */
.deep-dive-section {
  padding: 6rem 0;
}
.deep-dive-section:nth-child(odd) { background: var(--off-white); }
.deep-dive-section:nth-child(even) { background: var(--cream); }

.deep-dive-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.deep-dive-visual-col,
.deep-dive-visual-col.wp-block-group {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.deep-dive-visual-col img {
  width: 100%;
  border-radius: var(--radius-lg);
}
.deep-dive-text-col,
.deep-dive-text-col.wp-block-group {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.deep-dive-text-col h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 1.25rem;
  line-height: 1.15;
}
.deep-dive-text-col h2 em { color: var(--muted-green); }
.deep-dive-text-col p {
  font-size: 1rem;
  color: var(--warm-gray);
  line-height: 1.8;
  margin-bottom: 1rem;
}
.deep-dive-text-col ul {
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
}
.deep-dive-text-col li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--charcoal);
}
.deep-dive-text-col li::before {
  content: '→';
  color: var(--muted-green);
  font-weight: 600;
  flex-shrink: 0;
}

/* Stats band */
.stats-band {
  padding: 5rem 0;
  background: var(--deep-green);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}
.stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  color: var(--soft-green);
  margin-bottom: 0.5rem;
}
.stat-label {
  display: block;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

/* Methodology section */
.methodology-section {
  padding: 6rem 0;
  background: var(--off-white);
}
.methodology-layout {
  max-width: 700px;
  margin: 0 auto 4rem;
  text-align: center;
}
.methodology-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--deep-green);
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.methodology-headline em { color: var(--muted-green); }
.methodology-text-col p {
  font-size: 1.05rem;
  color: var(--warm-gray);
  line-height: 1.8;
}
.methodology-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.methodology-card {
  padding: 2rem 1.5rem;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(234, 230, 229, 0.6);
  transition: all 0.4s ease;
  text-align: center;
}
.methodology-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(34, 46, 38, 0.08);
}
.methodology-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--pale-green);
  color: var(--deep-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}
.methodology-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 0.75rem;
}
.methodology-card p {
  font-size: 0.92rem;
  color: var(--warm-gray);
  line-height: 1.7;
}

/* Research card link arrow */
.research-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted-green);
  transition: all 0.3s ease;
  text-decoration: none;
}
.research-card-link:hover { color: var(--deep-green); }
.research-card-link .btn-arrow { transition: transform 0.3s ease; }
.research-card-link:hover .btn-arrow { transform: translateX(4px); }

/* Science hero bubbles container */
.hero-bubbles {
  position: absolute;
  inset: 0;
  width: 100% !important;
  max-width: none !important;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.hero-bubbles .bubble {
  background: radial-gradient(circle at 35% 35%, rgba(143, 203, 155, 0.18), rgba(91, 146, 121, 0.04));
  border-color: rgba(91, 146, 121, 0.12);
}

/* Force all children of page-hero to break out of Gutenberg's constrained layout */
.page-hero > * {
  max-width: none !important;
}
.page-hero .page-hero-inner {
  max-width: 800px !important;
  margin: 0 auto !important;
}
.page-hero .hero-bubbles,
.page-hero .hero-bubbles.wp-block-group {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* ============================================================
   GUTENBERG LAYOUT OVERRIDES — Science & Section columns
   Prevent Gutenberg's is-layout-constrained (contentSize: 820px)
   from constraining full-width grids and split columns.
   ============================================================ */
.family-visual-col,
.family-visual-col .wp-block-group,
.family-text-col,
.family-text-col .wp-block-group {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.preview-text-col,
.preview-text-col .wp-block-group,
.preview-form-col,
.preview-form-col .wp-block-group {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.stats-grid.wp-block-group {
  max-width: none !important;
}
/* Ensure .container children that should be full-width are not constrained */
.rooms-section .container > .wp-block-group,
.deep-dive-section .container > .wp-block-group,
.family-section .container > .wp-block-group,
.preview-section .container > .wp-block-group,
.methodology-section .container > .wp-block-group,
.stats-band .container > .wp-block-group {
  max-width: none !important;
}

/* ============================================================
   POST-CONTENT SECTION WIDTH CONSTRAINTS
   When sections are rendered inside .wp-block-post-content (via
   wp:post-content in page templates), the global rule
   .wp-block-post-content > * { max-width: none !important }
   strips Gutenberg's constrained layout width. These rules
   restore the 1320px container constraint with horizontal
   padding for section inner groups.
   ============================================================ */
.wp-block-post-content .rooms-section > .wp-block-group,
.wp-block-post-content .stats-band > .wp-block-group,
.wp-block-post-content .methodology-section > .wp-block-group,
.wp-block-post-content .deep-dive-section > .wp-block-group,
.wp-block-post-content .family-section > .wp-block-group,
.wp-block-post-content .preview-section > .wp-block-group,
.wp-block-post-content .blog-section > .wp-block-group,
.wp-block-post-content .featured-section > .wp-block-group,
.wp-block-post-content .topics-section > .wp-block-group {
  max-width: var(--max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}
/* Page hero: constrain text content, keep bubbles full-width.
   Mockup uses .science-hero-inner { max-width: 800px } and
   .science-hero-subtitle { max-width: 600px; margin: 0 auto }.
   Must use !important to override .wp-block-post-content > * { max-width: none !important }. */
.wp-block-post-content .page-hero > .section-eyebrow,
.wp-block-post-content .page-hero > .wp-block-heading,
.wp-block-post-content .page-hero > .page-hero-subtitle,
.wp-block-post-content .page-hero > p {
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.wp-block-post-content .page-hero > .page-hero-subtitle {
  max-width: 600px !important;
}
/* Grids inside post-content sections: fill parent content area, not overflow */
.wp-block-post-content .research-grid,
.wp-block-post-content .stats-grid,
.wp-block-post-content .methodology-grid,
.wp-block-post-content .deep-dive-layout,
.wp-block-post-content .family-split,
.wp-block-post-content .preview-layout,
.wp-block-post-content .blog-grid,
.wp-block-post-content .topics-grid,
.wp-block-post-content .featured-layout {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ============================================================
   JOURNAL PAGE STYLES
   ============================================================ */
.category-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}
.category-filter {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.6rem 1.2rem;
  background: var(--warm-neutral);
  color: var(--warm-gray);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.category-filter:hover,
.category-filter.active {
  background: var(--deep-green);
  color: #fff;
}

.featured-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  align-items: center;
  background: #fff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(234, 230, 229, 0.6);
  transition: all 0.4s ease;
}
.featured-layout:hover {
  box-shadow: 0 20px 60px rgba(34, 46, 38, 0.08);
}
.featured-image {
  height: 400px;
  overflow: hidden;
}
.featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.featured-content {
  padding: 2.5rem;
}
.featured-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  background: var(--pale-green);
  color: var(--deep-green);
  border-radius: 4px;
  margin-bottom: 1rem;
}
.featured-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 400;
  color: var(--deep-green);
  line-height: 1.2;
  margin-bottom: 1rem;
}
.featured-content p {
  font-size: 1rem;
  color: var(--warm-gray);
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.blog-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(234, 230, 229, 0.6);
  transition: all 0.4s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(34, 46, 38, 0.08);
}
.blog-card-image {
  height: 220px;
  overflow: hidden;
  background: var(--warm-neutral);
}
.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}
.blog-card-content {
  padding: 1.75rem;
}
.blog-card-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  background: var(--pale-green);
  color: var(--deep-green);
  border-radius: 4px;
  margin-bottom: 0.75rem;
}
.blog-card-content h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--deep-green);
  line-height: 1.3;
  margin-bottom: 0.75rem;
}
.blog-card-content p {
  font-size: 0.95rem;
  color: var(--warm-gray);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.blog-card-meta {
  font-size: 0.8rem;
  color: var(--stone);
}
.blog-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted-green);
  margin-top: 0.75rem;
  transition: all 0.3s ease;
}
.blog-card-link:hover {
  color: var(--deep-green);
}

/* Blog section wrapper */
.blog-section {
  padding: 5rem 0 7rem;
  background: var(--off-white);
}

/* Featured post section */
.featured-section {
  padding: 5rem 0;
  background: var(--off-white);
}
.featured-meta {
  font-size: 0.85rem;
  color: var(--stone);
  margin-bottom: 1.5rem;
}

/* ============================================================
   TOPICS SECTION
   ============================================================ */
.topics-section {
  padding: 6rem 0;
  background: var(--cream);
}
.topics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}
.topic-card {
  display: block;
  padding: 2rem 1.5rem;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(234, 230, 229, 0.6);
  transition: all 0.4s ease;
  text-decoration: none;
  color: inherit;
}
.topic-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(34, 46, 38, 0.08);
  border-color: var(--muted-green);
}
.topic-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--pale-green);
  color: var(--deep-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.topic-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 0.75rem;
}
.topic-card p {
  font-size: 0.92rem;
  color: var(--warm-gray);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.topic-count {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted-green);
}

/* ============================================================
   SINGLE POST PAGE
   ============================================================ */
.single-post-page {
  background: var(--off-white);
}

/* Post Hero */
.single-hero {
  padding: 10rem 0 0;
  background: var(--cream);
  text-align: center;
}
.single-hero-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2.5rem 4rem;
}
.single-cat-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  background: var(--pale-green);
  color: var(--deep-green);
  border-radius: 4px;
  margin-bottom: 1.5rem;
  text-decoration: none;
  transition: all 0.3s ease;
}
.single-cat-badge:hover {
  background: var(--deep-green);
  color: #fff;
}
.single-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--deep-green);
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.single-title em {
  color: var(--muted-green);
}
.single-excerpt {
  font-size: 1.15rem;
  color: var(--warm-gray);
  line-height: 1.8;
  max-width: 650px;
  margin: 0 auto 1.5rem;
}
.single-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: var(--stone);
  font-weight: 500;
}
.single-meta-author {
  color: var(--warm-gray);
  font-weight: 600;
}
.single-meta-sep {
  color: var(--stone);
}
.single-hero-image {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2.5rem;
}
.single-featured-img {
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: cover;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  display: block;
}

/* Post Content Area */
.single-content-section {
  padding: 4rem 0 3rem;
  background: var(--off-white);
}
.single-content-section .wp-block-post-content {
  max-width: 780px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Post content typography — matching homepage body style */
.single-content-section .wp-block-post-content p,
.single-content-section .wp-block-post-content li {
  font-family: var(--font-body);
  font-size: 1.08rem;
  color: var(--charcoal);
  line-height: 1.85;
  margin-bottom: 1.5rem;
}
.single-content-section .wp-block-post-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 400;
  color: var(--deep-green);
  line-height: 1.2;
  margin-top: 3rem;
  margin-bottom: 1rem;
}
.single-content-section .wp-block-post-content h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--deep-green);
  line-height: 1.3;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
.single-content-section .wp-block-post-content a {
  color: var(--muted-green);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s ease;
}
.single-content-section .wp-block-post-content a:hover {
  color: var(--deep-green);
}
.single-content-section .wp-block-post-content blockquote {
  border-left: 3px solid var(--muted-green);
  padding: 1rem 0 1rem 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--warm-gray);
  font-size: 1.1rem;
  line-height: 1.8;
}
.single-content-section .wp-block-post-content blockquote p {
  margin-bottom: 0;
}
.single-content-section .wp-block-post-content img {
  border-radius: var(--radius-lg);
  margin: 2rem 0;
}
.single-content-section .wp-block-post-content figure.wp-block-image {
  margin: 2.5rem 0;
}
.single-content-section .wp-block-post-content ul,
.single-content-section .wp-block-post-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}
.single-content-section .wp-block-post-content li {
  margin-bottom: 0.5rem;
}
.single-content-section .wp-block-post-content strong {
  font-weight: 600;
  color: var(--deep-green);
}

/* Author Bio Card */
.author-bio-card {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  max-width: 780px;
  margin: 0 auto 3rem;
  padding: 2rem;
  background: var(--cream);
  border-radius: var(--radius-lg);
  border: 1px solid var(--warm-neutral);
}
.author-bio-avatar {
  flex-shrink: 0;
}
.author-bio-avatar .author-avatar,
.author-bio-avatar img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.author-bio-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-green);
  margin-bottom: 0.25rem;
}
.author-bio-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 0.5rem;
}
.author-bio-text {
  font-size: 0.95rem;
  color: var(--warm-gray);
  line-height: 1.7;
  margin: 0;
}

/* Divider */
.single-divider {
  padding: 0;
  background: var(--off-white);
}
.single-divider-rule {
  border: none;
  border-top: 1px solid var(--warm-neutral);
  margin: 0;
}

/* Related Posts Section */
.related-section {
  padding: 5rem 0 6rem;
  background: var(--off-white);
}

/* ============================================================
   PREVIEW PAGE STYLES
   ============================================================ */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.benefit-card {
  text-align: center;
  padding: 2.5rem 2rem;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(234, 230, 229, 0.6);
  transition: all 0.4s ease;
}
.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(34, 46, 38, 0.08);
}
.benefit-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--pale-green);
  color: var(--deep-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}
.benefit-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 0.75rem;
}
.benefit-card p {
  font-size: 0.95rem;
  color: var(--warm-gray);
  line-height: 1.7;
}

/* ============================================================
   ABOUT PAGE STYLES
   ============================================================ */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.value-card {
  text-align: center;
  padding: 2.5rem 2rem;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(234, 230, 229, 0.6);
  transition: all 0.4s ease;
}
.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(34, 46, 38, 0.08);
}
.value-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--pale-green);
  color: var(--deep-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}
.value-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 0.75rem;
}
.value-card p {
  font-size: 0.95rem;
  color: var(--warm-gray);
  line-height: 1.7;
}

/* FAQ */
.faq-item {
  border-bottom: 1px solid var(--warm-neutral);
  padding: 1.5rem 0;
}
.faq-question {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--deep-green);
  cursor: pointer;
  transition: color 0.3s ease;
}
.faq-question:hover { color: var(--muted-green); }

/* Founder */
.founder-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
}
.founder-image-wrapper {
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.founder-image-wrapper img {
  width: 100%;
  height: 480px;
  object-fit: cover;
}
.founder-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 0.25rem;
  line-height: 1.15;
}
.founder-role {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-green);
  margin-bottom: 1.5rem;
  display: block;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Empty state for placeholder images */
.img-placeholder {
  background: var(--warm-neutral);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--stone);
  font-size: 0.85rem;
  font-style: italic;
}

/* ============================================================
   WORDPRESS LAYOUT FIX — Grids fill their container
   ============================================================ */
/* WordPress is-layout-constrained limits children to contentSize (820px).
   Our grids should fill the .container instead. */
.hero-split,
.product-split,
.process-steps,
.rooms-grid,
.testimonials-grid,
.family-split,
.range-grid,
.bespoke-layout,
.journal-layout,
.preview-layout,
.footer-grid,
.logos-row,
.stats-grid,
.research-grid,
.blog-grid,
.values-grid,
.benefits-grid,
.founder-layout,
.deep-dive-layout,
.form-layout,
.product-preview-layout,
.bespoke-options,
.mission-layout,
.evidence-layout,
.evidence-band {
  max-width: none !important;
}

/* ============================================================
   PRODUCT SHOP CARDS — ALBERO PAGE
   ============================================================ */
.product-shop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

.product-shop-card {
  background: #fff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(234, 230, 229, 0.6);
  transition: all 0.4s ease;
}
.product-shop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(34, 46, 38, 0.1);
}

.product-shop-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.6rem 1.5rem;
  background: var(--deep-green);
  color: #fff;
  width: 100%;
  text-align: center;
}

.product-shop-image {
  height: 420px;
  overflow: hidden;
  background: var(--warm-neutral);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.product-shop-image img {
  max-height: 400px;
  width: auto;
  object-fit: contain;
}

/* === PRODUCT IMAGE ZOOM ON HOVER === */
.product-shop-image {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}
.product-shop-image img {
  transition: transform 0.3s ease;
}
.product-shop-image.zoom-active img {
  opacity: 0;
}
.product-shop-zoom-lens {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
}
.product-shop-image.zoom-active .product-shop-zoom-lens {
  display: block;
}
.product-shop-image.zoom-active {
  cursor: zoom-out;
}

.product-shop-content {
  padding: 2rem;
}
.product-shop-content h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 0.75rem;
}
.product-shop-content p {
  font-size: 0.95rem;
  color: var(--warm-gray);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.product-shop-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.product-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.option-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-gray);
  min-width: 70px;
}
.option-values {
  display: flex;
  gap: 0.4rem;
}
.option-value {
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.35rem 0.8rem;
  background: var(--cream);
  border: 1.5px solid var(--warm-neutral);
  border-radius: 4px;
  color: var(--charcoal);
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  user-select: none;
}
.option-value:hover {
  border-color: var(--muted-green);
  background: rgba(143, 203, 155, 0.15);
}
.option-value--active {
  border-color: var(--muted-green);
  background: var(--pale-green);
  color: var(--deep-green);
}

.option-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  border: 1.5px solid rgba(0,0,0,0.08);
}
.option-swatch--canvas { background: #EAE6E5; }
.option-swatch--snow { background: #F7F5F3; }
.option-swatch--linen { background: #D4CFC9; }
.option-swatch--slate { background: #4A4A4A; }
.option-swatch--charcoal { background: #2A2A2A; }
.option-swatch--salt { background: #C8BFB3; }
.option-swatch--oak { background: #B8956A; }
.option-swatch--walnut { background: #6B4F3A; }
.option-swatch--sage { background: #9CAF88; }
.option-swatch--brass { background: #C5A86A; }
.option-swatch--nickel { background: #B0B5B9; }
.option-swatch--mercury { background: #B0B5B9; }
.option-swatch--cherry { background: #8B2332; }
.option-swatch--teak { background: #B8860B; }
.option-swatch--aluminum { background: #C0C0C0; }
.option-swatch--copper { background: #B87333; }
.option-swatch--pewter { background: #8E8E8E; }
.option-swatch--golden { background: #DAA520; }
.option-swatch--cacao { background: #4A3728; }
.option-swatch--espresso { background: #3C1414; }
.option-swatch--ebony { background: #1C1C1C; }
.option-swatch--bespoke { background: #9C8B7A; }

.product-shop-price {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--warm-neutral);
}
.price-amount {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--deep-green);
}
.price-note {
  font-size: 0.82rem;
  color: var(--muted-green);
  font-weight: 500;
}

.product-shop-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ============================================================
   COMING SOON BAND — ALBERO PAGE
   ============================================================ */
.coming-soon-band {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
  align-items: center;
  background: var(--forest-green);
  border-radius: var(--radius-xl);
  padding: 3rem;
  margin-bottom: 4rem;
  /* Break out of Gutenberg constrained layout centering */
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.coming-soon-headline {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: #fff;
  margin-bottom: 0.75rem;
}
.coming-soon-content p {
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.coming-soon-image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.coming-soon-image img {
  max-height: 200px;
  width: auto;
  border-radius: var(--radius-lg);
  filter: brightness(1.05);
}

/* ============================================================
   CRAFTSMANSHIP — ALBERO PAGE
   ============================================================ */
.craftsmanship-section {
  padding: 6rem 0;
  background: var(--cream);
}

.craftsmanship-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.craftsmanship-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--deep-green);
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.craftsmanship-headline em { color: var(--muted-green); }

.craftsmanship-text-col p {
  font-size: 1.05rem;
  color: var(--warm-gray);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.craftsmanship-features {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--warm-neutral);
}
.craft-feature {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.craft-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: var(--pale-green);
  color: var(--deep-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.craft-feature h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--deep-green);
  margin-bottom: 0.25rem;
}
.craft-feature p {
  font-size: 0.92rem;
  color: var(--warm-gray);
  line-height: 1.6;
  margin-bottom: 0;
}

.craftsmanship-image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.craft-img-main {
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.craft-img-main img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}
.craft-img-detail {
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-top: 2rem;
}
.craft-img-detail img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}

/* ============================================================
   PROCESS OVERVIEW — ALBERO PAGE
   ============================================================ */
.process-overview-section {
  padding: 6rem 0;
  background: var(--off-white);
}

.process-overview-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 2rem;
  margin-top: 2rem;
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding: 0 2.5rem;
  box-sizing: border-box;
}

.process-overview-step {
  text-align: center;
  padding: 2rem 1.5rem;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(234, 230, 229, 0.6);
  transition: all 0.4s ease;
}
.process-overview-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(34, 46, 38, 0.08);
}

.process-overview-number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: var(--deep-green) !important;
  color: #fff !important;
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  margin-bottom: 1.25rem;
}

.process-overview-step h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 0.75rem;
}

.process-overview-step p {
  font-size: 0.92rem;
  color: var(--warm-gray);
  line-height: 1.7;
}

/* ============================================================
   GUTENBERG GRID OVERRIDES — ALBERO PAGE
   ============================================================ */
.product-shop-grid.wp-block-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2rem !important;
}
.craftsmanship-layout.wp-block-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4rem !important;
  align-items: center !important;
}
/* Kill Gutenberg constrained layout max-width on albero sub-sections */
.process-overview-section .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none !important;
}
.craftsmanship-section .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none !important;
}
/* Process overview header: centered text */
.process-overview-section .rooms-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 3rem;
}
/* Specs section — dark background */
.specs-section {
  padding: 6rem 0 8rem;
  background: var(--deep-green);
}
/* Specs layout override */
.specs-layout.wp-block-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4rem !important;
  align-items: center !important;
}
.specs-section .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none !important;
}
.specs-visual-col {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.specs-visual-col img {
  max-width: 100% !important;
  height: auto !important;
}
.specs-product-wrapper {
  background: var(--forest-green);
  border-radius: var(--radius-xl);
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
}
.specs-product-img {
  max-height: 450px;
  width: auto;
  filter: brightness(1.1);
}
.specs-text-col .section-eyebrow { color: var(--soft-green); }
.specs-headline {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.specs-subtitle {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.7;
  margin-bottom: 2rem;
}
.specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}
.spec-item {
  padding: 1.1rem 1.25rem;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.08);
}
.spec-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.35rem;
}
.spec-value {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;
}

/* ============================================================
   WOOCOMMERCE CART PAGE STYLING
   ============================================================ */
.woocommerce-cart-section {
  padding: 4rem 0 6rem;
  background: var(--off-white);
}
/* Remove white space below footer on cart/checkout pages */
.woocommerce-cart ~ .site-footer,
.woocommerce-cart ~ footer,
.page-id-15 ~ .site-footer,
.page-id-15 ~ footer,
main + footer,
main + .site-footer {
  margin-top: 0;
}
/* Hide any WooCommerce elements that render outside the main content */
.woocommerce-cart .wp-site-blocks > *:not(header):not(main):not(.site-footer):not(footer):not(.skip-link):not(script):not(noscript):not(style):not(.wp-block-template-part) {
  display: none;
}
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart form.cart {
  border: none;
}
.woocommerce-cart table.cart {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.woocommerce-cart table.cart th {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-gray);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--warm-neutral);
}
.woocommerce-cart table.cart td {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--warm-neutral);
  vertical-align: middle;
}
.woocommerce-cart table.cart td.product-name a {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--deep-green);
}
.woocommerce-cart table.cart td.product-name .variation {
  font-size: 0.82rem;
  color: var(--warm-gray);
  margin-top: 0.25rem;
}
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--deep-green);
}
.woocommerce-cart table.cart td.product-quantity .quantity {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--warm-neutral);
  border-radius: 6px;
  overflow: hidden;
}
.woocommerce-cart table.cart td.product-quantity .quantity input {
  width: 48px;
  height: 40px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.95rem;
  border: none;
  background: transparent;
}
.woocommerce-cart .cart_totals {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid var(--warm-neutral);
}
.woocommerce-cart .cart_totals h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 1.5rem;
}
.woocommerce-cart .cart_totals td,
.woocommerce-cart .cart_totals th {
  font-size: 0.95rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--warm-neutral);
}
.woocommerce-cart .cart_totals .order-total .amount,
.woocommerce-cart .cart_totals .order-total td {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--deep-green);
}
.woocommerce-cart .cart_totals .button,
.woocommerce-cart .cart_totals .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  padding: 1.1rem 2.6rem !important;
  background-color: var(--deep-green) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  text-decoration: none !important;
}
.woocommerce-cart .cart_totals .button:hover,
.woocommerce-cart .cart_totals .checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a:hover {
  background-color: var(--forest-green) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(34, 46, 38, 0.25) !important;
}
.woocommerce-cart .cart-coupon {
  margin-bottom: 1.5rem;
}
.woocommerce-cart .coupon input {
  border: 1.5px solid var(--warm-neutral) !important;
  border-radius: 6px !important;
  padding: 0.85rem 1rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.88rem !important;
  background: var(--cream) !important;
}
.woocommerce-cart .coupon input:focus {
  border-color: var(--muted-green) !important;
  box-shadow: 0 0 0 3px rgba(91, 146, 121, 0.1) !important;
}
.woocommerce-cart .return-to-shop a {
  color: var(--deep-green) !important;
  font-weight: 500 !important;
}
.woocommerce-cart .return-to-shop a:hover {
  color: var(--muted-green) !important;
}

/* ============================================================
   WOOCOMMERCE BLOCKS CART — RESPONSIVE OVERRIDES
   Target the blocks-based cart (.wc-block-cart) which uses
   different classes than the classic shortcode cart.
   All rules scoped to .woocommerce-cart to avoid regressions.
   Desktop remains untouched.
   ============================================================ */

/* ---- TABLET (≤1024px) ---- */
@media (max-width: 1024px) {
  /* Cart sidebar gets left border separator at tablet */
  .woocommerce-cart .wc-block-cart__sidebar {
    border-left: 1px solid var(--warm-neutral);
    padding-left: 1.5rem !important;
  }
}

/* ---- MOBILE (≤768px) ---- */
@media (max-width: 768px) {
  /* Cart page hero — tighten top padding on mobile */
  .woocommerce-cart .page-hero {
    padding: 5rem 0 2.5rem;
  }
  .woocommerce-cart .page-hero .page-hero-inner {
    padding: 0 8px;
  }
  .woocommerce-cart .page-hero-title {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }

  /* Cart row — adjust spacing for mobile */
  .woocommerce-cart .wc-block-cart-items__row {
    padding: 1rem 0;
  }

  /* Product image — slightly smaller on mobile */
  .woocommerce-cart .wc-block-cart-item__image {
    width: 64px !important;
  }
  .woocommerce-cart .wc-block-cart-item__image img {
    width: 64px !important;
    height: 64px !important;
  }

  /* Product name — ensure it doesn't truncate */
  .woocommerce-cart .wc-block-components-product-name {
    font-size: 0.9rem;
    line-height: 1.3;
  }

  /* Product price — slightly smaller */
  .woocommerce-cart .wc-block-components-product-price {
    font-size: 0.95rem;
  }

  /* Variation details — readable on mobile */
  .woocommerce-cart .wc-block-components-product-details {
    font-size: 0.72rem;
    line-height: 1.5;
  }

  /* Quantity selector — ensure buttons are tappable */
  .woocommerce-cart .wc-block-components-quantity-selector__button {
    min-width: 32px;
    min-height: 32px;
  }
  .woocommerce-cart .wc-block-components-quantity-selector__input {
    font-size: 0.85rem;
  }

  /* Remove button — ensure tappable */
  .woocommerce-cart .wc-block-cart-item__remove-link {
    min-width: 36px;
    min-height: 36px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Cart totals title */
  .woocommerce-cart .wc-block-cart__totals-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--deep-green);
    margin-bottom: 1rem;
  }

  /* Coupon section */
  .woocommerce-cart .wc-block-components-totals-coupon {
    font-size: 0.88rem;
  }

  /* Estimated total */
  .woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-size: 0.88rem;
    color: var(--warm-gray);
  }
  .woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--deep-green);
  }

  /* Checkout button — full width with proper spacing */
  .woocommerce-cart .wc-block-cart__submit-container {
    margin-top: 1rem;
  }
  .woocommerce-cart .wc-block-cart__submit-button {
    width: 100% !important;
    padding: 1rem 2rem !important;
    font-size: 0.8rem !important;
  }
}

/* ---- STACKED MOBILE (≤600px) — WC blocks switches to column layout ---- */
@media (max-width: 600px) {
  /* Cart sidebar stacks below cart items — add visual separation */
  .woocommerce-cart .wc-block-cart__sidebar {
    border-left: none !important;
    padding-left: 0 !important;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--warm-neutral);
  }

  /* Cart table header — hide on mobile to save space */
  .woocommerce-cart .wc-block-cart-items__header {
    display: none;
  }
}

/* ---- SMALL MOBILE (≤480px) ---- */
@media (max-width: 480px) {
  /* Reduce image size further on small screens */
  .woocommerce-cart .wc-block-cart-item__image {
    width: 56px !important;
  }
  .woocommerce-cart .wc-block-cart-item__image img {
    width: 56px !important;
    height: 56px !important;
  }

  /* Cart hero — further reduce padding */
  .woocommerce-cart .page-hero {
    padding: 4.5rem 0 2rem;
  }
  .woocommerce-cart .page-hero-title {
    font-size: clamp(1.5rem, 8vw, 2rem);
  }
  .woocommerce-cart .page-hero-subtitle {
    font-size: 0.88rem;
  }

  /* Tighter row spacing */
  .woocommerce-cart .wc-block-cart-items__row {
    padding: 0.75rem 0;
  }

  /* Variation details — even smaller */
  .woocommerce-cart .wc-block-components-product-details {
    font-size: 0.68rem;
  }
}

/* Checkout page styling */

/* ============================================================
   ORDER CONFIRMATION PAGE — VerdeTerra Branding
   ============================================================ */
.woocommerce-order-received main,
.woocommerce-checkout main {
  max-width: var(--max-width) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 3rem 2.5rem !important;
}
.woocommerce-order-received main > *,
.woocommerce-checkout main > * {
  max-width: 780px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.woocommerce-order-received main h1,
.page-id-16 main h1 {
  font-family: var(--font-display) !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 400 !important;
  color: var(--deep-green) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 0.5rem !important;
  text-align: center !important;
}
.woocommerce-order-received main > p:first-of-type,
.page-id-16 main > p:first-of-type {
  font-size: 1.05rem !important;
  color: var(--warm-gray) !important;
  line-height: 1.7 !important;
  text-align: center !important;
  margin-bottom: 2.5rem !important;
}

/* Order summary list */
.woocommerce-order-received .wc-block-order-confirmation-summary-list,
.page-id-16 .wc-block-order-confirmation-summary-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  list-style: none;
  padding: 1.5rem 2rem;
  background: var(--cream);
  border-radius: var(--radius-lg);
  border: 1px solid var(--warm-neutral);
  margin-bottom: 2.5rem;
  overflow: hidden;
}
.woocommerce-order-received .wc-block-order-confirmation-summary-list-item,
.page-id-16 .wc-block-order-confirmation-summary-list-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__key,
.page-id-16 .wc-block-order-confirmation-summary-list-item__key {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-gray);
}
.woocommerce-order-received .wc-block-order-confirmation-summary-list-item__value,
.page-id-16 .wc-block-order-confirmation-summary-list-item__value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--deep-green);
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Order details heading */
.woocommerce-order-received h2,
.page-id-16 h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--warm-neutral);
}

/* Order details table */
.woocommerce-order-received table,
.page-id-16 table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 1.5rem;
}
.woocommerce-order-received th,
.page-id-16 th {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-gray);
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--warm-neutral);
  text-align: left;
}
.woocommerce-order-received td,
.page-id-16 td {
  padding: 1rem 0;
  border-bottom: 1px solid var(--warm-neutral);
  vertical-align: middle;
}
.woocommerce-order-received td a,
.page-id-16 td a {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--deep-green);
  transition: color 0.3s ease;
}
.woocommerce-order-received td a:hover,
.page-id-16 td a:hover {
  color: var(--muted-green);
}
.woocommerce-order-received .product-quantity,
.page-id-16 .product-quantity {
  font-size: 0.9rem;
  color: var(--warm-gray);
  margin-left: 0.5rem;
}
.woocommerce-order-received tfoot td,
.page-id-16 tfoot td {
  padding-top: 1.25rem;
  border-bottom: none;
}
.woocommerce-order-received tfoot .amount,
.page-id-16 tfoot .amount {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--deep-green);
}

/* Billing address */
.woocommerce-order-received .wc-block-order-confirmation-addresses,
.page-id-16 .wc-block-order-confirmation-addresses {
  margin-top: 2rem;
}
.woocommerce-order-received .wc-block-order-confirmation-addresses p,
.page-id-16 .wc-block-order-confirmation-addresses p {
  font-size: 0.95rem;
  color: var(--warm-gray);
  line-height: 1.7;
}

/* Payment method note */
.woocommerce-order-received > p:last-of-type,
.page-id-16 > p:last-of-type {
  font-size: 0.95rem;
  color: var(--warm-gray);
  text-align: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--warm-neutral);
}

/* ============================================================
   ABOUT PAGE — Mission Layout (2-Column Split)
   ============================================================ */
.mission-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.mission-visual-col img,
.mission-visual-col .wp-block-image img {
  width: 100%;
  border-radius: var(--radius-xl);
}
.mission-text-col .section-eyebrow {
  margin-bottom: 1rem;
}
.mission-text-col h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 1.25rem;
  line-height: 1.15;
}
.mission-text-col h2 em { color: var(--muted-green); }
.mission-text-col p {
  font-size: 1.05rem;
  color: var(--warm-gray);
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* ============================================================
   ABOUT PAGE — Story Layout (2-Column with Image Overlay)
   ============================================================ */
.about-story {
  padding: 6rem 0;
}
.story-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.story-text-col .section-eyebrow {
  margin-bottom: 1rem;
}
.story-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 1.25rem;
  line-height: 1.15;
}
.story-headline em { color: var(--muted-green); }
.story-text-col p {
  font-size: 1.05rem;
  color: var(--warm-gray);
  line-height: 1.8;
  margin-bottom: 1rem;
}
.story-image-grid {
  position: relative;
}
.story-img-main {
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.story-img-main img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
.story-img-accent {
  position: absolute;
  bottom: -24px;
  right: -24px;
  width: 180px;
  height: 180px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 4px solid var(--cream);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
.story-img-accent img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   ABOUT PAGE — Founder Layout
   ============================================================ */
.founder-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
}
.founder-image-wrapper {
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.founder-image-wrapper img {
  width: 100%;
  height: 480px;
  object-fit: cover;
}
.founder-text-col .section-eyebrow {
  margin-bottom: 1rem;
}
.founder-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 0.25rem;
  line-height: 1.15;
}
.founder-role {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted-green);
  margin-bottom: 1.5rem;
}
.founder-text-col p {
  font-size: 1.05rem;
  color: var(--warm-gray);
  line-height: 1.8;
  margin-bottom: 1rem;
}
.founder-credentials {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--warm-neutral);
}
.credential-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--charcoal);
}
.credential-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* ============================================================
   ABOUT PAGE — Approach Grid (4-Column Cards)
   ============================================================ */
.approach-section {
  padding: 6rem 0;
  background: var(--off-white);
}
.approach-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.approach-card {
  padding: 2rem 1.5rem;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(234, 230, 229, 0.6);
  transition: all 0.4s ease;
}
.approach-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(34, 46, 38, 0.08);
}
.approach-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--deep-green);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: 1.25rem;
}
.approach-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 0.75rem;
}
.approach-card p {
  font-size: 0.92rem;
  color: var(--warm-gray);
  line-height: 1.7;
}

/* ============================================================
   ABOUT PAGE — Values Grid (3-Column Cards with Icons)
   ============================================================ */
.values-section {
  padding: 6rem 0;
  background: var(--cream);
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.value-card {
  text-align: center;
  padding: 2.5rem 2rem;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(234, 230, 229, 0.6);
  transition: all 0.4s ease;
}
.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(34, 46, 38, 0.08);
}
.value-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--pale-green);
  color: var(--deep-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}
.value-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 0.75rem;
}
.value-card p {
  font-size: 0.95rem;
  color: var(--warm-gray);
  line-height: 1.7;
}

/* ============================================================
   ABOUT PAGE — FAQ Accordion
   ============================================================ */
.faq-section {
  padding: 6rem 0;
  background: var(--off-white);
}
.faq-grid {
  max-width: 800px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--warm-neutral);
  padding: 1.5rem 0;
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--deep-green);
  transition: color 0.3s ease;
}
.faq-question:hover { color: var(--muted-green); }
.faq-icon {
  font-size: 1.5rem;
  color: var(--muted-green);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.faq-answer p {
  padding-top: 1rem;
  font-size: 0.95rem;
  color: var(--warm-gray);
  line-height: 1.7;
}

/* ============================================================
   ABOUT PAGE — Contact Layout
   ============================================================ */
.contact-section {
  padding: 6rem 0;
  background: var(--cream);
}
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.contact-info .section-eyebrow {
  margin-bottom: 1rem;
}
.contact-info h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 1.25rem;
  line-height: 1.15;
}
.contact-info h2 em { color: var(--muted-green); }
.contact-info > p {
  font-size: 1.05rem;
  color: var(--warm-gray);
  line-height: 1.8;
  margin-bottom: 2rem;
}
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.contact-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--pale-green);
  color: var(--deep-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-item-text h4 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--deep-green);
  margin-bottom: 0.15rem;
}
.contact-item-text p,
.contact-item-text a {
  font-size: 0.95rem;
  color: var(--warm-gray);
}
.contact-item-text a:hover { color: var(--muted-green); }
.contact-form-wrapper {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}

/* ============================================================
   ABOUT PAGE — Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .mission-layout,
  .mission-layout.wp-block-columns,
  .story-layout,
  .story-layout.wp-block-columns,
  .founder-layout,
  .founder-layout.wp-block-columns,
  .contact-layout,
  .contact-layout.wp-block-columns { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .values-grid,
  .values-grid.wp-block-columns { grid-template-columns: 1fr 1fr !important; }
  .approach-grid,
  .approach-grid.wp-block-columns { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 768px) {
  /* About page grid layouts — force single column on mobile */
  .mission-layout,
  .mission-layout.wp-block-columns,
  .story-layout,
  .story-layout.wp-block-columns,
  .founder-layout,
  .founder-layout.wp-block-columns,
  .contact-layout,
  .contact-layout.wp-block-columns { grid-template-columns: 1fr !important; gap: 2rem !important; padding-left: 8px !important; padding-right: 8px !important; }
  .values-grid,
  .values-grid.wp-block-columns { grid-template-columns: 1fr !important; padding-left: 8px !important; padding-right: 8px !important; }
  .approach-grid,
  .approach-grid.wp-block-columns { grid-template-columns: 1fr !important; padding-left: 8px !important; padding-right: 8px !important; }

  /* About page section spacing */
  .mission-section,
  .story-section,
  .founder-section,
  .approach-section,
  .values-section { padding-top: 3rem !important; padding-bottom: 3rem !important; }

  /* FAQ section mobile spacing */
  .faq-section { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .faq-section .faq-grid { padding-left: 8px; padding-right: 8px; }

  /* Contact section mobile spacing */
  .contact-section { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .contact-form-wrapper { padding: 1.5rem !important; }

  /* Hero section mobile padding */
  .about-hero { padding-top: 7rem !important; padding-bottom: 3rem !important; }

  /* Story image adjustments */
  .story-img-accent {
    width: 120px;
    height: 120px;
    bottom: -16px;
    right: -16px;
  }
  .founder-image-wrapper img { height: 360px; }
  .story-img-main img { height: 300px; }
  .contact-form-wrapper { padding: 1.75rem; }
}
.woocommerce-checkout .woocommerce-form-login,
.woocommerce-checkout .woocommerce-form-coupon {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid var(--warm-neutral);
}
.woocommerce-checkout #order_review {
  background: var(--cream);
  border-radius: var(--radius-lg);
  padding: 2rem;
}
.woocommerce-checkout #payment {
  background: transparent;
  border: none;
  border-radius: 0;
}
.woocommerce-checkout #payment .place-order {
  padding: 0;
}
.woocommerce-checkout #payment .place-order .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.1rem 2.6rem !important;
  background-color: var(--deep-green) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 6px !important;
}

/* ============================================================
   RESPONSIVE — HOMEPAGE MOBILE & TABLET FIXES
   All responsive rules scoped to prevent desktop regression.
   Gutenberg grid overrides use high specificity to beat
   .wp-container-core-group-is-layout-XXX generated CSS.
   ============================================================ */

/* ---- TABLET LANDSCAPE (≤1200px) ---- */
@media (max-width: 1200px) {
  .research-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- TABLET PORTRAIT / SMALL LAPTOP (≤1024px) ---- */
@media (max-width: 1024px) {
  /* 2-column splits → stack to 1 column */
  .hero-split,
  .about-container,
  .product-split,
  .family-split,
  .bespoke-layout,
  .journal-layout,
  .preview-layout,
  .evidence-layout,
  .deep-dive-layout,
  .product-hero-inner,
  .founder-layout,
  .craftsmanship-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  /* Gutenberg grid overrides — force 1 column for 2-col splits */
  .hero-split.is-layout-grid,
  .about-container.is-layout-grid,
  .product-split.is-layout-grid,
  .family-split.is-layout-grid,
  .bespoke-layout.is-layout-grid,
  .journal-layout.is-layout-grid,
  .preview-layout.is-layout-grid,
  .evidence-band.is-layout-grid,
  .preview-layout.wp-block-group {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  /* Newsletter section — keep 2 columns at tablet for better form layout */
  .preview-section .preview-layout,
  .preview-section .preview-layout.is-layout-grid,
  .preview-section .preview-layout.wp-block-group {
    grid-template-columns: 1fr 1fr !important;
    gap: 3rem !important;
  }

  /* Multi-column grids → reduce columns */
  .process-steps { grid-template-columns: 1fr 1fr; }
  .process-steps.is-layout-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
  .testimonials-grid.is-layout-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .range-grid { grid-template-columns: 1fr; }
  .range-grid.is-layout-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .rooms-grid,
  .rooms-grid.is-layout-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
  }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid.is-layout-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Other page grids */
  .product-shop-grid { grid-template-columns: 1fr; }
  .process-overview-grid { grid-template-columns: 1fr 1fr !important; padding: 0 !important; }
  .coming-soon-band { grid-template-columns: 1fr; }
  .coming-soon-image { order: -1; }
  .specs-layout.wp-block-group { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .topics-grid { grid-template-columns: 1fr 1fr; }
  .benefits-grid { grid-template-columns: 1fr 1fr; }
  .values-grid { grid-template-columns: 1fr 1fr; }

  /* Journal featured section — stack to 1 column at tablet */
  .featured-layout,
  .featured-layout.wp-block-group {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .featured-layout.is-layout-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .featured-image { height: 350px; }
  .featured-content { padding: 2rem; }

  /* Hero adjustments */
  .hero-video-col { min-height: 50vh; }
  .hero-text-col { padding: 6rem 2rem 4rem !important; }
  .hero-split.is-layout-grid { min-height: auto !important; }
  .hero-section { min-height: auto; }
  .product-hero::before { display: none; }

  /* About adjustments */
  .about-visual-col { padding: 0 1rem; }
  .about-hero-img { height: 380px !important; }
  .about-hero-img img { height: 380px !important; }
  .wp-block-image.about-hero-img { height: 380px !important; }
}

/* ---- MOBILE (≤768px) ---- */
@media (max-width: 768px) {
  /* All 2-column splits force 1-column — class-based */
  .hero-split,
  .about-container,
  .product-split,
  .family-split,
  .bespoke-layout,
  .journal-layout,
  .preview-layout,
  .evidence-layout {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
  /* All 2-column splits — Gutenberg grid overrides */
  .hero-split.is-layout-grid,
  .hero-split.wp-block-group-is-layout-grid,
  .about-container.is-layout-grid,
  .product-split.is-layout-grid,
  .family-split.is-layout-grid,
  .bespoke-layout.is-layout-grid,
  .journal-layout.is-layout-grid,
  .preview-layout.is-layout-grid,
  .evidence-band.is-layout-grid,
  .preview-layout.wp-block-group,
  .wp-block-post-content .hero-split.is-layout-grid,
  .wp-block-post-content .about-container.is-layout-grid,
  .wp-block-post-content .product-split.is-layout-grid,
  .wp-block-post-content .evidence-band.is-layout-grid,
  .wp-block-post-content .family-split.is-layout-grid,
  .wp-block-post-content .bespoke-layout.is-layout-grid,
  .wp-block-post-content .journal-layout.is-layout-grid,
  .wp-block-post-content .preview-layout.is-layout-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Multi-column grids → 1 column — class-based */
  .rooms-grid { grid-template-columns: 1fr !important; }
  .process-steps { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .range-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; padding-left: 8px; padding-right: 8px; }
  .research-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .topics-grid { grid-template-columns: 1fr; }
  .benefits-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }

  /* Journal featured section — mobile stacked layout */
  .featured-layout,
  .featured-layout.wp-block-group {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .featured-image { height: 250px; }
  .featured-content { padding: 1.5rem; }
  .featured-content h2 { font-size: 1.4rem; }
  .featured-content p { font-size: 0.95rem; }
  .bespoke-options { grid-template-columns: 1fr; }
  .logos-row { gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
  .process-overview-grid { grid-template-columns: 1fr; }
  .craftsmanship-image-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }

  /* Footer mobile padding */
  .footer-bottom { padding-left: 8px; padding-right: 8px; }

  /* Multi-column grids — Gutenberg overrides */
  .rooms-grid.is-layout-grid,
  .rooms-grid.wp-block-group-is-layout-grid,
  .process-steps.is-layout-grid,
  .testimonials-grid.is-layout-grid,
  .range-grid.is-layout-grid,
  .footer-grid.is-layout-grid,
  .wp-block-post-content .footer-grid.is-layout-grid {
    grid-template-columns: 1fr !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .wp-block-post-content .rooms-grid.is-layout-grid,
  .wp-block-post-content .process-steps.is-layout-grid,
  .wp-block-post-content .testimonials-grid.is-layout-grid,
  .wp-block-post-content .range-grid.is-layout-grid {
    grid-template-columns: 1fr !important;
  }

  /* Featured layout — Gutenberg grid override for mobile */
  .featured-layout.is-layout-grid,
  .featured-layout.wp-block-group-is-layout-grid,
  .wp-block-post-content .featured-layout.is-layout-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* Newsletter section — override tablet 2-column rule for mobile */
  .preview-section .preview-layout,
  .preview-section .preview-layout.is-layout-grid,
  .preview-section .preview-layout.wp-block-group {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Header */
  .site-header { padding: 0 8px; height: 56px; }
  .logo-img { height: 26px !important; }
  .btn-nav,
  a.btn-nav,
  .wp-block-button.btn-nav .wp-block-button__link {
    padding: 0.35rem 0.9rem !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.06em !important;
  }

  /* Reduce container padding on mobile — 8px left/right */
  .container,
  .about-container,
  .product-container,
  .process-container,
  .rooms-container,
  .testimonials-container,
  .evidence-container,
  .family-container,
  .range-container,
  .bespoke-container,
  .journal-container,
  .preview-container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Strip inner padding from grid layouts and columns on mobile.
     Only the outer container should have 8px padding. */
  .evidence-band,
  .evidence-band.is-layout-grid,
  .evidence-text-col,
  .evidence-image-col,
  .family-split,
  .family-split.is-layout-grid,
  .family-text-col,
  .family-visual-col,
  .bespoke-layout,
  .bespoke-layout.is-layout-grid,
  .bespoke-text-col,
  .bespoke-visual-col,
  .journal-layout,
  .journal-layout.is-layout-grid,
  .journal-text-col,
  .journal-visual-col,
  .preview-layout,
  .preview-layout.is-layout-grid,
  .preview-layout.wp-block-group,
  .preview-text-col,
  .preview-form-col,
  .product-split,
  .product-split.is-layout-grid,
  .product-text-col,
  .product-visual-col,
  .about-container,
  .about-container.is-layout-grid,
  .about-text-col,
  .about-visual-col,
  .process-steps,
  .process-steps.is-layout-grid,
  .rooms-grid,
  .rooms-grid.is-layout-grid,
  .testimonials-grid,
  .testimonials-grid.is-layout-grid,
  .range-grid,
  .range-grid.is-layout-grid,
  .footer-grid,
  .footer-grid.is-layout-grid,
  /* Override Gutenberg post-content inner padding */
  .wp-block-post-content .evidence-band.is-layout-grid,
  .wp-block-post-content .family-split.is-layout-grid,
  .wp-block-post-content .bespoke-layout.is-layout-grid,
  .wp-block-post-content .journal-layout.is-layout-grid,
  .wp-block-post-content .preview-layout.is-layout-grid,
  /* Override Gutenberg has-background default padding */
  .wp-block-group.has-background {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Hero mobile refinements */
  .hero-title { font-size: clamp(2rem, 8vw, 2.5rem); }
  .hero-text-col { padding: 24px 8px 24px !important; }
  .hero-actions { flex-direction: column; align-items: flex-start !important; gap: 1rem !important; }
  .hero-actions.is-layout-flex { flex-direction: column !important; align-items: flex-start !important; }
  .hero-trust { gap: 1rem; }
  .hero-video-col { min-height: 40vh; }
  .hero-split.is-layout-grid,
  .hero-split.wp-block-group-is-layout-grid {
    min-height: auto !important;
  }
  .hero-section { min-height: auto; }

  /* About mobile refinements */
  .about-section { padding: 4rem 0; }
  .about-text-col { padding: 2rem 8px !important; }
  .about-hero-img { height: 280px !important; }
  .about-hero-img img { height: 280px !important; }
  .wp-block-image.about-hero-img { height: 280px !important; }

  /* Product mobile refinements */
  .product-section { padding: 3rem 0 4rem; }
  .product-image-wrapper { padding: 2rem; }

  /* Process mobile refinements */
  .process-section .container,
  .rooms-section .container,
  .stats-band .container,
  .methodology-section .container,
  .deep-dive-section .container,
  .family-section .container,
  .range-section .container,
  .bespoke-section .container,
  .journal-section .container,
  .evidence-section .container,
  /* Override Gutenberg post-content section padding rules */
  .wp-block-post-content .rooms-section > .wp-block-group,
  .wp-block-post-content .stats-band > .wp-block-group,
  .wp-block-post-content .methodology-section > .wp-block-group,
  .wp-block-post-content .deep-dive-section > .wp-block-group,
  .wp-block-post-content .family-section > .wp-block-group,
  .wp-block-post-content .preview-section > .wp-block-group,
  .wp-block-post-content .evidence-section > .wp-block-group,
  /* Sections without .container wrapper — restore 8px padding on inner grids.
     These override the "Strip inner padding" rule above. */
  .family-section .family-split,
  .family-section .family-split.is-layout-grid,
  .preview-section .preview-layout,
  .preview-section .preview-layout.is-layout-grid,
  .preview-section .preview-layout.wp-block-group {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Room cards — relax fixed image height */
  .room-image img { height: auto !important; max-height: 250px; }

  /* Family image accent */
  .family-image-accent { width: 120px; height: 120px; bottom: -1rem; right: -1rem; }
  .journal-img-2 { width: 120px; height: 120px; }

  /* Preview section — form card padding */
  .preview-section .container,
  .preview-container,
  .preview-section > .wp-block-group {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  /* Remove Gutenberg padding from preview layout on mobile */
  .preview-layout,
  .preview-layout.is-layout-grid,
  .preview-layout.wp-block-group,
  .preview-section .preview-layout {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .preview-form-col,
  .preview-form,
  .preview-form-col.has-global-padding {
    padding: 1.25rem !important;
  }

  /* Page hero */
  .page-hero { padding: 8rem 0 3.5rem; }
  .page-hero-title { font-size: clamp(2rem, 8vw, 3rem); }

  /* Partner logos — ensure they wrap and scale */
  .partner-logo { height: 60px !important; }
}

/* ---- SMALL MOBILE (≤480px) ---- */
@media (max-width: 480px) {
  .hero-text-col { padding: 5rem 8px 2.5rem !important; }
  .hero-title { font-size: clamp(1.75rem, 8vw, 2.2rem); }
  .product-image-wrapper { padding: 1.5rem; }
  .product-hero-img { max-height: 320px; }
  .preview-form-col,
  .preview-form,
  .preview-form-col.has-global-padding {
    padding: 1rem !important;
  }
  .about-text-col { padding: 1.5rem 8px !important; }
  .about-hero-img { height: 220px !important; }
  .about-hero-img img { height: 220px !important; }
  .wp-block-image.about-hero-img { height: 220px !important; }
}

/* ============================================================
   BACK TO TOP BUTTON
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--deep-green);
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  box-shadow: 0 4px 16px rgba(34, 46, 38, 0.2);
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}
.back-to-top:hover {
  background: var(--forest-green);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(34, 46, 38, 0.3);
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   MOBILE MENU OPEN STATE
   ============================================================ */
.mobile-toggle.open span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}
.mobile-toggle.open span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

@media (max-width: 1024px) {
  .mobile-toggle {
    display: flex;
  }
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: var(--off-white);
    flex-direction: column;
    padding: 6rem 2rem 2rem;
    transition: right 0.4s ease;
    box-shadow: -4px 0 24px rgba(0,0,0,0.08);
    z-index: 1000;
    gap: 1.5rem;
  }
  .nav-links.open,
  .nav-links.nav-links--open {
    right: 0;
  }
  .nav-links a {
    font-size: 1.1rem !important;
  }
}

/* ============================================================
   SCIENCE PAGE — RESPONSIVE OVERRIDES
   Comprehensive mobile & tablet fixes for Science & Research page.
   All rules scoped inside media queries — desktop remains untouched.
   ============================================================ */

/* ---- TABLET LANDSCAPE (≤1200px) ---- */
@media (max-width: 1200px) {
  .research-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- TABLET PORTRAIT / SMALL LAPTOP (≤1024px) ---- */
@media (max-width: 1024px) {
  /* Grids reduce to 2 columns */
  .research-grid { grid-template-columns: 1fr 1fr; }
  .deep-dive-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .methodology-grid { grid-template-columns: 1fr 1fr; }

  /* Deep-dive visual order: image first on tablet */
  .deep-dive-layout { order: 0; }
  .deep-dive-visual-col { order: -1; }

  /* Fix family accent image overflow on tablet */
  .family-image-stack {
    overflow: hidden;
    border-radius: var(--radius-lg);
  }
  .family-image-accent {
    width: 130px;
    height: 130px;
    bottom: -12px;
    right: -12px;
  }

  /* Reduce section padding */
  .page-hero { padding: 8rem 0 4rem; }
  .page-hero .page-hero-inner { padding: 0 2rem; }
  .deep-dive-section { padding: 4.5rem 0; }
  .stats-band { padding: 4rem 0; }
  .methodology-section { padding: 4.5rem 0; }
  .family-section { padding: 4.5rem 0 5rem; }
  .preview-section { padding: 5rem 0; }
}

/* ---- MOBILE (≤768px) ---- */
@media (max-width: 768px) {
  /* --- Grids → 1 column --- */
  .research-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .methodology-grid { grid-template-columns: 1fr; }
  .deep-dive-layout { grid-template-columns: 1fr; gap: 2rem; }

  /* Gutenberg grid overrides for science page grids */
  .wp-block-post-content .research-grid.is-layout-grid,
  .wp-block-post-content .research-grid.is-layout-grid.is-layout-grid {
    grid-template-columns: 1fr !important;
  }
  .wp-block-post-content .deep-dive-layout.is-layout-grid,
  .wp-block-post-content .deep-dive-layout.is-layout-grid.is-layout-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .wp-block-post-content .stats-grid.is-layout-grid,
  .wp-block-post-content .stats-grid.is-layout-grid.is-layout-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .wp-block-post-content .methodology-grid.is-layout-grid,
  .wp-block-post-content .methodology-grid.is-layout-grid.is-layout-grid {
    grid-template-columns: 1fr !important;
  }

  /* Kill Gutenberg auto-generated padding on inner layout groups.
     These override wp-container-core-group-is-layout-XXX inline styles. */
  .stats-grid,
  .stats-grid.is-layout-grid,
  .methodology-layout,
  .methodology-layout.has-global-padding,
  .methodology-grid,
  .methodology-grid.is-layout-grid,
  .deep-dive-layout,
  .deep-dive-layout.is-layout-grid {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* --- Page Hero --- */
  .page-hero {
    padding: 6rem 0 3rem;
  }
  .page-hero .page-hero-inner {
    padding: 0 8px;
  }
  .page-hero-title {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    margin-bottom: 1rem;
  }
  .page-hero-subtitle {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  /* --- Rooms / Published Research section --- */
  .rooms-section {
    padding: 3rem 0 4rem;
  }
  .rooms-section .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .rooms-header {
    text-align: center;
  }
  .rooms-header .rooms-headline {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  .research-grid {
    margin-top: 2.5rem;
    gap: 1.5rem;
  }
  .research-card-content {
    padding: 1.25rem;
  }
  .research-card-content h3 {
    font-size: 1.1rem;
  }
  .research-card-content p {
    font-size: 0.88rem;
  }
  .research-card-image {
    height: 180px;
  }

  /* --- Stats Band --- */
  .stats-band {
    padding: 3rem 0;
  }
  .stats-band .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .stats-grid {
    gap: 1.5rem;
    text-align: center;
  }
  .stat-number {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }
  .stat-label {
    font-size: 0.8rem;
  }
  .stat-item {
    padding: 0.75rem;
  }

  /* --- Methodology Section --- */
  .methodology-section {
    padding: 3.5rem 0;
  }
  .methodology-section .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .methodology-layout {
    margin-bottom: 2.5rem;
  }
  .methodology-headline {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }
  .methodology-text-col p {
    font-size: 0.95rem;
  }
  .methodology-grid {
    gap: 1.25rem;
  }
  .methodology-card {
    padding: 1.5rem 1.25rem;
  }
  .methodology-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 1rem;
  }
  .methodology-icon svg {
    width: 22px;
    height: 22px;
  }
  .methodology-card h3 {
    font-size: 1.05rem;
  }
  .methodology-card p {
    font-size: 0.85rem;
  }

  /* --- Deep Dive Sections --- */
  .deep-dive-section {
    padding: 3rem 0;
  }
  .deep-dive-section .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .deep-dive-text-col h2 {
    font-size: clamp(1.4rem, 6vw, 1.8rem);
    margin-bottom: 1rem;
  }
  .deep-dive-text-col p {
    font-size: 0.92rem;
    line-height: 1.75;
  }
  .deep-dive-text-col ul {
    gap: 0.5rem;
    margin: 1rem 0;
  }
  .deep-dive-text-col li {
    font-size: 0.88rem;
    gap: 0.5rem;
  }
  .deep-dive-visual-col img {
    border-radius: var(--radius-md);
  }

  /* --- Family / Why It Matters Section --- */
  .family-section {
    padding: 3.5rem 0 4rem;
  }
  .family-section .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .family-image-stack {
    overflow: hidden;
    border-radius: var(--radius-lg);
  }
  .family-image-accent {
    width: 100px;
    height: 100px;
    bottom: -8px;
    right: -8px;
  }
  .family-headline {
    font-size: clamp(1.4rem, 6vw, 1.8rem);
  }
  .family-body {
    font-size: 0.92rem;
  }
  .check-item span:last-child {
    font-size: 0.88rem;
  }
  .check-icon {
    width: 20px;
    height: 20px;
    font-size: 0.6rem;
  }

  /* --- Preview / CTA Section --- */
  .preview-section {
    padding: 3.5rem 0;
  }
  .preview-section .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .preview-headline {
    font-size: clamp(1.4rem, 6vw, 1.8rem);
  }
  .preview-body {
    font-size: 0.92rem;
  }
  .preview-benefit span:last-child {
    font-size: 0.88rem;
  }
  .preview-form-col .fluentform .ff-el-input--content input,
  .preview-form-col .fluentform .ff-el-input--content select,
  .preview-form-col .fluentform .ff-el-input--content textarea {
    padding: 0.75rem 0.85rem;
    font-size: 0.85rem;
  }
  .preview-form-col .fluentform .ff_submit_btn_wrapper .ff-btn,
  .preview-form-col .fluentform button[type="submit"] {
    width: 100%;
    padding: 0.85rem 1.5rem;
  }

  /* --- Section Eyebrows --- */
  .section-eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
  }

  /* --- Deep-dive layout: image above text on all sections --- */
  .deep-dive-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  /* Ensure image comes first regardless of HTML order */
  .deep-dive-visual-col {
    order: -1;
  }
}

/* ---- SMALL MOBILE (≤480px) ---- */
@media (max-width: 480px) {
  /* Further reduce hero padding */
  .page-hero {
    padding: 5rem 0 2.5rem;
  }
  .page-hero-title {
    font-size: clamp(1.5rem, 8vw, 2rem);
  }
  .page-hero-subtitle {
    font-size: 0.95rem;
  }

  /* Stats grid single column on very small screens */
  .stats-grid,
  .wp-block-post-content .stats-grid.is-layout-grid,
  .wp-block-post-content .stats-grid.is-layout-grid.is-layout-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  /* Further reduce section padding */
  .deep-dive-section { padding: 2.5rem 0; }
  .methodology-section { padding: 2.5rem 0; }
  .family-section { padding: 2.5rem 0 3rem; }
  .preview-section { padding: 2.5rem 0; }
  .stats-band { padding: 2.5rem 0; }

  /* Smaller card images */
  .research-card-image { height: 160px; }
  .research-card-content { padding: 1rem; }
}

/* ============================================================
   PREVIEW PAGE — Social Proof Section
   ============================================================ */
.social-proof-section {
  padding: 6rem 0;
  background: var(--cream);
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}
.proof-card {
  text-align: center;
  padding: 2.5rem 2rem;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(234, 230, 229, 0.6);
  transition: all 0.4s ease;
}
.proof-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(34, 46, 38, 0.08);
}
.proof-stat {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  color: var(--muted-green);
  margin-bottom: 0.25rem;
}
.proof-unit {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--deep-green);
  margin-bottom: 1rem;
}
.proof-card p {
  font-size: 0.92rem;
  color: var(--warm-gray);
  line-height: 1.7;
}

/* ============================================================
   PREVIEW PAGE — Product Preview Section (Mockup 4)
   ============================================================ */
.product-preview-section {
  padding: 6rem 0;
  background: var(--off-white);
}
.product-preview-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.product-preview-visual {
  position: relative;
}
.product-preview-image {
  background: var(--warm-neutral);
  border-radius: var(--radius-xl);
  padding: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.product-preview-image img {
  max-height: 400px;
  width: auto;
}
.product-preview-badge {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  padding: 1rem 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.product-preview-badge .badge-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--deep-green);
  margin-bottom: 0.15rem;
}
.product-preview-badge .badge-sub {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-gray);
}
.product-preview-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--deep-green);
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.product-preview-headline em { color: var(--muted-green); }
.product-preview-desc {
  font-size: 1.05rem;
  color: var(--warm-gray);
  line-height: 1.8;
  margin-bottom: 2rem;
}
.product-preview-features {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.preview-feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--charcoal);
}
.preview-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: var(--pale-green);
  color: var(--deep-green);
  flex-shrink: 0;
}
.preview-feature-icon svg {
  display: block;
  stroke: currentColor;
}

/* ============================================================
   PREVIEW PAGE — Form Section (Mockup 4)
   ============================================================ */
.form-section {
  padding: 5rem 0 7rem;
  background: var(--cream);
}
.form-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: start;
}
.form-text-col h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  color: var(--deep-green);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}
.form-text-col h2 em { color: var(--muted-green); }
.form-text-col p {
  font-size: 1.05rem;
  color: var(--warm-gray);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.form-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.form-check-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.form-check-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--muted-green);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.form-check-item span {
  font-size: 0.95rem;
  color: var(--charcoal);
}
.form-wrapper {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}

/* ============================================================
   PREVIEW PAGE — Gutenberg Grid Overrides
   ============================================================ */
@media (min-width: 1025px) {
  .wp-block-post-content .benefits-grid.is-layout-grid,
  .wp-block-post-content .benefits-grid.is-layout-grid.is-layout-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
  }
  .wp-block-post-content .proof-grid.is-layout-grid,
  .wp-block-post-content .proof-grid.is-layout-grid.is-layout-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
  }
  .wp-block-post-content .product-preview-layout.is-layout-grid,
  .wp-block-post-content .product-preview-layout.is-layout-grid.is-layout-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4rem !important;
    align-items: center !important;
  }
  .wp-block-post-content .form-layout.is-layout-grid,
  .wp-block-post-content .form-layout.is-layout-grid.is-layout-grid {
    display: grid !important;
    grid-template-columns: 1fr 1.2fr !important;
    gap: 4rem !important;
    align-items: start !important;
  }
}

/* ============================================================
   PREVIEW PAGE — Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .benefits-grid { grid-template-columns: 1fr 1fr; }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .product-preview-layout { grid-template-columns: 1fr; gap: 3rem; }
  .product-preview-layout.is-layout-grid,
  .product-preview-layout.wp-block-group {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
  .form-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .form-layout.is-layout-grid,
  .form-layout.wp-block-group {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
}
@media (max-width: 768px) {
  .benefits-grid { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: 1fr; }
  .product-preview-section { padding: 3rem 0; }
  .social-proof-section { padding: 3rem 0; }
  .form-section { padding: 3rem 0 4rem; }
  .product-preview-badge {
    bottom: 1rem;
    left: 1rem;
    padding: 0.75rem 1rem;
  }
  .product-preview-badge .badge-name { font-size: 1rem; }
  .product-preview-features { gap: 0.5rem; }
  .preview-feature { font-size: 0.88rem; }
  .form-checklist { gap: 0.5rem; }
  .form-check-icon { width: 24px; height: 24px; font-size: 0.7rem; }
}

/* ============================================================
   SINGLE POST — RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 1024px) {
  .single-hero { padding: 8rem 0 0; }
  .single-title { font-size: clamp(1.8rem, 5vw, 2.8rem); }
  .single-featured-img { max-height: 420px; }
  .author-bio-card { flex-direction: column; align-items: center; text-align: center; }
}
@media (max-width: 768px) {
  .single-hero { padding: 7rem 0 0; }
  .single-hero-inner { padding: 0 1.25rem 3rem; }
  .single-title { font-size: clamp(1.6rem, 6vw, 2.2rem); }
  .single-excerpt { font-size: 1rem; }
  .single-meta { flex-wrap: wrap; justify-content: center; font-size: 0.82rem; }
  .single-hero-image { padding: 0 1rem; }
  .single-featured-img { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 320px; }
  .single-content-section { padding: 2.5rem 0 2rem; }
  .single-content-section .wp-block-post-content p,
  .single-content-section .wp-block-post-content li { font-size: 1rem; }
  .author-bio-card { padding: 1.5rem; }
  .related-section { padding: 3rem 0 4rem; }
}

/* ============================================================
   FLUENT FORMS — Preview List Signup (scoped to .preview-form-col)
   Matches original bespoke form design exactly
   ============================================================ */

/* Form title */
.preview-form-col .form-title,
.preview-form-col h3.fluentform_heading,
.preview-form-col .fluentform .fluentform_heading {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--deep-green);
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

/* --- Force the white card appearance on the Fluent Forms wrapper --- */
.preview-form-col .fluentform,
.preview-form-col .fluentform_wrapper_3 {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* --- Remove default fieldset border --- */
.preview-form-col .fluentform fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Form groups (each field row) --- */
.preview-form-col .fluentform .ff-el-group {
  margin-bottom: 1rem;
  padding: 0 !important;
}

/* --- Two-column row for first/last name --- */
.preview-form-col .fluentform .ff-el-group.half {
  display: block;
  width: calc(50% - 0.5rem);
  float: left;
  margin-right: 0.5rem;
}
.preview-form-col .fluentform .ff-el-group.half:last-of-type {
  margin-right: 0;
  float: left;
}
/* Clearfix after the half fields */
.preview-form-col .fluentform .ff-el-group.half:last-of-type + .ff-el-group {
  clear: both;
}

/* --- Labels --- */
.preview-form-col .fluentform .ff-el-input--label label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--charcoal);
  margin-bottom: 0.4rem;
  text-transform: none;
}

/* --- Input, Select, Textarea --- */
.preview-form-col .fluentform .ff-el-input--content input,
.preview-form-col .fluentform .ff-el-input--content select,
.preview-form-col .fluentform .ff-el-input--content textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--charcoal);
  background: var(--cream);
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  transition: all 0.3s ease;
  outline: none;
  box-sizing: border-box;
}

/* Placeholder styling */
.preview-form-col .fluentform .ff-el-input--content input::placeholder,
.preview-form-col .fluentform .ff-el-input--content textarea::placeholder {
  color: var(--stone);
}

/* Focus states */
.preview-form-col .fluentform .ff-el-input--content input:focus,
.preview-form-col .fluentform .ff-el-input--content select:focus,
.preview-form-col .fluentform .ff-el-input--content textarea:focus {
  border-color: var(--muted-green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(91, 146, 121, 0.1);
}

/* Select — custom dropdown arrow */
.preview-form-col .fluentform .ff-el-input--content select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6560' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* Textarea */
.preview-form-col .fluentform .ff-el-input--content textarea {
  resize: vertical;
  min-height: 80px;
}

/* --- Submit button --- */
.preview-form-col .fluentform .ff_submit_btn_wrapper {
  margin-top: 0.5rem;
  padding: 0 !important;
}

.preview-form-col .fluentform .ff_submit_btn_wrapper button,
.preview-form-col .fluentform button[type="submit"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem;
  width: 100%;
  padding: 1.1rem 2.6rem !important;
  background-color: var(--deep-green) !important;
  color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  text-decoration: none !important;
  line-height: 1;
}

.preview-form-col .fluentform .ff_submit_btn_wrapper button:hover,
.preview-form-col .fluentform button[type="submit"]:hover {
  background-color: var(--forest-green) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(34, 46, 38, 0.25) !important;
}

/* --- Validation error messages --- */
.preview-form-col .fluentform .text-danger,
.preview-form-col .fluentform .ff-el-is-error .text-danger {
  font-size: 0.75rem;
  color: #c0392b;
  margin-top: 0.25rem;
  display: block;
}

/* Error border on invalid fields */
.preview-form-col .fluentform .ff-el-is-error input,
.preview-form-col .fluentform .ff-el-is-error select,
.preview-form-col .fluentform .ff-el-is-error textarea {
  border-color: #c0392b !important;
}

/* --- Success message after submission --- */
.preview-form-col .fluentform .ff-message-success {
  background: var(--pale-green);
  color: var(--deep-green);
  padding: 1.5rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-align: center;
  margin-top: 1rem;
}

/* --- Responsive: stack name fields on smaller screens --- */
@media (max-width: 600px) {
  .preview-form-col .fluentform .ff-el-group.half {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0 !important;
  }
  .preview-form-col .fluentform .ff-el-group.half + .ff-el-group.half {
    margin-left: 0 !important;
  }
}

/* ============================================================
   CHECKOUT PAGE — RESPONSIVE OVERRIDES
   All responsive rules scoped to .woocommerce-checkout (page-id-16)
   to prevent desktop regression and avoid affecting other pages.
   Desktop remains untouched.
   ============================================================ */

/* ---- TABLET LANDSCAPE (≤1200px) ---- */
@media (max-width: 1200px) {
  /* Tighten hero padding on tablet landscape */
  .woocommerce-checkout .page-hero {
    padding: 7rem 0 3.5rem;
  }
}

/* ---- TABLET PORTRAIT / SMALL LAPTOP (≤1024px) ---- */
@media (max-width: 1024px) {
  /* Reduce hero padding on tablet */
  .woocommerce-checkout .page-hero {
    padding: 5rem 0 2.5rem;
  }
  .woocommerce-checkout .page-hero-inner {
    padding: 0 2rem;
  }
  .woocommerce-checkout .page-hero-title {
    font-size: clamp(2rem, 4vw, 2.8rem);
  }

  /* Footer grid — keep 2 columns at tablet for checkout */
  .woocommerce-checkout .footer-grid.is-layout-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ---- MOBILE (≤768px) ---- */
@media (max-width: 768px) {
  /* Hero — compact for checkout context */
  .woocommerce-checkout .page-hero {
    padding: 4rem 0 2rem;
  }
  .woocommerce-checkout .page-hero-inner {
    padding: 0 8px;
  }
  .woocommerce-checkout .page-hero-title {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
  }
  .woocommerce-checkout .page-hero-subtitle {
    font-size: 0.95rem;
  }

  /* Footer — reduce top padding on mobile */
  .woocommerce-checkout .site-footer {
    padding-top: 3rem;
  }

  /* Footer grid — keep 2 columns on tablet portrait */
  .woocommerce-checkout .footer-grid.is-layout-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Footer grid columns — equal width & tighter gap */
  .woocommerce-checkout .footer-grid {
    gap: 2rem !important;
  }
}

/* ---- SMALL MOBILE (≤480px) ---- */
@media (max-width: 480px) {
  /* Hero — further reduce for small phones */
  .woocommerce-checkout .page-hero {
    padding: 3rem 0 1.5rem;
  }
  .woocommerce-checkout .page-hero-title {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
  .woocommerce-checkout .page-hero-subtitle {
    font-size: 0.88rem;
    line-height: 1.6;
  }

  /* Footer — reduce padding further */
  .woocommerce-checkout .site-footer {
    padding-top: 2.5rem;
  }

  /* Footer grid → 1 column on small mobile */
  .woocommerce-checkout .footer-grid.is-layout-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   ORDER CONFIRMATION — RESPONSIVE OVERRIDES
   ============================================================ */

/* ---- TABLET (≤1024px) ---- */
@media (max-width: 1024px) {
  .woocommerce-order-received main,
  .woocommerce-checkout.woocommerce-order-received main {
    padding: 2.5rem 2rem !important;
  }
  .woocommerce-order-received main > *,
  .woocommerce-checkout.woocommerce-order-received main > * {
    max-width: 100% !important;
  }
  .woocommerce-order-received .wc-block-order-confirmation-summary-list,
  .woocommerce-checkout .wc-block-order-confirmation-summary-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
  }
}

/* ---- MOBILE (≤768px) ---- */
@media (max-width: 768px) {
  .woocommerce-order-received main,
  .woocommerce-checkout.woocommerce-order-received main {
    padding: 2rem 8px !important;
  }
  .woocommerce-order-received main > *,
  .woocommerce-checkout.woocommerce-order-received main > * {
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .woocommerce-order-received main h1,
  .woocommerce-checkout.woocommerce-order-received main h1 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }
  .woocommerce-order-received main > p:first-of-type,
  .woocommerce-checkout main > p:first-of-type {
    font-size: 0.95rem !important;
    margin-bottom: 1.5rem !important;
  }
  .woocommerce-order-received .wc-block-order-confirmation-summary-list,
  .woocommerce-checkout .wc-block-order-confirmation-summary-list {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 1.25rem;
  }
  .woocommerce-order-received .wc-block-order-confirmation-summary-list-item__value,
  .woocommerce-checkout .wc-block-order-confirmation-summary-list-item__value {
    font-size: 0.95rem;
    word-break: break-all;
    overflow-wrap: break-word;
  }
  .woocommerce-order-received table,
  .woocommerce-checkout table {
    font-size: 0.9rem;
  }
  .woocommerce-order-received td,
  .woocommerce-checkout td {
    padding: 0.75rem 0;
  }
  .woocommerce-order-received th,
  .woocommerce-checkout th {
    font-size: 0.65rem;
  }
  .woocommerce-order-received h2,
  .woocommerce-checkout h2 {
    font-size: 1.3rem;
  }
}

/* ---- SMALL MOBILE (≤480px) ---- */
@media (max-width: 480px) {
  .woocommerce-order-received main,
  .woocommerce-checkout.woocommerce-order-received main {
    padding: 1.5rem 8px !important;
  }
  .woocommerce-order-received main h1,
  .woocommerce-checkout.woocommerce-order-received main h1 {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }
  .woocommerce-order-received .wc-block-order-confirmation-summary-list,
  .woocommerce-checkout .wc-block-order-confirmation-summary-list {
    padding: 1rem;
    gap: 0.5rem;
  }
  .woocommerce-order-received .wc-block-order-confirmation-summary-list-item__value,
  .woocommerce-checkout .wc-block-order-confirmation-summary-list-item__value {
    font-size: 1rem;
  }
  .woocommerce-order-received table,
  .woocommerce-checkout table {
    font-size: 0.85rem;
  }
}