/* OXF-STORY: /pathfinders-for-hope-founder/ (post 15) as a chaptered founder's story. Own layout, homepage theme (ox.css tokens: --ink --navy --green --green-dk --green-hi --hot --stone --line --muted --link --on-dk --r --r-lg --sh --sh-lg --g). Needs ox.css loaded first. Every selector scoped under .oxf. No JS: everything is visible without scripts. 19 Oct 2026, LOCAL ONLY. */
.ox.oxf{background:#fff;color:var(--navy);--oxf-top:32px;--oxf-disp:"Epilogue",system-ui,-apple-system,"Segoe UI",sans-serif;--oxf-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif}
.oxf *{box-sizing:border-box}
/* site font lock (pfh-fonts) forces Inter on p/li/a/span/b and weight 800 + no uppercase on headings: win it for the display pieces only */
#ox.oxf.ox :is(.oxf-mark b,.oxf-route b,.oxf-big,.oxf-pull,.oxf-pull span,.oxf-quote,.oxf-quote span,.oxf-beat li,.oxf-stats b,.oxf-sign b){font-family:var(--oxf-disp)!important}
#ox.oxf.ox :is(.oxf-h1,.oxf-h2){font-family:var(--oxf-disp)!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:-.02em!important}
#ox.oxf.ox :is(.oxf-h1,.oxf-h2) .ox-chip{font-weight:inherit!important;letter-spacing:inherit}
.oxf .ox-kick{font:500 14px/1.3 var(--oxf-body);letter-spacing:.12em;text-transform:uppercase;color:var(--green-dk);margin:0 0 16px}

/* ---------- opener: portrait + title, then the route ---------- */
.oxf-open{position:relative;isolation:isolate;overflow:clip;margin:8px clamp(8px,1.2vw,16px) 0;padding:clamp(32px,4.4vw,72px) var(--g) clamp(26px,3vw,44px);border-radius:var(--r-lg);background:radial-gradient(50% 45% at 100% 0,rgba(63,191,132,.14),transparent 70%),radial-gradient(40% 40% at 0 100%,rgba(224,122,47,.1),transparent 70%),linear-gradient(180deg,#fff,var(--stone))}
.oxf-open__in{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.oxf .oxf-h1{margin:0 0 22px;font-size:clamp(40px,4.6vw,64px);line-height:1.02;color:var(--ink)}
.oxf .oxf-open__sub{margin:0 0 30px;max-width:30ch;font:500 clamp(19px,1.6vw,23px)/1.5 var(--oxf-body);color:var(--navy)}
.oxf .oxf-sign{display:flex;flex-direction:column;gap:2px;margin:0;padding-top:18px;position:relative}
.oxf .oxf-sign::before{content:"";position:absolute;left:0;top:0;width:26px;height:4px;background:var(--hot)}
.oxf .oxf-sign b{font-size:20px;font-weight:800;line-height:1.25;color:var(--ink)}
.oxf .oxf-sign span{font:500 15px/1.4 var(--oxf-body);color:var(--muted)}
.oxf-open__fig{position:relative;margin:0;z-index:0}
.oxf-open__fig::before{content:"";position:absolute;inset:0;z-index:-1;transform:translate(14px,14px);border-radius:var(--r-lg);background:linear-gradient(140deg,var(--hot),var(--green-hi))}
.oxf-open__fig img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:62% 30%;border-radius:var(--r-lg);box-shadow:var(--sh-lg)}

.oxf-route{max-width:1120px;margin:clamp(34px,4vw,56px) auto 0}
.oxf-route ol{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.oxf-route ol::before{content:"";position:absolute;left:10%;right:10%;top:11px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--hot),var(--green-hi))}
.oxf-route li{margin:0;padding:0;text-align:center}
.oxf .oxf-route a{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:44px;padding:34px 6px 6px;color:var(--ink);text-decoration:none;border-radius:var(--r-sm)}
.oxf-route a::before{content:"";position:absolute;left:50%;top:2px;width:21px;height:21px;margin-left:-10.5px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 4px var(--green-dk),0 0 0 4px var(--stone)}
.oxf-route li:first-child a::before{box-shadow:inset 0 0 0 4px var(--hot),0 0 0 4px var(--stone)}
.oxf-route li:last-child a::before{background:var(--green-hi);box-shadow:inset 0 0 0 4px var(--green-dk),0 0 0 4px var(--stone)}
.oxf .oxf-route b{font-size:15px;font-weight:800;line-height:1.2;text-transform:uppercase;letter-spacing:.01em}
.oxf .oxf-route span{font:500 13.5px/1.3 var(--oxf-body);color:var(--muted)}
.oxf .oxf-route a:hover b{color:var(--link)}
.oxf .oxf-route a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* ---------- the story: a route line down the left, a place marker per chapter ---------- */
.oxf-story{position:relative;width:min(100% - 2*var(--g),1080px);margin:0 auto;padding:clamp(20px,3vw,40px) 0 clamp(56px,6vw,88px);counter-reset:oxf}
.oxf-story::before{content:"";position:absolute;left:10px;top:calc(clamp(20px,3vw,40px) + 56px + 30px);bottom:160px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--hot),var(--green-hi) 80%)}
.oxf-ch{position:relative;display:grid;grid-template-columns:230px minmax(0,1fr);column-gap:clamp(32px,4vw,64px);padding:56px 0;scroll-margin-top:var(--oxf-top)}
.oxf .oxf-mark{position:sticky;top:var(--oxf-top);align-self:start;display:flex;flex-direction:column;gap:2px;margin:0;padding-left:46px;counter-increment:oxf}
.oxf-mark::before{content:"";position:absolute;left:1px;top:20px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 4px var(--green-dk),0 0 0 5px #fff}
.oxf #west .oxf-mark::before{box-shadow:inset 0 0 0 4px var(--hot),0 0 0 5px #fff}
.oxf #vallejo .oxf-mark::before{background:var(--green-hi)}
.oxf .oxf-mark b{font-size:20px;font-weight:800;line-height:1.2;text-transform:uppercase;color:var(--ink)}
.oxf .oxf-mark b::before{content:counter(oxf,decimal-leading-zero);display:block;margin-bottom:6px;font:700 13px/1 var(--oxf-body);letter-spacing:.14em;color:var(--link)}
.oxf .oxf-mark span{font:500 15px/1.4 var(--oxf-body);color:var(--muted)}
.oxf-ch__body{max-width:700px}
.oxf .oxf-h2{margin:0 0 22px;max-width:22ch;font-size:clamp(28px,3vw,42px);line-height:1.1;color:var(--ink)}
.oxf-ch__body>p{margin:0 0 18px;max-width:62ch;font:400 19px/1.68 var(--oxf-body);color:var(--navy)}
.oxf .oxf-ch a:not(.ox-btn){color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.oxf .oxf-ch a:not(.ox-btn):hover{text-decoration-thickness:2px}
.oxf .oxf-big{margin:30px 0 0;padding:4px 0 4px 22px;border-left:4px solid var(--hot);font-size:clamp(20px,1.8vw,24px);font-weight:800;line-height:1.3;text-transform:uppercase;color:var(--ink)}
.oxf .oxf-help{margin:26px 0 0;padding:18px 22px;border-radius:var(--r);background:var(--stone);box-shadow:inset 4px 0 0 var(--green);font:500 17px/1.6 var(--oxf-body);color:var(--navy)}
.oxf .oxf-help a{font-weight:700}

/* "She did not..." - the one dark beat, with the homepage's brand stripe */
.oxf-beat{position:relative;overflow:clip;margin:34px 0 0;padding:clamp(30px,3.4vw,46px) clamp(24px,3.4vw,46px) clamp(28px,3vw,40px);border-radius:var(--r-lg);color:#fff;background:radial-gradient(60% 90% at 100% 100%,rgba(63,191,132,.16),transparent 60%),linear-gradient(160deg,var(--navy),var(--ink) 70%);box-shadow:var(--sh-lg)}
.oxf-beat::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(100deg,var(--green) 0 31%,var(--green-hi) 31% 44%,var(--hot) 44% 61%,var(--navy) 61% 100%)}
.oxf .oxf-beat__l{list-style:none;margin:0;padding:0;counter-reset:oxfb}
.oxf .oxf-beat li{position:relative;margin:0;padding:14px 0 14px 46px;border-bottom:1px solid rgba(255,255,255,.12);counter-increment:oxfb;font-size:clamp(20px,2vw,27px);font-weight:800;line-height:1.25;text-transform:uppercase;color:var(--on-dk)}
.oxf .oxf-beat li::before{content:counter(oxfb,decimal-leading-zero);position:absolute;left:0;top:50%;transform:translateY(-50%);font:700 14px/1 var(--oxf-body);letter-spacing:.1em;color:var(--hot)}
.oxf .oxf-beat li:last-child{color:#fff;border-bottom:0}
.oxf .oxf-beat li:last-child::before{color:var(--green-hi)}
.oxf .oxf-pull{margin:22px 0 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);font-size:clamp(19px,1.7vw,23px);font-weight:800;line-height:1.3;text-transform:uppercase;color:#fff}
#ox.oxf.ox .oxf-pull .ox-chip,#ox.oxf.ox .oxf-pull .ox-chip *{color:var(--green-hi)!important;font-weight:inherit!important}

/* the pull quote between chapters: the route pauses on a soft stone panel */
.oxf-ch--quote{display:block;padding:24px 0}
.oxf .oxf-quote{position:relative;z-index:1;margin:0;padding:clamp(40px,5vw,72px) clamp(24px,5vw,72px);border-radius:var(--r-lg);text-align:center;background:radial-gradient(50% 60% at 0 0,rgba(224,122,47,.12),transparent 70%),radial-gradient(45% 60% at 100% 100%,rgba(63,191,132,.15),transparent 70%),var(--stone);font-size:clamp(26px,3vw,42px);font-weight:900;line-height:1.12;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink)}
.oxf .oxf-quote::before{content:"\201C";display:block;height:.55em;margin:0 auto 10px;font:900 clamp(72px,7vw,104px)/1 var(--oxf-disp);color:var(--hot)}
#ox.oxf.ox .oxf-quote .ox-chip{font-weight:inherit!important}

/* survey numbers */
.oxf .oxf-stats{list-style:none;margin:30px 0 30px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.oxf .oxf-stats li{position:relative;margin:0;padding:30px 20px 22px;border-radius:var(--r);background:#fff;box-shadow:var(--sh),inset 0 0 0 1px var(--line)}
.oxf .oxf-stats li::before{content:"";position:absolute;left:20px;top:0;width:26px;height:4px;background:var(--hot)}
.oxf .oxf-stats b{display:block;font-size:clamp(40px,4vw,56px);font-weight:900;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.oxf .oxf-stats span{display:block;margin-top:10px;font:500 15.5px/1.45 var(--oxf-body);color:var(--muted)}
.oxf .oxf-stats li:last-child{background:linear-gradient(160deg,var(--navy),var(--ink));box-shadow:var(--sh)}
.oxf .oxf-stats li:last-child::before{background:var(--green-hi)}
.oxf .oxf-stats li:last-child b{color:var(--green-hi)}
.oxf .oxf-stats li:last-child span{color:var(--on-dk)}

/* close: where the route arrives */
.oxf-ch--end{display:block;padding-bottom:0}
.oxf-end{position:relative;z-index:1;overflow:clip;padding:clamp(34px,4.4vw,60px) clamp(24px,4.4vw,60px);border-radius:var(--r-lg);color:#E6E9EE;background:radial-gradient(55% 80% at 0 0,rgba(224,122,47,.2),transparent 60%),radial-gradient(50% 80% at 100% 100%,rgba(63,191,132,.22),transparent 60%),linear-gradient(160deg,var(--navy),var(--ink) 65%);box-shadow:var(--sh-lg)}
.oxf-end::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(100deg,var(--green) 0 31%,var(--green-hi) 31% 44%,var(--hot) 44% 61%,var(--navy) 61% 100%)}
.oxf .oxf-end__k{display:inline-block;margin:0 0 16px;padding:7px 14px 6px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);font:700 14px/1.2 var(--oxf-body);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.oxf .oxf-end .oxf-h2{color:#fff;max-width:none}
#ox.oxf.ox .oxf-end .ox-chip,#ox.oxf.ox .oxf-end .ox-chip *{color:var(--green-hi)!important}
.oxf .oxf-end p:not(.oxf-end__k){margin:0;max-width:60ch;font:400 19px/1.65 var(--oxf-body);color:#E6E9EE}
.oxf .oxf-ch .oxf-end p a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.oxf-end__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.oxf .oxf-end .ox-btn{margin:0;min-height:48px;width:auto;border-radius:12px;text-decoration:none}
.oxf .oxf-end .ox-btn--hot{background:var(--hot);color:var(--ink)!important}
.oxf .oxf-end .ox-btn--white{background:#fff;color:var(--ink)!important}
.oxf .oxf-end .ox-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

@media (prefers-reduced-motion:no-preference){
  .oxf .oxf-route b,.oxf .oxf-end .ox-btn{transition:color .2s,background-color .2s}
  html:has(.oxf){scroll-behavior:smooth}
}

/* ---------- tablet / phone ---------- */
@media (max-width:899px){
  .oxf-open{padding:18px 18px 26px}
  .oxf-open__in{grid-template-columns:minmax(0,1fr);gap:26px}
  .oxf-open__fig{order:-1}
  .oxf-open__fig::before{transform:translate(8px,8px)}
  .oxf-open__fig img{aspect-ratio:1/1;object-position:60% 30%;border-radius:22px}
  .oxf .oxf-h1{font-size:clamp(36px,10vw,52px);margin-bottom:16px}
  .oxf .oxf-open__sub{margin-bottom:22px}
  .oxf-route{margin-top:26px}
  .oxf-route ol{grid-template-columns:minmax(0,1fr)}
  .oxf-route ol::before{left:10px;right:auto;top:22px;bottom:22px;width:3px;height:auto;background:linear-gradient(180deg,var(--hot),var(--green-hi))}
  .oxf-route li{text-align:left}
  .oxf .oxf-route a{flex-direction:row;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:10px 6px 10px 38px}
  .oxf-route a::before{left:1px;top:50%;margin:-10.5px 0 0}
  .oxf-story::before{top:calc(clamp(20px,3vw,40px) + 40px + 30px);bottom:140px}
  .oxf-ch{grid-template-columns:minmax(0,1fr);padding:40px 0 40px 42px}
  .oxf .oxf-mark{position:relative;top:auto;margin:0 0 18px -42px;padding-left:42px}
  .oxf-ch--quote,.oxf-ch--end{padding-left:0}
  .oxf-ch--quote{padding-block:16px}
  .oxf .oxf-h2{font-size:clamp(26px,7.4vw,34px)}
  .oxf-ch__body>p{font-size:18px}
  .oxf .oxf-stats{grid-template-columns:minmax(0,1fr);gap:12px}
  .oxf .oxf-stats li{padding:24px 18px 18px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:18px}
  .oxf .oxf-stats span{margin-top:0}
  .oxf .oxf-beat li{padding-left:38px}
  .oxf-end__acts .ox-btn{flex:1 1 100%}
}
@media (max-width:420px){
  .oxf .oxf-stats b{font-size:36px;min-width:2.6ch}
  .oxf .oxf-end .ox-btn{font-size:16px;padding:16px 14px}
}

/* OXF-HDR: hide header photo gradient on the light founder opener (this page only) */
body:has(#ox.oxf) .oxk-hdr::before{opacity:0!important}

/* ===== OXF-GLORY 1 (19 Oct 2026, LOCAL): dark hero, bigger chapters, graphics from the page's own words. Markup, words and the chapter timeline are unchanged. All motion is scroll-linked, gated on @supports + no-preference, finished state is the default. ===== */
:root{--oxf-deep:#0B1729}
/* hero goes dark */
.oxf-open{background:radial-gradient(55% 60% at 100% 0,rgba(63,191,132,.28),transparent 65%),radial-gradient(45% 55% at 0 100%,rgba(224,122,47,.26),transparent 65%),linear-gradient(165deg,var(--navy),var(--oxf-deep) 75%);color:#fff;padding-top:clamp(40px,5.4vw,88px)}
.oxf-open::before{content:"9" / "";position:absolute;z-index:-1;left:clamp(-40px,-2vw,0px);top:50%;transform:translateY(-52%);font:900 clamp(300px,42vw,640px)/.8 var(--oxf-disp);letter-spacing:-.06em;color:rgba(255,255,255,.05);pointer-events:none}
.oxf-open::after{content:"";position:absolute;z-index:-1;inset:0;background:repeating-linear-gradient(115deg,transparent 0 46px,rgba(255,255,255,.025) 46px 47px);pointer-events:none}
.oxf-open .ox-kick{color:var(--green-hi)}
.oxf .oxf-open .oxf-h1{color:#fff;font-size:clamp(46px,6.6vw,96px);line-height:.96}
#ox.oxf.ox .oxf-open .ox-chip,#ox.oxf.ox .oxf-open .ox-chip *{color:var(--green-hi)!important}
.oxf .oxf-open .oxf-open__sub{color:#E6E9EE;max-width:26ch;font-size:clamp(20px,1.9vw,27px);font-weight:600}
#ox.oxf.ox .oxf-open .oxf-sign b{color:#fff}
.oxf .oxf-open .oxf-sign span{color:#B9C4D4}
.oxf-open__fig::before{transform:translate(18px,18px);background:linear-gradient(140deg,var(--hot),var(--green-hi));filter:saturate(1.1)}
.oxf-open__fig::after{content:"";position:absolute;inset:-26px;z-index:-2;border-radius:50%;background:radial-gradient(circle,rgba(63,191,132,.35),transparent 62%);filter:blur(24px)}
.oxf-open__fig img{box-shadow:0 30px 70px rgba(0,0,0,.5)}
.oxf .oxf-route a{color:#fff}
.oxf .oxf-route span{color:#B9C4D4}
.oxf-route a::before{box-shadow:inset 0 0 0 4px var(--green-hi),0 0 0 5px var(--oxf-deep),0 0 22px rgba(63,191,132,.55)}
.oxf-route li:first-child a::before{box-shadow:inset 0 0 0 4px var(--hot),0 0 0 5px var(--oxf-deep),0 0 22px rgba(224,122,47,.6)}
.oxf-route li:last-child a::before{box-shadow:inset 0 0 0 4px var(--green-dk),0 0 0 5px var(--oxf-deep),0 0 26px rgba(63,191,132,.8)}
.oxf .oxf-route a:hover b{color:var(--green-hi)}
.oxf .oxf-route a:focus-visible{outline-color:#fff}
.oxf-route ol::before{height:4px;top:10.5px;box-shadow:0 0 18px rgba(63,191,132,.45)}

/* chapters: ghost numerals, larger headings, glowing place dots */
.oxf-ch__body{position:relative;max-width:720px}
.oxf-ch__body::before{content:counter(oxf,decimal-leading-zero) / "";position:absolute;z-index:0;right:-8px;top:-46px;font:900 clamp(120px,15vw,210px)/1 var(--oxf-disp);letter-spacing:-.05em;color:rgba(20,35,63,.055);pointer-events:none}
.oxf .oxf-h2{font-size:clamp(32px,4.2vw,60px);line-height:1.04;max-width:16ch}
.oxf-ch__body>p{font-size:20px}
.oxf .oxf-mark b{font-size:22px}
.oxf-mark::before{top:22px;box-shadow:inset 0 0 0 4px var(--green-dk),0 0 0 5px #fff,0 0 0 11px rgba(63,191,132,.22)}
.oxf #west .oxf-mark::before{box-shadow:inset 0 0 0 4px var(--hot),0 0 0 5px #fff,0 0 0 11px rgba(224,122,47,.25)}
.oxf #vallejo .oxf-mark::before{box-shadow:inset 0 0 0 4px var(--green-dk),0 0 0 5px #fff,0 0 0 11px rgba(63,191,132,.4)}
.oxf-ch{padding:72px 0}
#oceanside .oxf-h2{font-size:clamp(64px,10vw,150px);line-height:.9;max-width:none;letter-spacing:-.04em!important}
.oxf .oxf-big{margin-top:34px;padding:22px 26px;border-left:0;border-radius:var(--r);background:linear-gradient(160deg,var(--navy),var(--oxf-deep));color:#fff;box-shadow:var(--sh-lg),inset 6px 0 0 var(--hot);font-size:clamp(21px,2.1vw,28px)}
#ox.oxf.ox .oxf-big{color:#fff}
.oxf .oxf-help{border-radius:var(--r);box-shadow:inset 6px 0 0 var(--green-hi);font-size:18px}
.oxf-beat{box-shadow:0 30px 70px rgba(11,23,41,.35)}
.oxf .oxf-beat li{font-size:clamp(21px,2.3vw,31px)}
.oxf .oxf-pull{font-size:clamp(20px,2vw,27px)}

/* the quote: four organizations, four open rings (none knew) */
.oxf .oxf-quote{background:radial-gradient(55% 70% at 0 0,rgba(224,122,47,.32),transparent 70%),radial-gradient(50% 70% at 100% 100%,rgba(63,191,132,.3),transparent 70%),linear-gradient(160deg,var(--navy),var(--oxf-deep));color:#fff;font-size:clamp(28px,3.6vw,52px);box-shadow:var(--sh-lg);padding-bottom:clamp(64px,7vw,96px)}
#ox.oxf.ox .oxf-quote{color:#fff}
#ox.oxf.ox .oxf-quote .ox-chip,#ox.oxf.ox .oxf-quote .ox-chip *{color:var(--green-hi)!important}
.oxf .oxf-quote::after{content:"";position:absolute;left:50%;bottom:clamp(24px,3vw,40px);width:176px;height:32px;margin-left:-88px;background:radial-gradient(circle at 16px 16px,transparent 9px,rgba(255,255,255,.7) 10px 12px,transparent 13px) 0 0/44px 32px repeat-x}

/* survey numbers: 3 in 4 as four dots, the zero as a glow */
.oxf .oxf-stats li{padding-top:36px}
.oxf .oxf-stats b{font-size:clamp(48px,5vw,72px)}
.oxf .oxf-stats li:nth-child(2)::after{content:"";position:absolute;right:26px;top:22px;width:16px;height:16px;box-sizing:border-box;border-radius:50%;border:3px solid var(--hot);background:#fff;box-shadow:-22px 0 0 0 var(--hot),-44px 0 0 0 var(--hot),-66px 0 0 0 var(--hot)}
.oxf .oxf-stats li:last-child{box-shadow:0 20px 50px rgba(11,23,41,.3),0 0 0 1px rgba(63,191,132,.4);background:radial-gradient(70% 70% at 50% 0,rgba(63,191,132,.28),transparent 70%),linear-gradient(160deg,var(--navy),var(--oxf-deep))}
.oxf .oxf-stats li:last-child b{text-shadow:0 0 28px rgba(63,191,132,.55)}

/* the end: the route arrives (concentric rings around a lit dot) */
.oxf-end{padding:clamp(44px,5.6vw,80px) clamp(26px,5vw,76px)}
.oxf-end>*{position:relative;z-index:1}
.oxf-end::after{content:"";position:absolute;z-index:0;right:clamp(-110px,-6vw,-40px);bottom:clamp(-110px,-6vw,-40px);width:clamp(260px,32vw,420px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--green-hi) 0 12px,transparent 13px);box-shadow:0 0 0 38px rgba(63,191,132,.09),0 0 0 78px rgba(63,191,132,.06),0 0 0 118px rgba(63,191,132,.035);pointer-events:none}
.oxf .oxf-end .oxf-h2{font-size:clamp(34px,4.6vw,68px);max-width:14ch}
.oxf .oxf-end .ox-btn{min-height:54px;font-size:17px}

/* scroll-linked motion: the route line fills as you read; headings rise in. Unsupported or reduced motion = the finished page. */
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .oxf-story::after{content:"";position:absolute;left:10px;top:calc(clamp(20px,3vw,40px) + 56px + 30px);bottom:160px;width:3px;border-radius:3px;background:var(--green-hi);box-shadow:0 0 12px rgba(63,191,132,.8);transform-origin:top;animation:oxfFill linear both;animation-timeline:view(block);animation-range:entry 12% exit 70%;pointer-events:none}
  .oxf .oxf-h2,.oxf .oxf-big,.oxf .oxf-stats li,.oxf-beat,.oxf .oxf-quote{animation:oxfRise linear both;animation-timeline:view();animation-range:entry 0% entry 42%}
  @keyframes oxfFill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  @keyframes oxfRise{from{transform:translateY(34px);opacity:.25}to{transform:none;opacity:1}}
}}

@media (max-width:899px){
  .oxf-open::before{font-size:clamp(240px,70vw,380px);top:34%}
  .oxf .oxf-open .oxf-h1{font-size:clamp(42px,12.5vw,64px)}
  .oxf-route ol::before{height:auto;top:22px;box-shadow:0 0 14px rgba(63,191,132,.4)}
  .oxf-ch{padding:48px 0 48px 42px}
  .oxf-ch__body::before{font-size:130px;top:-34px;right:-4px}
  .oxf .oxf-h2{font-size:clamp(30px,8.6vw,42px)}
  #oceanside .oxf-h2{font-size:clamp(64px,22vw,110px)}
  .oxf-ch__body>p{font-size:18px}
  .oxf .oxf-stats li:nth-child(2)::after{top:auto;bottom:16px;right:18px}
  .oxf .oxf-end .oxf-h2{font-size:clamp(30px,8.6vw,44px)}
  .oxf-end::after{opacity:.7}
}
.oxf-ch__body>*{position:relative;z-index:1}
#oceanside .oxf-ch__body::before{display:none}
.oxf-ch__body::before{top:-62px;color:rgba(20,35,63,.045)}
.oxf .oxf-stats li{padding-top:50px}
.oxf .oxf-open .oxf-open__sub{max-width:30ch}
@media (max-width:899px){.oxf .oxf-stats li{padding-top:24px}.oxf-ch__body::before{top:-40px}}
@media (max-width:899px){.oxf .oxf-stats li:nth-child(2){padding-bottom:40px}.oxf .oxf-stats li:nth-child(2)::after{top:auto;bottom:14px;right:auto;left:86px}}