/* ==========================================================================
   CubeHire — "Antigravity" Design System
   --------------------------------------------------------------------------
   Loaded AFTER main.css and fixes.css so it owns the final look. Nothing here
   depends on the frozen Tailwind bundle in main.css: every class is authored
   by hand, so new surfaces can be built without a Node build step (the site
   ships as a zip).

   Language
     Brand green   #01b648 -> #16c357     the only accent, everywhere
     Ink           #18222b               headings, dark surfaces
     Void          #0b1116 / #0f161c     deep space behind floating glass
     Paper         #fefefe / #f7faf8     light ground

   Three ideas carry the whole system:
     1. WEIGHT      nothing sits flat; cards float on layered, soft shadows
     2. GLASS       translucency + blur so depth is readable, not decorative
     3. ISOMETRY    tilted planes give the page a Z axis to move through
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --ch-green:        #01b648;
  --ch-green-2:      #16c357;
  --ch-green-3:      #4ade80;
  --ch-green-ink:    #036b2d;
  --ch-ink:          #18222b;
  --ch-ink-2:        #2b3843;
  --ch-void:         #0b1116;
  --ch-void-2:       #0f161c;
  --ch-paper:        #fefefe;
  --ch-mist:         #f7faf8;
  --ch-cream:        #e8f5e9;
  --ch-line:         #e6ebe8;

  /* Text */
  --ch-t1: #18222b;
  --ch-t2: #56635c;
  --ch-t3: #8a978f;
  --ch-t-inv-1: rgba(255,255,255,0.96);
  --ch-t-inv-2: rgba(255,255,255,0.66);
  --ch-t-inv-3: rgba(255,255,255,0.42);

  /* Glass */
  --ch-glass-bg:      rgba(255,255,255,0.62);
  --ch-glass-brd:     rgba(255,255,255,0.75);
  --ch-glass-bg-d:    rgba(255,255,255,0.045);
  --ch-glass-brd-d:   rgba(255,255,255,0.10);
  --ch-blur:          16px;

  /* Elevation — layered and soft, never a single hard drop */
  --ch-lift-1: 0 1px 2px rgba(16,32,24,.04), 0 4px 10px -4px rgba(16,32,24,.06);
  --ch-lift-2: 0 2px 4px rgba(16,32,24,.04), 0 12px 24px -10px rgba(16,32,24,.10);
  --ch-lift-3: 0 4px 8px rgba(16,32,24,.04), 0 24px 48px -18px rgba(16,32,24,.16);
  --ch-lift-4: 0 8px 16px rgba(16,32,24,.05), 0 44px 88px -28px rgba(16,32,24,.24);
  --ch-glow:   0 0 0 1px rgba(1,182,72,.18), 0 12px 40px -12px rgba(1,182,72,.45);
  --ch-glow-lg:0 0 0 1px rgba(1,182,72,.28), 0 22px 70px -18px rgba(1,182,72,.60);

  /* Radii */
  --ch-r-sm: 10px;
  --ch-r-md: 16px;
  --ch-r-lg: 24px;
  --ch-r-xl: 32px;
  --ch-r-2xl: 44px;
  --ch-r-pill: 999px;

  /* Motion */
  --ch-ease:      cubic-bezier(.22,.61,.36,1);
  --ch-ease-out:  cubic-bezier(.16,1,.3,1);
  --ch-ease-back: cubic-bezier(.34,1.4,.64,1);
  --ch-fast: .18s;
  --ch-base: .32s;
  --ch-slow: .6s;

  /* Layout */
  --ch-container: 1320px;
  --ch-gutter: clamp(16px, 4vw, 40px);
}

/* --------------------------------------------------------------------------
   2. GROUND & TYPE SCALE
   --------------------------------------------------------------------------
   The border-box reset is deliberate. main.css (the compiled Tailwind bundle)
   already sets it, so this is a no-op on the live site — but stating it here
   means the design system stands on its own and cannot be broken by a change
   to a stylesheet it does not control. Every .ch-* component sizes itself
   assuming padding is inside the declared width.
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/*
 * The `hidden` attribute has to actually hide things.
 *
 * Tailwind's preflight sets `svg { display: block }`, and an author rule beats
 * the UA stylesheet's `[hidden] { display: none }` — so `el.hidden = true` on
 * an icon does nothing and both states of a toggle render at once (this was
 * live in the header's menu button). Any element told to hide, hides.
 */
