/* OXEN FINANCIAL SERVICES — one stylesheet, both pages.
   Deliberately shared: two pages with two copies of the same CSS drift apart the first
   time somebody fixes one of them, which is a mistake already made twice this week on
   another site. Change it here and both pages change. */
:root{--navy:#011120;--navy2:#061b2e;--cream:#f9f3e7;--gold:#c8a058;--gold2:#e8c068;
--ink:#1a1a1a;--mut:rgba(249,243,231,.72);--mutd:rgba(26,26,26,.68)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--navy);color:var(--cream);
font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
a{color:inherit;text-decoration:none}
h1,h2,h3,.disp{font-family:"Playfair Display",Georgia,serif;font-weight:900;
line-height:1.05;letter-spacing:-.01em;margin:0}
.g{color:var(--gold2)}

/* ── header ─────────────────────────────────────────────────────────────── */
.hdr{position:absolute;top:0;left:0;right:0;z-index:5}
/* 🚨 The nav sat straight on the photograph and the ACTIVE item — gold on a sunrise —
   was the least readable thing on the page. A short scrim behind the bar fixes every
   page at once without darkening the image anyone actually looks at. */
.hdr:before{content:"";position:absolute;inset:0;height:130%;pointer-events:none;
background:linear-gradient(180deg,rgba(1,17,32,.72),rgba(1,17,32,0))}
/* 🚨 THE HEADER SCRIM WAS PAINTING ON TOP OF THE LOGO.
   .hdr:before is absolutely positioned; .hdrin was static. Inside a stacking
   context a positioned child paints ABOVE a non-positioned one whatever the
   source order, so the 72%-navy gradient meant to sit BEHIND the bar was being
   laid over the mark and the nav and dimming both. Joel: "logo looks faded like
   it's behind the background overlay" — it was. Two properties fix it. */
.hdrin{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;position:relative;z-index:1}
.brand{display:flex;align-items:center;gap:13px}
.brand img{height:46px;width:auto;display:block}
.brand .bt{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:23px;
letter-spacing:.14em;line-height:1}
.brand .bs{display:block;font-family:-apple-system,sans-serif;font-weight:600;font-size:9.5px;
letter-spacing:.3em;color:var(--gold);margin-top:4px}
.nav{display:flex;align-items:center;gap:22px;font-size:14.5px;font-weight:600}
.nav a{padding-bottom:3px;border-bottom:1px solid transparent}
.nav a:hover{border-color:var(--gold)}
.nav a.on{border-color:transparent;color:#20160a;background:var(--gold2);
padding:6px 13px;border-radius:2px}
.nav a.on:hover{border-color:transparent;filter:brightness(1.06)}

/* ── the parallax hero ──────────────────────────────────────────────────────
   Layer order is the one the asset pack specifies, back to front: sky, mountains,
   foreground, then the three hikers as separate people. Each landscape layer is
   overscanned 6% so shifting it never exposes the canvas edge — the pack warns about
   exactly that. The hikers stand ON the foreground, so they move WITH it, near enough:
   drift them independently and their feet slide off the rock.                        */
/* The runway. 215vh = about 1.15 screens of scroll with the picture held still. */
.stage{position:relative;height:215vh}
.hero{position:sticky;top:0;height:100vh;overflow:hidden;
display:flex;align-items:center;background:var(--navy)}
/* The rock and the three people, welded into one moving object. */
.plate{position:absolute;inset:0;transform-origin:50% 92%;will-change:transform}
/* Overscan raised 6% → 18% because the travel below went up with it. The layer box
   has to be bigger than the hero by MORE than the furthest layer moves, or the
   canvas edge slides into view at the bottom of the scroll. */
.lay{position:absolute;inset:-22%;background-repeat:no-repeat;background-position:center bottom;
background-size:cover;will-change:transform;pointer-events:none}
/* ══ THE BACKGROUND MOVES ON ITS OWN ══════════════════════════════════════════
   🚨 THIS IS THE THING JOEL ASKED FOR ON DAY ONE AND I BUILT THE WRONG WAY THREE TIMES.
   He kept saying "the background sliding by" and pointing at agenity.com. Every version
   I built was SCROLL-DRIVEN, so the page sat perfectly still until you dragged the
   scrollbar — he would load it, look at it, see a photograph, and correctly report that
   nothing was moving. I kept replying with scroll measurements.
   agenity.com does it with `@keyframes sceneKB ... 60s ease-in-out infinite`: a slow
   continuous Ken Burns loop, pure CSS, no JavaScript at all. Same technique here.

   SPEED AND DISTANCE LIVE ON THE TWO `animation:` LINES BELOW AND NOWHERE ELSE.
   42s/58s with -9.5%/-3.2% of travel. Slower or shorter and it reads as a still
   photograph, which is the failure this whole thing kept having.

   WHY IT DRIFTS AND RETURNS: a one-way pan has to snap back at the loop point, and the
   snap is the only thing anyone would notice. Out and back over 80 seconds reads as
   drifting air, not as a repeating GIF.

   WHY THE ROCK AND THE PEOPLE ARE NOT IN HERE: a drone panning around a subject holds
   the SUBJECT and sweeps the world. The climbers stay put. The mountains and the sky
   move behind them at different speeds, and that difference is the whole effect.

   These animate the .lay elements. parallax.js only ever touches .plate, .wrap and
   .hcrest — deliberately, because an inline transform from JS would beat the animation
   and silently kill the drift. KEEP THOSE TWO SETS OF ELEMENTS APART. */
@keyframes oxdrift-far{
  0%{transform:translate3d(0,0,0) scale(1.05)}
  50%{transform:translate3d(-3.2%,-1.1%,0) scale(1.09)}
  100%{transform:translate3d(0,0,0) scale(1.05)}
}
@keyframes oxdrift-mid{
  0%{transform:translate3d(0,0,0) scale(1.04)}
  50%{transform:translate3d(-9.5%,-2.4%,0) scale(1.12)}
  100%{transform:translate3d(0,0,0) scale(1.04)}
}
.l-sky{background-image:url(img/sky.webp);
animation:oxdrift-far 58s ease-in-out infinite}
.l-mtn{background-image:url(img/mountains.webp);
animation:oxdrift-mid 42s ease-in-out infinite}
.l-fg{background-image:url(img/foreground.webp)}
/* Reduced motion means NO motion. This page is aimed at families and some people are
   genuinely made ill by drifting backgrounds. */
@media(prefers-reduced-motion:reduce){
  .l-sky,.l-mtn{animation:none}
}
.hiker{position:absolute;bottom:0;will-change:transform;pointer-events:none}
.hiker img{display:block;width:100%;height:auto}
.h1k{left:46%;width:13.5%;bottom:6%}
.h2k{left:60%;width:13%;bottom:12%}
.h3k{left:74%;width:14.5%;bottom:19%}
/* The scrim is horizontal on purpose: the type sits left and the sun burns on the
   right. A flat overlay either kills the sunrise or leaves the headline fighting it. */
/* The scrim exists to make the type readable over a sunrise. Once the type has
   faded out at the end of the camera move it is just a black bar down the left of
   a landscape shot, so it fades with the words. --scrim is driven from parallax.js. */
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--scrim,1);
background:linear-gradient(90deg,rgba(1,17,32,.94) 0%,rgba(1,17,32,.82) 38%,
rgba(1,17,32,.30) 66%,rgba(1,17,32,.12) 100%)}
.hero .wrap{position:relative;z-index:3;will-change:transform,opacity;width:100%;padding-top:96px;padding-bottom:56px}
/* 🚨 MEASURED OFF THE APPROVED MOCKUP, NOT GUESSED. There the mark is about
   30% of the hero width and sits HIGH — roughly a third down, over the sky — and it
   reads as gold. This was 38vw, vertically centred, and blended with screen, which
   over a sunrise turns gold into a milky grey smear across the middle of the photo.
   No blend mode: the asset is already gold on transparent and should stay gold. */
