/* ==========================================================================
   MAPLE — #story + #mission
   ========================================================================== */

/* --------------------------------------------------------------------------
   STORY
   -------------------------------------------------------------------------- */

#story{
  background:
    radial-gradient(120% 70% at 88% 8%, rgba(232,161,58,.16), transparent 62%),
    radial-gradient(90% 60% at 4% 96%, rgba(246,199,107,.14), transparent 60%);
}

.story-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(38px,6vw,72px);
  align-items:center;
}
@media (min-width:900px){
  .story-grid{
    grid-template-columns:minmax(0,.88fr) minmax(0,1fr);
    gap:clamp(56px,6vw,92px);
  }
}

/* --- photo ---------------------------------------------------------------- */

.story-media{
  position:relative;
  max-width:520px;
  width:100%;
  margin-inline:auto;
  isolation:isolate;
}

/* soft golden bloom behind the frame */
.story-media::before{
  content:"";
  position:absolute;
  inset:-9% -7% -11% -9%;
  background:radial-gradient(60% 60% at 50% 45%, rgba(232,161,58,.55), rgba(246,199,107,.18) 55%, transparent 74%);
  filter:blur(26px);
  z-index:-2;
  pointer-events:none;
}

/* offset colour block, peeking out from behind */
.story-media::after{
  content:"";
  position:absolute;
  inset:clamp(12px,3vw,22px) calc(-1 * clamp(10px,2.4vw,20px)) calc(-1 * clamp(10px,2.4vw,20px)) clamp(12px,3vw,22px);
  background:linear-gradient(150deg, var(--amber), var(--gold));
  border-radius:38% 62% 44% 56% / 52% 40% 60% 48%;
  z-index:-1;
  pointer-events:none;
}

.story-frame{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  border-end-start-radius:calc(var(--radius) * 3.2);
  border-start-end-radius:calc(var(--radius) * 3.2);
  background:var(--paper-2);
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(232,161,58,.35), 0 24px 60px -30px rgba(156,18,24,.35);
  transform:rotate(-1.2deg);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s cubic-bezier(.2,.7,.2,1);
}
.story-frame img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}
.story-media:hover .story-frame{
  transform:rotate(0deg) translateY(-4px);
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(232,161,58,.55), 0 34px 70px -32px rgba(156,18,24,.42);
}

/* little hand-lettered sticker */
.story-stamp{
  position:absolute;
  right:clamp(-6px,-1vw,0px);
  top:clamp(-10px,-2vw,-4px);
  z-index:2;
  display:grid;
  place-items:center;
  width:clamp(64px,13vw,86px);
  height:clamp(64px,13vw,86px);
  border-radius:999px;
  background:var(--red);
  color:var(--paper);
  box-shadow:0 14px 30px -14px rgba(156,18,24,.85);
  transform:rotate(9deg);
}
.story-stamp em{
  font-family:var(--font-display);
  font-style:normal;
  font-weight:900;
  font-size:clamp(1.15rem,3vw,1.5rem);
  letter-spacing:-.02em;
}

/* --- copy ----------------------------------------------------------------- */

.story-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(16px,2vw,20px);
  min-width:0;
}
.story-copy h2{margin-block:.1em .05em}
.story-copy .lede{max-width:34ch}

.story-p{
  color:var(--ink-2);
  max-width:52ch;
}

/* --- fact cards ----------------------------------------------------------- */

.story-facts{
  list-style:none;
  margin:clamp(8px,1.5vw,14px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
  width:100%;
}
.story-fact{
  display:flex;
  flex-direction:column;
  gap:.28rem;
  padding:.95rem 1.1rem 1.05rem;
  background:rgba(251,244,233,.82);
  border:1px solid rgba(232,161,58,.42);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
  transition:transform .22s ease, border-color .22s ease;
}
.story-fact:hover{transform:translateY(-3px); border-color:var(--gold)}
.story-fact-k{
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--moss);
}
.story-fact-v{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.02rem;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--ink);
}

.story-source{
  font-size:.92rem;
  color:var(--ink-2);
  max-width:46ch;
}
.story-link{
  font-weight:700;
  color:var(--red);
  text-decoration:none;
  border-bottom:2px solid rgba(216,35,42,.3);
  transition:border-color .2s ease, color .2s ease;
  white-space:nowrap;
}
.story-link:hover{color:var(--red-deep); border-bottom-color:var(--red-deep)}


/* --------------------------------------------------------------------------
   MISSION
   -------------------------------------------------------------------------- */

.mission-sec{
  background:
    radial-gradient(90% 60% at 12% -10%, rgba(232,161,58,.22), transparent 58%),
    radial-gradient(70% 60% at 92% 108%, rgba(78,97,54,.28), transparent 60%),
    var(--water);
  color:var(--paper);
  overflow:hidden;
}
.mission-sec h2,
.mission-sec h3{color:var(--paper)}

