/* ==========================================================================
   STACK IT - DESIGN SYSTEM PATTERNS
   Tier 4 of 5 · Patterns + page templates + composition rules
   Loads after foundations.css → components.css → organisms.css.
   ==========================================================================
   Round 4a - Spacing system + Homepage template
   ========================================================================== */


/* ==========================================================================
   PAGE-LEVEL WRAPPERS - Round 4a
   --------------------------------------------------------------------------
   Generic section / inner / color modifiers that templates compose.
   References the v1.2 spacing tokens added to foundations.css.

   The Tier 3 organisms (header, hero, footer, etc) each carry their own
   internal padding - those stay unchanged. .stk-page__section is for NEW
   patterns introduced at Tier 4 and beyond, where the spacing system
   chooses padding via token, not magic number.
   ========================================================================== */

.stk-page {
  font-family: var(--stk-body);
  background: var(--stk-white);
  color: var(--stk-ink);
}

.stk-page__section {
  padding: var(--stk-section-y-md) var(--stk-section-x);
  position: relative;
}

.stk-page__section--xs { padding-top: var(--stk-section-y-xs); padding-bottom: var(--stk-section-y-xs); }
.stk-page__section--sm { padding-top: var(--stk-section-y-sm); padding-bottom: var(--stk-section-y-sm); }
.stk-page__section--lg { padding-top: var(--stk-section-y-lg); padding-bottom: var(--stk-section-y-lg); }
.stk-page__section--xl { padding-top: var(--stk-section-y-xl); padding-bottom: var(--stk-section-y-xl); }

/* Color surface modifiers */
.stk-page__section--surface { background: var(--stk-surface-1); }

.stk-page__section--dark {
  background:
    radial-gradient(ellipse at top right, rgba(37,99,235,.10) 0%, transparent 60%),
    linear-gradient(135deg, var(--stk-navy-900) 0%, var(--stk-navy-800) 100%);
  color: var(--stk-muted-3);
}

/* Defensive - any <p> inside a dark section gets light-on-dark coloring
   regardless of doc wrapper context. Specificity 0,1,1 ties with
   .section--surface p (foundations:190); patterns.css loads later so
   source-order wins ties. */
.stk-page__section--dark p {
  color: var(--stk-muted-3);
}

.stk-page__inner {
  max-width: var(--stk-container-default);
  margin: 0 auto;
}

.stk-page__inner--wide { max-width: var(--stk-container-wide); }
.stk-page__inner--narrow { max-width: var(--stk-container-narrow); }

/* Section heads - eyebrow + title + lead used across patterns */
.stk-section-head {
  text-align: center;
  max-width: var(--stk-container-heading);
  margin: 0 auto 48px;
}

.stk-section-head--left {
  text-align: left;
  margin-left: 0;
}

.stk-section-head__eyebrow {
  font-family: var(--stk-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stk-blue);
  margin: 0 0 12px;
  display: inline-block;
}

.stk-page__section--dark .stk-section-head__eyebrow {
  color: var(--stk-blue-400);
}

.stk-section-head__title {
  font-family: var(--stk-display);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--stk-ink);
  margin: 0 0 16px;
}

.stk-section-head__title-accent {
  background: linear-gradient(135deg, var(--stk-blue) 0%, var(--stk-blue-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.stk-page__section--dark .stk-section-head__title {
  color: var(--stk-white);
}

.stk-page__section--dark .stk-section-head__title-accent {
  background: linear-gradient(135deg, var(--stk-blue-300) 0%, var(--stk-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.stk-section-head__lead {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--stk-ink-3);
  margin: 0 auto;
  max-width: var(--stk-container-narrow);
}

.stk-section-head--left .stk-section-head__lead,
.stk-locations__intro .stk-section-head__lead,
.stk-form-close__intro .stk-section-head__lead {
  margin-left: 0;
}

.stk-page__section--dark .stk-section-head__lead {
  color: var(--stk-muted-3);
}


/* ==========================================================================
   PATTERN - PATH SPLITTER
   --------------------------------------------------------------------------
   Two large audience-selector cards. Homepage's "are you hiring or looking
   for work?" decision point. Both cards visually equal weight - neither
   path is the "primary" one because STACK IT serves both audiences.
   ========================================================================== */

.stk-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.stk-path-card {
  position: relative;
  display: block;
  padding: 36px 32px;
  background: var(--stk-white);
  border: 1px solid var(--stk-border);
  border-radius: var(--stk-r-card);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition:
    border-color var(--stk-t-fast) var(--stk-ease),
    box-shadow var(--stk-t-base) var(--stk-ease),
    transform var(--stk-t-base) var(--stk-ease);
}

.stk-path-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--stk-blue);
  opacity: 0;
  transition: opacity var(--stk-t-fast) var(--stk-ease);
}

.stk-path-card:hover {
  border-color: var(--stk-blue);
  box-shadow: 0 16px 40px -16px rgba(37,99,235,.25);
  transform: translateY(-2px);
}

.stk-path-card:hover::before {
  opacity: 1;
}

.stk-path-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--stk-r-md);
  background: var(--stk-blue-50);
  color: var(--stk-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.stk-path-card__icon svg {
  width: 28px;
  height: 28px;
}

.stk-path-card__eyebrow {
  font-family: var(--stk-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stk-blue);
  margin: 0 0 8px;
}

.stk-path-card__title {
  font-family: var(--stk-display);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--stk-ink);
  margin: 0 0 12px;
}

.stk-path-card__lead {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--stk-ink-3);
  margin: 0 0 24px;
}

.stk-path-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--stk-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--stk-blue);
}

