/* Bebas Neue: the wordmark's face (vendor/fonts, from @fontsource/bebas-neue). */
@font-face { font-family: 'Bebas Fallback'; src: local('Arial Narrow Bold'), local('ArialNarrow-Bold'), local('Helvetica Neue Condensed Bold'), local('Impact'), local('Arial Bold'), local('Arial'); size-adjust: 72%; ascent-override: 100%; descent-override: 20%; }
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/fonts/bebas-neue-latin-400-normal.woff2') format('woff2'),
       url('/vendor/fonts/bebas-neue-latin-400-normal.woff') format('woff');
}

/* ── Tarmac Spec scheme tokens ──
   Shared by the marketing homepage (landing-tarmac.css) and every public
   subpage (tarmac-site.css). One set per scheme; purple is the brand and the
   default. js/tarmac-scheme.js sets <html data-scheme> from ?scheme= or the
   visitor's saved choice. Selectors carry html[...] specificity so they
   outrank the :root tokens older page stylesheets declare. */

html[data-scheme="orange"] {
  --lowest:   #0e0e10;
  --low:      #1c1b1d;
  --surface:  #131315;
  --cont:     #201f21;
  --high:     #2a2a2c;
  --highest:  #353437;
  --text:     #f4f1f2;
  --variant:  #d9c1b8;
  --muted:    #a89b96;
  --accent:   #ff5708;
  --accent-text: #ff7a3d;
  --accent-rgb: 255, 87, 8;
  --accent-2: #ee9800;
  --soft:     #ffb59c;
  --soft-2:   #ffb95f;
  --pale:     #ffdbcf;
  --bad:      #ffb4ab;
  --on-accent:#160700;
  --glow:     rgba(255, 87, 8, 0.45);
  --glow-lo:  rgba(255, 87, 8, 0.15);
  --map-glow: #ff5708;
  --glass:    rgba(32, 31, 33, 0.8);
  --dash:     rgba(42, 42, 44, 0.95);
  --hdr-bg:   rgba(14, 14, 16, 0.95);
  --photo-filter: none;
}

html[data-scheme="blue"] {
  --lowest:   #0c0e11;
  --low:      #171a1e;
  --surface:  #111317;
  --cont:     #1c2025;
  --high:     #262b31;
  --highest:  #31373e;
  --text:     #f2f5f8;
  --variant:  #bccad7;
  --muted:    #8f9cab;
  --accent:   #4d9de0;
  --accent-text: #6cb2ea;
  --accent-rgb: 77, 157, 224;
  --accent-2: #38bdf8;
  --soft:     #9ccbf2;
  --soft-2:   #7dd3fc;
  --pale:     #d6e9fa;
  --on-accent:#04101d;
  --glow:     rgba(77, 157, 224, 0.45);
  --glow-lo:  rgba(77, 157, 224, 0.15);
  --map-glow: #4d9de0;
  --glass:    rgba(28, 32, 37, 0.8);
  --dash:     rgba(38, 43, 49, 0.95);
  --hdr-bg:   rgba(12, 14, 17, 0.95);
  --photo-filter: hue-rotate(188deg) saturate(0.95);
}

html:not([data-scheme="orange"]):not([data-scheme="blue"]) {
  --lowest:   #0e0c12;
  --low:      #1a1720;
  --surface:  #131117;
  --cont:     #1e1b24;
  --high:     #28242f;
  --highest:  #332e3b;
  --text:     #f5f2f9;
  --variant:  #cec3e3;
  --muted:    #9f94b4;
  /* EntryLane violet: OKLCH(0.54 0.18 290). White on it is 5.4:1. Purple as
     TEXT on these dark surfaces uses --accent-text (5.8:1). One hue family;
     no second neon. */
  --accent:   #7154ce;
  --accent-rgb: 113, 84, 206;
  --accent-text: #9281e1;
  --accent-2: #5a43a4;
  --soft:     #aa9fec;
  --soft-2:   #bcb6ee;
  --pale:     #d0ccf0;
  --on-accent:#ffffff;
  --glow:     rgba(113, 84, 206, 0.4);
  --glow-lo:  rgba(113, 84, 206, 0.14);
  --map-glow: #8b78e6;
  --glass:    rgba(30, 27, 36, 0.8);
  --dash:     rgba(40, 36, 47, 0.95);
  --hdr-bg:   rgba(14, 12, 18, 0.95);
  --photo-filter: hue-rotate(238deg) saturate(1.05);
}


