/* Shared foundation: reset, layout primitives, nav mechanics, reveal. Each direction skins on top. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:"Manrope",system-ui,sans-serif;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

html{--gutter:clamp(16px,4vw,40px)}
.container{width:100%;max-width:var(--container,1240px);margin-inline:auto;padding-inline:var(--gutter)}

/* Header + nav mechanics */
.site-header{position:sticky;top:0;z-index:50;transition:background .3s,box-shadow .3s,border-color .3s}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.nav__brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.nav__menu{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.nav__menu > li{position:relative}
.nav__menu a,.nav__menu button{display:inline-flex;align-items:center;gap:6px;padding:8px 0}
.nav__drop svg{width:10px;height:10px;transition:transform .25s}
.nav__drop.is-open svg{transform:rotate(180deg)}
.nav__sub{position:absolute;top:calc(100% + 10px);left:-18px;min-width:260px;padding:10px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s}
.nav__drop.is-open .nav__sub,.nav__drop:hover .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub a{display:block;padding:10px 12px}
.nav__actions{display:flex;align-items:center;gap:14px}
.menu-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;position:relative}
.menu-toggle span{position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;transition:transform .3s,opacity .3s}
.menu-toggle span:nth-child(1){top:16px}.menu-toggle span:nth-child(2){top:22px}.menu-toggle span:nth-child(3){top:28px}
.is-open .menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.is-open .menu-toggle span:nth-child(2){opacity:0}
.is-open .menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:980px){
  .menu-toggle{display:inline-flex}
  .nav__menu{position:fixed;inset:76px 0 0 0;flex-direction:column;align-items:stretch;gap:0;padding:12px var(--gutter,20px) 40px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s,transform .25s,visibility .25s;background:var(--menu-bg,#fff)}
  .is-open .nav__menu{opacity:1;visibility:visible;transform:none}
  .nav__menu > li{border-bottom:1px solid var(--menu-line,rgba(0,0,0,.1))}
  .nav__menu a,.nav__menu button{width:100%;justify-content:space-between;padding:18px 0;font-size:20px}
  .nav__sub{position:static;opacity:1;visibility:visible;transform:none;min-width:0;padding:0 0 12px;display:none;box-shadow:none;background:none;border:0}
  .nav__drop.is-open .nav__sub{display:block}
  .nav__sub a{font-size:16px;padding:10px 0 10px 16px}
  .nav__actions .btn{display:none}
  .nav__menu .nav__mobile-cta{display:block;border:0;padding-top:20px}
}
.nav__mobile-cta{display:none}

/* Reveal */
[data-reveal].will-reveal{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
[data-reveal].will-reveal.is-in{opacity:1;transform:none}
[data-reveal="2"].will-reveal{transition-delay:.08s}[data-reveal="3"].will-reveal{transition-delay:.16s}[data-reveal="4"].will-reveal{transition-delay:.24s}

/* Bleed an element from inside a .container to the viewport edge */
.bleed-left{margin-left:calc(-1 * (max(0px,(100vw - var(--container,1240px)) / 2) + var(--gutter)))}
.bleed-right{margin-right:calc(-1 * (max(0px,(100vw - var(--container,1240px)) / 2) + var(--gutter)))}