.stk-path-card__cta svg {
  width: 16px;
  height: 16px;
  transition: transform var(--stk-t-fast) var(--stk-ease);
}

.stk-path-card:hover .stk-path-card__cta svg {
  transform: translateX(4px);
}


/* ==========================================================================
   PATTERN - SERVICES GRID
   --------------------------------------------------------------------------
   Three service cards in a row. Permanent / Contract / Talent Network on the
   homepage. Composes the visual shape of the existing .stk-card without
   inventing a new variant - wraps card primitives in a grid.
   ========================================================================== */

.stk-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.stk-service-card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: var(--stk-white);
  border: 1px solid var(--stk-border);
  border-radius: var(--stk-r-card);
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition:
    border-color var(--stk-t-fast) var(--stk-ease),
    box-shadow var(--stk-t-base) var(--stk-ease),
    transform var(--stk-t-base) var(--stk-ease);
}

.stk-service-card:hover {
  border-color: var(--stk-blue);
  box-shadow: 0 12px 28px -12px rgba(37,99,235,.18);
  transform: translateY(-2px);
}

.stk-service-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--stk-blue-50);
  color: var(--stk-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.stk-service-card__icon svg {
  width: 22px;
  height: 22px;
}

.stk-service-card__title {
  font-family: var(--stk-display);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--stk-ink);
  margin: 0 0 10px;
}

.stk-service-card__lead {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--stk-ink-3);
  margin: 0 0 20px;
  flex: 1 1 auto;
}

.stk-service-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stk-service-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--stk-ink-2);
  line-height: 1.45;
}

.stk-service-card__feature svg {
  width: 14px;
  height: 14px;
  color: var(--stk-success);
  flex-shrink: 0;
  margin-top: 3px;
}

.stk-service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--stk-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--stk-blue);
  margin-top: auto;
}

.stk-service-card__cta svg {
  width: 14px;
  height: 14px;
  transition: transform var(--stk-t-fast) var(--stk-ease);
}

.stk-service-card:hover .stk-service-card__cta svg {
  transform: translateX(4px);
}


/* ==========================================================================
   PATTERN - PROCESS STEPS
   --------------------------------------------------------------------------
   Numbered "how it works" steps. Horizontal on desktop with a connecting
   line behind the numbers, vertical stack on mobile. Likely returns in
   Round 4b's Find Talent / Find Jobs templates.
   ========================================================================== */

.stk-process {
  position: relative;
}

.stk-process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}

/* Connecting line behind step numbers (desktop only) */
.stk-process__steps::before {
  content: '';
  position: absolute;
  top: 28px; /* aligns with center of the 56px circles */
  left: calc(12.5% + 28px);
  right: calc(12.5% + 28px);
  height: 2px;
  background: linear-gradient(90deg, var(--stk-blue-200), var(--stk-blue-200));
  z-index: 0;
}

.stk-process__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

.stk-process__step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--stk-white);
  border: 2px solid var(--stk-blue);
  color: var(--stk-blue);
  font-family: var(--stk-display);
  font-size: 22px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 0 0 6px var(--stk-white);
}

.stk-process__step-title {
  font-family: var(--stk-display);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--stk-ink);
  margin: 0 0 8px;
}

.stk-process__step-lead {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--stk-ink-3);
  margin: 0;
}


