@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@300..700&display=swap");

/* ============================================================================
   ePass Design System — Foundation
   Colors + Type tokens. Import once; consume everywhere.
   ============================================================================ */

/* ---------- Brand colour primitives -------------------------------------- */
:root {
  /* Brand */
  --ep-green:           #19d991;   /* Primary brand */
  --ep-green-accent:    #00ef96;   /* Highlights / hover — use sparingly */
  --ep-green-print:     #0bcc84;   /* CMYK only */
  --ep-dark:            #150b26;   /* Near-black — never #000 */
  --ep-white:           #ffffff;

  /* Tints/shades derived from --ep-dark and --ep-green for UI use */
  --ep-dark-900:        #150b26;
  --ep-dark-800:        #1f1633;
  --ep-dark-700:        #2a2140;
  --ep-dark-600:        #3a3252;
  --ep-dark-500:        #5a5273;
  --ep-dark-400:        #8a839f;
  --ep-dark-300:        #b8b3c7;
  --ep-dark-200:        #dcd9e3;
  --ep-dark-100:        #ededf1;
  --ep-dark-50:         #f6f5f8;

  --ep-green-900:       #0a6948;
  --ep-green-800:       #0d8a5e;
  --ep-green-700:       #0fab74;
  --ep-green-600:       #14c382;
  --ep-green-500:       #19d991;   /* same as --ep-green */
  --ep-green-400:       #4ce2a8;
  --ep-green-300:       #82ecc0;
  --ep-green-200:       #b9f4d8;
  --ep-green-100:       #d8f9e8;
  --ep-green-50:        #ecfdf3;

  /* Semantic — light mode (default) */
  --bg-canvas:          var(--ep-white);
  --bg-surface:         var(--ep-white);
  --bg-subtle:          var(--ep-dark-50);
  --bg-muted:           var(--ep-dark-100);
  --bg-inverse:         var(--ep-dark-900);

  --fg-primary:         var(--ep-dark-900);
  --fg-secondary:       var(--ep-dark-500);
  --fg-tertiary:        var(--ep-dark-400);
  --fg-inverse:         var(--ep-white);
  --fg-accent:          var(--ep-green-700);
  --fg-link:            var(--ep-green-700);

  --border-subtle:      var(--ep-dark-100);
  --border-default:     var(--ep-dark-200);
  --border-strong:      var(--ep-dark-300);
  --border-inverse:     var(--ep-dark-700);

  --accent-primary:     var(--ep-green);
  --accent-hover:       var(--ep-green-accent);
  --accent-pressed:     var(--ep-green-600);

  /* Status — held minimal, deliberate */
  --status-success:     var(--ep-green-700);
  --status-success-bg:  var(--ep-green-50);
  --status-warning:     #b65b00;
  --status-warning-bg:  #fff4e5;
  --status-danger:      #c0233a;
  --status-danger-bg:   #fdecef;
  --status-info:        #2a4ad3;
  --status-info-bg:     #eef0ff;

  /* Brand accent — used sparingly in marketing (radial backdrops) */
  --decor-purple:       #6f3bd3;
  --decor-purple-soft:  rgba(111, 59, 211, 0.25);
  --decor-green-soft:   rgba(25, 217, 145, 0.28);

  /* ---------- Type primitives ------------------------------------------- */
  --font-sans:          "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:          "Geist Mono", ui-monospace, "JetBrains Mono", "Menlo", monospace;

  --fw-thin:        100;
  --fw-extralight:  200;
  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;
  --fw-extrabold:   800;
  --fw-black:       900;

  /* Tracking — Geist looks best with slight negative on display */
  --tracking-display: -0.022em;
  --tracking-heading: -0.014em;
  --tracking-body:    -0.005em;
  --tracking-mono:    0;
  --tracking-label:    0.04em;

  /* Sizes — base 16 */
  --fs-display-xl: 64px;
  --fs-display-l:  48px;
  --fs-display:    36px;
  --fs-h1:         32px;
  --fs-h2:         24px;
  --fs-h3:         18px;
  --fs-h4:         16px;
  --fs-body-l:     17px;
  --fs-body:       16px;
  --fs-body-s:     14px;
  --fs-label:      13px;
  --fs-micro:      12px;

  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.4;
  --lh-relaxed:   1.55;
  --lh-loose:     1.7;

  /* ---------- Spacing / radii / shadows / motion ------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  --elev-1: 0 1px 2px rgba(21, 11, 38, 0.04), 0 1px 1px rgba(21, 11, 38, 0.03);
  --elev-2: 0 2px 4px rgba(21, 11, 38, 0.04), 0 4px 12px rgba(21, 11, 38, 0.06);
  --elev-3: 0 6px 14px rgba(21, 11, 38, 0.05), 0 16px 32px rgba(21, 11, 38, 0.08);
  --elev-4: 0 12px 28px rgba(21, 11, 38, 0.10), 0 28px 56px rgba(21, 11, 38, 0.12);
  --elev-focus: 0 0 0 3px rgba(25, 217, 145, 0.35);
  --inner-divider: inset 0 -1px 0 var(--border-subtle);

  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      320ms;
}

/* ---------- Dark mode (used in app product) ----------------------------- */
.theme-dark, [data-theme="dark"] {
  --bg-canvas:      #0c0717;
  --bg-surface:     #15102a;
  --bg-subtle:      #1c1633;
  --bg-muted:       #261d44;
  --bg-inverse:     var(--ep-white);

  --fg-primary:     #f6f4fb;
  --fg-secondary:   #b8b1cc;
  --fg-tertiary:    #8a839f;
  --fg-inverse:     var(--ep-dark);
  --fg-accent:      var(--ep-green-accent);
  --fg-link:        var(--ep-green-accent);

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.18);

  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --elev-2: 0 6px 16px rgba(0, 0, 0, 0.42);
  --elev-3: 0 12px 28px rgba(0, 0, 0, 0.5);
}

