/* =====================================================================
   Staj · Bajito — the Moxpitality finish.
   Loaded last on every page. Values follow moxpitality.com and the brand
   kit: Playfair Display (display, wordmark in Black), DM Sans (body),
   Martian Mono (labels). Square surfaces, 8px controls, 3px chips.
   One gold (#e4a838). On white, gold that carries READABLE COPY goes deep
   (#8c6511). THE LOCKUP IS EXEMPT: "MOX" and the M mark are always true
   amber #e4a838, on white and on black, with mark-foil.png. Never gold-deep
   and never mark-gold.png (its ribbon is two-tone and reads brown). Matches
   the live site, whose wordmark sets MOX inline in #e4a838. Jen, 2026-09-27.
   On black, gold becomes foil: the same amber, lit.
   ===================================================================== */
:root {
  --gold: #e4a838;
  --gold-deep: #8c6511;
  --ink: #000;
  --ink-1: #0a0a0a;
  --ink-2: #141414;
  --ink-3: #1f1f1f;
  --parchment: #ede8e0;
  --ink-border: rgba(255, 255, 255, 0.14);
  --ink-muted: rgba(255, 255, 255, 0.62);
  --foil: linear-gradient(105deg, #e4a838 0%, #fdecb4 48%, #e4a838 100%); /* glitter gold, Jen 2026-09-27: never the pewter #8c6511/#b0801c stops */
  --foil-deep: linear-gradient(105deg, #e4a838 0%, #e4a838 100%); /* on white: solid amber, no pale highlight to wash out */
  --ease-hover: cubic-bezier(0.44, 0, 0.56, 1);
  --ease-reveal: cubic-bezier(0.25, 0.1, 0.25, 1);
  --radius-control: 8px;
  --radius-chip: 8px;      /* every control: buttons, chips, tabs, nav, selects (moxpitality.com rounded-lg) */
  --radius-pill: 9999px;   /* badges and status only (brand kit) */
  --radius-card: 14px;     /* every surface: cards, tiles, media, modals (Jen, 2026-09-23: no square edges) */
  --radius-media: 12px;
}

/* ---------- base ---------- */
::selection { background: #000; color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
a { transition: color 0.4s var(--ease-hover); }
.display, h1.display, h2.display, h3.display { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.label {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: currentColor; opacity: 0.62;
}

/* ---------- the wordmark: Playfair Black, MOX in gold ---------- */
.wm { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; line-height: 0.9; white-space: nowrap; }
.wm b { font-weight: 900; color: var(--gold); }
.on-ink .wm b, .topbar .wm b, .ink .wm b { background: var(--foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 7s var(--ease-hover) infinite; }

/* ---------- foil: the lit gold ---------- */
@keyframes foil { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes glint { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(220%) skewX(-18deg); } }
.foil-text { background: var(--foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 7s var(--ease-hover) infinite; }
.foil-text-deep { background: var(--foil-deep); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 7s var(--ease-hover) infinite; }

/* ---------- top bar: black, lit mark, gold MOX ---------- */
.topbar { background: var(--ink); border-bottom: 1px solid var(--ink-3); color: #fff; }
.topbar .brand { gap: 12px; color: #fff; }
.topbar .brand img { height: 24px; width: auto; }
.topbar .brand .wm { font-size: 19px; }
/* Staj leads the lockup: it is the product. Moxpitality signs it. */
.topbar .brand .staj { font-family: var(--display); font-weight: 900; text-transform: uppercase; padding-bottom: 0.05em; font-size: 29px; line-height: 1; letter-spacing: 0.005em; background: var(--foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 7s var(--ease-hover) infinite; }
.topbar .brand .by { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); padding-left: 12px; border-left: 1px solid var(--ink-border); }
.topbar .brand .by .wm { font-size: 13px; letter-spacing: 0.02em; color: rgba(255,255,255,0.86); }
.topbar .brand .by .wm b { color: var(--gold); }
.hero-mark { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 var(--space-5); }
.staj-xl { display: block; text-transform: uppercase; padding-bottom: 0.06em; font-family: var(--display); font-weight: 900; font-size: clamp(52px, 8vw, 104px); line-height: 0.95; letter-spacing: -0.01em; background: var(--foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 7s var(--ease-hover) infinite; }
.by-xl { display: inline-flex; align-items: center; gap: 8px; padding-left: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.by-xl .wm { font-family: var(--display); font-size: 19px; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; }
.by-xl .wm b { color: var(--gold); }
.topbar nav a { color: var(--ink-muted); border-radius: var(--radius-chip); border: 1px solid transparent; font-size: 13px; letter-spacing: 0.02em; }
.topbar nav a:hover { color: #fff; border-color: var(--ink-border); }
.topbar nav a.on { color: #000; background: var(--gold); border-color: var(--gold); }
.topbar .lang select { background: var(--ink-2); color: #fff; border: 1px solid var(--ink-border); border-radius: var(--radius-chip); }
.topbar .lang { color: var(--ink-muted); }

/* ---------- surfaces: square, hairline, lift ---------- */
.card { border-radius: var(--radius-card); border: 1px solid var(--border); transition: transform 0.4s var(--ease-reveal), box-shadow 0.4s var(--ease-reveal), border-color 0.4s var(--ease-hover); }
a.card:hover, .card[tabindex]:hover, a.card:focus-visible, .card[tabindex]:focus-visible,
.pcard:hover, .doc:hover, .station:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); border-color: #000; }
.tile, .stage, .steps .shot, .compare-grid img, .drop, .uni img, .mcard, .door, .intake { border-radius: var(--radius-media); overflow: hidden; }
.modal { border-radius: var(--radius-card); }
.stage video, .stage img, .steps .shot img, .mcard .thumb img, .door img { border-radius: inherit; }

/* ---------- controls: 8px, uppercase, gold on hover ---------- */
.btn {
  border-radius: var(--radius-control); font-family: var(--body); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 12px 20px;
  transition: background 0.4s var(--ease-hover), color 0.4s var(--ease-hover), border-color 0.4s var(--ease-hover), transform 0.4s var(--ease-reveal);
}
.btn:hover { background: var(--gold); border-color: var(--gold); color: #000; transform: none; }
.btn.ghost { background: transparent; color: #000; border-color: var(--hairline); }
.btn.ghost:hover { background: transparent; border-color: #000; color: #000; }
.btn.stop { border-color: var(--critical); color: var(--critical); }
.btn.stop:hover { background: var(--critical); border-color: var(--critical); color: #fff; }
.btn.sm-btn, .btn.sm { padding: 8px 14px; font-size: 11px; }
/* the lit button: used once or twice a page, for the action that matters */
.btn.gold { position: relative; overflow: hidden; background: var(--foil); background-size: 220% 100%; border: 1px solid #e4a838; color: #000; animation: foil 7s var(--ease-hover) infinite; }
.btn.gold::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: translateX(-120%) skewX(-18deg); pointer-events: none; }
.btn.gold:hover { background: var(--foil); background-size: 220% 100%; border-color: #e4a838; color: #000; }
.btn.gold:hover::after { animation: glint 0.9s var(--ease-reveal); }
.mir { border-radius: var(--radius-control); border: 1px solid #000; background: #fff; color: #000; letter-spacing: 0.06em; text-transform: uppercase; font-size: 12.5px; font-weight: 500; }
.mir:hover { background: #000; color: var(--gold); }
input, select, textarea, .contact-in, .ainput, .type-row input, .followup textarea, .field input, .note textarea { border-radius: var(--radius-control) !important; }

/* ---------- chips and tabs: 3px, black when on ---------- */
.chip, .tabs button, .print-nav a, .sub-nav a, .days .chip {
  border-radius: var(--radius-chip) !important; transition: border-color 0.4s var(--ease-hover), background 0.4s var(--ease-hover), color 0.4s var(--ease-hover);
}
.chip:hover, .tabs button:hover:not([disabled]) { border-color: #000; }
.chip.on, .tabs button.on { background: #000; color: #fff; border-color: #000; box-shadow: inset 0 -2px 0 var(--gold); }
.stabs button.on { border-bottom-color: var(--gold); }

/* ---------- status: read by treatment, not hue (brand kit) ---------- */
.pill {
  border-radius: var(--radius-pill); padding: 3px 10px 3px 8px; background: transparent; border: 1px solid var(--border); color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 6px; transition: background 0.4s var(--ease-hover), border-color 0.4s var(--ease-hover);
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; }
.pill:hover { border-color: #000; background: var(--surface-2); }
.pill.ok { color: #000; border-color: #000; }
.pill.ok::before { background: var(--gold); box-shadow: 0 0 0 2px rgba(228, 168, 56, 0.22); }
.pill.warn { color: var(--gold-deep); border-color: rgba(228, 168, 56, 0.55); background: rgba(228, 168, 56, 0.08); }
.pill.warn::before { background: transparent; border: 1.5px solid var(--gold); }
.pill.warn:hover { background: rgba(228, 168, 56, 0.18); border-color: rgba(228, 168, 56, 0.9); }
.pill.bad { color: var(--critical); border-color: rgba(154, 44, 44, 0.5); }
.pill.bad::before { background: var(--critical); }
.pill.bad:hover { background: rgba(154, 44, 44, 0.06); border-color: var(--critical); }
.count { border-radius: var(--radius-pill); background: #000; color: var(--gold); }

/* ---------- rank: the badge you earn is the only gold you can hold ---------- */
.rank { position: relative; overflow: hidden; border-radius: var(--radius-pill) !important; padding-left: 10px !important; padding-right: 10px !important; transition: transform 0.4s var(--ease-reveal), box-shadow 0.4s var(--ease-reveal); }
.rank.ambassador, .rank.trainer, .rank.lead { background: var(--foil) !important; background-size: 220% 100% !important; border-color: #e4a838 !important; color: #000 !important; animation: foil 7s var(--ease-hover) infinite; }
.rank.trainer { box-shadow: inset 0 0 0 1px #000; }
.rank.lead { box-shadow: inset 0 0 0 2px #000; }
.rank.ambassador::after, .rank.trainer::after, .rank.lead::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent); transform: translateX(-120%) skewX(-18deg); }
.rank:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(176, 128, 28, 0.35); }
.rank:hover::after { animation: glint 0.9s var(--ease-reveal); }
.rank.certified { background: #fff; border-color: #000; color: #000; }
.rank.trainee { background: var(--surface-2); color: var(--text-faint); border-color: var(--border); }
.ladder span { border-radius: var(--radius-pill); }
.ladder2 li { border-radius: var(--radius-control); }
.ladder span.on { background: var(--foil); background-size: 220% 100%; border-color: #e4a838; animation: foil 7s var(--ease-hover) infinite; }

/* ---------- ink panels: black and gray, with lit gold ---------- */
.ink { background: var(--ink-1); color: var(--parchment); border-color: var(--ink-3) !important; }
.ink .label, .ink .faint, .ink .muted, .ink .tiny { color: var(--ink-muted); }
.ink .big, .ink .pts, .ink .mxp { background: var(--foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: foil 7s var(--ease-hover) infinite; }
.big.gold, .pts { background: var(--foil-deep); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; }

/* ---------- scroll reveal: rise 40px, arrive in 0.45s, never busy ---------- */
.rv { opacity: 0; transform: translateY(40px); }
.rv.in { opacity: 1; transform: none; transition: opacity 0.45s var(--ease-reveal) var(--d, 0s), transform 0.45s var(--ease-reveal) var(--d, 0s); }

/* ---------- back to top ---------- */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 44px; height: 44px; border-radius: var(--radius-control);
  background: #000; color: var(--gold); border: 1px solid var(--ink-3); cursor: pointer; font-size: 18px; line-height: 1;
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.4s var(--ease-hover), transform 0.4s var(--ease-reveal), background 0.4s var(--ease-hover);
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--gold); color: #000; }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv.in { opacity: 1; transform: none; transition: none; }
  .foil-text, .foil-text-deep, .wm b, .btn.gold, .rank, .ink .big, .ladder span.on { animation: none !important; }
  .btn.gold::after, .rank::after { display: none; }
}
@media print { .to-top { display: none; } }

/* ---------- top bar details (older page styles targeted plain spans) ---------- */
.topbar .brand .wm { font-family: var(--display); font-size: 19px; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; }
.topbar .brand .wm b { letter-spacing: 0.02em; font-size: inherit; }
@media (max-width: 640px) { .topbar .brand .staj { font-size: 23px; } .topbar .brand .by { padding-left: 8px; font-size: 0; gap: 0; } .topbar .brand .by .wm { font-size: 12px; } }

/* ---------- Studio: black header band, sticky tabs ---------- */
.band.ink { background: var(--ink); border-bottom: 1px solid var(--ink-3); }
.band-in { padding-top: var(--space-10) !important; padding-bottom: var(--space-8) !important; }
.band .head { margin-bottom: 0; }
.band .head h1 { color: #fff; font-size: var(--text-2xl); }
.band .head .label { color: var(--gold); opacity: 1; }
.band .btn.ghost { color: #fff; border-color: var(--ink-border); }
.band .btn.ghost:hover { border-color: var(--gold); color: var(--gold); background: transparent; }
.stabs { position: sticky; top: 53px; z-index: 30; background: #fff; padding-top: var(--space-2); }
.stabs button { font-family: var(--body); letter-spacing: 0.02em; }
.stabs button:hover { color: #000; }

/* ---------- Moxie board on ink ---------- */
.mx-panel { padding: var(--space-6); }
.mx-panel .mx-h { color: #fff; }
.mx-panel .mxrow { border-top-color: var(--ink-3); }
.mx-panel .mxrow:hover, .mx-panel .mxrow:focus-visible { background: var(--ink-2); }
.mx-panel .mxb b { color: var(--parchment); }
.mx-panel .mxb i { background: var(--foil); background-size: 220% 100%; animation: foil 7s var(--ease-hover) infinite; }
.mx-panel .mxn { color: var(--ink-muted); }
.mx-panel .mxp { background: var(--foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 7s var(--ease-hover) infinite; }
.rw .big { background: var(--foil-deep); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.hbar i, .mxb i { background: var(--foil); background-size: 220% 100%; }

/* ---------- team side: the cook's own card on ink ---------- */
.you.ink { background: var(--ink); color: var(--parchment); border-color: var(--ink); }
.you.ink .you-name { color: #fff; font-family: var(--display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
.you.ink .you-bits { color: var(--ink-muted); }
.you.ink .linkish { color: #fff; }
.you.ink .linkish:hover { color: var(--gold); }
.you.ink .you-more { border-top-color: var(--ink-3); }
.you.ink .you-more b { color: var(--gold); }
.you.ink .pts { background: var(--foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: foil 7s var(--ease-hover) infinite; font-size: 22px; }
.rail { background: #fff; }
.nav button.on { box-shadow: inset 3px 0 0 var(--gold); border-color: #000; border-radius: var(--radius-control); }
.nav button { border-radius: var(--radius-control); }
.for-you { border-left-color: var(--gold); background: var(--surface-2); }
.item-name, .ask-title { letter-spacing: -0.02em; }
.m-lede { font-weight: 600; letter-spacing: -0.01em; }
.m-say li, .verdict, .practice .summary, .needs.ok, .before.ok { border-left: 3px solid var(--gold); }

/* ---------- landing: arrival beat, ink bands, footer ---------- */
.arrive { position: fixed; inset: 0; z-index: 200; background: #000; display: grid; place-items: center; pointer-events: none; }
/* MOX leads, PITALITY lands a hair behind (0.18s): nearly together, but the eye catches MOX */
.arrive .wm { font-size: clamp(34px, 7vw, 92px); color: #fff; }
.arrive .wm b, .arrive .wm .pt { display: inline-block; opacity: 0; transform: translateY(40%); }
.arrive .wm b { background: var(--foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: wm-in 0.5s var(--ease-reveal) 0.1s forwards, foil 3s var(--ease-hover) infinite; }
.arrive .wm .pt { animation: wm-in 0.5s var(--ease-reveal) 0.28s forwards; }
.arrive .wipe { position: absolute; inset: 0; background: #fff; clip-path: inset(100% 0 0 0); animation: wipe-up 0.55s cubic-bezier(0.4, 0, 0.2, 1) 1.2s forwards; }
.arrive.done { display: none; }
@keyframes wm-in { to { opacity: 1; transform: none; } }
@keyframes wipe-up { to { clip-path: inset(0 0 0 0); } }
section.ink-band { max-width: none; background: var(--ink); color: var(--parchment); margin-top: var(--space-16); padding: var(--space-16) 24px; }
section.ink-band > * { max-width: var(--content-wide); margin-left: auto; margin-right: auto; }
section.ink-band h2 { color: #fff; }
section.ink-band .yours div { border-top-color: var(--ink-3); }
section.ink-band .yours h3 { color: var(--gold); font-family: var(--display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
section.ink-band .yours p { color: var(--ink-muted); }
footer.ink-foot { background: var(--ink); color: var(--ink-muted); border-top: 1px solid var(--ink-3); padding: var(--space-12) 24px var(--space-8); }
footer.ink-foot .in { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
footer.ink-foot .big-wm { font-size: clamp(40px, 9vw, 128px); color: #fff; display: flex; justify-content: space-between; width: 100%; }
footer.ink-foot .row { display: flex; justify-content: space-between; width: 100%; gap: var(--space-4); flex-wrap: wrap; }
.hero .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.hero .btn.ghost:hover { border-color: var(--gold); color: var(--gold); background: transparent; }
.hero .label { color: var(--gold) !important; opacity: 1; }
.path li { border-top-color: #000; }
.path li::before { color: var(--gold-deep); }
.door .go { text-decoration: none; background-image: linear-gradient(var(--gold), var(--gold)); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.45s var(--ease-reveal); padding-bottom: 3px; }
.door:hover .go { background-size: 100% 2px; }
.choice i { color: var(--gold-deep); }
.start { border-radius: var(--radius-card); }
.start .brand2 .label { color: #000; }
@media (prefers-reduced-motion: reduce) { .arrive { display: none; } }
.ink-foot .wm b { background: var(--foil); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: foil 7s var(--ease-hover) infinite; }
.ink-foot .big-wm span { color: #fff; }
.emp-wrap, .team-wrap { overflow-y: hidden; }

/* ---------- one corner for everything you can press ---------- */
.practice .opt, .nav button, .who2, .transcript p, .faq-toggle, .linkish, .drop, .wkd, .pathbox,
.days .chip, .print-lang .chip, .mx-log .chip, .mxrow, .sq-row, .bt .btn, .choice, .srow input, select { border-radius: var(--radius-control) !important; }
.choice.card, .door.card { border-radius: var(--radius-media); }
.mxrow { padding-left: 8px; padding-right: 8px; }

.close-mail { margin-top: 18px; font-size: 14px; color: var(--muted, #6b6b6b); }
.close-mail a, .ink-foot .row a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }