/* ==========================================================================
   CubeHire — Component library
   --------------------------------------------------------------------------
   Built on the tokens and primitives in cubehire-ui.css. Load order:
       main.css  ->  fixes.css  ->  cubehire-ui.css  ->  cubehire-components.css

   Everything here is sized in rem and clamp() rather than fixed px, so a
   desktop at 100%, 125% or 150% browser zoom is just a narrower viewport and
   the same fluid rules apply. No component declares a min-width that can
   exceed the viewport.
   ========================================================================== */

/* ==========================================================================
   1. HEADER / NAVIGATION  (glass)
   ========================================================================== */
.ch-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(12px, 2vw, 32px);
}
.ch-nav__logo { display: flex; align-items: center; flex-shrink: 0; }
.ch-nav__logo img { height: clamp(28px, 3.2vw, 36px); width: auto; }

.ch-nav__links {
  display: none;
  align-items: center;
  gap: clamp(14px, 1.8vw, 30px);
  font-size: clamp(13.5px, 1vw, 15px); font-weight: 700;
  color: var(--ch-t1);
}
@media (min-width: 1100px) { .ch-nav__links { display: flex; } }

.ch-nav__link {
  position: relative; padding: 8px 2px; text-decoration: none; color: inherit;
  transition: color var(--ch-base) var(--ch-ease);
  white-space: nowrap;
}
.ch-nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px;
  border-radius: 2px; background: var(--ch-green);
  transition: right var(--ch-base) var(--ch-ease-out);
}
.ch-nav__link:hover { color: var(--ch-green-ink); }
.ch-nav__link:hover::after { right: 0; }

/* Dropdown trigger + glass panel */
.ch-nav__group { position: relative; }
.ch-nav__trigger {
  display: flex; align-items: center; gap: 5px; padding: 8px 2px;
  cursor: pointer; color: inherit; white-space: nowrap;
  transition: color var(--ch-base) var(--ch-ease);
}
.ch-nav__trigger svg { width: 15px; height: 15px; transition: transform var(--ch-base) var(--ch-ease); }
.ch-nav__group:hover .ch-nav__trigger { color: var(--ch-green-ink); }
.ch-nav__group:hover .ch-nav__trigger svg { transform: rotate(180deg); }

.ch-nav__panel {
  position: absolute; top: 100%; left: 0; z-index: 60;
  padding-top: 12px;
  opacity: 0; visibility: hidden; transform: translate3d(0,-8px,0);
  transition: opacity var(--ch-base) var(--ch-ease-out),
              transform var(--ch-base) var(--ch-ease-out),
              visibility 0s linear var(--ch-base);
}
.ch-nav__group:hover .ch-nav__panel,
.ch-nav__group:focus-within .ch-nav__panel {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s;
}
.ch-nav__panel-inner {
  min-width: 15rem; max-width: min(22rem, calc(100vw - 2rem));
  padding: 8px;
  border-radius: var(--ch-r-md);
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--ch-lift-3);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
          backdrop-filter: blur(20px) saturate(170%);
}
/* Right-aligned panels near the end of the bar so they never leave the screen */
.ch-nav__panel--right { left: auto; right: 0; }

.ch-nav__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-radius: var(--ch-r-sm);
  font-size: 14px; font-weight: 700; color: var(--ch-t1); text-decoration: none;
  transition: background-color var(--ch-fast) var(--ch-ease),
              color var(--ch-fast) var(--ch-ease);
}
.ch-nav__item:hover { background: rgba(1,182,72,.10); color: var(--ch-green-ink); }
.ch-nav__item svg { width: 14px; height: 14px; opacity: .5; }
.ch-nav__sep { height: 1px; margin: 6px 10px; background: rgba(24,34,43,.08); }

/* Nested "Roles" flyout */
.ch-nav__sub { position: relative; }
.ch-nav__sub-panel {
  position: absolute; top: -8px; left: 100%; z-index: 61; padding-left: 8px;
  opacity: 0; visibility: hidden; transform: translate3d(-6px,0,0);
  transition: opacity var(--ch-base) var(--ch-ease-out),
              transform var(--ch-base) var(--ch-ease-out),
              visibility 0s linear var(--ch-base);
}
.ch-nav__sub:hover .ch-nav__sub-panel,
.ch-nav__sub:focus-within .ch-nav__sub-panel {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
/* Past 1400px there is room to the right; below that the flyout would run off
   the screen, so it opens to the left instead. */
@media (max-width: 1400px) {
  .ch-nav__sub-panel { left: auto; right: 100%; padding-left: 0; padding-right: 8px; }
}

/* Mobile drawer */
.ch-nav__burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--ch-r-sm);
  border: 1px solid var(--ch-line); background: rgba(255,255,255,.7);
  color: var(--ch-t1); cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color var(--ch-fast) var(--ch-ease);
}
.ch-nav__burger:hover { background: #fff; }
@media (min-width: 1100px) { .ch-nav__burger { display: none; } }

.ch-drawer {
  position: absolute; top: 100%; left: var(--ch-gutter); right: var(--ch-gutter);
  z-index: 70;
  max-height: min(75vh, 40rem); overflow-y: auto; overscroll-behavior: contain;
  margin-top: 10px; padding: 12px;
  border-radius: var(--ch-r-lg);
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: var(--ch-lift-4);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
          backdrop-filter: blur(22px) saturate(170%);
  opacity: 0; visibility: hidden; transform: translate3d(0,-10px,0);
  transition: opacity var(--ch-base) var(--ch-ease-out),
              transform var(--ch-base) var(--ch-ease-out),
              visibility 0s linear var(--ch-base);
}
.ch-drawer.is-open {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
@media (min-width: 1100px) { .ch-drawer { display: none; } }

.ch-drawer__link,
.ch-drawer__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 13px 14px; border: 0; background: transparent;
  border-radius: var(--ch-r-sm);
  font-family: inherit; font-size: 15px; font-weight: 800; color: var(--ch-t1);
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background-color var(--ch-fast) var(--ch-ease);
}
.ch-drawer__link:hover,
.ch-drawer__toggle:hover { background: rgba(1,182,72,.09); }
.ch-drawer__toggle svg { width: 16px; height: 16px; transition: transform var(--ch-base) var(--ch-ease); }
.ch-drawer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Height-animated so the drawer opens smoothly instead of snapping. */
.ch-drawer__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--ch-base) var(--ch-ease-out);
}
.ch-drawer__panel > div { overflow: hidden; }
.ch-drawer__panel.is-open { grid-template-rows: 1fr; }
.ch-drawer__sub {
  padding: 2px 0 6px 12px; margin-left: 10px;
  border-left: 2px solid rgba(1,182,72,.2);
  display: flex; flex-direction: column;
}
.ch-drawer__sub a {
  padding: 10px 12px; border-radius: var(--ch-r-sm);
  font-size: 14px; font-weight: 600; color: var(--ch-t2); text-decoration: none;
  transition: background-color var(--ch-fast) var(--ch-ease), color var(--ch-fast) var(--ch-ease);
}
.ch-drawer__sub a:hover { background: rgba(1,182,72,.08); color: var(--ch-green-ink); }
.ch-drawer__cta { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(24,34,43,.08); }

/* Visibility utilities.
   These exist because the compiled Tailwind bundle is frozen and cannot supply
   new responsive utilities — and because a layout breakpoint must be owned by
   CSS. Driving one from a matchMedia listener means the layout is wrong until
   JS runs, and stays wrong if it fails. */
.ch-only-md { display: none !important; }
@media (min-width: 720px)  { .ch-only-md { display: inline-flex !important; } }
.ch-only-lg { display: none !important; }
@media (min-width: 1100px) { .ch-only-lg { display: block !important; } }

/* ==========================================================================
   2. SECTION HEADER  (left title / right description + button)
   The pattern from the FAQ and "Driven by Results" references, reused
   everywhere so every section on the site opens the same way.
   ========================================================================== */
.ch-shead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 40px);
  align-items: start;
  margin-bottom: clamp(28px, 4vw, 56px);
}
@media (min-width: 900px) {
  .ch-shead { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: end; }
  .ch-shead--center { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
}
.ch-shead__right { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ch-shead__right .ch-lead { max-width: 46ch; }

/* ==========================================================================
   2b. PAGE HERO
   The opening panel every inner page uses — pricing, FAQ, roles and the rest.
   Defining it once is the whole point: it was originally pushed from a
   @push('styles') block on one page, which is how a site ends up with nine
   heroes that nearly match.
   ========================================================================== */
.ch-pagehero {
  position: relative;
  overflow: hidden;
  border-radius: var(--ch-r-2xl);
  padding: clamp(32px, 6vw, 76px) clamp(20px, 5vw, 64px);
  background: linear-gradient(150deg, #f4fdf7 0%, #ffffff 55%, #f2f7f4 100%);
  border: 1px solid rgba(1, 182, 72, .14);
  box-shadow: var(--ch-lift-2);
}
.ch-pagehero__inner { position: relative; z-index: 1; }
.ch-pagehero--center { text-align: center; }
.ch-pagehero--center .ch-pagehero__inner > * { margin-inline: auto; }

@media (max-width: 640px) {
  .ch-pagehero { border-radius: var(--ch-r-xl); }
}

/* ==========================================================================
   3. FAQ  — the reference design, used site-wide (marketing pages, role
   pages, pricing and the talent profile) so there is exactly one FAQ look.
   ========================================================================== */
.ch-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
  align-items: start;
}
@media (min-width: 900px) {
  .ch-faq__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ch-faq__item {
  background: #fff;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-r-md);
  box-shadow: var(--ch-lift-1);
  overflow: hidden;
  transition: box-shadow var(--ch-base) var(--ch-ease-out),
              border-color var(--ch-base) var(--ch-ease-out),
              transform var(--ch-base) var(--ch-ease-out);
}
.ch-faq__item:hover { box-shadow: var(--ch-lift-2); border-color: rgba(1,182,72,.28); }
.ch-faq__item.is-open { box-shadow: var(--ch-lift-2); border-color: rgba(1,182,72,.32); }

.ch-faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: clamp(16px, 1.8vw, 22px) clamp(16px, 2vw, 24px);
  border: 0; background: transparent;
  font-family: inherit;
  font-size: clamp(14.5px, 1.15vw, 16px); font-weight: 800; line-height: 1.4;
  letter-spacing: -.01em; color: var(--ch-t1);
  text-align: left; cursor: pointer;
}
.ch-faq__q:focus-visible { outline: 2px solid var(--ch-green); outline-offset: -3px; }
.ch-faq__icon {
  flex-shrink: 0; width: 20px; height: 20px; color: var(--ch-t2);
  transition: transform var(--ch-base) var(--ch-ease-out), color var(--ch-base) var(--ch-ease);
}
.ch-faq__item.is-open .ch-faq__icon { transform: rotate(180deg); color: var(--ch-green); }

/* grid-template-rows animates cleanly from 0 to auto; no JS height maths. */
.ch-faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--ch-base) var(--ch-ease-out);
}
.ch-faq__item.is-open .ch-faq__a { grid-template-rows: 1fr; }
.ch-faq__a-inner { overflow: hidden; }
.ch-faq__a-body {
  margin: 0 clamp(16px, 2vw, 24px) clamp(16px, 2vw, 22px);
  padding: clamp(14px, 1.6vw, 18px);
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-r-sm);
  background: var(--ch-mist);
  font-size: clamp(13.5px, 1.05vw, 15px); line-height: 1.7; font-weight: 500;
  color: var(--ch-t2);
}
.ch-faq__a-body p { margin: 0 0 10px; }
.ch-faq__a-body p:last-child { margin-bottom: 0; }
.ch-faq__a-body a { color: var(--ch-green-ink); font-weight: 700; }

/* Ask-anything box that sits under the accordion. */
.ch-faq__ask {
  margin-top: clamp(24px, 3vw, 40px);
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: var(--ch-r-lg);
  background: linear-gradient(135deg, rgba(1,182,72,.07), rgba(22,195,87,.03));
  border: 1px solid rgba(1,182,72,.18);
}
.ch-faq__ask-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.ch-faq__ask-row .ch-input { flex: 1 1 16rem; min-width: 0; }

/* Dark FAQ (used on dark sections and the profile page's dark band) */
.ch-section--dark .ch-faq__item {
  background: var(--ch-void-2); border-color: rgba(255,255,255,.09);
}
.ch-section--dark .ch-faq__q { color: var(--ch-t-inv-1); }
.ch-section--dark .ch-faq__a-body {
  background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08);
  color: var(--ch-t-inv-2);
}

/* ==========================================================================
   4. BENTO GRID  (hero support grid — reference 1)
   ========================================================================== */