/* ============================================================================
   Semantic typography classes — drop on any element
   ============================================================================ */
.ep-display-xl,
.ep-display-l,
.ep-display,
.ep-h1, .ep-h2, .ep-h3, .ep-h4,
.ep-body-l, .ep-body, .ep-body-s,
.ep-label, .ep-eyebrow, .ep-mono { font-family: var(--font-sans); color: var(--fg-primary); }

.ep-display-xl { font-weight: var(--fw-bold); font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.ep-display-l  { font-weight: var(--fw-bold); font-size: var(--fs-display-l);  line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.ep-display    { font-weight: var(--fw-bold); font-size: var(--fs-display);    line-height: var(--lh-snug);  letter-spacing: var(--tracking-display); }
.ep-h1         { font-weight: var(--fw-bold);     font-size: var(--fs-h1); line-height: var(--lh-snug);   letter-spacing: var(--tracking-heading); }
.ep-h2         { font-weight: var(--fw-semibold); font-size: var(--fs-h2); line-height: var(--lh-snug);   letter-spacing: var(--tracking-heading); }
.ep-h3         { font-weight: var(--fw-medium);   font-size: var(--fs-h3); line-height: var(--lh-normal); letter-spacing: var(--tracking-body); }
.ep-h4         { font-weight: var(--fw-medium);   font-size: var(--fs-h4); line-height: var(--lh-normal); letter-spacing: var(--tracking-body); }

.ep-body-l { font-weight: var(--fw-regular); font-size: var(--fs-body-l); line-height: var(--lh-relaxed); letter-spacing: var(--tracking-body); color: var(--fg-secondary); }
.ep-body   { font-weight: var(--fw-regular); font-size: var(--fs-body);   line-height: var(--lh-relaxed); letter-spacing: var(--tracking-body); }
.ep-body-s { font-weight: var(--fw-regular); font-size: var(--fs-body-s); line-height: var(--lh-normal);  letter-spacing: var(--tracking-body); }

.ep-label   { font-weight: var(--fw-medium); font-size: var(--fs-label); line-height: var(--lh-normal); }
.ep-eyebrow { font-weight: var(--fw-medium); font-size: var(--fs-micro); line-height: 1.2; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-accent); }
.ep-mono    { font-family: var(--font-mono); font-weight: var(--fw-regular); font-size: var(--fs-body-s); letter-spacing: var(--tracking-mono); }

/* ---------- Light reset for previews ------------------------------------ */
.ep-reset { font-family: var(--font-sans); color: var(--fg-primary); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.ep-reset *, .ep-reset *::before, .ep-reset *::after { box-sizing: border-box; }

/* careers/shared.css — chrome shared across all three directions.
   Tokens come from tokens.css; everything below is page-level styling. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--fg-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: var(--tracking-body);
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }

/* ---------- Patterns ---------------------------------------------------- */
.pat-dot {
  background-image: radial-gradient(circle, rgba(21,11,38,0.10) 1px, transparent 1.1px);
  background-size: 22px 22px;
}
.pat-dot-dark {
  background-image: radial-gradient(circle, rgba(255,255,255,0.10) 1px, transparent 1.1px);
  background-size: 22px 22px;
}
.pat-grid {
  background-image:
    linear-gradient(to right, rgba(21,11,38,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21,11,38,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
}
.pat-grid-dark {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}
.pat-diag {
  background-image: repeating-linear-gradient(135deg, rgba(21,11,38,0.045) 0 1px, transparent 1px 12px);
}
.pat-mask-bottom {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(0,0,0,0) 100%);
}

/* ---------- Shared nav -------------------------------------------------- */
.ep-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle);
  height: 64px;
}
.ep-nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  height: 100%; display: flex; align-items: center;
}
.ep-nav-logo { display: flex; align-items: center; height: 28px; flex-shrink: 0; }
.ep-nav-logo svg { height: 24px; width: 98px; display: block; }
.ep-footer-brand svg { height: 28px; width: 114px; display: block; margin-bottom: 14px; }
/* "/ CAREERS" — non-interactive section label set as a mono eyebrow so it
   reads as a coherent part of the page's typographic system rather than a
   smaller sibling fighting the logo. */
