/* homepage-flow.css : home page story as a click-to-open accordion.
   Headline plays a 1-2 (line, pause, line) when it scrolls into view. Click it to open;
   inside, a banner photo, then sentences arrive one after another, timed to reading pace.
   Nothing pins, nothing disappears. Without JS / with reduced motion it is a plain accordion. */
.sf { --sf-ease: cubic-bezier(.22,.61,.36,1); }
body.gx-home .mission-story.sf h2 .sf-l { display: block; font: inherit; color: inherit; margin: 0; letter-spacing: inherit; }
body.gx-home .mission-story.sf h2 .sf-subline { display: block; margin-top: 14px; }
.sf-body { padding-top: clamp(22px, 3vw, 36px); }
.sf-banner { margin: 0; border-radius: var(--gx-r, 20px); overflow: hidden; box-shadow: var(--gx-raise, 0 12px 30px rgba(60,45,20,.18)); background: #14181f; }
.sf-banner img, .sf-diner img { display: block; width: 100%; height: auto; }
.sf-wrap { width: min(100%, 46rem); margin: 0 auto; padding: clamp(32px, 5vw, 60px) 0 0; }
.sf-final { padding-top: clamp(24px, 3.5vw, 44px); padding-bottom: clamp(16px, 3vw, 36px); }
.sf-group { margin: 0 0 clamp(32px, 5vw, 58px); }
.sf-group > * { margin: 0; }
.sf-group > * + * { margin-top: 1.1em; }
.sf .sf-text, .sf .sf-lead, .sf .sf-big { color: var(--gx-ink, #14202b); }
.sf .sf-lead { font: 500 clamp(1.5rem, 2.6vw, 2.15rem)/1.3 var(--gx-serif, Georgia, serif); }
.sf .sf-text { font: 400 clamp(1.125rem, 1.5vw, 1.3125rem)/1.65 var(--gx-text, "Nunito Sans", system-ui, sans-serif); }
.sf .sf-big { font: 500 clamp(1.9rem, 4vw, 3.1rem)/1.12 var(--gx-serif, Georgia, serif); letter-spacing: -.015em; text-wrap: balance; }
.sf .sf-big em { font-style: italic; color: var(--gx-gold, #87662d); }
.sf .sf-big.sf-turn { color: var(--gx-gold, #87662d); }
.sf .sf-mark { font-weight: 700; background: linear-gradient(var(--gx-gold, #87662d), var(--gx-gold, #87662d)) 0 100% / 100% 2px no-repeat; padding-bottom: 2px; }
.sf-diner { margin: clamp(20px, 3vw, 44px) 0 0; border-radius: var(--gx-r, 20px); overflow: hidden; box-shadow: var(--gx-raise, 0 12px 30px rgba(60,45,20,.18)); aspect-ratio: 2314 / 1274; background: #e8dcc6; }
.sf .sf-peak { font: italic 500 clamp(2.4rem, 6.4vw, 4.8rem)/1.08 var(--gx-serif, Georgia, serif); color: var(--gx-gold, #87662d); letter-spacing: -.02em; text-wrap: balance; }
.sf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6em !important; }
.sf .mission-collapse { margin-top: clamp(20px, 3vw, 36px); }

/* Motion: only when the script is running. Opacity + transform only. */
.sf.is-live .sf-s { opacity: 0; transform: translateY(14px); }
.sf.is-live .sf-s.is-in { opacity: 1; transform: none; transition: opacity 1.1s var(--sf-ease) var(--sf-d, 0s), transform 1.1s var(--sf-ease) var(--sf-d, 0s); }
.sf.is-live .sf-mark { background-size: 0 2px; transition: background-size 1.2s ease var(--sf-md, 1.4s); }
.sf.is-live .sf-group.is-in .sf-mark { background-size: 100% 2px; }
.sf.is-live .sf-diner img, .sf.is-live .sf-banner img { opacity: 0; transition: opacity 1.5s ease; }
.sf.is-live .sf-diner img { transform: scale(1.04); transition: opacity 1.6s ease, transform 2.4s var(--sf-ease); }
.sf.is-live .sf-diner.is-in img, .sf.is-live .sf-banner.is-in img { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sf .sf-s, .sf .sf-mark, .sf .sf-diner img, .sf .sf-banner img { opacity: 1 !important; transform: none !important; transition: none !important; }
}