@import url("./our-product.css");

:root { --process-ink:#12351e; --process-deep:#092514; --process-leaf:#4d972e; --process-lime:#c8f05c; --process-cream:#fffdf7; --process-mist:#edf3e8; }
.process-story-page { background:var(--process-cream); color:var(--process-ink); font-family:"DM Sans",Inter,sans-serif; overflow-x:clip; }
.process-story-page .story-navbar { background:rgba(255,253,247,.88); }.process-wrap { width:min(1240px,calc(100% - 4rem)); margin-inline:auto; }
.process-hero { padding:145px 0 96px; background:linear-gradient(125deg,#edf7e6 0%,#fffdf7 58%,#f8e9ba 100%); overflow:hidden; }.process-hero-grid { display:grid; grid-template-columns:.86fr 1.14fr; gap:clamp(2rem,7vw,8rem); align-items:center; }.process-eyebrow,.process-index { margin:0 0 1.1rem; color:var(--process-leaf); font-size:.68rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }.process-hero h1,.process-clock-heading h2,.chapter-copy h2,.process-outcome h2 { margin:0; color:var(--process-deep); font:700 clamp(3.8rem,7.8vw,7.6rem)/.91 "Playfair Display",Georgia,serif; letter-spacing:-.065em; }.process-hero h1 em,.process-clock-heading em,.chapter-copy h2 em,.process-outcome h2 em { color:var(--process-leaf); font-weight:600; }.process-hero-lede { max-width:26rem; margin:2rem 0 2.7rem; color:#405d48; font-size:1.08rem; line-height:1.7; }.process-down { display:inline-flex; align-items:center; gap:.7rem; color:var(--process-deep); font-size:.82rem; font-weight:800; }.process-down span { display:grid; width:32px; height:32px; place-items:center; border:1px solid var(--process-ink); border-radius:50%; }.process-hero-image { position:relative; margin:0; border-radius:2rem 2rem .35rem 2rem; overflow:hidden; border:1px solid var(--process-ink); box-shadow:1rem 1rem 0 var(--process-lime); transform:rotate(1deg); }.process-hero-image img { display:block; width:100%; height:clamp(340px,45vw,570px); object-fit:cover; }
.process-clock-section { padding:116px 0 108px; }.process-clock-heading { display:grid; grid-template-columns:1.25fr .75fr; gap:5rem; align-items:end; }.process-clock-heading h2 { font-size:clamp(2.65rem,4.5vw,5rem); }.process-clock-heading p { margin:0; color:#536b5a; line-height:1.75; }.process-clock { display:grid; grid-template-columns:repeat(6,1fr); margin:5rem 0 0; padding:0; border-top:1px solid rgba(18,53,30,.24); list-style:none; }.process-clock li { min-height:126px; padding:1.05rem 1rem 0; border-right:1px solid rgba(18,53,30,.18); }.process-clock li:first-child { padding-left:0; }.process-clock li:last-child { border-right:0; }.process-clock b { display:block; color:var(--process-leaf); font-family:"DM Sans","Inter",sans-serif; font-size:clamp(1.55rem,2.4vw,2.5rem); font-weight:700; line-height:1; }.process-clock span { display:block; margin-top:.75rem; color:#536b5a; font-size:.74rem; font-weight:700; line-height:1.35; }
.process-chapters { display:grid; gap:96px; padding-bottom:128px; }.process-chapter { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,8vw,9rem); align-items:center; }.chapter-copy { max-width:520px; }.chapter-copy h2 { font-size:clamp(2.8rem,4.6vw,5.2rem); }.chapter-copy > p:not(.process-index) { margin:1.5rem 0 0; color:#405b49; font-size:1rem; line-height:1.78; }.chapter-image { position:relative; margin:0; overflow:hidden; border-radius:1.55rem 1.55rem 1.55rem .3rem; background:var(--process-mist); }.chapter-image img { display:block; width:100%; height:440px; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1); }.process-chapter:hover .chapter-image img { transform:scale(1.045); }.chapter-image figcaption { position:absolute; right:1rem; bottom:1rem; max-width:13rem; padding:.55rem .72rem; border-radius:.7rem; background:rgba(255,253,247,.9); color:var(--process-ink); font-size:.7rem; font-weight:800; line-height:1.35; }
/* ── AN HONEST NOTE – Elevated ─────────────────────────────── */
.process-oem-note {
  position: relative;
  padding: 108px 0;
  background: var(--process-deep);
  color: #eef7e8;
  overflow: hidden;
  border-top: 2px solid var(--process-lime);
  border-bottom: 2px solid rgba(200,240,92,.25);
}

/* Subtle radial glow from top-left (where the label sits) */
.process-oem-note::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 90% at 18% 50%, rgba(200,240,92,.08) 0%, transparent 70%);
  pointer-events: none;
}

/* Large decorative opening-quote flourish */
.process-oem-note::after {
  content: '\201C';
  position: absolute;
  top: -0.22em;
  left: clamp(4rem, 14%, 11rem);
  font: 700 22rem/1 "Playfair Display", Georgia, serif;
  color: rgba(200,240,92,.055);
  pointer-events: none;
  line-height: 1;
  letter-spacing: -0.04em;
  user-select: none;
}

.process-oem-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: .3fr 1.15fr .55fr;
  gap: 2rem;
  align-items: start;
}

/* "AN HONEST NOTE" label */
.process-oem-inner > span {
  color: var(--process-lime);
  font-size: .65rem;
  letter-spacing: .2em;
  font-weight: 800;
  text-transform: uppercase;
  padding-top: .35rem;
  border-top: 1.5px solid var(--process-lime);
  display: block;
}

/* Blockquote – bigger, stronger, with lime left bar */
.process-oem-inner blockquote {
  margin: 0;
  font: 600 clamp(1.9rem, 3.4vw, 3.65rem)/1.15 "Playfair Display", serif;
  letter-spacing: -.04em;
  color: #f0faee;
  padding-left: 1.8rem;
  border-left: 3px solid var(--process-lime);
  text-shadow: 0 2px 32px rgba(200,240,92,.08);
}

/* Supporting paragraph */
.process-oem-inner p {
  margin: 0;
  color: #9dbea0;
  font-size: .88rem;
  line-height: 1.76;
  padding-top: .35rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.process-outcome { padding:125px 0 138px; text-align:center; background:linear-gradient(180deg,#f4f9ed,#fffdf7); }.process-outcome h2 { font-size:clamp(3.5rem,7vw,7rem); }.outcome-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:4.3rem 0 3.3rem; text-align:left; }.outcome-grid div { min-height:175px; padding:1.4rem; border:1px solid rgba(18,53,30,.16); border-radius:1.1rem; background:#fffefa; box-shadow:4px 4px 0 #dff4ab; }.outcome-grid b { display:block; color:var(--process-leaf); font-family:"DM Sans","Inter",sans-serif; font-size:clamp(2.6rem,4vw,4rem); font-weight:700; line-height:1; }.outcome-grid span { display:block; margin-top:1rem; color:#526b58; font-size:.79rem; font-weight:700; line-height:1.4; }.outcome-final { margin:0; color:var(--process-deep); font:600 clamp(1.35rem,2.2vw,2rem)/1.2 "Playfair Display",serif; }.outcome-final strong { color:var(--process-leaf); }
@media(max-width:800px){ .process-wrap{width:min(100% - 2.4rem,1240px)}.process-hero{padding:112px 0 76px}.process-hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:3.2rem}.process-hero h1{font-size:clamp(3.85rem,17vw,6.3rem)}.process-hero-image{box-shadow:.7rem .7rem 0 var(--process-lime)}.process-hero-image img{height:75vw;max-height:450px}.process-clock-section{padding:82px 0}.process-clock-heading{display:block}.process-clock-heading h2{font-size:clamp(2.7rem,12vw,4.4rem)}.process-clock-heading p{margin-top:1.8rem}.process-clock{grid-template-columns:repeat(3,1fr);margin-top:3rem}.process-clock li{min-height:118px;padding-left:.7rem}.process-clock li:nth-child(3){border-right:0}.process-clock li:nth-child(n+4){border-top:1px solid rgba(18,53,30,.18)}.process-clock b{font-size:1.8rem}.process-chapters{gap:68px;padding-bottom:85px}.process-chapter,.process-chapter:nth-child(even){display:flex;flex-direction:column;gap:2rem;align-items:stretch}.process-chapter:nth-child(even) .chapter-image{order:initial}.process-chapter:nth-child(even) .chapter-copy{order:initial}.chapter-copy h2{font-size:clamp(3rem,13vw,4.6rem)}.chapter-image img{height:72vw;max-height:450px}.process-oem-note{padding:72px 0}.process-oem-inner{display:block}.process-oem-inner blockquote{margin:1.6rem 0;font-size:clamp(1.8rem,8.8vw,3rem)}.process-outcome{padding:86px 0}.process-outcome h2{font-size:clamp(3.8rem,16vw,6rem)}.outcome-grid{grid-template-columns:1fr 1fr;margin:3.1rem 0 2.5rem;gap:.8rem}.outcome-grid div{min-height:150px;padding:1rem}.outcome-grid b{font-size:2.65rem} }
@media(prefers-reduced-motion:no-preference){.process-story-page main section{animation:process-rise .8s both;animation-timeline:view();animation-range:entry 8% cover 30%}@keyframes process-rise{from{opacity:.3;transform:translateY(28px)}to{opacity:1;transform:none}}}