/* 🚨 20 Sep 2026, Joel: "the watermark is now hidden behind the guy. Can you move
   it to the left?" Putting it behind the cast was right, but at right:7% it was behind
   the LEAD hiker specifically and clipped by the edge of the frame — so it read as a
   mistake rather than a mark. It now sits in the open sky between the headline and the
   climbers, above the headline: clear of the type, clear of all three hikers, and still
   behind every one of them in paint order. Measured at 2000x1180, where the crest lands
   at x1150-1480 / y89-407, the headline starts at y391 and the lead hiker starts at
   x1480. Do not push it right or down — either one puts it back behind him. */
.hcrest{position:absolute;right:26%;top:21%;transform:translateY(-50%);width:min(29vw,330px);
opacity:.24;pointer-events:none;
/* NO z-index, deliberately — see the note beside this element in index.html. Any
   value here, even 0, lifts the crest above the hikers, the ridge and the scrim,
   because all three of those sit at the default level. Its place in the picture is
   set by where it sits in the markup. */
z-index:auto}
h1{font-size:clamp(38px,6.4vw,82px)}
h1 span{display:block}
.lede{max-width:34ch;margin:22px 0 32px;font-size:clamp(17px,1.5vw,20px);color:var(--mut)}
.btns{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:16px 30px;
border-radius:3px;font-weight:700;font-size:15.5px;letter-spacing:.03em;transition:.16s;
border:1.5px solid var(--gold);background:linear-gradient(180deg,var(--gold2),var(--gold));
color:#20160a;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.o{background:none;color:var(--cream);border-color:rgba(249,243,231,.45)}
.btn.o:hover{border-color:var(--gold);color:var(--gold2)}
.btn.navy{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.btn.navy:hover{background:var(--navy2)}

/* ── the thin strip ─────────────────────────────────────────────────────── */
.strip{background:var(--navy2);border-top:1px solid rgba(200,160,88,.3);
border-bottom:1px solid rgba(200,160,88,.3)}
.strip div{padding:15px 0;text-align:center;font-size:12px;font-weight:700;
letter-spacing:.34em;color:var(--gold)}

/* ── cream editorial ────────────────────────────────────────────────────── */
.cream{background:var(--cream);color:var(--ink);padding:clamp(64px,8vw,110px) 0}
.cream h2{font-size:clamp(29px,3.9vw,50px);max-width:19ch}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:46px;margin-top:52px}
.step .n{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:15px;
color:var(--gold);letter-spacing:.16em;margin-bottom:12px}
.step h3{font-size:22px;margin-bottom:9px}
.step p{margin:0;color:var(--mutd);font-size:16px}

/* ── navy call to action ────────────────────────────────────────────────── */
.cta{position:relative;background:var(--navy);padding:clamp(66px,8vw,112px) 0;overflow:hidden}
.cta:before{content:"";position:absolute;inset:0;background:url(img/lake.webp) center/cover;
opacity:.26}
.cta:after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(1,17,32,.78),rgba(1,17,32,.93))}
.cta .wrap{position:relative;z-index:2;text-align:center}
.cta h2{font-size:clamp(28px,3.7vw,46px);max-width:17ch;margin:0 auto}
.cta p{color:var(--mut);margin:16px auto 30px;max-width:44ch}

/* ── the compact other-audience band ────────────────────────────────────── */
.other{background:var(--cream);color:var(--ink);padding:clamp(44px,5vw,70px) 0}
.otherin{display:flex;align-items:center;gap:40px;flex-wrap:wrap;justify-content:space-between}
.other img{width:min(300px,38%);border-radius:2px;display:block}
.other h3{font-size:clamp(23px,2.6vw,33px);margin-bottom:8px}
.other p{margin:0 0 20px;color:var(--mutd);max-width:44ch}

/* ── footer ─────────────────────────────────────────────────────────────── */
footer{background:var(--navy2);padding:44px 0;font-size:14px;color:var(--mut)}
.frow{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.flinks{display:flex;gap:22px}
.flinks a:hover{color:var(--gold2)}
.fine{margin-top:22px;font-size:12px;color:rgba(249,243,231,.42);max-width:76ch;line-height:1.6}

@media(max-width:900px){
 .steps{grid-template-columns:1fr;gap:34px}
 .nav{gap:16px;font-size:13px}
 .brand img{height:38px}.brand .bt{font-size:19px}
 .hcrest{width:56vw;right:-8%;opacity:.12}
 .h1k{left:34%;width:19%}.h2k{left:53%;width:18%}.h3k{left:72%;width:20%}
 .hero:after{background:linear-gradient(180deg,rgba(1,17,32,.92) 0%,rgba(1,17,32,.72) 52%,
 rgba(1,17,32,.55) 100%)}
 .other img{width:100%}
}

/* ── page two: the protection hero ──────────────────────────────────────────
   Same parallax engine, different cast. The ox sits behind the family and moves less,
   so the family reads as being in front of it rather than pasted onto it. */
.hero-p .lay{background-position:center}
.hero-p:after{background:linear-gradient(90deg,rgba(1,17,32,.95) 0%,rgba(1,17,32,.86) 40%,
rgba(1,17,32,.38) 70%,rgba(1,17,32,.16) 100%)}
.pox,.pfam{position:absolute;bottom:0;will-change:transform;pointer-events:none;z-index:2}
.pox img,.pfam img{display:block;width:100%;height:auto}
/* 21 Sep 2026, Joel: "the family is on top of the ox and they're floating in the air."
   Their feet sat ABOVE the ox's, and the family moved twice as fast as the ox on scroll, so
   they drifted up off the ground. Now the family's feet are the lowest thing in the shot
   (nearest the camera, standing in front of him) and both move at the same speed. */
.pox{right:-2%;width:min(60%,820px);bottom:2%;opacity:.92}
.pfam{right:11%;width:min(27%,330px);bottom:-3%}
.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;margin-bottom:56px}
.split img{width:100%;height:auto;border-radius:2px;display:block}
.split .sub{color:var(--mutd);font-size:18px;margin:16px 0 0;max-width:38ch}
.thin{background:var(--navy2);padding:26px 0;text-align:center;font-size:15.5px;color:var(--mut)}
.thin a{color:var(--gold2);font-weight:700;border-bottom:1px solid rgba(200,160,88,.5)}
@media(max-width:900px){
 .split{grid-template-columns:1fr;gap:26px}
 .pox{width:96%;right:-14%;opacity:.7}
 .pfam{width:44%;right:4%}
}

@media(max-width:760px){
 .stage{height:auto}
 .hero{position:relative;height:auto;min-height:clamp(560px,86vh,860px)}
}