/* Auto-generated from mockup/pomifera-our-story.html — do not edit by hand */

/* Our Story page — scoped under .our-story to avoid leaking into other pages */
    .our-story {
      --pom-cream:      #F5F1EA;
      --pom-olive:      #6F7F4F;
      --pom-olive-dark: #5A6A40;
      --pom-deep-green: #2F4A3C;
      --pom-text:       #1A1A1A;
      --pom-muted:      #6D6D6D;
      --pom-yellow:     #C8A95B;
      --pom-border:     #E6DECF;
      color: var(--pom-text);
      font-family: 'Inter', sans-serif;
      background: #f8f6f2;
    }
    .our-story h1, .our-story h2, .our-story h3, .our-story h4, .our-story h5, .our-story h6,
    .our-story .serif {
      font-family: 'kudryashev-d-contrast', 'Playfair Display', serif;
      font-weight: 400;
      letter-spacing: -0.005em;
    }
    .our-story .eyebrow {
      font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--pom-muted);
    }
    .our-story .btn-pom {
      background: var(--pom-olive); color: #fff; border: 0; border-radius: 0;
      padding: .95rem 2.2rem; letter-spacing: .18em; font-size: .72rem; font-weight: 500;
      text-transform: uppercase; transition: background .2s;
    }
    .our-story .btn-pom:hover { background: var(--pom-olive-dark); color: #fff; }

    /* Section 1 — Hero */
    .os-hero {
      position: relative;
      min-height: clamp(360px, 60vh, 640px);
      background-image: url('/wp-content/uploads/2026/05/ourstory-banner.jpg');
      background-size: cover;
      background-position: center;
      display: flex; align-items: center; justify-content: center;
      color: #fff; text-align: center;
    }
    .os-hero::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
    }
    .os-hero .container { position: relative; z-index: 2; padding: 6rem 1rem; }
    .os-hero h1 {
      font-size: clamp(2.75rem, 7vw, 6rem);
      letter-spacing: .04em;
      text-transform: uppercase;
      margin: 0;
      color: #fff;
    }

    /* Section 2 — Simple. Honest. Humble. (2-column: image + copy) */
    .os-intro { padding: clamp(4rem, 8vw, 7rem) 0; background: #f1f1ef; }
    .os-intro h2 {
      font-size: clamp(1.75rem, 3.2vw, 2.75rem);
      letter-spacing: .25em;
      text-transform: uppercase;
      color: var(--pom-olive);
      margin-bottom: 1.75rem;
    }
    .os-intro p {
      font-size: clamp(1rem, 1.15vw, 1.125rem);
      line-height: 1.85;
      color: var(--pom-text);
      margin-bottom: 0;
    }
    .os-intro .product-shot {
      width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 2px;
    }

    /* Section 3 — What makes us different (text-only, full width) */
    .os-different { padding: clamp(4rem, 8vw, 7rem) 0; background: #fff; }
    .os-different h2 {
      font-size: clamp(2rem, 4vw, 3.25rem);
      margin-bottom: 1.5rem; color: var(--pom-deep-green); text-align: center;
    }
    .os-different .lede {
      font-size: .82rem; letter-spacing: .22em; text-transform: uppercase;
      color: var(--pom-olive); margin-bottom: 1.5rem; font-weight: 500; text-align: center;
    }
    .os-different p { line-height: 1.85; color: var(--pom-text); }

    /* Section 4 — HOW / WHAT / WHY parallax */
    .os-how-what-why {
      position: relative;
      padding: clamp(5rem, 10vw, 9rem) 0;
      background-image: url('http://localhost/CLAUDEPROJ/Claude-Pomifera/wp-content/uploads/2026/05/hedges.webp');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      color: #fff;
    }
    @media (max-width: 768px) {
      .os-how-what-why { background-attachment: scroll; }
    }
    .os-how-what-why::before {
      content: ""; position: absolute; inset: 0;
      background: rgba(20, 28, 18, .55);
    }
    .os-how-what-why .container { position: relative; z-index: 2; }
    .os-hww-card {
      background: #fff; color: #000;
      padding: 2rem 1.75rem;
      border-radius: 5%;
      height: 100%;
      box-shadow: 0 6px 24px rgba(0,0,0,.08);
      text-align: center;
    }
    .os-hww-card .label {
      text-align: center;
      font-family: mont-bold;
      font-weight: 400;
      font-style: normal;
      text-transform: uppercase;
      font-size: clamp(2.5rem, 4.5vw, 3.75rem);
      line-height: 1; color: #000;
      margin-bottom: .75rem;
    }
    .os-hww-card h3 {
      font-size: 1rem; letter-spacing: .22em; text-transform: uppercase;
      margin-bottom: 1.25rem; color: #000; font-weight: 500;
      font-family: 'Inter', sans-serif;
    }
    .os-hww-card p { line-height: 1.8; color: #000; font-size: .98rem; margin-bottom: 0; }

    /* Section 5 — Values + CTA */
    .os-values { padding: clamp(4rem, 8vw, 7rem) 0; background: #fff; }
    .os-values .tagline {
      font-size: clamp(1.75rem, 3vw, 2.75rem);
      text-align: center; max-width: 32ch; margin: 0 auto 4rem;
      color: var(--pom-deep-green); line-height: 1.25;
    }
    .os-value-card {
      padding: 1.75rem 0;
      border-bottom: 1px solid var(--pom-border);
    }
    .os-value-card:last-child { border-bottom: 0; }
    .os-value-card .v-title {
      font-family: 'kudryashev-d-contrast', 'Playfair Display', serif;
      font-size: clamp(1.75rem, 2.5vw, 2.25rem);
      color: var(--pom-olive); margin-bottom: 0;
    }
    .os-value-card .v-body {
      font-size: 1rem; line-height: 1.75; color: var(--pom-text);
      margin-bottom: .75rem;
    }
    .os-value-card .v-tag {
      font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
      color: var(--pom-muted); font-weight: 500;
    }
    .os-cta-wrap { text-align: center; margin-top: 3.5rem; }