.ch-bento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
@media (min-width: 900px)  { .ch-bento { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1200px) { .ch-bento { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.ch-bento__cell {
  position: relative; overflow: hidden;
  border-radius: var(--ch-r-lg);
  padding: clamp(18px, 2vw, 26px);
  display: flex; flex-direction: column; gap: 12px;
  min-height: 12rem;
}
.ch-bento__cell--dark {
  background: var(--ch-void-2); color: var(--ch-t-inv-1);
  border: 1px solid rgba(255,255,255,.08);
}
.ch-bento__cell--green {
  background: linear-gradient(140deg, var(--ch-green), var(--ch-green-2));
  color: #fff;
}
.ch-bento__cell--media { padding: 0; min-height: 14rem; }
.ch-bento__cell--media img,
.ch-bento__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-bento__stat {
  font-size: clamp(24px, 3vw, 36px); font-weight: 800; letter-spacing: -.03em; line-height: 1;
}
.ch-bento__label {
  font-size: clamp(12px, 1.1vw, 14px); font-weight: 800; letter-spacing: -.01em;
}
.ch-bento__note { font-size: clamp(12px, 1vw, 13.5px); line-height: 1.6; opacity: .8; font-weight: 500; }

/* Glass caption floating over an image cell. */
.ch-bento__overlay {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  padding: 14px; border-radius: var(--ch-r-md);
  background: rgba(11,17,22,.55);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
          backdrop-filter: blur(14px) saturate(150%);
}

/* ==========================================================================
   5. TALENT CARD + MARQUEE  (reference 2 / 6)
   ========================================================================== */
.ch-tcard {
  display: flex; align-items: center; gap: 12px;
  flex: 0 0 auto; width: clamp(15rem, 22vw, 17.5rem);
  padding: 12px 18px 12px 12px;
  border-radius: var(--ch-r-pill);
  background: var(--ch-void-2);
  border: 1px solid rgba(255,255,255,.08);
  text-decoration: none; color: var(--ch-t-inv-1);
  transition: border-color var(--ch-base) var(--ch-ease-out),
              transform var(--ch-base) var(--ch-ease-out);
}
.ch-tcard:hover { border-color: rgba(1,182,72,.55); transform: translate3d(0,-3px,0); }
.ch-tcard__avatar {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.14); background: rgba(1,182,72,.15);
}
.ch-tcard__name { font-size: 14px; font-weight: 800; line-height: 1.3; }
.ch-tcard__meta {
  display: flex; align-items: center; gap: 5px; margin-top: 3px;
  font-size: 12px; font-weight: 700; color: var(--ch-t-inv-3);
}
.ch-tcard__meta svg { width: 12px; height: 12px; color: var(--ch-green-2); }

/* Light variant for use on paper sections */
.ch-tcard--light {
  background: #fff; border-color: var(--ch-line); color: var(--ch-t1);
  box-shadow: var(--ch-lift-1);
}
.ch-tcard--light .ch-tcard__meta { color: var(--ch-t3); }

/* ==========================================================================
   6. STEP / FEATURE CARDS
   ========================================================================== */
.ch-step {
  position: relative; overflow: hidden;
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: var(--ch-r-xl);
  background: linear-gradient(160deg, #f4fdf7 0%, #ffffff 60%);
  border: 1px solid rgba(1,182,72,.14);
  box-shadow: var(--ch-lift-1);
  display: flex; flex-direction: column; gap: 14px;
  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-step:hover {
  transform: translate3d(0,-6px,0);
  box-shadow: var(--ch-lift-3);
  border-color: rgba(1,182,72,.4);
}
.ch-step__num {
  font-size: clamp(34px, 4.6vw, 54px); font-weight: 300; line-height: 1;
  letter-spacing: -.04em; color: var(--ch-t1); opacity: .22;
  margin-bottom: clamp(12px, 3vw, 36px);
}
.ch-step__badge {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--ch-r-pill);
  background: #fff; border: 1px solid rgba(1,182,72,.22);
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ch-green-ink);
}
.ch-step__title { font-size: clamp(16px, 1.5vw, 19px); font-weight: 800; letter-spacing: -.015em; color: var(--ch-t1); }
.ch-step__desc { font-size: clamp(13px, 1.05vw, 14.5px); line-height: 1.65; color: var(--ch-t2); font-weight: 500; }

/* ==========================================================================
   7. CTA BAND
   ========================================================================== */
.ch-cta {
  position: relative; overflow: hidden;
  border-radius: var(--ch-r-2xl);
  padding: clamp(28px, 5vw, 64px);
  background:
    radial-gradient(ellipse 80% 100% at 15% 0%, rgba(1,182,72,.28), transparent 60%),
    linear-gradient(140deg, #121b23 0%, var(--ch-void) 100%);
  color: var(--ch-t-inv-1);
  display: grid; gap: clamp(20px, 3vw, 40px); align-items: center;
  grid-template-columns: minmax(0, 1fr);
  box-shadow: var(--ch-lift-4);
}
@media (min-width: 900px) {
  .ch-cta { grid-template-columns: minmax(0, 1.4fr) auto; }
}
.ch-cta__title {
  font-size: clamp(24px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.12; margin: 0 0 12px;
}
.ch-cta__sub { font-size: clamp(14px, 1.2vw, 16px); line-height: 1.65; color: var(--ch-t-inv-2); margin: 0; max-width: 52ch; }

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.ch-footer {
  position: relative; overflow: hidden;
  background: var(--ch-void);
  color: var(--ch-t-inv-2);
  padding-top: clamp(48px, 6vw, 88px);
}
/*
 * Both grids declare their single-column base FIRST, then widen in media
 * queries. Order matters more than it looks: a media query adds no
 * specificity, so a base rule written afterwards silently wins and the
 * columns stay stacked at every width — which is exactly what the footer
 * link columns were doing.
 */
.ch-footer__grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr);
}
.ch-footer__cols {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
  .ch-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  /* Brand block on the left, the four link columns filling the rest. */
  .ch-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); }
  .ch-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ch-footer__brandline {
  font-size: clamp(19px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.028em;
  line-height: 1.25; color: var(--ch-t-inv-1); margin: 18px 0 20px; max-width: 22ch;
}
.ch-footer h4 {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ch-t-inv-3); margin: 0 0 16px;
}
.ch-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ch-footer a {
  font-size: 14px; font-weight: 600; color: var(--ch-t-inv-2); text-decoration: none;
  transition: color var(--ch-fast) var(--ch-ease);
}
.ch-footer a:hover { color: var(--ch-green-2); }
.ch-footer__muted { font-size: 14px; font-weight: 600; color: var(--ch-t-inv-3); }

.ch-footer__social { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.ch-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  color: var(--ch-t-inv-1);
  transition: background-color var(--ch-base) var(--ch-ease),
              border-color var(--ch-base) var(--ch-ease),
              transform var(--ch-base) var(--ch-ease-out);
}
.ch-footer__social a:hover {
  background: rgba(1,182,72,.18); border-color: rgba(1,182,72,.6);
  transform: translate3d(0,-2px,0);
}
.ch-footer__social svg { width: 17px; height: 17px; }

.ch-footer__bottom {
  margin-top: clamp(32px, 4vw, 56px);
  padding: clamp(18px, 2vw, 26px) 0;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px;
  font-size: 13px; color: var(--ch-t-inv-3);
}
.ch-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* Oversized wordmark bleeding off the bottom edge — the reference's signature
   closing gesture. It is decorative only, so it is hidden from assistive tech
   and clipped rather than allowed to widen the page. */
.ch-footer__wordmark {
  /*
   * The closing wordmark, bled off the bottom edge of the footer.
   *
   * `line-height: .78` is tighter than the font's own ascent, so with
   * `overflow: hidden` the top of the line box cut straight through the tittle
   * on the "i" and left a flat green tab floating above the word, looking like
   * a stray element rather than part of the letter.
   *
   * The padding gives the ascenders room; the matching negative margin takes
   * the same amount back off the top, so the wordmark sits exactly where it
   * did. The gradient's first stop moves down with it, which keeps the tittle
   * and the tops of the capitals at the same brightness instead of the dot
   * catching the most opaque part of the ramp on its own.
   */
  margin-top: calc(clamp(8px, 2vw, 24px) - .22em);
  padding-top: .22em;
  font-size: clamp(64px, 19vw, 300px);
  font-weight: 900; letter-spacing: -.05em; line-height: .78;
  text-align: center; user-select: none; pointer-events: none;
  color: transparent;
  background: linear-gradient(180deg, rgba(1,182,72,.5) 22%, rgba(1,182,72,0) 92%);
  -webkit-background-clip: text; background-clip: text;
  margin-bottom: -.16em;
  overflow: hidden;
}

/* ==========================================================================
   9. TALENT PROFILE  (reference 7 / 8)
   ========================================================================== */
.ch-profile { background: var(--ch-mist); padding-bottom: clamp(48px, 6vw, 88px); }

.ch-profile__banner {
  position: relative;
  height: clamp(140px, 22vw, 260px);
  border-radius: var(--ch-r-xl);
  overflow: hidden;
  /* The reference banner is a hot multi-hue mesh. Brand colour is fixed to
     green, so the depth has to come from value rather than hue: a near-black
     forest corner, the brand green through the middle, and a mint highlight
     bleeding out of the top right. */
  background:
    radial-gradient(ellipse 55% 110% at 88% 4%, rgba(134,239,172,.95), transparent 58%),
    radial-gradient(ellipse 70% 130% at 46% 108%, rgba(1,182,72,1), transparent 62%),
    radial-gradient(ellipse 60% 120% at 4% 10%, rgba(4,60,28,.95), transparent 66%),
    linear-gradient(118deg, #032b16 0%, #017a31 38%, #16c357 72%, #6ee7a5 100%);
}
.ch-profile__banner-grain { position: absolute; inset: 0; opacity: .18; mix-blend-mode: overlay; }

.ch-profile__head {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  margin-top: clamp(-52px, -7vw, -70px);
  position: relative; z-index: 2;
}
.ch-profile__avatar {
  width: clamp(96px, 12vw, 140px); height: clamp(96px, 12vw, 140px);
  border-radius: 50%; object-fit: cover;
  border: 5px solid var(--ch-mist);
  background: #dfe6e2;
  box-shadow: var(--ch-lift-3);
}
.ch-profile__name {
  margin: 18px 0 6px;
  font-size: clamp(26px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.03em;
  color: var(--ch-t1);
}
.ch-profile__role { font-size: clamp(14px, 1.3vw, 17px); font-weight: 600; color: var(--ch-t3); }
.ch-profile__role strong { color: var(--ch-t2); font-weight: 700; }
.ch-profile__social { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.ch-profile__social a {
  color: var(--ch-t1); opacity: .8;
  transition: opacity var(--ch-fast) var(--ch-ease), color var(--ch-fast) var(--ch-ease),
              transform var(--ch-base) var(--ch-ease-out);
}
.ch-profile__social a:hover { opacity: 1; color: var(--ch-green); transform: translate3d(0,-2px,0); }
.ch-profile__social svg { width: 20px; height: 20px; }

.ch-profile__body {
  display: grid; gap: clamp(16px, 2vw, 28px);
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(28px, 4vw, 52px);
  align-items: start;
}
@media (min-width: 1000px) {
  .ch-profile__body { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
}

.ch-panel {
  background: #fff;
  border: 1px solid rgba(24,34,43,.06);
  border-radius: var(--ch-r-lg);
  padding: clamp(18px, 2.2vw, 32px);
  box-shadow: var(--ch-lift-1);
}
.ch-panel + .ch-panel { margin-top: clamp(16px, 2vw, 24px); }
.ch-panel__title {
  font-size: clamp(17px, 1.6vw, 21px); font-weight: 800; letter-spacing: -.02em;
  color: var(--ch-t1); margin: 0 0 16px;
}
.ch-panel__text { font-size: clamp(13.5px, 1.05vw, 15px); line-height: 1.75; color: var(--ch-t2); font-weight: 500; margin: 0; }

/* Sticky sidebar — only sticky where there is a second column to be beside. */
.ch-profile__aside { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 24px); }
@media (min-width: 1000px) {
  .ch-profile__aside { position: sticky; top: 96px; }
}

.ch-profile__facts { display: flex; flex-direction: column; gap: 18px; }
.ch-profile__fact { display: flex; align-items: flex-start; gap: 13px; }
.ch-profile__fact-ic {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(1,182,72,.10); color: var(--ch-green-ink);
}
.ch-profile__fact-ic svg { width: 18px; height: 18px; }
.ch-profile__fact-v { font-size: 15px; font-weight: 800; color: var(--ch-t1); word-break: break-word; }
.ch-profile__fact-k { font-size: 12.5px; font-weight: 600; color: var(--ch-t3); margin-top: 2px; }
.ch-profile__money { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.03em; color: var(--ch-t1); }

/* Skill chips */
.ch-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.ch-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--ch-r-pill);
  background: #f1f4f2; border: 1px solid transparent;
  font-size: 13px; font-weight: 700; color: var(--ch-t2);
  transition: background-color var(--ch-base) var(--ch-ease),
              color var(--ch-base) var(--ch-ease),
              border-color var(--ch-base) var(--ch-ease);
}
.ch-chip:hover { background: rgba(1,182,72,.10); color: var(--ch-green-ink); border-color: rgba(1,182,72,.25); }
.ch-chip--verified { background: rgba(1,182,72,.09); color: var(--ch-green-ink); border-color: rgba(1,182,72,.2); }

/* Timeline entries (work / education) */
.ch-entry {
  display: flex; gap: 14px;
  padding: clamp(14px, 1.6vw, 20px);
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-r-md);
  transition: border-color var(--ch-base) var(--ch-ease), box-shadow var(--ch-base) var(--ch-ease);
}
.ch-entry + .ch-entry { margin-top: 12px; }
.ch-entry:hover { border-color: rgba(1,182,72,.3); box-shadow: var(--ch-lift-1); }
.ch-entry__ic {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f1f4f2; color: var(--ch-t2);
}
.ch-entry__ic svg { width: 18px; height: 18px; }
.ch-entry__main { min-width: 0; flex: 1; }
.ch-entry__top {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px;
}
.ch-entry__title { font-size: clamp(14.5px, 1.2vw, 16px); font-weight: 800; color: var(--ch-t1); }
.ch-entry__when { font-size: 13px; font-weight: 700; color: var(--ch-t3); white-space: nowrap; }
.ch-entry__where { font-size: 13px; font-weight: 600; color: var(--ch-t2); margin-top: 3px; }
.ch-entry__desc { font-size: 13.5px; line-height: 1.7; color: var(--ch-t3); margin-top: 9px; font-weight: 500; }

/* Score meters */
.ch-meter { margin-bottom: 16px; }
.ch-meter__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 13px; font-weight: 700; margin-bottom: 7px;
}
.ch-meter__row span:first-child { color: var(--ch-t2); }
.ch-meter__row span:last-child { color: var(--ch-t1); }
.ch-meter__track { height: 7px; border-radius: 999px; background: #eaeeec; overflow: hidden; }
.ch-meter__fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--ch-green), var(--ch-green-2));
  transform-origin: 0 50%;
  transition: transform 1s var(--ch-ease-out);
}
/* Bars grow from the left as the panel scrolls into view. */
html.ch-motion [data-ch-in] .ch-meter__fill,
html.ch-motion [data-ch-stagger] .ch-meter__fill { transform: scaleX(0); }
.is-in .ch-meter__fill { transform: scaleX(1); }

