/* Don Joaco Our Story / Finca La Vega */
.dj-story-page { overflow: hidden; }
.dj-story-hero { min-height: 82vh; position: relative; display: flex; align-items: flex-end; color: var(--dj-white); background: var(--dj-black); }
.dj-story-hero__media { position: absolute; inset: 0; background: url('https://cafedonjoaco.com/wp-content/uploads/2025/01/kaffee-import-in-oesterreich-kaffee-don-joaco.webp') center/cover no-repeat; filter: saturate(.8) contrast(1.02); transform: scale(1.02); }
.dj-story-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(38,59,44,.66) 52%, rgba(0,0,0,.18) 100%); }
.dj-story-hero__content { position: relative; z-index: 2; padding-block: 110px 72px; }
.dj-story-hero h1 { margin: 0; max-width: 1150px; font-size: clamp(54px,8.5vw,128px); line-height: .9; letter-spacing: -.055em; }
.dj-story-hero__lead { max-width: 760px; margin: 32px 0 0; font-size: clamp(20px,2.1vw,30px); line-height: 1.42; }

.dj-story-name, .dj-story-colombia, .dj-story-dream { padding: 110px 0; background: var(--dj-cream); }
.dj-story-name h2, .dj-story-farm h2, .dj-story-chain h2, .dj-story-colombia h2, .dj-story-vienna h2, .dj-story-dream h2 { margin: 0; font-size: clamp(42px,6vw,88px); line-height: .96; letter-spacing: -.05em; }
.dj-story-copy { max-width: 760px; font-size: 20px; line-height: 1.62; }

.dj-story-farm { display: grid; grid-template-columns: 1.08fr .92fr; min-height: 760px; }
.dj-story-farm__image { min-height: 650px; background: linear-gradient(rgba(38,59,44,.08),rgba(38,59,44,.08)), url('https://cafedonjoaco.com/wp-content/uploads/2025/06/directcoffee-eu-OG-Colombia-Coffee-Vienna.jpg') center 35%/cover no-repeat; }
.dj-story-farm__content { background: var(--dj-green-deep); color: var(--dj-white); padding: 86px clamp(36px,6vw,100px); display: flex; flex-direction: column; justify-content: center; }
.dj-story-farm__content .dj-section-label { color: #c7d2c8; }
.dj-story-farm__content > p:not(.dj-section-label) { max-width: 690px; font-size: 22px; line-height: 1.56; }
.dj-story-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; margin-top: 34px; }
.dj-story-facts div { border-top: 1px solid rgba(255,255,255,.3); padding-top: 14px; }
.dj-story-facts span { display: block; color: #c7d2c8; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; margin-bottom: 7px; }
.dj-story-facts strong { font-size: 19px; line-height: 1.35; }

.dj-story-chain { padding: 110px 0 120px; background: var(--dj-white); }
.dj-story-steps { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--dj-line); margin-top: 40px; }
.dj-story-steps > div { padding: 30px 24px 20px 0; border-right: 1px solid var(--dj-line); min-height: 260px; }
.dj-story-steps > div + div { padding-left: 24px; }
.dj-story-steps > div:last-child { border-right: 0; }
.dj-story-steps span { color: var(--dj-green); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.dj-story-steps h3 { margin: 42px 0 12px; font-size: 27px; letter-spacing: -.03em; }
.dj-story-steps p { margin: 0; color: #444; font-size: 17px; line-height: 1.5; }

.dj-story-bridge { background: var(--dj-coffee-deep); color: var(--dj-white); padding: 105px 0 115px; }
.dj-story-bridge .dj-section-label { color: #dbcabd; }
.dj-story-bridge__statement { margin: 0; max-width: 1300px; font-size: clamp(46px,7vw,104px); line-height: .98; letter-spacing: -.05em; font-weight: 800; }
.dj-story-bridge__meta { margin-top: 55px; display: flex; flex-wrap: wrap; gap: 9px; }
.dj-story-bridge__meta span { border: 1px solid rgba(255,255,255,.42); padding: 10px 13px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }

.dj-story-colombia { background: var(--dj-off); }

.dj-story-vienna { display: grid; grid-template-columns: .95fr 1.05fr; min-height: 720px; background: var(--dj-black); color: var(--dj-white); }
.dj-story-vienna__content { padding: 85px clamp(36px,6vw,100px); display: flex; flex-direction: column; justify-content: center; }
.dj-story-vienna__content .dj-section-label { color: #b9c7b9; }
.dj-story-vienna__content > p:not(.dj-section-label) { max-width: 690px; font-size: 22px; line-height: 1.58; }
.dj-story-vienna__image { min-height: 620px; background: url('https://cafedonjoaco.com/wp-content/uploads/2025/03/Cafe-Don-Joaco-1050-Speciality-Coffee-Wien-1-scaled.webp') center/cover no-repeat; }

.dj-story-dream { background: var(--dj-cream); }

@media (max-width: 980px) {
  .dj-story-farm, .dj-story-vienna { grid-template-columns: 1fr; }
  .dj-story-farm__image, .dj-story-vienna__image { min-height: 520px; }
  .dj-story-steps { grid-template-columns: 1fr 1fr; }
  .dj-story-steps > div:nth-child(2) { border-right: 0; }
  .dj-story-steps > div:nth-child(n+3) { border-top: 1px solid var(--dj-line); }
}

@media (max-width: 620px) {
  .dj-story-hero { min-height: 76vh; }
  .dj-story-hero__content { padding-block: 90px 44px; }
  .dj-story-hero h1 { font-size: clamp(48px,15vw,74px); }
  .dj-story-name, .dj-story-colombia, .dj-story-dream, .dj-story-chain { padding: 72px 0; }
  .dj-story-farm__content, .dj-story-vienna__content { padding: 62px 28px; }
  .dj-story-farm__image, .dj-story-vienna__image { min-height: 440px; }
  .dj-story-facts { grid-template-columns: 1fr; }
  .dj-story-steps { grid-template-columns: 1fr; }
  .dj-story-steps > div, .dj-story-steps > div + div { border-right: 0; border-top: 1px solid var(--dj-line); padding: 24px 0 30px; min-height: 0; }
  .dj-story-steps h3 { margin-top: 28px; }
  .dj-story-bridge { padding: 75px 0 85px; }
}