/* The homepage's chrome and menu (index.html), on the brands page: the UGC. wordmark top left at display size,
   shrunk with scroll by scale() from the corner (script.js writes --shrink across the band's wipe), the burger top
   right, the underlay menu, and the menu items (The work / How it pays / Apply) at 70% of the width, in the band.
   Homepage values throughout; the names carry an hp- prefix where this page's old styles.css already uses the
   plain one (--ink is #000 there, --fs-brand and --fs-ui are the old button sizes). */
:root {
  --hp-ink: #24363f;
  --hp-ink-64: color-mix(in srgb, var(--hp-ink) 64%, transparent);
  --hp-ink-48: color-mix(in srgb, var(--hp-ink) 48%, transparent);
  --pop-pink: #ff2fd6;
  --hp-font-sans: 'Archivo', 'Switzer Fallback', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --hp-font-display: 'Archivo Black', 'Arial Black', 'Archivo', sans-serif;
  --pad-x: max(16px, 2.7211vw);
  --pad-y: max(16px, 2.1769vw);
  --hp-fs-display: clamp(80px, 16.667vw, 240px);
  --hp-fs-brand: min(var(--hp-fs-display), 26svh);
  --hp-lh-display: .92;
  --hp-fs-ui: 14px;
  --hp-fs-h2: clamp(24px, 4.667vw, 56px);
  --hp-fs-body: clamp(16px, 1.667vw, 20px);
  --hp-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --menu-width: 30em;
}
@media (pointer: coarse) { :root { --hp-fs-ui: 16px; } }

/* the menu slides the whole page left: every fixed layer and the in-flow sections move by --page-x (a
   separate `translate`, so it composes with the transforms script.js writes on the hero and the cards) */
.band, .hero, .hero-footer, .product, .marquee-line, .page-flow, .nav-overlay { translate: var(--page-x, 0px) 0; }

/* ── fixed chrome: the wordmark and the burger ── */
.chrome {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 70;
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  color: var(--hp-ink);
}
.chrome .brand {
  pointer-events: auto;
  display: block;
  font-family: 'Playball', cursive;
  font-size: var(--hp-fs-brand);
  line-height: var(--hp-lh-display);
  letter-spacing: -.03em;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  color: var(--hp-ink);   /* ink, as on the homepage; white only over the zoom section's ink veil (below) */
  transform-origin: top left;
  transform: scale(var(--shrink, 1));
  will-change: transform;
  /* --edge is the page card's right edge while the menu is open; the menu driver tweens it */
  clip-path: inset(-20px calc(var(--brand-right, 0px) - var(--edge, 100000px)) -20px -20px);
  transition: color .4s ease;
}
/* over the darkened clip in the zoom section the wordmark fades to white, and back to ink off it (zoom.js) */
.chrome .brand.is-on-dark { color: #fff; }
/* the burger does the same (zoom.js), except while the menu is open: it is the close button then, over the white panel */
.chrome .burger.is-on-dark:not([aria-expanded="true"]) { color: #fff; }
.chrome .brand__initial { font-weight: 400; letter-spacing: 0; font-size: 1.06em; line-height: 0; margin-right: .01em; display: inline-block; translate: 0 -.01em; }

.burger {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75em;
  min-height: 44px;
  min-width: 44px;
  margin: -10px -4px 0 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--hp-ink);
  cursor: pointer;
  touch-action: manipulation;
  transition: color 200ms var(--hp-ease-expo), scale 160ms ease-out;
}
.burger:active { scale: .97; }
.burger__icon { display: flex; flex-flow: column; gap: 8px; width: 36px; }
.burger__bar { display: block; width: 100%; height: 3px; background: currentColor; }

/* ── the homepage menu items, in the band at 70% of the width; they leave with the band's wipe ── */
.hero__nav {
  position: absolute;
  z-index: 5;
  top: var(--pad-y);
  left: 70%;
  display: grid;
  justify-items: start;
  pointer-events: auto;
  color: var(--hp-ink);
}
.t-ui { font-family: var(--hp-font-sans); font-size: var(--hp-fs-ui); line-height: 1.7; letter-spacing: 0; font-weight: 500; }
.hero__nav a { text-decoration: none; touch-action: manipulation; transition: color 200ms var(--hp-ease-expo); }
@media (max-width: 767px) { .hero__nav { display: none; } }   /* the burger is the navigation here */

@media (hover: hover) and (pointer: fine) {
  .hero__nav a:hover { color: var(--hp-ink-64); }
  .burger:hover { opacity: .64; }
}

/* ── underlay menu: the panel on the right, the page slides off it ── */
.nav {
  position: fixed;
  top: 0; bottom: 0; right: 0;
  width: var(--menu-width);
  z-index: 60;                        /* under the chrome (70), over every layer of the page */
  background: #fff;
  color: var(--hp-ink);
  visibility: hidden;
  /* the homepage's body type, so the em-based sizes below come out the same */
  font-family: var(--hp-font-sans);
  font-size: var(--hp-fs-body);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -.02em;
}
.nav__inner { display: flex; flex-flow: column; justify-content: space-between; gap: 2em; height: 100%; padding: 7.5em 2em 2em; overflow: auto; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-flow: column; gap: 12px; }
.nav__list.is-small { display: grid; grid-template-columns: repeat(2, max-content); gap: .75em 2.5em; }   /* the quick links in a 2 x 2 grid */
.nav__link {
  display: block;
  padding: .3em .6em .38em;
  color: inherit;
  text-decoration: none;
  background: #fff;
  border: 2px solid var(--hp-ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--hp-ink);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.nav__link:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--hp-ink); }