[hidden] { display: none !important; }

.ch-container {
  width: 100%;
  max-width: var(--ch-container);
  margin-inline: auto;
  padding-inline: var(--ch-gutter);
}
.ch-container--wide { max-width: 1480px; }
.ch-container--narrow { max-width: 880px; }

.ch-section { position: relative; padding-block: clamp(56px, 8vw, 120px); }
.ch-section--tight { padding-block: clamp(40px, 5vw, 72px); }
.ch-section--dark { background: var(--ch-void); color: var(--ch-t-inv-1); }
.ch-section--mist { background: var(--ch-mist); }

/* Fluid type — one scale for every new surface */
.ch-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ch-green-ink);
}
.ch-eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--ch-green));
}
.ch-section--dark .ch-eyebrow { color: var(--ch-green-3); }

.ch-h1 {
  font-size: clamp(34px, 6.2vw, 68px);
  line-height: 1.04; letter-spacing: -.03em; font-weight: 800;
  color: var(--ch-t1); margin: 0;
}
.ch-h2 {
  font-size: clamp(28px, 4.4vw, 48px);
  line-height: 1.1; letter-spacing: -.025em; font-weight: 800;
  color: var(--ch-t1); margin: 0;
}
.ch-h3 {
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.25; letter-spacing: -.015em; font-weight: 800;
  color: var(--ch-t1); margin: 0;
}
.ch-lead {
  font-size: clamp(15px, 1.5vw, 19px); line-height: 1.65;
  color: var(--ch-t2); font-weight: 500; margin: 0;
}
.ch-section--dark .ch-h1,
.ch-section--dark .ch-h2,
.ch-section--dark .ch-h3 { color: var(--ch-t-inv-1); }
.ch-section--dark .ch-lead { color: var(--ch-t-inv-2); }

/* The one accent treatment for a word inside a heading. */
.ch-grad {
  background: linear-gradient(103deg, var(--ch-green) 0%, var(--ch-green-2) 45%, #34d399 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ch-underline { position: relative; white-space: nowrap; }
.ch-underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .28em;
  background: linear-gradient(90deg, rgba(1,182,72,.22), rgba(22,195,87,.34));
  border-radius: 999px; z-index: -1;
}

/* --------------------------------------------------------------------------
   3. ATMOSPHERE — aurora, grid, noise, orbs
   Backgrounds are pointer-transparent and sit behind content on the Z axis.
   -------------------------------------------------------------------------- */
.ch-atmos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ch-atmos > * { position: absolute; }

.ch-orb {
  border-radius: 50%;
  filter: blur(60px);
  opacity: .5;
  will-change: transform;
}
.ch-orb--green { background: radial-gradient(circle, rgba(1,182,72,.55) 0%, rgba(1,182,72,0) 68%); }
.ch-orb--mint  { background: radial-gradient(circle, rgba(52,211,153,.45) 0%, rgba(52,211,153,0) 68%); }
.ch-orb--deep  { background: radial-gradient(circle, rgba(24,34,43,.40) 0%, rgba(24,34,43,0) 70%); }

/* Perspective grid floor — reads as an isometric plane receding into the page */
.ch-grid-floor {
  inset: auto 0 0 0; height: 46%;
  background-image:
    linear-gradient(rgba(1,182,72,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1,182,72,.18) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(520px) rotateX(66deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 78%);
          mask-image: linear-gradient(to top, #000 0%, transparent 78%);
  opacity: .55;
}
.ch-grid-flat {
  inset: 0;
  background-image:
    linear-gradient(rgba(24,34,43,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24,34,43,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 78%);
}
.ch-section--dark .ch-grid-flat {
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
}

/* --------------------------------------------------------------------------
   4. GLASS & FLOATING SURFACES
   -------------------------------------------------------------------------- */
.ch-glass {
  position: relative;
  background: var(--ch-glass-bg);
  border: 1px solid var(--ch-glass-brd);
  border-radius: var(--ch-r-lg);
  box-shadow: var(--ch-lift-2);
  -webkit-backdrop-filter: blur(var(--ch-blur)) saturate(150%);
          backdrop-filter: blur(var(--ch-blur)) saturate(150%);
}
/* Specular top edge — what makes it read as glass rather than a grey box. */
.ch-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 42%);
}
.ch-glass > * { position: relative; z-index: 1; }

.ch-glass--dark {
  background: var(--ch-glass-bg-d);
  border-color: var(--ch-glass-brd-d);
  color: var(--ch-t-inv-1);
  box-shadow: 0 2px 6px rgba(0,0,0,.28), 0 30px 60px -24px rgba(0,0,0,.65);
}
.ch-glass--dark::before {
  background: linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 45%);
}

/* Opaque sibling of the glass card, for dense content where blur hurts reading. */
.ch-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-r-lg);
  box-shadow: var(--ch-lift-1);
  transition: transform var(--ch-base) var(--ch-ease-out),
              box-shadow var(--ch-base) var(--ch-ease-out),
              border-color var(--ch-base) var(--ch-ease-out);
}
.ch-card--lift:hover,
.ch-card--lift:focus-within {
  transform: translate3d(0,-6px,0);
  box-shadow: var(--ch-lift-3);
  border-color: rgba(1,182,72,.35);
}
.ch-card--dark {
  background: var(--ch-void-2);
  border-color: rgba(255,255,255,.08);
  color: var(--ch-t-inv-1);
}
.ch-card--dark.ch-card--lift:hover { border-color: rgba(1,182,72,.5); }