/* ==========================================================================
   PATTERN - SOCIAL PROOF (recent placements + stats)
   --------------------------------------------------------------------------
   Recent placements row using .stk-card--role-filled from Tier 2 (does
   not exist as a new card variant - uses the existing one), plus a small
   stats strip below as numerical evidence.
   ========================================================================== */

.stk-proof__placements {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

.stk-proof__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 32px 40px;
  background: var(--stk-surface-1);
  border: 1px solid var(--stk-border);
  border-radius: var(--stk-r-card);
}

.stk-proof__stat {
  text-align: center;
  position: relative;
}

.stk-proof__stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -12px;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: var(--stk-border);
}

.stk-proof__stat-num {
  font-family: var(--stk-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--stk-blue);
  margin: 0 0 6px;
}

.stk-proof__stat-label {
  font-size: 13px;
  line-height: 1.4;
  color: var(--stk-ink-3);
  margin: 0;
}


/* ==========================================================================
   PATTERN - FINAL CTA STRIP
   --------------------------------------------------------------------------
   Dark navy strip at the bottom of pages. Closing conversion ask before
   the footer. Single title + lead + 1-2 buttons, centered.
   ========================================================================== */

.stk-final-cta {
  text-align: center;
  max-width: var(--stk-container-narrow);
  margin: 0 auto;
}

.stk-final-cta__eyebrow {
  font-family: var(--stk-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stk-blue-400);
  margin: 0 0 14px;
}

.stk-final-cta__title {
  font-family: var(--stk-display);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--stk-white);
  margin: 0 0 18px;
}

.stk-final-cta__lead {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--stk-muted-3);
  margin: 0 0 32px;
}

.stk-final-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 960px) {
  .stk-paths,
  .stk-services {
    grid-template-columns: 1fr;
  }
  .stk-process__steps {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .stk-process__steps::before {
    display: none;
  }
  .stk-proof__placements {
    grid-template-columns: 1fr;
  }
  .stk-proof__stats {
    grid-template-columns: repeat(2, 1fr);
    padding: 24px 20px;
    gap: 32px;
  }
  .stk-proof__stat:nth-child(2)::after { display: none; }
  .stk-proof__stat:nth-child(2n)::after { display: none; }
}

@media (max-width: 760px) {
  .stk-page__section {
    padding-left: var(--stk-section-x-mobile);
    padding-right: var(--stk-section-x-mobile);
  }
  .stk-page__section--lg,
  .stk-page__section--xl {
    padding-top: var(--stk-section-y-md);
    padding-bottom: var(--stk-section-y-md);
  }
  .stk-path-card,
  .stk-service-card {
    padding: 28px 22px;
  }
  .stk-proof__stats {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .stk-proof__stat::after {
    display: none !important;
  }
  .stk-final-cta__actions .stk-btn {
    width: 100%;
  }
}


/* ==========================================================================
   PATTERN - ONTARIO LOCATIONS (cities list + map container chrome)
   --------------------------------------------------------------------------
   Adapted from the production code on stackitrecruitment.com - original
   used the .stackit-city-table convention with Poppins + #2072fb / #003366.
   Reimplemented under .stk-locations with our design system tokens (Sora +
   --stk-blue / --stk-navy-700). Same pattern: 2-col grid on desktop, 1-col
   on mobile, dot bullet, hover tint, ItemList JSON-LD for SEO.

   Map chrome (title overlay, legend, container) styled in this file; the
   actual Google Maps integration lives in homepage.html alongside the API
   key - too much weight to load in a design system doc.
   ========================================================================== */

.stk-locations {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: start;
}

.stk-locations__intro {
  min-width: 0;
}

.stk-locations__intro .stk-section-head {
  text-align: left;
  margin: 0 0 24px;
}

.stk-locations__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 8px 24px;
}

.stk-locations__item {
  margin: 0;
  border-bottom: 1px solid var(--stk-border);
  padding: 0;
}

.stk-locations__item:nth-last-child(1),
.stk-locations__item:nth-last-child(2) {
  border-bottom: none;
}

.stk-locations__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-family: var(--stk-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--stk-ink-2);
  text-decoration: none;
  padding: 8px 6px;
  border-radius: var(--stk-r-sm);
  transition:
    color var(--stk-t-fast) var(--stk-ease),
    background-color var(--stk-t-fast) var(--stk-ease),
    transform var(--stk-t-fast) var(--stk-ease);
}

.stk-locations__link::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--stk-blue), var(--stk-blue-hover));
  box-shadow: 0 0 0 3px var(--stk-blue-50);
  flex-shrink: 0;
}

