/* ==========================================================================
   CJE Tech Solutions — stylesheet
   Plain CSS (no build step needed). Contains: theme variables, reset,
   base styles, component styles and the utility classes used in the HTML.
   ========================================================================== */

@layer theme, base, components, utilities;

/* ---------- Theme ---------- */
@layer theme {
  :root, :host {
    --spacing: 0.25rem;
    --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  }
}

:root {
  --radius: 0.375rem;

  /* Brand palette */
  --navy: oklch(0.2 0.045 260);            /* #0B1930 */
  --navy-foreground: oklch(1 0 0);
  --corporate: oklch(0.34 0.09 255);       /* #123B69 */
  --electric: oklch(0.62 0.19 252);        /* #1685F8 */
  --signal: oklch(0.6 0.21 22);            /* #E63946 */
  --silver: oklch(0.78 0.03 250);          /* #A9B8CA */
  --mist: oklch(0.97 0.006 250);
  --line-dark: oklch(1 0 0 / 0.12);

  --background: oklch(1 0 0);
  --foreground: var(--navy);
  --card: oklch(1 0 0);
  --card-foreground: var(--navy);
  --popover: oklch(1 0 0);
  --popover-foreground: var(--navy);
  --primary: var(--electric);
  --primary-foreground: oklch(1 0 0);
  --secondary: var(--mist);
  --secondary-foreground: var(--navy);
  --muted: var(--mist);
  --muted-foreground: oklch(0.48 0.03 255);
  --accent: oklch(0.95 0.02 250);
  --accent-foreground: var(--navy);
  --destructive: var(--signal);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.9 0.012 250);
  --input: oklch(0.88 0.015 250);
  --ring: var(--electric);

  --gradient-navy: linear-gradient(160deg, var(--navy) 0%, oklch(0.24 0.06 258) 55%, var(--corporate) 130%);
  --gradient-overlay: linear-gradient(90deg, oklch(0.2 0.045 260 / 0.94) 0%, oklch(0.2 0.045 260 / 0.7) 45%, oklch(0.2 0.045 260 / 0.15) 100%);
  --gradient-overlay-bottom: linear-gradient(0deg, oklch(0.2 0.045 260 / 0.95) 0%, oklch(0.2 0.045 260 / 0.2) 60%, transparent 100%);
  --glow-electric: radial-gradient(60% 60% at 70% 30%, oklch(0.62 0.19 252 / 0.35) 0%, transparent 70%);
  --shadow-elevated: 0 30px 60px -30px oklch(0.2 0.045 260 / 0.45);
  --shadow-cta: 0 12px 30px -10px oklch(0.62 0.19 252 / 0.6);
}

/* ---------- Reset + base ---------- */
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent;
  }
  hr { height: 0; color: inherit; border-top-width: 1px; }
  abbr:where([title]) { text-decoration: underline dotted; }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
  a { color: inherit; text-decoration: inherit; }
  b, strong { font-weight: bolder; }
  code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; }
  small { font-size: 80%; }
  sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
  sub { bottom: -0.25em; }
  sup { top: -0.5em; }
  table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
  :-moz-focusring { outline: auto; }
  progress { vertical-align: baseline; }
  summary { display: list-item; }
  ol, ul, menu { list-style: none; }
  img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
  img, video { max-width: 100%; height: auto; }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup { font-weight: bolder; }
  :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; }
  ::file-selector-button { margin-inline-end: 4px; }
  ::placeholder { opacity: 1; color: color-mix(in oklab, currentcolor 50%, transparent); }
  textarea { resize: vertical; }
  ::-webkit-search-decoration { -webkit-appearance: none; }
  ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; }
  ::-webkit-datetime-edit { display: inline-flex; }
  ::-webkit-datetime-edit-fields-wrapper { padding: 0; }
  :-moz-ui-invalid { box-shadow: none; }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { appearance: button; }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
  [hidden]:where(:not([hidden="until-found"])) { display: none !important; }

  /* --- project base styles --- */
  * { border-color: var(--border); }
  html { scroll-behavior: smooth; }
  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: -0.025em;
  }
}