.ep-nav-section {
  display: inline-flex; align-items: center; gap: 10px;
  margin-left: 14px;
  padding-top: 3px;          /* optical alignment with the logo wordmark */
}
.ep-nav-section .divider {
  font-size: 18px; font-weight: 200; line-height: 1;
  color: var(--border-default);
  user-select: none;
}
.ep-nav-section .label {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-secondary);
}
.ep-nav-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* ---------- Mono / eyebrow / rule eyebrow ------------------------------- */
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "ss01", "ss02";
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}
.rule-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ep-green-700);
}
.rule-eyebrow::before {
  content: ''; width: 18px; height: 1px; background: var(--ep-green-700);
}

/* ---------- CTA Buttons ------------------------------------------------- */
.cta {
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
  font-family: inherit; font-weight: 600; font-size: 14px; letter-spacing: -0.005em;
  border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; user-select: none;
  text-decoration: none;
  position: relative;
  transition:
    background var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast),
    transform var(--dur-base) var(--ease-emphasis),
    box-shadow var(--dur-base) var(--ease-emphasis),
    color var(--dur-fast);
}
.cta-sm { height: 38px; padding: 0 14px; font-size: 13px; }
.cta-md { height: 44px; padding: 0 18px; }
.cta-lg { height: 52px; padding: 0 22px; font-size: 15px; }

/* Unified hover lift across all CTA variants — the per-variant rules below
   layer their own color shifts and arrow movement on top. */
.cta:hover { transform: translateY(-1px); }
.cta:active { transform: translateY(0); transition-duration: 60ms; }
.cta:focus-visible {
  outline: 2px solid var(--ep-green);
  outline-offset: 3px;
}

.cta-primary {
  background: var(--ep-dark);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 1px 0 rgba(0,0,0,0.04);
}
.cta-primary .arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--ep-green); color: var(--ep-dark);
  transition: transform var(--dur-base) var(--ease-emphasis), background var(--dur-fast);
}
.cta-primary:hover {
  background: #1f1633;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    0 10px 24px rgba(21, 11, 38, 0.28);
}
.cta-primary:hover .arrow { transform: translateX(3px); background: var(--ep-green-accent); }

.cta-secondary {
  background: #fff; color: var(--ep-dark);
  border-color: var(--border-default);
}
.cta-secondary:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
  box-shadow: 0 8px 18px rgba(21, 11, 38, 0.08);
}

.cta-ghost {
  background: transparent; color: var(--ep-dark);
  border-color: transparent;
}
.cta-ghost:hover { background: var(--bg-subtle); }

.cta-inverse {
  background: var(--ep-green); color: var(--ep-dark);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
.cta-inverse .arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--ep-dark); color: var(--ep-green);
  transition: transform var(--dur-base) var(--ease-emphasis);
}
.cta-inverse:hover {
  background: var(--ep-green-accent);
  box-shadow: 0 10px 24px rgba(25, 217, 145, 0.32);
}
.cta-inverse:hover .arrow { transform: translateX(3px); }