.nav__label { font-family: var(--hp-font-display); font-size: var(--hp-fs-h2); line-height: .95; letter-spacing: -.025em; }
.nav__bottom { position: relative; display: flex; gap: 2em; padding-top: 1.5em; }
.nav__col { flex: 1; display: flex; flex-flow: column; gap: 1em; }
.nav__small { font-size: var(--hp-fs-ui); line-height: 1.1; font-weight: 500; color: inherit; text-decoration: none; }
.nav__small.is-faded { color: var(--hp-ink-48); }
.nav__bottom-border { position: absolute; inset: 0 0 auto; height: 2px; background: var(--hp-ink); transform-origin: 0; }
.nav-overlay { position: fixed; inset: 0; z-index: 55; pointer-events: none; visibility: hidden; cursor: pointer; overflow: clip; font-size: var(--hp-fs-body); --frame: #fff; --line: 2px; }
.nav-overlay__dark { display: none; }
.nav-overlay__borders { position: absolute; inset: 0; display: flex; flex-flow: column; justify-content: space-between; }
.nav-overlay__row { display: flex; flex-flow: column; align-items: flex-end; }
.nav-overlay__border { width: 100%; height: 1em; background: var(--frame); }
.nav-overlay__corner { width: 2em; height: 2em; transform-origin: 100% 0; background: radial-gradient(circle farthest-side at 0 100%, #fff0 99%, var(--frame)); }
.nav-overlay__corner.is-bottom { transform-origin: 100% 100%; background: radial-gradient(circle farthest-side at 0 0, #fff0 99%, var(--frame)); }
.nav-overlay__card {
  position: absolute;
  inset: calc(1em - var(--line)) 0 calc(1em - var(--line)) -1em;
  border: var(--line) solid var(--hp-ink);
  border-radius: 0 2em 2em 0;
  pointer-events: none;
}
@media (max-width: 767px) {
  :root { --menu-width: 80vw; }
  .nav__inner { padding: 5em 1.25em 1.25em; }
  .nav__bottom { flex-flow: column; }
  .nav__link { padding: .5em .6em; }
}
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { background: var(--pop, var(--pop-pink)); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--hp-ink); }
}

/* the FAQ entry opens in place onto the two FAQ pages (Josh, 2026-09-25); the list pads its right and bottom so
   the boxes' hard shadows are not clipped by the collapsing row */
.nav__drop-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; font:inherit; color:inherit; text-align:left; cursor:pointer }
.nav__drop-icon{ position:relative; flex:none; width:18px; height:18px; margin-right:4px }
.nav__drop-icon::before, .nav__drop-icon::after{ content:""; position:absolute; left:0; top:50%; width:100%; height:3px; background:currentColor; translate:0 -50%; transition:rotate .3s var(--hp-ease-expo) }
.nav__drop-icon::after{ rotate:90deg }
.nav__drop.is-open .nav__drop-icon::after{ rotate:0deg }
.nav__drop-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--hp-ease-expo) }
.nav__drop.is-open .nav__drop-panel{ grid-template-rows:1fr }
.nav__drop-list{ min-height:0; overflow:hidden; list-style:none; margin:0; padding:0 6px 6px 16px; display:flex; flex-flow:column; gap:10px }
.nav__drop-list li:first-child{ margin-top:12px }
.nav__sublink{
  display:block; padding:.55em .75em; font-size:18px; font-weight:500; line-height:1.2; color:inherit; text-decoration:none;
  background:#fff; border:2px solid var(--hp-ink); border-radius:0; box-shadow:3px 3px 0 var(--hp-ink);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.nav__sublink:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--hp-ink) }
@media (hover: hover) and (pointer: fine){
  .nav__sublink:hover{ background:var(--pop, var(--pop-pink)); transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--hp-ink) }
}
@media (prefers-reduced-motion: reduce){
  .nav__drop-panel, .nav__drop-icon::before, .nav__drop-icon::after{ transition:none }
}