/* ==========================================================================
   10. MODAL / POPUP  (glass)
   ========================================================================== */
.ch-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 32px);
  background: rgba(11,17,22,.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity var(--ch-base) var(--ch-ease);
}
.ch-modal.is-visible { display: flex; }
.ch-modal.is-open { opacity: 1; }
.ch-modal__card {
  position: relative;
  width: 100%; max-width: 42rem;
  /* Scrollable, but without the bar: a 40px-tall gutter down the side of a
     glass popup that only overflows on a short window reads as a rendering
     fault. The content still scrolls by wheel, trackpad, touch and keyboard. */
  max-height: calc(100dvh - 4rem); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  border-radius: var(--ch-r-xl);
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: var(--ch-lift-4);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
          backdrop-filter: blur(24px) saturate(170%);
  transform: scale(.95) translate3d(0,10px,0);
  transition: transform var(--ch-base) var(--ch-ease-back);
}
.ch-modal__card::-webkit-scrollbar { width: 0; height: 0; }
.ch-modal.is-open .ch-modal__card { transform: none; }
.ch-modal__accent { height: 5px; background: linear-gradient(90deg, var(--ch-green), var(--ch-green-2), #34d399); }
.ch-modal__close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(24,34,43,.06); color: var(--ch-t2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--ch-fast) var(--ch-ease), color var(--ch-fast) var(--ch-ease);
}
.ch-modal__close:hover { background: rgba(24,34,43,.12); color: var(--ch-t1); }
.ch-modal__body { padding: clamp(22px, 3.4vw, 40px); }

/* Two-choice option cards inside the modal */
.ch-choice {
  display: flex; flex-direction: column;
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: var(--ch-r-md);
  background: #fff; border: 1px solid var(--ch-line);
  text-decoration: none;
  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-choice:hover { transform: translate3d(0,-4px,0); box-shadow: var(--ch-lift-3); border-color: rgba(1,182,72,.4); }
.ch-choice__ic {
  width: 46px; height: 46px; border-radius: var(--ch-r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(1,182,72,.10); color: var(--ch-green-ink); margin-bottom: 16px;
  transition: transform var(--ch-base) var(--ch-ease-back);
}
.ch-choice:hover .ch-choice__ic { transform: scale(1.08); }
.ch-choice__title { font-size: 15.5px; font-weight: 800; color: var(--ch-t1); margin-bottom: 7px; }
.ch-choice__desc { font-size: 13px; line-height: 1.65; color: var(--ch-t2); font-weight: 500; margin-bottom: 20px; }
.ch-choice__go { margin-top: auto; }

/* ==========================================================================
   10b. HERO  (used by template-parts/hero.blade.php)
   Lives here rather than in a @push('styles') block so there is one place
   that owns component CSS — and so the static UI harness renders the real
   thing rather than a stripped-down copy.
   ========================================================================== */
/* ---- Hero, scoped. Uses the design-system tokens from cubehire-ui.css ---- */
.ch-hero {
  position: relative;
  isolation: isolate;
  border-radius: var(--ch-r-2xl);
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(1,182,72,.20), transparent 60%),
    linear-gradient(180deg, #101821 0%, var(--ch-void) 55%, #0a1015 100%);
  box-shadow: var(--ch-lift-4);
  padding: clamp(56px, 9vw, 118px) clamp(20px, 5vw, 72px) clamp(64px, 8vw, 96px);
  min-height: clamp(520px, 78vh, 720px);
  display: flex; align-items: center; justify-content: center;
}
.ch-hero__vignette {
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 45%, transparent 30%, rgba(6,10,13,.75) 100%);
}

.ch-hero__inner {
  position: relative; z-index: 2;
  /* Narrow enough that the floating satellites never crowd the headline at
     the width where they first appear (1360px). */
  width: 100%; max-width: 780px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 22px;
}

.ch-hero__title {
  margin: 6px 0 0;
  font-size: clamp(34px, 5.6vw, 64px);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 800;
  color: #fff;
}
.ch-hero__lead {
  max-width: 640px; margin: 0;
  font-size: clamp(15px, 1.55vw, 18px);
  line-height: 1.65; font-weight: 500;
  color: var(--ch-t-inv-2);
}
.ch-hero__cta { display: flex; align-items: center; gap: 14px; margin-top: 6px; }

.ch-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(12px, 3vw, 44px);
  margin-top: clamp(24px, 4vw, 44px);
  padding-top: clamp(20px, 3vw, 32px);
  border-top: 1px solid rgba(255,255,255,.10);
  width: 100%; max-width: 660px;
}
.ch-hero__stat-num {
  font-size: clamp(22px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.03em;
  color: #fff; line-height: 1; margin-bottom: 7px;
}
.ch-hero__stat-label {
  font-size: clamp(11px, 1.2vw, 13px); font-weight: 600;
  color: var(--ch-t-inv-3); letter-spacing: .01em;
}

/* ---- Floating satellites ---- */
.ch-hero__orbit { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: none; }
/* Below 1360px there is not enough clear space either side of the headline
   column for the satellites to float without colliding with it. */
@media (min-width: 1360px) { .ch-hero__orbit { display: block; } }

.ch-hero__sat {
  position: absolute;
  pointer-events: auto;
  width: clamp(12.5rem, 15vw, 14rem); padding: 15px;
  border-radius: var(--ch-r-md);
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none;
  animation: ch-drift 8s ease-in-out infinite;
  animation-delay: var(--ch-sat-delay, 0s);
  transition: border-color var(--ch-base) var(--ch-ease-out),
              box-shadow var(--ch-base) var(--ch-ease-out);
}
.ch-hero__sat:hover {
  border-color: rgba(1,182,72,.6);
  box-shadow: 0 2px 6px rgba(0,0,0,.3), var(--ch-glow-lg);
}
.ch-hero__sat-top { display: flex; align-items: center; gap: 11px; }
.ch-hero__sat-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(1,182,72,.5); flex-shrink: 0; background: rgba(1,182,72,.15);
}
.ch-hero__sat-name {
  margin: 0; display: flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 800; color: #fff; line-height: 1.25;
}
.ch-hero__sat-name svg { width: 12px; height: 12px; color: var(--ch-green-2); flex-shrink: 0; }
.ch-hero__sat-role { margin: 2px 0 0; font-size: 11px; font-weight: 600; color: var(--ch-t-inv-3); }
.ch-hero__sat-meta {
  padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; gap: 3px;
}
.ch-hero__sat-meta span {
  font-size: 9px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ch-t-inv-3);
}
.ch-hero__sat-meta strong { font-size: 12px; font-weight: 800; color: var(--ch-t-inv-1); }

@media (max-width: 640px) {
  .ch-hero { min-height: 0; border-radius: var(--ch-r-xl); }
  .ch-hero__stats { grid-template-columns: 1fr; gap: 18px; text-align: center; }
}

/* ==========================================================================
   11. RESPONSIVE SWEEP
   Checked at 360 / 390 / 430 (phones), 768 / 834 / 1024 (tablets) and
   1280 / 1440 / 1536 / 1920 (desktop, which also covers 1920 at 150% zoom
   = 1280 CSS px and at 125% = 1536 CSS px).
   ========================================================================== */
@media (max-width: 1024px) {
  .ch-profile__aside { position: static; }
}
@media (max-width: 767px) {
  .ch-shead { margin-bottom: 24px; }
  .ch-shead__right { align-items: stretch; }
  .ch-shead__right .ch-btn { width: 100%; }
  .ch-cta { text-align: left; }
  .ch-cta .ch-btn { width: 100%; }
  .ch-footer__bottom { flex-direction: column; align-items: flex-start; }
  .ch-profile__banner { border-radius: var(--ch-r-lg); }
  .ch-entry { flex-direction: column; gap: 12px; }
  .ch-entry__when { white-space: normal; }
}
@media (max-width: 400px) {
  :root { --ch-gutter: 14px; }
  .ch-tcard { width: 15rem; }
  .ch-faq__q { gap: 10px; }
}

/* ==========================================================================
   12. CANDIDATE PROFILE CARD
   --------------------------------------------------------------------------
   A light card with dark text. The first pass was a green gradient with white
   copy: it looked striking in isolation but every card on a page was a solid
   block of brand colour, the engineer's photo had to fight it, and long skill
   names went grey-on-green. On a page whose job is comparing people, the
   people should carry the colour, not the container.

   Green is now an accent — the score chip, the verified tick, the skill
   badges, the hover edge and the CTA — over a white surface on the mist
   ground, matching every other card in the system.
   ========================================================================== */
.ch-pcard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* The card sizes its own internals. In a four-across grid each column is
     ~265px and the horizontal header (avatar + name + score) ran out of room:
     names truncated to a single letter and the meta row broke apart. A
     container query lets the card respond to ITS width rather than the
     viewport's, so the same component works four-up on the homepage and
     two-up on the network page without either knowing about the other. */
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  border-radius: var(--ch-r-xl);
  padding: clamp(18px, 2.2vw, 26px);
  background: #fff;
  border: 1px solid var(--ch-line);
  color: var(--ch-t1);
  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-pcard:hover,
.ch-pcard:focus-within {
  transform: translate3d(0, -6px, 0);
  border-color: rgba(1, 182, 72, .38);
  box-shadow: var(--ch-lift-3), 0 22px 50px -26px rgba(1, 182, 72, .45);
}

/* A soft green wash in the top-right corner — enough brand presence to tie the
   card to the system without tinting the content. */
.ch-pcard__glow {
  /*
   * Behind the content rather than under it at z-index 0.
   *
   * The card's children used to be given `position: relative; z-index: 1` as a
   * block, purely to lift them over this. That made every one of them a
   * containing block — including the header — so the stretched link below,
   * which lives inside the header, sized its `inset: 0` overlay to the header
   * and not to the card. The top of the card was clickable and the "View
   * profile" button at the bottom was not.
   *
   * A negative z-index paints above the card's own background and below its
   * in-flow content, which is what a wash in the corner wants, and it needs
   * nothing positioned to stay there. `isolation: isolate` on .ch-pcard keeps
   * it from escaping behind the card.
   */
  position: absolute; z-index: -1; pointer-events: none;
  width: 66%; aspect-ratio: 1; right: -14%; top: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(1, 182, 72, .13) 0%, rgba(1, 182, 72, 0) 70%);
}

/* ---- Header: avatar + identity + score ---- */
.ch-pcard__top {
  display: flex; align-items: flex-start; gap: 14px;
  padding-bottom: clamp(14px, 1.8vw, 18px);
  border-bottom: 1px solid var(--ch-line);
}

.ch-pcard__avatar {
  position: relative; flex-shrink: 0;
  width: clamp(58px, 6vw, 70px); aspect-ratio: 1;
  border-radius: 50%;
  padding: 4px;
  border: 2px dashed rgba(1, 182, 72, .45);
}
.ch-pcard__avatar img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  display: block; background: #eef2f0;
}