.mission-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(14px,2vw,18px);
  max-width:min(100%,780px);
}
/* ch on the flex container resolves against the small body font, which crushed
   the display headline into a ~230px column — size it off its own font instead */
.mission-head h2{max-width:15ch}
.mission-eyebrow{color:var(--amber)}
.mission-eyebrow::before{background:var(--amber)}
.mission-lede{
  color:rgba(251,244,233,.72);
  max-width:34ch;
}

/* --- the promise ---------------------------------------------------------- */

.mission-promise{
  margin-top:clamp(38px,5vw,56px);
  padding:clamp(24px,3.4vw,40px) clamp(22px,3.4vw,44px);
  border-radius:var(--radius);
  border:1px solid rgba(232,161,58,.3);
  background:linear-gradient(160deg, rgba(251,244,233,.09), rgba(251,244,233,.03));
  border-inline-start:4px solid var(--gold);
  display:flex;
  flex-direction:column;
  gap:1rem;
  max-width:74ch;
}
.mission-promise-lead{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.28rem,2.7vw,1.85rem);
  line-height:1.24;
  letter-spacing:-.015em;
  color:var(--paper);
}
.mission-promise-lead strong{font-weight:900; color:var(--amber)}
.mission-promise-body{
  color:rgba(251,244,233,.74);
  max-width:60ch;
}

/* --- numbered commitments ------------------------------------------------- */

.mission-steps{
  list-style:none;
  margin:clamp(34px,4.5vw,56px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(14px,2vw,22px);
  counter-reset:none;
}
@media (min-width:820px){
  .mission-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.mission-step{
  position:relative;
  min-width:0;
  padding:clamp(24px,2.8vw,32px) clamp(20px,2.4vw,28px) clamp(26px,3vw,34px);
  border-radius:var(--radius);
  background:rgba(251,244,233,.055);
  border:1px solid rgba(251,244,233,.14);
  overflow:hidden;
  transition:transform .24s ease, background .24s ease, border-color .24s ease;
}
.mission-step::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:3px;
  background:linear-gradient(90deg, var(--gold), var(--red));
  opacity:.0;
  transition:opacity .24s ease;
}
.mission-step:hover{
  transform:translateY(-4px);
  background:rgba(251,244,233,.085);
  border-color:rgba(232,161,58,.4);
}
.mission-step:hover::after{opacity:1}

.mission-num{
  display:block;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(3.2rem,6.4vw,4.6rem);
  line-height:.82;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(232,161,58,.75);
  margin-bottom:.42em;
}
.mission-step:nth-child(2) .mission-num{-webkit-text-stroke-color:rgba(246,199,107,.8)}
.mission-step:nth-child(3) .mission-num{-webkit-text-stroke-color:rgba(216,35,42,.85)}
@supports not (-webkit-text-stroke:1px red){
  .mission-num{color:rgba(232,161,58,.55)}
}

.mission-step h3{margin-bottom:.5rem}
.mission-step p{
  color:rgba(251,244,233,.7);
  font-size:.98rem;
}

/* --- disclaimer ----------------------------------------------------------- */

.mission-disclaimer{
  margin-top:clamp(34px,4.5vw,56px);
  padding:clamp(26px,3.4vw,44px);
  border-radius:var(--radius);
  background:var(--paper);
  color:var(--ink-2);
  box-shadow:var(--shadow-lg);
  border-top:5px solid var(--red);
}
.mission-disclaimer-title{
  font-family:var(--font-display);
  font-weight:900;
  letter-spacing:-.02em;
  color:var(--ink)!important;
  margin-bottom:clamp(14px,2vw,20px);
  max-width:22ch;
}
.mission-disclaimer-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(14px,2vw,22px);
}
@media (min-width:880px){
  .mission-disclaimer-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.mission-disclaimer-list li{
  min-width:0;
  font-size:.95rem;
  line-height:1.55;
  padding-top:.85rem;
  border-top:1px solid rgba(22,13,7,.14);
}
.mission-disclaimer-list strong{
  display:block;
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.02rem;
  letter-spacing:-.01em;
  color:var(--red-deep);
  margin-bottom:.3rem;
}

/* --- staggered reveal ----------------------------------------------------- */

@media (prefers-reduced-motion:no-preference){
  .mission-steps.reveal.in .mission-step{animation:mission-rise .6s cubic-bezier(.2,.7,.2,1) backwards}
  .mission-steps.reveal.in .mission-step:nth-child(2){animation-delay:.09s}
  .mission-steps.reveal.in .mission-step:nth-child(3){animation-delay:.18s}
}
@keyframes mission-rise{
  from{opacity:0; transform:translateY(16px)}
  to{opacity:1; transform:none}
}