/* ── Light mode (html[data-mode="light"]) ──
   Same three schemes on light surfaces. Accent fills stay; the "soft" text
   tones become deep inks so they read on white. Selectors out-rank the dark
   scheme blocks above. */
html[data-mode="light"][data-scheme] {
  --lowest:   #f4f2f7;
  --low:      #ffffff;
  --surface:  #f8f7fa;
  --cont:     #f0eef4;
  --high:     #e8e5ee;
  --highest:  #dcd8e3;
  --text:     #17141d;
  --variant:  #463f52;
  --muted:    #6a6378;
  --bad:      #c62828;
  --glass:    rgba(255, 255, 255, 0.85);
  --dash:     rgba(255, 255, 255, 0.94);
  --hdr-bg:   rgba(255, 255, 255, 0.92);
  color-scheme: light;
}
html[data-mode="light"]:not([data-scheme="orange"]):not([data-scheme="blue"]) {
  --accent-text: #5a43a4; --soft: #5a43a4; --soft-2: #5e4f9c; --pale: #4a348c;
  --glow: rgba(113, 84, 206, 0.24); --glow-lo: rgba(113, 84, 206, 0.09);
}
html[data-mode="light"][data-scheme="orange"] {
  --accent-text: #c2410c;
  --soft: #c2410c; --soft-2: #b45309; --pale: #9a3412;
  --glow: rgba(255, 87, 8, 0.28); --glow-lo: rgba(255, 87, 8, 0.1);
}
html[data-mode="light"][data-scheme="blue"] {
  --accent-text: #1f6ba5;
  --soft: #1f6ba5; --soft-2: #0369a1; --pale: #1e4f7a;
  --glow: rgba(77, 157, 224, 0.3); --glow-lo: rgba(77, 157, 224, 0.1);
}

/* ── Scheme switcher (js/tarmac-scheme.js injects it) ──
   Collapsed it is one small button in the corner; it opens upward into the
   three colors plus the light/dark toggle. */