.ch-pcard__id { flex: 1; min-width: 0; }
.ch-pcard__name {
  margin: 0; display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: clamp(15.5px, 1.5vw, 18px); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.25; color: var(--ch-t1);
}
.ch-pcard__name svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--ch-green); }
.ch-pcard__role {
  margin: 5px 0 0;
  font-size: 12.5px; font-weight: 700; line-height: 1.4; color: var(--ch-green-ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.ch-pcard__meta {
  margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  font-size: 11.5px; font-weight: 600; color: var(--ch-t3);
}
.ch-pcard__meta i { font-style: normal; opacity: .5; }
.ch-pcard__meta svg { width: 12px; height: 12px; margin-right: 3px; vertical-align: -2px; }

/* Score chip, top-right */
.ch-pcard__badge {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: var(--ch-r-pill);
  background: rgba(1, 182, 72, .1);
  border: 1px solid rgba(1, 182, 72, .24);
  font-size: 12px; font-weight: 800; color: var(--ch-green-ink); line-height: 1;
}
.ch-pcard__badge svg { width: 12px; height: 12px; }

/* ---- Intro, in the engineer's own words ---- */
.ch-pcard__intro {
  margin: clamp(14px, 1.8vw, 18px) 0 0;
  font-size: 13px; line-height: 1.65; font-weight: 500; color: var(--ch-t2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

/* ---- Skills as badges ---- */
.ch-pcard__section-label {
  margin: clamp(14px, 1.8vw, 18px) 0 9px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ch-t3);
}
.ch-pcard__skills { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-pcard__skill {
  display: inline-flex; align-items: center;
  padding: 6px 11px; border-radius: var(--ch-r-pill);
  background: #f1f4f2; border: 1px solid transparent;
  font-size: 11.5px; font-weight: 700; color: var(--ch-t2); line-height: 1;
  transition: background-color var(--ch-base) var(--ch-ease),
              color var(--ch-base) var(--ch-ease),
              border-color var(--ch-base) var(--ch-ease);
}
/* The first few are the ones the interview actually tested. */
.ch-pcard__skill--verified {
  background: rgba(1, 182, 72, .09);
  border-color: rgba(1, 182, 72, .2);
  color: var(--ch-green-ink);
}
.ch-pcard:hover .ch-pcard__skill--verified { background: rgba(1, 182, 72, .14); }
.ch-pcard__skill--more { background: transparent; color: var(--ch-t3); border-color: var(--ch-line); }

/* ---- Interview breakdown ---- */
.ch-pcard__scores {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(14px, 1.8vw, 18px);
  padding-top: clamp(14px, 1.8vw, 16px);
  border-top: 1px solid var(--ch-line);
}
.ch-pcard__score-k {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ch-t3); display: block; margin-bottom: 4px;
}
.ch-pcard__score-v { font-size: 14px; font-weight: 800; color: var(--ch-t1); }

/* ---- Footer ---- */
.ch-pcard__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto;
  padding-top: clamp(14px, 1.8vw, 18px);
}
.ch-pcard__links { display: flex; align-items: center; gap: 7px; }
.ch-pcard__links a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--ch-line);
  color: var(--ch-t2); background: #fff;
  transition: background-color var(--ch-base) var(--ch-ease),
              border-color var(--ch-base) var(--ch-ease),
              color var(--ch-base) var(--ch-ease),
              transform var(--ch-base) var(--ch-ease-out);
}
.ch-pcard__links a:hover {
  background: rgba(1, 182, 72, .1);
  border-color: rgba(1, 182, 72, .35);
  color: var(--ch-green-ink);
  transform: translate3d(0, -2px, 0);
}
.ch-pcard__links svg { width: 14px; height: 14px; }

.ch-pcard__cta {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: var(--ch-r-pill);
  background: var(--ch-ink); color: #fff;
  font-size: 13px; font-weight: 800;
  transition: background-color var(--ch-base) var(--ch-ease);
}
.ch-pcard:hover .ch-pcard__cta {
  background: linear-gradient(135deg, var(--ch-green) 0%, var(--ch-green-2) 100%);
}

/*
 * Stretched link.
 *
 * The card is an <article>, not an <a>, because it contains links of its own
 * and nesting anchors is invalid — the parser closes the outer one and the
 * rest of the card escapes it. The name is the real anchor and its ::after is
 * stretched over the card, so the whole surface is clickable with a single
 * link in the accessibility tree.
 */
.ch-pcard__link {
  color: inherit;
  text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch-pcard__link::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  border-radius: inherit;
}
.ch-pcard__link:focus-visible::after {
  outline: 2px solid var(--ch-green); outline-offset: -4px;
}

/* Anything else interactive has to sit above that overlay. */
.ch-pcard__links,
.ch-pcard__badge { position: relative; z-index: 3; }

/* Narrow column: stack the header so the name gets the full width. */
@container (max-width: 330px) {
  .ch-pcard__top {
    flex-wrap: wrap;
    gap: 10px 12px;
  }
  .ch-pcard__avatar { width: 46px; }
  .ch-pcard__id { flex: 1 1 100%; order: 3; }
  .ch-pcard__badge { margin-left: auto; }
  .ch-pcard__name { font-size: 16px; }
  .ch-pcard__scores { gap: 6px; }
  .ch-pcard__score-k { font-size: 9px; letter-spacing: .04em; }
  .ch-pcard__foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .ch-pcard__links { justify-content: center; }
  .ch-pcard__cta { justify-content: center; }
}

@media (max-width: 420px) {
  .ch-pcard__scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-pcard__foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .ch-pcard__cta { justify-content: center; }
  .ch-pcard__links { justify-content: center; }
}

/* ==========================================================================
   13. CATEGORY BAND — a role heading with its four cards underneath
   ========================================================================== */
.ch-catband + .ch-catband { margin-top: clamp(32px, 5vw, 60px); }
.ch-catband__head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 20px;
  margin-bottom: clamp(16px, 2vw, 24px);
}
.ch-catband__title {
  margin: 0;
  font-size: clamp(18px, 2vw, 24px); font-weight: 800; letter-spacing: -.02em;
  color: var(--ch-t1);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ch-catband__count {
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  padding: 4px 10px; border-radius: var(--ch-r-pill);
  background: rgba(1, 182, 72, .1); color: var(--ch-green-ink);
  border: 1px solid rgba(1, 182, 72, .2);
}
.ch-section--dark .ch-catband__title { color: var(--ch-t-inv-1); }
.ch-section--dark .ch-catband__count {
  background: rgba(255, 255, 255, .08); color: var(--ch-green-3);
  border-color: rgba(255, 255, 255, .14);
}

/* Four across on a wide screen, two on a tablet, one on a phone. */
.ch-catband__grid {
  display: grid; gap: clamp(14px, 1.6vw, 22px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 620px)  { .ch-catband__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ch-catband__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   14. COMPARISON PLANES
   --------------------------------------------------------------------------
   Three columns as three planes at different depths. The Cubehire column is
   a raised glass panel that floats above the other two; the alternatives sit
   flat on the dark ground behind it. The depth IS the argument — you read
   which column matters before you read a word of it.
   ========================================================================== */
.ch-compare { position: relative; }

.ch-compare__head,
.ch-compare__row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(8px, 1.2vw, 18px);
  align-items: stretch;
}

.ch-compare__label {
  display: flex; align-items: center;
  padding: clamp(16px, 1.8vw, 22px) 4px;
  font-size: clamp(13px, 1.1vw, 14.5px); font-weight: 700;
  color: var(--ch-t-inv-2);
  line-height: 1.4;
}

.ch-compare__col-title {
  padding: 14px clamp(14px, 1.6vw, 22px);
  font-size: clamp(13px, 1.2vw, 16px); font-weight: 800;
  letter-spacing: -.015em;
  color: var(--ch-t-inv-2);
  display: flex; align-items: flex-end;
}
.ch-compare__col-title--us {
  color: #fff;
  font-size: clamp(15px, 1.5vw, 19px);
}

.ch-compare__cell {
  display: flex; align-items: center;
  padding: clamp(16px, 1.8vw, 22px) clamp(14px, 1.6vw, 22px);
  font-size: clamp(13px, 1.1vw, 14.5px); font-weight: 600;
  line-height: 1.5;
  color: var(--ch-t-inv-3);
  border-top: 1px solid rgba(255, 255, 255, .07);
}

/* The raised plane. One continuous panel behind the whole Cubehire column,
   drawn once rather than per cell so the edges stay unbroken. */
.ch-compare__plane {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: var(--ch-r-xl);
  background:
    linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 45%, transparent 72%),
    linear-gradient(180deg, rgba(1,182,72,.20) 0%, rgba(1,182,72,.07) 100%);
  border: 1px solid rgba(1, 182, 72, .38);
  box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 34px 70px -26px rgba(1, 182, 72, .55);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  pointer-events: none;
  z-index: 0;
}
.ch-compare__grid { position: relative; z-index: 1; }

.ch-compare__cell--us {
  color: #fff;
  font-weight: 800;
  border-top-color: rgba(1, 182, 72, .22);
}
.ch-compare__row:first-child .ch-compare__cell { border-top: 0; }

/* Mobile: the planes collapse into stacked cards, Cubehire first. */
.ch-compare__cards { display: flex; flex-direction: column; gap: 14px; }
.ch-compare__card {
  border-radius: var(--ch-r-lg);
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .03);
  padding: 18px;
}
.ch-compare__card h3 {
  margin: 0 0 14px;
  font-size: 15px; font-weight: 800; color: #fff;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.ch-compare__pair { margin-bottom: 12px; }
.ch-compare__pair:last-child { margin-bottom: 0; }
.ch-compare__pair-k {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ch-t-inv-3); display: block; margin-bottom: 4px;
}
.ch-compare__pair-v { font-size: 14px; font-weight: 600; color: var(--ch-t-inv-2); }
.ch-compare__pair--us {
  padding: 12px 14px; border-radius: var(--ch-r-sm);
  background: rgba(1, 182, 72, .12);
  border: 1px solid rgba(1, 182, 72, .3);
}
.ch-compare__pair--us .ch-compare__pair-k { color: var(--ch-green-3); }
.ch-compare__pair--us .ch-compare__pair-v { color: #fff; font-weight: 800; }

/* ==========================================================================
   15. FEATURE EXPLORER
   A list on one side, a floating preview panel on the other. The panel is
   drawn from primitives rather than screenshots, so it never goes stale and
   there is no stock photography to keep in sync.
   ========================================================================== */
.ch-explorer {
  display: grid; gap: clamp(20px, 3vw, 44px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 940px) {
  .ch-explorer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ch-explorer__stage { position: sticky; top: 100px; }
}

.ch-explorer__list { display: flex; flex-direction: column; gap: 8px; }
.ch-explorer__item {
  display: flex; align-items: flex-start; gap: 16px;
  width: 100%; text-align: left;
  padding: clamp(16px, 2vw, 22px);
  border-radius: var(--ch-r-lg);
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--ch-base) var(--ch-ease-out),
              border-color var(--ch-base) var(--ch-ease-out),
              box-shadow var(--ch-base) var(--ch-ease-out),
              transform var(--ch-base) var(--ch-ease-out);
}
.ch-explorer__item:hover { background: rgba(1, 182, 72, .05); }
.ch-explorer__item.is-active {
  background: #fff;
  border-color: var(--ch-line);
  box-shadow: var(--ch-lift-3);
  transform: translate3d(0, -2px, 0);
}
.ch-explorer__item:focus-visible { outline: 2px solid var(--ch-green); outline-offset: 2px; }

.ch-explorer__num {
  flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800;
  border: 1px solid var(--ch-line);
  color: var(--ch-t3);
  background: #fff;
  transition: background-color var(--ch-base) var(--ch-ease),
              color var(--ch-base) var(--ch-ease),
              border-color var(--ch-base) var(--ch-ease);
}
.ch-explorer__item.is-active .ch-explorer__num {
  background: var(--ch-green); border-color: var(--ch-green); color: #fff;
}
.ch-explorer__title {
  margin: 4px 0 6px;
  font-size: clamp(16px, 1.6vw, 20px); font-weight: 800; letter-spacing: -.02em;
  color: var(--ch-t2);
  transition: color var(--ch-base) var(--ch-ease);
}
.ch-explorer__item.is-active .ch-explorer__title { color: var(--ch-t1); }
.ch-explorer__desc {
  margin: 0; font-size: 13.5px; line-height: 1.65; font-weight: 500; color: var(--ch-t3);
}

/* Preview panel */
.ch-explorer__stage {
  position: relative;
  border-radius: var(--ch-r-2xl);
  padding: clamp(20px, 2.6vw, 34px);
  min-height: clamp(300px, 34vw, 420px);
  background:
    radial-gradient(ellipse 70% 60% at 80% 8%, rgba(1,182,72,.10), transparent 60%),
    linear-gradient(155deg, #f4fdf7 0%, #ffffff 60%);
  border: 1px solid rgba(1, 182, 72, .16);
  box-shadow: var(--ch-lift-3);
  overflow: hidden;
}
.ch-explorer__panel { display: none; }
.ch-explorer__panel.is-active { display: block; }

/* The entrance is scoped to html.ch-motion for the same reason every other
   hidden state is: `animation: … both` starts the panel at opacity 0, and if
   the animation never runs — stalled compositor, prerender — the panel is
   left blank with no way for CSS to recover it. Without motion it simply
   appears. */
html.ch-motion .ch-explorer__panel.is-active {
  animation: ch-panel-in .45s var(--ch-ease-out) both;
}
@keyframes ch-panel-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.ch-explorer__panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(24, 34, 43, .07);
}
.ch-explorer__panel-title { font-size: 15px; font-weight: 800; color: var(--ch-t1); }

/* Primitive building blocks for the previews. */
.ch-mock { display: flex; flex-direction: column; gap: 12px; }
.ch-mock__row { display: flex; align-items: center; gap: 12px; }
.ch-mock__bar {
  height: 9px; border-radius: 999px;
  background: rgba(24, 34, 43, .09);
}
.ch-mock__bar--accent { background: linear-gradient(90deg, var(--ch-green), var(--ch-green-2)); }
.ch-mock__block {
  background: #fff; border: 1px solid var(--ch-line);
  border-radius: var(--ch-r-md);
  padding: 16px;
  box-shadow: var(--ch-lift-1);
}
.ch-mock__dot {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: rgba(1, 182, 72, .12);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ch-green-ink);
}
.ch-mock__dot svg { width: 16px; height: 16px; }
.ch-mock__label { font-size: 12.5px; font-weight: 800; color: var(--ch-t1); }
.ch-mock__sub { font-size: 11.5px; font-weight: 600; color: var(--ch-t3); margin-top: 2px; }
.ch-mock__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ch-mock__chip {
  padding: 6px 12px; border-radius: 999px;
  background: #f1f4f2; font-size: 11.5px; font-weight: 700; color: var(--ch-t2);
}
.ch-mock__chip--on {
  background: rgba(1, 182, 72, .1); color: var(--ch-green-ink);
}
.ch-mock__score {
  display: flex; align-items: baseline; gap: 8px;
  font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.03em;
  color: var(--ch-t1); line-height: 1;
}
.ch-mock__score span { font-size: 14px; font-weight: 700; color: var(--ch-t3); }

/* ==========================================================================
   16. LEAD FORM PANEL
   ========================================================================== */
.ch-leadform {
  position: relative;
  border-radius: var(--ch-r-2xl);
  padding: clamp(24px, 4vw, 52px);
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3), 0 40px 80px -30px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
          backdrop-filter: blur(18px) saturate(150%);
}
.ch-leadform__grid {
  display: grid; gap: clamp(14px, 1.8vw, 20px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) {
  .ch-leadform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-leadform__grid > .ch-field--wide { grid-column: 1 / -1; }
}
.ch-leadform .ch-label { color: var(--ch-t-inv-2); }
.ch-leadform .ch-input,
.ch-leadform .ch-select {
  background: rgba(255, 255, 255, .07) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.ch-leadform .ch-input::placeholder { color: rgba(255, 255, 255, .4); }
.ch-leadform .ch-input:focus,
.ch-leadform .ch-select:focus {
  border-color: var(--ch-green) !important;
  box-shadow: 0 0 0 4px rgba(1, 182, 72, .18) !important;
  background: rgba(255, 255, 255, .1) !important;
}
.ch-leadform .ch-select option { color: var(--ch-t1); background: #fff; }
.ch-leadform__foot {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: clamp(20px, 3vw, 30px);
}
.ch-leadform__note { font-size: 13px; font-weight: 700; color: var(--ch-t-inv-2); }

/* ==========================================================================
   17. STAT BAND
   ========================================================================== */
.ch-stats {
  display: grid; gap: clamp(14px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.ch-stat {
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--ch-r-lg);
  background: #fff;
  border: 1px solid var(--ch-line);
  box-shadow: var(--ch-lift-1);
  transition: transform var(--ch-base) var(--ch-ease-out),
              box-shadow var(--ch-base) var(--ch-ease-out);
}
.ch-stat:hover { transform: translate3d(0, -5px, 0); box-shadow: var(--ch-lift-3); }
.ch-stat__num {
  font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -.035em;
  line-height: 1; color: var(--ch-green); margin-bottom: 10px;
}
.ch-stat__label { font-size: clamp(13px, 1.1vw, 14.5px); font-weight: 700; color: var(--ch-t1); }
.ch-stat__note { font-size: 12.5px; font-weight: 500; color: var(--ch-t3); margin-top: 6px; line-height: 1.6; }

.ch-section--dark .ch-stat {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .09);
}
.ch-section--dark .ch-stat__label { color: var(--ch-t-inv-1); }
.ch-section--dark .ch-stat__note { color: var(--ch-t-inv-3); }

/* ==========================================================================
   18. PRICING PLANES
   ========================================================================== */
.ch-plans {
  display: grid; gap: clamp(16px, 2vw, 26px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 820px) { .ch-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ch-plan {
  position: relative;
  border-radius: var(--ch-r-xl);
  padding: clamp(24px, 3vw, 38px);
  background: #fff;
  border: 1px solid var(--ch-line);
  box-shadow: var(--ch-lift-1);
  display: flex; flex-direction: column;
  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-plan:hover { transform: translate3d(0, -6px, 0); box-shadow: var(--ch-lift-3); }

/* The recommended plan is lifted off the page rather than merely outlined. */
.ch-plan--featured {
  border-color: rgba(1, 182, 72, .4);
  box-shadow: var(--ch-lift-3), var(--ch-glow);
}
.ch-plan--featured:hover { box-shadow: var(--ch-lift-4), var(--ch-glow-lg); }
.ch-plan__flag {
  position: absolute; top: -12px; left: clamp(24px, 3vw, 38px);
  padding: 6px 14px; border-radius: 999px;
  background: linear-gradient(135deg, var(--ch-green), var(--ch-green-2));
  color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px -8px rgba(1, 182, 72, .8);
}
.ch-plan__name {
  font-size: clamp(17px, 1.7vw, 21px); font-weight: 800; letter-spacing: -.02em;
  color: var(--ch-t1); margin: 0 0 8px;
}
.ch-plan__sub { font-size: 13.5px; line-height: 1.6; color: var(--ch-t2); margin: 0 0 22px; font-weight: 500; }
.ch-plan__price {
  display: flex; align-items: baseline; gap: 8px;
  font-size: clamp(32px, 4vw, 46px); font-weight: 800; letter-spacing: -.035em;
  color: var(--ch-t1); line-height: 1;
}
.ch-plan__price small { font-size: 14px; font-weight: 700; color: var(--ch-t3); letter-spacing: 0; }
.ch-plan__list {
  list-style: none; margin: 24px 0; padding: 0;
  display: flex; flex-direction: column; gap: 11px;
}
.ch-plan__list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--ch-t2); line-height: 1.55;
}
.ch-plan__list svg {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--ch-green);
}
.ch-plan__cta { margin-top: auto; }

/* Desktop shows the planes; below that the stacked cards take over. Only one
   of the two is ever in the layout, so nothing is duplicated for a screen
   reader and the phone never renders an eight-row four-column table. */
.ch-compare { display: none; }
@media (min-width: 940px) {
  .ch-compare { display: block; }
  .ch-compare__cards { display: none; }
}

/* ==========================================================================
   19. SEGMENTED TOGGLE
   A real radio group styled as a segmented control, so it is operable from
   the keyboard and announces its state — the pricing page previously used two
   buttons with onclick handlers and no state in the accessibility tree.
   ========================================================================== */
.ch-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  margin: 0;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-r-pill);
  background: #fff;
  box-shadow: var(--ch-lift-1);
}
.ch-toggle__opt { position: relative; display: inline-flex; }
.ch-toggle__opt input {
  position: absolute; inset: 0;
  opacity: 0; margin: 0; cursor: pointer;
}
.ch-toggle__opt span {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 10px 22px;
  border-radius: var(--ch-r-pill);
  font-size: 14px; font-weight: 800; color: var(--ch-t2);
  white-space: nowrap;
  transition: background-color var(--ch-base) var(--ch-ease),
              color var(--ch-base) var(--ch-ease);
}
.ch-toggle__opt small { font-size: 11.5px; font-weight: 700; opacity: .7; }
.ch-toggle__opt input:checked + span {
  background: var(--ch-ink);
  color: #fff;
}
.ch-toggle__opt input:focus-visible + span {
  outline: 2px solid var(--ch-green);
  outline-offset: 2px;
}
.ch-toggle__opt:hover input:not(:checked) + span { background: rgba(1, 182, 72, .08); }

@media (max-width: 460px) {
  .ch-toggle { width: 100%; }
  .ch-toggle__opt { flex: 1; }
  .ch-toggle__opt span { width: 100%; justify-content: center; padding-inline: 10px; }
}

/* ==========================================================================
   20. GROWTH BAR
   The bar itself, so the chart markup stays readable. Height comes from a
   custom property set inline per column; the grow animation is scoped to
   html.ch-motion so a stalled transition can never leave a zero-height chart.
   ========================================================================== */
.ch-growbar {
  width: 100%;
  height: var(--ch-grow, 0%);
  min-height: 6px;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, var(--ch-green-2) 0%, var(--ch-green) 60%, var(--ch-green-ink) 100%);
  transform-origin: 50% 100%;
}
html.ch-motion [data-ch-stagger] .ch-growbar { transform: scaleY(0); }
html.ch-motion [data-ch-stagger] .ch-growbar {
  transition: transform .9s var(--ch-ease-out);
}
html.ch-motion [data-ch-stagger].is-in .ch-growbar { transform: scaleY(1); }

/* ==========================================================================
   21. CATEGORY SWITCH
   A scroll-snapping pill row above the featured cards. It replaced seven
   stacked category bands that pushed the rest of the homepage a screen down.
   ========================================================================== */
.ch-catswitch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(20px, 2.6vw, 30px);
}
.ch-catswitch__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: var(--ch-r-pill);
  border: 1px solid var(--ch-line);
  background: #fff;
  font-family: inherit; font-size: 13.5px; font-weight: 800; color: var(--ch-t2);
  white-space: nowrap; cursor: pointer;
  box-shadow: var(--ch-lift-1);
  transition: background-color var(--ch-base) var(--ch-ease),
              color var(--ch-base) var(--ch-ease),
              border-color var(--ch-base) var(--ch-ease),
              transform var(--ch-fast) var(--ch-ease-out);
}
.ch-catswitch__btn:hover {
  border-color: rgba(1, 182, 72, .4);
  color: var(--ch-green-ink);
  transform: translate3d(0, -2px, 0);
}
.ch-catswitch__btn:focus-visible { outline: 2px solid var(--ch-green); outline-offset: 2px; }
.ch-catswitch__btn.is-active {
  background: var(--ch-ink);
  border-color: var(--ch-ink);
  color: #fff;
}
.ch-catswitch__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; padding: 2px 6px;
  border-radius: var(--ch-r-pill);
  background: rgba(1, 182, 72, .12);
  font-size: 11px; font-weight: 800; color: var(--ch-green-ink);
  transition: background-color var(--ch-base) var(--ch-ease), color var(--ch-base) var(--ch-ease);
}
.ch-catswitch__btn.is-active .ch-catswitch__n {
  background: rgba(255, 255, 255, .16); color: #fff;
}

.ch-catpanel { display: none; }
.ch-catpanel.is-active { display: block; }

/* On a phone the row scrolls sideways instead of stacking into five lines. */
@media (max-width: 640px) {
  .ch-catswitch {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
    /* Bleed to the screen edges so the row reads as scrollable. */
    margin-inline: calc(var(--ch-gutter) * -1);
    padding-inline: var(--ch-gutter);
  }
  .ch-catswitch::-webkit-scrollbar { display: none; }
  .ch-catswitch__btn { scroll-snap-align: start; flex: 0 0 auto; }
}

/* Score chip inside an interview-derived FAQ answer. */
.ch-faq__score {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: var(--ch-r-pill);
  background: rgba(1, 182, 72, .1);
  border: 1px solid rgba(1, 182, 72, .22);
  font-size: 11px; font-weight: 800; color: var(--ch-green-ink);
  vertical-align: 1px;
}

/* ==========================================================================
   22. MEGA MENU (desktop)
   --------------------------------------------------------------------------
   The header dropdowns were 15rem columns of bare links, and "Roles" hid a
   dozen more behind a second flyout — two hover targets deep before anyone
   could see what Cubehire actually staffs. On desktop each dropdown is now a
   single panel spanning the header width: the section's links with a line of
   context each, every engineering role laid out in full, and a promo rail.

   It is anchored to .ch-nav rather than to the trigger, which is what lets it
   span the container. That means .ch-nav__group must NOT establish a
   containing block — see the `position: static` below.

   Under 1100px this is all display:none and the drawer takes over.
   ========================================================================== */
