noscript { display: none; }
/* JustMarketo — dark glass effects layer.
   Loaded AFTER the Modernist refinement block, so it deliberately overrides it.
   Palette stays JustMarketo: ink grounds, single red accent, no borrowed hues. */

:root {
  --ink-950: #0b0a0a;
  --ink-900: #121110;
  --ink-800: #1a1817;
  --ink-700: #232120;
  --ink-600: #2e2b2a;
  --accent: #ec3013;
  --accent-hi: #ef5f42;
  --accent-lo: #a81f09;
  --grad: linear-gradient(135deg, #c8260c 0%, #ef5f42 100%);
  --grad-warm: linear-gradient(135deg, #ec3013 0%, #f7b3a4 100%);
}

/* ---------- ground ---------- */
html, body {
  background: var(--ink-900) !important;
  color: #e7e5e4 !important;
}
body { overflow-x: hidden; }
::selection { background: rgba(236, 48, 19, .38); color: #fff; }

/* Undo the flat-light Modernist layer where it fights the dark treatment. */
section, footer { background: transparent !important; border-color: rgba(255,255,255,.07) !important; }
section + section { border-top: 1px solid rgba(255,255,255,.06) !important; }
section img, footer img { filter: none !important; }
[class*="rounded"] { border-radius: 16px !important; }

/* Light utilities remapped onto the dark ground. */
.bg-white, .bg-gray-50, .bg-gray-100 { background: transparent !important; }
.text-gray-900, .text-gray-800 { color: #f5f4f3 !important; }
.text-gray-700 { color: rgba(255,255,255,.82) !important; }
.text-gray-600 { color: rgba(255,255,255,.72) !important; }
.text-gray-500 { color: rgba(255,255,255,.64) !important; }
.text-gray-400 { color: rgba(255,255,255,.54) !important; }
.border-gray-200, .border-gray-300, .border-gray-900, .border-gray-800 { border-color: rgba(255,255,255,.1) !important; }
.bg-gray-900, .bg-gray-800 { background: rgba(255,255,255,.03) !important; }
.bg-gray-200 { background: rgba(255,255,255,.08) !important; }
.text-white { color: #fff !important; }

/* ---------- ambient layers ---------- */
.aurora { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
/* The blobs are injected as real elements and driven by rAF — see effects.js. */

.grid-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
}

#heroCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 0; opacity: .55; pointer-events: none; }

/* Content rides above the ambience. */
header, main, section, footer { position: relative; z-index: 10; }

/* ---------- glass ---------- */
.glass, section .bg-white.border, section .bg-white.border-2, section .shadow-sm, section .shadow-lg,
.accordion-item, section [class*="border-2"] {
  background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.02)) !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 20px !important;
  position: relative; overflow: hidden;
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,.16), transparent 40%, transparent 60%, rgba(236,48,19,.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.glass-strong {
  background: linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.03)) !important;
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.11) !important;
}

/* ---------- type ---------- */
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.grad-text-warm { background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.wordmark {
  font-weight: 800; letter-spacing: -.04em;
  background: linear-gradient(135deg, #a81f09, #ec3013, #f7b3a4);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  background-size: 200% 200%; background-position: 0% 50%;
}

/* ---------- buttons ---------- */
a[class*="bg-accent"], button[class*="bg-accent"], .btn-primary {
  border-radius: 9999px !important;
  background: linear-gradient(135deg, #ef5f42, #c8260c) !important;
  color: #fff !important;
  box-shadow: 0 10px 30px -10px rgba(236,48,19,.6), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
a[class*="bg-accent"]:hover, button[class*="bg-accent"]:hover, .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -10px rgba(236,48,19,.72);
}
.btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem; padding: 13px 24px; border-radius: 9999px;
  font-weight: 600; color: #e7e5e4; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); transition: all .25s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.26); }

/* ---------- secondary/ghost CTAs ----------
   Buttons authored as bg-gray-50 + text-brand-700 + border-gray-200 (a light "outline"
   pattern meant for white cards) go invisible once the dark remap makes their background
   transparent but leaves the near-black text untouched. Restyle to a visible light outline. */
a[class*="bg-gray-50"][class*="text-brand-700"], button[class*="bg-gray-50"][class*="text-brand-700"],
a[class*="bg-gray-100"][class*="text-brand-700"], button[class*="bg-gray-100"][class*="text-brand-700"] {
  background: rgba(255,255,255,.06) !important;
  color: #f5f4f3 !important;
  border: 2px solid rgba(255,255,255,.22) !important;
  font-weight: 800 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  letter-spacing: .01em;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
a[class*="bg-gray-50"][class*="text-brand-700"]:hover, button[class*="bg-gray-50"][class*="text-brand-700"]:hover,
a[class*="bg-gray-100"][class*="text-brand-700"]:hover, button[class*="bg-gray-100"][class*="text-brand-700"]:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.4) !important;
  transform: translateY(-2px);
}

/* ---------- gated calculator cards ----------
   #calculator-gate is absolutely positioned inside a wrapper, so it inherits height from
   the shorter sibling #calculator-content instead of its own (taller) lead form, clipping
   against the wrapper's overflow-hidden. A real rule here (not an inline Tailwind arbitrary
   class, which the static tailwind-built.css snapshot never generated) fixes every page
   that repeats this pattern at once. */
div:has(> #calculator-gate) { min-height: 560px; }

/* ---------- header ---------- */
/* The wordmark inherits ink from the light theme and would vanish on the dark header.
   Keyed to the logo's own class, never to its href — the link target changes, the mark does not. */
.jm-logo, .jm-logo span { color: #f5f4f3 !important; }
/* Tailwind's .transition-all sets transition-property:all, which gates every property
   in a state-change rule. Nothing whose start state is invisible may be transitioned —
   restrict these to properties that are safe to animate from a legible base. */
[class*="transition-all"] {
  transition-property: box-shadow, transform, color !important;
}
header.glass-header, header.glass-header.is-stuck {
  transition-property: box-shadow !important;
}

header.glass-header {
  position: fixed !important; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent !important; border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
}
header.glass-header.is-stuck {
  background: rgba(18,17,16,.62) !important;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: none !important;
}
body { padding-top: 76px; } /* replaced at runtime with the header's measured height */
#read-progress { height: 2px !important; background: var(--grad) !important; z-index: 101 !important; }

/* ---------- spotlight + tilt ---------- */
.spotlight {
  position: absolute; pointer-events: none; width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(236,48,19,.16) 0%, transparent 60%);
  transform: translate(-50%,-50%); opacity: 0; z-index: 0;
}
.tilt { transform-style: preserve-3d; transition: transform .3s ease; }

/* ---------- marquee ---------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.marquee-track { display: flex; gap: 24px; width: max-content; will-change: transform; }

/* ---------- accordion ---------- */
.accordion-item > div:last-child { overflow: hidden; padding-top: 0 !important; padding-bottom: 0 !important; }
.accordion-item > div:last-child.hidden { display: block !important; }
.accordion-item.open > div:last-child { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.accordion-item button { background: transparent !important; }
.accordion-item .acc-chev { display: inline-block; }
.accordion-item.open {
  background: linear-gradient(135deg, rgba(236,48,19,.1), rgba(236,48,19,.04)) !important;
  border-color: rgba(236,48,19,.32) !important;
}

/* ---------- dial + bars ---------- */
.dial-ring { fill: none; stroke-width: 14; stroke-linecap: round; }
.dial-track { stroke: rgba(255,255,255,.07); }
.dial-fill {
  stroke: url(#dialGrad); stroke-dasharray: 440; stroke-dashoffset: 440;
  transform: rotate(-90deg); transform-origin: center;
}
#av-bars .jm-fill, #ck-mix .jm-fill {
  background: var(--grad) !important; border-radius: 9999px;
}
#av-bars .bg-gray-800, #ck-mix .bg-gray-200 { border-radius: 9999px; overflow: hidden; }
.jm-fill { transition: none; }
#ck-chart > div { border-radius: 6px 6px 0 0 !important; }

/* ---------- inputs ---------- */
input[type="text"], input[type="email"], input[type="url"], input[type="tel"], select, textarea {
  background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.11) !important;
  border-radius: 12px !important; color: #fff !important; outline: none;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,.42) !important; }
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="tel"]:focus, select:focus, textarea:focus {
  border-color: rgba(236,48,19,.62) !important;
  box-shadow: 0 0 0 4px rgba(236,48,19,.16) !important;
  background: rgba(255,255,255,.06) !important;
}
/* Native select popups use system colors unless the option itself carries one —
   white text with no explicit background made the open dropdown list invisible. */
select { color-scheme: dark; }
select option { background: #1a1817; color: #f5f4f3; }
/* .bg-white etc (class selector) outrank the earlier bare "select"/"input" background rule
   (type selector) on specificity alone, even with !important on both — so any form control
   still carrying that class reverted to transparent. Match the class to win the tie. */
select.bg-white, select.bg-gray-50, select.bg-gray-100,
input.bg-white, input.bg-gray-50, input.bg-gray-100,
textarea.bg-white, textarea.bg-gray-50, textarea.bg-gray-100 {
  background: rgba(255,255,255,.04) !important;
}

input[type="range"] {
  -webkit-appearance: none; appearance: none; height: 6px;
  background: rgba(255,255,255,.09) !important; border-radius: 9999px; outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px;
  background: linear-gradient(135deg, #ef5f42, #c8260c); border-radius: 50%; cursor: pointer; border: 0;
  box-shadow: 0 4px 12px rgba(236,48,19,.5), 0 0 0 4px rgba(236,48,19,.16);
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; background: linear-gradient(135deg, #ef5f42, #c8260c);
  border-radius: 50%; cursor: pointer; border: 0;
}

/* ---------- tabs ---------- */
.tab-underline { position: absolute; bottom: -1px; height: 2px; background: var(--grad); border-radius: 2px; }

/* ---------- back to top ---------- */
#to-top {
  border-radius: 9999px !important; width: 56px !important; height: 56px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03)) !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  color: #fff !important;
}
#to-top:hover { background: linear-gradient(135deg, #ef5f42, #c8260c) !important; border-color: transparent !important; }
.btt-ring { stroke-dasharray: 151; stroke-dashoffset: 151; }

/* ---------- modal + toast ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200; background: rgba(11,10,10,.72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none;
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal-backdrop { transition: none; }
.modal-box { transform: scale(.9) translateY(20px); opacity: 0; }
.modal-backdrop.open .modal-box { transform: none; opacity: 1; }
#jm-toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 300;
  padding: 12px 22px; border-radius: 9999px; font-size: 14px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  opacity: 0; pointer-events: none;
}
#jm-toast.on { opacity: 1; }
#jm-toast { transition: none; }

/* ---------- chips + dividers + pulse ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: 6px 12px; border-radius: 9999px;
  font-size: 12px; font-weight: 700; background: rgba(236,48,19,.13); color: #f7b3a4;
  border: 1px solid rgba(236,48,19,.28);
}
.divider { background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent); height: 1px; }
.pulse-dot { opacity: 1; }

/* The caret from the hero typewriter, restyled for the dark ground. */
.typing-cursor::after {
  content: ""; display: inline-block; width: 3px; height: .9em; background: var(--accent);
  margin-left: 4px; vertical-align: baseline; opacity: var(--caret-op, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  .aurora::before, .aurora::after { animation: none; }
}

/* ---------- floating contact dock ---------- */
#jm-contact-dock {
  position: fixed; right: 24px; bottom: 92px; z-index: 150;
  display: none; flex-direction: column; gap: 10px; align-items: flex-end;
  pointer-events: none;
}
#jm-contact-dock.is-on { display: flex; pointer-events: auto; }
.jm-dock-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 18px; border-radius: 9999px;
  font-size: 14px; font-weight: 800; letter-spacing: .01em; color: #fff !important;
  border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.6);
  transition: transform .2s ease, box-shadow .2s ease;
}
.jm-dock-btn i { font-size: 22px; line-height: 1; }
.jm-dock-btn span { white-space: nowrap; }
.jm-dock-wa { background: linear-gradient(135deg, #25d366, #128c4a); }
.jm-dock-call { background: linear-gradient(135deg, #ef5f42, #c8260c); }
.jm-dock-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(0,0,0,.7); }
@media (max-width: 640px) {
  #jm-contact-dock { right: 14px; bottom: 78px; gap: 8px; }
  .jm-dock-btn { height: 48px; width: 48px; padding: 0; justify-content: center; }
  .jm-dock-btn span { display: none; }
}


/* ---------- interaction layer ----------
   Previously inline on the homepage only; these are shared by all pages, so they
   live here — the one stylesheet every page loads. */
/* Scroll reveal */
[data-reveal] { transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) { [data-reveal] { transition: none !important; } }

/* Themed focus ring — never the browser default */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #ec3013; outline-offset: 2px;
}
::selection { background: rgba(236, 48, 19, 0.22); }

/* Reading progress */
#read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: #ec3013; z-index: 60; }

/* Header condense on scroll */
.glass-header { transition: box-shadow .25s ease; }
.glass-header.is-stuck { box-shadow: 0 1px 0 #201e1d, 0 8px 24px rgba(32,30,29,.10); }

/* Card hover — rule thickens, mark shifts. No rounding, no float. */
.lift { transition: transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s ease, box-shadow .25s ease; }
.lift:hover { transform: translateY(-4px); border-color: #ec3013; box-shadow: 0 10px 30px rgba(32,30,29,.10); }

/* Underline sweep for nav + footer links */
.sweep { position: relative; }
.sweep::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 2px; background: #ec3013; }
.sweep:hover::after { width: 100%; }

/* Back to top */
#to-top { position: fixed; right: 24px; bottom: 24px; z-index: 50; width: 48px; height: 48px; display: none; align-items: center; justify-content: center; background: #201e1d; color: #f3f2f2; border: 2px solid #201e1d; pointer-events: none; }
#to-top.is-on { display: flex; pointer-events: auto; }
#to-top:hover { background: #ec3013; border-color: #ec3013; }


/* ---------- dark-ground contrast corrections ----------
   The imported pages were authored for a light ground: brand-* text tokens are ink,
   several surface utilities still paint near-white, and Tailwind's gradient-text
   utility leaves the glyphs transparent when its --tw-gradient stops don't resolve. */

/* 1. Ink text tokens become legible on the dark ground. */
.text-brand-600, .text-brand-700, .text-brand-800, .text-brand-900,
.text-black, .text-slate-700, .text-slate-800, .text-slate-900,
.text-zinc-700, .text-zinc-800, .text-zinc-900,
.text-neutral-700, .text-neutral-800, .text-neutral-900 { color: #f5f4f3 !important; }

/* brand-500 (#4a4644) is a dark mid-gray authored for white cards — 1.9:1 on this
   ground. Treated as secondary copy, matching the gray-600 step. */
.text-brand-500, .text-slate-500, .text-zinc-500, .text-neutral-500 { color: rgba(255,255,255,.62) !important; }
.text-brand-400 { color: rgba(255,255,255,.52) !important; }

/* Deep accent steps were chosen to sit on pale accent tints. Those tints are now
   dark glass, so the text has to come up the ramp rather than down it. */
.text-accent-600, .text-accent-700, .text-accent-800, .text-accent-900 { color: #f28c76 !important; }
.hover\:text-brand-700:hover, .hover\:text-brand-600:hover { color: #ef5f42 !important; }

/* 2. Any near-white surface utility drops to the glass ground. */
[class*="bg-white"], [class*="bg-gray-50"], [class*="bg-gray-100"],
[class*="bg-slate-50"], [class*="bg-slate-100"], [class*="bg-zinc-50"],
[class*="bg-neutral-50"], [class*="bg-brand-50"], [class*="bg-brand-100"],
[class*="bg-accent-50"] {
  background-color: rgba(255,255,255,.04) !important;
}
section [class*="bg-white"], footer [class*="bg-white"] { color: #e7e5e4; }

/* 3. Table chrome, which relied on light fills for separation. */
table th, table td { border-color: rgba(255,255,255,.1) !important; }
table thead th { background: rgba(255,255,255,.05) !important; color: #f5f4f3 !important; }
table tbody tr:nth-child(even) td { background: rgba(255,255,255,.02) !important; }

/* 4. Gradient text: paint our own ramp so the glyphs are never transparent. */
.text-transparent.bg-clip-text, [class*="bg-clip-text"] {
  background-image: linear-gradient(135deg, #ef5f42 0%, #f7b3a4 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .text-transparent.bg-clip-text, [class*="bg-clip-text"] { color: #ef5f42 !important; background-image: none !important; }
}

/* 5. Inline keyword highlight was a deep ramp step tuned for white. */
.kw-highlight { color: #f28c76 !important; }

/* 6. Ghost/outline buttons that assumed an ink label on white. */
a[class*="bg-gray-50"], a[class*="bg-white"], button[class*="bg-gray-50"], button[class*="bg-white"] {
  color: #f5f4f3 !important; border-color: rgba(255,255,255,.16) !important;
}
a[class*="bg-gray-50"]:hover, a[class*="bg-white"]:hover,
button[class*="bg-gray-50"]:hover, button[class*="bg-white"]:hover {
  background-color: rgba(236,48,19,.16) !important; color: #fff !important;
}

/* 7. The mega-menu panel sits on its own dark glass, not a white card. */
header .group .absolute, header [class*="group-hover:opacity-100"] {
  background: rgba(18,17,16,.94) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
header .group .absolute a { color: rgba(255,255,255,.8) !important; }
header .group .absolute a:hover { color: #ef5f42 !important; }


/* ---------- horizontal scroll intent ----------
   Several wrappers carry both .overflow-hidden (for the clipped corners) and
   .overflow-x-auto; the former wins the cascade and strands the widest table
   column off-screen. Honour the author's scroll intent on the x axis only,
   so vertical clipping still shapes the card. */
[class*="overflow-x-auto"] {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
[class*="overflow-x-auto"]::-webkit-scrollbar { height: 8px; }
[class*="overflow-x-auto"]::-webkit-scrollbar-track { background: rgba(255,255,255,.05); }
[class*="overflow-x-auto"]::-webkit-scrollbar-thumb { background: rgba(236,48,19,.55); }
[class*="overflow-x-auto"]::-webkit-scrollbar-thumb:hover { background: #ec3013; }


/* ---------- preloader polish ----------
   The intro overlay doubles as the page preloader, so it must sit above every
   fixed layer and hold a scrollbar-free page while it plays. */
html.jm-preloading, html.jm-preloading body { overflow: hidden !important; }
#jm-intro { z-index: 9998 !important; }
#jm-intro .jm-progress {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, #ef5f42, #c8260c);
}


/* ---------- decorative watermarks ----------
   Large light-gray glyphs were authored to sit almost invisibly on white cards.
   On the dark ground the same token is near-white and reads as foreground,
   so it collides with the copy it sits behind. Return them to a whisper. */
[class*="absolute"][class*="text-gray-100"],
[class*="absolute"][class*="text-gray-200"],
[class*="absolute"][class*="text-brand-100"],
[class*="absolute"][class*="text-accent-50"] {
  color: rgba(255,255,255,.07) !important;
}


/* ---------- overlays ----------
   The preloader must cover the whole viewport, above every fixed layer. */
#jm-intro {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 9998 !important;
  align-items: center;
  justify-content: center;
}
/* display stays out of the !important block: the teardown writes an inline
   display:none, which an !important declaration would silently defeat. */
#jm-intro.jm-done { display: none !important; }
html.jm-seen #jm-intro { display: none !important; }
/* The !important above would otherwise out-specify the page's own reduced-motion rule. */
@media (prefers-reduced-motion: reduce) { #jm-intro { display: none !important; } }

/* Decorative gradient washes inside dialogs were swallowing clicks on the close
   button that sits above them. Decoration never takes the pointer. */
#exitModal [class*="bg-gradient"], #exit-popup [class*="bg-gradient"],
#exitModal [aria-hidden="true"], #exit-popup [aria-hidden="true"] { pointer-events: none !important; }

/* Close affordances stay on top and always clickable. */
#exitClose, #close-popup, [aria-label="Close"], [id*="close"][class*="absolute"] {
  z-index: 60 !important;
  pointer-events: auto !important;
  cursor: pointer;
}
#exit-popup:not(.hidden) { display: flex !important; }


/* ---------- failed image fallback ----------
   A dead third-party URL otherwise renders as a tall empty bordered box. Marked
   by effects.js on error, it degrades to a tinted panel that shows its alt text. */
img.img-failed {
  background: linear-gradient(135deg, rgba(236,48,19,.14), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.1);
  object-fit: cover;
  color: rgba(255,255,255,.55);
  font-size: 13px;
  min-height: 180px;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; text-align: center;
}


/* ---------- mobile menu ----------
   display-gated, never transitioned: a hidden panel must not remain clickable. */
#jm-mobile-scrim {
  position: fixed; inset: 0; z-index: 190; display: none;
  background: rgba(11,10,10,.72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
#jm-mobile-scrim.is-open { display: block; }

#jm-mobile-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 195;
  width: min(88vw, 400px); display: none; flex-direction: column;
  background: #121110; border-left: 1px solid rgba(255,255,255,.1);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#jm-mobile-panel.is-open { display: flex; }
@media (min-width: 1024px) { #jm-mobile-panel, #jm-mobile-scrim { display: none !important; } }

.jm-mp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.1); flex: none;
}
.jm-mp-title {
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.jm-mp-close {
  width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05); color: #f5f4f3; font-size: 16px; cursor: pointer;
  border-radius: 9999px; display: flex; align-items: center; justify-content: center;
}
.jm-mp-close:hover { background: rgba(236,48,19,.2); border-color: rgba(236,48,19,.5); }

.jm-mp-nav { display: flex; flex-direction: column; padding: 8px 0; flex: 1; }
.jm-mp-link, .jm-mp-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 56px; padding: 0 20px;
  font-family: Archivo, sans-serif; font-size: 16px; font-weight: 700; text-align: left;
  color: #f5f4f3 !important; background: transparent; border: 0;
  border-bottom: 1px solid rgba(255,255,255,.06); cursor: pointer;
}
.jm-mp-link:hover, .jm-mp-toggle:hover { background: rgba(255,255,255,.05); color: #f28c76 !important; }
.jm-mp-caret { font-size: 20px; font-weight: 400; color: #ec3013; line-height: 1; }

.jm-mp-sub { display: none; flex-direction: column; background: rgba(255,255,255,.03); }
.jm-mp-sub.is-open { display: flex; }
.jm-mp-sub a {
  display: flex; align-items: center; min-height: 48px; padding: 0 20px 0 34px;
  font-size: 14.5px; color: rgba(255,255,255,.7) !important;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.jm-mp-sub a:hover { color: #f28c76 !important; background: rgba(255,255,255,.04); }
.jm-mp-sub a.jm-mp-subhead {
  color: #f5f4f3 !important; font-weight: 800; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; padding-left: 20px;
  margin-top: 4px; background: rgba(255,255,255,.03);
}

.jm-mp-foot {
  display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 26px;
  border-top: 1px solid rgba(255,255,255,.1); flex: none;
}
.jm-mp-cta-wa { background: linear-gradient(135deg, #25d366, #128c4a); }
.jm-mp-cta {
  display: flex; align-items: center; justify-content: center; min-height: 50px;
  border-radius: 9999px; font-weight: 800; font-size: 15px; color: #fff !important;
  background: linear-gradient(135deg, #ef5f42, #c8260c);
}

/* The burger itself must be visible on the dark header and a real touch target. */
header [class*="lg:hidden"] button {
  color: #f5f4f3 !important;
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- preloader on small screens ----------
   The lockup was a fixed 132px mark beside a 76px nowrap wordmark — far wider than a
   phone, so it overflowed the viewport and read as a blank screen. */
@media (max-width: 640px) {
  #jm-intro .jm-lock { gap: 14px; padding-bottom: 10px; }
  #jm-intro .jm-mark { width: 68px; height: 68px; }
  #jm-intro .jm-tilewrap svg, #jm-intro .jm-ladder { width: 68px; height: 68px; }
  #jm-intro .jm-word { font-size: 34px; }
  #jm-intro .jm-rule { height: 2px; }
}
@media (max-width: 400px) {
  #jm-intro .jm-mark { width: 54px; height: 54px; }
  #jm-intro .jm-tilewrap svg, #jm-intro .jm-ladder { width: 54px; height: 54px; }
  #jm-intro .jm-word { font-size: 27px; }
}