/* Joychiever — shared styles (all pages) */
/* Fonts are self-hosted (no calls to Google). Latin subset. */
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/inter-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:normal;font-display:swap;font-weight:400 900;src:url(../fonts/bodoni-moda-latin-standard-normal.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-display:swap;font-weight:400 900;src:url(../fonts/bodoni-moda-latin-standard-italic.woff2) format('woff2')}
@font-face{font-family:'Bebas Neue';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/bebas-neue-latin-400-normal.woff2) format('woff2')}

:root{
  --ink:#121212; --cream:#F7F3EB; --orange:#F58020; --muted:#69645D; --gray:#34312D; --fadegray:#8F8981;
  --body:#3d3a35; --rule:#DAD3C6;
  --serif:'Bodoni Moda','Didot','Bodoni 72',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --label:'Bebas Neue','Inter',sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --hh:94px; /* header height */
}
@media (max-width:760px){:root{--hh:64px}}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 16px)}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
body.bg-ink{background:var(--ink)}
p{text-wrap:pretty}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--orange);color:#fff;font:500 15px var(--sans);padding:10px 16px;border-radius:6px;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}

/* ---------- header ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--hh);color:var(--cream);background:transparent;transition:transform .35s var(--ease),background-color .3s ease}
.hdr.solid{background:var(--ink)}
.hdr.hide{transform:translateY(-100%)}
.hdr .in{height:100%;display:flex;justify-content:space-between;align-items:center;padding:0 48px;font:400 14px var(--sans)}
.logo{--wh:28px;display:flex;align-items:flex-start;gap:calc(var(--wh)*.36);line-height:0;text-decoration:none}
.logo img{display:block;width:auto}
.logo .word{height:var(--wh)}
.logo .tree{height:calc(var(--wh)*.7354);margin-top:calc(var(--wh)*.0207)}
.hdr nav{display:flex;gap:34px;align-items:center}
.hdr nav a{color:inherit;text-decoration:none;white-space:nowrap}
.hdr nav a:not(.btn):hover{color:#fff}
.hdr nav a[aria-current="page"]:not(.btn){color:var(--orange)}
.hdr .btn{background:var(--orange);color:#fff;padding:12px 20px;font-weight:500;border-radius:6px;transition:background-color .2s}
.hdr .btn:hover{background:#E47414}
.menu{display:none;font:500 13px var(--sans);letter-spacing:.08em;text-transform:uppercase;background:none;border:0;color:inherit;cursor:pointer;padding:10px 0 10px 12px}
.mnav{display:none}
@media (max-width:760px){
  .hdr .in{padding:0 20px}
  .hdr .in nav{display:none}
  .menu{display:block}
  .logo{--wh:23px}
  .mnav{display:block;position:fixed;left:0;right:0;top:var(--hh);bottom:0;z-index:49;background:var(--ink);color:var(--cream);padding:28px 20px 40px;overflow:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s ease,transform .3s var(--ease),visibility 0s linear .3s}
  .mnav a{display:block;color:inherit;text-decoration:none;font:300 30px/1.2 var(--sans);padding:16px 0;border-bottom:1px solid #2b2824}
  .mnav a[aria-current="page"]{color:var(--orange)}
  .mnav .btn{display:inline-block;border:0;margin-top:32px;background:var(--orange);color:#fff;font:500 17px var(--sans);padding:15px 26px;border-radius:6px}
  body.menu-open{overflow:hidden}
  body.menu-open .hdr{background:var(--ink);transform:none}
  body.menu-open .mnav{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .3s var(--ease),visibility 0s}
}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--cream);padding:48px;border-top:1px solid #26231f;display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;justify-content:space-between}
.foot nav{display:flex;gap:28px;align-items:center;font:400 14px var(--sans)}
.foot nav a{color:var(--cream);text-decoration:none}
.foot nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot p{font:400 13px var(--sans);color:var(--fadegray);flex-basis:100%}
@media (max-width:760px){.foot{padding:36px 20px}.foot nav{flex-wrap:wrap;gap:16px 22px}}

/* ---------- shared build + reveal ---------- */
.js .fade{opacity:0;transform:translateY(30px);transition:opacity 1.2s ease,transform 1.5s var(--ease)}
.js .play .fade{opacity:1;transform:none}
.t1{transition-delay:.1s!important}
.t2{transition-delay:1.3s!important}
.t3{transition-delay:2.5s!important}
.js .rv{opacity:0;transform:translateY(30px);transition:opacity 1.2s ease,transform 1.5s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* hand-drawn underline */
.mk{position:relative;display:inline-block;white-space:nowrap}
.mk svg{position:absolute;overflow:visible;pointer-events:none;left:-2%;width:104%;bottom:-.15em;height:.21em}
.mk path{fill:none;stroke:var(--orange);stroke-width:3.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.js .mk svg{clip-path:inset(0 100% 0 0)}
.js .play .mk svg{clip-path:inset(-60% -5% -60% 0)}

/* shared hero type (BD + PD) */
.ln{font:300 clamp(28px,3.45vw,50px)/1.25 var(--sans);color:#fff}
.ln + .ln{margin-top:clamp(18px,2.2vw,32px)}
.ph{font:italic 400 1.16em/1 var(--serif);letter-spacing:-.005em;white-space:nowrap}
@media (max-width:760px){.ln{font-size:30px;line-height:1.28}}

/* shared buttons + text links */
.btnp{display:inline-block;background:var(--orange);color:#fff;text-decoration:none;font:500 15px var(--sans);padding:13px 22px;border-radius:6px;border:0;cursor:pointer;transition:background-color .2s}
.btnp:hover{background:#E47414}
.tl{font:500 15px var(--sans);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.tl span{color:var(--orange);display:inline-block;transition:transform .2s}
.tl:hover span{transform:translateX(3px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .fade,.js .rv{opacity:1!important;transform:none!important;transition:none!important}
  .js .mk svg{clip-path:none!important;transition:none!important}
  .hdr,.mnav{transition:none!important}
}

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.nw{white-space:nowrap}