@media (min-width: 1100px) {

  .ch-nav { position: relative; }
  .ch-nav__group { position: static; }

  .ch-mega {
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 80;
    /* Bridges the gap between the trigger and the panel so the pointer can
       travel down without the menu closing under it. */
    padding-top: 14px;
    opacity: 0; visibility: hidden;
    transform: translate3d(0, -10px, 0);
    transition: opacity var(--ch-base) var(--ch-ease-out),
                transform var(--ch-base) var(--ch-ease-out),
                visibility 0s linear var(--ch-base);
  }
  .ch-nav__group:hover > .ch-mega,
  .ch-nav__group:focus-within > .ch-mega {
    opacity: 1; visibility: visible; transform: none;
    transition-delay: 0s;
  }

  /* Escape sets this. It has to come after the open rules — same specificity,
     so source order decides — otherwise returning focus to the trigger would
     re-trigger :focus-within and the key would appear to do nothing. */
  .ch-nav__group.is-closed > .ch-mega {
    opacity: 0; visibility: hidden; transform: translate3d(0, -10px, 0);
  }

  .ch-mega__inner {
    border-radius: var(--ch-r-xl);
    /* Opaque enough that legibility never depends on what is behind it — the
       panel overlaps the dark hero on most pages. The blur and saturation
       still read as glass. */
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: var(--ch-lift-4);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
            backdrop-filter: blur(24px) saturate(180%);
    padding: clamp(20px, 2vw, 28px);
    overflow: hidden;
  }

  .ch-mega__grid {
    display: grid;
    gap: clamp(18px, 2vw, 32px);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .ch-mega__grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); }
  .ch-mega__grid--3 { grid-template-columns: minmax(0, 15rem) minmax(0, 1.4fr) minmax(0, 17rem); }

  .ch-mega__col-title {
    margin: 0 0 14px;
    font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ch-t3);
  }

  /* A nav item with a line of context under it. */
  .ch-mega__link {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 12px;
    border-radius: var(--ch-r-md);
    text-decoration: none;
    transition: background-color var(--ch-fast) var(--ch-ease),
                transform var(--ch-fast) var(--ch-ease-out);
  }
  .ch-mega__link:hover {
    background: rgba(1, 182, 72, .08);
    transform: translate3d(2px, 0, 0);
  }
  .ch-mega__link-ic {
    flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(1, 182, 72, .1); color: var(--ch-green-ink);
  }
  .ch-mega__link-ic svg { width: 16px; height: 16px; }
  .ch-mega__link-t {
    display: block;
    font-size: 14px; font-weight: 800; color: var(--ch-t1); line-height: 1.3;
  }
  .ch-mega__link-d {
    display: block; margin-top: 3px;
    font-size: 12px; font-weight: 500; color: var(--ch-t3); line-height: 1.45;
  }

  /* With no roles column, a single file of three links leaves the panel
     looking half empty. Two-up fills the width it has been given. */
  .ch-mega__grid--2 .ch-mega__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 14px;
    align-content: start;
  }

  /* Every role, laid out flat instead of behind a second flyout. */
  .ch-mega__roles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 2px 10px;
  }
  .ch-mega__role {
    display: block;
    padding: 8px 12px;
    border-radius: var(--ch-r-sm);
    font-size: 13px; font-weight: 700; color: var(--ch-t2);
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background-color var(--ch-fast) var(--ch-ease),
                color var(--ch-fast) var(--ch-ease);
  }
  .ch-mega__role:hover { background: rgba(1, 182, 72, .08); color: var(--ch-green-ink); }
  .ch-mega__role--all {
    margin-top: 6px;
    color: var(--ch-green-ink);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .ch-mega__role--all svg { width: 13px; height: 13px; transition: transform var(--ch-base) var(--ch-ease-out); }
  .ch-mega__role--all:hover svg { transform: translateX(3px); }

  /* Promo rail */
  .ch-mega__rail {
    position: relative; overflow: hidden;
    border-radius: var(--ch-r-lg);
    padding: clamp(18px, 1.8vw, 24px);
    background:
      radial-gradient(ellipse 80% 100% at 20% 0%, rgba(1, 182, 72, .3), transparent 62%),
      linear-gradient(150deg, #121b23 0%, var(--ch-void) 100%);
    color: var(--ch-t-inv-1);
    display: flex; flex-direction: column;
  }
  .ch-mega__rail-eyebrow {
    font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ch-green-3); margin-bottom: 10px;
  }
  .ch-mega__rail-title {
    font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25;
    margin: 0 0 8px; color: #fff;
  }
  .ch-mega__rail-body {
    font-size: 12.5px; line-height: 1.6; font-weight: 500;
    color: var(--ch-t-inv-2); margin: 0 0 18px;
  }
  .ch-mega__rail .ch-btn { align-self: flex-start; }

  /* The old narrow dropdown and its nested flyout are replaced by the mega
     panel; hide any that survive in a template that has not been updated. */
  .ch-nav__panel { display: none; }
}

/* ==========================================================================
   23. ROLE PAGE HERO
   ========================================================================== */
.ch-rolehero {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 940px) {
  .ch-rolehero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.ch-rolehero__mock { display: flex; flex-direction: column; gap: 14px; }

/* A skill as a marquee pill. Shares .ch-tcard's shell so the drifting rows on
   the role page and the candidate rows on the homepage read as one family. */
.ch-tcard--skill {
  width: auto;
  padding: 12px 22px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ch-t-inv-1);
  cursor: default;
}
.ch-tcard--skill:hover { transform: none; border-color: rgba(1, 182, 72, .4); }

/* ==========================================================================
   24. ARTICLE CARD + FEATURE
   --------------------------------------------------------------------------
   Thumbnails are drawn, not fetched. The ported blog and knowledge base pulled
   generic stock photography from a third party for every card; the artwork
   here is generated from the category's hue so it is always on brand, costs no
   request, and cannot 404.
   ========================================================================== */
.ch-post {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--ch-r-lg);
  background: #fff;
  border: 1px solid var(--ch-line);
  box-shadow: var(--ch-lift-1);
  overflow: hidden;
  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-post:hover,
.ch-post:focus-within {
  transform: translate3d(0, -6px, 0);
  box-shadow: var(--ch-lift-3);
  border-color: rgba(1, 182, 72, .32);
}

/* Generated artwork. The hue rotates per category but stays inside the brand's
   green-to-mint band, so twenty cards read as one set rather than a rainbow. */
.ch-post__art,
.ch-feature__art {
  position: relative;
  display: block;
  overflow: hidden;
  /* --ch-hue arrives already constrained to the brand band (140–175) from PHP.
     It used to be a raw hash run through `calc(... % 40)`, but calc() has no
     modulo operator — the expression was invalid, which invalidated the whole
     background and left the artwork blank. */
  background:
    radial-gradient(ellipse 70% 90% at 78% 18%, hsl(var(--ch-hue) 68% 70% / .95), transparent 62%),
    radial-gradient(ellipse 90% 120% at 10% 96%, hsl(var(--ch-hue) 72% 34% / .95), transparent 66%),
    linear-gradient(135deg, #04913b 0%, #01b648 48%, #6ee7a5 100%);
}
.ch-post__art { aspect-ratio: 16 / 9; }

/* A faint diagonal weave so the block is a texture, not a flat swatch. */
.ch-post__art::after,
.ch-feature__art::after {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, .16) 0 1px,
    transparent 1px 16px
  );
  opacity: .7;
}
.ch-post__art-label,
.ch-feature__art-label {
  position: absolute; left: 16px; bottom: 14px; z-index: 1;
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
}

.ch-post__body {
  display: flex; flex-direction: column;
  padding: clamp(16px, 1.8vw, 22px);
  flex: 1;
}
.ch-post__cat { align-self: flex-start; margin-bottom: 12px; font-size: 11.5px; padding: 5px 11px; }
.ch-post__title {
  margin: 0 0 16px;
  font-size: clamp(15px, 1.3vw, 17px); font-weight: 800; letter-spacing: -.015em;
  line-height: 1.35; color: var(--ch-t1);
}
.ch-post__link { color: inherit; text-decoration: none; }
/* Stretched link: the card is an <article>, so the title's ::after carries the
   click target across the whole surface without nesting anchors. */
.ch-post__link::after { content: ""; position: absolute; inset: 0; }
.ch-post__link:focus-visible::after { outline: 2px solid var(--ch-green); outline-offset: -4px; }

.ch-post__meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: auto;
  font-size: 12.5px; font-weight: 600; color: var(--ch-t3);
}
.ch-post__meta i { font-style: normal; opacity: .5; }
.ch-post__avatar,
.ch-feature__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: rgba(1, 182, 72, .12); color: var(--ch-green-ink);
  font-size: 11.5px; font-weight: 800;
}

