/* Relevance Exchange - shared shell for the public pages (access.html, podcasts.html).
   Face, tokens, layout primitives, buttons, nav, footer, reveal and their responsive
   rules. Lifted out of access.html, which had copied it from index.html; index.html
   still carries its own inline copy. Page-specific styles stay in each page. */

/* --- Brand face, served locally ------------------------------------------- */
@font-face{font-family:hkgrotesk;src:url("/assets/fonts/hkgrotesk-light.woff2") format("woff2"),url("/assets/fonts/hkgrotesk-light.woff") format("woff");font-weight:300;font-display:swap}
@font-face{font-family:hkgrotesk;src:url("/assets/fonts/hkgrotesk-regular.woff2") format("woff2"),url("/assets/fonts/hkgrotesk-regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:hkgrotesk;src:url("/assets/fonts/hkgrotesk-medium.woff2") format("woff2"),url("/assets/fonts/hkgrotesk-medium.woff") format("woff");font-weight:500;font-display:swap}
@font-face{font-family:hkgrotesk;src:url("/assets/fonts/hkgrotesk-semibold.woff2") format("woff2"),url("/assets/fonts/hkgrotesk-semibold.woff") format("woff");font-weight:600;font-display:swap}
@font-face{font-family:hkgrotesk;src:url("/assets/fonts/hkgrotesk-bold.woff2") format("woff2"),url("/assets/fonts/hkgrotesk-bold.woff") format("woff");font-weight:700;font-display:swap}

:root{
  --navy-900:#0d2240;  --navy-800:#173451;  --navy-700:#1d4269;  --navy-600:#2b5580;
  --blue-500:#366ea5;  --blue-400:#1f83c6;
  --orange-700:#a8460f; --orange-600:#C35418; --orange-500:#f27127; --orange-400:#ff8543;
  --sand-200:#ffe6cf;  --sand-100:#fff4e9;
  --ink:#0f1c2b;  --muted:#5b6b7f;  --muted-2:#8494a6;
  --line:rgba(13,34,64,.10);  --line-2:rgba(13,34,64,.06);
  --bg:#ffffff;  --bg-tint:#f4f6fa;
  --r:18px;  --r-sm:12px;  --r-lg:28px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow-sm:0 1px 2px rgba(13,34,64,.05),0 4px 14px rgba(13,34,64,.05);
  --shadow-md:0 2px 4px rgba(13,34,64,.05),0 14px 40px rgba(13,34,64,.09);
  --shadow-lg:0 30px 90px rgba(13,34,64,.20);
  --display:"Poppins",hkgrotesk,"Segoe UI",system-ui,sans-serif;
  --body:hkgrotesk,"Segoe UI",system-ui,-apple-system,sans-serif;
  --maxw:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.65 var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin:0}
p{margin:0}
::selection{background:var(--sand-200);color:var(--navy-900)}
:focus-visible{outline:3px solid var(--orange-500);outline-offset:3px;border-radius:6px}

/* --- Layout primitives ---------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:28px}
.section{padding:104px 0}
.section--tint{background:var(--bg-tint)}
.section--navy{background:var(--navy-900);color:#fff;position:relative;overflow:hidden}

/* Eyebrow: short orange rule + wide-tracked small caps. Straight off the deck. */
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font:600 12px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;
  color:var(--orange-600);margin-bottom:22px;
}
.eyebrow::before{content:"";width:34px;height:3px;border-radius:2px;background:var(--orange-500);flex:none}
.section--navy .eyebrow{color:var(--orange-400)}

.h-sec{font-size:clamp(30px,4.1vw,50px);max-width:20ch}
.h-sec--wide{max-width:28ch}
.lede{margin-top:20px;font-size:clamp(17px,1.45vw,20px);line-height:1.6;color:var(--muted);max-width:62ch}
.section--navy .lede{color:rgba(255,255,255,.70)}
.head{max-width:840px;margin-bottom:56px;position:relative}
.head--center{margin-inline:auto;text-align:center}
.head--center .eyebrow{justify-content:center}
.head--center .h-sec,.head--center .lede{margin-inline:auto}

/* --- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:600 15px/1 var(--body);letter-spacing:.01em;
  padding:15px 26px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:all .28s var(--ease);white-space:nowrap;
}
.btn svg{width:15px;height:15px;transition:transform .28s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--primary{background:var(--orange-600);color:#fff;box-shadow:0 8px 24px rgba(195,84,24,.28)}
.btn--primary:hover{background:var(--orange-500);box-shadow:0 12px 32px rgba(195,84,24,.36);transform:translateY(-2px)}
.btn--ghost{border-color:rgba(13,34,64,.22);color:var(--navy-800)}
.btn--ghost:hover{border-color:var(--navy-800);background:var(--navy-800);color:#fff;transform:translateY(-2px)}
.btn--ghost-light{border-color:rgba(255,255,255,.34);color:#fff}
.btn--ghost-light:hover{background:#fff;color:var(--navy-900);border-color:#fff;transform:translateY(-2px)}
.btn--sm{padding:11px 20px;font-size:14px}

/* --- Nav ------------------------------------------------------------------ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),backdrop-filter .35s var(--ease);
}
.nav__inner{display:flex;align-items:center;gap:26px;height:82px;position:relative}
/* Fluid, not fixed. The bar holds three things that cannot wrap - logo, sign-in
   button, hamburger - and at 62px the logo is 183px wide, which pushed the burger
   off the right edge below ~370px. body{overflow-x:hidden} hid the spill instead of
   showing it, so the control was simply unreachable. Scaling the logo with the
   viewport keeps it at full size wherever there is room and gives the other two space
   where there is not. Heights are derived from the ARTWORK ASPECT (trexlogowhitev2 is
   4.29:1, where the lockup it replaced was 2.96:1) so the rendered WIDTH is what stays
   constant - swap the file again and these numbers must be re-derived. */
.nav__logo{flex:none;display:flex;align-items:center;position:relative;
  height:clamp(21px,5.94vw,43px)}
.nav__logo img{height:clamp(21px,5.94vw,43px);width:auto;transition:opacity .3s var(--ease)}
/* A third again on the height, because the two files are not packed the same way:
   trexlogonew carries 21% transparent padding top and bottom where trexlogowhitev2's
   ink fills its canvas, so at the bar's shared height the scrolled lockup renders
   ~40% shorter than the one it replaces. Centred rather than top-aligned now that its
   box is taller than the logo slot — the overhang is padding, not artwork. */
.nav__logo .logo--dark{
  position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;
  height:clamp(28px,7.9vw,57px);
}
.nav.is-stuck .nav__logo .logo--light{opacity:0}
.nav.is-stuck .nav__logo .logo--dark{opacity:1}
.nav.is-stuck{background:rgba(255,255,255,.90);backdrop-filter:saturate(180%) blur(14px);box-shadow:0 1px 0 var(--line),0 8px 30px rgba(13,34,64,.06)}
.nav__links{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav__links a{
  font:500 14.5px/1 var(--body);color:rgba(255,255,255,.80);white-space:nowrap;
  transition:color .25s var(--ease);position:relative;padding-block:6px;
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--orange-500);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{transform:scaleX(1)}
.nav.is-stuck .nav__links a{color:var(--muted)}
.nav.is-stuck .nav__links a:hover{color:var(--navy-800)}
.nav__cta{display:flex;align-items:center;gap:14px;flex:none}
/* The bar rides a dark head until it sticks, so the second control cannot be a
   fixed-colour ghost — it inverts with .is-stuck exactly as the section links do. */
.btn--ghost-nav{border-color:rgba(255,255,255,.34);color:#fff}
.btn--ghost-nav:hover{background:#fff;color:var(--navy-900);border-color:#fff;transform:translateY(-2px)}
.nav.is-stuck .btn--ghost-nav{border-color:rgba(13,34,64,.22);color:var(--navy-800)}
.nav.is-stuck .btn--ghost-nav:hover{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
/* Access sits in the bar only while the bar has room for two buttons; below
   980px the drawer carries it instead (.nav__drawer-only). */
.nav__drawer-only{display:none}
.nav__burger{display:none;background:none;border:0;padding:8px;cursor:pointer;margin-left:auto}
.nav__burger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;margin:5px 0;transition:all .3s var(--ease)}
.nav.is-stuck .nav__burger span{background:var(--navy-800)}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){opacity:0}
.nav.is-open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- Footer --------------------------------------------------------------- */
.foot{background:#08182e;color:rgba(255,255,255,.55);padding:52px 0 40px;font-size:14px}
.foot__inner{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.foot img{height:40px;width:auto;opacity:.9}
.foot__links{display:flex;flex-wrap:wrap;gap:24px}
.foot__links a{transition:color .25s var(--ease)}
.foot__links a:hover{color:#fff}
.foot__legal{width:100%;margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.09);font-size:13px;color:rgba(255,255,255,.38)}

/* --- Reveal on scroll ---------------------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.001s!important;transition-duration:.001s!important}
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:980px){
  .section{padding:76px 0}
  .nav__links{display:none}
  .nav__burger{display:block;margin-left:0;order:3}
  .nav__cta{margin-left:auto;order:2}
  /* One button fits beside the logo and the burger, and it stays the sign-in door.
     Access crosses over into the drawer rather than off the page. */
  .nav__cta-explore{display:none}
  .nav.is-open .nav__drawer-only{display:block;color:var(--orange-600);font-weight:600}
  .nav.is-open .nav__links{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:82px;left:0;right:0;background:#fff;border-radius:var(--r);
    box-shadow:var(--shadow-md);padding:12px}
  .nav.is-open .nav__links a{color:var(--navy-800);padding:15px 16px;border-radius:10px}
  .nav.is-open .nav__links a::after{display:none}
  .nav.is-open .nav__links a:hover{background:var(--bg-tint)}
}
@media (max-width:430px){
  .nav__cta .btn{padding:10px 14px;font-size:13.5px}
  .nav__cta .btn svg{display:none}
  .nav__inner{gap:12px}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding-inline:20px}
  .section{padding:62px 0}
  .btn--lg{width:100%}
}