.stk-locations__link:hover {
  color: var(--stk-blue);
  background: var(--stk-blue-50);
  transform: translateY(-1px);
}

.stk-locations__link:focus-visible {
  outline: 2px solid var(--stk-blue);
  outline-offset: 2px;
  background: var(--stk-blue-50);
}

/* === MAP CONTAINER CHROME === */
.stk-locations__map-wrap {
  position: relative;
  width: 100%;
  min-height: 520px;
}

.stk-locations__map {
  width: 100%;
  height: 520px;
  border-radius: var(--stk-r-card);
  overflow: hidden;
  background: var(--stk-surface-1); /* shows while Maps SDK loads */
  border: 1px solid var(--stk-border);
}

.stk-locations__map-title {
  position: absolute;
  z-index: 2;
  left: 16px;
  top: 16px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--stk-border);
  border-radius: var(--stk-r-md);
  padding: 10px 14px;
  font-family: var(--stk-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--stk-ink);
}

.stk-locations__map-legend {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  padding: 8px 12px;
  background: var(--stk-white);
  border: 1px solid var(--stk-border);
  border-radius: var(--stk-r-md);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--stk-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--stk-ink-3);
  box-shadow: 0 4px 12px -4px rgba(15, 23, 42, .10);
}

.stk-locations__map-legend-pin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--stk-blue);
  border: 2px solid var(--stk-navy-700);
  flex-shrink: 0;
}

/* === MAP PIN LABEL OVERLAY (rendered by Maps JS at runtime) === */
/* Class applied to dynamically-created label divs by the production code */
.stk-locations__map-pin-label {
  padding: 4px 10px;
  border-radius: var(--stk-r-pill);
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--stk-border);
  color: var(--stk-navy-700);
  font-family: var(--stk-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.005em;
  white-space: nowrap;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  cursor: pointer;
  pointer-events: auto;
  transition:
    background-color var(--stk-t-fast) var(--stk-ease),
    transform var(--stk-t-fast) var(--stk-ease);
}

.stk-locations__map-pin-label:hover {
  background: var(--stk-white);
  transform: translateY(-1px);
}

/* === RESPONSIVE === */
@media (max-width: 960px) {
  .stk-locations {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .stk-locations__map {
    height: 400px;
  }
  .stk-locations__map-wrap {
    min-height: 400px;
  }
}

@media (max-width: 480px) {
  .stk-locations__list {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .stk-locations__item {
    border-bottom: 1px solid var(--stk-border);
  }
  .stk-locations__item:nth-last-child(2) {
    border-bottom: 1px solid var(--stk-border);
  }
  .stk-locations__item:last-child {
    border-bottom: none;
  }
}


/* ==========================================================================
   PATTERN - CLIENT LOGO STRIP (Round 4a rev2)
   --------------------------------------------------------------------------
   The first proof signal after the hero. Real client logos sitting in a
   centered flex row, grayscale + 60% opacity at rest, full color +
   full opacity on hover. The grayscale state is what makes the strip
   feel cohesive across logos of wildly different brand colors.
   ========================================================================== */

.stk-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px 56px;
}

.stk-logos__item {
  flex: 0 0 auto;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stk-logos__item img {
  max-height: 100%;
  max-width: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
  transition:
    filter var(--stk-t-base) var(--stk-ease),
    opacity var(--stk-t-base) var(--stk-ease);
}

.stk-logos__item:hover img {
  filter: grayscale(0);
  opacity: 1;
}

.stk-logos__intro {
  text-align: center;
  font-family: var(--stk-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--stk-muted);
  margin: 0 0 28px;
}


/* ==========================================================================
   PATTERN - HIRE BY ROLE (tabbed category nav + role cards)
   --------------------------------------------------------------------------
   Five role categories surfaced as ARIA-compliant tabs. Click a tab to
   switch the role card grid below. Pure functional tabs with arrow-key
   nav, Home/End support, focus management. JS controller lives at the
   bottom of homepage.html and the Tier 4 doc.

   Why tabs and not all-expanded: 17 roles across 5 categories. Stacked
   vertically that's a homepage section eating ~1000px of scroll. Tabbed
   keeps depth without burying the sections that follow.
   ========================================================================== */

.stk-hire-by-role__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 0 0 36px;
  border-bottom: 1px solid var(--stk-border);
  padding-bottom: 0;
  position: relative;
}

.stk-hire-by-role__tab {
  position: relative;
  background: transparent;
  border: 0;
  padding: 14px 20px;
  font-family: var(--stk-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--stk-ink-3);
  cursor: pointer;
  transition: color var(--stk-t-fast) var(--stk-ease);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.stk-hire-by-role__tab:hover {
  color: var(--stk-ink);
}

.stk-hire-by-role__tab[aria-selected="true"] {
  color: var(--stk-blue);
  border-bottom-color: var(--stk-blue);
}

.stk-hire-by-role__tab:focus-visible {
  outline: 2px solid var(--stk-blue);
  outline-offset: 2px;
  border-radius: var(--stk-r-sm);
}

.stk-hire-by-role__panel {
  display: block;
}

.stk-hire-by-role__panel[hidden] {
  display: none;
}

.stk-hire-by-role__roles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.stk-hire-by-role__role {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--stk-white);
  border: 1px solid var(--stk-border);
  border-radius: var(--stk-r-md);
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--stk-t-fast) var(--stk-ease),
    background-color var(--stk-t-fast) var(--stk-ease),
    transform var(--stk-t-fast) var(--stk-ease);
}