/* ---- Featured post ---- */
.ch-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: var(--ch-r-xl);
  background: #fff;
  border: 1px solid var(--ch-line);
  box-shadow: var(--ch-lift-2);
  overflow: hidden;
  text-decoration: none;
  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-feature:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: var(--ch-lift-4);
  border-color: rgba(1, 182, 72, .35);
}
@media (min-width: 800px) {
  .ch-feature { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
.ch-feature__art { min-height: clamp(200px, 26vw, 300px); }
.ch-feature__body {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(22px, 3vw, 40px);
}
.ch-feature__title {
  display: block;
  margin: 16px 0 18px;
  font-size: clamp(20px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.025em;
  line-height: 1.2; color: var(--ch-t1);
}
.ch-feature__meta {
  display: flex; align-items: center; gap: 8px; margin-top: auto;
  font-size: 13px; font-weight: 600; color: var(--ch-t3);
}
.ch-feature__meta i { font-style: normal; opacity: .5; }

/* ==========================================================================
   25. CLIENT LOGO CARD
   Each company keeps its own brand colour on the mark — recolouring another
   company's identity green would misrepresent them — while the card itself is
   the same surface as everything else on the site.
   ========================================================================== */
.ch-logogrid {
  display: grid;
  gap: clamp(12px, 1.4vw, 18px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.ch-logocard {
  display: flex; align-items: flex-start; gap: 13px;
  padding: clamp(14px, 1.6vw, 18px);
  border-radius: var(--ch-r-lg);
  background: #fff;
  border: 1px solid var(--ch-line);
  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-logocard:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: var(--ch-lift-2);
  border-color: rgba(1, 182, 72, .28);
}
.ch-logocard__mark {
  flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ch-brand, var(--ch-ink));
  color: #fff; font-size: 13px; font-weight: 800; line-height: 1;
  text-transform: uppercase;
}
.ch-logocard__body { min-width: 0; }
.ch-logocard__name {
  display: block;
  font-size: 14px; font-weight: 800; color: var(--ch-t1); line-height: 1.3;
}
.ch-logocard__desc {
  display: block; margin-top: 5px;
  font-size: 12.5px; font-weight: 500; line-height: 1.55; color: var(--ch-t3);
}

/* ==========================================================================
   26. SALARY COMPARISON
   Two panels side by side in a grid. The ported page positioned them
   absolutely inside a fixed 420px box, so the second one started past the
   right edge of a phone and was clipped away entirely.
   ========================================================================== */
.ch-salcompare { display: grid; gap: 14px; }
@media (min-width: 560px) {
  .ch-salcompare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ch-salcompare__hi {
  border-color: rgba(1, 182, 72, .3) !important;
  background: linear-gradient(160deg, rgba(1, 182, 72, .07), #fff 60%) !important;
}
.ch-salcompare__range {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--ch-line);
  font-size: 12px; font-weight: 600; color: var(--ch-t3);
}
.ch-salcompare__range b { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 800; color: var(--ch-t1); }

/* ==========================================================================
   27. CONTACT
   ========================================================================== */
.ch-contact {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 940px) {
  .ch-contact { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.ch-contact__list {
  list-style: none; margin: clamp(24px, 3vw, 32px) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.ch-contact__list li {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 700; color: var(--ch-t1);
}
.ch-contact__direct {
  margin-top: clamp(22px, 3vw, 30px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--ch-line);
}
.ch-contact__form { padding: clamp(20px, 2.6vw, 32px); }

/* ==========================================================================
   28. REGISTRATION WIZARD  (Find a Job / join-us)
   --------------------------------------------------------------------------
   Three steps: basic info, discipline + personal details, uploads + consent.

   The file inputs are the reason this section exists. A bare
   input[type=file] renders as a small unstyled control that disappeared
   against the page — the upload button reported as invisible. Here the real
   input stays in the DOM, so the form posts normally and keyboard users still
   reach it, but it is laid over .ch-drop__face: a large, obvious target.
   ========================================================================== */

/* ---- Stepper ---- */
.ch-wiz__steps {
  display: flex; align-items: center; gap: clamp(6px, 1vw, 14px);
  margin-bottom: clamp(22px, 3vw, 32px);
  list-style: none; padding: 0;
}
.ch-wiz__step {
  display: flex; align-items: center; gap: 9px;
  min-width: 0; flex: 0 1 auto;
}
.ch-wiz__num {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800;
  background: #fff; color: var(--ch-t3);
  border: 1px solid var(--ch-line);
  box-shadow: var(--ch-lift-1);
  transition: background var(--ch-base) var(--ch-ease),
              color var(--ch-base) var(--ch-ease),
              border-color var(--ch-base) var(--ch-ease);
}
.ch-wiz__label {
  font-size: 12.5px; font-weight: 800; letter-spacing: .01em;
  color: var(--ch-t3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ch-wiz__step.is-done .ch-wiz__num {
  background: var(--ch-green-ink); border-color: var(--ch-green-ink); color: #fff;
}
.ch-wiz__step.is-active .ch-wiz__num {
  background: var(--ch-green); border-color: var(--ch-green); color: #08240f;
}
.ch-wiz__step.is-done .ch-wiz__label,
.ch-wiz__step.is-active .ch-wiz__label { color: var(--ch-t1); }
.ch-wiz__bar {
  flex: 1 1 auto; min-width: 10px; height: 2px; border-radius: 2px;
  background: var(--ch-line);
}
.ch-wiz__step.is-done + .ch-wiz__bar { background: var(--ch-green); }

/* Labels are noise on a phone; the numbers still carry the position. */
@media (max-width: 560px) {
  .ch-wiz__label { display: none; }
}

/* ---- Panel ---- */
.ch-wiz__panel { padding: clamp(20px, 2.6vw, 34px); }
.ch-wiz__title { font-size: clamp(17px, 1.7vw, 21px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.ch-wiz__sub { font-size: 13.5px; color: var(--ch-t2); font-weight: 500; line-height: 1.6; margin: 0 0 clamp(20px, 2.4vw, 28px); }
.ch-wiz__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ch-wiz__grid > .ch-field--wide { grid-column: 1 / -1; }
@media (max-width: 620px) {
  .ch-wiz__grid { grid-template-columns: minmax(0, 1fr); }
}
.ch-wiz__actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: clamp(22px, 3vw, 30px);
  padding-top: clamp(18px, 2vw, 22px);
  border-top: 1px solid var(--ch-line);
}
.ch-wiz__actions .ch-btn { flex: 0 1 auto; }

/* ---- Password strength ---- */
.ch-pwd__track {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  margin-top: 8px;
}
.ch-pwd__seg {
  height: 5px; border-radius: 3px; background: var(--ch-line);
  transition: background var(--ch-base) var(--ch-ease);
}
.ch-pwd[data-score="1"] .ch-pwd__seg:nth-child(-n+1) { background: #e5484d; }
.ch-pwd[data-score="2"] .ch-pwd__seg:nth-child(-n+2) { background: #f5a524; }
.ch-pwd[data-score="3"] .ch-pwd__seg:nth-child(-n+3) { background: #16c357; }
.ch-pwd[data-score="4"] .ch-pwd__seg { background: var(--ch-green-ink); }
.ch-pwd__note { font-size: 12px; font-weight: 700; margin-top: 7px; color: var(--ch-t3); }
.ch-pwd[data-score="1"] .ch-pwd__note { color: #c1272d; }
.ch-pwd[data-score="2"] .ch-pwd__note { color: #a56a00; }
.ch-pwd[data-score="3"] .ch-pwd__note,
.ch-pwd[data-score="4"] .ch-pwd__note { color: var(--ch-green-ink); }
.ch-pwd__rules { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; padding: 0; list-style: none; }
.ch-pwd__rule {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; color: var(--ch-t3);
  background: var(--ch-mist); border: 1px solid var(--ch-line);
  border-radius: var(--ch-r-pill); padding: 4px 10px;
}
.ch-pwd__rule.is-met { color: var(--ch-green-ink); background: rgba(1,182,72,.08); border-color: rgba(1,182,72,.24); }
.ch-pwd__rule svg { flex: 0 0 auto; opacity: .55; }
.ch-pwd__rule.is-met svg { opacity: 1; }

/* ---- Dropzone: the visible upload control ---- */
.ch-drop { position: relative; display: block; }
.ch-drop__input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; z-index: 2;
}
.ch-drop__face {
  display: flex; align-items: center; gap: 14px;
  padding: clamp(16px, 2vw, 22px);
  border: 2px dashed var(--ch-line);
  border-radius: var(--ch-r-lg);
  background: var(--ch-mist);
  transition: border-color var(--ch-base) var(--ch-ease),
              background var(--ch-base) var(--ch-ease),
              box-shadow var(--ch-base) var(--ch-ease);
}
.ch-drop__input:hover + .ch-drop__face,
.ch-drop__input:focus-visible + .ch-drop__face,
.ch-drop.is-over .ch-drop__face {
  border-color: var(--ch-green);
  background: rgba(1,182,72,.06);
  box-shadow: 0 0 0 4px rgba(1,182,72,.12);
}
.ch-drop.is-filled .ch-drop__face {
  border-style: solid; border-color: rgba(1,182,72,.4);
  background: rgba(1,182,72,.06);
}
.ch-drop__icon {
  flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: var(--ch-r-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--ch-green-ink);
  border: 1px solid var(--ch-line);
  box-shadow: var(--ch-lift-1);
}
.ch-drop.is-filled .ch-drop__icon { background: var(--ch-green); color: #08240f; border-color: var(--ch-green); }
.ch-drop__text { min-width: 0; }
.ch-drop__cta { font-size: 14px; font-weight: 800; color: var(--ch-t1); }
.ch-drop__cta u { text-decoration-color: var(--ch-green); text-underline-offset: 3px; }
.ch-drop__meta {
  font-size: 12px; color: var(--ch-t3); font-weight: 600; margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The chosen photo fills the icon slot, so the icon frame gets out of its way. */
.ch-drop__thumb {
  display: block; width: 100%; height: 100%;
  border-radius: inherit; object-fit: cover;
}
.ch-drop__icon:has(.ch-drop__thumb) { padding: 0; border-color: rgba(1,182,72,.4); overflow: hidden; }

/* ---- Consent rows ---- */
.ch-consent { display: flex; flex-direction: column; gap: 12px; margin-top: clamp(20px, 2.4vw, 26px); }
.ch-consent__row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 16px;
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-r-md);
  background: #fff;
  cursor: pointer;
}
.ch-consent__row:hover { border-color: rgba(1,182,72,.34); }
.ch-consent__box {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px;
  accent-color: var(--ch-green);
  cursor: pointer;
}
.ch-consent__text { font-size: 13px; line-height: 1.6; color: var(--ch-t2); font-weight: 500; }
.ch-consent__text strong { color: var(--ch-t1); font-weight: 800; }
.ch-consent__text a { color: var(--ch-green-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Inline notes ---- */
.ch-alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 13px 16px; margin-bottom: 18px;
  border-radius: var(--ch-r-md);
  font-size: 13px; font-weight: 600; line-height: 1.6;
  border: 1px solid var(--ch-line); background: var(--ch-mist); color: var(--ch-t2);
}
.ch-alert--error { background: #fef2f2; border-color: #f6c9c9; color: #a32020; }
.ch-alert--ok { background: rgba(1,182,72,.08); border-color: rgba(1,182,72,.28); color: var(--ch-green-ink); }
.ch-alert--info { background: #eff6ff; border-color: #c7dcfb; color: #1d4ed8; }
.ch-alert ul { margin: 6px 0 0; padding-left: 18px; }
.ch-alert svg { flex: 0 0 auto; margin-top: 1px; }

/* ---- Sign-in panel sharing the wizard card ---- */
.ch-wiz__switch {
  margin-top: 18px; text-align: center;
  font-size: 13px; color: var(--ch-t2); font-weight: 600;
}
.ch-wiz__switch button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 800; color: var(--ch-green-ink);
  text-decoration: underline; text-underline-offset: 2px;
}
.ch-wiz__tabs { display: flex; gap: 8px; margin-bottom: clamp(20px, 2.6vw, 26px); }
.ch-wiz__tab {
  flex: 1 1 0; min-width: 0;
  padding: 11px 14px; border-radius: var(--ch-r-pill);
  border: 1px solid var(--ch-line); background: #fff;
  font: inherit; font-size: 13px; font-weight: 800; color: var(--ch-t2);
  cursor: pointer;
  transition: background var(--ch-base) var(--ch-ease),
              color var(--ch-base) var(--ch-ease),
              border-color var(--ch-base) var(--ch-ease);
}
.ch-wiz__tab.is-active {
  background: var(--ch-ink); border-color: var(--ch-ink); color: #fff;
}

/* ================================================================
   Auth wizard — panel visibility, async states, inline validation
   ================================================================
   .ch-hide is what the sign-up / sign-in tabs toggle. It had no rule
   anywhere, so both panels rendered at once and the tabs looked dead:
   clicking one changed a class that meant nothing. It is declared here,
   once, and the tab script is the only thing that touches it. */
.ch-hide { display: none !important; }

/* ---- Async step transitions ---- */
.ch-wiz__body { position: relative; }
.ch-wiz__body.is-busy { pointer-events: none; opacity: .55; }
.ch-wiz__body.is-entering { animation: chWizIn 260ms var(--ch-ease, cubic-bezier(.22,1,.36,1)) both; }
@keyframes chWizIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-wiz__body.is-entering { animation: none; }
}

/* The step numbers stay clickable once a step has been completed, so people
   can go back without losing what they typed. */
.ch-wiz__step.is-reached { cursor: pointer; }
.ch-wiz__step.is-reached:hover .ch-wiz__label { color: var(--ch-green-ink); }

/* ---- Spinner shared by buttons and dropzones ---- */
.ch-spin {
  display: inline-block; width: 15px; height: 15px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; vertical-align: -2px;
  animation: chSpin .7s linear infinite;
}
@keyframes chSpin { to { transform: rotate(360deg); } }

.ch-btn.is-busy { pointer-events: none; opacity: .7; }
.ch-btn.is-busy svg { display: none; }

/* ---- Inline field errors ---- */
.ch-field__err {
  display: block; margin-top: 6px;
  font-size: 12.5px; font-weight: 700; line-height: 1.5; color: #c1272d;
}
.ch-field.has-error .ch-input,
.ch-field.has-error .ch-select,
.ch-field.has-error .ch-textarea {
  border-color: #e28b8b;
  box-shadow: 0 0 0 3px rgba(193,39,45,.10);
}

/* ---- Dropzone verdicts ----
   The CV scan and the photo check both run the moment a file is chosen, so the
   dropzone has to be able to say "working", "accepted" and "rejected" on its
   own rather than waiting for the form to be submitted. */
.ch-drop.is-checking .ch-drop__face {
  border-style: solid; border-color: rgba(1,182,72,.35); background: rgba(1,182,72,.04);
}
.ch-drop.is-rejected .ch-drop__face {
  border-style: solid; border-color: #e28b8b; background: #fef2f2;
}
.ch-drop.is-rejected .ch-drop__icon { background: #fff; color: #c1272d; border-color: #e9b3b3; }
.ch-drop.is-ok .ch-drop__face { border-style: solid; border-color: rgba(1,182,72,.45); background: rgba(1,182,72,.07); }
.ch-drop.is-ok .ch-drop__icon { background: var(--ch-green); color: #08240f; border-color: var(--ch-green); }

.ch-drop__verdict {
  display: none; margin-top: 10px; padding: 11px 14px;
  border-radius: var(--ch-r-md);
  font-size: 12.5px; font-weight: 600; line-height: 1.6;
  border: 1px solid var(--ch-line); background: var(--ch-mist); color: var(--ch-t2);
}
.ch-drop__verdict.is-shown { display: block; }
.ch-drop__verdict.is-error { background: #fef2f2; border-color: #f6c9c9; color: #a32020; }
.ch-drop__verdict.is-ok { background: rgba(1,182,72,.08); border-color: rgba(1,182,72,.28); color: var(--ch-green-ink); }
.ch-drop__verdict.is-warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.ch-drop__verdict ul { margin: 6px 0 0; padding-left: 18px; }
.ch-drop__verdict strong { font-weight: 800; }

/* What the CV scan actually pulled out, so nobody has to submit to find out. */
.ch-scanned { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ch-scanned__chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: var(--ch-r-pill);
  background: #fff; border: 1px solid rgba(1,182,72,.3);
  font-size: 11.5px; font-weight: 800; color: var(--ch-green-ink);
}

/* ==========================================================================
   16. SUPPORT CHAT  (bottom-right assistant)
   ==========================================================================
   The widget rendered by resources/views/partials/support-chat.blade.php. It
   floats above everything except the hire-talent modal, which is why the
   launcher sits at z-index 9990 rather than 9999.
   ========================================================================== */
.ch-chat { position: fixed; right: clamp(14px, 2.5vw, 26px); bottom: clamp(14px, 2.5vw, 26px); z-index: 9990; }

.ch-chat__launcher {
  position: relative; margin-left: auto;
  width: 58px; height: 58px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ch-green) 0%, var(--ch-green-2) 100%);
  color: #06230f; box-shadow: var(--ch-lift-4);
  transition: transform var(--ch-fast) var(--ch-ease-back), box-shadow var(--ch-fast) var(--ch-ease);
}
.ch-chat__launcher:hover { transform: translate3d(0,-2px,0) scale(1.04); }
.ch-chat__launcher:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.ch-chat__launcher-icon { position: absolute; display: flex; transition: opacity var(--ch-fast) var(--ch-ease), transform var(--ch-fast) var(--ch-ease); }
.ch-chat__launcher-icon svg { width: 25px; height: 25px; }
.ch-chat__launcher-icon--close { opacity: 0; transform: rotate(-90deg); }
.ch-chat.is-open .ch-chat__launcher-icon--open { opacity: 0; transform: rotate(90deg); }
.ch-chat.is-open .ch-chat__launcher-icon--close { opacity: 1; transform: none; }

.ch-chat__panel {
  position: absolute; right: 0; bottom: 72px;
  width: min(378px, calc(100vw - 28px));
  height: min(560px, calc(100dvh - 130px));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--ch-r-xl);
  background: #fff; border: 1px solid var(--ch-line);
  box-shadow: var(--ch-lift-4);
  opacity: 0; transform: translate3d(0,14px,0) scale(.97);
  transform-origin: bottom right;
  transition: opacity var(--ch-base) var(--ch-ease), transform var(--ch-base) var(--ch-ease-back);
}
.ch-chat.is-open .ch-chat__panel { opacity: 1; transform: none; }

.ch-chat__head {
  display: flex; align-items: center; gap: 11px;
  padding: 14px 14px 14px 16px; flex-shrink: 0;
  background: var(--ch-ink); color: #fff;
}
.ch-chat__avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(1,182,72,.18); color: var(--ch-green);
}
.ch-chat__avatar svg { width: 20px; height: 20px; }
.ch-chat__head-text { flex: 1; min-width: 0; }
.ch-chat__title { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.ch-chat__status {
  margin: 2px 0 0; display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--ch-t-inv-3);
}
.ch-chat__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ch-green); flex-shrink: 0; }
.ch-chat__x {
  width: 30px; height: 30px; border-radius: 50%; border: 0; flex-shrink: 0;
  background: rgba(255,255,255,.1); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--ch-fast) var(--ch-ease);
}
.ch-chat__x:hover { background: rgba(255,255,255,.2); }

.ch-chat__log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
  background: var(--ch-mist);
}
.ch-chat__msg { display: flex; }
.ch-chat__msg--you { justify-content: flex-end; }
.ch-chat__bubble {
  max-width: 84%; padding: 10px 14px; border-radius: 16px;
  font-size: 13.5px; line-height: 1.62; white-space: pre-wrap; word-break: break-word;
}
.ch-chat__msg--bot .ch-chat__bubble {
  background: #fff; border: 1px solid var(--ch-line); color: var(--ch-t1);
  border-bottom-left-radius: 5px;
}
.ch-chat__msg--you .ch-chat__bubble {
  background: var(--ch-ink); color: #fff; border-bottom-right-radius: 5px;
}

.ch-chat__typing { display: flex; align-items: center; gap: 4px; padding: 14px; }
.ch-chat__typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ch-t3);
  animation: chChatBlink 1.2s infinite ease-in-out;
}
.ch-chat__typing span:nth-child(2) { animation-delay: .18s; }
.ch-chat__typing span:nth-child(3) { animation-delay: .36s; }
@keyframes chChatBlink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ch-chat__typing span { animation: none; opacity: .5; } }

.ch-chat__chips {
  display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0;
  padding: 10px 12px 0; background: var(--ch-mist);
}
.ch-chat__chip {
  padding: 6px 11px; border-radius: var(--ch-r-pill); cursor: pointer;
  background: #fff; border: 1px solid var(--ch-line);
  font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--ch-t2);
  transition: border-color var(--ch-fast) var(--ch-ease), color var(--ch-fast) var(--ch-ease);
}
.ch-chat__chip:hover { border-color: var(--ch-green); color: var(--ch-green-ink); }

.ch-chat__ticket { flex-shrink: 0; padding: 12px 14px; border-top: 1px solid var(--ch-line); background: rgba(1,182,72,.05); }
.ch-chat__ticket-label { display: block; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--ch-t3); margin-bottom: 7px; }
.ch-chat__ticket-row { display: flex; gap: 8px; }
.ch-chat__ticket-note { margin: 7px 0 0; font-size: 11px; color: var(--ch-t3); font-weight: 600; }

.ch-chat__composer { flex-shrink: 0; display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--ch-line); background: #fff; }
.ch-chat__input {
  flex: 1; min-width: 0; padding: 11px 14px;
  border: 1px solid var(--ch-line); border-radius: var(--ch-r-pill);
  font-family: inherit; font-size: 13.5px; color: var(--ch-t1); background: #fff;
  outline: none; transition: border-color var(--ch-fast) var(--ch-ease);
}
.ch-chat__input:focus { border-color: var(--ch-green); }
.ch-chat__input:disabled { opacity: .6; }
.ch-chat__send {
  width: 42px; height: 42px; flex-shrink: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ch-green) 0%, var(--ch-green-2) 100%);
  color: #06230f;
  transition: transform var(--ch-fast) var(--ch-ease-back), opacity var(--ch-fast) var(--ch-ease);
}
.ch-chat__send:hover:not(:disabled) { transform: scale(1.06); }
.ch-chat__send:disabled { opacity: .45; cursor: default; }

@media (max-width: 480px) {
  .ch-chat__panel { height: min(76dvh, calc(100dvh - 110px)); }
}

/* Thank-you modal tick, and the inline error an enquiry form reports with. */
.ch-thanks__tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(1,182,72,.12); color: var(--ch-green-ink);
  border: 1px solid rgba(1,182,72,.28);
}
.ch-thanks__tick svg { width: 28px; height: 28px; }

.ch-formerror {
  margin: 14px 0 0; padding: 11px 14px;
  border-radius: var(--ch-r-md);
  background: #fef2f2; border: 1px solid #f6c9c9; color: #a32020;
  font-size: 13px; font-weight: 700; line-height: 1.55;
}

/* A post card carrying a real featured image rather than the generated one. */
.ch-post__art--photo { padding: 0; background: var(--ch-mist); }
.ch-post__art--photo::after { display: none; }
.ch-post__art--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-feature__art--photo { padding: 0; background: var(--ch-mist); }
.ch-feature__art--photo::after { display: none; }
.ch-feature__art--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/*
 * Fresh-graduate badge.
 *
 * Sits where the years-of-experience line would be on a profile card, and
 * beside the role on a profile page. Deliberately the brand green rather than
 * a neutral grey: an empty experience section is the expected state for these
 * candidates, not a gap in their profile, and the badge is what says so.
 */
.ch-pcard__fresh {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--ch-r-pill);
  background: rgba(1,182,72,.1); border: 1px solid rgba(1,182,72,.3);
  font-size: 11.5px; font-weight: 800; letter-spacing: -.01em;
  color: var(--ch-green-ink); white-space: nowrap;
}
.ch-pcard__fresh svg { width: 13px; height: 13px; flex-shrink: 0; }

/* The wordmark image, wherever it appears. Sized by the height set on the img. */
.ch-logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.ch-logo img { object-fit: contain; }

/* Cubie's face: the brand mark, in the chat header and beside each reply. */
.ch-chat__avatar { background: rgba(255,255,255,.1); padding: 5px; }
.ch-chat__avatar img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ch-chat__msg--bot { align-items: flex-end; gap: 8px; }
.ch-chat__face {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  padding: 3px; background: var(--ch-mist); border: 1px solid var(--ch-line);
  object-fit: contain; align-self: flex-end; margin-bottom: 2px;
}
/* The face occupies the gutter, so a reply bubble gets the room back. */
.ch-chat__msg--bot .ch-chat__bubble { max-width: calc(84% - 34px); }

/* ==========================================================================
   17. CLIENTS AND QUOTES
   ==========================================================================
   Both read from the database (Admin, Clients). Each section renders nothing
   at all when its table is empty, so these rules only ever apply to real
   content.
   ========================================================================== */
.ch-clients { text-align: center; }
.ch-clients__title {
  margin: 0 0 18px;
  font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ch-t3);
}
.ch-clients--dark .ch-clients__title { color: var(--ch-t-inv-3); }

.ch-clients__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(14px, 2.4vw, 32px);
}
.ch-clients__item {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 16px; border-radius: var(--ch-r-md);
  text-decoration: none; color: var(--ch-t1);
  border: 1px solid var(--ch-line); background: #fff;
  transition: transform var(--ch-fast) var(--ch-ease), border-color var(--ch-fast) var(--ch-ease);
}
.ch-clients__item:hover { transform: translate3d(0,-2px,0); border-color: var(--ch-green); }
.ch-clients__item img { height: 26px; width: auto; max-width: 130px; object-fit: contain; display: block; }
.ch-clients__mark { font-size: 17px; font-weight: 900; line-height: 1; }
.ch-clients__name { font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; }