/* ---------- Bordered grid stack (Cloudflare-style) ---------------------- */
.grid-stack {
  display: grid; gap: 0;
  border: 1px solid var(--border-default);
  border-radius: 16px; overflow: hidden;
  background: #fff;
}
.grid-stack > * {
  border-right: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  background: #fff;
  transition: background var(--dur-base) var(--ease-standard);
}
.gs-3 { grid-template-columns: repeat(3, 1fr); }
.gs-3 > *:nth-child(3n) { border-right: 0; }
.gs-3 > *:nth-last-child(-n+3) { border-bottom: 0; }
.gs-2 { grid-template-columns: 1fr 1fr; }
.gs-2 > *:nth-child(2n) { border-right: 0; }
.gs-2 > *:nth-last-child(-n+2) { border-bottom: 0; }
.gs-4 { grid-template-columns: repeat(4, 1fr); }
.gs-4 > *:nth-child(4n) { border-right: 0; }
.gs-4 > *:nth-last-child(-n+4) { border-bottom: 0; }

/* ---------- Status chip ------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg-subtle); color: var(--fg-secondary);
  border: 1px solid var(--border-subtle);
}
.chip-dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px;
  background: var(--ep-green); display: inline-block;
}
.chip-green {
  background: var(--ep-green-50);
  color: var(--ep-green-900);
  border-color: var(--ep-green-200);
}

/* ---------- Section helper --------------------------------------------- */
.section { padding: 96px 32px; border-top: 1px solid var(--border-subtle); }
.section-inner { max-width: 1280px; margin: 0 auto; }

/* ---------- Reveal animations ------------------------------------------ */
/* .reveal — fires on load (above-the-fold hero copy, staggered by .reveal-N). */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { animation: reveal-up 480ms var(--ease-emphasis) both; }
.reveal-1 { animation-delay: 60ms; }
.reveal-2 { animation-delay: 120ms; }
.reveal-3 { animation-delay: 180ms; }
.reveal-4 { animation-delay: 240ms; }

/* .scroll-reveal — fires when the element scrolls into view (an
   IntersectionObserver flips .is-visible on). Each instance can carry its own
   inline transition-delay for stagger effects. */
.scroll-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease-emphasis), transform 600ms var(--ease-emphasis);
  will-change: opacity, transform;
}
.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .scroll-reveal {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important; transform: none !important;
  }
}

/* ---------- Shared footer ---------------------------------------------- */
.ep-footer {
  border-top: 1px solid var(--border-subtle);
  padding: 64px 32px 40px;
  background: #fff;
}
.ep-footer-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px;
}
.ep-footer-brand svg { height: 28px; width: auto; margin-bottom: 14px; }
.ep-footer-brand p {
  margin: 0; font-size: 14px; color: var(--fg-secondary); line-height: 1.55; max-width: 320px;
}
.ep-footer h4 {
  margin: 0 0 14px; font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fg-tertiary);
  font-family: var(--font-mono);
}
.ep-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ep-footer ul a {
  font-size: 14px; color: var(--fg-secondary);
  transition: color var(--dur-fast);
}
.ep-footer ul a:hover { color: var(--fg-primary); }
.ep-footer-bottom {
  max-width: 1280px; margin: 56px auto 0;
  padding-top: 24px; border-top: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--fg-tertiary);
}

/* Image-slot defaults — keep the kit's component fitting cleanly. */
image-slot {
  --image-slot-bg: var(--bg-subtle);
  --image-slot-border: var(--border-default);
  --image-slot-text: var(--fg-tertiary);
}


/* ---------- Shared chrome — responsive ---------------------------------- */
@media (max-width: 1024px) {
  .ep-footer { padding: 56px 24px 32px; }
  .ep-footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .ep-nav { height: 56px; }
  .ep-nav-inner { padding: 0 16px; }
  .ep-nav-logo svg { height: 22px; width: 88px; }
  .ep-nav-section { margin-left: 10px; }
  .ep-nav-section .label { font-size: 11px; letter-spacing: 0.06em; }
  .ep-nav-actions { gap: 8px; }
  /* Drop the epass.tech secondary CTA on mobile so the primary CTA has room. */
  .ep-nav-actions .cta-secondary { display: none; }

  .ep-footer { padding: 48px 20px 32px; }
  .ep-footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .ep-footer-brand svg { margin-bottom: 12px; }
  .ep-footer-brand p { font-size: 13px; max-width: none; }
  .ep-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 40px;
    font-size: 12px;
  }
}

@media (max-width: 420px) {
  /* The "/ CAREERS" section label gets dropped on the narrowest phones so
     the nav doesn't get crowded against the See-roles CTA. */
  .ep-nav-section .label,
  .ep-nav-section .divider { display: none; }
  .ep-nav-section { margin-left: 0; }
}