.stk-hire-by-role__role:hover {
  border-color: var(--stk-blue);
  background: var(--stk-blue-50);
  transform: translateY(-1px);
}

.stk-hire-by-role__role-info {
  min-width: 0;
  flex: 1;
}

.stk-hire-by-role__role-title {
  font-family: var(--stk-display);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--stk-ink);
  margin: 0 0 3px;
}

.stk-hire-by-role__role-desc {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--stk-ink-3);
  margin: 0;
}

.stk-hire-by-role__role-arrow {
  width: 18px;
  height: 18px;
  color: var(--stk-muted-2);
  flex-shrink: 0;
  transition:
    color var(--stk-t-fast) var(--stk-ease),
    transform var(--stk-t-fast) var(--stk-ease);
}

.stk-hire-by-role__role:hover .stk-hire-by-role__role-arrow {
  color: var(--stk-blue);
  transform: translateX(3px);
}

.stk-hire-by-role__foot {
  text-align: center;
  margin-top: 36px;
  font-size: 14px;
  color: var(--stk-ink-3);
}

.stk-hire-by-role__foot a {
  color: var(--stk-blue);
  font-weight: 600;
  text-decoration: none;
}

.stk-hire-by-role__foot a:hover {
  text-decoration: underline;
}


/* ==========================================================================
   PATTERN - INDUSTRIES GRID
   --------------------------------------------------------------------------
   8 industry cards in a 4×2 grid (desktop) / 2×4 (tablet) / 1×8 (mobile).
   Text-only intentionally - services-grid is icon-led so industries-grid
   stays text-led for visual rhythm. Each card is the link.
   ========================================================================== */

.stk-industries {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stk-industries__card {
  display: block;
  padding: 24px 22px;
  background: var(--stk-white);
  border: 1px solid var(--stk-border);
  border-radius: var(--stk-r-card);
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--stk-t-fast) var(--stk-ease),
    background-color var(--stk-t-fast) var(--stk-ease),
    transform var(--stk-t-fast) var(--stk-ease);
  position: relative;
  overflow: hidden;
}

.stk-industries__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--stk-blue);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--stk-t-base) var(--stk-ease);
}

.stk-industries__card:hover {
  border-color: var(--stk-blue);
  transform: translateY(-2px);
}

.stk-industries__card:hover::before {
  transform: scaleY(1);
}

.stk-industries__name {
  font-family: var(--stk-display);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--stk-ink);
  margin: 0 0 8px;
}

.stk-industries__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--stk-ink-3);
  margin: 0;
}

.stk-industries__foot {
  text-align: center;
  margin-top: 36px;
  font-size: 14px;
  color: var(--stk-ink-3);
}

.stk-industries__foot a {
  color: var(--stk-blue);
  font-weight: 600;
  text-decoration: none;
}

.stk-industries__foot a:hover {
  text-decoration: underline;
}


/* ==========================================================================
   PATTERN - FEATURED RESOURCES (cards with PDF / interactive variants)
   --------------------------------------------------------------------------
   Three lead-magnet cards. Two are PDFs (Salary Guide, Bill 190 Checklist),
   one is interactive (Delayed Hire Cost Calculator). The interactive card
   gets a different badge color + label, but otherwise composes from the
   same .stk-card--resource pattern.

   Why this replaces the homepage's "Recent insights" blog row: lead magnets
   are conversion content (give email, get value) while blog posts are
   reading commitments. Homepage real estate should bias toward conversion.
   ========================================================================== */