.ch-clients--dark .ch-clients__item {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: var(--ch-t-inv-1);
}
.ch-clients--dark .ch-clients__item img { filter: brightness(0) invert(1); opacity: .82; }
.ch-clients--dark .ch-clients__item:hover img { opacity: 1; }

/* A single quote card. */
.ch-quote {
  position: relative; margin: 0;
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--ch-r-lg);
  background: #fff; border: 1px solid var(--ch-line);
  box-shadow: var(--ch-lift-1, 0 1px 2px rgba(16,24,32,.04));
  transition: transform var(--ch-base) var(--ch-ease), box-shadow var(--ch-base) var(--ch-ease);
}
.ch-quote:hover { transform: translate3d(0,-3px,0); box-shadow: var(--ch-lift-3); }
.ch-quote__mark { width: 26px; height: 26px; color: var(--ch-green); opacity: .35; flex-shrink: 0; }
.ch-quote__text {
  margin: 0; flex: 1;
  font-size: 15px; line-height: 1.72; font-weight: 500; color: var(--ch-t2);
}
.ch-quote__text::before { content: open-quote; }
.ch-quote__text::after { content: close-quote; }

.ch-quote__by { display: flex; align-items: center; gap: 12px; }
.ch-quote__face {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; border: 1px solid var(--ch-line);
}
.ch-quote__face--initials {
  display: grid; place-items: center;
  background: var(--ch-mist); color: var(--ch-t2);
  font-size: 13.5px; font-weight: 900; letter-spacing: -.02em;
}
.ch-quote__id { display: flex; flex-direction: column; min-width: 0; }
.ch-quote__name { font-size: 14px; font-weight: 800; color: var(--ch-t1); letter-spacing: -.01em; }
.ch-quote__role { font-size: 12.5px; font-weight: 600; color: var(--ch-t3); margin-top: 2px; }
.ch-quote__note { font-size: 11.5px; font-weight: 700; color: var(--ch-green-ink); margin-top: 3px; }

/* A client card whose mark is a real uploaded logo rather than an initial. */
.ch-logocard__mark--img { background: #fff; padding: 7px; }
.ch-logocard__mark--img img { width: 100%; height: 100%; object-fit: contain; display: block; }
a.ch-logocard { text-decoration: none; color: inherit; }

/* Cloudflare Turnstile, when it is switched on. */
.ch-turnstile { margin: 18px 0 4px; display: flex; justify-content: center; }

/* ---- The photo LinkedIn already gave us ---- */
/* Shown in place of "upload a photo" when somebody signed in with LinkedIn:
   the head-shot is already in hand, so the drop zone below it is for choosing
   a different one rather than for having one at all. */
.ch-li-photo {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 14px;
  border: 1px solid rgba(1,182,72,.4);
  border-radius: var(--ch-r-md);
  background: rgba(1,182,72,.06);
}
.ch-li-photo__img {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--ch-line);
  box-shadow: var(--ch-lift-1);
}
.ch-li-photo__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ch-li-photo__text strong { font-size: 14px; font-weight: 800; color: var(--ch-t1); }
.ch-li-photo__text span { font-size: 12px; font-weight: 600; color: var(--ch-t3); }

/* ---- Social links on a profile ---- */
/* Icons, not addresses. A profile carries the mark of each network and the
   link behind it; nobody reads a profile to read a URL. The brand colour is
   passed in per link as --brand and only shows on hover, so a row of six
   does not turn the header into a paint chart. */
.ch-social {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0; padding: 0; list-style: none;
}
.ch-social li { display: block; }
/* Scoped under .ch-profile__social where it has to beat that block's own
   `a` rules, which set an .8 opacity and a green hover for the text buttons
   beside it. Unscoped, a GitHub mark hovered green. */
.ch-profile__social .ch-social__link,
.ch-social__link {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--ch-line);
  background: #fff;
  color: var(--ch-t1);
  opacity: 1;
  box-shadow: var(--ch-lift-1);
  transition: color var(--ch-fast) var(--ch-ease),
              border-color var(--ch-fast) var(--ch-ease),
              transform var(--ch-base) var(--ch-ease-out),
              box-shadow var(--ch-base) var(--ch-ease-out);
}
/* Beats `.ch-profile__social svg`, which sizes the interview button's glyph. */
.ch-profile__social .ch-social__link svg { width: 17px; height: 17px; }
.ch-profile__social .ch-social__link:hover,
.ch-profile__social .ch-social__link:focus-visible,
.ch-social__link:hover,
.ch-social__link:focus-visible {
  color: var(--brand, var(--ch-green-ink));
  border-color: color-mix(in srgb, var(--brand, var(--ch-green)) 45%, #fff);
  transform: translate3d(0, -2px, 0);
  box-shadow: var(--ch-lift-2);
  opacity: 1;
}
/* The tick is the one thing here that is not the candidate's own claim: it is
   on the LinkedIn mark only, and only when they signed in with LinkedIn. */
.ch-social__tick {
  position: absolute; right: -3px; bottom: -3px;
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ch-green); color: #08240f;
  border: 2px solid #fff;
}
.ch-profile__social .ch-social__tick svg { width: 9px; height: 9px; }
@media (prefers-reduced-motion: reduce) {
  .ch-social__link { transition: none; }
  .ch-social__link:hover, .ch-social__link:focus-visible { transform: none; }
}