/* A card that genuinely hovers above the page. */
.ch-float { box-shadow: var(--ch-lift-4); }
.ch-float--glow { box-shadow: var(--ch-lift-3), var(--ch-glow); }

/* Gradient hairline border without a wrapper element. */
.ch-hairline {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(140deg, rgba(1,182,72,.55), rgba(1,182,72,0) 42%, rgba(22,195,87,.4)) border-box;
  border: 1px solid transparent;
}
.ch-hairline--dark {
  background:
    linear-gradient(var(--ch-void-2), var(--ch-void-2)) padding-box,
    linear-gradient(140deg, rgba(1,182,72,.6), rgba(255,255,255,.06) 45%, rgba(22,195,87,.45)) border-box;
}

/* --------------------------------------------------------------------------
   5. ISOMETRIC PLANES
   A parent sets the perspective; children tilt into it. Used for dashboard
   mockups and card stacks so the page has a floor to float above.
   -------------------------------------------------------------------------- */
.ch-scene { perspective: 1400px; perspective-origin: 50% 30%; }
.ch-iso {
  transform-style: preserve-3d;
  transform: rotateX(18deg) rotateZ(-8deg) translateZ(0);
  transition: transform var(--ch-slow) var(--ch-ease-out);
  will-change: transform;
}
.ch-iso--soft  { transform: rotateX(11deg) rotateY(-9deg) rotateZ(-2deg); }
.ch-iso--right { transform: rotateX(14deg) rotateY(14deg) rotateZ(3deg); }
.ch-scene:hover .ch-iso--react { transform: rotateX(4deg) rotateY(-3deg) rotateZ(0deg); }

/* Depth layers inside an isometric group. */
.ch-z-1 { transform: translateZ(30px); }
.ch-z-2 { transform: translateZ(70px); }
.ch-z-3 { transform: translateZ(120px); }

/* Pointer-tracked tilt, driven by JS custom properties. */
.ch-tilt {
  transform: perspective(900px)
             rotateX(var(--ch-rx, 0deg))
             rotateY(var(--ch-ry, 0deg))
             translateZ(0);
  transition: transform var(--ch-base) var(--ch-ease-out);
  transform-style: preserve-3d;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.ch-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--ch-r-pill);
  font-family: inherit; font-size: 15px; font-weight: 800; line-height: 1;
  letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--ch-fast) var(--ch-ease-out),
              box-shadow var(--ch-base) var(--ch-ease-out),
              background-color var(--ch-base) var(--ch-ease-out),
              border-color var(--ch-base) var(--ch-ease-out),
              color var(--ch-base) var(--ch-ease-out);
  will-change: transform;
}
.ch-btn:active { transform: translate3d(0,1px,0) scale(.985); }
.ch-btn:focus-visible {
  outline: 2px solid var(--ch-green);
  outline-offset: 3px;
}
.ch-btn svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Light sweep on hover — the one flourish every primary CTA shares. */
.ch-btn--primary {
  background: linear-gradient(135deg, var(--ch-green) 0%, var(--ch-green-2) 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(1,182,72,.3), 0 12px 28px -10px rgba(1,182,72,.65);
  overflow: hidden;
}
.ch-btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.38) 50%, transparent 80%);
  transform: translateX(-130%);
  transition: transform .75s var(--ch-ease-out);
}
.ch-btn--primary:hover {
  transform: translate3d(0,-2px,0);
  box-shadow: 0 2px 4px rgba(1,182,72,.3), 0 20px 44px -12px rgba(1,182,72,.8);
}
.ch-btn--primary:hover::after { transform: translateX(130%); }

