/* Box Advance — shared chrome: header, footer, cookie banner. Prefixed sh- / sf- / ck- so it can sit on any page. */
:root {
  --void: #07080c; --gold: #e2a94a; --gold-d: #c4862b; --blue: #2f6bff; --cyan: #7cc8ff; --violet: #5a1d96; --paper: #f6f5f1;
  --light: #eeebe3; --dim: rgba(238,235,227,.66); --dark: #15130e;
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --e1: cubic-bezier(.2,.8,.2,1); --e2: cubic-bezier(.16,1,.3,1);
  --pad: clamp(20px, 4.2vw, 64px);
}
.sk-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--dark); padding: 10px 14px; border-radius: 8px; font: 600 14px var(--body); text-decoration: none; }
.sk-skip:focus { top: 12px; }

/* header */
.sh { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; gap: 26px; padding: 16px max(var(--pad), calc((100vw - 1180px) / 2 + var(--pad))); color: var(--light); transition: transform .6s var(--e2), background .4s var(--e1), padding .4s var(--e1); }
.sh.is-solid { background: rgba(7,8,12,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding-top: 12px; padding-bottom: 12px; box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.sh a { color: inherit; text-decoration: none; }
.sh-logo { display: flex; align-items: center; gap: 11px; font: 800 23px/1 var(--display); letter-spacing: -.04em; }
.sh-logo .cube-mini { width: 22px; height: 22px; }
.sh-logo small { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-left: 2px; }
.sh > nav { margin-left: auto; }
.sh-nav { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; font: 500 14px/1 var(--body); }
.sh-nav a { opacity: .78; transition: opacity .3s; padding: 6px 0; border-bottom: 1px solid transparent; }
.sh-nav a:hover, .sh-nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--gold); }
.sh-cta { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--body); padding: 11px 16px; border-radius: 999px; background: var(--gold); color: var(--dark) !important; transition: background .3s, transform .5s var(--e2); }
.sh-cta:hover { background: #f0bf68; }
.sh-menu { display: none; margin-left: auto; background: none; border: 1px solid rgba(255,255,255,.25); color: inherit; border-radius: 999px; padding: 12px 16px; min-height: 44px; font: 500 13px var(--mono); cursor: pointer; }
@media (max-width: 960px) {
  .sh-nav, .sh > .sh-cta { display: none; }
  .sh-menu { display: inline-flex; }
  .sh.is-open { background: rgba(7,8,12,.97); flex-wrap: wrap; }
  .sh.is-open > nav { width: 100%; margin: 0; }
  .sh.is-open .sh-nav { display: flex; flex-direction: column; width: 100%; gap: 0; margin: 10px 0 0; font-size: 17px; }
  .sh.is-open .sh-nav a { display: block; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); opacity: 1; }
  .sh.is-open > .sh-cta { display: inline-flex; margin: 14px 0 6px; }
}

/* the small glowing cube mark (CSS 3D) */
.cube-mini { position: relative; display: inline-block; perspective: 120px; flex: none; }
.cube-mini i { position: absolute; inset: 0; transform-style: preserve-3d; animation: cmspin 14s var(--e1) infinite alternate; }
.cube-mini b { position: absolute; inset: 0; border: 1.6px solid currentColor; border-radius: 2px; background: rgba(124,200,255,.10); box-shadow: 0 0 10px rgba(80,170,255,.35) inset; }
.cube-mini b:nth-child(1) { transform: translateZ(11px); } .cube-mini b:nth-child(2) { transform: rotateY(180deg) translateZ(11px); }
.cube-mini b:nth-child(3) { transform: rotateY(90deg) translateZ(11px); } .cube-mini b:nth-child(4) { transform: rotateY(-90deg) translateZ(11px); }
.cube-mini b:nth-child(5) { transform: rotateX(90deg) translateZ(11px); } .cube-mini b:nth-child(6) { transform: rotateX(-90deg) translateZ(11px); }
.sh .cube-mini { color: #9ad6ff; filter: drop-shadow(0 0 6px rgba(70,165,255,.7)); }
@keyframes cmspin { from { transform: rotateX(-24deg) rotateY(-30deg) rotateZ(-6deg); } to { transform: rotateX(-34deg) rotateY(330deg) rotateZ(8deg); } }

/* footer */
.sf { background: var(--void); color: var(--dim); padding: 64px var(--pad) 40px; font: 14px/1.6 var(--body); position: relative; z-index: 2; }
.sf a { color: var(--light); text-decoration: none; opacity: .82; }
.sf a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.sf-top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 28px 36px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.1); }
.sf-brand p { margin: 14px 0 18px; max-width: 30ch; }
.sf h2 { font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin: 4px 0 12px; }
.sf ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sf-more { grid-column: 1 / -1; margin: 0; font: 12.5px/1.8 var(--body); } .sf-more span { font: 500 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-right: 8px; }
.sf-legal { padding-top: 26px; display: grid; gap: 10px; max-width: 120ch; font-size: 12.5px; }
.sf-legal p { margin: 0; }
.sf-base { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; padding-top: 22px; margin-top: 20px; border-top: 1px solid rgba(255,255,255,.08); font: 12px var(--mono); }
.sf-base-r { display: flex; gap: 22px; align-items: center; }
.sf-base button { background: none; border: 0; color: var(--light); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 3px; opacity: .82; }
.sf .sh-logo { color: var(--light); }
@media (max-width: 900px) { .sf-top { grid-template-columns: 1fr 1fr; } .sf-brand { grid-column: 1 / -1; } }

/* cookie banner + preferences */
.ck { position: fixed; z-index: 80; left: 16px; right: 16px; bottom: 16px; max-width: 560px; margin-left: auto; background: #101219; color: var(--light); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 18px 20px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); font: 14px/1.55 var(--body); transform: translateY(20px); opacity: 0; transition: transform .6s var(--e2), opacity .4s var(--e1); }
.ck.is-in { transform: none; opacity: 1; }
.ck h2 { font: 700 17px var(--display); margin: 0 0 6px; color: #fff; }
.ck p { margin: 0 0 14px; color: var(--dim); }
.ck a { color: var(--cyan); }
.ck-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ck button { font: 600 13.5px var(--body); border-radius: 999px; padding: 10px 15px; cursor: pointer; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; }
.ck button.ck-primary { background: var(--gold); border-color: var(--gold); color: var(--dark); }
.ck fieldset { border: 0; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }
.ck label { display: flex; gap: 10px; align-items: flex-start; }
.ck label span { color: var(--dim); font-size: 13px; display: block; }
.ck input { margin-top: 4px; accent-color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .cube-mini i { animation: none; transform: rotateX(-28deg) rotateY(-36deg); } .sh, .ck { transition: none; } }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
html { scroll-padding-top: 96px; background: var(--void); }
.sh:focus-within { transform: none; }
.sf-base button { padding: 10px 0; }

.ck [hidden], .ck fieldset[hidden] { display: none !important; }