/* =========================================================
   OUR STORY — ivory, emerald & gold
   ========================================================= */
.story {
  --st-ink: #13251d;
  --st-muted: #625d56;
  --st-gold: #c39a52;
  --st-card: #f9f5ee;
  position: relative;
  overflow: hidden;
  padding: clamp(90px, 12vh, 130px) 0 clamp(80px, 11vh, 120px);
  background:
    radial-gradient(ellipse 60% 70% at 78% 10%, rgba(255, 238, 205, .75), transparent 60%),
    linear-gradient(180deg, #f8f2e9 0%, #f6efe4 100%);
}

/* photo — right side, fading into the ivory background */
.story-photo {
  position: absolute; top: 0; right: 0; z-index: 0;
  width: min(56vw, 1080px);
  aspect-ratio: 970 / 530;
  background: url("../img/story.webp") 100% 0 / 186.6% auto no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(180deg, #000 72%, transparent 100%);
  mask-composite: intersect;
  will-change: transform;
}

/* thin gold line with a leaf — sits just above the cards, running in from the page edge */
.story-line-wrap { position: absolute; z-index: -1; left: calc((100% - 100vw) / 2); top: -150px; width: min(72vw, 1060px); height: 150px; pointer-events: none; }
.story-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.story-line path { fill: none; stroke: var(--st-gold); stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .85; }
.story-leaf { position: absolute; left: 10.5%; top: 65%; width: 34px; height: 34px; transform: translate(-30%, -70%); }
.story-leaf path:first-child { fill: #e2b86a; }
.story-leaf path:last-child { fill: none; stroke: #b0823a; stroke-width: 1.2; stroke-linecap: round; }

.story-wrap { position: relative; z-index: 2; }
.story-head { max-width: min(780px, 60%); }
.story .eyebrow { color: #a8813f; letter-spacing: .28em; font-weight: 800; }
.story .eyebrow::before { width: 40px; opacity: 1; background: var(--st-gold); }
.story-title { font-size: clamp(2.6rem, 4.6vw, 4.5rem); line-height: 1.04; color: var(--st-ink); margin: .2rem 0 1.4rem; letter-spacing: -.02em; }
.story-title em { font-style: italic; }
.story-title em .w-i { background: linear-gradient(180deg, #d9ae62 0%, #c2913f 55%, #9c6f28 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.story .story-text { font-family: var(--sans); font-weight: 400; font-size: clamp(1.02rem, 1.35vw, 1.22rem); line-height: 1.65; color: var(--st-muted); max-width: 600px; letter-spacing: 0; }

/* cards */
.story .values { position: relative; z-index: 2; isolation: isolate; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 32px); margin-top: clamp(70px, 9vw, 110px); }
.story .value {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 300px;
  padding: 30px 34px 40px;
  border-radius: 18px;
  background: linear-gradient(160deg, #fbf8f2 0%, var(--st-card) 60%, #f3ece0 100%);
  border: 1px solid rgba(195, 154, 82, .22);
  box-shadow: 0 24px 48px -30px rgba(60, 42, 12, .35), 0 1px 0 #fff inset;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.story .value:hover { transform: translateY(-8px); background: linear-gradient(160deg, #fbf8f2 0%, var(--st-card) 60%, #f3ece0 100%); box-shadow: 0 34px 60px -30px rgba(60, 42, 12, .45), 0 1px 0 #fff inset; }
.value-no { position: absolute; top: 22px; right: 34px; z-index: -1; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(3.6rem, 5vw, 4.8rem); line-height: 1; color: rgba(195, 154, 82, .14); }

/* organic blob badge */
.story .value-icon {
  position: relative; width: 70px; height: 66px; margin: 0 0 26px -6px;
  border-radius: 58% 42% 55% 45% / 52% 60% 40% 48%;
  background: radial-gradient(circle at 35% 30%, #2a6b4c, #0f3a2a 70%);
  box-shadow: 0 10px 22px -10px rgba(10, 40, 28, .6);
}
.story .value-icon::before {
  content: ""; position: absolute; inset: -5px -8px -3px -4px;
  border-radius: 45% 55% 42% 58% / 58% 42% 60% 40%;
  border: 1px solid rgba(195, 154, 82, .7);
  transform: rotate(-12deg);
}
.story .value-gold .value-icon { background: radial-gradient(circle at 35% 30%, #f1d08c, #c8953f 70%); box-shadow: 0 10px 22px -10px rgba(160, 110, 30, .6); }
.story .value-icon svg { position: relative; width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.story .value h3 { font-size: clamp(1.4rem, 1.9vw, 1.75rem); color: var(--st-ink); margin-bottom: 14px; }
.story .value h3::after { content: ""; display: block; width: 32px; height: 2px; margin-top: 14px; background: var(--st-gold); transition: width .6s var(--ease); }
.story .value:hover h3::after { width: 60px; }
.story .value p { color: var(--st-muted); font-size: .98rem; line-height: 1.6; max-width: 66%; }

.value-corner { position: absolute; right: -1px; bottom: -1px; z-index: -1; width: 46%; aspect-ratio: 220 / 210; pointer-events: none; transition: transform .8s var(--ease); transform-origin: bottom right; }
.value-corner svg { width: 100%; height: 100%; display: block; }
.story .value:hover .value-corner { transform: scale(1.06); }

/* responsive */
@media (max-width: 1100px) {
  .story .value p { max-width: 72%; }
}
@media (max-width: 899px) {
  .story { padding-top: 0; }
  .story-photo { position: relative; width: 100%; aspect-ratio: 970 / 560; margin-bottom: -40px;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
  .story-head { max-width: 100%; }
  .story-line-wrap { display: none; }
  .story .values { grid-template-columns: 1fr; margin-top: 48px; }
  .story .value { min-height: 0; }
  .story .value p { max-width: 64%; }
}
@media (max-width: 560px) {
  .story .value { padding: 26px 24px 34px; }
  .story .value p { max-width: 100%; position: relative; }
  .value-corner { width: 42%; opacity: .55; }
}