@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(https://pathfindersforhope.org/wp-content/uploads/pfh-hox/fonts/barlow-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(https://pathfindersforhope.org/wp-content/uploads/pfh-hox/fonts/barlow-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(https://pathfindersforhope.org/wp-content/uploads/pfh-hox/fonts/barlow-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(https://pathfindersforhope.org/wp-content/uploads/pfh-hox/fonts/barlowcond-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(https://pathfindersforhope.org/wp-content/uploads/pfh-hox/fonts/barlowcond-800.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Epilogue";font-style:normal;font-weight:400 900;font-display:swap;src:url(https://pathfindersforhope.org/wp-content/uploads/pfh-hox/fonts/epilogue-var.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Pathfinders for Hope homepage: oxfam.ca layout in the PFH brand. All rules scoped under .ox (#ox). Light only.
   Tokens: navy-deep #0B1729 (Oxfam black), orange #E07A2F with navy-deep text (Oxfam pink CTA, 5.15:1),
   green #2E7D5B chip with white text (5.0:1), canvas #FBF8F3, stone #EFEAE1. Radius 0, no shadows. */
/* Fonts: Barlow Condensed 700/800 (display) + Barlow 400/500/700 (body), Marco picked option B 16 Oct 2026.
   Preview loads them from Google Fonts (index.html); the live install should self-host the same files. */
/* r5: metric-matched fallbacks so the Barlow swap on a cold first visit does not reflow the hero (CLS 0.152 -> see handoff).
   size-adjust = Barlow width / Arial width, measured in Chrome 16 Oct 2026 on the page's own headings and hero copy. */
@font-face{font-family:"Barlow Condensed Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:700 800;size-adjust:69.3%}
@font-face{font-family:"Barlow Fallback";src:local("Arial"),local("ArialMT");font-weight:400 500;size-adjust:97.4%}
@font-face{font-family:"Barlow Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:700;size-adjust:92.4%}

.ox{--ink:#0B1729;--navy:#14233F;--hot:#E07A2F;--hot-hi:#EE8C45;--green:#2E7D5B;--green-dk:#1E5C42;--green-hi:#3FBF84;--mist:#DDE7E4;--canvas:#FBF8F3;--stone:#EFEAE1;--line:#D6D2CA;--muted:#5F646D;--link:#A9501A;--soft:#F2B183;--on-dk:#C3CAD4;--on-dk2:#AEB6C2;
  --g:clamp(20px,5.6vw,80px);--pad:clamp(52px,5.6vw,84px);--frame:16px;
  --disp:"Barlow Condensed","Barlow Condensed Fallback","Arial Narrow",sans-serif;--body:"Barlow","Barlow Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);--punch:cubic-bezier(.34,1.56,.64,1);
  font:400 18px/1.6 var(--body);color:var(--navy);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:clip}
.ox *,.ox *::before,.ox *::after{box-sizing:border-box}
.ox img{display:block;max-width:100%;height:auto}
.ox :where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote,pre,table){margin:0;padding:0}
.ox :where(ul,ol){list-style:none}
.ox :where(p + p){margin-top:.9em}
.ox [hidden]{display:none!important}
.ox a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.ox a:hover{text-decoration-thickness:2px}
.ox button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;border-radius:0}
.ox :focus-visible{outline:3px solid var(--hot);outline-offset:3px}
.ox ::selection{background:var(--hot);color:var(--ink)}
.ox-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ox-skip{position:absolute;left:12px;top:-80px;z-index:300;background:var(--hot);color:var(--ink)!important;padding:12px 18px;font-weight:700;text-decoration:none!important}
.ox-skip:focus{top:12px}
.ox-wrap{width:min(100% - 2*var(--g),1266px);margin-inline:auto}

/* ---------- type ---------- */
.ox-h1,.ox-h2,.ox-h3,.ox-h4,.ox-big,.ox-quote p,.ox-closer,.ox-sign p{font-family:var(--disp);font-weight:800;text-transform:uppercase;color:var(--ink);text-wrap:balance}
.ox-h1{font-size:clamp(42px,6.4vw,80px);line-height:.96;letter-spacing:-.005em}
.ox-h2{font-size:clamp(34px,4.2vw,64px);line-height:1}
.ox-h3{font-size:clamp(24px,2.3vw,34px);line-height:1.04}
.ox-h4{font-size:clamp(21px,1.7vw,25px);line-height:1.08}
.ox-chip{color:#fff;padding:0 .12em;background:linear-gradient(var(--green),var(--green)) 0 64%/100% .89em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ox-chip--ink{background-image:linear-gradient(var(--ink),var(--ink))}
.ox-nb{white-space:nowrap}
.ox-kick{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font:700 17px/1.2 var(--disp);letter-spacing:.03em;text-transform:uppercase;color:var(--green-dk);margin-bottom:14px}
.ox-kick::before{content:"";flex:none;width:26px;height:4px;background:var(--hot)}
.ox-center .ox-kick,.ox-kick.ox-center{justify-content:center}
.ox-kick span{font:500 14px/1.3 var(--body);letter-spacing:.02em;text-transform:none;color:var(--muted);padding-left:12px;border-left:1px solid var(--line)}
.ox-lede{font-size:clamp(19px,1.55vw,23px);line-height:1.5;color:var(--ink)}
.ox-note{font-size:14px;line-height:1.5;color:var(--muted)}
.ox-center{text-align:center}
.ox-measure{max-width:62ch}
.ox-head{max-width:860px;margin-bottom:clamp(30px,3vw,44px)}
.ox-head .ox-lede{margin-top:16px}
.ox-head.ox-center{margin-inline:auto}
.ox-head.ox-center .ox-lede{max-width:46ch;margin-inline:auto}
.ox-head--row{max-width:none;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 40px}
.ox-head--row>div{max-width:880px}

/* ---------- sections ---------- */
.ox-sec{padding-block:var(--pad)}
.ox-canvas{background:var(--canvas)}
.ox-stone{background:var(--stone)}
.ox-dark{position:relative;background:var(--ink);color:#E6E9EE}
.ox-navy{position:relative;background:var(--navy);color:#E6E9EE}
.ox-dark::before,.ox-navy::before,.ox-sign::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%)}
.ox-navy::before{background:linear-gradient(100deg,var(--green) 0 31%,var(--green-hi) 31% 44%,var(--hot) 44% 61%,var(--ink) 61% 100%)}
.ox-dark :is(.ox-h2,.ox-h3,.ox-h4,.ox-lede),.ox-navy :is(.ox-h2,.ox-h3,.ox-h4,.ox-lede){color:#fff}
.ox-dark .ox-kick,.ox-navy .ox-kick{color:var(--green-hi)}
.ox-dark .ox-kick span,.ox-navy .ox-kick span{color:var(--on-dk2);border-color:rgba(255,255,255,.25)}
.ox-dark .ox-note,.ox-navy .ox-note{color:var(--on-dk2)}
.ox .ox-dark :where(a:not(.ox-btn)),.ox .ox-navy :where(a:not(.ox-btn)){color:var(--soft)}

/* ---------- buttons + links ---------- */
.ox-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font:800 21px/1 var(--disp);letter-spacing:.02em;text-transform:uppercase;padding:19px 30px 18px;border:0;border-radius:0;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s,transform .15s}
.ox .ox-btn{text-decoration:none}
.ox-btn:active{transform:scale(.98)}
.ox .ox-btn--hot{background:var(--hot);color:var(--ink)}
.ox .ox-btn--hot:hover{background:var(--ink);color:#fff}
.ox :is(.ox-dark,.ox-navy,.ox-frame__strip,.ox-tiles,.ox-foot) .ox-btn--hot:hover{background:#fff;color:var(--ink)}
.ox .ox-btn--hot:focus-visible{outline-color:var(--ink);box-shadow:0 0 0 6px #fff}
.ox-btn--lg{font-size:23px;padding:21px 34px 20px}
.ox-btn--block{display:flex;width:100%;white-space:normal;text-align:center}
.ox .ox-btn--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);font-size:16px}
.ox .ox-btn--line:hover{background:var(--ink);color:#fff}
.ox .ox-btn--white{background:#fff;color:var(--ink)}
.ox .ox-btn--white:hover{background:var(--hot)}
.ox .ox-btn--ink{background:var(--ink);color:#fff}
.ox .ox-btn--ink:hover{background:var(--navy)}
.ox .ox-btn--go{background:var(--green);color:#fff;border-radius:4px;font-size:18px;padding:15px 26px 14px}
.ox .ox-btn--go:hover{background:var(--green-dk)}
.ox-chev{display:inline-block;flex:none;width:.7em;height:.62em;background:currentColor;transition:transform .2s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M1.5 1.5l5.5 5.5-5.5 5.5M8.5 1.5l5.5 5.5-5.5 5.5' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M1.5 1.5l5.5 5.5-5.5 5.5M8.5 1.5l5.5 5.5-5.5 5.5' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") center/contain no-repeat}
.ox-btn:hover .ox-chev,.ox-tl:hover .ox-chev{transform:translateX(4px)}
.ox-play{width:0;height:0;border-left:11px solid currentColor;border-block:7px solid transparent}
.ox .ox-tl{display:inline-flex;align-items:center;gap:.5em;font:800 19px/1.2 var(--disp);letter-spacing:.03em;text-transform:uppercase;color:var(--link);text-decoration:none;padding:8px 0;transition:color .2s,background-color .2s}
.ox .ox-tl:hover{color:var(--ink)}
.ox .ox-tl--ink{color:var(--ink)}
.ox .ox-tl--ink:hover{color:var(--link)}
.ox-tag{display:inline-block;font:800 14px/1.05 var(--disp);letter-spacing:.05em;text-transform:uppercase;background:var(--hot);color:var(--ink);padding:7px 10px 6px}

/* ---------- frame device (offset navy frame behind a white panel) ---------- */
.ox-frame{position:relative;isolation:isolate}
.ox-frame::before{content:"";position:absolute;z-index:-1;left:calc(-1*var(--frame));right:var(--frame);top:56px;bottom:0;background:var(--ink)}
.ox-frame:not(:has(.ox-frame__strip))::before{bottom:calc(-1*var(--frame))}
.ox-frame__strip{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 36px;align-items:center;padding:22px calc(var(--frame) + 24px) 24px 0;color:#E6E9EE;font-size:15px;line-height:1.55}
.ox .ox-frame__strip p{margin:0}
.ox-frame__strip a:not(.ox-btn){color:var(--soft);font-weight:700}
.ox-frame__acts{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ox-911{font-weight:700;color:#fff}
.ox .ox-911 a{color:#fff}

/* ---------- stripe + utility bar ---------- */
.ox-stripe{height:12px;background:linear-gradient(100deg,var(--green) 0 31%,var(--green-hi) 31% 44%,var(--hot) 44% 61%,var(--navy) 61% 100%)}
.ox-util{background:var(--ink);color:#fff;font-size:13px;line-height:1.45}
.ox-util__in{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-block:6px}
.ox-util__msg{max-width:880px}
.ox-util__msg strong{display:inline-block;font:800 13px/1 var(--disp);letter-spacing:.07em;text-transform:uppercase;background:var(--green);padding:4px 7px 3px;margin-right:8px;vertical-align:1px}
.ox-util__msg span{color:var(--on-dk2)}
.ox-util__links{display:flex;gap:22px;flex:none}
.ox .ox-util__links a{color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}
.ox .ox-util__links a:hover{text-decoration:underline}
.ox .ox-util__links li:first-child a{color:var(--soft)}

/* ---------- header: transparent over the hero, solid after scroll ---------- */
.ox-hdr{position:absolute;left:0;right:0;z-index:80;color:#fff}
.ox-hdr::before{content:"";position:absolute;z-index:-1;inset:0 0 -70px;background:linear-gradient(rgba(11,23,41,.82),rgba(11,23,41,.5) 55%,rgba(11,23,41,0));pointer-events:none}
.ox-hdr__in{display:flex;align-items:center;gap:28px;height:96px}
.ox-logo{flex:none;margin-right:auto}
.ox .ox-logo img{height:64px;width:auto}
.ox .ox-logo__c{display:none}
.ox-nav{display:flex;align-items:center;gap:34px}
.ox-nav__list{display:flex;align-items:center;gap:30px}
.ox .ox-nav__top{display:inline-flex;align-items:center;gap:8px;padding:14px 0;font:500 17.5px/1 var(--body);color:inherit;text-decoration:none;white-space:nowrap}
.ox a.ox-nav__top:hover,.ox-nav__top:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.4em}
button.ox-nav__top::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-3px) rotate(45deg);transition:transform .2s}
.ox-dd{position:relative}
.ox-dd__panel{display:none;position:absolute;top:100%;left:-20px;min-width:250px;padding:10px 0;background:#fff;border-top:4px solid var(--hot)}
.ox-dd:hover .ox-dd__panel,.ox-dd.is-open .ox-dd__panel{display:block}
.ox-dd:hover>button::after,.ox-dd.is-open>button::after{transform:translateY(1px) rotate(-135deg)}
.ox .ox-dd__panel a{display:block;padding:10px 20px;font-size:16px;line-height:1.3;color:var(--navy);text-decoration:none}
.ox .ox-dd__panel a:hover{background:var(--canvas);color:var(--link)}
.ox-burger{display:none}
.ox.is-solid .ox-hdr{position:fixed;top:0;background:#fff;color:var(--navy);border-bottom:3px solid var(--hot);animation:ox-drop .35s var(--ease)}
.ox.is-solid .ox-hdr::before{display:none}
.ox.is-solid .ox-hdr__in{height:84px}
.ox.is-solid .ox-logo img{height:54px}
.ox.is-solid .ox-logo__w{display:none}
.ox.is-solid .ox-logo__c{display:block}
@keyframes ox-drop{from{transform:translateY(-100%)}}

/* ---------- 1 hero ---------- */
.ox-hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(calc(100svh - 56px),900px);display:flex}
.ox .ox-hero__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.ox-hero__grid{display:grid;grid-template-columns:minmax(0,720px) minmax(0,1fr);align-items:end;gap:32px;padding-block:118px 36px}
.ox-hero__panel{position:relative;isolation:isolate}
.ox-hero__panel::before{content:"";position:absolute;z-index:-1;left:calc(-1*var(--frame));right:24px;top:40px;bottom:0;background:var(--ink)}
.ox-hero__panel::after{content:"";position:absolute;left:0;top:0;width:120px;height:6px;background:var(--hot)}
.ox-hero__card{background:rgba(251,248,243,.94);padding:28px 36px 28px}
.ox-hero__kick{display:flex;align-items:center;gap:12px;font:700 18px/1.2 var(--disp);letter-spacing:.03em;text-transform:uppercase;color:var(--green-dk);margin-bottom:10px}
.ox-hero__kick::before{content:"";flex:none;width:26px;height:4px;background:var(--hot)}
.ox-hero .ox-h1{margin-bottom:14px}
.ox-hero__sub{font-size:clamp(16.5px,1.2vw,18.5px);line-height:1.5;color:var(--ink);margin-bottom:20px}
.ox-hero__links{margin-top:14px;font-size:14.5px;line-height:1.4}
.ox-hero__links a{display:block;margin-top:4px}
.ox .ox-hero__strip{margin:0;padding:12px 28px 14px 0;color:#fff;font-size:15.5px}
.ox-hero__strip a{color:var(--soft)!important;font-weight:700}
.ox-tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;width:100%;max-width:360px;justify-self:end}
.ox .ox-tile{display:flex;align-items:center;gap:14px;height:100%;min-height:76px;padding:12px 18px 12px 16px;background:rgba(11,23,41,.8);border-left:4px solid transparent;color:#fff;text-decoration:none;transition:background-color .2s,border-color .2s}
.ox .ox-tile:hover{background:var(--ink);border-left-color:var(--soft);transform:translateX(-6px)}
.ox .ox-tile{transition:background-color .2s,border-color .2s,transform .25s var(--ease)}
.ox .ox-tile.is-on{background:var(--ink);border-left-color:var(--hot)}
.ox-tile__n{flex:none;display:grid;place-items:center;width:40px;height:40px;border:2px solid currentColor;font:800 17px/1 var(--disp);color:var(--soft);letter-spacing:.04em}
.ox-tile.is-on .ox-tile__n{background:var(--hot);border-color:var(--hot);color:var(--ink)!important}
.ox-tile.is-on .ox-tile__n{color:var(--hot)}
.ox-tile__t{font-size:14px;line-height:1.35;color:#E6E9EE}
.ox-tile__t b{display:block;margin-top:5px;font:800 21px/1.12 var(--disp);letter-spacing:.01em;text-transform:uppercase;color:#fff;white-space:nowrap}
.ox-js .ox-hero__img{animation:ox-settle 2s var(--ease) both}
.ox-js .ox-hero__panel::after{transform-origin:0 50%;animation:ox-bar .9s var(--ease) .45s both}
.ox-js .ox-hero__panel{animation:ox-rise .9s var(--ease) both}
@keyframes ox-settle{from{transform:scale(1.09)}}
@keyframes ox-bar{from{transform:scaleX(0)}}
.ox-js .ox-tiles li{animation:ox-rise .8s var(--ease) both;animation-delay:calc(.3s + var(--i,0)*.1s)}
.ox-tiles li:nth-child(2){--i:1}.ox-tiles li:nth-child(3){--i:2}
@keyframes ox-rise{from{transform:translateY(28px)}}

/* ---------- 2 two ways in ---------- */
.ox-intro .ox-h2{margin-bottom:clamp(28px,3vw,44px)}
/* r7: two real doors (help = stone + orange bar, organizations = mist + green bar) and a full-width service strip under both */
.ox-pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.8vw,26px);align-items:stretch}
.ox-pillar{display:flex;flex-direction:column}
.ox-door{position:relative;padding:clamp(26px,2.4vw,34px) clamp(24px,2.8vw,42px) clamp(24px,2.2vw,30px)}
.ox-door::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--hot)}
.ox-door--help{background:var(--stone)}
.ox-door--org{background:var(--mist)}
.ox-door--org::before{background:var(--green)}
.ox .ox-door .ox-h3{font-size:clamp(30px,2.9vw,42px);line-height:1;margin:8px 0 14px}
.ox .ox-door .ox-pillar__foot{padding-top:20px}
.ox-door--help .ox-tag{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.ox-door-strip{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 22px;background:var(--ink);padding:22px clamp(24px,2.8vw,42px);border-left:6px solid var(--hot)}
.ox .ox-door-strip .ox-h3{margin:0;color:#fff}
.ox-door-strip .ox-pillar__k{color:var(--green-hi)}
.ox .ox-door-strip .ox-pillar__foot{margin:0 0 0 auto;padding:0}
.ox-pillar__k,.ox-strip__k,.ox-band__route,.ox-band__kick{font:700 17px/1.2 var(--disp);letter-spacing:.03em;text-transform:uppercase;color:var(--green-dk)}
.ox-pillar .ox-h3{margin:8px 0 12px}
.ox-pillar p:not(.ox-pillar__k){font-size:17px;line-height:1.58}
.ox .ox-pillar__foot{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}

/* ---------- 3 help band (Oxfam donate band) ---------- */
.ox-band{position:relative;isolation:isolate;background:var(--stone);padding-block:var(--pad)}
.ox-band__photo{position:absolute;z-index:-1;left:0;top:0;bottom:0;width:40%}
.ox .ox-band__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.ox-band .ox-frame{margin-left:clamp(0px,25%,330px)}
.ox-band__panel{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,2.6vw,40px);background:#fff;padding:clamp(22px,2.6vw,34px)}
.ox-band__kick span{display:inline-block;margin:6px 0 0;padding:4px 8px 3px;background:var(--green);color:#fff;font:800 13px/1 var(--disp);letter-spacing:.07em}
.ox-band .ox-h2{margin:12px 0 14px}
.ox-band__copy .ox-lede{margin-bottom:12px}
.ox-band__copy p:not(.ox-lede):not(.ox-band__kick){font-size:17px}
.ox-band__route{color:var(--ink)}
.ox-route{margin:12px 0 18px 7px;border-left:3px solid var(--ink)}
.ox-route li{position:relative;padding:6px 0 7px 24px;font-size:15.5px;line-height:1.42}
.ox-route li::before{content:"";position:absolute;left:-8.5px;top:13px;width:14px;height:14px;background:#fff;border:3px solid var(--ink)}
.ox-route li:first-child::before{background:var(--hot);border-color:var(--hot)}
.ox-route li.is-done::before{background:var(--green);border-color:var(--green)}
.ox-route span{font:800 13px/1 var(--disp);letter-spacing:.06em;color:var(--link);margin-right:8px}
.ox-route b{font:800 17px/1.2 var(--disp);letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin-right:5px}
.ox-route em{display:inline-block;margin-left:6px;padding:5px 8px 4px;background:var(--green);color:#fff;font:800 13px/1 var(--disp);font-style:normal;letter-spacing:.08em;text-transform:uppercase}
.ox-band__act .ox-btn+.ox-btn{margin-top:10px}

/* ---------- 4 resource finder strip (Oxfam join-us) ---------- */
.ox-strip{background:var(--green);color:#fff;padding-block:clamp(32px,3.4vw,44px)}
.ox-strip__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto;gap:clamp(24px,3.4vw,56px);align-items:center}
.ox-strip__k{color:#fff;margin-bottom:10px}
.ox-strip .ox-h2{color:#fff;font-size:clamp(28px,2.7vw,42px)}
.ox-strip__body{font-size:16.5px;line-height:1.55}
.ox .ox-strip a:not(.ox-btn){color:#fff;font-weight:700;margin-right:12px;white-space:nowrap}

/* ---------- 5 what you can expect ---------- */
.ox-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:4px solid var(--ink);margin-bottom:clamp(32px,3.4vw,48px)}
.ox-steps li{position:relative;padding:38px 22px 4px 0}
/* r5: the step number is the rail node (orange tile, navy text 5.15:1; last step green, white 5.0:1); "Step 0N" stays for screen readers */
.ox-steps__n{position:absolute;left:0;top:-21px;display:grid;place-items:center;width:38px;height:38px;font:800 20px/1 var(--disp);color:var(--ink);background:var(--hot)}
.ox-steps li:last-child .ox-steps__n{background:var(--green);color:#fff}
.ox-steps__k{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ox-steps .ox-h4{margin-bottom:10px}
.ox-steps li p:not(.ox-steps__k){font-size:16px;line-height:1.55}
.ox-locks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ox-locks li{background:var(--stone);border-left:4px solid var(--green);padding:22px 22px 22px}
.ox-locks__k{font:500 12.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--green-dk);margin-bottom:14px}
.ox-locks .ox-h4{margin-bottom:16px}
.ox .ox-locks__x{margin:0 0 16px}
.ox-locks__x s{display:inline-block;padding:8px 10px;background:var(--ink);color:var(--soft);font:500 13.5px/1 var(--mono);text-decoration-thickness:2px;text-decoration-color:var(--hot)}
.ox-locks li p:last-child{font-size:16px;line-height:1.55;margin:0}

/* ---------- 6 confirmed-handoff (Oxfam impact band) ---------- */
.ox-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.4vw,72px);align-items:start}
.ox-split__l .ox-lede{margin-top:18px}
.ox-badge{display:inline-flex;align-items:center;gap:14px;margin-top:26px;padding:16px 22px 15px;background:#fff;color:var(--ink);font:800 19px/1.2 var(--disp);letter-spacing:.03em;text-transform:uppercase}
.ox-badge::before{content:"";flex:none;width:12px;height:12px;background:var(--hot)}
.ox-split__l .ox-note{margin-top:22px;max-width:46ch}
.ox-stages li{display:grid;grid-template-columns:70px minmax(0,1fr);column-gap:18px;padding:13px 0;border-top:1px solid rgba(255,255,255,.16)}
.ox-stages li:first-child{border-top:0;padding-top:4px}
.ox-stages span{grid-row:span 2;font:800 46px/1 var(--disp);color:var(--green-hi)}
.ox-stages b{font:800 27px/1.1 var(--disp);letter-spacing:.01em;text-transform:uppercase;color:#fff}
.ox-stages em{margin-top:5px;font-style:normal;font-size:16px;line-height:1.5;color:var(--on-dk)}
.ox-demand{margin-top:clamp(40px,4vw,60px);padding-top:clamp(28px,3vw,40px);border-top:1px solid rgba(255,255,255,.16)}
.ox-demand .ox-h3{margin-bottom:20px}
.ox-demand ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ox .ox-demand a{display:block;height:100%;padding:16px 16px 18px;background:rgba(255,255,255,.04);border-top:3px solid var(--green-hi);color:var(--on-dk);text-decoration:none;font-size:15px;line-height:1.5;transition:background-color .2s,border-color .2s}
.ox .ox-demand a:hover{background:rgba(255,255,255,.1);border-top-color:var(--hot)}
.ox-demand b{display:block;margin-bottom:10px;font:800 21px/1.15 var(--disp);text-transform:uppercase;color:#fff}

/* ---------- 7 photo band + 13 film ---------- */
.ox-pband,.ox-film{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:clamp(420px,40vw,580px);padding-block:clamp(170px,15vw,230px) clamp(44px,4.4vw,64px)}
.ox .ox-pband__img,.ox-film__media{position:absolute;inset:0;z-index:-2;width:100%;height:100%}
.ox .ox-pband__img,.ox .ox-film__media img{width:100%;height:100%;object-fit:cover}
.ox-frame--box{max-width:620px}
.ox-frame--box::before{top:36px}
.ox-pband__box{background:#fff;padding:clamp(22px,2.4vw,32px)}
.ox-pband__box p:not(.ox-kick){font-size:16.5px}
.ox-pband__box .ox-h2{font-size:clamp(28px,3vw,46px)}
.ox-film .ox-h2{margin-bottom:16px}
.ox .ox-film__acts{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}

/* ---------- 8 the crisis + signature case field ---------- */
.ox-crisis{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(40px,5vw,80px);align-items:start}
.ox-crisis .ox-h2{margin-bottom:18px}
.ox-crisis__r{position:sticky;top:110px}
.ox-crisis__l>p:not(.ox-kick){font-size:17.5px;max-width:62ch}
.ox-field{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);grid-template-areas:"cap cap" "grid key" "grid note";grid-template-rows:auto 1fr auto;column-gap:22px;margin-top:28px;background:var(--ink);color:#E6E9EE;padding:18px 20px 20px;border-top:6px solid var(--hot)}
.ox-field figcaption{grid-area:cap}
.ox-field__grid{grid-area:grid}
.ox-field__key{grid-area:key;align-self:start}
.ox .ox-field__note{grid-area:note}
.ox-field figcaption{display:flex;justify-content:space-between;gap:12px;margin-bottom:16px;font:500 12px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-dk2)}
.ox-field figcaption span:last-child{color:var(--soft)}
.ox-field__grid{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:3px}
.ox-field__grid i{display:block;aspect-ratio:1}
.ox-field .f-open,.ox-field .k-open{background:var(--green-hi)}
.ox-field .f-ref,.ox-field .k-ref{background:var(--mist)}
.ox-field .f-home,.ox-field .k-home{background:var(--green)}
.ox-field .f-risk,.ox-field .k-risk{background:var(--hot)}
.ox-field .f-none,.ox-field .k-none{background:transparent;border:1.5px dashed var(--soft)}
.ox-field.is-arm i{transform:scale(.12)}
.ox-field.is-play i{transform:none;transition:transform .55s var(--ease) var(--d,0ms)}
.ox-field.is-play i.f-none{transition:transform .7s var(--punch) var(--d,0ms)}
.ox-field__key{display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--on-dk)}
.ox-field__key li{display:flex;align-items:center;gap:10px}
.ox-field__key i{flex:none;width:14px;height:14px}
.ox-field__key li:last-child{color:#fff;font-weight:700}
.ox .ox-field__note{margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.16);font-size:14px;color:#fff}
.ox-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ox-stats li{display:flex;flex-direction:column;background:#fff;border-top:4px solid var(--ink);padding:18px 20px 18px}
.ox-stats__i{font:800 14px/1 var(--disp);letter-spacing:.06em;color:var(--link)}
.ox-stats__n{display:block;margin:8px 0 8px;font:800 clamp(46px,5vw,80px)/1 var(--disp);color:var(--ink)}
.ox-stats li p{font-size:15.5px;line-height:1.5;margin-bottom:16px}
.ox-stats li a{margin-top:auto;font-size:13.5px;font-weight:700}
.ox-stats li:last-child{background:var(--ink);color:#E6E9EE;border-top-color:var(--hot)}
.ox-stats li:last-child .ox-stats__n{color:var(--hot)}
.ox-stats li:last-child .ox-stats__i{color:var(--soft)}
.ox .ox-stats li:last-child a{color:var(--soft)}

/* ---------- 9 data desert ---------- */
.ox-quote{max-width:1120px;margin-bottom:clamp(36px,4vw,60px);padding-left:clamp(18px,2vw,28px);border-left:6px solid var(--hot)}
.ox-quote p{font-size:clamp(34px,4.8vw,74px);line-height:1.08;color:#fff}
.ox-quote cite{display:block;margin-top:24px;font:500 13px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:var(--on-dk2)}
.ox-ack{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,88px);align-items:start}
.ox-ack__body .ox-lede{margin-bottom:18px}
.ox-ack__body p:not(.ox-lede){font-size:17.5px}
.ox-desert{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;margin-top:clamp(32px,3.4vw,48px)}
.ox-term{min-width:0;background:#07111F;border:1px solid rgba(255,255,255,.13)}
.ox-term figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.13);font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dk2)}
.ox-term figcaption>span:last-child:not(.ox-tag){color:var(--green-hi)}
.ox-term pre{overflow-x:auto;padding:22px 20px 26px;font:400 14.5px/1.75 var(--mono);color:var(--mist)}
.ox-term .c-p{color:var(--green-hi)}
.ox-term .c-t{color:var(--soft)}
.ox-chart{display:flex;flex-direction:column;background:var(--navy);padding:24px 24px 22px}
.ox-chart .ox-h4{max-width:30ch;color:#fff}
.ox-bars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;height:200px;margin:18px 0 32px;border-bottom:2px solid rgba(255,255,255,.4)}
.ox-bars li{position:relative;display:flex;flex-direction:column;justify-content:flex-end;text-align:center}
.ox-bars li::after{content:"";display:block;height:calc(var(--v,0)*140px);margin-top:8px;background:var(--green-hi);transform-origin:50% 100%}
.ox-bars b{font:800 21px/1 var(--disp);color:#fff}
.ox-bars span{position:absolute;top:100%;left:0;right:0;margin-top:10px;font:500 12px/1 var(--mono);color:var(--on-dk2)}
.ox-bars .is-na::after{height:38px;background:none;border:1.5px dashed var(--soft);border-bottom:0}
.ox-bars .is-na b{font-size:16px;color:var(--soft)}
.ox-bars li:nth-child(2){--i:1}.ox-bars li:nth-child(3){--i:2}.ox-bars li:nth-child(4){--i:3}.ox-bars li:nth-child(5){--i:4}
.ox-chart.is-arm li::after{transform:scaleY(0)}
.ox-chart.is-play li::after{transform:none;transition:transform .9s var(--ease) calc(var(--i,0)*.12s)}
.ox-chart figcaption{margin-top:auto;font:500 13px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.ox-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(32px,3.4vw,48px);border-top:1px solid rgba(255,255,255,.16)}
.ox-figs li{padding:22px 24px 0 0}
.ox-figs li+li{padding-left:32px;border-left:1px solid rgba(255,255,255,.16)}
.ox-figs b{display:block;font:800 clamp(48px,5.4vw,84px)/1 var(--disp);color:#fff}
.ox-figs li>span{display:block;margin-top:10px;font-size:15px;color:var(--on-dk)}
.ox-closer{margin-top:clamp(36px,4vw,56px);max-width:22ch;font-size:clamp(30px,3.6vw,56px);line-height:1.1;color:var(--hot)}
.ox .ox-closer+.ox-note{margin-top:24px;max-width:96ch}

/* ---------- 10 the system (Oxfam news carousel) ---------- */
.ox-rail-ctl{display:flex;gap:10px;flex:none}
.ox .ox-arrow{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--hot);transition:background-color .2s}
.ox-arrow::before{content:"";width:12px;height:12px;border:solid var(--ink);border-width:0 0 3px 3px;transform:translateX(2px) rotate(45deg)}
.ox-arrow--next::before{transform:translateX(-2px) rotate(-135deg)}
.ox .ox-arrow:hover{background:var(--hot-hi)}
.ox .ox-arrow:disabled{background:var(--stone);cursor:default}
.ox-guar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:clamp(24px,2.6vw,36px) 0 clamp(28px,3vw,40px);background:rgba(255,255,255,.2)}
.ox-guar li{display:flex;align-items:baseline;gap:12px;padding:15px 18px 14px;background:var(--ink);color:#fff;font:800 18px/1.2 var(--disp);letter-spacing:.03em;text-transform:uppercase}
.ox-guar span{font-size:15px;color:var(--hot)}
.ox-rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc(100%/3.3);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--ink) var(--stone);padding-bottom:20px}
.ox-rail>li{scroll-snap-align:start;padding:4px 34px 10px;border-left:1px solid var(--ink)}
.ox-rail>li:first-child{border-left:0;padding-left:0}
.ox-rail__meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;font:800 16px/1 var(--disp);letter-spacing:.04em;color:var(--muted)}
.ox-rail .ox-h3{margin-bottom:18px}
.ox-rail>li>p:last-child{font-size:16.5px;line-height:1.6}
.ox-rail--src{grid-auto-columns:calc(100%/5);padding-bottom:0}
.ox-rail--src>li,.ox-rail--src>li:first-child{padding:0;border-left:1px solid var(--ink)}
.ox-rail--src>li:last-child{border-right:1px solid var(--ink)}
/* r9: evidence as citation cards - heavy top bar, orange footnote tile, ink findings, whole card turns navy on hover; the public-record line as a stamp */
.ox-ev .ox-note{display:block;max-width:440px;padding:14px 18px 13px;border-left:6px solid var(--green);background:var(--mist);font:600 16.5px/1.45 var(--body);color:var(--ink)}
.ox-ev .ox-rail--src{gap:14px;grid-auto-columns:calc((100% - 56px)/5)}
.ox-ev .ox-rail--src>li,.ox-ev .ox-rail--src>li:first-child,.ox-ev .ox-rail--src>li:last-child{border:0;border-top:6px solid var(--ink);background:var(--canvas)}
.ox .ox-ev .ox-rail--src a{gap:12px;padding:22px 22px 24px;transition:background-color .2s,color .2s}
.ox-ev .ox-rail--src .ox-rail__meta{color:var(--muted);font-size:13px}
.ox-ev .ox-rail--src .ox-tag{display:grid;place-items:center;min-width:38px;height:38px;padding:0 8px;font-size:19px;letter-spacing:0}
.ox-ev .ox-rail--src b.ox-h4{font-size:clamp(21px,1.6vw,25px);color:var(--ink);margin-top:6px}
.ox-ev .ox-rail--src a>span:last-child{font-size:16px;font-weight:500;color:var(--ink)}
.ox .ox-ev .ox-rail--src a:hover{background:var(--ink);color:#fff}
.ox-ev .ox-rail--src a:hover b.ox-h4,.ox-ev .ox-rail--src a:hover>span:last-child{color:#fff}
.ox-ev .ox-rail--src a:hover .ox-rail__meta{color:var(--on-dk)}
.ox-ev .ox-rail--src>li:has(a:hover){border-top-color:var(--hot)}
@media (max-width:1024px){.ox-ev .ox-rail--src{grid-auto-columns:calc((100% - 28px)/2.4)}}
@media (max-width:767px){.ox-ev .ox-rail--src{grid-auto-columns:78%}}
@media (prefers-reduced-motion:reduce){.ox .ox-ev .ox-rail--src a{transition:none}}
.ox .ox-rail--src a{display:flex;flex-direction:column;gap:14px;height:100%;padding:20px 22px 26px;color:var(--navy);text-decoration:none;transition:background-color .2s}
.ox .ox-rail--src a:hover{background:var(--canvas)}
.ox-rail--src .ox-rail__meta{margin:0;font:500 12.5px/1 var(--mono);letter-spacing:.02em}
.ox-rail--src b{display:block}
.ox-rail--src a>span:last-child{font-size:15px;line-height:1.5;color:var(--muted)}

/* ---------- 11 the glass (Oxfam stories) ---------- */
.ox-gpv{background:var(--ink);color:#E6E9EE;padding:clamp(20px,2.4vw,30px);margin-bottom:clamp(36px,4vw,56px)}
.ox-gpv__top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px 24px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.16)}
.ox .ox-gpv__top .ox-kick{grid-column:1/-1;margin:0}
.ox .ox-gpv .ox-kick{color:var(--green-hi)}
.ox-gpv .ox-h3{font-size:clamp(30px,3.2vw,46px);color:#fff}
.ox-gpv .ox-h3 span{display:block;margin-top:6px;font:700 14px/1.2 var(--body);letter-spacing:.14em;color:var(--on-dk2)}
.ox .ox-gpv__spec{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;color:var(--on-dk)}
.ox .ox-gpv__warn{margin:18px 0 24px;padding:10px 14px;border:1px dashed rgba(242,177,131,.65);font:500 12.5px/1.5 var(--mono);letter-spacing:.03em;color:var(--soft)}
.ox-gpv__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.16)}
.ox-gpv__grid li{background:var(--ink);padding:22px 20px 24px}
.ox-gpv__grid h4{font:700 13px/1.3 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--on-dk)}
.ox-gpv__grid b{display:block;margin:14px 0 8px;font:800 clamp(44px,4.4vw,68px)/1 var(--disp);color:#fff}
.ox-gpv__grid li:last-child b{color:var(--green-hi)}
.ox-gpv__grid span{font-size:14px;color:var(--on-dk2)}
.ox .ox-gpv__chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px}
.ox .ox-gpv__chips .ox-kick{margin:0 6px 0 0}
.ox-gpv__chips span:not(.ox-kick){padding:7px 12px;border:1px solid rgba(255,255,255,.3);font-size:13.5px;color:#fff}
.ox-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,32px)}
.ox-card__top{position:relative;overflow:hidden;height:clamp(150px,13vw,190px);background:
  linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px) 0 0/56px 56px,
  linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px) 0 0/56px 56px,var(--navy)}
.ox-card:nth-child(2) .ox-card__top{background-color:var(--green)}
.ox-card:nth-child(3) .ox-card__top{background-color:var(--link)}
.ox-card__top .ox-tag{position:absolute;top:0;left:0;z-index:1}
/* r6: ghost word from the card's own copy (was 01/02/03 on three ideas that are not a sequence) */
.ox-card__ghost{position:absolute;right:-4px;top:.04em;font:800 clamp(92px,8.2vw,122px)/1 var(--disp);letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;color:rgba(255,255,255,.18);transition:transform .5s var(--ease)}
.ox-card:hover .ox-card__ghost{transform:translateY(-10px)}
.ox-card__box{position:relative;margin:-64px 25px 0 0;background:var(--ink);padding:20px 22px 18px;border-bottom:4px solid var(--hot)}
.ox-card__box .ox-h3{color:#fff}
.ox-card>p{padding:16px 6px 0 0;font-size:16.5px;line-height:1.58}

/* ---------- 12 comparison ---------- */
.ox-navy .ox-ack{margin-bottom:clamp(28px,3vw,44px)}
.ox-vs{width:100%;border-collapse:collapse}
.ox .ox-vs th,.ox .ox-vs td{border:0;background:none;text-align:left;vertical-align:top;padding:14px 28px 14px 0}
.ox .ox-vs thead th{padding-top:0;padding-bottom:14px;border-bottom:2px solid rgba(255,255,255,.3);font:500 12.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-dk2)}
.ox .ox-vs thead th.is-win{color:var(--green-hi);padding-left:25px}
.ox .ox-vs tbody tr+tr>*{border-top:1px solid rgba(255,255,255,.14)}
.ox .ox-vs tbody th{width:96px;font:800 32px/1 var(--disp);color:var(--soft)}
.ox .ox-vs td{width:42%;font-size:17px;line-height:1.5;color:#B9C0CB}
.ox .ox-vs td.is-win{padding-left:22px;border-left:3px solid var(--green-hi);font:800 22px/1.25 var(--disp);letter-spacing:.01em;text-transform:uppercase;color:#fff}
.ox-navy .ox-vs+.ox-note{margin-top:22px}

/* ---------- 14 the pilot (Oxfam amount chooser) ---------- */
.ox-big{max-width:20ch;margin-bottom:clamp(32px,3.4vw,52px);font-size:clamp(36px,5.2vw,84px);line-height:1.05}
.ox-pick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,3.4vw,48px);background:#fff;padding:clamp(22px,2.6vw,34px)}
.ox-pick__l .ox-h2{margin-bottom:20px}
.ox-pick__l>p:not(.ox-kick){font-size:17px}
.ox-launch{display:grid;gap:4px;margin-top:22px;background:var(--ink);color:var(--on-dk);padding:18px 20px 20px;border-left:6px solid var(--hot)}
.ox .ox-launch p{margin:0;font-size:14.5px}
.ox .ox-launch .ox-launch__k{margin-top:14px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green-hi)}
.ox .ox-launch .ox-launch__d{font:800 clamp(38px,3.6vw,56px)/1 var(--disp);text-transform:uppercase;color:var(--hot)}
.ox-pick__tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
.ox .ox-pick__tabs button{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:10px 14px;border:1px solid var(--ink);background:#fff;color:var(--ink);font:800 23px/1 var(--disp);letter-spacing:.02em;text-transform:uppercase;transition:background-color .2s,color .2s}
.ox-pick__tabs button span{font-size:14px;color:var(--link)}
.ox .ox-pick__tabs button:hover{background:var(--canvas)}
.ox .ox-pick__tabs [aria-selected="true"],.ox .ox-pick__tabs [aria-selected="true"]:hover{background:var(--ink);color:#fff}
.ox-pick__tabs [aria-selected="true"] span{color:var(--hot)}
.ox-pick__panel{border-top:4px solid var(--ink);padding-top:22px}
.ox-pick__panel+.ox-pick__panel{margin-top:28px}
.ox-pick__panel .ox-h3{margin-bottom:12px}
.ox-pick__panel p:not(.ox-note){font-size:17px}
.ox .ox-pick__panel .ox-note{margin-top:16px;font:500 12.5px/1.4 var(--mono);letter-spacing:.03em}

/* ---------- 15 referral standard (Oxfam take action) ---------- */
/* r8: split - the standard as a statement on the left, the five guides as a reading list on the right */
#referral-standard .ox-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,84px);align-items:start}
#referral-standard .ox-head{max-width:none;margin:0}
#referral-standard .ox-lede{margin-top:22px;padding-left:20px;border-left:6px solid var(--hot);font:700 clamp(22px,1.9vw,28px)/1.3 var(--body);color:var(--ink)}
#referral-standard .ox-head p:not(.ox-lede){margin-top:20px;max-width:56ch;font-size:17px}
#referral-standard .ox-guides{display:block;background:var(--ink);border-top:6px solid var(--hot);padding:6px clamp(16px,2vw,28px)}
#referral-standard .ox-guides li{display:block}
#referral-standard .ox-guides li+li{border-top:1px solid rgba(255,255,255,.16)}
.ox #referral-standard .ox-guides .ox-tl{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:0;margin-inline:calc(-1*clamp(16px,2vw,28px));padding:20px clamp(16px,2vw,28px) 18px;background:none;border:0;font-size:clamp(21px,1.8vw,27px);line-height:1.1;color:#fff;transition:background-color .2s,padding-left .2s}
#referral-standard .ox-guides .ox-chev{box-sizing:content-box;width:16px;height:14px;padding:11px 12px;background:var(--hot);-webkit-mask:none;mask:none;position:relative}
#referral-standard .ox-guides .ox-chev::after{content:"";position:absolute;inset:11px 12px;background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M1.5 1.5l5.5 5.5-5.5 5.5M8.5 1.5l5.5 5.5-5.5 5.5' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M1.5 1.5l5.5 5.5-5.5 5.5M8.5 1.5l5.5 5.5-5.5 5.5' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") center/contain no-repeat}
.ox #referral-standard .ox-guides .ox-tl:hover{background:var(--navy);padding-left:calc(clamp(16px,2vw,28px) + 10px);color:#fff}
#referral-standard .ox-guides .ox-tl:hover .ox-chev{transform:none;background:#fff}
@media (max-width:1024px){#referral-standard .ox-wrap{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){.ox #referral-standard .ox-guides .ox-tl{font-size:20px;padding-block:16px 15px}#referral-standard .ox-guides .ox-chev{padding:9px 10px}#referral-standard .ox-guides .ox-chev::after{inset:9px 10px}}
@media (prefers-reduced-motion:reduce){.ox #referral-standard .ox-guides .ox-tl{transition:none}}
.ox-guides{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ox-guides li{display:flex}
.ox .ox-guides .ox-tl{flex:1;justify-content:space-between;align-items:flex-end;gap:16px;min-height:104px;padding:16px 16px 14px;background:var(--canvas);border-top:4px solid var(--ink);color:var(--ink);font-size:20px;line-height:1.15}
.ox .ox-guides .ox-tl:hover{background:var(--hot);color:var(--ink)}

/* ---------- 16 partner FAQ ---------- */
#partner-faq .ox-h2{margin-bottom:18px}
#partner-faq .ox-ack>div:first-child p:not(.ox-kick){font-size:17px}
.ox-faq{border-top:3px solid var(--ink)}
.ox-faq details{border-bottom:1px solid var(--line)}
.ox-faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:16px 0;list-style:none;cursor:pointer;font:800 clamp(20px,1.7vw,24px)/1.2 var(--disp);text-transform:uppercase;color:var(--ink);transition:color .2s}
.ox-faq summary::-webkit-details-marker{display:none}
.ox-faq summary::after{content:"";flex:none;width:40px;height:40px;background:linear-gradient(#fff,#fff) center/16px 3px no-repeat,linear-gradient(#fff,#fff) center/3px 16px no-repeat,var(--ink);transition:background-color .2s}
.ox-faq details[open] summary::after{background:linear-gradient(var(--ink),var(--ink)) center/16px 3px no-repeat,var(--hot)}
.ox-faq summary:hover{color:var(--link)}
.ox-faq details p{padding:0 64px 20px 0;font-size:17px}

/* ---------- 17 partner briefing ---------- */
#contact .ox-split__l>p:not(.ox-kick){margin-top:26px}
#contact .ox-split__l>.ox-lede{margin-top:22px}
.ox-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.ox-facts div{border-top:2px solid var(--green-hi);padding-top:14px}
.ox-facts dt{margin-bottom:8px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dk2)}
.ox-facts dd{margin:0;font-size:16px;font-weight:700;color:#fff}
.ox-term--case{display:flex;flex-direction:column;align-self:center}
.ox-term--case .ox-tag{background:var(--green);color:#fff;font-size:13px}
.ox-case{padding:6px 24px}
.ox-case li{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-top:1px solid rgba(255,255,255,.12)}
.ox-case li:first-child{border-top:0}
.ox-case b{font:800 clamp(46px,4.6vw,72px)/1 var(--disp);color:#fff}
.ox-case li:last-child b{color:var(--green-hi)}
.ox-case span{font:500 13px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dk)}
.ox .ox-term--case .ox-note{margin-top:4px;padding:0 24px 18px}
/* r10: the case panel becomes a white case file on the navy band (orange top bar, green offset frame like the hero panel) */
#contact .ox-term--case{background:#fff;border:0;border-top:8px solid var(--hot);box-shadow:16px 16px 0 var(--green);margin:0 16px 16px 0}
#contact .ox-term figcaption{padding:16px 26px;border-bottom:2px solid var(--line);color:var(--muted);font-size:13px}
#contact .ox-case{padding:4px 26px}
#contact .ox-case li{padding:18px 0;border-top-color:var(--line)}
#contact .ox-case b{color:var(--ink);font-size:clamp(52px,5vw,80px)}
#contact .ox-case li:last-child b{color:var(--green)}
#contact .ox-case span{color:var(--muted);font-size:13.5px;font-weight:700}
.ox #contact .ox-term--case .ox-note{padding:4px 26px 20px;color:var(--muted)}
@media (max-width:767px){#contact .ox-term--case{box-shadow:10px 10px 0 var(--green);margin:0 10px 10px 0}}

/* ---------- 19 sign-off + 20 related + footer ---------- */
.ox-sign{position:relative;background:var(--green);padding-block:clamp(44px,4.4vw,64px);text-align:center}
.ox-sign p{font-size:clamp(36px,5.9vw,86px);line-height:1.04;color:#fff}
.ox-related .ox-h3{margin-bottom:24px}
.ox-related ul{columns:3 260px;column-gap:43px}
.ox-related li{position:relative;break-inside:avoid;padding:8px 0 8px 22px;font-size:16.5px}
.ox-related li::before{content:"";position:absolute;left:0;top:16px;border-left:8px solid var(--hot);border-block:5px solid transparent}
.ox .ox-related a{color:var(--navy)}
.ox .ox-related a:hover{color:var(--link)}
.ox-foot{background:var(--ink);color:#E6E9EE;font-size:16px}
.ox .ox-foot a:not(.ox-btn){color:#fff}
.ox-foot__grid{display:grid;grid-template-columns:1.2fr 1.1fr .9fr;padding-block:clamp(40px,4vw,56px)}
.ox-foot__grid>*{padding:0 clamp(20px,3vw,48px)}
.ox-foot__grid>:first-child{padding-left:0}
.ox-foot__grid>:last-child{padding-right:0}
.ox-foot__grid>*+*{border-left:1px solid rgba(255,255,255,.2)}
.ox .ox-foot__claim{margin-bottom:22px;font:800 clamp(24px,2.2vw,32px)/1.15 var(--disp);text-transform:uppercase;color:#fff}
.ox-foot__nav{columns:2;column-gap:28px}
.ox-foot__nav li{position:relative;break-inside:avoid;padding:6px 0 6px 18px}
.ox-foot__nav li::before{content:"";position:absolute;left:0;top:14px;border-left:7px solid var(--hot);border-block:5px solid transparent}
.ox .ox-foot__c img{width:180px;margin-bottom:18px}
.ox-foot__c p{font-size:14px;color:var(--on-dk2)}
.ox-foot__bar{background:var(--green-dk);color:#fff;font-size:14px}
.ox-foot__bar-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 32px;padding-block:18px}
.ox .ox-foot__bar-in p{margin:0}
.ox-foot__bar ul{display:flex;flex-wrap:wrap;gap:6px 20px}
.ox .ox-foot__bar-in p:last-child{flex-basis:100%;font-size:13px;color:#CFE6DA}

/* ---------- film dialog ---------- */
.ox-dlg{width:min(1120px,94vw);max-width:none;padding:56px 0 0;border:0;background:transparent;overflow:visible}
.ox-dlg::backdrop{background:rgba(11,23,41,.9)}
.ox-dlg__f{display:block;width:100%;aspect-ratio:16/9;border:0;background:#07111F}
.ox .ox-dlg__x{position:absolute;top:0;right:0;height:44px;padding:0 18px;background:var(--hot);color:var(--ink);font:800 18px/1 var(--disp);letter-spacing:.05em;text-transform:uppercase}

/* ---------- no-JS: the header sits in flow so every link stays reachable ---------- */
html:not(.ox-js) .ox-hdr{position:static;background:var(--ink)}
html:not(.ox-js) .ox-hdr::before{display:none}

/* ---------- tablet ---------- */
@media (max-width:1080px){
  .ox-hdr__in{height:78px}
  .ox .ox-logo img,.ox.is-solid .ox-logo img{height:50px}
  .ox.is-solid .ox-hdr__in{height:70px}
  .ox .ox-burger{display:inline-flex;align-items:center;gap:12px;padding:12px 2px;font:800 17px/1 var(--disp);letter-spacing:.07em;text-transform:uppercase;color:inherit}
  .ox-burger__bars{position:relative;width:24px;height:2.5px;background:currentColor;box-shadow:0 -7px 0 currentColor,0 7px 0 currentColor;transition:transform .2s}
  .ox.is-menu .ox-burger__bars{box-shadow:none;transform:rotate(45deg)}
  .ox.is-menu .ox-burger__bars::after{content:"";position:absolute;inset:0;background:currentColor;transform:rotate(90deg)}
  .ox-js .ox-nav{display:none}
  .ox.is-menu .ox-hdr{background:#fff;color:var(--navy)}
  .ox.is-menu .ox-hdr::before{display:none}
  .ox.is-menu .ox-logo__w{display:none}
  .ox.is-menu .ox-logo__c{display:block}
  .ox.is-menu .ox-nav{display:block;position:absolute;top:100%;left:0;right:0;max-height:calc(100svh - 78px);overflow:auto;padding:4px var(--g) 28px;background:#fff;border-top:1px solid var(--line);border-bottom:4px solid var(--hot)}
  .ox-nav__list{display:block}
  .ox-nav__list>li{border-bottom:1px solid var(--line)}
  .ox .ox-nav__top{width:100%;justify-content:space-between;padding:17px 0;font-size:18px}
  .ox-dd__panel{position:static;min-width:0;padding:0 0 12px 14px;border:0;background:none}
  .ox-dd:hover .ox-dd__panel{display:none}
  .ox-dd.is-open .ox-dd__panel{display:block}
  .ox-dd:hover>button::after{transform:translateY(-3px) rotate(45deg)}
  .ox-dd.is-open>button::after{transform:translateY(1px) rotate(-135deg)}
  .ox .ox-dd__panel a{padding:11px 0}
  .ox-nav__cta{width:100%;margin-top:22px}
  html:not(.ox-js) .ox-burger{display:none}
  html:not(.ox-js) .ox-hdr__in{height:auto;flex-wrap:wrap;padding-block:12px}
  html:not(.ox-js) .ox-nav{width:100%;display:block}
  html:not(.ox-js) .ox-dd__panel{display:block}
}
@media (max-width:1024px){
  .ox-util__in{flex-direction:column;align-items:flex-start;gap:4px;padding-block:8px}
  .ox-util__msg{max-width:none}
  .ox-hero__grid{grid-template-columns:minmax(0,1fr);padding-block:132px 40px}
  .ox-hero__panel{max-width:680px}
  .ox-tiles{justify-self:stretch;max-width:none;grid-template-columns:repeat(3,minmax(0,1fr))}
  .ox-pillars{grid-template-columns:minmax(0,1fr);gap:16px}
  .ox-band{padding-top:0}
  .ox-band__photo{position:relative;z-index:0;width:auto;height:clamp(320px,56vw,480px)}
  .ox-band .ox-frame{margin-left:0;margin-top:-96px}
  .ox-band__panel{grid-template-columns:minmax(0,1fr)}
  .ox-frame__strip{grid-template-columns:minmax(0,1fr)}
  .ox-strip__in{grid-template-columns:minmax(0,1fr)}
  .ox-strip__in .ox-btn{justify-self:start}
  .ox-steps{grid-template-columns:minmax(0,1fr);border-top:0;border-left:4px solid var(--ink);margin-left:17px}
  .ox-steps li{padding:5px 0 30px 34px}
  .ox-steps li:last-child{padding-bottom:4px}
  .ox-steps__n{top:0;left:-21px}
  .ox-locks{grid-template-columns:minmax(0,1fr)}
  .ox-split,.ox-crisis,.ox-ack,.ox-desert,.ox-pick{grid-template-columns:minmax(0,1fr)}
  .ox-crisis__r{position:static}
  .ox-demand ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ox-guar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ox-rail{grid-auto-columns:calc(100%/1.7)}
  .ox-rail--src{grid-auto-columns:calc(100%/2.5)}
  .ox-gpv__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ox-cards{grid-template-columns:minmax(0,1fr);max-width:620px;gap:36px}
  .ox-guides{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .ox-foot__grid{grid-template-columns:1fr 1fr;row-gap:36px}
  .ox-foot__grid>:last-child{grid-column:1/-1;border-left:0;padding-left:0;padding-top:32px;border-top:1px solid rgba(255,255,255,.2)}
}
/* ---------- phone ---------- */
@media (max-width:767px){
  .ox{font-size:17px;--frame:10px}
  .ox-btn{white-space:normal;text-align:center;line-height:1.1}
  .ox-btn--lg{font-size:20px;padding:18px 22px 17px}
  .ox-util{font-size:12.5px;line-height:1.38}
  .ox-util__in{flex-direction:column;align-items:stretch;gap:6px;padding-block:8px 0}
  .ox-util__msg strong{font-size:11.5px;padding:3px 6px 2px;margin-right:6px}
  .ox-util__links{gap:0;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1*var(--g));padding:0 var(--g);border-top:1px solid rgba(255,255,255,.12)}
  .ox-util__links::-webkit-scrollbar{display:none}
  .ox-util__links li{flex:none}
  .ox .ox-util__links a{display:block;padding:8px 14px 9px 0;font-size:12.5px}
  .ox-util__links li+li a{padding-left:14px;border-left:1px solid rgba(255,255,255,.18)}
  .ox-hdr__in{height:68px}
  .ox .ox-logo img,.ox.is-solid .ox-logo img{height:44px}
  .ox.is-menu .ox-nav{max-height:calc(100svh - 68px)}
  .ox-hero__grid{padding-block:96px 28px;gap:24px}
  .ox-hero__card{padding:24px 22px 26px}
  .ox-hero__panel::before{top:32px;right:14px}
  .ox-hero .ox-h1{font-size:clamp(34px,10vw,44px)}
  .ox .ox-hero__strip{padding-right:24px}
  .ox-tiles{grid-template-columns:minmax(0,1fr)}
  .ox .ox-tile{min-height:0;padding:10px 14px}
  .ox-tile__n{width:34px;height:34px;font-size:15px}
  .ox-tile__t b{font-size:20px}
  .ox-door{padding:26px 18px 22px}
  .ox-door-strip{flex-direction:column;align-items:flex-start;padding:22px 18px 22px}
  .ox .ox-door-strip .ox-pillar__foot{margin:10px 0 0;width:100%}
  .ox .ox-door .ox-btn,.ox .ox-door-strip .ox-btn{width:100%;font-size:18px;padding:17px 14px 16px}
  .ox-band__photo{height:300px}
  .ox-band .ox-frame{margin-top:-60px}
  .ox-band__panel{padding:22px 18px;gap:20px}
  .ox-steps li{padding-bottom:20px}
  .ox-locks li{padding:18px 16px}
  .ox-stages li{padding:10px 0}
  .ox-pillars{gap:28px}
  .ox-demand ul{gap:8px}
  .ox-gpv{padding:18px 14px}
  .ox-cards{gap:28px}
  .ox-stats li{padding:16px 16px}
  .ox-stages li{grid-template-columns:52px minmax(0,1fr);column-gap:14px}
  .ox-stages span{font-size:36px}
  .ox-stages b{font-size:23px}
  .ox-demand ul,.ox-guar,.ox-stats,.ox-figs,.ox-facts,.ox-guides{grid-template-columns:minmax(0,1fr)}
  .ox-figs li,.ox-figs li+li{padding:22px 0 0;border-left:0}
  .ox-figs li+li{margin-top:22px;border-top:1px solid rgba(255,255,255,.16)}
  .ox-pband,.ox-film{min-height:0;padding-block:240px 48px}
  .ox-pband__box{padding:24px 20px}
  .ox-field{grid-template-columns:minmax(0,1fr);grid-template-areas:"cap" "grid" "key" "note";padding:16px 14px 18px}
  .ox-field__key{flex-direction:row;flex-wrap:wrap;gap:8px 16px;margin-top:16px}
  .ox-field__grid{gap:3px}
  .ox-bars{height:210px;gap:8px}
  .ox-bars b{font-size:17px}
  .ox-head--row{display:block}
  .ox-rail-ctl{margin-top:22px}
  .ox-rail{grid-auto-columns:86%}
  .ox-rail>li{padding:4px 22px 10px}
  .ox-rail--src{grid-auto-columns:80%}
  .ox-gpv__top{grid-template-columns:minmax(0,1fr)}
  .ox-gpv__grid li{padding:18px 16px 20px}
  .ox-card__box{margin-right:18px;padding:22px 20px 18px}
  .ox-vs,.ox-vs tbody,.ox-vs tr,.ox .ox-vs th,.ox .ox-vs td{display:block;width:auto}
  .ox-vs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ox-vs tbody tr{padding:22px 0;border-top:1px solid rgba(255,255,255,.14)}
  .ox .ox-vs tbody tr+tr>*{border-top:0}
  .ox .ox-vs tbody th{padding:0 0 12px;font-size:28px}
  .ox .ox-vs td{padding:0 0 16px}
  .ox .ox-vs td.is-win{padding:4px 0 2px 16px;font-size:20px}
  .ox-vs td::before{content:attr(data-label);display:block;margin-bottom:6px;font:500 11.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-dk2)}
  .ox-vs td.is-win::before{color:var(--green-hi)}
  .ox-pick{padding:24px 20px}
  .ox .ox-pick__tabs button{min-height:56px;font-size:19px;gap:8px}
  .ox .ox-guides .ox-tl{min-height:0;padding:18px 18px 16px}
  .ox-faq summary::after{width:34px;height:34px}
  .ox-faq details p{padding-right:0}
  .ox-foot__grid{grid-template-columns:minmax(0,1fr)}
  .ox-foot__grid>*{padding:0}
  .ox-foot__grid>*+*{border-left:0;border-top:1px solid rgba(255,255,255,.2);padding-top:28px}
  .ox-foot__grid>:last-child{padding-top:28px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ox *,.ox *::before,.ox *::after{animation:none!important;transition:none!important}
}
/* HDR-OXFAM 17 Oct 2026: header laid out like the oxfam.ca reference (slim black bar on one line, big logo, plain nav). Desktop only. Undo: delete this block. */
@media (min-width:1025px){
.ox-util{background:#000}
.ox-util__in{padding-block:8px;gap:24px}
.ox-util__msg{max-width:800px;margin:0;font:700 12.5px/1.25 var(--body);letter-spacing:.01em}
.ox-util__msg strong{background:none;padding:0;margin-right:10px;font:800 12.5px/1.2 var(--body);letter-spacing:.06em;color:#fff}
.ox-util__links{gap:22px}
.ox .ox-util__links a{font:700 12.5px/1.2 var(--body)}
.ox .ox-util__links li:first-child a{color:#fff}
.ox-hdr__in{height:116px}
.ox .ox-logo img{height:86px}
.ox-nav{gap:30px}
.ox-nav__list{gap:34px}
.ox .ox-nav__top{font:500 19px/1 var(--body)}
button.ox-nav__top::after{display:none}
.ox-hdr::before{background:linear-gradient(rgba(0,0,0,.78),rgba(0,0,0,.42) 55%,rgba(0,0,0,0))}
.ox.is-solid .ox-hdr__in{height:84px}
.ox.is-solid .ox-logo img{height:60px}
}

/* ===== HERO-OXFAM (17 Oct 2026): oxfam.ca hero layout, PFH copy/colours. Card 560 wide, translucent canvas, navy-black offset bar + link strip, no chip/kicker, one CTA, 3 numbered tabs bottom-right. ===== */
.ox-hero{min-height:min(calc(100svh - 60px),860px)}
.ox-hero__grid{grid-template-columns:minmax(0,580px) minmax(0,1fr);align-items:stretch;gap:24px;padding-block:120px 26px}
.ox-hero__panel{align-self:start;margin-left:16px}
.ox-hero__panel::before{left:-16px;right:auto;width:16px;top:44px;bottom:0;background:#05080D}
.ox-hero__panel::after{display:none}
.ox .ox-hero__card{background:rgba(251,248,243,.86);padding:34px 32px 30px}
.ox .ox-hero .ox-h1{font-size:clamp(40px,4.2vw,60px);line-height:1.02;letter-spacing:0;margin:0 0 16px;color:#05080D}
.ox .ox-hero__sub{font:500 clamp(19px,1.75vw,25px)/1.44 var(--body);color:#05080D;margin:0 0 26px;max-width:none}
.ox .ox-hero__strip{margin:0 16px 0 -16px!important;padding:12px 20px 13px 16px;background:#05080D;font-size:14px;line-height:1.35;color:var(--on-dk)}
.ox .ox-hero__strip a{display:block;color:var(--on-dk)!important;font-weight:400;text-decoration-color:rgba(195,202,212,.55)}
.ox .ox-hero__strip a+a{margin-top:3px}
.ox .ox-hero__strip a:hover{color:#fff!important}
/* tabs: a row of three, bottom-right, active raised + black */
.ox-tiles{grid-template-columns:repeat(3,minmax(0,212px));max-width:none;width:auto;gap:6px;align-self:end;align-items:end;justify-self:end}
.ox .ox-tile{align-items:flex-start;gap:10px;min-height:94px;padding:16px 16px 14px 12px;background:rgba(5,8,13,.74);border-left:3px solid transparent;transform:translateY(16px)}
.ox .ox-tile.is-on{background:#05080D;border-left-color:var(--hot);transform:none}
.ox .ox-tile:hover{transform:translateY(10px);background:rgba(5,8,13,.86)}
.ox .ox-tile.is-on:hover{transform:none;background:#05080D}
.ox .ox-tile__n{width:auto;height:auto;border:0;background:none!important;display:block;font:800 17px/1.2 var(--disp);color:#9AA3B0!important;margin-top:1px}
.ox .ox-tile.is-on .ox-tile__n{color:var(--hot)!important}
.ox .ox-tile__t{font-size:13px;line-height:1.3;color:#D5DAE1}
.ox .ox-tile__t b{margin-top:4px;font-size:20px;line-height:1.1}
@media (max-width:1024px){
  .ox-hero__grid{grid-template-columns:minmax(0,1fr);padding-block:132px 40px}
  .ox-hero__panel{margin-top:0;max-width:620px}
  .ox-tiles{justify-self:stretch;grid-template-columns:repeat(3,minmax(0,1fr))}
  .ox .ox-tile,.ox .ox-tile:hover{transform:none}
}
@media (max-width:767px){
  .ox-hero__grid{padding-block:96px 28px}
  .ox-hero__panel{margin-left:10px}
  .ox-hero__panel::before{left:-10px;width:10px;top:30px}
  .ox .ox-hero__strip{margin:0 10px 0 -10px!important;padding-left:10px}
  .ox .ox-hero__card{padding:24px 20px 24px}
  .ox .ox-hero .ox-h1{font-size:clamp(34px,10vw,42px);margin-bottom:12px}
  .ox .ox-hero__sub{font-size:19px;line-height:1.42;margin-bottom:20px}
  .ox .ox-hero .ox-btn{white-space:nowrap;font-size:19px;padding:16px 20px 15px}
  .ox .ox-hero__strip{font-size:14px;padding-right:16px}
  .ox-tiles{grid-template-columns:minmax(0,1fr)}
  .ox .ox-tile{min-height:0;padding:12px 14px;align-items:center}
  .ox .ox-tile__t b{font-size:20px}
}
@media (prefers-reduced-motion:reduce){.ox .ox-tile,.ox .ox-tile:hover{transition:none}}

/* ===== TYPE-SOFT + EPILOGUE (17 Oct 2026, baked from preview-soft.css 87100382 + fonts-preview/D-epilogue.css 550cdbfc; Marco picked D: Epilogue).
   Local preview loads Epilogue from Google (index.html link). LIVE STEP: self-host Epilogue woff2 400/500/800/900 in uploads/pfh-hox/fonts/ + @font-face here first. ===== */
.ox{--pad:clamp(66px,8.4vw,124px);--disp:"Barlow","Barlow Fallback",system-ui,sans-serif;font-size:19px;line-height:1.58}
/* headings */
.ox :is(.ox-h1,.ox-h2,.ox-h3,.ox-h4,.ox-big,.ox-quote p,.ox-closer,.ox-sign p){font-weight:700;letter-spacing:-.005em}
.ox .ox-h1{font-size:clamp(36px,4.2vw,60px);line-height:1.07}
.ox .ox-h2{font-size:clamp(28px,3.15vw,45px);line-height:1.11}
.ox .ox-h3{font-size:clamp(22px,2.1vw,30px);line-height:1.1}
.ox .ox-h4{font-size:clamp(19px,1.5vw,22px);line-height:1.18}
.ox .ox-hero .ox-h1{font-size:clamp(34px,3.65vw,52px);line-height:1.08}
.ox-chip{padding:.02em .16em 0}
/* lede + body */
.ox .ox-lede{font-size:clamp(20px,1.95vw,27px);line-height:1.4;font-weight:500}
.ox .ox-head{margin-bottom:clamp(36px,3.6vw,56px)}
.ox .ox-head .ox-lede{margin-top:20px}
.ox :where(.ox-band__copy,.ox-pband__box,.ox-crisis__l,.ox-ack__body,.ox-pick__l,.ox-pillar,.ox-split__l) p:not([class]){font-size:19px;line-height:1.58}
.ox :where(p + p){margin-top:1em}
/* kickers: quieter label, not a second headline */
.ox .ox-kick{font:500 14px/1.3 var(--body);letter-spacing:.12em;margin-bottom:16px}
.ox .ox-kick::before{width:22px;height:2px}
/* buttons: oxfam weight/size */
.ox .ox-btn{font:700 18px/1 var(--body);letter-spacing:.03em;padding:20px 30px 19px}
.ox .ox-btn--lg{font-size:19px;padding:21px 32px 20px}
/* calmer dark bands: drop the 6px multicolour bar on every band */
.ox :is(.ox-dark,.ox-navy,.ox-sign)::before{display:none}
@media (max-width:767px){
  .ox{--pad:66px;font-size:18px}
  .ox .ox-h2{font-size:clamp(26px,7.5vw,30px);line-height:1.14}
  .ox .ox-h3{font-size:clamp(21px,6.2vw,24px)}
  .ox .ox-lede{font-size:20px;line-height:1.42}
  .ox :where(.ox-band__copy,.ox-pband__box,.ox-crisis__l,.ox-ack__body,.ox-pick__l,.ox-pillar,.ox-split__l) p:not([class]){font-size:18px}
  .ox .ox-btn{font-size:17px;padding:18px 22px 17px}
}
.ox .ox-pband__box p.ox-lede{font-size:clamp(20px,1.95vw,27px);margin-top:16px}
.ox{--disp:"Epilogue",sans-serif;--body:"Epilogue",sans-serif}
.ox :is(.ox-h1,.ox-h2,.ox-h3,.ox-h4,.ox-big,.ox-quote p,.ox-closer,.ox-sign p){font-weight:900;letter-spacing:-.02em}
.ox .ox-hero .ox-h1{font-size:clamp(30px,2.95vw,43px);line-height:1.06}
.ox .ox-btn{font-family:"Epilogue",sans-serif;font-weight:900}

@media (max-width:767px){
  .ox .ox-hero .ox-h1{font-size:30px;line-height:1.08}
  .ox .ox-btn,.ox .ox-hero .ox-btn{font-size:15px;font-weight:800;letter-spacing:.01em;padding:17px 18px 16px}
  .ox .ox-hero__sub{font-size:18px;line-height:1.45}
}
/* ===== end TYPE-SOFT + EPILOGUE ===== */

/* ===== CRISIS-GLORY 1 (17 Oct 2026, local only): "the bill and the missing receipt".
   Right column = one ledger of four lines on the light ground, numbers big; the last line (Zero) is the only dark block.
   Case field moves off the dark terminal box onto the light ground; no copy changed. ===== */
.ox #crisis .ox-crisis{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px)}
.ox #crisis .ox-h2{margin-bottom:28px;max-width:15ch}
.ox #crisis .ox-crisis__l>p:not(.ox-kick){font-size:19px;line-height:1.58;max-width:56ch}
.ox #crisis .ox-stats{grid-template-columns:minmax(0,1fr);gap:0;border-top:3px solid var(--ink)}
.ox #crisis .ox-stats li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:8px;background:none;border-top:0;border-bottom:1px solid var(--line);padding:26px 0 28px}
.ox #crisis .ox-stats__i{grid-row:1/4;padding-top:.7em;font:800 14px/1 var(--body);letter-spacing:.04em;color:var(--muted)}
.ox #crisis .ox-stats__n{margin:0 0 10px;font:900 clamp(52px,5.4vw,86px)/.92 var(--disp);letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.ox #crisis .ox-stats li p{font-size:19px;line-height:1.5;margin:0 0 12px;max-width:34ch;color:#2B3039}
.ox #crisis .ox-stats li a{font-size:14px;font-weight:700;justify-self:start}
.ox #crisis .ox-stats li:last-child{background:var(--ink);border-bottom:0;margin-top:20px;padding:30px 32px 32px 0;box-shadow:inset 0 6px 0 var(--hot)}
.ox #crisis .ox-stats li:last-child .ox-stats__i{padding-left:24px;color:var(--soft)}
.ox #crisis .ox-stats li:last-child .ox-stats__n{color:var(--hot);font-size:clamp(64px,7.2vw,112px)}
.ox #crisis .ox-stats li:last-child p{color:#fff;font-weight:500}
/* case field on the light ground */
.ox #crisis .ox-field{background:none;color:var(--ink);padding:28px 0 0;margin-top:44px;border-top:3px solid var(--ink);grid-template-columns:minmax(0,1fr) minmax(0,190px);column-gap:32px}
.ox #crisis .ox-field::before{display:none}
.ox #crisis .ox-field figcaption{font:700 14px/1.3 var(--body);letter-spacing:.02em;text-transform:none;color:var(--ink)}
.ox #crisis .ox-field figcaption span:last-child{font-weight:500;color:var(--muted)}
.ox #crisis .ox-field__grid{gap:4px}
.ox #crisis .ox-field .f-open,.ox #crisis .ox-field .k-open{background:var(--navy)}
.ox #crisis .ox-field .f-ref,.ox #crisis .ox-field .k-ref{background:#7D93AA}
.ox #crisis .ox-field .f-home,.ox #crisis .ox-field .k-home{background:var(--green)}
.ox #crisis .ox-field .f-risk,.ox #crisis .ox-field .k-risk{background:#C25E14}
.ox #crisis .ox-field .f-none,.ox #crisis .ox-field .k-none{background:transparent;border:2px dashed var(--hot)}
.ox #crisis .ox-field__key{font-size:15px;line-height:1.35;color:#2B3039;gap:12px}
.ox #crisis .ox-field__key li:last-child{color:var(--ink);font-weight:800}
.ox #crisis .ox-field__note{border-top:1px solid var(--line);color:var(--ink);font-size:15px;line-height:1.5;font-weight:500}
@media (max-width:767px){
  .ox #crisis .ox-stats li{grid-template-columns:34px minmax(0,1fr);padding:22px 0 24px}
  .ox #crisis .ox-stats__n{font-size:clamp(48px,14vw,60px)}
  .ox #crisis .ox-stats li:last-child{padding:24px 20px 26px 0}
  .ox #crisis .ox-stats li:last-child .ox-stats__i{padding-left:16px}
  .ox #crisis .ox-stats li:last-child .ox-stats__n{font-size:clamp(60px,18vw,76px)}
  .ox #crisis .ox-stats li p{font-size:18px}
  .ox #crisis .ox-field{grid-template-columns:minmax(0,1fr);margin-top:36px}
}
/* ===== end CRISIS-GLORY 1 ===== */

/* ===== CRISIS-GLORY 2 (17 Oct 2026, local only): heading spans both columns; orange is kept for "unrecorded" only
   (hollow cells, key, Zero), recorded cells in navy/slate/green. ===== */
.ox #crisis .ox-crisis__head{grid-column:1/-1;margin-bottom:clamp(8px,1vw,16px)}
.ox #crisis .ox-h2{max-width:31ch;margin-bottom:0}
.ox #crisis .ox-crisis{row-gap:clamp(28px,3vw,44px)}
.ox #crisis .ox-stats li{padding:22px 0 24px}
.ox #crisis .ox-stats__n{font-size:clamp(52px,5vw,76px)}
.ox #crisis .ox-h2 .ox-chip{white-space:nowrap}
.ox #crisis .ox-crisis__r{top:120px}
.ox #crisis .ox-crisis__l>p:first-child{margin-top:0}
.ox #crisis .ox-field .f-risk,.ox #crisis .ox-field .k-risk{background:#3A4A64}
.ox #crisis .ox-field .f-ref,.ox #crisis .ox-field .k-ref{background:#9AACBF}
.ox #crisis .ox-field .f-none,.ox #crisis .ox-field .k-none{border:2px solid var(--hot);background:rgba(224,122,47,.08)}
.ox #crisis .ox-field__key li:last-child{color:#A9501A}
@media (max-width:767px){
  .ox #crisis .ox-h2 .ox-chip{white-space:normal}
  .ox #crisis .ox-crisis{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .ox #crisis .ox-crisis__r{position:static}
  .ox #crisis .ox-kick{flex-wrap:wrap}
  .ox #crisis .ox-stats li{padding:18px 0 20px}
  .ox #crisis .ox-stats li p{margin-bottom:8px}
  .ox #crisis .ox-field__grid{max-width:288px}
  .ox #crisis .ox-kick span{flex-basis:100%;border-left:0;padding-left:0;margin-top:4px}
}
/* ===== end CRISIS-GLORY 2 ===== */

/* ===== MOTION-1 (17 Oct 2026, local only; Marco: "LOTS OF ANIMATIONS"). Page-wide reveal engine driven by ox.js motion().
   Everything is gated on .ox-mo, which ox.js adds only when IntersectionObserver exists and reduced motion is off,
   so no-JS, print and reduced-motion visitors see the finished page. Once per section, transform + opacity only. ===== */
.ox-mo .ox-rv{opacity:0;transform:translate3d(0,30px,0);transition:opacity .75s var(--ease) calc(var(--i,0)*85ms),transform .95s var(--ease) calc(var(--i,0)*85ms)}
.ox-mo .ox-rv.ox-rv--l{transform:translate3d(-44px,0,0)}
.ox-mo .ox-rv.ox-rv--r{transform:translate3d(44px,0,0)}
.ox-mo .ox-rv.ox-rv--s{transform:scale(.94)}
.ox-mo .is-in .ox-rv{opacity:1;transform:none}
/* highlight chips wipe in after their heading lands */
.ox-mo .ox-rvc .ox-chip{background-size:0% .89em;transition:background-size .9s var(--ease) calc(var(--i,0)*85ms + .45s),color .3s linear calc(var(--i,0)*85ms + .45s);color:var(--ink)}
.ox-mo :is(.ox-dark,.ox-navy) .ox-rvc .ox-chip{color:#fff}
.ox-mo .is-in .ox-rvc .ox-chip{background-size:100% .89em;color:#fff}
/* kicker dash draws */
.ox-mo .ox-kick.ox-rv::before{transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease) calc(var(--i,0)*85ms + .2s)}
.ox-mo .is-in .ox-kick.ox-rv::before{transform:none}
/* photos settle from a slow zoom */
.ox-mo .ox-rvi{transform:scale(1.16);transition:transform 2.4s cubic-bezier(.22,1,.36,1)}
.ox-mo .is-in .ox-rvi{transform:none}
.ox-mo :is(.ox-pband,.ox-film,.ox-band){overflow:hidden}
@media print{.ox-mo .ox-rv,.ox-mo .ox-rvi{opacity:1!important;transform:none!important}}
/* ===== end MOTION-1 ===== */

/* ===== CRISIS-GLORY 3 (17 Oct 2026, local only): "the money trail" graphic + ledger and field motion. ===== */
.ox #crisis .ox-flow{grid-column:1/-1;position:relative;margin:clamp(8px,1.4vw,20px) 0 clamp(12px,2vw,28px);padding-top:56px}
.ox #crisis .ox-flow svg{display:block;width:100%;height:auto;overflow:visible}
.ox-flow__in{fill:none;stroke:var(--ink);stroke-width:26;stroke-linecap:round}
.ox-flow__p{fill:none;stroke:#9AACBF;stroke-width:1.6}
.ox-flow__x{fill:none;stroke:var(--green);stroke-width:2.2}
.ox-flow__x--lost{stroke:url(#oxLost);stroke-dasharray:7 7;stroke-width:2.4}
.ox-flow__end{fill:var(--green)}
.ox-flow__t{fill:var(--navy)}
.ox-flow__n{fill:var(--ink);stroke:var(--canvas);stroke-width:3}
.ox-flow__u{fill:none;stroke:var(--hot);stroke-width:3;stroke-linecap:round;stroke-dasharray:0 1;opacity:0}
.ox-flow__l{position:absolute;inset:0 0 auto;height:48px;font:500 15px/1.25 var(--body);color:#2B3039}
.ox-flow__l span{position:absolute;top:0;white-space:nowrap}
.ox-flow__l b{font:900 22px/1 var(--disp);color:var(--ink);letter-spacing:-.02em;margin-right:4px}
.ox-flow__l .l-in{left:0}
.ox-flow__l .l-prog{left:35%;transform:translateX(-50%)}
.ox-flow__l .l-ag{left:58.3%;transform:translateX(-50%)}
.ox-flow__l .l-out{right:0;top:-6px;text-align:left;font-size:14px;line-height:1.5;white-space:normal;width:max-content}
.ox-flow__l i{display:inline-block;width:18px;height:0;border-top:3px solid var(--green);vertical-align:middle;margin-right:8px}
.ox-flow__l i.k-lost{border-top:3px dashed var(--hot)}

/* motion: the trail draws left to right, then nodes pop, then money pulses run the strands */
.ox-mo #crisis .ox-flow svg{clip-path:inset(0 100% 0 0);transition:clip-path 2.6s cubic-bezier(.65,0,.35,1) .25s}
.ox-mo #crisis .is-in .ox-flow svg,.ox-mo #crisis.is-in .ox-flow svg{clip-path:inset(0 0 0 0)}
.ox-mo #crisis :is(.ox-flow__n,.ox-flow__t,.ox-flow__end){transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .55s var(--punch)}
.ox-mo #crisis .ox-flow__t{transition-delay:calc(.9s + var(--i)*18ms)}
.ox-mo #crisis .ox-flow__n{transition-delay:calc(1.5s + var(--i)*60ms)}
.ox-mo #crisis .ox-flow__end{transition-delay:calc(2.1s + var(--i)*30ms)}
.ox-mo #crisis.is-in :is(.ox-flow__n,.ox-flow__t,.ox-flow__end){transform:none}
.ox-mo #crisis.is-in .ox-flow__u{opacity:.9;stroke-dasharray:.035 .965;animation:ox-money 3.4s linear infinite;animation-delay:calc(2.4s + var(--i)*-.23s)}
@keyframes ox-money{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.ox-mo #crisis.is-in .ox-flow__x--lost{animation:ox-lost 2.2s ease-in-out 3s infinite alternate}
@keyframes ox-lost{to{opacity:.35}}
/* ledger: top rule draws, Zero slides in from the right and its number punches */
.ox #crisis .ox-stats{position:relative}
.ox-mo #crisis .ox-stats{border-top-color:transparent}
.ox-mo #crisis .ox-stats::before{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease) .2s}
.ox-mo #crisis.is-in .ox-stats::before{transform:none}
.ox #crisis .ox-stats li:last-child{position:relative;box-shadow:none}
.ox #crisis .ox-stats li:last-child::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--hot)}
.ox-mo #crisis .ox-stats li:last-child::before{transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease) 1.1s}
.ox-mo #crisis.is-in .ox-stats li:last-child::before{transform:none}
.ox-mo #crisis .ox-stats li.ox-rv:last-child{transform:translate3d(70px,0,0)}
.ox-mo #crisis.is-in .ox-stats li.ox-rv:last-child{transform:none}
.ox-mo #crisis .ox-stats li:last-child .ox-stats__n{display:inline-block;transform:scale(.5) rotate(-4deg);transform-origin:0 80%;transition:transform .9s var(--punch) 1.3s}
.ox-mo #crisis.is-in .ox-stats li:last-child .ox-stats__n{transform:none}
/* case field: an audit scan sweeps the grid, then every hollow cell flashes once */
.ox #crisis .ox-field__grid{position:relative;container-type:inline-size}
.ox-mo #crisis .ox-field__grid::after{content:"";position:absolute;top:-6px;bottom:-6px;left:-4px;width:4px;background:var(--hot);box-shadow:0 0 0 6px rgba(224,122,47,.18);opacity:0;pointer-events:none}
.ox-mo #crisis .ox-field.is-play .ox-field__grid::after{animation:ox-scan 1.5s cubic-bezier(.65,0,.35,1) 1.9s both}
@keyframes ox-scan{0%{opacity:1;transform:translateX(0)}88%{opacity:1}100%{opacity:0;transform:translateX(calc(100cqw + 4px))}}
.ox-mo #crisis .ox-field.is-play i.f-none{animation:ox-hollow .9s var(--punch) calc(2.1s + var(--d,0ms) * .9) forwards}
@keyframes ox-hollow{0%{transform:none}45%{transform:scale(1.35);background:rgba(224,122,47,.55)}100%{transform:none;background:rgba(224,122,47,.08)}}
@media (max-width:767px){
  .ox #crisis .ox-flow{padding-top:0}
  .ox-flow__l{position:static;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-bottom:14px;font-size:14px}
  .ox-flow__l span{position:static;transform:none!important;white-space:normal}
  .ox-flow__l .l-out{grid-column:1/-1;width:auto}
  .ox-flow__l b{font-size:19px}
}
/* ===== end CRISIS-GLORY 3 ===== */
/* CRISIS-GLORY 3b: stronger "unrecorded" exits, bigger trail labels */
.ox-flow__x--lost{stroke-width:3;stroke-dasharray:9 6}
.ox-flow__l{font-size:16px}
.ox-flow__l b{font-size:30px}
.ox-flow__l .l-out{font-size:15px;top:-10px}
.ox #crisis .ox-flow{padding-top:64px}
@media (max-width:767px){.ox-flow__l b{font-size:21px}.ox-flow__l{font-size:14px}.ox #crisis .ox-flow{padding-top:0}}
.ox #crisis .ox-flow svg{aspect-ratio:1200/320}
.ox-flow svg :is(path){vector-effect:non-scaling-stroke}
.ox-flow__in{stroke-width:22}
@media (max-width:767px){.ox #crisis .ox-flow svg{aspect-ratio:auto;height:170px}.ox-flow__in{stroke-width:14}}
/* CRISIS-CUTS (17 Oct 2026, Marco: "yes to all 4"): kickers, 01-04 indexes and the field note removed from the markup */
.ox #crisis .ox-stats li{grid-template-columns:minmax(0,1fr)}
.ox #crisis .ox-stats li:last-child{padding-left:32px}
.ox #crisis .ox-crisis__r{padding-top:6px}
@media (max-width:767px){.ox #crisis .ox-stats li{grid-template-columns:minmax(0,1fr)}.ox #crisis .ox-stats li:last-child{padding-left:20px}}

/* ===== DESERT-GLORY 1 (17 Oct 2026, local only): "the desert chart". The real bars become the centrepiece; the
   years with no data fill with sand; a tracking heartbeat flatlines at 2021. Terminal becomes a light record card. ===== */
.ox #desert .ox-desert{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:"c c" "f t";gap:clamp(28px,3vw,48px) clamp(28px,4vw,64px);align-items:start;margin-top:clamp(40px,4.4vw,72px)}
.ox #desert .ox-chart{grid-area:c;position:relative;background:none;padding:0}
.ox #desert .ox-chart .ox-h4{font-size:clamp(22px,2vw,30px);max-width:none;margin-bottom:8px}
.ox #desert .ox-bars{position:relative;z-index:2;height:clamp(260px,26vw,380px);gap:clamp(10px,1.6vw,24px);margin:24px 0 40px;border-bottom:2px solid rgba(255,255,255,.5)}
.ox #desert .ox-bars li::after{height:calc(var(--v,0)*clamp(170px,19vw,290px));background:linear-gradient(180deg,var(--green-hi),var(--green));box-shadow:0 0 0 1px rgba(63,191,132,.35)}
.ox #desert .ox-bars b{font-size:clamp(24px,2.4vw,38px);font-weight:900}
.ox #desert .ox-bars span{font:600 14px/1 var(--body);letter-spacing:.04em;color:#C9D2DE}
.ox #desert .ox-bars .is-na::after{height:0;border:0}
.ox #desert .ox-bars .is-na b{font-size:clamp(16px,1.3vw,20px);color:var(--hot);margin-bottom:clamp(120px,12vw,150px);letter-spacing:.04em}
.ox #desert .ox-chart figcaption{font:800 15px/1.3 var(--body);letter-spacing:.08em;color:var(--hot)}
.ox-dune{position:absolute;z-index:1;left:0;right:0;bottom:calc(40px + 2px + 14px + 40px);height:clamp(260px,26vw,380px);width:100%;pointer-events:none}
.ox #desert .ox-dune{bottom:auto;top:calc(var(--h4h,40px) + 24px)}
.ox-dune path,.ox-dune circle{vector-effect:non-scaling-stroke}
.ox-dune .d-back{fill:rgba(224,122,47,.16)}
.ox-dune .d-front{fill:rgba(224,122,47,.32)}
.ox-dune .d-grain{fill:#F2B183;opacity:.7}
.ox-dune .d-beat{fill:none;stroke:var(--green-hi);stroke-width:3;stroke-linejoin:round}
.ox-dune .d-flat{fill:none;stroke:url(#oxFlat);stroke-width:3;stroke-dasharray:10 8}
.ox-dune .d-dot{fill:var(--hot);transform-box:fill-box;transform-origin:center}
/* motion, armed by ox.js chart() (is-arm / is-play) and the MOTION-1 gate */
.ox-mo #desert .ox-chart.is-arm .d-beat{stroke-dasharray:1;stroke-dashoffset:1}
.ox-mo #desert .ox-chart.is-play .d-beat{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1) .3s}
.ox-mo #desert .ox-chart.is-arm .d-flat{opacity:0}
.ox-mo #desert .ox-chart.is-play .d-flat{opacity:1;transition:opacity .6s linear 1.9s}
.ox-mo #desert .ox-chart.is-arm .d-dot{transform:scale(0)}
.ox-mo #desert .ox-chart.is-play .d-dot{transform:none;transition:transform .5s var(--punch) 1.85s;animation:ox-ping 2.4s ease-out 2.6s infinite}
@keyframes ox-ping{0%{opacity:1}60%{opacity:.25}100%{opacity:1}}
.ox-mo #desert .ox-chart.is-arm :is(.d-back,.d-front){transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}
.ox-mo #desert .ox-chart.is-play :is(.d-back,.d-front){transform:none;transition:transform 1.4s cubic-bezier(.22,1,.36,1) 1.2s}
.ox-mo #desert .ox-chart.is-play .d-front{transition-delay:1.45s}
.ox-mo #desert .ox-chart.is-play .d-grain{animation:ox-drift 5.5s linear infinite;animation-delay:calc(var(--i)*-.37s)}
@keyframes ox-drift{0%{transform:translate(-30px,6px);opacity:0}20%{opacity:.8}80%{opacity:.8}100%{transform:translate(60px,-10px);opacity:0}}
/* figures + the tracked-record card */
.ox #desert .ox-figs{grid-area:f;margin-top:0;grid-template-columns:repeat(3,minmax(0,1fr))}
.ox #desert .ox-figs b{font-weight:900;font-size:clamp(44px,4.6vw,76px)}
.ox #desert .ox-figs li:nth-child(3) b{color:var(--hot)}
.ox #desert .ox-term{grid-area:t;background:#fff;border:0;border-top:6px solid var(--green-hi);box-shadow:14px 14px 0 rgba(63,191,132,.28);margin:0 14px 14px 0}
.ox #desert .ox-term figcaption{border-bottom:1px solid var(--line);color:var(--muted);font:700 12px/1.3 var(--body);letter-spacing:.08em}
.ox #desert .ox-term figcaption>span:last-child{color:var(--green-dk)}
.ox #desert .ox-term pre{color:var(--ink);font-size:13.5px;line-height:1.7;padding:18px 20px 20px}
.ox #desert .ox-term .c-p{color:var(--green-dk)}
.ox #desert .ox-term .c-t{color:#A9501A;font-weight:700}
.ox #desert .ox-closer{font-size:clamp(34px,4.2vw,64px);max-width:20ch}
@media (max-width:1024px){.ox #desert .ox-desert{grid-template-columns:minmax(0,1fr);grid-template-areas:"c" "f" "t"}}
@media (max-width:767px){
  .ox #desert .ox-bars{height:240px;gap:6px}
  .ox #desert .ox-bars b{font-size:18px}
  .ox #desert .ox-bars span{font-size:12px}
  .ox #desert .ox-bars .is-na b{font-size:13px;margin-bottom:96px}
  .ox-dune{height:240px}
  .ox #desert .ox-figs{grid-template-columns:minmax(0,1fr)}
  .ox #desert .ox-term{box-shadow:8px 8px 0 rgba(63,191,132,.28);margin:0 8px 8px 0}
  .ox #desert .ox-term pre{font-size:12px}
}
/* ===== end DESERT-GLORY 1 ===== */
/* DESERT-GLORY 1b: dunes share the bars' grid cell so they sit exactly on the axis */
.ox #desert .ox-chart{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "b" "c"}
.ox #desert .ox-chart .ox-h4{grid-area:h}
.ox #desert .ox-chart .ox-bars{grid-area:b}
.ox #desert .ox-chart figcaption{grid-area:c}
.ox #desert .ox-dune{grid-area:b;position:relative;inset:auto;top:auto;bottom:auto;height:auto;align-self:stretch;margin:24px 0 42px;width:auto}
/* DESERT-GLORY 2: heartbeat above the bars (beats only on years with data), shorter bars, tighter section */
.ox #desert .ox-bars li::after{height:calc(var(--v,0)*clamp(140px,15vw,220px))}
.ox #desert .ox-bars{height:clamp(240px,23vw,330px)}
.ox #desert .ox-quote{margin-bottom:clamp(28px,3vw,44px)}
.ox #desert .ox-desert{margin-top:clamp(32px,3.4vw,56px)}
.ox #desert .ox-closer{margin-top:clamp(32px,3.4vw,48px)}
@media (max-width:767px){.ox #desert .ox-bars{height:220px}.ox #desert .ox-bars li::after{height:calc(var(--v,0)*120px)}.ox #desert .ox-bars .is-na b{margin-bottom:80px}}

/* ===== SCROLL-1 (17 Oct 2026, local only; Marco: "the animation goes up when I scroll down").
   Scroll-linked, scrubbed with the scrollbar (reverses when scrolling back up). Uses the separate `translate`
   property so it stacks on the one-shot reveal. Native CSS scroll timelines; browsers without them keep MOTION-1 only.
   Gated on .ox-mo, so reduced-motion visitors get none of it. ===== */
@supports (animation-timeline: view()) {
  .ox-mo .ox-sx{animation:ox-sx linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
  @keyframes ox-sx{from{translate:0 var(--sx,70px)}to{translate:0 0}}
  /* photos drift slower than the page (parallax) */
  .ox-mo .ox-px{scale:1.18;animation:ox-px linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes ox-px{from{translate:0 -7%}to{translate:0 7%}}
  /* hero: card lifts away faster than the scroll, photo sinks slower */
  .ox-mo .ox-hero__card{animation:ox-heroup linear both;animation-timeline:scroll(root);animation-range:0 85vh}
  @keyframes ox-heroup{to{translate:0 -120px;opacity:.15}}
  .ox-mo .ox-hero__img{animation:ox-settle 2s var(--ease) both,ox-herosink linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}
  @keyframes ox-herosink{to{translate:0 18%}}
  /* reading-progress bar across the top of the page */
  .ox-prog{position:fixed;left:0;right:0;top:0;z-index:400;height:4px;background:var(--hot);transform-origin:0 50%;animation:ox-prog linear both;animation-timeline:scroll(root);pointer-events:none}
  @keyframes ox-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
.ox-prog{display:none}
@supports (animation-timeline: view()) {.ox-mo .ox-prog{display:block}}
/* ===== end SCROLL-1 ===== */
/* SCROLL-1b: clip, not hidden, so photo bands do not become their own scroll containers (view() timelines need the page) */
.ox-mo :is(.ox-pband,.ox-film,.ox-band){overflow:clip}
/* DESERT-GLORY 2b: dunes pinned to the bars height (an SVG with auto height follows its viewBox ratio, not the grid stretch) */
.ox #desert .ox-dune{align-self:start;height:clamp(240px,23vw,330px);margin:24px 0 0}
@media (max-width:767px){.ox #desert .ox-dune{height:220px}}
/* DESERT-CUTS (17 Oct 2026, Marco: "yes to 1, 2, 3, 4 and 5"): kicker, lede, $24B + 2021 figures, chart caption and code card removed */
.ox #desert .ox-desert{grid-template-columns:minmax(0,1fr);grid-template-areas:"c" "f"}
.ox #desert .ox-figs{grid-template-columns:minmax(0,1fr);border-top:0;margin-top:-8px}
.ox #desert .ox-figs li{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;padding:0}
.ox #desert .ox-figs li>span{font-size:19px;margin:0}
.ox #desert .ox-chart .ox-bars{margin-bottom:36px}

/* ===== SYSTEM-GLORY 1 (17 Oct 2026, local only): "the iron gate". A handoff track from Sent to Served sits over the
   four requirement cards; scrolling drives a case token along it, each barrier arm lifts and its card lights.
   Default (no scroll timelines, reduced motion, no JS) = finished state: every gate open, every card lit. ===== */
#system{view-timeline-name:--sys}
.ox-gate{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;margin:clamp(28px,3vw,44px) 0 6px}
.ox-gate__l{font:900 15px/1 var(--disp);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ox-gate__l--end{color:var(--green-dk)}
.ox-gate__track{position:relative;height:64px;container-type:inline-size}
.ox-gate__track::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;background:repeating-linear-gradient(90deg,var(--line) 0 14px,transparent 14px 22px)}
.ox-gate__fill{position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;background:var(--green);transform-origin:0 50%}
.ox-gate__g{position:absolute;left:var(--x);top:6px;bottom:6px;width:0}
.ox-gate__g::before{content:"";position:absolute;left:-5px;top:0;bottom:0;width:10px;background:var(--ink)}
.ox-gate__g i{position:absolute;left:0;top:8px;width:92px;height:10px;margin-left:-46px;background:repeating-linear-gradient(90deg,var(--green) 0 14px,#fff 14px 22px);border:2px solid var(--green);transform-origin:46px 50%;transform:rotate(-78deg)}
.ox-gate__tok{position:absolute;left:0;top:50%;width:26px;height:26px;margin:-13px 0 0;border-radius:50%;background:var(--hot);box-shadow:0 0 0 6px rgba(224,122,47,.22);translate:calc(100cqw - 26px) 0}
/* desktop: four cards in one row so each gate stands over its card */
@media (min-width:1025px){
  .ox #system .ox-rail{grid-auto-columns:25%;overflow:visible}
  .ox #system .ox-rail>li{padding:22px 26px 10px;border-left:1px solid var(--line);position:relative}
  .ox #system .ox-rail>li:first-child{padding-left:0;border-left:0}
  .ox #system .ox-rail-ctl{display:none}
}
.ox #system .ox-rail>li::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--green)}
.ox #system .ox-rail>li{position:relative}
.ox #system .ox-rail .ox-tag{transition:background-color .3s,color .3s}
/* scroll-driven: the token travels while the section crosses the screen */
@supports (animation-timeline: view()) {
  .ox-mo .ox-gate__tok{animation:ox-tok linear both;animation-timeline:--sys;animation-range:cover 22% cover 62%}
  @keyframes ox-tok{from{translate:0 0}to{translate:calc(100cqw - 26px) 0}}
  .ox-mo .ox-gate__fill{animation:ox-fill linear both;animation-timeline:--sys;animation-range:cover 22% cover 62%}
  @keyframes ox-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .ox-mo .ox-gate__g i{animation:ox-arm linear both;animation-timeline:--sys}
  .ox-mo .ox-gate__g:nth-child(2) i{animation-range:cover 24% cover 28%}
  .ox-mo .ox-gate__g:nth-child(3) i{animation-range:cover 34% cover 38%}
  .ox-mo .ox-gate__g:nth-child(4) i{animation-range:cover 44% cover 48%}
  .ox-mo .ox-gate__g:nth-child(5) i{animation-range:cover 54% cover 58%}
  @keyframes ox-arm{from{transform:rotate(0);background:repeating-linear-gradient(90deg,var(--hot) 0 14px,#fff 14px 22px);border-color:var(--hot)}to{transform:rotate(-78deg)}}
  .ox-mo #system .ox-rail>li::before{transform-origin:0 50%;animation:ox-lit linear both;animation-timeline:--sys}
  .ox-mo #system .ox-rail>li:nth-child(1)::before{animation-range:cover 24% cover 30%}
  .ox-mo #system .ox-rail>li:nth-child(2)::before{animation-range:cover 34% cover 40%}
  .ox-mo #system .ox-rail>li:nth-child(3)::before{animation-range:cover 44% cover 50%}
  .ox-mo #system .ox-rail>li:nth-child(4)::before{animation-range:cover 54% cover 60%}
  @keyframes ox-lit{from{transform:scaleX(0);background:var(--hot)}to{transform:scaleX(1)}}
}
@media (max-width:767px){
  .ox-gate{gap:10px}
  .ox-gate__l{font-size:12px}
  .ox-gate__track{height:52px}
  .ox-gate__g i{width:56px;margin-left:-28px;transform-origin:28px 50%;height:8px}
  .ox-gate__tok{width:20px;height:20px;margin-top:-10px}
}
/* ===== end SYSTEM-GLORY 1 ===== */
/* SYSTEM-GLORY 2: time the journey to the track itself (visible the whole way), shared to the cards via timeline-scope */
#system{view-timeline-name:none;timeline-scope:--sys}
.ox-gate{view-timeline-name:--sys}
@supports (animation-timeline: view()) {
  .ox-mo .ox-gate__tok,.ox-mo .ox-gate__fill{animation-range:cover 20% cover 70%}
  .ox-mo .ox-gate__g:nth-child(2) i{animation-range:cover 25% cover 29%}
  .ox-mo .ox-gate__g:nth-child(3) i{animation-range:cover 37% cover 41%}
  .ox-mo .ox-gate__g:nth-child(4) i{animation-range:cover 50% cover 54%}
  .ox-mo .ox-gate__g:nth-child(5) i{animation-range:cover 62% cover 66%}
  .ox-mo #system .ox-rail>li:nth-child(1)::before{animation-range:cover 26% cover 32%}
  .ox-mo #system .ox-rail>li:nth-child(2)::before{animation-range:cover 39% cover 45%}
  .ox-mo #system .ox-rail>li:nth-child(3)::before{animation-range:cover 51% cover 57%}
  .ox-mo #system .ox-rail>li:nth-child(4)::before{animation-range:cover 64% cover 70%}
}
/* push: a stronger head, the tags turn green as their gate opens (static green = finished state) */
.ox #system .ox-rail .ox-tag{background:var(--green);color:#fff}
.ox #system .ox-rail .ox-h3{font-size:clamp(22px,1.9vw,28px)}
.ox #system .ox-gate__track::after{content:"";position:absolute;right:-4px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(46,125,91,.2)}

/* ===== MOTION-2 (17 Oct 2026, local only; Marco: "I NEED MORE ANIMATION GIVE ME MORE"). Word-split headings, hero load + Ken Burns,
   hover lift, comparison wipe, band-to-band ground fade. Gated on .ox-ws / .ox-mo (ox.js adds them only without reduced motion). ===== */
.ox-w{display:inline-block;overflow:clip;vertical-align:top;padding:.08em 0 .14em;margin:-.08em 0 -.14em}
.ox-w>i{display:inline-block;font-style:normal}
/* hero H1: words rise on load */
.ox-js .ox-h1.ox-ws .ox-w>i{animation:ox-wrise .95s var(--ease) both;animation-delay:calc(.12s + var(--w)*75ms)}
@keyframes ox-wrise{from{translate:0 112%}}
/* section headings: one-shot first, scrubbed where scroll timelines exist */
.ox-mo .ox-h2.ox-ws .ox-w>i{translate:0 112%;transition:translate .85s var(--ease) calc(var(--w)*60ms)}
.ox-mo .is-in .ox-h2.ox-ws .ox-w>i{translate:0 0}
.ox-mo .ox-h2.ox-ws.ox-rv{transform:none}
/* hero photo: slow Ken Burns after the settle (scale property stacks on the scroll sink) */
.ox-mo .ox-hero__img{animation:ox-settle 2s var(--ease) both,ox-kb 28s ease-in-out 2s infinite alternate}
@keyframes ox-kb{from{scale:1}to{scale:1.1}}
@supports (animation-timeline: view()) {
  .ox-mo .ox-h2.ox-ws .ox-w>i{translate:0 0;transition:none;animation:ox-wrs linear both;animation-timeline:view();animation-range:entry calc(4% + var(--w)*2.4%) entry calc(36% + var(--w)*2.4%)}
  @keyframes ox-wrs{from{translate:0 112%}}
  .ox-mo .ox-h2.ox-ws.ox-sx{animation:none;translate:none}
  .ox-mo .ox-hero__img{animation:ox-settle 2s var(--ease) both,ox-herosink linear both,ox-kb 28s ease-in-out 2s infinite alternate;animation-timeline:auto,scroll(root),auto;animation-range:normal,0 100vh,normal}
  /* ground fade: the band wears the colour above it, then settles into its own */
  .ox-mo .ox-gr{animation:ox-ground linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  @keyframes ox-ground{from{background-color:var(--from)}}
  /* comparison: each row wipes left to right, the verdict column last */
  .ox-mo .ox-vs tbody :is(th,td){clip-path:inset(0 100% 0 0);animation:ox-wipe linear both;animation-timeline:view();transition:none}
  .ox-mo .ox-vs tbody th{animation-range:cover 0% cover 9%}
  .ox-mo .ox-vs tbody td:not(.is-win){animation-range:cover 5% cover 16%}
  .ox-mo .ox-vs tbody td.is-win{animation-range:cover 12% cover 26%}
  @keyframes ox-wipe{to{clip-path:inset(0 0 0 0)}}
}
/* comparison wipe where scroll timelines are missing: one-shot, staggered by row and column */
.ox-mo .ox-vs tbody :is(th,td){clip-path:inset(0 100% 0 0);transition:clip-path .85s var(--ease) calc(var(--r,0)*130ms + var(--c,0)*200ms)}
.ox-vs tbody tr:nth-child(2){--r:1}.ox-vs tbody tr:nth-child(3){--r:2}.ox-vs tbody tr:nth-child(4){--r:3}.ox-vs tbody tr:nth-child(5){--r:4}
.ox-vs tbody td:not(.is-win){--c:1}.ox-vs tbody td.is-win{--c:2}
.ox-mo .is-in .ox-vs tbody :is(th,td){clip-path:inset(0 0 0 0)}
@supports (animation-timeline: view()) {.ox-mo .is-in .ox-vs tbody :is(th,td){clip-path:inset(0 100% 0 0)}}
/* hover lift + arrow slide (pointer devices, motion allowed) */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .ox .ox-btn{transition:background-color .2s,color .2s,box-shadow .2s,transform .15s,translate .25s var(--ease)}
  .ox .ox-btn:hover{translate:0 -3px}
  .ox .ox-btn:active{translate:0 0}
  .ox-card__box{transition:translate .35s var(--ease)}
  .ox-card:hover .ox-card__box{translate:0 -8px}
  .ox .ox-tile{transition:translate .3s var(--ease),background-color .2s,color .2s}
  .ox .ox-tile:hover{translate:-10px 0}
  .ox-gpv__grid li{transition:background-color .25s}
  .ox-gpv__grid li:hover{background:#12223B}
}
/* ===== end MOTION-2 ===== */

/* ===== GLASS-GLORY 1 (17 Oct 2026, local only): "the pane clears". The specimen panel's four readouts start frosted (blurred) and a
   pane of light sweeps across; each readout clears as it passes, the zero last with a green rule. Scrubbed with the scrollbar.
   Default (no timelines, no JS, reduced motion) = every readout already clear. Then the three cards stack: each pins, and shrinks as the next scrolls over. ===== */
.ox-gpv{position:relative;overflow:clip;isolation:isolate}
.ox-gpv::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;transform:translateX(135%);
  background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.06) 45%,rgba(255,255,255,.26) 50%,rgba(255,255,255,.06) 55%,transparent 62%)}
.ox-gpv__grid li{position:relative}
.ox-gpv__grid li:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--green-hi);transform-origin:0 50%}
@supports (animation-timeline: view()) {
  .ox-mo .ox-gpv::after{animation:ox-pane linear both;animation-timeline:view();animation-range:cover 14% cover 62%}
  @keyframes ox-pane{from{transform:translateX(-135%)}to{transform:translateX(135%)}}
  .ox-mo .ox-gpv__grid li{animation:ox-frost linear both;animation-timeline:view()}
  .ox-mo .ox-gpv__grid li:nth-child(1){animation-range:cover 25% cover 36%}
  .ox-mo .ox-gpv__grid li:nth-child(2){animation-range:cover 30% cover 41%}
  .ox-mo .ox-gpv__grid li:nth-child(3){animation-range:cover 35% cover 46%}
  .ox-mo .ox-gpv__grid li:nth-child(4){animation-range:cover 40% cover 51%}
  @keyframes ox-frost{from{filter:blur(13px);opacity:.3}to{filter:blur(0);opacity:1}}
  .ox-mo .ox-gpv__grid li:last-child::after{animation:ox-rule linear both;animation-timeline:view();animation-range:cover 48% cover 56%}
  @keyframes ox-rule{from{transform:scaleX(0)}}
}
@media (min-width:900px){
  .ox #glass .ox-cards{grid-template-columns:minmax(0,1fr);gap:0;padding-bottom:6px;view-timeline-name:--glc}
  .ox #glass .ox-card{position:sticky;top:calc(112px + var(--k,0)*20px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;
    background:#fff;border:1px solid var(--line);margin-bottom:34px;transform-origin:50% 0}
  .ox #glass .ox-card:nth-child(2){--k:1}.ox #glass .ox-card:nth-child(3){--k:2}
  .ox #glass .ox-card__top{grid-row:1/span 2;height:auto;min-height:250px}
  .ox #glass .ox-card__box{margin:30px 32px 0;align-self:end}
  .ox #glass .ox-card>p{padding:18px 32px 30px;font-size:18px;align-self:start}
  .ox #glass .ox-card__ghost{font-size:clamp(110px,10vw,150px)}
}
@media (min-width:900px) and (hover:hover){.ox #glass .ox-card:hover .ox-card__box{translate:0 0}}
@supports (animation-timeline: view()) {
  @media (min-width:900px){
    .ox-mo #glass .ox-card.ox-sx{animation:ox-stack linear both;animation-timeline:--glc;translate:none}
    .ox-mo #glass .ox-card:nth-child(1){animation-range:cover 24% cover 50%}
    .ox-mo #glass .ox-card:nth-child(2){animation-range:cover 46% cover 72%}
    .ox-mo #glass .ox-card:nth-child(3){animation:none}
    @keyframes ox-stack{to{scale:.93;filter:brightness(.9)}}
  }
}
/* ===== end GLASS-GLORY 1 ===== */

/* GLASS-GLORY 2 (17 Oct 2026, local only): one animated graphic per card, scrubbed with the scrollbar, finished state by default.
   Open = shutters slide apart on the ledger rows; Proof = bars rise (the short one is the bad number, still published) and the tick draws;
   Private = fourteen separate dots dissolve into one aggregate bar (no individual survives). */
.ox-gl{position:absolute;left:22px;bottom:18px;width:min(58%,300px);height:auto;aspect-ratio:2/1;z-index:1;overflow:visible}
.ox-gl *{vector-effect:non-scaling-stroke}
.ox-gl__fr{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.5}
.ox-gl__rows rect{fill:rgba(255,255,255,.78)}.ox-gl__rows .is-hot{fill:var(--hot)}
.ox-gl__sh{fill:var(--navy);stroke:rgba(255,255,255,.5);stroke-width:1.5;transform-box:fill-box}
.ox-gl__sh--l{transform:translateX(-102%)}.ox-gl__sh--r{transform:translateX(102%)}
.ox-gl__base{stroke:#fff;stroke-width:2;fill:none}
.ox-gl__bars rect{fill:rgba(255,255,255,.88);transform-box:fill-box;transform-origin:50% 100%}
.ox-gl__bars .is-bad{fill:var(--ink)}
.ox-gl__tick{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:square;stroke-dasharray:1;stroke-dashoffset:0}
.ox-gl__dots circle{fill:rgba(255,255,255,.9);transform-box:fill-box;transform-origin:50% 50%;opacity:0;transform:scale(0)}
.ox-gl__agg{fill:var(--ink);transform-box:fill-box;transform-origin:0 50%}
@supports (animation-timeline: view()) {
  .ox-mo .ox-gl__sh--l{animation:ox-shl linear both;animation-timeline:view();animation-range:cover 22% cover 46%}
  .ox-mo .ox-gl__sh--r{animation:ox-shr linear both;animation-timeline:view();animation-range:cover 22% cover 46%}
  @keyframes ox-shl{from{transform:none}}@keyframes ox-shr{from{transform:none}}
  .ox-mo .ox-gl__rows rect{animation:ox-rowin linear both;animation-timeline:view();animation-range:cover 30% cover 50%}
  @keyframes ox-rowin{from{opacity:0}}
  .ox-mo .ox-gl__bars rect{animation:ox-bar linear both;animation-timeline:view()}
  .ox-mo .ox-gl__bars rect:nth-child(1){animation-range:cover 22% cover 38%}
  .ox-mo .ox-gl__bars rect:nth-child(2){animation-range:cover 26% cover 42%}
  .ox-mo .ox-gl__bars rect:nth-child(3){animation-range:cover 30% cover 46%}
  .ox-mo .ox-gl__bars rect:nth-child(4){animation-range:cover 34% cover 50%}
  .ox-mo .ox-gl__bars rect:nth-child(5){animation-range:cover 38% cover 54%}
  @keyframes ox-bar{from{transform:scaleY(0)}}
  .ox-mo .ox-gl__tick{animation:ox-tick linear both;animation-timeline:view();animation-range:cover 46% cover 60%}
  @keyframes ox-tick{from{stroke-dashoffset:1}}
  /* dots: shown, then dissolve; the aggregate bar grows as they go */
  .ox-mo .ox-gl__dots circle{opacity:1;transform:none;animation:ox-dot linear both;animation-timeline:view();animation-range:cover 28% cover 48%}
  .ox-mo .ox-gl__dots circle:nth-child(3n){animation-range:cover 32% cover 50%}
  .ox-mo .ox-gl__dots circle:nth-child(3n+1){animation-range:cover 24% cover 44%}
  @keyframes ox-dot{to{opacity:0;transform:scale(0)}}
  .ox-mo .ox-gl__agg{animation:ox-agg linear both;animation-timeline:view();animation-range:cover 38% cover 56%}
  @keyframes ox-agg{from{transform:scaleX(.04)}}
}
/* ===== end GLASS-GLORY 2 ===== */
/* GLASS-GLORY 2b: clip, not hidden, so the card graphics read the PAGE scroll (hidden made the card top its own scroller and froze view()) */
.ox-card__top{overflow:clip}
@supports (animation-timeline: view()) {
  .ox-mo .ox-gl__dots circle{animation-range:cover 26% cover 46%}
  .ox-mo .ox-gl__dots circle:nth-child(3n){animation-range:cover 30% cover 50%}
  .ox-mo .ox-gl__dots circle:nth-child(3n+1){animation-range:cover 22% cover 42%}
  .ox-mo .ox-gl__agg{animation-range:cover 40% cover 58%}
}
/* GLASS-GLORY 2c: phone, graphic sits in the upper band, clear of the heading box that overlaps the card top */
@media (max-width:899px){.ox-gl{bottom:auto;top:38px;left:16px;width:118px}}
/* ===== CRISIS-GLORY 4 (16 Oct 2026, local only; Marco: "the squares should be moving ... the numbers should be flipping").
   The case field becomes a live dark panel: cases keep advancing, a trace crosses the grid and either lands on a
   recorded outcome or drops off the record (87 of 256 stay hollow), a scan beam sweeps it. The four figures go back to
   a 2 x 2 card grid, roll like an odometer to the real value (ox.js record()), and each card carries one graphic from
   its own figure. Orange stays reserved for "unrecorded"; at-risk is amber. Finished state without JS / reduced motion. */
.ox #crisis .ox-field{background:radial-gradient(120% 90% at 0% 0%,rgba(63,191,132,.14),transparent 55%),radial-gradient(90% 80% at 100% 100%,rgba(224,122,47,.12),transparent 60%),var(--ink);color:#E6E9EE;padding:22px 24px 24px;margin-top:40px;border-top:0;position:relative;grid-template-columns:minmax(0,1fr);grid-template-areas:"cap" "grid" "key" "meter";grid-template-rows:auto auto auto auto;column-gap:0;box-shadow:0 30px 60px -36px rgba(11,23,41,.7);overflow:hidden}
.ox #crisis .ox-field::after{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--green-hi),var(--hot))}
.ox #crisis .ox-field figcaption{font:600 12.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#AEB6C2;margin:6px 0 18px}
.ox #crisis .ox-field figcaption span:first-child{display:inline-flex;align-items:center;gap:10px}
.ox #crisis .ox-field figcaption span:first-child::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green-hi);box-shadow:0 0 0 0 rgba(63,191,132,.6)}
.ox #crisis .ox-field figcaption span:last-child{font-weight:700;color:var(--soft)}
.ox #crisis .ox-field__grid{gap:4px;padding:10px;background:rgba(255,255,255,.03);outline:1px solid rgba(255,255,255,.08);overflow:hidden}
.ox #crisis .ox-field__grid i{position:relative;border-radius:2px}
.ox #crisis .ox-field .f-open,.ox #crisis .ox-field .k-open{background:var(--green-hi)}
.ox #crisis .ox-field .f-ref,.ox #crisis .ox-field .k-ref{background:#C9D6E3}
.ox #crisis .ox-field .f-home,.ox #crisis .ox-field .k-home{background:#1F8A5E}
.ox #crisis .ox-field .f-risk,.ox #crisis .ox-field .k-risk{background:#F2C14E}
.ox #crisis .ox-field .f-none,.ox #crisis .ox-field .k-none{background:rgba(224,122,47,.1);border:2px dashed var(--hot)}
.ox #crisis .ox-field__key{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));font-size:14.5px;line-height:1.3;color:#C3CAD4;gap:12px 18px;margin-top:18px}
.ox #crisis .ox-field__key li:last-child{color:var(--soft);font-weight:800}
.ox #crisis .ox-field__key i{border-radius:2px}
.ox-field__meter{grid-area:meter;display:flex;height:34px;margin-top:20px;font:700 12.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.ox-field__meter span{position:relative;display:flex;align-items:center;padding:0 12px;overflow:hidden;white-space:nowrap}
.ox-field__meter .m-rec{flex:0 0 66%;background:#1F8A5E;color:#fff}
.ox-field__meter .m-none{flex:1 1 auto;background:repeating-linear-gradient(135deg,rgba(224,122,47,.95) 0 8px,rgba(224,122,47,.7) 8px 16px);color:var(--ink)}
.ox-field__meter b{position:relative;z-index:1;font-weight:800}
/* field motion: the intro (CRISIS-GLORY 3) plays first, then is-live takes over */
.ox-mo #crisis .ox-field__meter span{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.2s var(--ease)}
.ox-mo #crisis .ox-field__meter .m-none{transform-origin:100% 50%}
.ox-mo #crisis .ox-field.is-play .ox-field__meter span{transform:none;transition-delay:2.6s}
.ox-mo #crisis .ox-field.is-play .ox-field__meter .m-none{transition-delay:3s}
.ox-mo #crisis .ox-field.is-live figcaption span:first-child::before{animation:ox-beacon 1.8s ease-out infinite}
.ox-mo #crisis .ox-field.is-live .ox-field__grid::before{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(63,191,132,.22) 85%,rgba(200,255,230,.55) 100%);mix-blend-mode:screen;animation:ox-beam 4.8s linear infinite}
.ox-mo #crisis .ox-field.is-live .ox-field__meter .m-none::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-100%);animation:ox-sheen 3.2s ease-in-out infinite}
.ox-mo #crisis .ox-field.is-play.is-live i.f-none{transform:none;animation:ox-void 3.4s ease-in-out infinite;animation-delay:var(--d,0ms)}
.ox-mo #crisis .ox-field.is-live i{transition:background-color .45s ease,transform .45s var(--punch)}
.ox-mo #crisis .ox-field.is-live i.is-pop{animation:ox-pop .6s var(--punch)}
.ox-mo #crisis .ox-field.is-live i.is-tr{z-index:3;animation:ox-tr .65s ease-out}
.ox-mo #crisis .ox-field.is-play.is-live i.is-drop{z-index:4;animation:ox-drop 1.2s ease-out}
.ox-mo #crisis .ox-field.is-live i.is-land{z-index:4;animation:ox-land 1s ease-out}
@keyframes ox-beacon{0%{box-shadow:0 0 0 0 rgba(63,191,132,.7)}100%{box-shadow:0 0 0 12px rgba(63,191,132,0)}}
@keyframes ox-beam{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
@keyframes ox-sheen{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@keyframes ox-void{0%,100%{box-shadow:0 0 0 0 rgba(224,122,47,0)}50%{box-shadow:0 0 10px 1px rgba(224,122,47,.55)}}
@keyframes ox-pop{0%{transform:scale(1)}40%{transform:scale(1.32);filter:brightness(1.35)}100%{transform:scale(1)}}
@keyframes ox-tr{0%{background:#fff;transform:scale(1.28);box-shadow:0 0 16px 4px rgba(255,255,255,.85)}}
@keyframes ox-drop{0%{background:var(--hot);transform:scale(1.5);box-shadow:0 0 0 0 rgba(224,122,47,.95)}60%{box-shadow:0 0 0 18px rgba(224,122,47,0)}100%{box-shadow:0 0 0 18px rgba(224,122,47,0)}}
@keyframes ox-land{0%{background:#7CF2B9;transform:scale(1.45);box-shadow:0 0 0 0 rgba(63,191,132,.95)}70%{box-shadow:0 0 0 16px rgba(63,191,132,0)}100%{box-shadow:0 0 0 16px rgba(63,191,132,0)}}
/* the four figures: 2 x 2 cards */
.ox #crisis .ox-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;border-top:0}
.ox-mo #crisis .ox-stats::before{display:none}
.ox #crisis .ox-stats li,.ox #crisis .ox-stats li:last-child{display:flex;flex-direction:column;position:relative;overflow:hidden;background:#fff;border:0;margin:0;padding:28px 24px 22px;box-shadow:0 1px 0 var(--line),0 22px 44px -30px rgba(11,23,41,.45);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.ox #crisis .ox-stats li:last-child{background:var(--ink)}
.ox #crisis .ox-stats li:not(:last-child)::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--ink)}
.ox #crisis .ox-stats li:last-child::before{height:6px}
.ox-mo #crisis .ox-stats li.is-arm::before{transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease) .1s}
.ox-mo #crisis .ox-stats li.is-go::before{transform:none}
.ox #crisis .ox-stats__n,.ox #crisis .ox-stats li:last-child .ox-stats__n{display:block;margin:0 0 14px;font:900 clamp(44px,4.3vw,70px)/.92 var(--disp);letter-spacing:-.035em;font-variant-numeric:tabular-nums;transform:none}
.ox #crisis .ox-stats li:last-child .ox-stats__n{font-size:clamp(52px,5.2vw,84px);color:var(--hot)}
.ox #crisis .ox-stats li p{font-size:17px;line-height:1.5;max-width:none;margin:0 0 16px}
.ox #crisis .ox-stats li:last-child p{color:#fff}
.ox #crisis .ox-stats li a{margin-top:auto;font-size:13.5px}
.ox-odo{display:inline-flex;line-height:1;height:1em;overflow:hidden;padding-bottom:.04em}
.ox-odo__r{display:block;height:1em;overflow:hidden}
.ox-odo__s{display:block;white-space:pre;line-height:1;will-change:transform}
.ox-odo__f{display:block;text-align:center}
.ox #crisis .ox-stats__n.is-done .ox-odo{animation:ox-stamp .5s var(--punch)}
@keyframes ox-stamp{0%{transform:scale(1.08)}100%{transform:none}}
/* card graphics */
.ox-sg{display:block;margin:2px 0 16px}
.ox-sg .sg-lab{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;margin-top:8px;font:700 11.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ox-sg .sg-lab span{white-space:nowrap}
.ox-sg--prog .sg-ticks{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:2px;height:26px;align-items:end}
.ox-sg--prog .sg-ticks i{display:block;height:100%;background:var(--navy);border-radius:1px}
.ox-sg--prog .sg-ticks i:nth-child(3n){height:72%}.ox-sg--prog .sg-ticks i:nth-child(4n+1){height:86%}.ox-sg--prog .sg-ticks i:nth-child(5n+2){height:58%}
.ox-sg--prog .sg-pips{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px;margin-top:6px}
.ox-sg--prog .sg-pips i{display:block;height:8px;border-radius:4px;background:var(--green)}
.ox-sg--bar .sg-bar{display:block;position:relative;height:16px;background:#E7E2D9;overflow:hidden}
.ox-sg--bar .sg-bar i{position:absolute;left:0;top:0;bottom:0;width:28%;background:var(--navy);overflow:hidden}
.ox-sg--bar .sg-lab span:first-child{color:var(--ink)}
.ox-sg--ring{position:absolute;top:24px;right:20px;width:clamp(48px,4.4vw,66px);margin:0}
.ox-sg--ring svg{display:block;width:100%;height:auto;transform:rotate(-90deg)}
.ox-sg--ring circle{fill:none;stroke-width:9}
.ox-sg--ring .sg-trk{stroke:#E7E2D9}
.ox-sg--ring .sg-arc{stroke:var(--navy);stroke-dasharray:66 100}
.ox-sg--ekg svg{display:block;width:100%;height:40px;overflow:visible}
.ox-sg--ekg path{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.ox-sg--ekg .sg-base{stroke:rgba(242,177,131,.35)}
.ox-sg--ekg .sg-run{stroke:var(--hot);stroke-dasharray:0 1}
/* card graphic motion: drawn when the card comes in, then a slow loop */
.ox-mo #crisis li.is-arm .sg-ticks i{transform:scaleY(0);transform-origin:50% 100%;transition:transform .5s var(--punch)}
.ox-mo #crisis li.is-arm .sg-pips i{opacity:.15;transform:scale(.4);transition:opacity .3s,transform .45s var(--punch)}
.ox-mo #crisis li.is-arm .sg-bar i{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--ease) .5s}
.ox-mo #crisis li.is-arm .sg-arc{stroke-dasharray:0 100;transition:stroke-dasharray 1.6s var(--ease) .4s}
.ox-mo #crisis li.is-go .sg-ticks i{transform:none;animation:ox-tick 3s ease-in-out infinite}
.ox-mo #crisis li.is-go .sg-pips i{opacity:1;transform:none}
.ox-mo #crisis li.is-go .sg-bar i{transform:none}
.ox-mo #crisis li.is-go .sg-arc{stroke-dasharray:66 100}
.ox-mo #crisis li.is-go .sg-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:ox-sheen 2.8s ease-in-out 2s infinite;transform:translateX(-100%)}
.ox-mo #crisis li.is-go .sg-run{animation:ox-ekg 2.6s linear infinite}
.ox-mo #crisis li.is-go .ox-sg--ring svg{animation:ox-ring 9s linear 2.2s infinite}
@keyframes ox-tick{0%,100%{background:var(--navy)}12%{background:var(--green-hi)}24%{background:var(--navy)}}
@keyframes ox-ekg{0%{stroke-dasharray:0 1;stroke-dashoffset:0}100%{stroke-dasharray:.28 .72;stroke-dashoffset:-.98}}
@keyframes ox-ring{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .ox #crisis .ox-stats li:hover{transform:translateY(-6px);box-shadow:0 1px 0 var(--line),0 34px 60px -30px rgba(11,23,41,.6)}
}
@media (max-width:767px){
  .ox #crisis .ox-field{padding:20px 14px 18px}
  .ox #crisis .ox-field__key{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ox #crisis .ox-field__grid{max-width:none;padding:8px;gap:3px}
  .ox #crisis .ox-field figcaption{flex-wrap:wrap;font-size:11.5px}
  .ox-field__meter{height:auto;flex-direction:column;align-items:stretch;font-size:11.5px}
  .ox-field__meter span{flex:none!important;padding:9px 12px}
  .ox-field__meter .m-rec{width:66%}
  .ox-field__meter .m-none{width:34%;min-width:max-content}
  .ox #crisis .ox-stats{grid-template-columns:minmax(0,1fr);gap:14px}
  .ox #crisis .ox-stats li,.ox #crisis .ox-stats li:last-child{padding:24px 18px 20px}
  .ox #crisis .ox-stats__n{font-size:clamp(46px,13vw,60px)}
  .ox #crisis .ox-stats li:last-child .ox-stats__n{font-size:clamp(54px,16vw,72px)}
}
/* ===== end CRISIS-GLORY 4 ===== */

/* ===== NATURAL-1 (17 Oct 2026, Marco pick: C photo-led) =====
   One corner + shadow system; edge bars, L/offset frames, black heading bars removed;
   photos rounded with one navy grade; cards float with glass blur. Motion/graphics untouched. */
.ox{--r:16px;--r-lg:28px;--r-sm:10px;--sh:0 1px 2px rgba(11,23,41,.06),0 14px 34px -16px rgba(11,23,41,.32);--sh-lg:0 30px 60px -28px rgba(11,23,41,.55);--glass:rgba(255,255,255,.84)}
/* chips -> green words */
.ox .ox-chip,.ox .ox-chip *{background:none;color:var(--green-dk)!important;padding:0}
.ox .ox-dark .ox-chip,.ox .ox-dark .ox-chip *,.ox .ox-navy .ox-chip,.ox .ox-navy .ox-chip *,.ox .ox-sign .ox-chip,.ox .ox-sign .ox-chip *{color:var(--green-hi)!important}
.ox .ox-tag{border-radius:999px;padding:6px 12px 5px}
.ox .ox-btn{border-radius:12px}
.ox .ox-tile{border-radius:var(--r-sm);border-left:0}
.ox .ox-kick::before,.ox .ox-hero__kick::before{border-radius:2px;height:3px}
/* section top stripes */
.ox .ox-dark::before,.ox .ox-navy::before,.ox .ox-sign::before{display:none}
/* hero: graded photo, floating glass card, no L-frame */
.ox .ox-hero__img{filter:saturate(.75) contrast(1.05)}
.ox .ox-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(100deg,rgba(11,23,41,.62),rgba(11,23,41,.12) 60%)}
.ox .ox-hero__panel::before,.ox .ox-hero__panel::after{display:none}
.ox .ox-hero__panel{margin-left:0}
.ox .ox-hero__card{border-radius:var(--r-lg);background:var(--glass);backdrop-filter:blur(16px) saturate(1.2);box-shadow:var(--sh-lg)}
.ox .ox-hero__strip{border-radius:var(--r);overflow:hidden}
/* two ways in: photo panel with floating doors */
.ox .ox-intro .ox-pillars{position:relative;padding:clamp(180px,20vw,300px) clamp(20px,3vw,48px) clamp(24px,3vw,48px);border-radius:var(--r-lg);overflow:hidden;isolation:isolate;box-shadow:var(--sh-lg)}
.ox .ox-intro .ox-pillars::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,23,41,0) 20%,rgba(11,23,41,.72)),url(https://pathfindersforhope.org/wp-content/uploads/pfh-hox/img/pathfinders-hospital-transition.jpg) center 58%/cover}
.ox .ox-door{border-radius:var(--r);background:var(--glass)!important;backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 18px 40px -18px rgba(0,0,0,.5)}
.ox .ox-door::before{display:none}
.ox .ox-door-strip{border-left:0;border-radius:var(--r);background:rgba(11,23,41,.8);backdrop-filter:blur(14px)}
/* help band: inset rounded photo, floating panel */
.ox .ox-band__photo{top:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);left:clamp(16px,2vw,28px);border-radius:var(--r-lg);overflow:hidden}
.ox .ox-band__panel{border-radius:var(--r);box-shadow:var(--sh-lg)}
/* lists, routes, steps, locks, stats */
.ox .ox-route li::before{border-radius:50%}
.ox .ox-steps{border-top-width:1px}
.ox .ox-locks li{border-left:0;border-radius:var(--r);box-shadow:var(--sh)}
.ox .ox-stats li{border-top:0;border-radius:var(--r);box-shadow:var(--sh)}
.ox #crisis .ox-stats li::before{display:none}
.ox .ox-badge::before{border-radius:50%}
.ox .ox-quote{border-left-width:2px;border-left-color:var(--green)}
/* photo bands + film: rounded inset panels */
.ox .ox-pband,.ox .ox-film{border-radius:var(--r-lg);overflow:hidden;margin:clamp(12px,1.6vw,24px)}
.ox .ox-pband__img{filter:saturate(.8)}
.ox .ox-pband__box{border-radius:var(--r);background:var(--glass);backdrop-filter:blur(14px);box-shadow:var(--sh-lg)}
/* graphic containers */
.ox .ox-field{border-top:0;border-radius:var(--r-lg);box-shadow:var(--sh-lg)}
.ox .ox-field__grid{border-radius:var(--r-sm)}
.ox #desert .ox-term,.ox #contact .ox-term--case{border-top:0;border-radius:var(--r);box-shadow:var(--sh-lg);margin:0}
.ox .ox-gate__track,.ox .ox-hand{border-radius:var(--r)}
.ox #system .ox-rail>li{border-radius:var(--r);overflow:hidden}
.ox #system .ox-rail>li::before{height:3px}
.ox .ox-guar{border-radius:var(--r)}
/* the glass */
.ox #glass .ox-gpv{border-radius:var(--r-lg);box-shadow:var(--sh-lg);background:linear-gradient(rgba(11,23,41,.86),rgba(11,23,41,.94)),url(https://pathfindersforhope.org/wp-content/uploads/pfh-hox/img/mission-outreach.png) center 40%/cover}
.ox .ox-gpv__grid{background:none;gap:12px}
.ox .ox-gpv__grid li{border-radius:var(--r);background:rgba(255,255,255,.07);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);overflow:hidden}
.ox .ox-gpv__chips span:not(.ox-kick){border-radius:999px}
.ox .ox-card{border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:var(--sh)}
.ox .ox-card__top .ox-tag{top:14px;left:14px}
.ox .ox-card__box{margin:-28px 14px 0;border-radius:12px;background:var(--glass);backdrop-filter:blur(12px);border-bottom:0;box-shadow:0 8px 20px -10px rgba(11,23,41,.3)}
.ox .ox-card__box .ox-h3{color:var(--ink)}
.ox .ox-card>p{padding:12px 22px 24px}
/* pilot, referral standard, evidence */
.ox .ox-launch{border-left:0;border-radius:var(--r)}
.ox .ox-pick__panel{border-top-width:1px}
.ox #referral-standard .ox-lede{border-left-width:2px;border-left-color:var(--green)}
.ox #referral-standard .ox-guides{border-top:0;border-radius:var(--r-lg);padding:clamp(10px,1.2vw,16px)}
.ox .ox-guides .ox-tl{border-top:0;border-radius:var(--r)}
.ox .ox-ev .ox-note{border-left:0;border-radius:var(--r)}
.ox .ox-ev .ox-rail--src>li,.ox .ox-ev .ox-rail--src>li:first-child,.ox .ox-ev .ox-rail--src>li:last-child{border-top:0;border-radius:var(--r);box-shadow:var(--sh)}
.ox .ox-measure{border-left:0;border-radius:var(--r)}
.ox .ox-pick,.ox .ox-sign{border-radius:var(--r-lg)}
@media (max-width:767px){
  .ox .ox-intro .ox-pillars{padding:160px 12px 12px;border-radius:20px}
  .ox .ox-pband,.ox .ox-film{margin:8px;border-radius:20px}
  .ox .ox-band__photo{position:relative;left:auto;top:auto;bottom:auto;width:auto;height:280px;margin:0 8px 16px}
}
@media (max-width:767px){ /* NATURAL-1b: photo shows people, not the tent roof; doors sit on navy below it */
  .ox .ox-intro .ox-pillars{padding-top:250px;background:var(--ink)}
  .ox .ox-intro .ox-pillars::before{bottom:auto;height:300px;background:linear-gradient(180deg,rgba(11,23,41,0) 55%,var(--ink)),url(https://pathfindersforhope.org/wp-content/uploads/pfh-hox/img/pathfinders-hospital-transition.jpg) center 58%/cover}
}
/* NATURAL-1c: strip children lifted at different rates and overlapped mid-scroll; the strip moves as one */
.ox-mo .ox-door-strip .ox-sx{animation:none;translate:none}
/* NATURAL-1d: hero = outreach photo (portrait), faces kept clear of the card */
.ox .ox-hero__img{object-position:62% 30%}
@media (max-width:767px){.ox .ox-hero__img{object-position:50% 22%}}
@media (max-width:767px){ /* NATURAL-1e: phone hero = photo on top, glass card overlaps its lower edge */
  .ox .ox-hero{padding-top:300px;background:var(--ink)}
  .ox .ox-hero__img{bottom:auto;height:360px;object-position:58% 26%}
  .ox .ox-hero::after{bottom:auto;height:360px;background:linear-gradient(180deg,rgba(11,23,41,.35),rgba(11,23,41,0) 30%,rgba(11,23,41,0) 70%,var(--ink))}
}

/* ox-cmp.css (comparison section) */
/* ===== COMPARE-GLORY 1 (17 Oct 2026, local only): "the handoff lands". Kept in its own sheet while another session edits
   ox.css/ox.js; merge into ox.css before any live write. Undo: remove the <link> to this file and the .ox-hand div.
   One graphic over the table, built from the section's own words: three referrals leave "Sent". Current system: each trail
   goes cold and stops short of an empty ring, one drops into "unknown". Operation Iron Gate: each lands on a node, ticks,
   and one record line joins them. Default (no scroll timelines, reduced motion, no JS) = finished state. ===== */
.ox #compare .ox-hand{display:grid;grid-template-columns:16% 42% 42%;margin:0 0 clamp(6px,1vw,14px);view-timeline-name:--hand}
.ox-hand__p{position:relative;min-width:0}
.ox-hand__p--lost{grid-column:2;padding-right:28px}
.ox-hand__p--win{grid-column:3;padding-left:25px}
.ox-hand svg{display:block;width:100%;height:auto;overflow:visible}
.ox-hand__cap{display:none}
.ox-hand path,.ox-hand line,.ox-hand circle,.ox-hand rect{vector-effect:non-scaling-stroke}
.ox-hand__tail path{fill:none;stroke:url(#ox-cold);stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round}
.ox-hand__arc path{fill:none;stroke-width:3;stroke-linecap:round}
.ox-hand__p--lost .ox-hand__arc path{stroke:var(--on-dk2);stroke-dasharray:.5 1;stroke-dashoffset:0}
.ox-hand__p--win .ox-hand__arc path{stroke:var(--green-hi);stroke-dasharray:1 1;stroke-dashoffset:0}
.ox-hand__end circle{fill:none;stroke:rgba(174,182,194,.55);stroke-width:2;stroke-dasharray:3 4}
.ox-hand__end .is-hot{stroke:var(--hot);stroke-dasharray:none}
.ox-hand__drop circle{fill:var(--hot);opacity:0}
.ox-hand__o{fill:var(--navy);stroke:#fff;stroke-width:2}
.ox-hand__node circle{fill:var(--green-hi);transform-box:fill-box;transform-origin:50% 50%}
.ox-hand__tick path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:square;stroke-dasharray:1 1;stroke-dashoffset:0}
.ox-hand__rec{stroke:var(--green-hi);stroke-width:3;transform-box:fill-box;transform-origin:0 50%}
.ox-hand__t{font:500 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;fill:var(--on-dk2)}
.ox-hand__t.is-hot{fill:var(--soft)}
.ox-hand__t.is-go{fill:var(--green-hi)}
/* table columns fixed to the same 16/42/42 split so each panel stands over its column */
@media (min-width:768px){
  .ox #compare .ox-vs{table-layout:fixed}
  .ox #compare .ox-vs thead th:first-child{width:16%}
  .ox #compare .ox-vs thead th:not(:first-child){width:42%}
}
/* scrubbed with the scrollbar: both sides throw at once so the difference reads side by side */
@supports (animation-timeline: view()) {
  .ox-mo .ox-hand :is(.ox-hand__arc path,.ox-hand__tick path){animation:ox-hdraw linear both;animation-timeline:--hand}
  .ox-mo .ox-hand__p--lost .ox-hand__arc path{animation-name:ox-hdraw5}
  @keyframes ox-hdraw{from{stroke-dashoffset:1}}
  @keyframes ox-hdraw5{from{stroke-dashoffset:.5}}
  .ox-mo .ox-hand__arc path:nth-child(1){animation-range:cover 12% cover 28%}
  .ox-mo .ox-hand__arc path:nth-child(2){animation-range:cover 16% cover 34%}
  .ox-mo .ox-hand__arc path:nth-child(3){animation-range:cover 20% cover 40%}
  .ox-mo .ox-hand__node circle{animation:ox-hpop linear both;animation-timeline:--hand}
  .ox-mo .ox-hand__node circle:nth-child(1){animation-range:cover 27% cover 31%}
  .ox-mo .ox-hand__node circle:nth-child(2){animation-range:cover 33% cover 37%}
  .ox-mo .ox-hand__node circle:nth-child(3){animation-range:cover 39% cover 43%}
  @keyframes ox-hpop{0%{transform:scale(0)}70%{transform:scale(1.35)}100%{transform:scale(1)}}
  .ox-mo .ox-hand__tick path:nth-child(1){animation-range:cover 30% cover 34%}
  .ox-mo .ox-hand__tick path:nth-child(2){animation-range:cover 36% cover 40%}
  .ox-mo .ox-hand__tick path:nth-child(3){animation-range:cover 42% cover 46%}
  .ox-mo .ox-hand__rec{animation:ox-hrec linear both;animation-timeline:--hand;animation-range:cover 30% cover 50%}
  @keyframes ox-hrec{from{transform:scaleX(0)}}
  .ox-mo .ox-hand__tail{animation:ox-hfade linear both;animation-timeline:--hand;animation-range:cover 22% cover 40%}
  .ox-mo .ox-hand__end circle{animation:ox-hfade linear both;animation-timeline:--hand;animation-range:cover 32% cover 44%}
  @keyframes ox-hfade{from{opacity:0}}
  /* the one that falls off the record: a dot drops through the empty ring */
  .ox-mo .ox-hand__drop circle{animation:ox-hdrop linear both;animation-timeline:--hand;animation-range:cover 36% cover 50%}
  @keyframes ox-hdrop{0%{opacity:0;transform:translateY(-40px)}30%{opacity:1}100%{opacity:0;transform:translateY(46px)}}
  .ox-mo .ox-hand__t{animation:ox-hfade linear both;animation-timeline:--hand;animation-range:cover 40% cover 50%}
}
/* phone: the table drops its header, so each panel carries its column name and they stack */
@media (max-width:767px){
  .ox #compare .ox-hand{grid-template-columns:1fr;gap:18px;margin-bottom:8px}
  .ox-hand__p--lost,.ox-hand__p--win{grid-column:1;padding:0}
  .ox-hand__cap{display:block;margin-bottom:4px;font:500 11.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-dk2)}
  .ox-hand__p--win .ox-hand__cap{color:var(--green-hi)}
  .ox-hand__t{font-size:20px}
}
/* ===== end COMPARE-GLORY 1 ===== */
/* ===== COMPARE-GLORY 2 (17 Oct 2026, local only): heavier strokes; the Iron Gate "Sent" box sits on the green column rule,
   which draws down from it into the table; an always-on pulse runs along the record line and down the rule (row 02:
   "always on"). The current-system side goes still once it has played (tracking stopped). ===== */
.ox-hand__arc path{stroke-width:4}
.ox-hand__node circle{r:13px}
.ox-hand__o{stroke-width:2.5}
.ox-hand__end .is-hot{stroke-width:2.5}
.ox-hand__q{font:800 15px/1 var(--disp);fill:var(--soft)}
.ox-hand__pulse{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-dasharray:0 1.2;opacity:.9}
@media (min-width:768px){
  .ox-hand__p--win{padding:0 28px 0 0}
  .ox-hand__p--win::after{content:"";position:absolute;left:0;width:3px;top:calc(100% * 138 / 160);bottom:calc(-1 * clamp(6px,1vw,14px));background:var(--green-hi);transform-origin:50% 0}
  .ox #compare .ox-vs thead th.is-win{border-left:3px solid var(--green-hi)}
  .ox #compare .ox-vs td.is-win{position:relative}
}
@supports (animation-timeline: view()) {
  .ox-mo .ox-hand__p--win::after{animation:ox-hrail linear both;animation-timeline:--hand;animation-range:cover 8% cover 16%}
  @keyframes ox-hrail{from{transform:scaleY(0)}}
  .ox-mo .ox-hand__q{animation:ox-hfade linear both;animation-timeline:--hand;animation-range:cover 44% cover 50%}
  .ox-mo .ox-hand__drop circle{animation-name:ox-hdrop2}
  @keyframes ox-hdrop2{0%{opacity:0;transform:translateY(-60px)}25%{opacity:1}100%{opacity:0;transform:translateY(90px)}}
}
/* the loop: only where motion is on (.ox-mo is never set under reduced motion) */
.ox-mo .ox-hand__pulse{stroke-dasharray:.1 1.2;animation:ox-hpulse 2.4s linear infinite}
@keyframes ox-hpulse{from{stroke-dashoffset:.1}to{stroke-dashoffset:-1.05}}
@media (min-width:768px){
  .ox-mo #compare .ox-vs td.is-win::after{content:"";position:absolute;left:-3px;top:0;bottom:0;width:3px;background:linear-gradient(transparent,#fff 60%,transparent) no-repeat 0 -56px/3px 56px;animation:ox-hrun 2.4s linear infinite;animation-delay:calc(.5s + var(--r,0) * .26s)}
  @keyframes ox-hrun{0%{background-position:0 -56px}22%,100%{background-position:0 calc(100% + 56px)}}
}
@media (max-width:767px){
  .ox-hand__q{font-size:22px}
}
/* COMPARE-GLORY 2b: labels scale with the panel, so give narrower desktops and tablets bigger label units (768 measured 6.5px) */
@media (min-width:1100px) and (max-width:1299px){.ox-hand__t{font-size:15px}.ox-hand__q{font-size:17px}}
@media (min-width:768px) and (max-width:1099px){.ox-hand__t{font-size:22px;letter-spacing:.04em}.ox-hand__q{font-size:24px}}
/* ===== end COMPARE-GLORY 2 ===== */
/* ===== COMPARE-GLORY 3 (16 Oct 2026, local only; Marco: "its own animated graphic and a second pass").
   Both panels keep moving after the scroll draw: on the current-system side referrals keep leaving Sent and fade out
   short of their ring, one falls through "unknown" every cycle; on the Iron Gate side they land and the node rings
   green. SMIL tokens exist only with motion on (.ox-mo is never set under reduced motion). Each side gets its panel;
   the table gets a lost ring / a landed tick per cell. No copy changed. ===== */
.ox-hand__fly circle{display:none}
.ox-mo .ox-hand__fly circle{display:inline}
.ox-hand__p--lost .ox-hand__fly circle{fill:#C9D1DC}
.ox-hand__p--lost .ox-hand__fly circle:nth-child(2){fill:var(--hot)}
.ox-hand__p--win .ox-hand__fly circle{fill:#fff;filter:drop-shadow(0 0 6px rgba(63,191,132,.9))}
.ox-hand__ring circle{fill:none;stroke:var(--green-hi);stroke-width:3;opacity:0}
.ox:not(.ox-mo) .ox-hand__ring{display:none}
@media (min-width:768px){
  .ox #compare .ox-hand{margin-bottom:clamp(10px,1.4vw,20px)}
  .ox-hand__p--lost,.ox-hand__p--win{padding-top:22px;padding-bottom:12px}
  .ox-hand__p--lost{margin-right:14px;background:repeating-linear-gradient(135deg,rgba(174,182,194,.05) 0 10px,transparent 10px 20px);outline:1px dashed rgba(174,182,194,.3);outline-offset:-1px;padding-left:16px}
  .ox-hand__p--win{background:linear-gradient(180deg,rgba(63,191,132,.13),rgba(63,191,132,.03));box-shadow:inset 0 0 0 1px rgba(63,191,132,.45),0 0 40px -12px rgba(63,191,132,.45)}
  .ox-hand__p::before{content:"";position:absolute;top:0;left:0;height:3px;width:100%}
  .ox-hand__p--lost::before{background:rgba(174,182,194,.4)}
  .ox-hand__p--win::before{background:var(--green-hi)}
  /* table: a lost ring before each current-system cell, a landed tick before each Iron Gate cell */
  .ox #compare .ox-vs tbody td{position:relative;padding-left:40px}
  .ox #compare .ox-vs tbody td::before{content:"";position:absolute;left:8px;top:14px;width:22px;height:22px;border-radius:50%;box-sizing:border-box}
  .ox #compare .ox-vs tbody td:not(.is-win)::before{border:2px dashed rgba(224,122,47,.75)}
  .ox #compare .ox-vs tbody td.is-win::before{left:14px;background:var(--green-hi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.4 3.4L16 8' fill='none' stroke='%230B1729' stroke-width='2.8' stroke-linecap='square'/%3E%3C/svg%3E") center/22px no-repeat}
  .ox #compare .ox-vs tbody td.is-win{padding-left:48px}
  .ox #compare .ox-vs tbody tr{transition:background-color .3s ease}
  .ox #compare .ox-vs tbody tr:hover{background:rgba(255,255,255,.04)}
}
@supports (animation-timeline: view()) {
  @media (min-width:768px){
    .ox-mo #compare .ox-vs tbody td.is-win::before{animation:ox-tickpop linear both;animation-timeline:view();animation-range:entry 60% cover 30%}
    .ox-mo #compare .ox-vs tbody td:not(.is-win)::before{animation:ox-ringin linear both;animation-timeline:view();animation-range:entry 50% cover 25%}
  }
}
@keyframes ox-tickpop{0%{transform:scale(0) rotate(-90deg)}70%{transform:scale(1.3) rotate(0)}100%{transform:none}}
@keyframes ox-ringin{0%{transform:scale(1.6);opacity:0}100%{transform:none;opacity:1}}
/* COMPARE-GLORY 3b (second pass): the "unknown" ring flares orange as each lost referral falls through it; tokens larger */
.ox-hand__ring--lost circle{stroke:var(--hot)}
.ox-hand__fly circle{r:7px}
.ox-hand__p--win .ox-hand__fly circle{r:8px}
/* ===== end COMPARE-GLORY 3 ===== */
/* COMPARE-CUTS (16 Oct 2026, Marco: "1. Shorter intro, 3. Drop the 01-05 numbers"): lede to two sentences, row numbers
   removed from the markup; table and graphic panels go 50/50 so each panel still stands over its column */
@media (min-width:768px){
  .ox #compare .ox-hand{grid-template-columns:50% 50%}
  .ox #compare .ox-hand__p--lost{grid-column:1}
  .ox #compare .ox-hand__p--win{grid-column:2}
  .ox #compare .ox-vs thead th:first-child,.ox #compare .ox-vs thead th:not(:first-child),.ox #compare .ox-vs td{width:50%}
}
/* CAPS-RESTORE (16 Oct 2026, Marco: "Restore ALL CAPS headings on the homepage only ... Don't touch pfh-fonts.php").
   pfh-fonts.php (another session, 03:38 UTC) sets text-transform:none, letter-spacing:-.01em and weight 800 on every
   h1-h6 with three :not(#id) (3 ids). These rules carry four ids via #ox + three :not(#id), so they win on the homepage
   only (#ox exists nowhere else). Its font-family !important is left alone (it is Epilogue either way). */
html body #ox:not(#pfh-ox1):not(#pfh-ox2):not(#pfh-ox3) :is(.ox-h1,.ox-h2,.ox-h3,.ox-h4){text-transform:uppercase;letter-spacing:-.02em;font-weight:900}
html body #ox:not(#pfh-ox1):not(#pfh-ox2):not(#pfh-ox3) :is(.ox-h1,.ox-h2,.ox-h3,.ox-h4) :is(span,a,em,strong,b,i){font-weight:900}
html body #ox:not(#pfh-ox1):not(#pfh-ox2):not(#pfh-ox3) .ox-h1{letter-spacing:0}
html body #ox:not(#pfh-ox1):not(#pfh-ox2):not(#pfh-ox3) .ox-gpv__grid h4{text-transform:uppercase;letter-spacing:.1em;font-weight:700}

/* ===== NATURAL-2 LIVE 17 Oct 2026 (Marco yes): appended from local ox-nat2.css md5 5b9b3f1b; img urls absolute because this file is printed inline ===== */
/* NATURAL-2 (17 Oct 2026): Photo-led look carried from Crisis to the sign-off. Own sheet, linked after ox-cmp.css;
   ox.css is not touched (another chat appends to it). Merge into ox.css before any live write.
   Photos are our own files only (no stock). Animations and graphics untouched: only boxes, grounds and photo layers change. */
.ox{--r:16px;--r-lg:28px;--r-sm:10px;--sh:0 1px 2px rgba(11,23,41,.06),0 14px 34px -16px rgba(11,23,41,.32);--sh-lg:0 30px 60px -28px rgba(11,23,41,.55);--glass:rgba(255,255,255,.84)}

/* 1. dark, navy and stone full-bleed bands become inset rounded panels (same system as the film and photo bands) */
.ox #crisis~.ox-sec:is(.ox-dark,.ox-navy,.ox-stone){margin:clamp(12px,1.6vw,24px) 12px;border-radius:var(--r-lg);overflow:clip;isolation:isolate}
.ox #crisis~.ox-sec.ox-stone{box-shadow:inset 0 0 0 1px rgba(11,23,41,.06)}

/* 2. photo layers behind the panels (duotone, strong overlay so text contrast is unchanged) */
.ox #desert::before,.ox #compare::before,.ox #contact::before{display:block;content:"";position:absolute;z-index:-1;left:0;right:0;top:0;bottom:0;height:auto;pointer-events:none}
.ox #desert::before{left:auto;width:min(58%,820px);background:linear-gradient(90deg,var(--ink) 0,rgba(11,23,41,.62) 55%,rgba(11,23,41,.4)),url(https://pathfindersforhope.org/wp-content/uploads/pfh-hox/img/band-encampment.webp) center/cover;opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent,#000 55%),linear-gradient(180deg,#000 28%,transparent 58%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 55%),linear-gradient(180deg,#000 28%,transparent 58%);mask-composite:intersect}
.ox #compare::before{background:linear-gradient(180deg,rgba(20,35,63,.93),rgba(20,35,63,.84)),url(https://pathfindersforhope.org/wp-content/uploads/pfh-hox/img/film-thumb.jpg) center 60%/cover}
.ox #contact::before{background:linear-gradient(100deg,rgba(11,23,41,.96) 20%,rgba(11,23,41,.78)),url(https://pathfindersforhope.org/wp-content/uploads/pfh-hox/img/pathfinders-hospital-transition.jpg) center 52%/cover}

/* 3-4. The Glass and The System: left out (Marco 17 Oct: other lane owns them live, hsg.css / hsy.css) */

/* 5. Compare, desert, crisis graphics: rounded containers only */
.ox .ox-hand,.ox .ox-vs,.ox .ox-term,.ox .ox-field,.ox .ox-chart{border-radius:var(--r)}
.ox .ox-vs td.is-win{border-left-width:2px}

/* 6. Pilot: drop the offset black frame; tabs and panel rounded */
.ox .ox-frame::before{display:none}
.ox .ox-pick{border-radius:var(--r-lg);box-shadow:var(--sh-lg)}
.ox .ox-pick__tabs button{border-radius:12px}
.ox .ox-pick__panel{border-top-width:1px;border-top-color:var(--line)}
.ox .ox-launch{border-radius:var(--r)}

/* 7. Referral standard + FAQ + evidence */
.ox .ox-faq{border-top:0;display:grid;gap:10px}
.ox .ox-faq details{border-bottom:0;background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:0 20px}
.ox .ox-faq summary::after{border-radius:50%}
.ox .ox-ev .ox-rail--src>li,.ox .ox-ev .ox-rail--src>li:first-child,.ox .ox-ev .ox-rail--src>li:last-child{border-radius:var(--r);overflow:clip;box-shadow:var(--sh)}
.ox .ox-ev .ox-note{border-radius:var(--r)}

/* 8. sign-off (NAT2-FIX: the green-hi chip on green measured about 2:1; a pale mint keeps the two-tone line and passes large-text AA) */
.ox .ox-sign .ox-chip,.ox .ox-sign .ox-chip *{color:#C2F2D8!important}
.ox .ox-sign{margin:clamp(12px,1.6vw,24px);border-radius:var(--r-lg)}
@media (max-width:767px){
  .ox #crisis~.ox-sec:is(.ox-dark,.ox-navy,.ox-stone){margin:8px;border-radius:20px}
  .ox #desert::before{width:100%;opacity:.35;-webkit-mask-image:linear-gradient(180deg,transparent,#000 70%);mask-image:linear-gradient(180deg,transparent,#000 70%)}
  .ox .ox-sign{margin:8px;border-radius:20px}
  /* NAT2-FIX: pilot tabs spilled past the card at 375 (1fr min-content); keep labels on one line inside the card */
  .ox .ox-pick__tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ox .ox-pick__tabs button{font-size:16px;padding:8px 8px;gap:6px;min-width:0}
  .ox .ox-pick__tabs button span{font-size:12px}
}
@media (max-width:359px){.ox .ox-pick__tabs button{font-size:14px;letter-spacing:0;padding:8px 6px;gap:4px}.ox .ox-pick__tabs button span{font-size:11px}}