.ch-btn--dark {
  background: var(--ch-ink); color: #fff;
  box-shadow: 0 1px 2px rgba(24,34,43,.3), 0 12px 26px -12px rgba(24,34,43,.7);
}
.ch-btn--dark:hover { background: #101820; transform: translate3d(0,-2px,0); }

.ch-btn--ghost {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.24);
  color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ch-btn--ghost:hover {
  background: rgba(1,182,72,.14);
  border-color: rgba(1,182,72,.7);
  transform: translate3d(0,-2px,0);
}

.ch-btn--outline {
  background: #fff; color: var(--ch-ink);
  border-color: var(--ch-line);
  box-shadow: var(--ch-lift-1);
}
.ch-btn--outline:hover {
  border-color: var(--ch-green);
  color: var(--ch-green-ink);
  transform: translate3d(0,-2px,0);
  box-shadow: var(--ch-lift-2);
}

.ch-btn--sm { padding: 9px 18px; font-size: 13px; }
.ch-btn--lg { padding: 17px 34px; font-size: 16px; }
.ch-btn--block { width: 100%; }

/* Arrow that slides on hover, for "see more" style links. */
.ch-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 800; font-size: 14px; color: var(--ch-green-ink);
  text-decoration: none;
}
.ch-link svg { transition: transform var(--ch-base) var(--ch-ease-out); }
.ch-link:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   7. PILLS, CHIPS, BADGES
   -------------------------------------------------------------------------- */
.ch-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--ch-r-pill);
  font-size: 13px; font-weight: 700; line-height: 1;
  background: rgba(1,182,72,.09);
  border: 1px solid rgba(1,182,72,.22);
  color: var(--ch-green-ink);
}
.ch-pill--glass {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: var(--ch-t-inv-1);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ch-pill--neutral {
  background: #f2f5f3; border-color: var(--ch-line); color: var(--ch-t2);
}
.ch-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ch-green);
  box-shadow: 0 0 0 0 rgba(1,182,72,.55);
  animation: ch-pulse 2.4s var(--ch-ease) infinite;
}
@keyframes ch-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(1,182,72,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(1,182,72,0); }
  100% { box-shadow: 0 0 0 0 rgba(1,182,72,0); }
}

/* --------------------------------------------------------------------------
   8. FORM CONTROLS
   -------------------------------------------------------------------------- */
.ch-field { display: flex; flex-direction: column; gap: 7px; }
.ch-label {
  font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--ch-t1);
}
.ch-hint { font-size: 12px; color: var(--ch-t3); font-weight: 500; }
.ch-input,
.ch-select,
.ch-textarea {
  width: 100%;
  padding: 13px 16px;
  font-family: inherit; font-size: 15px; font-weight: 500; color: var(--ch-t1);
  background: #fff;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-r-sm);
  box-shadow: var(--ch-lift-1);
  transition: border-color var(--ch-base) var(--ch-ease),
              box-shadow var(--ch-base) var(--ch-ease),
              background-color var(--ch-base) var(--ch-ease);
  outline: none;
}
.ch-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.ch-input::placeholder,
.ch-textarea::placeholder { color: var(--ch-t3); font-weight: 500; }
.ch-input:focus,
.ch-select:focus,
.ch-textarea:focus {
  border-color: var(--ch-green);
  box-shadow: 0 0 0 4px rgba(1,182,72,.14), var(--ch-lift-1);
}
.ch-input:disabled { background: #f5f7f6; color: var(--ch-t3); cursor: not-allowed; }
.ch-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2356635c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 16px 16px;
}

/* --------------------------------------------------------------------------
   9. STICKY GLASS HEADER
   -------------------------------------------------------------------------- */
