/* ============================================================
   ABOUT PAGE — STANDALONE STYLESHEET
   Theme tokens + base helpers + the 3 About-page sections:
   Page Header, Our Story, Why Choose Us
   ============================================================ */

   *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

   :root{
     /* Core palette — pulled from the Sukh Farm business card */
     --green-950:#0e1f16;
     --green-900:#14301f;
     --green-800:#1c4029;
     --cream:#f7f3ea;
     --ink:#1c1a15;
     --ink-soft:#54503f;
     --paper:#fffdf8;
   
     --gold-100:#f6e6b8;
     --gold-300:#e9c877;
     --gold-500:#c9a24a;
     --gold-600:#a9812f;
     --gold-gradient: linear-gradient(120deg, #f0d896 0%, #c9a24a 45%, #8a6a24 100%);
   
     --bg: var(--cream);
     --surface: var(--paper);
     --text: var(--ink);
     --text-soft: var(--ink-soft);
     --text-invert:#f6f2e6;
     --primary: var(--green-900);
     --accent-dark: var(--gold-600);
     --border: #e3dcc7;
     --border-dark: rgba(246,230,184,0.16);
   
     --shadow-gold: 0 10px 26px rgba(169,129,47,0.28);
     --radius-md: 14px;
     --radius-lg: 26px;
     --ease: cubic-bezier(.4,0,.2,1);
     --ease-out-soft: cubic-bezier(.16,1,.3,1);
   }
   
   body{
     font-family:'Inter',sans-serif;
     background:var(--bg);
     color:var(--text);
     line-height:1.6;
   }
   h1,h2,h3{ font-family:'Playfair Display',serif; color:var(--primary); line-height:1.2; font-weight:700; }
   a{ text-decoration:none; color:inherit; }
   img{ max-width:100%; display:block; }
   
   .accent{ color:var(--accent-dark); }
   .container{ width:100%; max-width:1240px; margin:0 auto; padding:0 24px; }
   .section-pad{ padding:96px 0; }
   @media (max-width:768px){ .section-pad{ padding:64px 0; } }
   
   /* ---------- Reveal-on-scroll (main.js / about.js toggles .in-view) ---------- */
   .reveal, .reveal-card{
     opacity:0;
     transform:translateY(28px);
     transition:opacity .8s var(--ease-out-soft), transform .8s var(--ease-out-soft);
   }
   .reveal.in-view, .reveal-card.in-view{ opacity:1; transform:translateY(0); }
   @media (prefers-reduced-motion: reduce){
     .reveal, .reveal-card{ transition:none !important; opacity:1 !important; transform:none !important; }
   }
   
   .section-header{ text-align:center; max-width:640px; margin:0 auto 56px; }
   .section-tag{
     display:inline-block; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
     color:var(--accent-dark); font-weight:600; margin-bottom:14px;
   }
   .section-header h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:12px; }
   .section-desc{ color:var(--text-soft); font-size:1rem; }
   
   /* .btn{
     display:inline-flex; align-items:center; gap:10px;
     padding:14px 30px; border-radius:999px;
     font-size:.92rem; font-weight:600;
     transition:transform .35s var(--ease), box-shadow .35s var(--ease);
   } */
   .btn-primary{ background:var(--gold-gradient); color:var(--green-950); box-shadow:var(--shadow-gold); }
   .btn-primary:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(169,129,47,.38); }
   
   @keyframes fadeUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }

   
   
   /* ============================================================
      SECTION 1 — Page Header (dark hero banner)
      ============================================================ */
   .page-header{
     position:relative;
     min-height:56vh;
     display:flex; align-items:flex-end;
     overflow:hidden;
     background:var(--green-950);
   }
   .page-header-bg{
     position:absolute; inset:0;
     background-color:var(--green-900); /* fallback if no photo is set */
     background-size:cover; background-position:center;
     animation:headerZoom 14s ease-in-out infinite alternate;
   }
   .page-header-bg::before{
     content:"";
     position:absolute; inset:0;
     background-image:
       radial-gradient(circle at 20% 20%, rgba(201,162,74,.22), transparent 45%),
       linear-gradient(160deg, rgba(28,64,41,.4), rgba(14,31,22,.6));
   }
   @keyframes headerZoom{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
   .page-header-overlay{
     position:absolute; inset:0;
     background:linear-gradient(180deg, rgba(14,31,22,.35) 0%, rgba(14,31,22,.9) 100%);
   }
   .page-header-content{
     position:relative; z-index:2;
     width:100%; padding:120px 24px 56px;
     max-width:1240px; margin:0 auto;
   }
   .page-breadcrumb{
     display:flex; align-items:center; gap:10px;
     font-size:.85rem; color:rgba(246,242,230,.7);
     margin-bottom:18px;
     animation:fadeUp .8s var(--ease-out-soft) both;
   }
   .page-breadcrumb a{ color:var(--gold-300); transition:color .3s var(--ease); }
   .page-breadcrumb a:hover{ color:var(--gold-100); }
   .page-header-content h1{
     font-size:clamp(2.4rem,5vw,3.6rem);
     color:var(--text-invert);
     animation:fadeUp .9s var(--ease-out-soft) .15s both;
   }
   .page-header-content h1 .accent{ color:var(--gold-300); font-style:italic; }
   .page-header-content p{
     color:rgba(246,242,230,.78);
     max-width:520px; margin-top:14px; font-size:1.02rem;
     animation:fadeUp .9s var(--ease-out-soft) .3s both;
   }
   
   /* ============================================================
      SECTION 2 — Our Story (light, story + animated image collage)
      ============================================================ */
 /* ===========================================================
   OUR STORY SECTION — framed photo + horizontal stat bar
   Self-triggering CSS animations only — no JavaScript/observer
   dependency, so nothing can silently fail to appear.
   Uses var(--token, fallback) so it works with or without your
   global theme variables.
   =========================================================== */

.story-section{
  position:relative;
  padding:110px 5vw;
  background:var(--bg, #f7f3ea);
  overflow:hidden;
}

.story-container{
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:.95fr 1.15fr;
  gap:80px;
  align-items:center;
}

/* ---------- self-triggering entrance animations ---------- */
@keyframes storyFadeUp{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes storyFadeLeft{
  from{ opacity:0; transform:translateX(-24px); }
  to{ opacity:1; transform:translateX(0); }
}

.story-visual{ animation:storyFadeLeft .9s cubic-bezier(.16,.8,.3,1) both; }
.story-eyebrow{ animation:storyFadeUp .7s cubic-bezier(.16,.8,.3,1) .05s both; }
.story-heading{ animation:storyFadeUp .7s cubic-bezier(.16,.8,.3,1) .15s both; }
.story-lede{ animation:storyFadeUp .7s cubic-bezier(.16,.8,.3,1) .25s both; }
.story-body{ animation:storyFadeUp .7s cubic-bezier(.16,.8,.3,1) .33s both; }
.story-stats{ animation:storyFadeUp .7s cubic-bezier(.16,.8,.3,1) .42s both; }
.story-cta{ animation:storyFadeUp .7s cubic-bezier(.16,.8,.3,1) .5s both; }

@media (prefers-reduced-motion: reduce){
  .story-visual, .story-eyebrow, .story-heading, .story-lede,
  .story-body, .story-stats, .story-cta{
    animation:none !important;
  }
}

/* ---------- visual column ---------- */
.story-visual{
  position:relative;
  padding-left:38px;
}

.story-vtag{
  position:absolute;
  left:-6px;
  top:0;
  bottom:0;
  display:flex;
  align-items:center;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--accent-dark, #a9812f);
}
.story-vtag::before{
  content:'';
  display:block;
  width:1px;
  height:60px;
  margin-bottom:16px;
  background:var(--border, #ddd2b0);
}

.story-frame{
  position:relative;
  border-radius:var(--radius-lg, 12px);
  overflow:hidden;
  width:90%;
  height:70vh;
  box-shadow:0 30px 60px -24px rgba(14,31,22,.35);
}
.story-frame::after{
  content:'';
  position:absolute;
  inset:-14px -14px auto auto;
  width:70%;
  height:70%;
  border:2px solid var(--accent-dark, #a9812f);
  border-radius:var(--radius-lg, 12px);
  z-index:-1;
  opacity:.5;
}
.story-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .9s cubic-bezier(.16,.8,.3,1);
}
.story-frame:hover img{ transform:scale(1.06); }

.story-thumbs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:20px;
}
.story-thumb{
  aspect-ratio:4/3;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 16px 32px -18px rgba(14,31,22,.3);
}
.story-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .8s cubic-bezier(.16,.8,.3,1);
}
.story-thumb:hover img{ transform:scale(1.08); }

/* ---------- content column ---------- */
.story-eyebrow{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent-dark, #a9812f);
  margin:0 0 14px;
}

.story-heading{
  font-family:'Playfair Display', 'Cormorant Garamond', serif;
  font-size:clamp(2rem, 3.6vw, 3rem);
  font-weight:700;
  line-height:1.15;
  color:var(--primary, #14301f);
  margin:0 0 24px;
}
.story-heading em{
  font-style:italic;
  color:var(--accent-dark, #a9812f);
}

.story-lede{
  font-size:1.08rem;
  line-height:1.7;
  color:var(--text-soft, #54503f);
  max-width:520px;
  margin:0 0 18px;
}
.story-body{
  font-size:.98rem;
  line-height:1.75;
  color:var(--text-soft, #54503f);
  max-width:520px;
  margin:0 0 40px;
  font-weight:300;
}

/* ---------- horizontal stat bar (dividers, not boxes) ---------- */
.story-stats{
  display:flex;
  margin-bottom:40px;
  border-top:1px solid var(--border, #ddd2b0);
  border-bottom:1px solid var(--border, #ddd2b0);
  padding:28px 0;
}
.story-stat{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:0 24px;
  border-left:1px solid var(--border, #ddd2b0);
}
.story-stat:first-child{ border-left:0; padding-left:0; }
.story-num{
  font-family:'Playfair Display', serif;
  font-size:2.1rem;
  font-weight:700;
  color:var(--primary, #14301f);
  line-height:1;
  margin-bottom:8px;
}
.story-num em{
  font-style:normal;
  font-size:1.1rem;
  color:var(--accent-dark, #a9812f);
}
.story-label{
  font-size:.76rem;
  line-height:1.4;
  color:var(--text-soft, #54503f);
  letter-spacing:.02em;
}

/* ---------- CTA row ---------- */
.story-cta{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
}
.story-btn-primary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  border-radius:4px;
  background:linear-gradient(180deg, var(--accent, #e9c877), var(--accent-dark, #c9a24a));
  color:var(--primary-dark, #0e1f16);
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-decoration:none;
  transition:transform .3s ease, box-shadow .3s ease;
}
.story-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 28px -14px rgba(201,162,74,.55);
}
.story-btn-primary svg{
  width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

.story-link-arrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.92rem;
  font-weight:600;
  color:var(--primary, #14301f);
  text-decoration:none;
  transition:gap .3s ease, color .3s ease;
}
.story-link-arrow:hover{
  gap:13px;
  color:var(--accent-dark, #a9812f);
}
.story-link-arrow svg{
  width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1080px){
  .story-container{ gap:56px; }
  .story-stat{ padding:0 16px; }
}

@media (max-width:960px){
  .story-section{ padding:80px 6vw; }
  .story-container{
    grid-template-columns:1fr;
    gap:52px;
  }
  .story-visual{
    padding-left:0;
    max-width:520px;
    margin:0 auto;
  }
  .story-vtag{ display:none; }
  .story-content{ text-align:center; }
  .story-lede, .story-body{ margin-left:auto; margin-right:auto; }
  .story-cta{ justify-content:center; }
}

@media (max-width:640px){
  .story-heading{ font-size:clamp(1.7rem, 6vw, 2.3rem); }
  .story-lede{ font-size:1rem; }
  .story-body{ font-size:.92rem; }

  .story-stats{
    flex-direction:column;
    gap:20px;
    padding:24px 0;
  }
  .story-stat{
    border-left:0;
    padding-left:0;
    border-top:1px solid var(--border, #ddd2b0);
    padding-top:18px;
  }
  .story-stat:first-child{ border-top:0; padding-top:0; }

  .story-cta{
    flex-direction:column;
    align-items:stretch;
    gap:16px;
  }
  .story-btn-primary{ justify-content:center; }
  .story-link-arrow{ justify-content:center; }

  .story-thumbs{ gap:12px; }
}

@media (max-width:960px){
  .story-frame{ width:100%; height:56vh; }
}

@media (max-width:400px){
  .story-frame{ height:44vh; }
  .story-heading{ font-size:1.5rem; }
}   
   /* ============================================================
      SECTION 3 — Why Choose Us (dark, image + feature cards)
      ============================================================ */
   .why-choose{
     position:relative;
     background:
       radial-gradient(circle at 90% 10%, rgba(235, 168, 12, 0.12), transparent 60%),
       linear-gradient(175deg, var(--green-900), var(--green-950));
     overflow:hidden;
   }
   .why-choose .section-tag{ color:var(--gold-300); }
   .why-choose .section-header h2{ color:var(--text-invert); }
   .why-choose .section-desc{ color:rgba(246,242,230,.72); }
   
   .why-grid{
     display:grid;
     grid-template-columns:.85fr 1.15fr;
     gap:56px;
     align-items:center;
   }
   .why-image{
     position:relative;
     border-radius:var(--radius-lg);
     overflow:hidden;
     height:460px;
     background:linear-gradient(160deg, var(--green-800), var(--green-950));
     box-shadow:0 24px 50px rgba(0,0,0,.4);
   }
   .why-image img{
     width:100%; height:100%; object-fit:cover;
     transition:transform 1s var(--ease-out-soft);
   }
   .why-image:hover img{ transform:scale(1.06); }
   .why-image::after{
     content:"";
     position:absolute; inset:0;
     background:linear-gradient(200deg, transparent 55%, rgba(14,31,22,.55) 100%);
     pointer-events:none;
   }
   
   .why-list{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
   .why-card{
     background:rgba(246,242,230,.04);
     border:1px solid var(--border-dark);
     border-radius:var(--radius-md);
     padding:28px 24px;
     transition:transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
   }
   .why-card:hover{
     transform:translateY(-6px);
     background:rgba(246,242,230,.07);
     border-color:var(--gold-500);
   }
   .why-icon{
     width:52px; height:52px; border-radius:50%;
     display:flex; align-items:center; justify-content:center;
     background:var(--gold-gradient); color:var(--green-950);
     font-size:1.15rem; margin-bottom:16px;
     transition:transform .4s var(--ease);
   }
   .why-card:hover .why-icon{ transform:rotate(-8deg) scale(1.05); }
   .why-card h3{ color:var(--text-invert); font-size:1.05rem; margin-bottom:8px; }
   .why-card p{ color:rgba(246,242,230,.68); font-size:.88rem; }
   
   @media (max-width:900px){
     .why-grid{ grid-template-columns:1fr; gap:40px; }
     .why-image{ height:320px; }
   }
   @media (max-width:560px){
     .why-list{ grid-template-columns:1fr; }
     .page-header{ min-height:46vh; }
     .page-header-content{ padding:100px 20px 44px; }
   }