/* Start custom CSS *//* Star & Stone funnels 250/251 — motion v2 (build_v2.py). Base styles are the FINAL
   state; animations only add "from" frames, so no-support and reduced-motion both
   show the finished page. */
@property --sf26-n { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --sf26-sweep { syntax: '<angle>'; inherits: false; initial-value: 360deg; }

html { scroll-behavior: smooth; }
body.elementor-page-251 { background: #faf6ed; }
#sf26-root { overflow: visible; overflow-x: clip; }

/* ---------- type ---------- */
#sf26-root .sf26-h1 em, #sf26-root .sf26-h2 em { font-style: italic; color: #9c4a0a; }
#sf26-root .sf26-lines > span { display: block; padding: 0 .14em .17em 0; margin-bottom: -.17em; clip-path: inset(-.7em -.7em 0 -.7em); }
#sf26-root .sf26-lines > span > span { display: inline-block; transform-origin: 0 100%; text-wrap: balance; }
#sf26-root .sf26-kicker::before { content: ''; flex: none; width: 34px; height: 1px; background: currentColor; transform-origin: 0 50%; }

/* ---------- buttons + links ---------- */
#sf26-root .sf26-button { position: relative; isolation: isolate; overflow: hidden; transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s cubic-bezier(.2,.8,.2,1), color .3s; }
#sf26-root .sf26-button::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #2a2018; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .6s cubic-bezier(.7,0,.2,1); }
#sf26-root .sf26-button:hover, #sf26-root .sf26-button:focus-visible { transform: translateY(-2px); box-shadow: 0 20px 36px -20px rgba(156,74,10,.8); color: #faf6ed; }
#sf26-root .sf26-button:hover::before, #sf26-root .sf26-button:focus-visible::before { transform: scaleX(1); transform-origin: 0 50%; }
#sf26-root .sf26-button > span, #sf26-root .sf26-link span { display: inline-block; margin-left: .5em; }
#sf26-root .sf26-button:hover > span, #sf26-root .sf26-link:hover span { animation: sf26-arrow .6s cubic-bezier(.2,.8,.2,1); }
@keyframes sf26-arrow { 0% { transform: none; } 42% { transform: translate(.75em,-.75em); opacity: 0; } 43% { transform: translate(-.75em,.75em); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ---------- cards ---------- */
#sf26-cards > .sf26-card { transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s cubic-bezier(.2,.8,.2,1), border-color .4s; }
#sf26-cards > .sf26-card::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; border-radius: 4px 4px 0 0; background: #9c4a0a; transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s cubic-bezier(.7,0,.2,1); }
#sf26-cards > .sf26-card:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -38px rgba(42,32,24,.55); border-color: #d8c3a0; }
#sf26-cards > .sf26-card:hover::before { transform: scaleX(1); }
#sf26-cards > .sf26-card > p:first-child { position: absolute; top: 20px; right: 26px; margin: 0; font-family: Fraunces, serif; font-size: 78px; line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px #cbb999; transition: color .6s, -webkit-text-stroke-color .6s; pointer-events: none; }
#sf26-cards > .sf26-card:hover > p:first-child { color: rgba(156,74,10,.1); -webkit-text-stroke-color: #9c4a0a; }
#sf26-cards-col > .sf26-card { border-top: 1px solid #d9cebc; }
@media (max-width: 767px) { #sf26-cards > .sf26-card > p:first-child { font-size: 54px; top: 14px; right: 16px; } }

/* ---------- section 2 graphics ---------- */
#sf26-g20 { background-image: radial-gradient(circle, rgba(42,32,24,.24) 0 2.3px, transparent 2.9px); background-size: 5% 100%; background-repeat: repeat-x; }
#sf26-g20-dot { background-image: radial-gradient(circle, #9c4a0a 0 4.4px, transparent 5px); animation: sf26-step20 19s steps(20, jump-none) infinite; }
@keyframes sf26-step20 { to { transform: translateX(1900%); } }
#sf26-g-pair > p { animation: sf26-chip 7.5s ease-in-out infinite; }
#sf26-g-pair > p:nth-child(2) { animation-delay: -5s; }
#sf26-g-pair > p:nth-child(3) { animation-delay: -2.5s; }
@keyframes sf26-chip { 0%, 29% { background-color: #2a2018; color: #faf6ed; border-color: #2a2018; } 35%, 100% { background-color: rgba(42,32,24,0); color: #6b5a47; border-color: #b5a58a; } }
#sf26-g-wave > .e-con { animation: sf26-wave 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * 140ms - 3.4s); }
@keyframes sf26-wave { 0%, 100% { background-color: rgba(42,32,24,.16); } 16% { background-color: #9c4a0a; } 40% { background-color: rgba(42,32,24,.16); } }
#sf26-layer-grid > .e-con { position: relative; }
#sf26-layer-grid > .e-con::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #b5a58a; transform-origin: 0 50%; }

/* ---------- marquee ---------- */
#sf26-mq-a, #sf26-mq-b { will-change: transform; }
#sf26-mq-a { animation: sf26-marquee 90s linear infinite; }
#sf26-mq-b { animation: sf26-marquee 70s linear infinite reverse; }
@keyframes sf26-marquee { to { transform: translateX(-50%); } }
#sf26-marquee:hover #sf26-mq-a, #sf26-marquee:hover #sf26-mq-b { animation-play-state: paused; }
#sf26-mq-a > p { margin: 0; flex: none; white-space: nowrap; padding-right: .4em; font-family: Fraunces, serif; font-style: italic; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.1; letter-spacing: -.025em; color: #faf6ed; }
#sf26-mq-a > p span { display: inline-block; padding: 0 .35em; font-style: normal; font-size: .38em; vertical-align: .55em; color: #f1c586; }
#sf26-mq-b > p { margin: 0; flex: none; white-space: nowrap; padding-right: 1.3em; font-family: 'DM Mono', monospace; font-size: 13px; letter-spacing: .32em; color: #9fae91; }
#sf26-mq-b > p span { color: #f1c586; padding: 0 .2em; }

/* ---------- readers + close ---------- */
#sf26-qglyph { margin: 0; font-family: Fraunces, serif; font-size: clamp(200px, 24vw, 340px); line-height: .78; color: transparent; -webkit-text-stroke: 1.3px #cbb999; user-select: none; }
#sf26-honesty { view-timeline-name: --sf26ink; }
@media (min-width: 1025px) { #sf26-fig-col { position: sticky; top: 96px; align-self: flex-start; } }

/* ---------- progress hairline ---------- */
#sf26-progress { transform-origin: 0 50%; }

/* ---------- hero intro (time-based, every browser) ---------- */
@keyframes sf26-fade { from { opacity: 0; } }
@keyframes sf26-rise { from { opacity: 0; translate: 0 28px; filter: blur(7px); } }
@keyframes sf26-line { from { transform: translateY(132%) rotate(4deg); } }
@keyframes sf26-clip { from { clip-path: inset(0 100% 0 0); } }
@keyframes sf26-ember { from { color: #2a2018; } }
@keyframes sf26-pop { from { opacity: 0; scale: .7; } }
@keyframes sf26-draw { from { transform: scaleX(0); } }
#sf26-nav { animation: sf26-fade 1.1s ease-out both; }
#sf26-eyebrow { animation: sf26-clip 1s cubic-bezier(.7,0,.2,1) .1s both; }
#sf26-hero .sf26-lines > span > span { animation: sf26-line 1.25s cubic-bezier(.16,1,.3,1) both; }
#sf26-hero .sf26-lines > span:nth-child(1) > span { animation-delay: .15s; }
#sf26-hero .sf26-lines > span:nth-child(2) > span { animation-delay: .29s; }
#sf26-hero .sf26-lines em { animation: sf26-ember 1s ease-out 1.15s both; }
#sf26-lead { animation: sf26-rise 1.1s cubic-bezier(.16,1,.3,1) .55s both; }
#sf26-cta-box { animation: sf26-rise 1.1s cubic-bezier(.16,1,.3,1) .72s both; }
#sf26-proof > * { animation: sf26-rise 1s cubic-bezier(.16,1,.3,1) both; }
#sf26-proof > :nth-child(1) { animation-delay: 1.05s; }
#sf26-proof > :nth-child(2) { animation-delay: 1.17s; }
#sf26-proof > :nth-child(3) { animation-delay: 1.29s; }

/* ---------- scroll-driven layer ---------- */
@supports (animation-timeline: view()) {
  #sf26-progress { display: block; animation: sf26-draw linear both; animation-timeline: scroll(root block); }

  #sf26-root .sf26-kicker { view-timeline-name: --sf26k; }
  #sf26-root .sf26-kicker::before { animation: sf26-draw cubic-bezier(.65,0,.35,1) both; animation-timeline: --sf26k; animation-range: entry 0% cover 30%; }

  #sf26-root .sf26-h2.sf26-lines > span { view-timeline-name: --sf26ln; }
  #sf26-root .sf26-h2.sf26-lines > span > span { animation: sf26-line cubic-bezier(.2,.7,.2,1) both; animation-timeline: --sf26ln; animation-range: entry 0% cover 42%; }

  #sf26-root .sf26-rise { animation: sf26-rise cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-range: entry 0% cover 30%; }

  #sf26-cards-col > .sf26-card { animation: sf26-rise cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-range: entry 0% cover 28%; }

  #sf26-cards > .sf26-card { animation: sf26-card-l cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  #sf26-cards > .sf26-card:nth-child(even) { animation-name: sf26-card-r; animation-range: entry 14% cover 38%; }
  @keyframes sf26-card-l { from { opacity: 0; translate: 0 80px; rotate: -1.4deg; } }
  @keyframes sf26-card-r { from { opacity: 0; translate: 0 80px; rotate: 1.4deg; } }

  #sf26-layer-grid > .e-con { view-timeline-name: --sf26li; animation: sf26-rise cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  #sf26-layer-grid > .e-con:nth-child(2) { animation-range: entry 8% cover 32%; }
  #sf26-layer-grid > .e-con:nth-child(3) { animation-range: entry 16% cover 36%; }
  #sf26-layer-grid > .e-con:nth-child(4) { animation-range: entry 24% cover 40%; }
  #sf26-layer-grid > .e-con::before { animation: sf26-draw cubic-bezier(.65,0,.35,1) both; animation-timeline: --sf26li; animation-range: entry 10% cover 40%; }

  #sf26-honesty > span { color: transparent; background-image: linear-gradient(#2a2018, #2a2018), linear-gradient(rgba(42,32,24,.2), rgba(42,32,24,.2)); background-repeat: no-repeat; background-size: 100% 100%, 100% 100%; -webkit-background-clip: text; background-clip: text; animation: sf26-ink linear both; animation-timeline: --sf26ink; animation-range: cover 22% cover 58%; }
  @keyframes sf26-ink { from { background-size: 0% 100%, 100% 100%; } }

  #sf26-qglyph { animation: sf26-glyph cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-range: entry 0% cover 48%; }
  @keyframes sf26-glyph { from { opacity: 0; translate: 0 70px; rotate: -12deg; } }

  #sf26-example { view-timeline-name: --sf26ex; animation: sf26-card-x cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-range: entry 0% cover 32%; }
  @keyframes sf26-card-x { from { clip-path: inset(6% 4% round 28px); } }
  #sf26-count-body { view-timeline: --sf26cb block; }
  #sf26-marquee { animation: sf26-band cubic-bezier(.2,.7,.2,1) both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  @keyframes sf26-band { from { clip-path: inset(0 6% round 32px); } }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #sf26-root *, #sf26-root *::before, #sf26-root *::after { animation: none !important; transition: none !important; }
  #sf26-progress { display: none !important; }
}

/* ---------- timing: hero month ---------- */
#sf26-cal { animation: sf26-cal-in 1.3s cubic-bezier(.16,1,.3,1) .12s both; }
@keyframes sf26-cal-in { from { opacity: 0; translate: 0 44px; rotate: 2.5deg; } }
#sf26-cal-grid > :nth-child(-n+7) { animation: sf26-fade .7s ease-out .42s both; }
#sf26-cal-grid > :nth-child(n+8) { animation: sf26-pop .6s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(.55s + var(--i) * 24ms); }
#sf26-cal-grid > #sf26-d4, #sf26-cal-grid > #sf26-d5, #sf26-cal-grid > #sf26-d13, #sf26-cal-grid > #sf26-d17, #sf26-cal-grid > #sf26-d18, #sf26-cal-grid > #sf26-d30 { animation-name: sf26-pop, sf26-light; animation-duration: .6s, .7s; animation-timing-function: cubic-bezier(.16,1,.3,1), ease-out; animation-fill-mode: both; animation-delay: calc(.55s + var(--i) * 24ms), var(--d); }
@keyframes sf26-light { from { background-color: transparent; border-color: transparent; color: #d2d7cc; box-shadow: 0 0 0 0 rgba(241,197,134,0); } 55% { box-shadow: 0 0 0 9px rgba(241,197,134,.22); } }
#sf26-d13::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid #f1c586; pointer-events: none; animation: sf26-halo 2.8s cubic-bezier(.2,.7,.2,1) 3.2s infinite both; }
@keyframes sf26-halo { from { opacity: .95; transform: scale(.94); } to { opacity: 0; transform: scale(1.8); } }
#sf26-waves > .e-con:not(#sf26-scan) { transform-origin: 50% 100%; animation: sf26-bar .9s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(1.2s + var(--i) * 28ms); }
@keyframes sf26-bar { from { transform: scaleY(0); } }
#sf26-scan { opacity: 0; background: linear-gradient(90deg, rgba(241,197,134,0), rgba(241,197,134,.5), rgba(241,197,134,0)); mix-blend-mode: screen; animation: sf26-scan 6.5s ease-in-out 3.3s infinite; }
@keyframes sf26-scan { 0% { transform: translateX(-100%); opacity: 0; } 8% { opacity: 1; } 56% { transform: translateX(720%); opacity: 1; } 62%, 100% { transform: translateX(720%); opacity: 0; } }
#sf26-legend > p span { margin-right: .35em; font-size: 1.2em; }
#sf26-legend > p:nth-child(1) span { color: #f1c586; }
#sf26-legend > p:nth-child(2) span { color: #9fae91; }
#sf26-legend > p:nth-child(3) span { color: transparent; -webkit-text-stroke: 1px #9fae91; }
#sf26-legend { animation: sf26-fade .8s ease-out 3.1s both; }
#sf26-gold { animation: sf26-gold-in 1.1s cubic-bezier(.16,1,.3,1) 3s both; }
@keyframes sf26-gold-in { from { opacity: 0; translate: 0 36px; rotate: 6deg; } }

/* ---------- timing: odometer ---------- */
#sf26-odo-win { font-size: clamp(50px, 6.4vw, 88px); height: 1.12em; }
#sf26-odo-strip { margin: 0; font-family: Fraunces, serif; font-size: 1em; line-height: 1.12; letter-spacing: -.04em; color: #2a2018; white-space: nowrap; }
#sf26-odo-strip strong { font-weight: inherit; color: #9c4a0a; }
#sf26-odo-day { display: none; }

/* ---------- timing: example timeline ---------- */
#sf26-kin { margin: 0; position: relative; font-family: Fraunces, serif; font-size: clamp(84px, 10vw, 136px); line-height: .9; letter-spacing: -.05em; }
#sf26-tl-ticks { background-image: linear-gradient(90deg, transparent calc(50% - .5px), rgba(199,213,190,.45) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)); background-size: calc(100% / 30) 100%; }
#sf26-tl-ticks::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(199,213,190,.3); }
#sf26-tl-13 > .e-con { box-shadow: 0 0 0 5px rgba(241,197,134,.18); }

/* ---------- timing: close ring of names ---------- */
#sf26-cr { width: min(900px, 160vw); translate: -50% -50%; container-type: inline-size; opacity: .5; animation: sf26-spin 280s linear infinite; }
@keyframes sf26-spin { to { transform: rotate(360deg); } }
#sf26-cr > p { position: absolute; left: 50%; top: 50%; margin: 0; line-height: 1; white-space: nowrap; font-family: 'DM Mono', monospace; font-size: clamp(9px, 1.4cqw, 13px); letter-spacing: .22em; color: #8a7a64; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-46cqw); }
#sf26-cr-dot { position: absolute; left: 50%; top: 0; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #9c4a0a; box-shadow: 0 0 0 6px rgba(156,74,10,.14); }

@supports (animation-timeline: view()) {
  #sf26-art { animation: sf26-art-out linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  @keyframes sf26-art-out { to { transform: translateY(-70px) rotate(-2.5deg); opacity: .35; } }

  #sf26-odo { view-timeline: --sf26odo block; }
  #sf26-odo-strip { animation: sf26-odo steps(21, jump-none) both; animation-timeline: --sf26cb; animation-range: cover 18% cover 60%; }
  @keyframes sf26-odo { from { transform: none; } to { transform: translateY(calc(-20 * 1.12em)); } }
  #sf26-odo-day { display: block; font-size: 0 !important; }
  #sf26-odo-day::before { content: '+' counter(sf26o) ' SUNS'; counter-reset: sf26o var(--sf26-n); --sf26-n: 20; font-size: 11px; animation: sf26-oday steps(21, jump-none) both; animation-timeline: --sf26cb; animation-range: cover 18% cover 60%; }
  @media (max-width: 1024px) { #sf26-odo-strip, #sf26-odo-day::before { animation-timeline: --sf26odo; animation-range: cover 25% cover 72%; } }
  @keyframes sf26-oday { from { --sf26-n: 0; } to { --sf26-n: 20; } }

  #sf26-kin { color: transparent !important; }
  #sf26-kin::after { content: counter(sf26k); counter-reset: sf26k var(--sf26-n); --sf26-n: 255; position: absolute; left: 0; top: 0; color: #faf6ed; animation: sf26-kin cubic-bezier(.2,.7,.1,1) both; animation-timeline: --sf26ex; animation-range: entry 15% cover 45%; }
  @keyframes sf26-kin { from { --sf26-n: 0; } }
  #sf26-tl-ticks { animation: sf26-wipe-r cubic-bezier(.65,0,.35,1) both; animation-timeline: --sf26ex; animation-range: entry 30% cover 50%; }
  @keyframes sf26-wipe-r { from { clip-path: inset(0 100% 0 0); } }
  #sf26-tl-5, #sf26-tl-13, #sf26-tl-18 { animation: sf26-mark cubic-bezier(.2,.7,.2,1) both; animation-timeline: --sf26ex; }
  #sf26-tl-5 { animation-range: cover 36% cover 44%; }
  #sf26-tl-13 { animation-range: cover 40% cover 48%; }
  #sf26-tl-18 { animation-range: cover 44% cover 52%; }
  @keyframes sf26-mark { from { opacity: 0; translate: 0 14px; } }

  #sf26-close { view-timeline-name: --sf26close; }
  #sf26-close-art { animation: sf26-ring-in cubic-bezier(.2,.7,.2,1) both; animation-timeline: --sf26close; animation-range: entry 0% cover 50%; }
  @keyframes sf26-ring-in { from { opacity: 0; scale: .8; rotate: -40deg; } }
}

/* Motion UX, October 2026: keep the closing artwork moving while it is visible.
   The section's original early ease-out completed the effect below the fold.
   End at cover 48% so even tall phones can reach the final frame above the footer. */
@supports (animation-timeline: view()) {
  #sf26-ra, #sf26-rb {
    animation-range: entry 30% cover 48%;
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
  }
  #sf26-close-art {
    animation-range: entry 30% cover 48%;
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
  }
  @keyframes sf26-meet-a {
    0% { transform: translate(-50%, -50%) translateX(-92%); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(-50%, -50%) translateX(-24%); opacity: 1; }
  }
  @keyframes sf26-meet-b {
    0% { transform: translate(-50%, -50%) translateX(92%); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(-50%, -50%) translateX(24%); opacity: 1; }
  }
  @keyframes sf26-ring-in {
    0% { opacity: 0; scale: .8; rotate: -40deg; }
    25% { opacity: 1; }
    100% { opacity: 1; scale: 1; rotate: 0deg; }
  }
}
/* Keep the first action legible while the decorative intro continues. */
#sf26-cta-box { animation: sf26-fade .35s ease-out .1s both; }/* End custom CSS */