.ch-header {
  position: sticky; top: 0; z-index: 500;
  transition: background-color var(--ch-base) var(--ch-ease),
              box-shadow var(--ch-base) var(--ch-ease),
              border-color var(--ch-base) var(--ch-ease);
  border-bottom: 1px solid transparent;
  background: rgba(254,254,254,0);
}
.ch-header.is-stuck {
  background: rgba(254,254,254,.78);
  border-bottom-color: rgba(24,34,43,.07);
  box-shadow: 0 8px 30px -18px rgba(16,32,24,.35);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
}
/* Thin scroll-progress rail across the very top of the page. */
.ch-progress {
  position: fixed; inset: 0 auto auto 0; height: 2.5px; width: 100%;
  transform: scaleX(var(--ch-progress, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--ch-green), var(--ch-green-2), #34d399);
  z-index: 900; pointer-events: none;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   10. MARQUEE
   -------------------------------------------------------------------------- */
.ch-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ch-marquee__track {
  display: flex; width: max-content; gap: 14px;
  animation: ch-scroll var(--ch-marquee-dur, 42s) linear infinite;
  will-change: transform;
}
.ch-marquee:hover .ch-marquee__track { animation-play-state: paused; }
.ch-marquee--reverse .ch-marquee__track { animation-direction: reverse; }
@keyframes ch-scroll {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

/* --------------------------------------------------------------------------
   11. SCROLL MOTION PRIMITIVES
   --------------------------------------------------------------------------
   Every hidden state is scoped to `html.ch-motion`, which a tiny inline script
   in <head> adds before first paint. Visible is therefore the DEFAULT, and
   content only starts hidden once something has confirmed it will be animated
   back in.

   This matters more than it looks. Opacity driven by a transition sits above
   `!important` in the cascade, so if the transition stalls — an occluded
   window that stops producing frames, a prerender, a throttled tab — nothing
   in CSS can rescue it and the section is simply blank. The engine also drops
   the class outright if the reveal pass has not finished shortly after load.
   A missed animation is invisible to the reader; missing content is not.
   -------------------------------------------------------------------------- */
html.ch-motion [data-ch-in]:not([data-ch-in="none"]) {
  opacity: 0;
  transform: translate3d(0, var(--ch-in-y, 26px), 0) scale(var(--ch-in-s, 1)) rotate(var(--ch-in-r, 0deg));
  transition: opacity .7s var(--ch-ease-out), transform .7s var(--ch-ease-out);
  transition-delay: var(--ch-in-d, 0ms);
  will-change: opacity, transform;
}
html.ch-motion [data-ch-in="left"]  { --ch-in-y: 0; transform: translate3d(-32px,0,0); }
html.ch-motion [data-ch-in="right"] { --ch-in-y: 0; transform: translate3d(32px,0,0); }
html.ch-motion [data-ch-in="fade"]  { --ch-in-y: 0; }
html.ch-motion [data-ch-in="zoom"]  { --ch-in-y: 12px; --ch-in-s: .94; }
/* The signature move: cards drop in from above with a slight tilt. */
html.ch-motion [data-ch-in="drop"]  { --ch-in-y: -28px; --ch-in-r: -1.6deg; --ch-in-s: .97; }

html.ch-motion [data-ch-in].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Staggered children — the group animates, its children cascade. */
html.ch-motion [data-ch-stagger] > * {
  opacity: 0;
  transform: translate3d(0,24px,0) scale(.98);
  transition: opacity .62s var(--ch-ease-out), transform .62s var(--ch-ease-out);
}
html.ch-motion [data-ch-stagger].is-in > * { opacity: 1; transform: none; }
html.ch-motion [data-ch-stagger].is-in > *:nth-child(1)  { transition-delay: 0ms; }
html.ch-motion [data-ch-stagger].is-in > *:nth-child(2)  { transition-delay: 90ms; }
html.ch-motion [data-ch-stagger].is-in > *:nth-child(3)  { transition-delay: 180ms; }
html.ch-motion [data-ch-stagger].is-in > *:nth-child(4)  { transition-delay: 270ms; }
html.ch-motion [data-ch-stagger].is-in > *:nth-child(5)  { transition-delay: 360ms; }
html.ch-motion [data-ch-stagger].is-in > *:nth-child(6)  { transition-delay: 450ms; }
html.ch-motion [data-ch-stagger].is-in > *:nth-child(7)  { transition-delay: 540ms; }
html.ch-motion [data-ch-stagger].is-in > *:nth-child(8)  { transition-delay: 630ms; }
html.ch-motion [data-ch-stagger].is-in > *:nth-child(n+9){ transition-delay: 700ms; }

/* Word-by-word headline reveal (JS wraps each word in a span). */
.ch-words { display: inline; }
.ch-words .ch-word { display: inline-block; overflow: hidden; vertical-align: top; }
html.ch-motion .ch-words .ch-word > span {
  display: inline-block;
  transform: translate3d(0,105%,0) rotate(3deg);
  transition: transform .82s var(--ch-ease-out);
  transition-delay: calc(var(--ch-i, 0) * 42ms);
}
html.ch-motion .ch-words.is-in .ch-word > span { transform: none; }

/*
 * Gradient headline + word split.
 *
 * background-clip:text paints the glyphs of the element that carries the
 * background. Once JS wraps each word in its own span, those child spans have
 * no background of their own and inherit only the transparent fill — so the
 * line disappears. The gradient therefore has to move down to the spans that
 * actually hold the text. Each word gets the full ramp; the ramp is short
 * enough (green -> mint) that the repetition reads as one colour, not stripes.
 */
.ch-words.ch-grad {
  background: none;
  /* .ch-grad sets `color: transparent` as well as a transparent text-fill.
     Handing the fill back to `currentColor` alone would therefore still paint
     nothing — the colour has to be restored too, so an unsplit headline (no
     JS) is legible rather than invisible. */
  color: inherit;
  -webkit-text-fill-color: currentColor;
}
/* Deliberately not scoped to html.ch-motion: this is how the gradient is
   painted once the words are split, and the split survives motion being
   switched off mid-flight by the stall detector. */
.ch-words.ch-grad .ch-word > span {
  background: linear-gradient(103deg, var(--ch-green) 0%, var(--ch-green-2) 70%, #34d399 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Parallax: JS writes --ch-py on scroll. */
[data-ch-parallax] { transform: translate3d(0, var(--ch-py, 0px), 0); will-change: transform; }

/* Elements that breathe on their own, independent of scroll. */
.ch-drift   { animation: ch-drift 7s ease-in-out infinite; }
.ch-drift-2 { animation: ch-drift 9s ease-in-out infinite reverse; }
@keyframes ch-drift {
  0%,100% { transform: translate3d(0,0,0); }
  50%     { transform: translate3d(0,-14px,0); }
}

/* --------------------------------------------------------------------------
   12. UTILITIES
   -------------------------------------------------------------------------- */
.ch-stack   { display: flex; flex-direction: column; }
.ch-row     { display: flex; align-items: center; }
.ch-wrap    { flex-wrap: wrap; }
.ch-gap-2   { gap: 8px; }  .ch-gap-3 { gap: 12px; } .ch-gap-4 { gap: 16px; }
.ch-gap-6   { gap: 24px; } .ch-gap-8 { gap: 32px; }
.ch-grid    { display: grid; gap: clamp(16px, 2vw, 24px); }
.ch-grid-2  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.ch-grid-3  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.ch-grid-4  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.ch-center  { text-align: center; }
.ch-mx-auto { margin-inline: auto; }
.ch-measure { max-width: 62ch; }
.ch-hide-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.ch-hide-scroll::-webkit-scrollbar { display: none; }
.ch-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   13. REDUCED MOTION & PERFORMANCE FALLBACKS
   Every animation above is optional. With reduced motion, or when the browser
   cannot blur, the layout still reads correctly.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-ch-in],
  [data-ch-stagger] > * { opacity: 1 !important; transform: none !important; }
  .ch-words .ch-word > span { transform: none !important; }
  [data-ch-parallax] { transform: none !important; }
  .ch-iso, .ch-tilt { transform: none !important; }
}

/* backdrop-filter is unevenly supported; fall back to a solid tint so glass
   panels never turn into unreadable transparent rectangles. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .ch-glass       { background: rgba(255,255,255,.94); }
  .ch-glass--dark { background: rgba(18,26,33,.94); }
  .ch-header.is-stuck { background: rgba(254,254,254,.97); }
  .ch-pill--glass { background: rgba(255,255,255,.16); }
}

/* --------------------------------------------------------------------------
   14. RESPONSIVE
   Depth effects are desktop affordances. On phones they cost paint time and
   shrink the readable area, so tilt/perspective is flattened and blur reduced.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .ch-iso, .ch-iso--soft, .ch-iso--right { transform: none; }
  .ch-z-1, .ch-z-2, .ch-z-3 { transform: none; }
  :root { --ch-blur: 12px; }
}
@media (max-width: 767px) {
  :root { --ch-blur: 10px; --ch-r-2xl: 28px; --ch-r-xl: 24px; --ch-r-lg: 18px; }
  .ch-scene { perspective: none; }
  .ch-tilt { transform: none !important; }
  .ch-orb { filter: blur(44px); opacity: .38; }
  .ch-grid-floor { display: none; }
  .ch-btn { padding: 12px 22px; font-size: 14.5px; }
  .ch-btn--lg { padding: 15px 26px; font-size: 15px; }
  .ch-float, .ch-float--glow { box-shadow: var(--ch-lift-2); }
  /* Full-width CTAs read better than centred pills on a narrow screen. */
  .ch-cta-row { flex-direction: column; align-items: stretch; width: 100%; }
  .ch-cta-row .ch-btn { width: 100%; }
}

/* Never let a decorative layer create a horizontal scrollbar. */
html, body { overflow-x: clip; }

/* ==========================================================================
   UTILITY BACKSTOP
   ==========================================================================
   `.hidden` comes from the frozen Tailwind bundle in main.css, which is loaded
   BEFORE this file. At equal specificity the later rule wins, so .ch-btn's
   `display: inline-flex` was quietly beating `.hidden { display: none }` and
   every button toggled with classList.add('hidden') stayed on screen — which
   is why the interview rounds showed "Next question" and "Finish this round"
   at the same time on the last question.

   Declared here with !important so the outcome no longer depends on which
   stylesheet a page happens to load last. `[hidden]` is included for the same
   reason: any display rule beats the attribute's UA default.
   ========================================================================== */
.hidden { display: none !important; }
[hidden] { display: none !important; }

/*
 * A line break that only exists on a wide screen. Replaces Tailwind's
 * `hidden md:block`, which the !important above would have pinned shut: the
 * responsive half of that pair is not itself !important, so it could no longer
 * win.
 */
.ch-br-wide { display: none; }
@media (min-width: 768px) { .ch-br-wide { display: block; } }

/* --------------------------------------------------------------------------
   Partner bar, above the header. See partials/partner-bar.blade.php.
   -------------------------------------------------------------------------- */
.ch-partnerbar {
  position: relative; z-index: 510;
  background: var(--ch-void);
  color: var(--ch-t-inv-2);
  font-size: 13px; line-height: 1.4;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ch-partnerbar__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.ch-partnerbar__track {
  display: flex; width: max-content;
  animation: ch-scroll 60s linear infinite;
  will-change: transform;
}
.ch-partnerbar:hover .ch-partnerbar__track,
.ch-partnerbar:focus-within .ch-partnerbar__track { animation-play-state: paused; }
.ch-partnerbar__item {
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 9px 56px 9px 0; white-space: nowrap;
}
.ch-partnerbar__item strong { color: var(--ch-t-inv-1); font-weight: 800; }
.ch-partnerbar__tag {
  font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ch-void); background: var(--ch-green-3);
  padding: 3px 8px; border-radius: 999px;
}
.ch-partnerbar a {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ch-green-3); font-weight: 800; text-decoration: none;
  border-bottom: 1px solid rgba(74,222,128,.35);
  transition: color var(--ch-base) var(--ch-ease), border-color var(--ch-base) var(--ch-ease);
}
.ch-partnerbar a:hover, .ch-partnerbar a:focus-visible { color: #fff; border-bottom-color: #fff; }
@media (max-width: 640px) { .ch-partnerbar { font-size: 12.5px; } }

/* Standing still: one message, centred, wrapping if it must. */
@media (prefers-reduced-motion: reduce) {
  .ch-partnerbar__marquee { -webkit-mask-image: none; mask-image: none; }
  .ch-partnerbar__track { animation: none; width: auto; justify-content: center; }
  .ch-partnerbar__item { white-space: normal; flex-wrap: wrap; justify-content: center; padding: 9px 16px; text-align: center; }
  .ch-partnerbar__item[aria-hidden="true"] { display: none; }
}