.stk-resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.stk-card--resource {
  display: flex;
  flex-direction: column;
  background: var(--stk-white);
  border: 1px solid var(--stk-border);
  border-radius: var(--stk-r-card);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition:
    border-color var(--stk-t-fast) var(--stk-ease),
    box-shadow var(--stk-t-base) var(--stk-ease),
    transform var(--stk-t-base) var(--stk-ease);
}

.stk-card--resource:hover {
  border-color: var(--stk-blue);
  box-shadow: 0 16px 40px -16px rgba(37,99,235,.22);
  transform: translateY(-2px);
}

.stk-card--resource__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, var(--stk-blue-50) 0%, var(--stk-blue-200) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.stk-card--resource__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stk-card--resource__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--stk-white);
  color: var(--stk-blue);
  font-family: var(--stk-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--stk-r-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .12);
}

.stk-card--resource__badge svg {
  width: 12px;
  height: 12px;
}

.stk-card--resource__badge--interactive {
  background: var(--stk-blue);
  color: var(--stk-white);
}

.stk-card--resource__body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.stk-card--resource__title {
  font-family: var(--stk-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--stk-ink);
  margin: 0 0 8px;
}

.stk-card--resource__lead {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--stk-ink-3);
  margin: 0 0 18px;
  flex: 1;
}

.stk-card--resource__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--stk-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--stk-blue);
  margin-top: auto;
}

.stk-card--resource__cta svg {
  width: 14px;
  height: 14px;
  transition: transform var(--stk-t-fast) var(--stk-ease);
}

.stk-card--resource:hover .stk-card--resource__cta svg {
  transform: translateX(4px);
}


/* ==========================================================================
   PATTERN - DISCOVERY FORM SECTION (final conversion ask)
   --------------------------------------------------------------------------
   Wraps the Round 3d multi-step form (.stk-form-flow + HubSpot overrides)
   in a homepage-friendly framing section. Section-head above, form below,
   narrow container so the form doesn't sprawl.

   Composition rule (Tier 4): employer-conversion templates close with
   THIS section. Content-discovery templates close with .stk-final-cta
   (dark navy strip with buttons-only) instead.
   ========================================================================== */

.stk-form-close {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: start;
}

.stk-form-close__intro {
  position: sticky;
  top: 100px;
}

.stk-form-close__intro .stk-section-head {
  text-align: left;
  margin: 0 0 28px;
}

.stk-form-close__contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--stk-surface-1);
  border: 1px solid var(--stk-border);
  border-radius: var(--stk-r-card);
}

.stk-form-close__contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--stk-ink-2);
}

.stk-form-close__contact-row svg {
  width: 18px;
  height: 18px;
  color: var(--stk-blue);
  flex-shrink: 0;
}

.stk-form-close__contact-row a {
  color: var(--stk-ink-2);
  text-decoration: none;
  font-weight: 600;
}

.stk-form-close__contact-row a:hover {
  color: var(--stk-blue);
}

.stk-form-close__contact-divider {
  height: 1px;
  background: var(--stk-border);
}

.stk-form-close__contact-label {
  font-family: var(--stk-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stk-muted);
  margin: 0;
}

.stk-form-close__form-wrap {
  background: var(--stk-white);
  border: 1px solid var(--stk-border);
  border-radius: var(--stk-r-card);
  padding: 32px;
  box-shadow: 0 8px 24px -8px rgba(15, 23, 42, .08);
}


/* ==========================================================================
   RESPONSIVE - rev2 patterns
   ========================================================================== */

@media (max-width: 1100px) {
  .stk-industries {
    grid-template-columns: repeat(2, 1fr);
  }
  .stk-hire-by-role__roles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 960px) {
  .stk-resources-grid {
    grid-template-columns: 1fr;
  }
  .stk-form-close {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .stk-form-close__intro {
    position: static;
  }
}

@media (max-width: 720px) {
  .stk-logos {
    gap: 24px 36px;
  }
  .stk-logos__item {
    height: 28px;
  }
  .stk-hire-by-role__tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
  .stk-hire-by-role__tab {
    white-space: nowrap;
    padding: 12px 16px;
    font-size: 13px;
  }
  .stk-hire-by-role__roles {
    grid-template-columns: 1fr;
  }
  .stk-industries {
    grid-template-columns: 1fr;
  }
  .stk-form-close__form-wrap {
    padding: 24px 20px;
  }
}