.scheme-switch { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 6px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.scheme-switch-toggle, .scheme-switch-panel { border-radius: 8px; background: rgba(14, 14, 16, 0.98); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.scheme-switch-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 0; color: var(--variant, #cec3e3); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; opacity: 0.85; transition: opacity 0.15s; }
.scheme-switch-toggle:hover, .scheme-switch.is-open .scheme-switch-toggle { opacity: 1; color: var(--text, #fff); }
.scheme-switch-panel { display: flex; align-items: center; gap: 2px; padding: 4px; }
.scheme-switch-panel[hidden] { display: none; }
.scheme-switch-panel button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 4px; background: none; color: var(--variant, #cec3e3); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.scheme-switch-panel button:hover { color: var(--text, #fff); }
.scheme-switch-panel button[aria-pressed="true"] { background: var(--high, #28242f); color: var(--text, #fff); }
.scheme-switch i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.scheme-switch .mode-btn { margin-left: 4px; padding: 0 10px; }
.scheme-switch .mode-btn svg { width: 15px; height: 15px; }
html[data-mode="light"] :is(.scheme-switch-toggle, .scheme-switch-panel) { background: rgba(255, 255, 255, 0.99); box-shadow: 0 6px 20px rgba(20, 16, 30, 0.14); }
@media (max-width: 760px) {
  /* Phones: a bigger, labeled button; bigger panel targets. Where the
     page has a phone tab bar, its Color tab opens the panel instead and
     the panel sits just above the bar. */
  .scheme-switch { right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); font-size: 12px; }
  .scheme-switch-toggle { min-height: 44px; opacity: 1; }
  .scheme-switch-toggle i { width: 14px; height: 14px; }
  .scheme-switch-panel button { min-height: 44px; }

}
/* ── Bottom dock (js/tarmac-scheme.js; static on the homepage) ──
   Pinned to the foot of every marketing page, as the header is to the top:
   opaque, on its own layer. Desktop is a slim link strip; phones get a
   five-tab bar. Its Color tab opens the switcher panel, which then sits
   just above the dock (the floating toggle is hidden). */
.el-dock { position: fixed; inset: auto 0 0 0; z-index: 90; background: linear-gradient(var(--hdr-bg), var(--hdr-bg)), var(--lowest); box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06), 0 -6px 20px rgba(0, 0, 0, 0.35); transform: translateZ(0); padding-bottom: env(safe-area-inset-bottom, 0px); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
/* The dock is fixed over the page, so the page must end above it and anything
   scrolled or focused into view must stop above it too — otherwise the last
   field on a form (the wizard's end date, say) lands under the dock in a
   short window and clicks hit the dock instead of the field. */
html:has(.el-dock) { scroll-padding-bottom: 72px; }
body:has(.el-dock) { padding-bottom: 72px !important; }
@media (max-width: 760px) {
  html:has(.el-dock) { scroll-padding-bottom: 84px; }
  body:has(.el-dock) { padding-bottom: 84px !important; }
}
.el-dock-in { max-width: 1280px; margin: 0 auto; height: 48px; padding: 0 clamp(16px, 3vw, 32px); display: flex; align-items: center; gap: 4px; }
.el-dock-copy { margin-right: auto; color: var(--muted, #a99fbe); white-space: nowrap; }
.el-dock a, .el-dock button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--variant, #cec3e3); font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.el-dock a:hover, .el-dock button:hover, .el-dock a.is-active, .el-dock button[aria-expanded="true"] { color: var(--text, #fff); background: var(--high, #28242f); }
.el-dock a:focus-visible, .el-dock button:focus-visible { outline: 2px solid var(--accent, #7154ce); outline-offset: 2px; }
.el-dock svg { width: 16px; height: 16px; flex: none; }
.el-dock button i { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--lowest), 0 0 0 3px var(--variant, #cec3e3); }
.el-dock .l-short { display: none; }
/* Desktop carries what the header doesn't (legal, contact, Color); the
   header's own links show only in the phone tab bar. */
.el-dock .m-only { display: none; }
body:has(.el-dock) { padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }
body:has(.el-dock) .scheme-switch { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
body:has(.el-dock) .scheme-switch-toggle { display: none; }
html[data-mode="light"] .el-dock { box-shadow: 0 -1px 0 rgba(20, 16, 30, 0.08), 0 -6px 20px rgba(20, 16, 30, 0.06); }
@media (max-width: 760px) {
  .el-dock-in { height: 60px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
  .el-dock-copy, .el-dock .l-long, .el-dock .d-only { display: none; }
  .el-dock .m-only { display: flex; }
  .el-dock .l-short, .el-dock button span { display: block; }
  .el-dock a, .el-dock button { flex-direction: column; justify-content: center; gap: 4px; height: 60px; padding: 0; border-radius: 0; font-size: 10px; letter-spacing: 0.08em; }
  .el-dock a:hover, .el-dock button:hover { background: none; }
  .el-dock a.is-active { background: none; color: var(--soft, #9281e1); }
  .el-dock svg { width: 20px; height: 20px; }
  .el-dock button i { width: 18px; height: 18px; margin: 1px 0; }
  body:has(.el-dock) { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  body:has(.el-dock) .scheme-switch { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}
@media print { .scheme-switch, .el-dock { display: none; } }

/* ── Grain ── a faint fixed noise layer over the page. Smooth dark gradients
   and blurred glows otherwise show 8-bit banding (visible rings and steps);
   the noise dithers them away. Inline SVG, no request. */
html[data-scheme] body::after {
  content: ""; position: fixed; inset: 0; z-index: 80; pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-mode="light"] body::after { opacity: 0.035; }
@media print { html[data-scheme] body::after { display: none; } }