/* ---------- Components (custom utilities from the original design) ---------- */
@layer utilities {
  .container-x {
    width: 100%;
    max-width: 82rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
  }
  @media (min-width: 768px) {
    .container-x { padding-inline: 2.5rem; }
  }
  .eyebrow {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--electric);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
  }
  .eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 2px;
    background: var(--signal);
  }
}

/* ---------- Scroll reveal + animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.img-reveal {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s cubic-bezier(0.7, 0, 0.2, 1);
}
.img-reveal.is-visible {
  clip-path: inset(0 0 0 0);
}

@keyframes hint-slide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .img-reveal {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
  .animate-hint { animation: none; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------- Toast notifications (replaces the React "sonner" toaster) ---------- */
.toaster {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999999;
  width: 356px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: none;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 16px;
  font-size: 13px;
  line-height: 1.5;
  background: var(--background);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.toast.is-in { opacity: 1; transform: none; }
.toast-icon { display: flex; flex-shrink: 0; width: 16px; height: 16px; margin-left: -3px; margin-right: 4px; }
.toast-icon svg { width: 20px; height: 20px; margin: -2px; }
.toast-title { font-weight: 500; }

/* ---------- Utility classes ---------- */
@layer utilities {
.-bottom-0\.5{bottom:calc(var(--spacing) * -0.5)}
.-bottom-8{bottom:calc(var(--spacing) * -8)}
.-left-2{left:calc(var(--spacing) * -2)}
.-right-2{right:calc(var(--spacing) * -2)}
.-right-4{right:calc(var(--spacing) * -4)}
.-top-6{top:calc(var(--spacing) * -6)}
.-translate-x-1\/2{--tw-translate-x:-50%;translate:var(--tw-translate-x, 0) var(--tw-translate-y, 0)}
.-translate-y-0\.5{--tw-translate-y:calc(var(--spacing) * -0.5);translate:var(--tw-translate-x, 0) var(--tw-translate-y, 0)}
.-translate-y-1\/2{--tw-translate-y:-50%;translate:var(--tw-translate-x, 0) var(--tw-translate-y, 0)}
.-z-10{z-index:-10}
.-z-20{z-index:-20}
.absolute{position:absolute}
.animate-hint{animation:hint-slide 1.8s ease-in-out infinite}
.animate-spin{animation:spin 1s linear infinite}
.appearance-none{appearance:none}
.aspect-\[16\/10\]{aspect-ratio:16/10}
.aspect-\[21\/9\]{aspect-ratio:21/9}
.aspect-\[4\/3\]{aspect-ratio:4/3}
.aspect-\[4\/5\]{aspect-ratio:4/5}
.aspect-\[5\/4\]{aspect-ratio:5/4}
.aspect-\[6\/5\]{aspect-ratio:6/5}
.backdrop-blur{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.backdrop-blur-md{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.backdrop-blur-sm{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.bg-background{background-color:var(--background)}
.bg-background\/95{background-color:color-mix(in oklab, var(--background) 95%, transparent)}
.bg-border{background-color:var(--border)}
.bg-bottom-overlay{background:var(--gradient-overlay-bottom)}
.bg-destructive\/5{background-color:color-mix(in oklab, var(--destructive) 5%, transparent)}
.bg-electric{background-color:var(--electric)}
.bg-electric-glow{background:var(--glow-electric)}
.bg-hero-overlay{background:var(--gradient-overlay)}
.bg-mist{background-color:var(--mist)}
.bg-navy{background-color:var(--navy)}
.bg-navy-foreground{background-color:var(--navy-foreground)}
.bg-navy-gradient{background:var(--gradient-navy)}
.bg-navy\/70{background-color:color-mix(in oklab, var(--navy) 70%, transparent)}
.bg-navy\/85{background-color:color-mix(in oklab, var(--navy) 85%, transparent)}
.bg-primary{background-color:var(--primary)}
.bg-signal{background-color:var(--signal)}
.block{display:block}
.border{border-style:solid;border-width:1px}
.border-4{border-style:solid;border-width:4px}
.border-b{border-bottom-style:solid;border-bottom-width:1px}
.border-border{border-color:var(--border)}
.border-destructive\/30{border-color:color-mix(in oklab, var(--destructive) 30%, transparent)}
.border-electric{border-color:var(--electric)}
.border-input{border-color:var(--input)}
.border-l-2{border-left-style:solid;border-left-width:2px}
.border-line-dark{border-color:var(--line-dark)}
.border-mist{border-color:var(--mist)}
.border-navy-foreground{border-color:var(--navy-foreground)}
.border-navy-foreground\/30{border-color:color-mix(in oklab, var(--navy-foreground) 30%, transparent)}
.border-t{border-top-style:solid;border-top-width:1px}
.border-transparent{border-color:transparent}
.bottom-0{bottom:calc(var(--spacing) * 0)}
.cursor-ew-resize{cursor:ew-resize}
.cursor-pointer{cursor:pointer}
.divide-y > :not(:last-child){border-bottom-style:solid;border-bottom-width:1px}
.duration-300{--tw-duration:300ms;transition-duration:300ms}
.duration-500{--tw-duration:500ms;transition-duration:500ms}
.duration-\[1\.2s\]{--tw-duration:1.2s;transition-duration:1.2s}
.ease-out{--tw-ease:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}
.fixed{position:fixed}
.flex{display:flex}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.font-bold{font-weight:700}
.font-display{font-family:var(--font-display)}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.gap-1{gap:calc(var(--spacing) * 1)}
.gap-10{gap:calc(var(--spacing) * 10)}
.gap-12{gap:calc(var(--spacing) * 12)}
.gap-14{gap:calc(var(--spacing) * 14)}
.gap-2{gap:calc(var(--spacing) * 2)}
.gap-3{gap:calc(var(--spacing) * 3)}
.gap-4{gap:calc(var(--spacing) * 4)}
.gap-5{gap:calc(var(--spacing) * 5)}
.gap-6{gap:calc(var(--spacing) * 6)}
.gap-8{gap:calc(var(--spacing) * 8)}
.gap-px{gap:1px}
.grid{display:grid}
.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
.grid-cols-\[56px_1fr\]{grid-template-columns:56px 1fr}
.grid-cols-\[auto_1fr\]{grid-template-columns:auto 1fr}
.grid-cols-\[auto_1fr_auto\]{grid-template-columns:auto 1fr auto}
.grid-lines{background-image:linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at center, black 20%, transparent 75%);mask-image:radial-gradient(ellipse at center, black 20%, transparent 75%)}
.h-0\.5{height:calc(var(--spacing) * 0.5)}
.h-10{height:calc(var(--spacing) * 10)}
.h-11{height:calc(var(--spacing) * 11)}
.h-12{height:calc(var(--spacing) * 12)}
.h-14{height:calc(var(--spacing) * 14)}
.h-16{height:calc(var(--spacing) * 16)}
.h-20{height:calc(var(--spacing) * 20)}
.h-4{height:calc(var(--spacing) * 4)}
.h-\[380px\]{height:380px}
.h-full{height:100%}
.hidden{display:none}
.inline-block{display:inline-block}
.inline-flex{display:inline-flex}
.inset-0{inset:calc(var(--spacing) * 0)}
.inset-x-0{inset-inline:calc(var(--spacing) * 0)}
.inset-x-4{inset-inline:calc(var(--spacing) * 4)}
.inset-y-0{inset-block:calc(var(--spacing) * 0)}
.invisible{visibility:hidden}
.isolate{isolation:isolate}
.items-center{align-items:center}
.items-end{align-items:flex-end}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.leading-\[1\.02\]{--tw-leading:1.02;line-height:1.02}
.leading-\[1\.05\]{--tw-leading:1.05;line-height:1.05}
.leading-\[1\.08\]{--tw-leading:1.08;line-height:1.08}
.leading-\[1\.1\]{--tw-leading:1.1;line-height:1.1}
.leading-relaxed{--tw-leading:1.625;line-height:1.625}
.leading-snug{--tw-leading:1.375;line-height:1.375}
.leading-tight{--tw-leading:1.25;line-height:1.25}
.left-4{left:calc(var(--spacing) * 4)}
.left-\[27px\]{left:27px}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-4xl{max-width:56rem}
.max-w-5xl{max-width:64rem}
.max-w-md{max-width:28rem}
.max-w-sm{max-width:24rem}
.max-w-xl{max-width:36rem}
.mb-2{margin-bottom:calc(var(--spacing) * 2)}
.min-h-\[100svh\]{min-height:100svh}
.min-h-\[440px\]{min-height:440px}
.min-h-\[480px\]{min-height:480px}
.min-h-\[78vh\]{min-height:78vh}
.min-h-screen{height:100vh}
.mr-2{margin-right:calc(var(--spacing) * 2)}
.mt-0\.5{margin-top:calc(var(--spacing) * 0.5)}
.mt-1{margin-top:calc(var(--spacing) * 1)}
.mt-10{margin-top:calc(var(--spacing) * 10)}
.mt-14{margin-top:calc(var(--spacing) * 14)}
.mt-16{margin-top:calc(var(--spacing) * 16)}
.mt-2{margin-top:calc(var(--spacing) * 2)}
.mt-20{margin-top:calc(var(--spacing) * 20)}
.mt-3{margin-top:calc(var(--spacing) * 3)}
.mt-4{margin-top:calc(var(--spacing) * 4)}
.mt-5{margin-top:calc(var(--spacing) * 5)}
.mt-6{margin-top:calc(var(--spacing) * 6)}
.mt-8{margin-top:calc(var(--spacing) * 8)}
.object-cover{object-fit:cover}
.opacity-0{opacity:0%}
.opacity-100{opacity:100%}
.opacity-40{opacity:40%}
.opacity-60{opacity:60%}
.order-1{order:1}
.order-2{order:2}
.origin-left{transform-origin:0 50%}
.outline-none{--tw-outline-style:none;outline-style:none}
.overflow-hidden{overflow:hidden}
.p-4{padding:calc(var(--spacing) * 4)}
.p-5{padding:calc(var(--spacing) * 5)}
.p-6{padding:calc(var(--spacing) * 6)}
.p-7{padding:calc(var(--spacing) * 7)}
.p-8{padding:calc(var(--spacing) * 8)}
.pb-16{padding-bottom:calc(var(--spacing) * 16)}
.pl-6{padding-left:calc(var(--spacing) * 6)}
.placeholder\:text-muted-foreground\/70::placeholder{color:color-mix(in oklab, var(--muted-foreground) 70%, transparent)}
.pointer-events-none{pointer-events:none}
.pt-24{padding-top:calc(var(--spacing) * 24)}
.pt-28{padding-top:calc(var(--spacing) * 28)}
.pt-8{padding-top:calc(var(--spacing) * 8)}
.px-3{padding-inline:calc(var(--spacing) * 3)}
.px-4{padding-inline:calc(var(--spacing) * 4)}
.px-5{padding-inline:calc(var(--spacing) * 5)}
.px-7{padding-inline:calc(var(--spacing) * 7)}
.px-8{padding-inline:calc(var(--spacing) * 8)}
.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}
.py-10{padding-block:calc(var(--spacing) * 10)}
.py-12{padding-block:calc(var(--spacing) * 12)}
.py-16{padding-block:calc(var(--spacing) * 16)}
.py-2{padding-block:calc(var(--spacing) * 2)}
.py-20{padding-block:calc(var(--spacing) * 20)}
.py-24{padding-block:calc(var(--spacing) * 24)}
.py-3\.5{padding-block:calc(var(--spacing) * 3.5)}
.py-4{padding-block:calc(var(--spacing) * 4)}
.py-5{padding-block:calc(var(--spacing) * 5)}
.py-6{padding-block:calc(var(--spacing) * 6)}
.py-7{padding-block:calc(var(--spacing) * 7)}
.py-8{padding-block:calc(var(--spacing) * 8)}
.relative{position:relative}
.right-4{right:calc(var(--spacing) * 4)}
.ring-1{box-shadow:0 0 0 1px var(--tw-ring-color, currentcolor)}
.ring-line-dark{--tw-ring-color:var(--line-dark)}
.rounded-full{border-radius:calc(infinity * 1px)}
.rounded-md{border-radius:var(--radius)}
.rounded-sm{border-radius:calc(var(--radius) - 2px)}
.scale-105{--tw-scale-x:105%;--tw-scale-y:105%;scale:var(--tw-scale-x, 100%) var(--tw-scale-y, 100%)}
.scale-x-0{--tw-scale-x:0%;scale:var(--tw-scale-x, 100%) var(--tw-scale-y, 100%)}
.scroll-mt-24{scroll-margin-top:calc(var(--spacing) * 24)}
.select-none{-webkit-user-select:none;user-select:none}
.shadow-cta{box-shadow:var(--shadow-cta)}
.shadow-elevated{box-shadow:var(--shadow-elevated)}
.shrink-0{flex-shrink:0}
.size-1\.5{width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5)}
.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}
.size-11{width:calc(var(--spacing) * 11);height:calc(var(--spacing) * 11)}
.size-12{width:calc(var(--spacing) * 12);height:calc(var(--spacing) * 12)}
.size-14{width:calc(var(--spacing) * 14);height:calc(var(--spacing) * 14)}
.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}
.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}
.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}
.space-y-3 > :not(:last-child){margin-bottom:calc(var(--spacing) * 3)}
.space-y-4 > :not(:last-child){margin-bottom:calc(var(--spacing) * 4)}
.space-y-8 > :not(:last-child){margin-bottom:calc(var(--spacing) * 8)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border-width:0}
.text-2xl{font-size:1.5rem;line-height:var(--tw-leading, calc(2 / 1.5))}
.text-3xl{font-size:1.875rem;line-height:var(--tw-leading, calc(2.25 / 1.875))}
.text-4xl{font-size:2.25rem;line-height:var(--tw-leading, calc(2.5 / 2.25))}
.text-7xl{font-size:4.5rem;line-height:var(--tw-leading, 1)}
.text-\[15px\]{font-size:15px}
.text-\[2\.6rem\]{font-size:2.6rem}
.text-base{font-size:1rem;line-height:var(--tw-leading, calc(1.5 / 1))}
.text-center{text-align:center}
.text-destructive{color:var(--destructive)}
.text-electric{color:var(--electric)}
.text-foreground{color:var(--foreground)}
.text-lg{font-size:1.125rem;line-height:var(--tw-leading, calc(1.75 / 1.125))}
.text-mist{color:var(--mist)}
.text-muted-foreground{color:var(--muted-foreground)}
.text-navy-foreground{color:var(--navy-foreground)}
.text-primary-foreground{color:var(--primary-foreground)}
.text-silver{color:var(--silver)}
.text-silver\/80{color:color-mix(in oklab, var(--silver) 80%, transparent)}
.text-sm{font-size:0.875rem;line-height:var(--tw-leading, calc(1.25 / 0.875))}
.text-xl{font-size:1.25rem;line-height:var(--tw-leading, calc(1.75 / 1.25))}
.text-xs{font-size:0.75rem;line-height:var(--tw-leading, calc(1 / 0.75))}
.top-0{top:calc(var(--spacing) * 0)}
.top-1\/2{top:50%}
.top-4{top:calc(var(--spacing) * 4)}
.touch-none{touch-action:none}
.tracking-\[0\.18em\]{letter-spacing:0.18em}
.tracking-\[0\.2em\]{letter-spacing:0.2em}
.tracking-tight{letter-spacing:-0.025em}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
.transition-colors{transition-property:color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
.transition-transform{transition-property:transform, translate, scale, rotate;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}
.translate-y-0{--tw-translate-y:calc(var(--spacing) * 0);translate:var(--tw-translate-x, 0) var(--tw-translate-y, 0)}
.translate-y-4{--tw-translate-y:calc(var(--spacing) * 4);translate:var(--tw-translate-x, 0) var(--tw-translate-y, 0)}
.uppercase{text-transform:uppercase}
.visible{visibility:visible}
.w-0\.5{width:calc(var(--spacing) * 0.5)}
.w-11{width:calc(var(--spacing) * 11)}
.w-56{width:calc(var(--spacing) * 56)}
.w-auto{width:auto}
.w-full{width:100%}
.w-px{width:1px}
.whitespace-nowrap{white-space:nowrap}
.z-10{z-index:10}
.z-50{z-index:50}
.first\:pt-0:first-child{padding-top:calc(var(--spacing) * 0)}
@media (hover:hover){.group-hover\:-translate-y-0\.5:is(:where(.group):hover *){--tw-translate-y:calc(var(--spacing) * -0.5);translate:var(--tw-translate-x, 0) var(--tw-translate-y, 0)}}
@media (hover:hover){.group-hover\:bg-navy:is(:where(.group):hover *){background-color:var(--navy)}}
@media (hover:hover){.group-hover\:border-navy:is(:where(.group):hover *){border-color:var(--navy)}}
@media (hover:hover){.group-hover\:opacity-95:is(:where(.group):hover *){opacity:95%}}
@media (hover:hover){.group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;scale:var(--tw-scale-x, 100%) var(--tw-scale-y, 100%)}}
@media (hover:hover){.group-hover\:scale-x-100:is(:where(.group):hover *){--tw-scale-x:100%;scale:var(--tw-scale-x, 100%) var(--tw-scale-y, 100%)}}
@media (hover:hover){.group-hover\:text-electric:is(:where(.group):hover *){color:var(--electric)}}
@media (hover:hover){.group-hover\:translate-x-0\.5:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * 0.5);translate:var(--tw-translate-x, 0) var(--tw-translate-y, 0)}}
@media (hover:hover){.hover\:-translate-y-0\.5:hover{--tw-translate-y:calc(var(--spacing) * -0.5);translate:var(--tw-translate-x, 0) var(--tw-translate-y, 0)}}
@media (hover:hover){.hover\:bg-corporate:hover{background-color:var(--corporate)}}
@media (hover:hover){.hover\:bg-electric\/90:hover{background-color:color-mix(in oklab, var(--electric) 90%, transparent)}}
@media (hover:hover){.hover\:bg-mist:hover{background-color:var(--mist)}}
@media (hover:hover){.hover\:bg-navy-foreground\/10:hover{background-color:color-mix(in oklab, var(--navy-foreground) 10%, transparent)}}
@media (hover:hover){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--primary) 90%, transparent)}}
@media (hover:hover){.hover\:border-electric:hover{border-color:var(--electric)}}
@media (hover:hover){.hover\:border-navy-foreground\/60:hover{border-color:color-mix(in oklab, var(--navy-foreground) 60%, transparent)}}
@media (hover:hover){.hover\:text-foreground:hover{color:var(--foreground)}}
@media (hover:hover){.hover\:text-navy-foreground:hover{color:var(--navy-foreground)}}
.focus\:bg-background:focus{background-color:var(--background)}
.focus\:border-electric:focus{border-color:var(--electric)}
.focus\:fixed:focus{position:fixed}
.focus\:left-4:focus{left:calc(var(--spacing) * 4)}
.focus\:not-sr-only:focus{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip-path:none;white-space:normal}
.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}
.focus\:px-4:focus{padding-inline:calc(var(--spacing) * 4)}
.focus\:py-2:focus{padding-block:calc(var(--spacing) * 2)}
.focus\:ring-4:focus{box-shadow:0 0 0 4px var(--tw-ring-color, currentcolor)}
.focus\:ring-electric\/15:focus{--tw-ring-color:color-mix(in oklab, var(--electric) 15%, transparent)}
.focus\:rounded-md:focus{border-radius:var(--radius)}
.focus\:top-4:focus{top:calc(var(--spacing) * 4)}
.focus\:z-\[60\]:focus{z-index:60}
.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}
.focus-visible\:ring-1:focus-visible{box-shadow:0 0 0 1px var(--tw-ring-color, currentcolor)}
.focus-visible\:ring-4:focus-visible{box-shadow:0 0 0 4px var(--tw-ring-color, currentcolor)}
.focus-visible\:ring-electric\/40:focus-visible{--tw-ring-color:color-mix(in oklab, var(--electric) 40%, transparent)}
.focus-visible\:ring-ring:focus-visible{--tw-ring-color:var(--ring)}
.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;scale:var(--tw-scale-x, 100%) var(--tw-scale-y, 100%)}
.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}
.disabled\:opacity-50:disabled{opacity:50%}
.disabled\:pointer-events-none:disabled{pointer-events:none}
.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}
.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}
.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}
.group-data-\[status\=active\]\:scale-x-100:is(:where(.group)[data-status="active"] *){--tw-scale-x:100%;scale:var(--tw-scale-x, 100%) var(--tw-scale-y, 100%)}
.data-\[status\=active\]\:text-electric[data-status="active"]{color:var(--electric)}
.data-\[status\=active\]\:text-foreground[data-status="active"]{color:var(--foreground)}
@media (min-width:40rem){.sm\:flex-row{flex-direction:row}}
@media (min-width:40rem){.sm\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (min-width:40rem){.sm\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}}
@media (min-width:40rem){.sm\:text-5xl{font-size:3rem;line-height:var(--tw-leading, 1)}}
@media (min-width:40rem){.sm\:text-6xl{font-size:3.75rem;line-height:var(--tw-leading, 1)}}
@media (min-width:48rem){.md\:aspect-\[16\/9\]{aspect-ratio:16/9}}
@media (min-width:48rem){.md\:block{display:block}}
@media (min-width:48rem){.md\:col-span-2{grid-column:span 2 / span 2}}
@media (min-width:48rem){.md\:col-span-4{grid-column:span 4 / span 4}}
@media (min-width:48rem){.md\:col-span-6{grid-column:span 6 / span 6}}
@media (min-width:48rem){.md\:flex-row{flex-direction:row}}
@media (min-width:48rem){.md\:gap-10{gap:calc(var(--spacing) * 10)}}
@media (min-width:48rem){.md\:gap-8{gap:calc(var(--spacing) * 8)}}
@media (min-width:48rem){.md\:grid{display:grid}}
@media (min-width:48rem){.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (min-width:48rem){.md\:grid-cols-6{grid-template-columns:repeat(6, minmax(0, 1fr))}}
@media (min-width:48rem){.md\:grid-cols-\[80px_auto_1fr_auto\]{grid-template-columns:80px auto 1fr auto}}
@media (min-width:48rem){.md\:h-14{height:calc(var(--spacing) * 14)}}
@media (min-width:48rem){.md\:h-\[460px\]{height:460px}}
@media (min-width:48rem){.md\:items-center{align-items:center}}
@media (min-width:48rem){.md\:items-end{align-items:flex-end}}
@media (min-width:48rem){.md\:justify-between{justify-content:space-between}}
@media (min-width:48rem){.md\:left-6{left:calc(var(--spacing) * 6)}}
@media (min-width:48rem){.md\:mt-0{margin-top:calc(var(--spacing) * 0)}}
@media (min-width:48rem){.md\:p-10{padding:calc(var(--spacing) * 10)}}
@media (min-width:48rem){.md\:p-8{padding:calc(var(--spacing) * 8)}}
@media (min-width:48rem){.md\:pb-24{padding-bottom:calc(var(--spacing) * 24)}}
@media (min-width:48rem){.md\:px-4{padding-inline:calc(var(--spacing) * 4)}}
@media (min-width:48rem){.md\:py-10{padding-block:calc(var(--spacing) * 10)}}
@media (min-width:48rem){.md\:py-20{padding-block:calc(var(--spacing) * 20)}}
@media (min-width:48rem){.md\:py-28{padding-block:calc(var(--spacing) * 28)}}
@media (min-width:48rem){.md\:py-32{padding-block:calc(var(--spacing) * 32)}}
@media (min-width:48rem){.md\:py-36{padding-block:calc(var(--spacing) * 36)}}
@media (min-width:48rem){.md\:right-6{right:calc(var(--spacing) * 6)}}
@media (min-width:48rem){.md\:text-2xl{font-size:1.5rem;line-height:var(--tw-leading, calc(2 / 1.5))}}
@media (min-width:48rem){.md\:text-4xl{font-size:2.25rem;line-height:var(--tw-leading, calc(2.5 / 2.25))}}
@media (min-width:48rem){.md\:text-5xl{font-size:3rem;line-height:var(--tw-leading, 1)}}
@media (min-width:48rem){.md\:text-6xl{font-size:3.75rem;line-height:var(--tw-leading, 1)}}
@media (min-width:48rem){.md\:text-9xl{font-size:8rem;line-height:var(--tw-leading, 1)}}
@media (min-width:48rem){.md\:text-xl{font-size:1.25rem;line-height:var(--tw-leading, calc(1.75 / 1.25))}}
@media (min-width:48rem){.md\:top-6{top:calc(var(--spacing) * 6)}}
@media (min-width:48rem){.md\:w-auto{width:auto}}
@media (min-width:64rem){.lg\:-right-10{right:calc(var(--spacing) * -10)}}
@media (min-width:64rem){.lg\:block{display:block}}
@media (min-width:64rem){.lg\:col-span-2{grid-column:span 2 / span 2}}
@media (min-width:64rem){.lg\:col-span-3{grid-column:span 3 / span 3}}
@media (min-width:64rem){.lg\:col-span-4{grid-column:span 4 / span 4}}
@media (min-width:64rem){.lg\:col-span-5{grid-column:span 5 / span 5}}
@media (min-width:64rem){.lg\:col-span-6{grid-column:span 6 / span 6}}
@media (min-width:64rem){.lg\:col-span-7{grid-column:span 7 / span 7}}
@media (min-width:64rem){.lg\:col-span-8{grid-column:span 8 / span 8}}
@media (min-width:64rem){.lg\:flex{display:flex}}
@media (min-width:64rem){.lg\:flex-row{flex-direction:row}}
@media (min-width:64rem){.lg\:gap-16{gap:calc(var(--spacing) * 16)}}
@media (min-width:64rem){.lg\:gap-20{gap:calc(var(--spacing) * 20)}}
@media (min-width:64rem){.lg\:gap-8{gap:calc(var(--spacing) * 8)}}
@media (min-width:64rem){.lg\:grid-cols-12{grid-template-columns:repeat(12, minmax(0, 1fr))}}
@media (min-width:64rem){.lg\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (min-width:64rem){.lg\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}}
@media (min-width:64rem){.lg\:h-px{height:1px}}
@media (min-width:64rem){.lg\:hidden{display:none}}
@media (min-width:64rem){.lg\:items-end{align-items:flex-end}}
@media (min-width:64rem){.lg\:justify-between{justify-content:space-between}}
@media (min-width:64rem){.lg\:left-0{left:calc(var(--spacing) * 0)}}
@media (min-width:64rem){.lg\:mt-8{margin-top:calc(var(--spacing) * 8)}}
@media (min-width:64rem){.lg\:order-1{order:1}}
@media (min-width:64rem){.lg\:order-2{order:2}}
@media (min-width:64rem){.lg\:py-20{padding-block:calc(var(--spacing) * 20)}}
@media (min-width:64rem){.lg\:sticky{position:sticky}}
@media (min-width:64rem){.lg\:text-6xl{font-size:3.75rem;line-height:var(--tw-leading, 1)}}
@media (min-width:64rem){.lg\:text-7xl{font-size:4.5rem;line-height:var(--tw-leading, 1)}}
@media (min-width:64rem){.lg\:text-\[5\.5rem\]{font-size:5.5rem}}
@media (min-width:64rem){.lg\:top-28{top:calc(var(--spacing) * 28)}}
@media (min-width:64rem){.lg\:top-\[27px\]{top:27px}}
@media (min-width:64rem){.lg\:w-full{width:100%}}
}