/* =============================================================================
 * Prelect — COMPONENTS
 * =============================================================================
 * Component-oriented selectors (rules.txt section 27):
 *   .card            block
 *   .card__title     element
 *   .card--featured  modifier
 *
 * Every value comes from a token. No literal colours, no magic numbers.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. BUTTONS
 * -------------------------------------------------------------------------- */

.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);

  /* Touch target. WCAG 2.5.8 requires at least 24x24 CSS px; 44px is the
	 * comfortable size for a primary action (section 10). */
  min-height: 44px;
  padding: 0.6875rem 1.125rem;

  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;

  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background-size: 200% 200%;
  background-position: 0% 50%;
  z-index: 0;

  transition:
    background-color 180ms ease,
    background-position 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    filter 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

/* Fill-from-centre reveal on hover (all sides). */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(
    --btn-fill-gradient,
    linear-gradient(
      135deg,
      var(--color-accent) 0%,
      color-mix(in srgb, var(--color-accent) 70%, #fff) 45%,
      var(--color-accent) 100%
    )
  );
  background-color: var(--color-accent);
  transform: scale(0);
  opacity: 0.92;
  transition:
    transform var(--dur-normal) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
  pointer-events: none;
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: scale(1);
}

/* Only transforms/opacity animate on hover, so this stays on the compositor. */
.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

/* A disabled button must be visibly and semantically disabled — not just faded
 * (section 14: colour alone does not communicate state). */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn:disabled::before,
.btn[aria-disabled="true"]::before {
  display: none;
}

.btn--primary {
  --btn-fill-gradient: linear-gradient(
    135deg,
    var(--color-gold-dark, var(--color-accent)) 0%,
    var(--color-accent) 55%,
    var(--color-gold-light, var(--color-accent)) 100%
  );
  background-image: none;
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  border-color: transparent;
  box-shadow: var(--shadow-xs);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-gold-dark, var(--color-accent));
  filter: none;
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn--secondary {
  --btn-fill-gradient: linear-gradient(
    135deg,
    var(--color-primary-light, var(--color-primary)) 0%,
    var(--color-primary) 100%
  );
  background-image: none;
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
  border-color: transparent;
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background-color: var(--color-primary-light, var(--color-primary));
  color: var(--color-primary-contrast);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn--outline {
  --btn-fill-gradient: var(--gradient-accent);
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent-contrast);
  background-color: transparent;
  box-shadow: var(--shadow-sm);
}

/* On a dark or gradient band the outline button needs a light border. */
.section--inverse .btn--outline,
.section--gradient .btn--outline {
  color: #fff;
  border-color: rgb(255 255 255 / 0.4);
}

.section--inverse .btn--outline:hover,
.section--gradient .btn--outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

.btn--ghost {
  --btn-fill-gradient: linear-gradient(
    135deg,
    var(--color-gold-dark, var(--color-accent)) 0%,
    var(--color-accent) 55%,
    var(--color-gold-light, var(--color-accent)) 100%
  );
  background-color: transparent;
  color: var(--color-accent);
  padding-inline: var(--space-2xs);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  color: var(--color-accent-contrast);
  background-color: transparent;
}

.btn--gradient {
  --btn-fill-gradient: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-accent) 65%, #fff) 0%,
    var(--color-accent) 100%
  );
  background-image: var(--gradient-accent);
  color: var(--color-accent-contrast);
  border-color: transparent;
}

.btn--sm {
  min-height: 36px;
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--step--1);
}

.btn--lg {
  min-height: 52px;
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--step-1);
}

.btn--block {
  width: 100%;
}

/* An icon inside a button should not be squeezed. */
.btn svg {
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
 * 2. CARDS
 * -------------------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;

  background-color: var(--color-surface-raised, #ffffff);
  border: 1px solid var(--color-border-light, var(--color-border));
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);

  /* `overflow: hidden` keeps a rounded corner from being broken by a child
	 * image. Safe here because nothing inside needs to escape the card. */
  overflow: hidden;

  transition:
    box-shadow 180ms ease,
    transform 180ms ease,
    border-color 180ms ease;
}

/* Hover lift applies on hover AND focus-within, so keyboard users get the same
 * affordance as mouse users (section 10, 13). */
.card:hover,
.card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border);
}

.card__media {
  /* Fixed aspect ratio prevents layout shift while the image loads, which is
	 * the usual cause of a bad CLS score. */
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--color-surface);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition: transform var(--dur-slow) var(--ease-out);
}

.card:hover .card__media img {
  transform: scale(1.04);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-5, 1.25rem) var(--space-md); /* 20–24px */
  flex-grow: 1;
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: var(--leading-snug);
}

/* Make the whole card clickable via the title link, without wrapping everything
 * in an <a> (which breaks text selection and creates an unwieldy link label).
 * The pseudo-element extends the hit area to the card's padding box. */
.card__title a {
  color: inherit;
  text-decoration: none;
}

.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
}

.card {
  position: relative;
}

.card__title a:focus-visible {
  outline: none;
}

.card:has(.card__title a:focus-visible) {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: 2px;
}

.card__text {
  font-size: var(--step--1);
  color: var(--color-muted);
  line-height: var(--leading-normal);
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;

  font-size: var(--step--2);
  color: var(--color-muted);
}

.card__footer {
  margin-block-start: auto; /* Push to the bottom so card footers align. */
  padding: 0 var(--space-md) var(--space-md);
}

/* A card with no image still needs consistent padding. */
.card--no-media .card__body {
  padding-block-start: var(--space-lg);
}

/* -----------------------------------------------------------------------------
 * 3. BADGES AND TAGS
 * -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);

  padding: 0.25em 0.7em;
  font-size: var(--step--2);
  font-weight: 600;
  line-height: 1.6;

  /* Logical properties so RTL works without a second stylesheet (section 81). */
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  color: var(--color-muted);
  border: var(--border-width) solid var(--color-border);
}

.badge--accent {
  background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.badge--success {
  background-color: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}

.badge--danger {
  background-color: color-mix(in srgb, var(--color-danger) 12%, transparent);
  color: var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
}

/* -----------------------------------------------------------------------------
 * 4. STATS
 * -------------------------------------------------------------------------- */

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 600;
  line-height: var(--leading-none);
  letter-spacing: -0.02em;

  /* Tabular figures stop a counting number from jittering as digits change
	 * width during the count-up animation. */
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: var(--step--1);
  color: var(--color-muted);
}

.section--inverse .stat__label,
.section--gradient .stat__label {
  color: inherit;
  opacity: 0.85;
}

/* -----------------------------------------------------------------------------
 * 5. REVEAL ANIMATION
 * -----------------------------------------------------------------------------
 * CRITICAL: content is VISIBLE by default. The hidden state applies only once
 * JavaScript has confirmed it is running (`.has-agency-motion` on <html>).
 *
 * Reversing this — hiding in CSS and revealing in JS — means a script failure
 * leaves the page permanently blank. That is the classic reveal-animation bug
 * and it is a content-availability failure (rules.txt section 40).
 * -------------------------------------------------------------------------- */

.has-agency-motion [data-agency-reveal] {
  /* Section shell stays visible — Recrute motion is on children, not the band. */
  opacity: 1;
  transform: none;
}

.has-agency-motion [data-agency-reveal="left"],
.has-agency-motion [data-agency-reveal="right"],
.has-agency-motion [data-agency-reveal="top"],
.has-agency-motion [data-agency-reveal="bottom"],
.has-agency-motion [data-agency-reveal="zoom"],
.has-agency-motion [data-agency-reveal="mask"],
.has-agency-motion [data-agency-reveal="1"] {
  opacity: 1;
  transform: none;
  clip-path: none;
}

.has-agency-motion [data-agency-reveal="mask"] {
  clip-path: none;
}

/*
 * Recrute-style cascade: headings, copy, cards, media arrive from alternating
 * directions when the section enters the viewport.
 */
.has-agency-motion [data-agency-reveal] .agency-head,
.has-agency-motion [data-agency-reveal] .agency-head__title,
.has-agency-motion [data-agency-reveal] .agency-head__lead,
.has-agency-motion [data-agency-reveal] .agency-card,
.has-agency-motion [data-agency-reveal] .agency-stat,
.has-agency-motion [data-agency-reveal] .agency-feature,
.has-agency-motion [data-agency-reveal] .agency-process__step,
.has-agency-motion [data-agency-reveal] .agency-logos:not(.agency-logos--marquee) .agency-logos__item,
.has-agency-motion [data-agency-reveal] .agency-showcase__card,
.has-agency-motion [data-agency-reveal] .agency-showcase__controls,
.has-agency-motion [data-agency-reveal] .agency-btns,
.has-agency-motion [data-agency-reveal] .agency-chapter,
.has-agency-motion [data-agency-reveal] .agency-faq__item,
.has-agency-motion [data-agency-reveal] .agency-testimonial-collage > *,
.has-agency-motion [data-agency-reveal] .agency-testimonial-pair > .is-active,
.has-agency-motion [data-agency-reveal] .agency-cta .agency-head,
.has-agency-motion [data-agency-reveal] .agency-process__media img,
.has-agency-motion [data-agency-reveal] .agency-impact-mosaic__cell {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition:
    opacity 1400ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1400ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.has-agency-motion [data-agency-reveal] .agency-head__title,
.has-agency-motion [data-agency-reveal] .agency-card:nth-child(odd),
.has-agency-motion [data-agency-reveal] .agency-feature:nth-child(odd),
.has-agency-motion [data-agency-reveal] .agency-process__step:nth-child(odd),
.has-agency-motion [data-agency-reveal] .agency-chapter:nth-child(odd),
.has-agency-motion [data-agency-reveal] .agency-showcase__copy {
  transform: translate3d(-48px, 20px, 0);
}

.has-agency-motion [data-agency-reveal] .agency-head__lead,
.has-agency-motion [data-agency-reveal] .agency-card:nth-child(even),
.has-agency-motion [data-agency-reveal] .agency-feature:nth-child(even),
.has-agency-motion [data-agency-reveal] .agency-process__step:nth-child(even),
.has-agency-motion [data-agency-reveal] .agency-chapter:nth-child(even),
.has-agency-motion [data-agency-reveal] .agency-showcase__media,
.has-agency-motion [data-agency-reveal] .agency-showcase__video {
  transform: translate3d(36px, 16px, 0);
}

/*
 * Centered CTAs must not side-drift the title/lead — that leaves buttons
 * optically off-center from the copy (We’re hiring, Ready to partner, etc.).
 */
.has-agency-motion [data-agency-reveal] .agency-cta--center .agency-head,
.has-agency-motion [data-agency-reveal] .agency-cta--center .agency-head__title,
.has-agency-motion [data-agency-reveal] .agency-cta--center .agency-head__lead,
.has-agency-motion [data-agency-reveal] .agency-cta--center .agency-btns {
  transform: translate3d(0, 32px, 0);
}

.has-agency-motion [data-agency-reveal].is-revealed .agency-cta--center .agency-head,
.has-agency-motion [data-agency-reveal].is-revealed .agency-cta--center .agency-head__title,
.has-agency-motion [data-agency-reveal].is-revealed .agency-cta--center .agency-head__lead,
.has-agency-motion [data-agency-reveal].is-revealed .agency-cta--center .agency-btns {
  opacity: 1;
  transform: none;
}

.has-agency-motion [data-agency-reveal].is-revealed .agency-head,
.has-agency-motion [data-agency-reveal].is-revealed .agency-head__title,
.has-agency-motion [data-agency-reveal].is-revealed .agency-head__lead,
.has-agency-motion [data-agency-reveal].is-revealed .agency-card,
.has-agency-motion [data-agency-reveal].is-revealed .agency-stat,
.has-agency-motion [data-agency-reveal].is-revealed .agency-feature,
.has-agency-motion [data-agency-reveal].is-revealed .agency-process__step,
.has-agency-motion [data-agency-reveal].is-revealed .agency-logos:not(.agency-logos--marquee) .agency-logos__item,
.has-agency-motion [data-agency-reveal].is-revealed .agency-showcase__card,
.has-agency-motion [data-agency-reveal].is-revealed .agency-showcase__controls,
.has-agency-motion [data-agency-reveal].is-revealed .agency-showcase__copy,
.has-agency-motion [data-agency-reveal].is-revealed .agency-showcase__media,
.has-agency-motion [data-agency-reveal].is-revealed .agency-showcase__video,
.has-agency-motion [data-agency-reveal].is-revealed .agency-btns,
.has-agency-motion [data-agency-reveal].is-revealed .agency-chapter,
.has-agency-motion [data-agency-reveal].is-revealed .agency-faq__item,
.has-agency-motion [data-agency-reveal].is-revealed .agency-testimonial-collage > *,
.has-agency-motion [data-agency-reveal].is-revealed .agency-testimonial-pair > .is-active,
.has-agency-motion [data-agency-reveal].is-revealed .agency-process__media img,
.has-agency-motion [data-agency-reveal].is-revealed .agency-impact-mosaic__cell {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Stagger delays. */
.has-agency-motion [data-agency-reveal].is-revealed .agency-head__title { transition-delay: 60ms; }
.has-agency-motion [data-agency-reveal].is-revealed .agency-head__lead { transition-delay: 200ms; }
.has-agency-motion [data-agency-reveal].is-revealed .agency-btns { transition-delay: 320ms; }

.has-agency-motion [data-agency-reveal].is-revealed .agency-logos:not(.agency-logos--marquee) .agency-logos__item:nth-child(1),
.has-agency-motion [data-agency-reveal].is-revealed .agency-feature:nth-child(1),
.has-agency-motion [data-agency-reveal].is-revealed .agency-process__step:nth-child(1),
.has-agency-motion [data-agency-reveal].is-revealed .agency-chapter:nth-child(1),
.has-agency-motion [data-agency-reveal].is-revealed .agency-faq__item:nth-child(1),
.has-agency-motion [data-agency-reveal].is-revealed .agency-card:nth-child(1),
.has-agency-motion [data-agency-reveal].is-revealed .agency-stat:nth-child(1) {
  transition-delay: 100ms;
}

.has-agency-motion [data-agency-reveal].is-revealed .agency-logos:not(.agency-logos--marquee) .agency-logos__item:nth-child(2),
.has-agency-motion [data-agency-reveal].is-revealed .agency-feature:nth-child(2),
.has-agency-motion [data-agency-reveal].is-revealed .agency-process__step:nth-child(2),
.has-agency-motion [data-agency-reveal].is-revealed .agency-chapter:nth-child(2),
.has-agency-motion [data-agency-reveal].is-revealed .agency-faq__item:nth-child(2),
.has-agency-motion [data-agency-reveal].is-revealed .agency-card:nth-child(2),
.has-agency-motion [data-agency-reveal].is-revealed .agency-stat:nth-child(2) {
  transition-delay: 240ms;
}

.has-agency-motion [data-agency-reveal].is-revealed .agency-logos:not(.agency-logos--marquee) .agency-logos__item:nth-child(3),
.has-agency-motion [data-agency-reveal].is-revealed .agency-feature:nth-child(3),
.has-agency-motion [data-agency-reveal].is-revealed .agency-process__step:nth-child(3),
.has-agency-motion [data-agency-reveal].is-revealed .agency-chapter:nth-child(3),
.has-agency-motion [data-agency-reveal].is-revealed .agency-faq__item:nth-child(3),
.has-agency-motion [data-agency-reveal].is-revealed .agency-card:nth-child(3),
.has-agency-motion [data-agency-reveal].is-revealed .agency-stat:nth-child(3) {
  transition-delay: 380ms;
}

.has-agency-motion [data-agency-reveal].is-revealed .agency-logos:not(.agency-logos--marquee) .agency-logos__item:nth-child(4),
.has-agency-motion [data-agency-reveal].is-revealed .agency-feature:nth-child(4),
.has-agency-motion [data-agency-reveal].is-revealed .agency-process__step:nth-child(4),
.has-agency-motion [data-agency-reveal].is-revealed .agency-chapter:nth-child(4),
.has-agency-motion [data-agency-reveal].is-revealed .agency-faq__item:nth-child(4),
.has-agency-motion [data-agency-reveal].is-revealed .agency-card:nth-child(4),
.has-agency-motion [data-agency-reveal].is-revealed .agency-stat:nth-child(4) {
  transition-delay: 520ms;
}

.has-agency-motion [data-agency-reveal].is-revealed .agency-logos:not(.agency-logos--marquee) .agency-logos__item:nth-child(n + 5),
.has-agency-motion [data-agency-reveal].is-revealed .agency-feature:nth-child(n + 5),
.has-agency-motion [data-agency-reveal].is-revealed .agency-process__step:nth-child(n + 5) {
  transition-delay: 640ms;
}

@media (prefers-reduced-motion: reduce) {
  .has-agency-motion [data-agency-reveal] .agency-head,
  .has-agency-motion [data-agency-reveal] .agency-head__title,
  .has-agency-motion [data-agency-reveal] .agency-head__lead,
  .has-agency-motion [data-agency-reveal] .agency-card,
  .has-agency-motion [data-agency-reveal] .agency-stat,
  .has-agency-motion [data-agency-reveal] .agency-feature,
  .has-agency-motion [data-agency-reveal] .agency-process__step,
  .has-agency-motion [data-agency-reveal] .agency-logos:not(.agency-logos--marquee) .agency-logos__item,
  .has-agency-motion [data-agency-reveal] .agency-showcase__card,
  .has-agency-motion [data-agency-reveal] .agency-showcase__controls,
  .has-agency-motion [data-agency-reveal] .agency-btns,
  .has-agency-motion [data-agency-reveal] .agency-chapter,
  .has-agency-motion [data-agency-reveal] .agency-faq__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media print {
  .has-agency-motion [data-agency-reveal] .agency-head,
  .has-agency-motion [data-agency-reveal] .agency-card,
  .has-agency-motion [data-agency-reveal] .agency-stat,
  .has-agency-motion [data-agency-reveal] .agency-feature,
  .has-agency-motion [data-agency-reveal] .agency-process__step,
  .has-agency-motion [data-agency-reveal] .agency-logos:not(.agency-logos--marquee) .agency-logos__item,
  .has-agency-motion [data-agency-reveal] .agency-showcase__card,
  .has-agency-motion [data-agency-reveal] .agency-chapter {
    opacity: 1;
    transform: none;
  }
}

/* -----------------------------------------------------------------------------
 * 6. PARALLAX
 * -------------------------------------------------------------------------- */

[data-agency-parallax] {
  will-change: transform;
}

/* Parallax is never applied on narrow viewports: the movement is barely visible
 * and it competes with the scroll gesture on touch. */
@media (max-width: 767px) {
  [data-agency-parallax] {
    transform: none !important;
    will-change: auto;
  }
}

/* -----------------------------------------------------------------------------
 * 7. MARQUEE
 * -----------------------------------------------------------------------------
 * Pure CSS. No JavaScript, no layout cost — the track is duplicated in markup
 * (with aria-hidden on the duplicate) and translated with a keyframe.
 * -------------------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  /* Fade the edges so items enter and leave rather than appearing cut off. */
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}

.marquee__track {
  display: flex;
  gap: var(--space-xl);
  width: max-content;

  animation: prelect-marquee 40s linear infinite;
}

/* Pause on hover and on focus, so a visitor can read an item (WCAG 2.2.2). */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

@keyframes prelect-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    /* -50% because the track is duplicated: shifting by half shows a seamless
		 * loop with no visible jump. */
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }

  /* Without the animation, a duplicated track would show the same items twice.
	 * Hide the copy so the list reads once. */
  .marquee__track [aria-hidden="true"] {
    display: none;
  }
}

/* -----------------------------------------------------------------------------
 * 8. CAROUSEL
 * -------------------------------------------------------------------------- */

.agency-carousel {
  position: relative;
}

.agency-carousel__viewport {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.agency-carousel__track {
  display: flex;

  transition: transform var(--dur-slow) var(--ease-out);

  /* Without this, a fast swipe can start a text selection instead of a drag. */
  user-select: none;
  -webkit-user-select: none;
}

.agency-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding-inline: var(--space-2xs);
}

.agency-carousel__controls {
  /* Korn Ferry pattern: arrow pair + progress rail, then dots. */
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-block-start: var(--space-md);
}

.agency-carousel__nav-pair {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  isolation: isolate;
}

.agency-carousel__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* 44px minimum touch target. */
  width: 2.75rem;
  height: 2.75rem;

  background-color: color-mix(in srgb, var(--color-primary-dark) 55%, transparent);
  border: 0;
  border-radius: 0;
  color: #ffffff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;

  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.agency-carousel__nav-pair .agency-carousel__button:first-child {
  border-inline-end: 1px solid rgb(255 255 255 / 0.18);
}

.agency-carousel__button:hover,
.agency-carousel__button:focus-visible {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

.agency-carousel__progress {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 1;
  display: block;
  height: 3px;
  background: color-mix(in srgb, var(--color-primary-dark) 55%, transparent);
  pointer-events: none;
}

.agency-carousel__progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  transition: width var(--dur-normal) var(--ease-out);
}

.agency-carousel__dots {
  display: flex;
  gap: var(--space-2xs);
}

.agency-carousel__dot {
  /* 24px hit area around a 10px visual dot: the target is comfortable without
	 * the dot looking oversized (§10). */
  width: 24px;
  height: 24px;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: none;
  border: none;
  cursor: pointer;
}

.agency-carousel__dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle);
  background-color: var(--color-border);
  transition: background-color var(--dur-fast) var(--ease-out);
}

/* Active state uses scale AND colour, so it is not communicated by colour alone
 * (section 14). */
.agency-carousel__dot.is-active::before {
  background-color: var(--color-accent);
  transform: scale(1.35);
}

/* -----------------------------------------------------------------------------
 * 9. FORMS
 * -------------------------------------------------------------------------- */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.form-field__label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--color-primary-light, var(--color-primary));
}

/* Required marker — gold accent sitewide (not danger red). */
.form-field__label .required,
.agency-form__field > label .required,
.agency-form label .required {
  color: var(--color-gold, var(--color-accent));
  font-weight: 600;
}

.form-field__input,
.form-field__textarea,
.form-field__select {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2xs) var(--space-xs);

  background-color: var(--color-bg);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--step-0);

  transition: border-color var(--dur-fast) var(--ease-out);
}

.form-field__textarea {
  min-height: 8rem;
  padding-block: var(--space-2xs);
}

.form-field__input:focus,
.form-field__textarea:focus,
.form-field__select:focus {
  border-color: var(--color-accent);
}

.form-field__hint {
  font-size: var(--step--2);
  color: var(--color-muted);
}

.form-field__error {
  display: block;
  margin: 0.4rem 0 0;
  padding: 0.5rem 0.75rem 0.5rem 0.85rem;
  border: 0;
  border-inline-start: 3px solid var(--color-gold, var(--color-accent));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in srgb, var(--color-primary-soft, #51c8cc) 12%, var(--color-surface-raised, #ffffff));
  color: var(--color-primary-dark, var(--color-primary));
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Invalid state uses a border AND an icon prefixed by CSS, so the error is not
 * signalled by colour alone. */
.form-field--invalid .form-field__input,
.form-field--invalid .form-field__textarea,
.form-field--invalid .form-field__select {
  border-color: var(--color-gold-dark, var(--color-gold, var(--color-accent)));
  border-width: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-gold, var(--color-accent)) 18%, transparent);
}

.form-field--invalid .form-field__label::after {
  content: " !";
  color: var(--color-gold, var(--color-accent));
}

.form-field--valid .form-field__input {
  border-color: var(--color-primary-mid, var(--color-success));
}

.form-field--valid .form-field__label::after {
  content: " ✓";
  color: var(--color-primary-mid, var(--color-success));
}

/* Honeypot: a field a human never sees and never fills. Screen readers must also
 * skip it, hence the ARIA attributes in the markup. */
.form-field--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* -----------------------------------------------------------------------------
 * 10. ALERTS
 * -------------------------------------------------------------------------- */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: var(--border-width) solid;
  font-size: var(--step--1);
}

/* Each variant carries a border and a text label — colour is never the only
 * signal (section 14). */
.alert--info {
  background-color: color-mix(in srgb, var(--color-accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  color: var(--color-text);
}

.alert--success {
  background-color: color-mix(in srgb, var(--color-success) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
}

.alert--warning {
  background-color: color-mix(in srgb, var(--color-warning) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
}

.alert--error {
  background-color: color-mix(in srgb, var(--color-danger) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
}

/* -----------------------------------------------------------------------------
 * 11. EMPTY AND LOADING STATES
 * -----------------------------------------------------------------------------
 * A blank region is never acceptable: every list needs an empty state with a
 * clear next action (rules.txt §41, §78).
 * -------------------------------------------------------------------------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);

  padding: var(--space-xl) var(--space-md);
  text-align: center;

  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-muted);
}

.empty-state__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--color-text);
}

.loader {
  display: inline-block;

  /* 1em so it scales with the surrounding text size. */
  width: 1em;
  height: 1em;

  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;

  animation: prelect-spin 700ms linear infinite;
}

@keyframes prelect-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader {
    animation-duration: 2s;
  }
}

/* -----------------------------------------------------------------------------
 * 12. THEME TOGGLE
 * -------------------------------------------------------------------------- */

.prelect-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Comfortable touch target. */
  width: 44px;
  height: 44px;

  color: var(--color-text);
  background-color: transparent;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-circle);
  cursor: pointer;

  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.prelect-mode-toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Show the icon for the theme you would switch TO, which is the more useful
 * affordance than showing the current state. */
.prelect-mode-toggle__icon--dark {
  display: none;
}

[data-theme="dark"] .prelect-mode-toggle__icon--light {
  display: none;
}

[data-theme="dark"] .prelect-mode-toggle__icon--dark {
  display: block;
}

/* -----------------------------------------------------------------------------
 * 13. NAVIGATION
 * -------------------------------------------------------------------------- */

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-xs);

  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--radius-sm);

  transition: color var(--dur-fast) var(--ease-out);
}

.site-nav__link::after {
  content: "";
  position: absolute;
  inset: auto 0 0.35em 0;
  block-size: 2px;
  background: var(--color-gold, var(--color-accent));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-normal) var(--ease-out);
}

.site-nav__link:hover {
  color: var(--color-accent);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Current page indicator — underline draw + weight, not colour alone (§14). */
.site-nav__link[aria-current="page"] {
  color: var(--color-accent);
  font-weight: 600;
}

/* Mobile drawer.
 *
 * A real <dialog>-like panel driven by a button. Hidden by default on mobile,
 * shown on desktop. The button is the only control, and it is a real <button>
 * with aria-expanded (section 9). */
/*
 * Menu toggle / CTAs — piano-key chrome lives under §14 `.site-header`.
 * Keep only a cursor baseline here so early rules never re-box the strip.
 */
.site-header__menu-toggle {
  cursor: pointer;
}

.site-header__cta {
  font-size: var(--step--1);
  text-decoration: none;
  cursor: pointer;
}

/* =============================================================================
 * MEGA DRAWER — McKinsey three-panel pattern, Prelect theme colours
 *
 * Left rail: navy primary destinations + chevrons
 * Middle: white overview + grouped headings with 1–2 line descriptions
 * Right: Get-in-touch form (form + brand panes stacked vertically)
 * ========================================================================== */

.site-header__menu-toggle {
  display: inline-flex;
}

.site-nav {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) + 2);

  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;

  background-color: transparent;
  color: var(--color-text);
  border: 0;
  box-shadow: none;

  transform: translate3d(-105%, 0, 0);
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;

  transition:
    transform var(--dur-normal) var(--ease-out),
    visibility var(--dur-normal);
}

.site-nav.is-open {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  pointer-events: auto;
}

.mega-drawer {
  display: grid;
  grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr);
  grid-template-rows: 1fr;
  height: 100%;
  width: 100%;
  background-color: var(--color-surface-raised);
  overflow: hidden;
}

@media (min-width: 64em) {
  .mega-drawer {
    grid-template-columns:
      minmax(16rem, 19rem)
      minmax(20rem, 1fr)
      minmax(22rem, 30rem);
  }
}

/* --- Left rail ----------------------------------------------------------- */

.mega-drawer__rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 0 var(--space-md);
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
  overflow: hidden;
}

.mega-drawer__rail .mega-drawer__primary {
  overflow: auto;
  min-height: 0;
  padding-inline: var(--space-sm);
}

.mega-drawer__rail-top {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-block: 0;
  padding-block: clamp(0.55rem, 1.6vw, 0.85rem);
  /* Right inset matches primary list so logo ends on the chevron line. */
  padding-inline: 0 var(--space-sm);
}

.mega-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Wider column so the gold divider sits nearer the logo (square cell). */
  flex: 0 0 4.75rem;
  align-self: stretch;
  width: 4.75rem;
  max-width: 4.75rem;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  border-inline-end: 1px solid var(--color-gold, var(--color-accent));
  background: transparent !important;
  color: #ffffff;
  box-shadow: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

.mega-drawer__close-x {
  display: block;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1.45rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
}

.mega-drawer__close:hover,
.mega-drawer__close:focus-visible {
  background: transparent !important;
  color: var(--color-gold, var(--color-accent));
  outline: none;
  transform: none;
  box-shadow: none;
  border-inline-end-color: var(--color-gold, var(--color-accent));
}

@media (min-width: 64em) {
  .mega-drawer__close {
    flex-basis: 5rem;
    width: 5rem;
    max-width: 5rem;
  }

  .mega-drawer__close-x {
    font-size: 1.6rem;
  }
}

.mega-drawer__brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  flex: 1 1 auto;
  margin-inline-end: 0;
  /* Match primary-btn end padding so logo trailing edge = chevron line. */
  padding-inline: 0.55rem 1rem;
  color: inherit;
  text-decoration: none;
}

.mega-drawer__logo {
  display: block;
  max-height: clamp(5.75rem, 18vw, 7.25rem);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: right center;
}

@media (min-width: 64em) {
  .mega-drawer__logo {
    max-height: 8rem;
  }
}

.mega-drawer__brand-text {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
}

.mega-drawer__primary {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  margin: 0;
  margin-block-start: clamp(0.35rem, 1.2vw, 0.55rem);
  padding: 0;
  flex: 1 1 auto;
}

.mega-drawer__primary-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  margin: 0;
  padding: 0.45rem 1rem 0.4rem;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  color: inherit;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.15rem);
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}

.mega-drawer__primary-label {
  position: relative;
  display: inline-block;
  padding-block-end: 0.45rem;
}

/* Korn Ferry–style fat gold underline — text-width, like footer links. */
.mega-drawer__primary-label::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 5px;
  background: var(--color-gold, var(--color-accent));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-normal) var(--ease-out);
  pointer-events: none;
}

.mega-drawer__primary-btn:hover,
.mega-drawer__primary-btn:focus-visible {
  color: #ffffff;
  background-color: transparent !important;
  background-image: none;
  outline: none;
}

.mega-drawer__primary-btn:hover .mega-drawer__primary-label::after,
.mega-drawer__primary-btn:focus-visible .mega-drawer__primary-label::after,
.mega-drawer__primary-btn.is-active .mega-drawer__primary-label::after {
  transform: scaleX(1);
}

.mega-drawer__primary-btn.is-active {
  color: #ffffff;
  background-color: transparent !important;
  background-image: none;
  box-shadow: none;
}

.mega-drawer__chevron {
  flex: 0 0 auto;
  font-size: 1.35rem;
  line-height: 1;
  opacity: 0.9;
}

.mega-drawer__rail-foot {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-block-start: auto;
  padding-block-start: var(--space-md);
  padding-inline: var(--space-sm);
  border-block-start: 1px solid color-mix(in srgb, #fff 14%, transparent);
}

/* Beat global `a:hover { color: var(--color-text) }` which hides links on navy. */
.mega-drawer__utility,
.mega-drawer a.mega-drawer__utility,
.mega-drawer__utility:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #ffffff;
  font-size: var(--step--1);
  text-decoration: none;
  opacity: 0.9;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.mega-drawer__utility:hover,
.mega-drawer__utility:focus-visible,
.mega-drawer a.mega-drawer__utility:hover,
.mega-drawer a.mega-drawer__utility:focus-visible {
  color: #ffffff;
  opacity: 1;
  outline: none;
}

.mega-drawer__utility:hover .mega-drawer__utility-icon,
.mega-drawer__utility:focus-visible .mega-drawer__utility-icon {
  color: #ffffff;
}

.mega-drawer__utility-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  color: #ffffff;
}

.mega-drawer__utility-icon .prelect-icon,
.mega-drawer__utility-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Stroke icons (email): never fill solid — that reads as a blank white square. */
.mega-drawer__utility-icon .prelect-icon--email svg {
  fill: none;
  stroke: currentColor;
}

.mega-drawer__utility-icon .prelect-icon--linkedin svg {
  fill: currentColor;
  stroke: none;
}

/* --- Middle white panel -------------------------------------------------- */

.mega-drawer__middle {
  position: relative;
  min-width: 0;
  min-height: 0;
  background-color: var(--color-surface-raised);
  overflow: auto;
}

.mega-drawer__panel {
  padding: clamp(0.85rem, 1.2vw, 1.5rem) clamp(1.25rem, 3vw, 2.5rem)
    clamp(2rem, 4vw, 3rem);
}

.mega-drawer__panel[hidden] {
  display: none;
}

.mega-drawer__overview {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: calc(var(--space-lg) * 0.8);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-primary-mid, var(--color-primary));
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  font-weight: 600;
  line-height: var(--leading-snug);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.mega-drawer__overview-text {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.28em;
}

.mega-drawer__overview-page {
  color: var(--color-primary-mid, var(--color-primary));
  font-size: 1em;
}

.mega-drawer__overview-word {
  color: var(--color-gold, var(--color-accent));
  font-size: 0.68em;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.mega-drawer__overview:hover .mega-drawer__overview-page,
.mega-drawer__overview:focus-visible .mega-drawer__overview-page {
  color: var(--color-primary);
}

.mega-drawer__overview:hover .mega-drawer__overview-word,
.mega-drawer__overview:focus-visible .mega-drawer__overview-word {
  color: var(--color-gold, var(--color-accent));
}

.mega-drawer__overview:hover,
.mega-drawer__overview:focus-visible {
  background: none;
  outline: none;
}

.mega-drawer__overview-arrow {
  color: var(--color-gold, var(--color-accent));
  font-size: 1.15em;
  line-height: 1;
}

.mega-drawer__groups {
  display: grid;
  gap: calc(var(--space-xl) * 0.75) calc(var(--space-lg) * 0.5);
  grid-template-columns: 1fr;
}

@media (min-width: 48em) {
  .mega-drawer__groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 80em) {
  .mega-drawer__groups {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }
}

/*
 * Drawer group kickers (LEGAL, WHO WE ARE, …) — same gold-rail standout
 * as section eyebrows sitewide.
 */
.mega-drawer__group-heading {
  display: inline-block;
  margin: 0 0 calc(var(--space-sm) * 0.9);
  padding: 0.3rem 0.1rem 0.4rem;
  border-block-end: 3px solid var(--color-gold, var(--color-accent));
  color: var(--color-primary-mid, var(--color-primary));
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mega-drawer__links {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-md) * 0.8);
  margin: 0;
  padding: 0;
}

.mega-drawer__link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}

.mega-drawer__link:hover .mega-drawer__link-title,
.mega-drawer__link:focus-visible .mega-drawer__link-title {
  color: var(--color-accent);
}

.mega-drawer__link:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: 4px;
}

.mega-drawer__link-title {
  color: var(--color-primary);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: var(--leading-snug);
  transition: color var(--dur-fast) var(--ease-out);
}

.mega-drawer__link-desc {
  max-width: 36ch;
  color: var(--color-muted);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
}

.mega-drawer__back {
  display: none;
}

/* --- Right: Hire with Us / Join Our Team / Ask Us (brand + form) --------- */

.mega-drawer__touch {
  display: none;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: clamp(1rem, 1.5vw, 1.35rem) clamp(0.9rem, 1.5vw, 1.35rem);
  background-color: var(--color-surface);
  overflow: hidden;
  border-inline-start: var(--border-width) solid var(--color-border);
}

@media (min-width: 64em) {
  .mega-drawer__touch {
    display: flex;
  }
}

.mega-drawer__touch-eyebrow {
  margin: 0 0 0.6rem;
  color: color-mix(in srgb, var(--color-primary) 72%, var(--color-text));
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mega-drawer__touch-stack {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/*
 * Brand / typewriter pane must not shrink under taller hire/join forms —
 * that was cropping the welcome copy. Form pane scrolls instead.
 */
.mega-drawer__touch-brand-pane {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 0 0 auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  padding: 0.9rem 0.95rem calc(0.45rem + 2.5px);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(
      148deg,
      color-mix(in srgb, var(--color-primary) 92%, #061510) 0%,
      color-mix(in srgb, var(--color-accent) 55%, var(--color-primary)) 48%,
      color-mix(in srgb, var(--color-primary) 78%, #0a1a16) 100%
    );
  color: #ffffff;
  border: var(--border-width) solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12);
}

.mega-drawer__pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  align-items: end;
}

.mega-drawer__pillar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.2rem 0.15rem;
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.18);
  min-height: 0;
  box-shadow: none;
}

.mega-drawer__pillar-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 2.65rem;
  height: auto;
  object-fit: contain;
  filter: brightness(1.08) contrast(1.05) drop-shadow(0 1px 2px rgb(0 0 0 / 0.28));
}

.mega-drawer__welcome {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
}

.mega-drawer__welcome-icon {
  display: none;
}

.mega-drawer__welcome-text {
  margin: 0;
  min-height: 0;
  width: 100%;
  padding-block-end: 2.5px;
  font-size: 0.86rem;
  line-height: 1.5;
  font-weight: 550;
  color: rgb(255 255 255 / 0.94);
  overflow-wrap: anywhere;
}

.mega-drawer__welcome-text.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 1em;
  margin-inline-start: 0.1em;
  vertical-align: -0.12em;
  background: currentColor;
  animation: prelect-drawer-caret 0.9s steps(1) infinite;
}

@keyframes prelect-drawer-caret {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mega-drawer__welcome-text.is-typing::after {
    animation: none;
  }
}

.mega-drawer__touch-email {
  display: none;
}

.mega-drawer__touch-form-pane {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: 1.15rem 1.15rem 1.4rem;
  background-color: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow-x: hidden;
  overflow-y: auto;
}

.mega-drawer__touch-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  gap: 0.15rem;
}

/* `display:flex` above must not defeat the HTML hidden attribute. */
.mega-drawer__touch-form[hidden] {
  display: none;
}

.mega-drawer__touch-headline {
  margin: 0 0 1.2rem;
  width: 100%;
  max-width: none;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.92rem + 0.35vw, 1.2rem);
  font-weight: 600;
  line-height: 1.3;
  text-align: start;
  text-wrap: pretty;
  overflow-wrap: normal;
  hyphens: none;
}

.mega-drawer__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 0.85rem;
  row-gap: 1rem;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  align-content: start;
}

.mega-drawer__form .agency-form__field {
  margin: 0;
  margin-block-start: 0.35rem;
  min-width: 0;
}

.mega-drawer__form .agency-form__field--full,
.mega-drawer__form .agency-form__field:has(textarea),
.mega-drawer__form .mega-drawer__touch-actions,
.mega-drawer__form .mega-drawer__touch-note,
.mega-drawer__form .mega-drawer__touch-consent,
.mega-drawer__form .agency-form__hp {
  grid-column: 1 / -1;
}

.mega-drawer__touch-note {
  margin: 0;
  font-size: var(--step--1);
  color: var(--color-muted);
  line-height: 1.45;
}

.mega-drawer__touch-note a {
  color: var(--color-primary);
}

.mega-drawer__touch-consent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.65rem;
  margin: 0.15rem 0 0;
  font-size: var(--step--1);
  color: var(--color-muted);
  line-height: 1.4;
}

.mega-drawer__touch-consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--color-accent);
}

.mega-drawer__touch-consent > span {
  flex: 1 1 auto;
  min-width: 0;
}

.mega-drawer__touch-consent a {
  color: var(--color-primary);
}

.mega-drawer__form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.mega-drawer__form textarea,
.mega-drawer__form select {
  width: 100%;
  max-width: 100%;
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  font-size: 0.85rem;
}

.mega-drawer__form .agency-form__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mega-drawer__touch-actions {
  margin: 0.55rem 0 0;
  padding-block-end: 0.2rem;
}

.mega-drawer__touch-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.35rem;
  padding: 0.45rem 0.95rem;
  border: 0;
  border-radius: var(--radius-pill);
  background-image: var(--gradient-accent);
  color: var(--color-accent-contrast);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.mega-drawer__touch-submit:hover,
.mega-drawer__touch-submit:focus-visible {
  filter: brightness(1.05);
  outline: none;
}

/* Mobile / tablet: rail first; mid slides over when a section is chosen. */
@media (max-width: 63.99em) {
  /* Half-screen drawer — page stays visible on the right. */
  .site-nav {
    inset: 0 auto 0 0;
    width: 50%;
    max-width: 50vw;
    box-shadow: 12px 0 32px rgb(0 0 0 / 0.28);
  }

  /* 2nd overview panel: expand to full screen while mid is open. */
  .site-nav:has(.mega-drawer.has-mid-open) {
    inset: 0;
    width: 100%;
    max-width: none;
    box-shadow: none;
  }

  .mega-drawer {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
  }

  .mega-drawer__middle {
    position: absolute;
    inset: 0;
    z-index: 2;
    transform: translate3d(100%, 0, 0);
    transition: transform var(--dur-normal) var(--ease-out);
    box-shadow: -12px 0 32px rgb(0 0 0 / 0.12);
  }

  .mega-drawer.has-mid-open .mega-drawer__middle {
    transform: translate3d(0, 0, 0);
  }

  .mega-drawer__back {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    margin: 0 0 var(--space-md);
    padding: 0.45rem 0.15rem;
    border: 0;
    background: transparent;
    color: var(--color-primary-mid, var(--color-primary));
    font-size: 1.55rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    min-height: 2.75rem;
    min-width: 2.75rem;
  }

  .mega-drawer__back-arrow {
    display: block;
    font-size: 1.65rem;
    line-height: 1;
    transform: translateY(-0.05em);
  }

  .mega-drawer__back:hover,
  .mega-drawer__back:focus-visible {
    color: var(--color-accent);
    outline: none;
  }

  /*
   * Mobile drawer chrome — match screenshot: compact X column, gold rule,
   * large lockup immediately to the right, clear gap before menu items.
   */
  .mega-drawer__rail-top {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    padding-block: clamp(0.7rem, 2.2vw, 1rem) clamp(0.55rem, 1.8vw, 0.85rem);
    padding-inline: 0 clamp(0.85rem, 3vw, 1.25rem);
    margin-block-end: 0;
  }

  .mega-drawer__close {
    flex: 0 0 3.35rem;
    width: 3.35rem;
    max-width: 3.35rem;
    min-height: 4.75rem;
    align-self: stretch;
  }

  .mega-drawer__close-x {
    font-size: 1.7rem;
    font-weight: 300;
    line-height: 1;
  }

  .mega-drawer__brand {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    padding-inline: 0.85rem 0.35rem;
  }

  .mega-drawer__logo {
    display: block;
    height: auto;
    max-height: clamp(4.75rem, 17vw, 6.75rem);
    width: auto;
    max-width: min(100%, 17.5rem);
    object-fit: contain;
    object-position: left center;
  }

  .mega-drawer__primary {
    margin-block-start: clamp(1.35rem, 4.5vw, 2rem);
    padding-inline: var(--space-sm);
  }

  .mega-drawer__primary-btn {
    padding-inline: 0.15rem 0.35rem;
  }

  .mega-drawer__primary-label {
    padding-inline-start: 0.15rem;
  }
}

@media (min-width: 64em) {
  .mega-drawer__back {
    display: none;
  }
}

/* Header CTAs — piano-key chrome in §14 owns layout; keep transitions only. */
.site-header__cta {
  transition:
    color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

/* -----------------------------------------------------------------------------
 * Agency forms — pill labels on the field border; clear placeholder + value text.
 * Applies sitewide: contact page, join form, dock popup, mega-drawer.
 * -------------------------------------------------------------------------- */

.agency-form {
  display: grid;
  gap: var(--space-sm); /* 16px */
  min-width: 0;
}

/* Drawer forms: keep 2-col layout after the sitewide `.agency-form` grid reset. */
.mega-drawer__form.agency-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem 0.85rem;
  align-content: start;
}

.mega-drawer__form.agency-form .agency-form__field > label {
  white-space: normal;
  line-height: 1.25;
  max-width: calc(100% - 0.9rem);
}

.agency-form__field {
  position: relative;
  display: block;
  margin: 0;
  min-width: 0;
  /* Room for the pill sitting on the top border. */
  margin-block-start: 0.55rem;
}

.agency-form__field > label {
  position: absolute;
  z-index: 2;
  inset-inline-start: 0.7rem;
  inset-block-start: 0;
  transform: translateY(-50%);
  max-width: calc(100% - 1.6rem);
  margin: 0;
  padding: 0.2rem 0.65rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-primary-light, var(--color-primary)) 35%, var(--color-border));
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised, #ffffff);
  color: var(--color-primary-light, var(--color-primary));
  font-size: 0.8125rem; /* 13px */
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  box-shadow: none;
  transition:
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.agency-form__field:focus-within > label,
.agency-form__field.is-filled > label {
  /* Keep chip light so label text never disappears into a solid green fill. */
  color: var(--color-primary-dark, var(--color-primary));
  -webkit-text-fill-color: var(--color-primary-dark, var(--color-primary));
  border-color: var(--color-gold, var(--color-accent));
  background-image: none;
  background-color: #ffffff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-gold, var(--color-accent)) 35%, transparent);
}

.agency-form__field:focus-within > label .required,
.agency-form__field.is-filled > label .required {
  color: var(--color-gold-dark, var(--color-gold, var(--color-accent)));
  -webkit-text-fill-color: var(--color-gold-dark, var(--color-gold, var(--color-accent)));
}

.agency-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.agency-form textarea,
.agency-form select {
  display: block;
  width: 100%;
  height: 3rem;
  min-height: 3rem;
  max-height: 3rem;
  margin: 0;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--color-text);
  font: inherit;
  font-size: 0.9375rem; /* 15px */
  line-height: 1.35;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.agency-form textarea {
  height: auto;
  min-height: 3rem;
  max-height: none;
  padding-block: 0.85rem;
  resize: vertical;
  overflow-y: auto;
}

.agency-form select {
  padding-inline-end: 2.25rem;
  cursor: pointer;
  accent-color: var(--color-primary);
  color-scheme: light;
  /* Kill native blue focus ring / Windows highlight. */
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-primary-light, var(--color-primary)) 50%),
    linear-gradient(135deg, var(--color-primary-light, var(--color-primary)) 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) 50%,
    calc(100% - 0.75rem) 50%;
  background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
  background-repeat: no-repeat;
}

.agency-form select option {
  background-color: #ffffff;
  color: var(--color-primary-dark, var(--color-primary));
}

.agency-form input::placeholder,
.agency-form textarea::placeholder {
  color: #8a96a5;
  opacity: 1;
}

/* Autofill — never flash browser blue/yellow. */
.agency-form input:-webkit-autofill,
.agency-form input:-webkit-autofill:hover,
.agency-form input:-webkit-autofill:focus,
.agency-form textarea:-webkit-autofill,
.agency-form select:-webkit-autofill {
  -webkit-text-fill-color: var(--color-text);
  caret-color: var(--color-primary);
  box-shadow: 0 0 0 1000px #ffffff inset;
  transition: background-color 99999s ease-out;
}

.agency-form input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.agency-form textarea:focus-visible,
.agency-form select:focus-visible {
  border-color: var(--color-gold, var(--color-accent));
  outline: none;
  outline-offset: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-gold, var(--color-accent)) 22%, transparent);
}

/* Themed validation — gold/teal tooltips instead of browser chrome defaults. */
.agency-form__field.is-invalid > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.agency-form__field.is-invalid > textarea,
.agency-form__field.is-invalid > select,
.agency-form__field:has(:user-invalid) > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.agency-form__field:has(:user-invalid) > textarea,
.agency-form__field:has(:user-invalid) > select {
  border-color: var(--color-gold-dark, var(--color-gold, var(--color-accent)));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-gold, var(--color-accent)) 20%, transparent);
}

.agency-form__field.is-valid > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.agency-form__field.is-valid > textarea,
.agency-form__field.is-valid > select {
  border-color: var(--color-primary-mid, var(--color-primary-light, var(--color-success)));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-soft, var(--color-primary)) 18%, transparent);
}

/* Validation messages removed — field border highlight is enough. */
.agency-form__tooltip {
  display: none !important;
}

.agency-form__field.is-invalid > label,
.agency-form__field:has(:user-invalid) > label {
  border-color: var(--color-gold, var(--color-accent));
  color: var(--color-primary-dark, var(--color-primary));
  -webkit-text-fill-color: var(--color-primary-dark, var(--color-primary));
}

[data-theme="dark"] .agency-form__field > label {
  background: var(--color-surface-raised);
  color: var(--color-primary-light, var(--color-accent));
  -webkit-text-fill-color: var(--color-primary-light, var(--color-accent));
  border-color: color-mix(in srgb, var(--color-primary-light, var(--color-accent)) 40%, var(--color-border));
}

[data-theme="dark"] .agency-form__field:focus-within > label,
[data-theme="dark"] .agency-form__field.is-filled > label {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  background-color: var(--color-primary);
  border-color: var(--color-gold, var(--color-accent));
  box-shadow: none;
}

[data-theme="dark"] .agency-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
[data-theme="dark"] .agency-form textarea,
[data-theme="dark"] .agency-form select,
html[data-theme="dark"] .agency-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html[data-theme="dark"] .agency-form textarea,
html[data-theme="dark"] .agency-form select {
  background-color: var(--color-surface-raised);
  background-image: none;
  color: var(--color-text);
  border-color: var(--color-border);
  color-scheme: dark;
  -webkit-appearance: none;
  appearance: none;
}

[data-theme="dark"] .agency-form select,
html[data-theme="dark"] .agency-form select {
  /* Emerald field fill — never browser blue / legacy navy. */
  color-scheme: dark;
  accent-color: var(--color-primary-light, var(--color-primary));
  background-color: var(--color-surface-raised, #1a3235);
  background-image: linear-gradient(45deg, transparent 50%, var(--color-primary-soft, #51c8cc) 50%),
    linear-gradient(135deg, var(--color-primary-soft, #51c8cc) 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) 50%,
    calc(100% - 0.75rem) 50%;
  background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
  background-repeat: no-repeat;
}

[data-theme="dark"] .agency-form select option,
html[data-theme="dark"] .agency-form select option {
  background-color: var(--color-surface-raised, #1a3235);
  color: var(--color-text, #e6f2f2);
}

[data-theme="dark"] .agency-form input:-webkit-autofill,
[data-theme="dark"] .agency-form input:-webkit-autofill:hover,
[data-theme="dark"] .agency-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text);
  box-shadow: 0 0 0 1000px var(--color-surface-raised, #1a3235) inset;
}

body.has-open-drawer::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
  pointer-events: auto;
}

/* Keep chrome above the dim overlay; drawer itself sits higher still. */
body.has-open-drawer .site-header {
  z-index: calc(var(--z-drawer) + 1);
}

/* =============================================================================
 * CONTACT DOCK — McKinsey-style trigger + split contact modal
 * ========================================================================== */

.prelect-dock {
  position: fixed;
  inset-block-end: 30%;
  inset-inline-end: 0;
  z-index: var(--z-overlay, 500);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.prelect-dock__minimize {
  position: absolute;
  inset-block-start: -0.55rem;
  inset-inline-end: calc(100% - 0.85rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.prelect-dock__minimize:hover,
.prelect-dock__minimize:focus-visible {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.prelect-dock__trigger {
  position: relative;
  display: grid;
  gap: 0.15rem;
  min-inline-size: 7.5rem;
  padding: 0.85rem 1.25rem 0.9rem;
  border: 0;
  border-radius: 1rem 0 0 1rem;
  background-image: var(--gradient-accent);
  color: var(--color-accent-contrast);
  text-align: start;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
}

.prelect-dock__mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-inline-end: 0.35rem;
  border: 0;
  border-radius: 1rem;
  background-image: var(--gradient-accent);
  color: var(--color-accent-contrast);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}

.prelect-dock__mini-bubbles {
  position: relative;
  width: 1.5rem;
  height: 1.25rem;
  display: block;
}

.prelect-dock.is-minimized .prelect-dock__trigger {
  display: none;
}

.prelect-dock:not(.is-minimized) .prelect-dock__mini {
  display: none;
}

.prelect-dock__ask {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.1;
}

.prelect-dock__brand {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.15;
  max-inline-size: 9rem;
  overflow-wrap: anywhere;
}

.prelect-dock__sub {
  margin-block-start: 0.2rem;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
}

.prelect-dock__bubbles {
  position: absolute;
  inset-block-start: 0.55rem;
  inset-inline-end: 0.55rem;
  width: 1.6rem;
  height: 1.35rem;
}

.prelect-dock__bubble {
  position: absolute;
  border-radius: 50% 50% 50% 8%;
}

.prelect-dock__bubble--back {
  inset: 0 0.15rem auto auto;
  width: 0.95rem;
  height: 0.8rem;
  background: rgb(255 255 255 / 0.35);
}

.prelect-dock__bubble--front {
  inset: 0.25rem 0 auto auto;
  width: 1.15rem;
  height: 0.95rem;
  background: #ffffff;
}

.prelect-dock__bubble--front::after {
  content: "";
  position: absolute;
  inset-block-start: 0.35rem;
  inset-inline-start: 0.22rem;
  width: 0.7rem;
  height: 0.18rem;
  background:
    radial-gradient(circle, var(--color-accent) 45%, transparent 46%) 0 0 / 0.18rem 0.18rem,
    radial-gradient(circle, var(--color-accent) 45%, transparent 46%) 0.26rem 0 / 0.18rem 0.18rem,
    radial-gradient(circle, var(--color-accent) 45%, transparent 46%) 0.52rem 0 / 0.18rem 0.18rem;
  background-repeat: no-repeat;
}

.prelect-dock__backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--color-primary) 55%, #000 20%);
  opacity: 0;
  transition: opacity 480ms var(--ease-out);
}

.prelect-dock__backdrop.is-open {
  opacity: 1;
}

.prelect-dock__panel {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: var(--space-md);
  pointer-events: none;
}

.prelect-dock__panel.is-open {
  pointer-events: auto;
}

.prelect-dock__panel[hidden],
.prelect-dock__backdrop[hidden] {
  display: none;
}

.prelect-dock__panel:not([hidden]) {
  display: grid;
}

.prelect-dock__split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, auto) minmax(0, 1fr);
  width: min(68rem, 100%);
  max-height: min(92vh, 42rem);
  overflow: hidden;
  background: var(--color-surface-raised, #ffffff);
  color: var(--color-text, #1a1f1e);
  border-radius: 1.15rem;
  box-shadow: var(--shadow-xl);
  transform: translate3d(0, 16px, 0) scale(0.98);
  opacity: 0;
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 280ms var(--ease-out);
}

.prelect-dock__panel.is-open .prelect-dock__split {
  transform: none;
  opacity: 1;
}

/*
 * Mobile: full-screen contact drawer sliding in from the right.
 * Close control sits clear of the Hire with Us tab.
 * !important beats later/base modal styles that kept the old centered card.
 */
@media (max-width: 767.98px) {
  .prelect-dock__panel {
    padding: 0 !important;
    place-items: stretch !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  .prelect-dock__panel:not([hidden]) {
    display: grid !important;
  }

  .prelect-dock__split {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 100% !important;
    border-radius: 0 !important;
    transform: translate3d(100%, 0, 0) !important;
    opacity: 1 !important;
    scale: none;
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .prelect-dock__panel.is-open .prelect-dock__split {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
  }

  .prelect-dock__brand-pane {
    display: none !important;
  }

  .prelect-dock__form-pane {
    max-height: none !important;
    height: 100% !important;
    min-height: 0;
  }

  .prelect-dock__tabs {
    gap: 0.3rem;
    /* Reserve space so the close circle never covers “Hire with Us”. */
    padding: 0.55rem 3.35rem 0.15rem 0.65rem !important;
  }

  .prelect-dock__tab {
    min-height: 2.6rem;
    padding: 0.45rem 0.15rem 0.7rem;
    font-size: 0.7rem;
    letter-spacing: 0.01em;
    line-height: 1.15;
    white-space: nowrap;
  }

  .prelect-dock__panels {
    padding: 0.85rem 0.85rem 1.25rem !important;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .prelect-dock__close {
    inset-block-start: 0.5rem !important;
    inset-inline-end: 0.5rem !important;
    width: 2.35rem !important;
    height: 2.35rem !important;
    font-size: 1.35rem !important;
  }
}

@media (min-width: 768px) {
  .prelect-dock__split {
    /* Wider left for tabbed forms; narrower brand pane. */
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
    grid-template-rows: minmax(0, 1fr);
  }
}

.prelect-dock__form-pane {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  align-content: start;
  min-height: 0;
  max-height: 100%;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
}

/* Half-circle tabs hanging from the top of the left pane — no bottom rule. */
.prelect-dock__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0;
  padding: 0.55rem 0.85rem 0.15rem;
  border: 0;
  background: transparent;
}

.prelect-dock__tab {
  appearance: none;
  display: grid;
  place-items: center;
  min-height: 2.85rem;
  margin: 0;
  padding: 0.55rem 0.45rem 0.85rem;
  border: 0;
  border-radius: 0.85rem 0.85rem 0 0;
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-accent) 14%, var(--color-surface, #f7fafc)) 0%,
    color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-muted, #eef3f8)) 100%
  );
  color: var(--color-muted, #5a6b7d);
  font: inherit;
  font-size: clamp(0.78rem, 0.72rem + 0.35vw, 0.92rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    filter var(--dur-fast) var(--ease-out);
}

.prelect-dock__tab:hover,
.prelect-dock__tab:focus-visible {
  color: var(--color-primary);
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-accent) 22%, #fff) 0%,
    color-mix(in srgb, var(--color-primary) 14%, #e8eef6) 100%
  );
  outline: none;
  filter: saturate(1.05);
}

.prelect-dock__tab[aria-selected="true"] {
  color: #ffffff;
  background-image: linear-gradient(
    165deg,
    var(--color-primary) 0%,
    color-mix(in srgb, var(--color-accent) 58%, var(--color-primary)) 100%
  );
  box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary) 28%, transparent);
  transform: translateY(2px);
}

.prelect-dock__tab-label {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.prelect-dock__panels {
  min-height: 0;
  overflow: auto;
  padding: clamp(1rem, 0.85rem + 1.2vw, 1.5rem) clamp(1rem, 0.85rem + 1.5vw, 1.75rem)
    clamp(1.1rem, 0.9rem + 1.2vw, 1.65rem);
  padding-inline-end: clamp(2.5rem, 1rem + 3vw, 3.25rem);
}

.prelect-dock__tab-panel[hidden] {
  display: none;
}

.prelect-dock__headline {
  margin: 0 0 var(--space-sm);
  width: 100%;
  max-width: none;
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
  font-weight: 600;
  line-height: 1.35;
  text-wrap: pretty;
  color: var(--color-text);
}

.prelect-dock__form {
  display: grid;
  /* Match page `.agency-form` field rhythm. */
  gap: 0.85rem;
}

.prelect-dock__row {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 560px) {
  .prelect-dock__row {
    grid-template-columns: 1fr 1fr;
  }
}

.prelect-dock__note {
  margin: 0;
  font-size: var(--step--1);
  color: var(--color-muted);
  line-height: 1.45;
}

.prelect-dock__note a {
  color: var(--color-primary);
}

.prelect-dock__consent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  font-size: var(--step--1);
  color: var(--color-muted);
  line-height: 1.4;
}

.prelect-dock__consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--color-accent);
}

.prelect-dock__consent > span {
  flex: 1 1 auto;
  min-width: 0;
}

.prelect-dock__consent a {
  color: var(--color-primary);
}

.prelect-dock__form .agency-form__field {
  margin: 0;
  margin-block-start: 0.55rem;
}

.prelect-dock__form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.prelect-dock__form textarea,
.prelect-dock__form select {
  border: 1.5px solid color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
  background: var(--color-surface-raised, #ffffff);
  color: var(--color-text, #152526);
}

.prelect-dock__form .agency-form__hp {
  position: absolute;
  left: -9999px;
  height: 0;
  overflow: hidden;
}

.prelect-dock__actions {
  margin: var(--space-2xs) 0 0;
}

.prelect-dock__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.85rem;
  padding: 0.65rem 1.15rem;
  border: 0;
  border-radius: 0.75rem;
  background-image: var(--gradient-accent);
  color: var(--color-accent-contrast);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.prelect-dock__submit:hover,
.prelect-dock__submit:focus-visible {
  filter: brightness(1.05);
}

.prelect-dock__brand-pane {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: stretch;
  gap: var(--space-lg);
  min-height: 0;
  min-block-size: 11rem;
  padding: clamp(1.5rem, 1.25rem + 2vw, 2.5rem);
  overflow: hidden;
  background-image: var(--gradient-accent);
  color: var(--color-accent-contrast);
}

@media (min-width: 768px) {
  .prelect-dock__brand-pane {
    min-block-size: 0;
    height: auto;
    max-height: 100%;
  }
}

.prelect-dock__close {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: var(--radius-circle);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-raised, #ffffff));
  color: var(--color-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.prelect-dock__close:hover,
.prelect-dock__close:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 22%, var(--color-surface-raised, #ffffff));
}

.prelect-dock__welcome {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  max-width: 22rem;
  padding-inline-end: 0.25rem;
}

.prelect-dock__welcome-icon {
  flex-shrink: 0;
  color: var(--color-accent);
}

.prelect-dock__welcome-text {
  margin: 0;
  min-height: 4.5em;
  font-size: clamp(1.05rem, 0.95rem + 0.7vw, 1.45rem);
  font-weight: 600;
  line-height: 1.35;
  color: #ffffff;
}

.prelect-dock__welcome-text.is-typing::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 1em;
  margin-inline-start: 0.12em;
  vertical-align: -0.1em;
  background: #ffffff;
  animation: prelect-dock-caret 0.9s steps(1) infinite;
}

@keyframes prelect-dock-caret {
  50% {
    opacity: 0;
  }
}

.prelect-dock__email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding-block-start: var(--space-sm);
  border-block-start: 1px solid rgb(255 255 255 / 0.28);
  font-size: var(--step-0);
  font-weight: 600;
  color: #ffffff;
}

.prelect-dock__email-icon {
  display: inline-flex;
  color: inherit;
  opacity: 0.95;
}

.prelect-dock__email-label {
  margin-inline-end: 0.15rem;
  opacity: 0.9;
}

.prelect-dock__email a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
}

.prelect-dock__email a:hover,
.prelect-dock__email a:focus-visible {
  opacity: 0.88;
}

body.has-open-dock {
  overflow: hidden;
}

@media (max-width: 480px) {
  .prelect-dock {
    inset-block-end: 1rem;
  }

  .prelect-dock__trigger {
    min-inline-size: 6.5rem;
    padding-inline: 0.9rem;
  }

  /* Do not reset panel padding — full-screen drawer owns that below 768px. */
}

@media (prefers-reduced-motion: reduce) {
  .prelect-dock__backdrop,
  .prelect-dock__split,
  .prelect-dock__welcome-text.is-typing::after {
    transition: none;
    animation: none;
  }
}

/* =============================================================================
 * SCROLL TO TOP
 * ========================================================================== */

.prelect-scroll-top {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  inset-inline-start: auto;
  z-index: calc(var(--z-overlay, 500) - 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary-dark) 72%, transparent);
  color: #ffffff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  pointer-events: none;
  transition:
    opacity 220ms var(--ease-out),
    transform 220ms var(--ease-out),
    background-color 180ms var(--ease-out);
}

.prelect-scroll-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.prelect-scroll-top:hover,
.prelect-scroll-top:focus-visible {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.prelect-scroll-top[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .prelect-scroll-top {
    transition: none;
  }
}

/* =============================================================================
 * CONTACT FORM TOAST (bottom-left)
 * ========================================================================== */

.prelect-toast-host {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-start: 1.25rem;
  z-index: var(--z-toast, 600);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: min(22rem, calc(100vw - 2.5rem));
  pointer-events: none;
}

.prelect-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  border-radius: var(--radius-sm, 0.35rem);
  background: var(--color-primary-dark, #0b3f45);
  color: var(--color-primary-contrast, #fff);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 240ms var(--ease-out, ease),
    transform 240ms var(--ease-out, ease);
}

.prelect-toast.is-visible {
  opacity: 1;
  transform: none;
}

.prelect-toast--error {
  background: color-mix(in srgb, #8b1e1e 88%, #000);
}

.prelect-toast__message {
  margin: 0;
  flex: 1 1 auto;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.prelect-toast__close {
  flex: 0 0 auto;
  margin: -0.2rem -0.25rem 0 0;
  padding: 0.15rem 0.4rem;
  border: 0;
  border-radius: var(--radius-sm, 0.25rem);
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
}

.prelect-toast__close:hover,
.prelect-toast__close:focus-visible {
  opacity: 1;
  background: rgb(255 255 255 / 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .prelect-toast {
    transition: none;
  }
}

/* Legacy breakpoint shell — drawer is permanent; keep selectors inert. */
@media (min-width: 1024px) {
  .site-header__menu-toggle {
    display: inline-flex;
  }
}

/* -----------------------------------------------------------------------------
 * 14. HEADER AND FOOTER
 * -------------------------------------------------------------------------- */

/*
 * Header strip — emerald under logo + right actions; transparent gold centre.
 * Action controls are piano keys: full strip height, no boxed chrome.
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: transparent;
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-primary-dark, #154850) 96%, #000) 0%,
    color-mix(in srgb, var(--color-primary-dark, #154850) 90%, transparent) 14%,
    color-mix(in srgb, var(--color-primary) 52%, transparent) 30%,
    color-mix(in srgb, var(--color-gold, #c4a35a) 34%, color-mix(in srgb, var(--color-primary-dark, #154850) 40%, transparent)) 42%,
    color-mix(in srgb, var(--color-gold, #c4a35a) 28%, color-mix(in srgb, var(--color-primary-dark, #154850) 35%, transparent)) 50%,
    color-mix(in srgb, var(--color-gold, #c4a35a) 34%, color-mix(in srgb, var(--color-primary-dark, #154850) 40%, transparent)) 58%,
    color-mix(in srgb, var(--color-primary) 52%, transparent) 70%,
    color-mix(in srgb, var(--color-primary-dark, #154850) 90%, transparent) 86%,
    color-mix(in srgb, var(--color-primary-dark, #154850) 96%, #000) 100%
  );
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  transition:
    border-color var(--dur-normal) var(--ease-out),
    box-shadow var(--dur-normal) var(--ease-out),
    background-image var(--dur-normal) var(--ease-out);
}

.site-header.is-stuck {
  border-bottom-color: color-mix(in srgb, var(--color-primary) 42%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary-dark, #154850) 28%, transparent);
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-primary-dark, #154850) 98%, #000) 0%,
    color-mix(in srgb, var(--color-primary-dark, #154850) 94%, transparent) 16%,
    color-mix(in srgb, var(--color-primary) 62%, transparent) 32%,
    color-mix(in srgb, var(--color-gold, #c4a35a) 38%, color-mix(in srgb, var(--color-primary-dark, #154850) 48%, transparent)) 44%,
    color-mix(in srgb, var(--color-gold, #c4a35a) 32%, color-mix(in srgb, var(--color-primary-dark, #154850) 42%, transparent)) 50%,
    color-mix(in srgb, var(--color-gold, #c4a35a) 38%, color-mix(in srgb, var(--color-primary-dark, #154850) 48%, transparent)) 56%,
    color-mix(in srgb, var(--color-primary) 62%, transparent) 68%,
    color-mix(in srgb, var(--color-primary-dark, #154850) 94%, transparent) 84%,
    color-mix(in srgb, var(--color-primary-dark, #154850) 98%, #000) 100%
  );
}

.site-header__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  /* +5% taller at first paint; compact bar after scroll (was ~4px — invisible). */
  min-height: var(--site-header-offset, 4.25rem);
  padding-inline: 0;
  transition: min-height var(--dur-normal) var(--ease-out);
}

.site-header.is-stuck .site-header__inner {
  min-height: 3.4rem;
}

.site-header__start {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  min-width: 0;
  padding-inline: var(--space-sm) var(--space-md);
}

.site-header__actions {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 0;
  min-height: 100%;
}

.site-header__ctas {
  display: none;
  align-items: stretch;
  gap: 0;
  margin: 0;
}

@media (min-width: 768px) {
  .site-header__ctas {
    display: flex;
  }
}

/* Header Explore flyout — detached panel with hollow arrow under Explore. */
.site-header__explore {
  position: relative;
  display: flex;
  align-items: stretch;
  align-self: stretch;
  overflow: visible;
}

/*
 * Invisible hover bridge between the Explore toggle and the detached panel.
 * Without this, the 0.85rem gap closes :hover before the pointer reaches links.
 */
.site-header__explore::after {
  content: "";
  position: absolute;
  left: -0.5rem;
  right: -0.5rem;
  top: 100%;
  height: 1.1rem;
  z-index: calc(var(--z-sticky, 100) + 4);
}

.site-header__actions,
.site-header__ctas,
.site-header__inner,
.site-header {
  overflow: visible;
}

.site-header__explore-toggle {
  gap: 0.45rem;
}

/* Empty chevron on the Explore control (not a filled ▾). */
.site-header__explore-caret {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.15rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.9;
  transition: transform var(--dur-fast) var(--ease-out);
}

.site-header__explore.is-open .site-header__explore-caret,
.site-header__explore:hover .site-header__explore-caret,
.site-header__explore:focus-within .site-header__explore-caret {
  transform: rotate(225deg);
  margin-top: 0.2rem;
}

.site-header__explore.is-current .site-header__explore-toggle {
  background: color-mix(in srgb, var(--color-gold, #c4a35a) 22%, transparent);
  color: var(--color-gold, #c4a35a);
}

.site-header__explore-panel {
  position: absolute;
  /* Detached from the strip — gap + hollow pointer back to Explore. */
  top: calc(100% + 0.85rem);
  left: 50%;
  /* Center under Explore, bias left so the panel does not crop on the right. */
  transform: translateX(-62%);
  z-index: calc(var(--z-sticky, 100) + 5);
  width: min(34rem, calc(100vw - 2.5rem));
  max-width: calc(100vw - 2.5rem);
  padding: 1.05rem 1.15rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--color-gold, #c4a35a) 42%, transparent);
  border-radius: 0;
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--color-primary-dark, #0b3f45) 96%, #000) 0%,
      color-mix(in srgb, var(--color-primary, #13686e) 92%, #041412) 100%
    );
  box-shadow: 0 18px 40px color-mix(in srgb, #000 42%, transparent);
  color: #fff;
}

/* Hollow arrow pointing up at Explore (border then fill). */
.site-header__explore-panel::before,
.site-header__explore-panel::after {
  content: "";
  position: absolute;
  left: 62%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  pointer-events: none;
}

.site-header__explore-panel::before {
  top: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid color-mix(in srgb, var(--color-gold, #c4a35a) 55%, transparent);
}

.site-header__explore-panel::after {
  top: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid color-mix(in srgb, var(--color-primary-dark, #0b3f45) 96%, #000);
}

.site-header__explore-panel[hidden] {
  display: none;
}

.site-header__explore:hover .site-header__explore-panel,
.site-header__explore:focus-within .site-header__explore-panel,
.site-header__explore.is-open .site-header__explore-panel {
  display: block;
}

.site-header__explore:hover .site-header__explore-panel[hidden],
.site-header__explore:focus-within .site-header__explore-panel[hidden],
.site-header__explore.is-open .site-header__explore-panel[hidden] {
  display: block;
}

.site-header__explore-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem 1.25rem;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .site-header__explore-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.site-header__explore-link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.65rem 0.7rem;
  color: inherit;
  text-decoration: none;
  border-inline-start: 2px solid transparent;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.site-header__explore-link:hover,
.site-header__explore-link:focus-visible {
  background: color-mix(in srgb, #ffffff 8%, transparent);
  border-inline-start-color: var(--color-gold, #c4a35a);
  outline: none;
}

.site-header__explore-link.is-current {
  background: color-mix(in srgb, var(--color-gold, #c4a35a) 14%, transparent);
  border-inline-start-color: var(--color-gold, #c4a35a);
}

.site-header__explore-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
}

.site-header__explore-link.is-current .site-header__explore-title {
  color: var(--color-gold, #c4a35a);
}

.site-header__explore-intro {
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgb(255 255 255 / 0.78);
}

.mega-drawer__overview.is-current .mega-drawer__overview-word,
.mega-drawer__link.is-current .mega-drawer__link-title {
  color: var(--color-gold, var(--color-accent));
}

.mega-drawer__link.is-current {
  outline: none;
}

/* Piano keys — full strip height, cut into the bar (no floating boxes). */
.site-header .site-header__cta,
.site-header .site-header__cta.btn,
.site-header .site-header__cta.btn--ghost,
.site-header .site-header__cta.btn--primary,
.site-header .prelect-mode-toggle,
.site-header .site-header__menu-toggle,
.site-header__menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: auto;
  min-width: 3rem;
  height: auto;
  min-height: 100%;
  margin: 0;
  padding-inline: 1rem;
  border: 0;
  border-radius: 0;
  border-inline-start: 1px solid color-mix(in srgb, #ffffff 16%, transparent);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: #ffffff;
  box-shadow: none;
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.site-header .site-header__cta.btn::before,
.site-header .site-header__cta.btn--ghost::before,
.site-header .site-header__cta.btn--primary::before {
  display: none;
}

.site-header .site-header__cta--hire {
  background: color-mix(in srgb, var(--color-gold, var(--color-accent)) 78%, transparent);
  color: var(--color-accent-contrast, #152526);
  border-inline-start-color: color-mix(in srgb, var(--color-gold) 40%, transparent);
}

.site-header .site-header__cta:hover,
.site-header .site-header__cta:focus-visible,
.site-header .site-header__cta.btn--ghost:hover,
.site-header .site-header__cta.btn--ghost:focus-visible,
.site-header .prelect-mode-toggle:hover,
.site-header .prelect-mode-toggle:focus-visible,
.site-header .site-header__menu-toggle:hover,
.site-header .site-header__menu-toggle:focus-visible,
.site-header__menu-toggle:hover,
.site-header__menu-toggle:focus-visible {
  background: color-mix(in srgb, var(--color-gold, var(--color-accent)) 72%, transparent);
  color: var(--color-accent-contrast, #152526);
  border-color: transparent;
  outline: none;
}

.site-header .site-header__cta--hire:hover,
.site-header .site-header__cta--hire:focus-visible {
  background: #ffffff;
  color: var(--color-primary);
}

.site-header .site-header__menu-toggle[aria-expanded="true"],
.site-header__menu-toggle[aria-expanded="true"] {
  background: var(--color-gold, var(--color-accent));
  color: var(--color-accent-contrast, #152526);
}

.site-header .prelect-mode-toggle,
.site-header .site-header__menu-toggle {
  min-width: 3.25rem;
  padding-inline: 0.85rem;
}

.site-branding {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.site-branding img,
.site-branding .custom-logo {
  /*
   * Header shows the compact P-mark (≈ 0.9:1). Display height drives width;
   * the full lockup is reserved for the drawer and footer.
   */
  max-height: 40px;
  width: auto;
  max-width: min(220px, 52vw);
  height: auto;
  object-fit: contain;
  transition: max-height var(--dur-normal) var(--ease-out);
  filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--color-primary-dark, #154850) 35%, transparent));
}

.site-header.is-stuck .site-branding img,
.site-header.is-stuck .site-branding .custom-logo {
  max-height: 32px;
}

.site-branding .custom-logo--mark {
  display: block;
  aspect-ratio: 575 / 640;
}

/* Abstract gold L - bottom + right rules that stop short of the corner. */
.site-branding .custom-logo-link--mark {
  position: relative;
  padding: 0 0.45rem 0.4rem 0;
}

.site-branding .custom-logo-link--mark::before {
  content: "";
  position: absolute;
  top: 0.15rem;
  right: 0;
  bottom: 0.7rem;
  width: 1.5px;
  background: var(--color-gold, #c4a35a);
  pointer-events: none;
}

.site-branding .custom-logo-link--mark::after {
  content: "";
  position: absolute;
  left: 0.15rem;
  right: 0.7rem;
  bottom: 0;
  height: 1.5px;
  background: var(--color-gold, #c4a35a);
  pointer-events: none;
}

/* Flat McKinsey wordmark — no pill / rounded box behind the logo. */
.custom-logo-link {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.site-header.is-stuck .custom-logo-link {
  background: transparent;
  box-shadow: none;
}

[data-theme="dark"] .custom-logo-link,
html[data-theme="dark"] .custom-logo-link {
  background: transparent;
}

/*
 * Footer brand lockup — the full logo file already carries the
 * PEOPLE · PAYROLL · PRECISION strap, so no separate tagline image.
 */
.site-footer__brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  max-width: min(22rem, 100%);
}

.site-footer__brand-lockup .custom-logo-link {
  display: block;
  line-height: 0;
}

.site-footer .custom-logo-link .custom-logo,
.site-footer .custom-logo-link img.custom-logo {
  max-height: none;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* One line on a phone — still larger than the old 30px chrome. */
@media (max-width: 47.99em) {
  .site-header__inner {
    width: 100%;
    justify-content: space-between;
  }

  .site-header__start {
    flex: 0 1 auto;
  }

  .site-header__actions {
    flex: 0 0 auto;
    margin-inline-start: auto;
  }

  .site-branding img,
  .site-branding .custom-logo {
    max-height: 36px;
    max-width: min(240px, 68vw);
  }

  .site-footer__brand-lockup {
    width: 100%;
    max-width: min(16.5rem, 88%);
    margin-inline: auto;
    gap: 0.4rem;
    align-items: center;
  }

  .site-footer .custom-logo-link {
    width: 100%;
  }

  .site-footer .custom-logo-link .custom-logo,
  .site-footer .custom-logo-link img.custom-logo {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
  }
}

.site-title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1;
}

.site-title a {
  color: var(--color-text);
  text-decoration: none;
}

.site-footer {
  position: relative;
  padding-block: var(--space-2xl) var(--space-lg);
  background-color: var(--color-surface);
  border-top: var(--border-width) solid var(--color-border);
}

.site-footer--corporate {
  /* Deep emerald band — motifs sit on top. */
  background-color: var(--color-primary-dark);
  background-image: none;
  color: rgba(255, 255, 255, 0.78);
  border-top: 0;
  /* clip only sideways — hidden was cropping contact lines on phones. */
  overflow-x: clip;
  overflow-y: visible;
}

.site-footer--corporate::before,
.site-footer--corporate::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/*
 * Left dots mat — fine tiled dots behind logo + company copy,
 * fades out into the video band at ~40% (no purple/blue arcs).
 */
.site-footer--corporate::before {
  inset: 0 auto 0 0;
  width: 42%;
  z-index: 1;
  background-color: transparent;
  background-image: var(--footer-dots-image, none);
  background-repeat: repeat;
  background-position: left top;
  /* Keep the 12×12 tile at native scale so dots stay a fine mat. */
  background-size: 12px 12px;
  opacity: 0.85;
  mask-image: linear-gradient(90deg, #000 0%, #000 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 72%, transparent 100%);
}

/* Purple/blue arc motif stays off. */
.site-footer--corporate::after {
  display: none;
}

@media (max-width: 1023.98px) {
  .site-footer--corporate::before {
    width: 100%;
    opacity: 0.55;
    mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  }
}

.site-footer--corporate a {
  color: rgba(255, 255, 255, 0.75);
}

.site-footer--corporate a:hover:not(.btn):not(.agency-btn),
.site-footer--corporate a:focus-visible:not(.btn):not(.agency-btn) {
  color: var(--color-gold-light, #e2c77a);
}

/* Filled hover states must keep contrast text in both themes. */
[data-theme="dark"] .btn--primary:hover,
[data-theme="dark"] .btn--primary:focus-visible,
[data-theme="dark"] .btn--outline:hover,
[data-theme="dark"] .btn--outline:focus-visible,
[data-theme="dark"] .btn--ghost:hover,
[data-theme="dark"] .btn--ghost:focus-visible,
[data-theme="dark"] .btn--gradient:hover,
[data-theme="dark"] .btn--gradient:focus-visible {
  color: var(--color-accent-contrast);
}

[data-theme="dark"] .btn--secondary:hover,
[data-theme="dark"] .btn--secondary:focus-visible {
  color: var(--color-primary-contrast);
}

.site-footer--corporate .site-footer__heading,
.site-footer--corporate .site-footer__tagline,
.site-footer--corporate .site-footer__office,
.site-footer--corporate .site-footer__bottom,
.site-footer--corporate .site-footer__list,
.site-footer--corporate .site-footer__hint,
.site-footer--corporate .site-title a {
  color: rgba(255, 255, 255, 0.78);
}

.site-footer--corporate .site-footer__heading {
  color: #ffffff;
}

.site-footer--corporate .site-footer__tagline {
  color: rgba(255, 255, 255, 0.72);
  max-width: 36rem;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: var(--leading-relaxed, 1.55);
  font-size: var(--step--1);
}

.site-footer--corporate .site-footer__bottom {
  border-top-color: rgb(255 255 255 / 0.15);
  color: #aeb9c9;
}

.site-footer--corporate .custom-logo-link img,
.site-footer--corporate .custom-logo {
  /* Keep logo readable on the dark band in both light and dark page themes. */
  filter: none;
}

.site-footer__inner {
  position: relative;
  z-index: 3;
}

.site-footer__list {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
}

.site-footer__list a {
  position: relative;
  display: inline-block;
  padding-block: 0.1rem 0.45rem;
  text-decoration: none;
}

/* Korn Ferry–style thick emerald bar — text-width, sharp corners, small gap. */
.site-footer__list a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 4px;
  background: var(--color-primary-mid, var(--color-primary-soft, var(--color-primary)));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-normal) var(--ease-out);
}

.site-footer__list a:hover::after,
.site-footer__list a:focus-visible::after {
  transform: scaleX(1);
}

.site-footer__column,
.site-footer__about {
  min-width: 0;
}

/* Logo + PEOPLE|TALENT tagline + blurb share one centered axis (matches 404 stage). */
.site-footer__about {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.site-footer__about .site-footer__brand-lockup {
  margin-inline: auto;
}

.site-footer--corporate .site-footer__tagline {
  margin-inline: auto;
  text-align: center;
}

/*
 * Mobile footer: brand band, two link cards side-by-side, then a full-width
 * contact block with left-aligned addresses (no cropped India/USA lines).
 */
@media (max-width: 767.98px) {
  .site-footer--corporate {
    padding-block: var(--space-xl) var(--space-md);
    overflow-x: clip;
    overflow-y: visible;
  }

  .site-footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    align-items: stretch;
    justify-items: stretch;
  }

  .site-footer__about {
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    gap: var(--space-sm);
    text-align: center;
    padding-block-end: var(--space-lg);
    margin-block-end: 0.15rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.12);
  }

  .site-footer--corporate .site-footer__tagline {
    text-align: center;
    margin-inline: auto;
    max-width: 34ch;
    font-size: var(--step--1);
    line-height: 1.55;
  }

  .site-footer__column:not(.site-footer__contact) {
    display: grid;
    align-content: start;
    gap: 0.55rem;
    justify-items: start;
    text-align: start;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0.85rem 0.9rem;
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: var(--radius-md);
    background: rgb(255 255 255 / 0.04);
  }

  .site-footer__column:not(.site-footer__contact) .site-footer__heading {
    margin-block-end: 0;
    text-align: start;
  }

  .site-footer__column:not(.site-footer__contact) .site-footer__list {
    width: 100%;
    justify-items: start;
    text-align: start;
    gap: 0.4rem;
  }

  .site-footer__contact {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.65rem;
    width: 100%;
    max-width: none;
    margin: 0;
    margin-block-start: 0.25rem;
    padding: 0.95rem 1rem;
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: var(--radius-md);
    background: rgb(255 255 255 / 0.04);
    text-align: start;
    justify-items: stretch;
  }

  .site-footer__contact .site-footer__heading {
    text-align: start;
    margin-block-end: 0.15rem;
  }

  .site-footer__contact-list {
    width: 100%;
    gap: 0.85rem;
    justify-items: stretch;
    text-align: start;
  }

  .site-footer__contact-item {
    width: 100%;
    align-items: flex-start;
    text-align: start;
  }

  .site-footer__contact-body,
  .site-footer__contact-text,
  .site-footer__contact-link {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-sm);
    margin-block-start: var(--space-lg);
  }

  .site-footer__legal {
    justify-content: center;
  }
}

.site-footer__office {
  margin: 0;
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  color: var(--color-muted);
}

.site-footer--corporate .site-footer__office {
  color: #c5d0e0;
}

.site-footer--corporate .site-footer__office strong,
.site-footer--corporate .site-footer__office b,
.site-footer--corporate .site-footer__contact-label {
  color: #ffffff;
  font-weight: 600;
}

.prelect-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}

.prelect-icon svg {
  display: block;
}

.site-footer__contact-list {
  display: grid;
  gap: 0.85rem;
}

.site-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.site-footer__contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  margin-block-start: 0.15rem;
  color: #ffffff;
  flex-shrink: 0;
}

.site-footer__contact-body {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.site-footer__contact-label {
  display: block;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-footer__contact-text {
  display: block;
  font-size: var(--step--1);
  line-height: 1.45;
  color: #c5d0e0;
}

.site-footer__contact-link {
  color: #e8edf5;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.site-footer__contact-link:hover,
.site-footer__contact-link:focus-visible {
  color: #ffffff;
  text-decoration: underline;
}

/* Footer columns: mobile card grid below; tablet+ side by side. */
.site-footer__grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__about,
  .site-footer__contact,
  .site-footer__column:not(.site-footer__contact) {
    grid-column: auto;
    border: 0;
    background: transparent;
    padding: 0;
  }
}

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 2fr repeat(3, 1fr);
  }
}

/*
 * Mobile footer layout — after grid base so 2-col cards + contact span win.
 */
@media (max-width: 767.98px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    align-items: stretch;
    justify-items: stretch;
  }

  .site-footer__about {
    grid-column: 1 / -1;
  }

  .site-footer__about.stack {
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
    width: 100%;
  }

  .site-footer__column:not(.site-footer__contact) {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .site-footer__contact {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .site-footer__brand-lockup {
    max-width: min(15rem, 78%);
  }

  .site-footer .custom-logo-link .custom-logo,
  .site-footer .custom-logo-link img.custom-logo {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

/*
 * Footer column kickers — gold underline standout (Who We Are, Join Our Team, …).
 */
.site-footer__heading,
.site-footer--corporate .site-footer__heading {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  margin-block-end: var(--space-sm);
  padding: 0.3rem 0.1rem 0.4rem;
  border-block-end: 3px solid var(--color-gold, var(--color-accent));
  color: #ffffff;
  font-size: clamp(0.78rem, 0.72rem + 0.25vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: space-between;
  align-items: center;

  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-top: var(--border-width) solid var(--color-border);

  font-size: var(--step--1);
  color: var(--color-muted);
}

.site-footer--corporate .site-footer__bottom {
  border-top-color: rgb(255 255 255 / 0.15);
  color: #aeb9c9;
}

.site-footer--corporate .site-footer__bottom p {
  color: inherit;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__legal a {
  position: relative;
  display: inline-block;
  padding-block-end: 0.4rem;
  color: inherit;
  text-decoration: none;
}

.site-footer__legal a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 3px;
  background: var(--color-primary-mid, var(--color-primary-soft, var(--color-primary)));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-normal) var(--ease-out);
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: #ffffff;
  text-decoration: none;
}

.site-footer__legal a:hover::after,
.site-footer__legal a:focus-visible::after {
  transform: scaleX(1);
}

/* -----------------------------------------------------------------------------
 * 15. CONTENT-TYPE SPECIFIC
 * -------------------------------------------------------------------------- */

/* Job card meta rows (legacy) + editorial job row (archive). */
.job-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-size: var(--step--2);
  color: var(--color-muted);
}

.job-card__meta > * {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
}

.grid--jobs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

.card--job {
  border-radius: 0;
  border-color: color-mix(in srgb, var(--color-border) 88%, var(--color-primary));
  box-shadow: none;
  overflow: hidden;
}

.card--job .card__body {
  padding: 0;
}

.job-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.85rem;
  padding: 1.1rem 1.15rem 1.15rem 1.25rem;
}

@media (min-width: 768px) {
  .job-row {
    grid-template-columns: minmax(0, 1.4fr) minmax(11rem, 0.85fr) auto;
    align-items: center;
    gap: 1.25rem 1.5rem;
  }
}

.job-row__main {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.card--job .card__title {
  margin: 0;
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
}

.card--job .card__org {
  margin: 0;
  color: var(--color-primary-mid, var(--color-primary));
  font-size: var(--step--1);
  font-weight: 600;
}

.job-row__chips {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.job-row__chip {
  display: grid;
  gap: 0.1rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--color-border) 90%, transparent);
  background: color-mix(in srgb, var(--color-bg, #fff) 55%, transparent);
}

.job-row__chip-label {
  color: var(--color-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.job-row__chip-value {
  color: var(--color-text);
  font-size: 0.92rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.job-row__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  color: var(--color-gold, var(--color-accent));
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .job-row__cta {
    justify-content: flex-end;
  }
}

/* Testimonial. */
.testimonial {
  position: relative;
  padding: var(--space-lg);
  background-color: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--color-border);
}

/* Decorative quote mark, hidden from assistive tech via the markup. */
.testimonial::before {
  content: "\201C";
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-start: var(--space-sm);

  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--color-accent);

  /* Decorative watermark, so it must not reduce text contrast or intercept
	 * clicks. */
  opacity: 0.15;
  pointer-events: none;
}

.testimonial__quote {
  position: relative; /* Above the watermark. */
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-block-start: var(--space-md);
}

.testimonial__avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-circle);
  object-fit: cover;
  flex-shrink: 0;
}

.testimonial__name {
  font-weight: 600;
  font-size: var(--step--1);
}

.testimonial__role {
  font-size: var(--step--2);
  color: var(--color-muted);
}

/* Rating. Stars are supplementary — the numeric value is in the text, so the
 * rating is not conveyed by the star glyphs alone (section 14). */
.rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  color: var(--color-accent);
}

/* Team member card. */
.team-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -----------------------------------------------------------------------------
 * 16. ASK-A-QUESTION WIDGET
 * -------------------------------------------------------------------------- */

.ask-widget {
  position: fixed;
  inset-block-end: var(--space-md);

  /* Respect notched devices and mobile browser chrome. */
  inset-inline-end: max(var(--space-md), env(safe-area-inset-right));
  bottom: max(var(--space-md), env(safe-area-inset-bottom));

  z-index: var(--z-overlay);
}

.ask-widget__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);

  min-height: 48px;
  padding: var(--space-xs) var(--space-md);

  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  font-weight: 600;
  cursor: pointer;
}

.ask-widget__panel {
  position: absolute;
  inset-block-end: calc(100% + var(--space-2xs));
  inset-inline-end: 0;

  width: min(22rem, calc(100vw - 2rem));
  padding: var(--space-md);

  background-color: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.ask-widget__panel[hidden] {
  display: none;
}

/* Never let the widget cover content on a small screen: it becomes a bottom sheet
 * rather than a floating panel. */
@media (max-width: 480px) {
  .ask-widget__panel {
    position: fixed;
    inset-inline: var(--space-sm);
    inset-block-end: calc(var(--space-md) + 56px);
    width: auto;
  }
}

/* =============================================================================
 * 17. NAVIGATION DRAWER — scroll lock
 * =============================================================================
 * Applied by nav.js while the mobile drawer is open. Without it, the page behind
 * scrolls under the drawer, which is disorienting and makes the close target move.
 * ========================================================================== */

body.has-open-drawer {
	overflow: hidden;
}

/* =============================================================================
 * 18. SINGLE ARTICLE (editorial)
 * =============================================================================
 * The long-form reading layout. Measured column, clear byline, generous rhythm.
 * ========================================================================== */

.single-article__header {
	max-width: var(--container-narrow);
	margin-inline: auto;
	margin-block-end: var(--space-lg);
}

.single-article__header .entry-title {
	font-size: var(--step-4);
	margin-block: var(--space-2xs);
}

.single-article__eyebrow {
	margin-block-end: var(--space-xs);
}

.single-article__meta {
	margin-block-start: var(--space-md);
	padding-block-start: var(--space-sm);
	border-top: var(--border-width) solid var(--color-border);
	font-size: var(--step--1);
	color: var(--color-muted);
}

.single-article__avatar {
	border-radius: var(--radius-circle);
	width: 40px;
	height: 40px;
}

.single-article__author a {
	color: var(--color-text);
	font-weight: 600;
	text-decoration: none;
}

.single-article__author a:hover {
	color: var(--color-accent);
}

/* Full-width feature image, constrained so it does not become overwhelming on a
 * very wide screen. */
.single-article__feature {
	max-width: var(--container-wide);
	margin-inline: auto;
	margin-block-end: var(--space-xl);
}

.single-article__feature img {
	width: 100%;
	border-radius: var(--radius-lg);
}

.single-article__feature figcaption {
	margin-block-start: var(--space-2xs);
	text-align: center;
	font-size: var(--step--1);
	color: var(--color-muted);
}

.single-article__tags {
	margin-block-start: var(--space-xl);
	padding-block-start: var(--space-md);
	border-top: var(--border-width) solid var(--color-border);
}

/* =============================================================================
 * 19. POST NAVIGATION
 * ========================================================================== */

.post-navigation {
	margin-block-start: var(--space-xl);
	padding-block: var(--space-md);
	border-block: var(--border-width) solid var(--color-border);
	gap: var(--space-md);
}

.post-navigation__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	max-width: 45%;
	color: var(--color-text);
	text-decoration: none;
}

.post-navigation__link--next {
	margin-inline-start: auto;
	text-align: end;
}

.post-navigation__link:hover {
	color: var(--color-accent);
}

.post-navigation__label {
	font-size: var(--step--2);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.post-navigation__title {
	font-family: var(--font-display);
	font-size: var(--step-0);
	font-weight: 600;
}

/* On mobile the two links would be cramped side by side, so they stack. */
@media (max-width: 600px) {
	.post-navigation {
		flex-direction: column;
	}

	.post-navigation__link,
	.post-navigation__link--next {
		max-width: 100%;
		margin-inline-start: 0;
		text-align: start;
	}
}

/* =============================================================================
 * 20. JOB CARD DETAIL ROWS
 * ============================================================================= */

.job-card__meta {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
	margin: 0;
	padding-block: var(--space-2xs);
	font-size: var(--step--1);
}

.job-card__meta-row {
	display: flex;
	gap: var(--space-2xs);
}

.job-card__meta-row dt {
	font-weight: 600;
	color: var(--color-muted);
	/* Fixed label width so values align into a column, which makes a list of job
	 * cards scannable rather than ragged. */
	min-width: 6rem;
}

.job-card__meta-row dd {
	margin: 0;
}

/* An expired job is visually de-emphasised AND carries a "Closed" badge, so the
 * state is not communicated by opacity alone (§14). */
.card--muted {
	opacity: 0.72;
}

.card--muted .card__title a {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--color-muted);
}

/* =============================================================================
 * 21. CONTENT PAGES
 * ========================================================================== */

.page-article .page-title {
	font-size: var(--step-4);
}

.page-feature {
	margin-block-end: var(--space-xl);
}

.page-feature img {
	width: 100%;
	border-radius: var(--radius-lg);
}

/* =============================================================================
 * 22. SEARCH FORM
 * ========================================================================== */

.search-form {
	display: flex;
	gap: var(--space-2xs);
	width: 100%;
	max-width: 32rem;
	align-items: stretch;
}

.search-form__field {
	flex-grow: 1;
	min-width: 0; /* Allows the input to shrink rather than overflow (section 8). */
}

.search-form input[type='search'] {
	width: 100%;
	min-height: 44px;
	padding: var(--space-2xs) var(--space-xs);
	background-color: var(--color-bg);
	color: var(--color-text);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
}

/* Stack the search form on the narrowest screens so the button stays a
 * comfortable touch target rather than being squeezed. */
@media (max-width: 400px) {
	.search-form {
		flex-direction: column;
	}
}

/* =============================================================================
 * 23. PAGINATION
 * ========================================================================== */

.pagination,
.navigation.pagination {
	margin-block-start: var(--space-xl);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	justify-content: center;
	align-items: center;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: var(--space-2xs);

	color: var(--color-text);
	text-decoration: none;
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-sm);
}

.pagination .page-numbers:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* Current page is marked AND carries aria-current in the markup, so the state is
 * not conveyed by colour alone (§14). */
.pagination .page-numbers.current {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-accent-contrast);
	font-weight: 600;
}

.pagination .page-numbers.dots {
	border-color: transparent;
}

/* =============================================================================
 * 24. COMMENTS
 * ========================================================================== */

.comment-list {
	list-style: none;
	padding: 0;
}

.comment-list .comment {
	padding-block: var(--space-md);
	border-block-end: var(--border-width) solid var(--color-border);
}

.comment-list .children {
	list-style: none;
	padding-inline-start: var(--space-md);
	margin-block-start: var(--space-md);
}

/* Indenting nested replies on a narrow screen leaves almost no width for the
 * text, so indentation is dropped on mobile (§8). */
@media (max-width: 600px) {
	.comment-list .children {
		padding-inline-start: var(--space-xs);
	}
}

.comment-author img {
	border-radius: var(--radius-circle);
}

/* -----------------------------------------------------------------------------
 * Cinematic stage — home intro, 404, error surfaces (fullscreen branding video)
 * -------------------------------------------------------------------------- */

html.prelect-home-intro-lock,
html.prelect-home-intro-lock body {
  overflow: hidden;
}

.prelect-cinematic {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  color: #ffffff;
  isolation: isolate;
}

.prelect-cinematic--intro {
  padding: 0;
  background: #000;
}

.prelect-cinematic--404,
.prelect-cinematic--error {
  z-index: 40;
}

.prelect-cinematic__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #061018;
}

.prelect-cinematic--intro .prelect-cinematic__media {
  background: #000;
}

.prelect-cinematic__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.prelect-cinematic--intro .prelect-cinematic__video {
  object-fit: cover;
  object-position: center;
  background: #000;
}

.prelect-cinematic__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--color-primary-dark, #154850) 72%, transparent) 0%,
      color-mix(in srgb, var(--color-primary, #1d6066) 42%, transparent) 38%,
      color-mix(in srgb, var(--color-gold, #c4a35a) 28%, transparent) 68%,
      color-mix(in srgb, var(--color-primary-dark, #154850) 78%, transparent) 100%
    );
}

.prelect-cinematic--404 .prelect-cinematic__scrim,
.prelect-cinematic--error .prelect-cinematic__scrim,
.prelect-cinematic--intro .prelect-cinematic__scrim {
  display: block;
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--color-primary-dark, #154850) 78%, transparent) 0%,
      color-mix(in srgb, var(--color-primary-soft, #1d827e) 38%, transparent) 40%,
      color-mix(in srgb, var(--color-gold, #c4a35a) 32%, transparent) 72%,
      color-mix(in srgb, var(--color-primary-dark, #154850) 82%, transparent) 100%
    );
}

.prelect-cinematic__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: min(100%, 34rem);
  text-align: center;
}

/* Match footer brand lockup: logo + PEOPLE|TALENT tagline, centered as one unit. */
.prelect-cinematic__logo.site-footer__brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: min(22rem, 86vw);
  max-width: min(22rem, 100%);
  margin-inline: auto;
}

.prelect-cinematic__logo.site-footer__brand-lockup .custom-logo-link {
  display: block;
  width: 100%;
  line-height: 0;
}

.prelect-cinematic__logo.site-footer__brand-lockup .custom-logo,
.prelect-cinematic__logo.site-footer__brand-lockup img.custom-logo {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  filter: brightness(1.05) drop-shadow(0 2px 12px rgb(0 0 0 / 0.35));
}

.prelect-cinematic__brand {
  margin: 0;
  /* The only place the Bricolage display face is still used: intro lockup. */
  font-family: "Bricolage Grotesque", var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  font-weight: 600;
}

.prelect-cinematic__brand a {
  color: #ffffff;
  text-decoration: none;
}

.prelect-cinematic__eyebrow {
  margin: 0.35rem 0 0;
  color: color-mix(in srgb, var(--color-accent) 80%, #ffffff);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.prelect-cinematic__title {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}

.prelect-cinematic__lead {
  margin: 0;
  max-width: 28rem;
  color: rgb(255 255 255 / 0.86);
  font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.1rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.prelect-cinematic__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0.65rem 0 0;
}

.prelect-cinematic__chrome {
  position: absolute;
  z-index: 2;
  inset-inline-end: clamp(0.85rem, 3vw, 1.75rem);
  inset-block-end: clamp(0.85rem, 3vw, 1.75rem);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
}

.prelect-cinematic__enter,
.prelect-cinematic__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.65rem 1.35rem;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: filter 260ms var(--ease-out), transform 260ms var(--ease-out), background-color 260ms var(--ease-out);
}

.prelect-cinematic__enter {
  min-height: 2.45rem;
  padding: 0.55rem 1.15rem;
  font-size: 0.88rem;
  background: rgb(0 0 0 / 0.45);
  color: #ffffff;
  border: 1px solid rgb(255 255 255 / 0.45);
  backdrop-filter: blur(6px);
}

.prelect-cinematic__btn--primary {
  background-image: var(--gradient-accent);
  color: var(--color-accent-contrast, #0f1f21);
}

.prelect-cinematic__btn--ghost {
  background: rgb(255 255 255 / 0.1);
  color: #ffffff;
  border: 1px solid rgb(255 255 255 / 0.35);
}

.prelect-cinematic__enter:hover,
.prelect-cinematic__enter:focus-visible,
.prelect-cinematic__btn:hover,
.prelect-cinematic__btn:focus-visible {
  filter: brightness(1.06);
  outline: none;
  text-decoration: none;
}

/* Keep CTA label colour stable on hover (global `a:hover` must not win). */
.prelect-cinematic__btn--primary:hover,
.prelect-cinematic__btn--primary:focus-visible {
  color: var(--color-accent-contrast, #0f1f21);
}

.prelect-cinematic__btn--ghost:hover,
.prelect-cinematic__btn--ghost:focus-visible {
  color: #ffffff;
  background: rgb(255 255 255 / 0.18);
}

.prelect-cinematic__enter:focus-visible,
.prelect-cinematic__btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.prelect-cinematic--intro.is-leaving {
  opacity: 0;
  transition: opacity 900ms var(--ease-out, ease);
  pointer-events: none;
}

/* 404 / error: hide chrome; stage fills the viewport. */
body.prelect-cinematic-page .skip-link,
body.prelect-cinematic-page .site-header,
body.prelect-cinematic-page .site-nav,
body.prelect-cinematic-page .site-footer,
body.prelect-cinematic-page .prelect-dock,
body.prelect-cinematic-page .prelect-scroll-top,
body.prelect-cinematic-page .ask-widget {
  display: none !important;
}

body.prelect-cinematic-page .site-main {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  background: #061018;
}

body.prelect-cinematic-page .prelect-cinematic--404,
body.prelect-cinematic-page .prelect-cinematic--error {
  position: fixed;
}

body.prelect-home-intro .prelect-dock,
body.prelect-home-intro .prelect-scroll-top {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .prelect-cinematic--intro.is-leaving {
    transition: none;
  }

  .prelect-cinematic__enter,
  .prelect-cinematic__btn {
    transition: none;
  }
}

/* -----------------------------------------------------------------------------
 * Disclaimer dialog — emerald / gold palette (forms + dock)
 * -------------------------------------------------------------------------- */

.agency-block .agency-form__disclaimer-dialog,
.agency-form__disclaimer-dialog {
  border: 1px solid color-mix(in srgb, var(--color-gold, var(--color-accent)) 45%, var(--color-border));
  border-radius: 1rem;
  background: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-xl);
}

.agency-block .agency-form__disclaimer-dialog::backdrop,
.agency-form__disclaimer-dialog::backdrop {
  background: color-mix(in srgb, var(--color-primary-dark, var(--color-primary)) 62%, transparent);
}

.agency-block .agency-form__disclaimer-panel h3,
.agency-form__disclaimer-panel h3 {
  color: var(--color-primary-mid, var(--color-primary));
  font-family: var(--font-display);
}

.agency-block .agency-form__disclaimer-body,
.agency-form__disclaimer-body {
  color: var(--color-muted);
}

.agency-block .agency-form__disclaimer-open,
.agency-form__disclaimer-open {
  color: var(--color-gold, var(--color-accent));
}

.agency-block .agency-form__disclaimer-actions .agency-btn--primary,
.agency-form__disclaimer-actions .agency-btn--primary,
.agency-form__disclaimer-actions [data-agency-disclaimer-agree] {
  background-image: var(--gradient-accent);
  color: var(--color-accent-contrast);
  border-color: transparent;
}

/* -----------------------------------------------------------------------------
 * Hash targets — clear sticky header
 * -------------------------------------------------------------------------- */

:target,
.prelect-hash-anchor,
[id="why"],
[id="staffing"],
[id="locations"],
[id="collaboration"],
[id="mission"],
[id="team"],
[id="benefits"],
[id="apply"] {
  scroll-margin-top: calc(var(--site-header-offset, 4.25rem) + 0.75rem);
}

.prelect-hash-anchor {
  position: relative;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
 * Homepage banner — thin gold→emerald wash (match inner-page heroes)
 * -------------------------------------------------------------------------- */

body.home .agency-block .agency-video--banner::after,
.home .agency-block .agency-video--banner::after {
  background: var(
    --gradient-banner-scrim-copy,
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--color-gold, var(--color-accent)) 24%, transparent) 0%,
      color-mix(in srgb, var(--color-primary-soft, var(--color-primary)) 16%, transparent) 42%,
      color-mix(in srgb, var(--color-primary-dark, var(--color-primary)) 52%, transparent) 100%
    )
  );
}

/* -----------------------------------------------------------------------------
 * Single job — corporate role detail
 * -------------------------------------------------------------------------- */

.single-job {
  padding-block-end: 4.5rem;
}

.single-job__banner {
  position: relative;
  display: grid;
  place-items: end stretch;
  min-height: clamp(15rem, 38vw, 24rem);
  overflow: hidden;
  color: #ffffff;
  background-color: var(--color-primary-dark, #154850);
  background-image: var(--single-job-poster, none);
  background-size: cover;
  background-position: center;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), 0 100%);
  margin-block-end: -1.5rem;
}

.single-job__banner-video,
.single-job__banner-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.single-job__banner-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(
    --gradient-banner-scrim-copy,
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--color-gold, var(--color-accent)) 22%, transparent) 0%,
      color-mix(in srgb, var(--color-primary-soft, var(--color-primary)) 18%, transparent) 40%,
      color-mix(in srgb, var(--color-primary-dark, var(--color-primary)) 62%, transparent) 100%
    )
  );
  pointer-events: none;
}

.single-job__banner-inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.25rem, 7vw, 5rem) clamp(3rem, 6vw, 4.5rem);
  max-width: min(100%, 46rem);
  text-align: start;
}

.single-job__eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.single-job__eyebrow a {
  color: color-mix(in srgb, var(--color-gold-light, var(--color-accent)) 85%, #ffffff);
  text-decoration: none;
}

.single-job__eyebrow a:hover,
.single-job__eyebrow a:focus-visible {
  color: #ffffff;
  text-decoration: underline;
}

.single-job__title {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.12;
  text-wrap: balance;
}

.single-job__company {
  margin: 0.55rem 0 0;
  color: color-mix(in srgb, var(--color-gold-light, var(--color-accent)) 70%, #ffffff);
  font-size: 1rem;
  font-weight: 600;
}

.single-job__lead {
  margin: 0.7rem 0 0;
  max-width: 38rem;
  color: rgb(255 255 255 / 0.88);
  font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.1rem);
  line-height: 1.5;
}

.single-job__banner-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  margin-block-start: 1rem;
}

.single-job__banner-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.single-job__banner-loc {
  color: rgb(255 255 255 / 0.86);
  font-size: 0.88rem;
  font-weight: 500;
}

.single-job__body {
  position: relative;
  z-index: 1;
  padding-block: calc(var(--section-y, 4rem) + 0.75rem) var(--section-y, 4rem);
}

.single-job__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}

@media (min-width: 960px) {
  .single-job__layout {
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
    gap: 2.25rem;
  }
}

.single-job__main {
  min-width: 0;
}

.single-job__content {
  margin-block-end: 1.5rem;
  color: var(--color-text);
  font-family: var(--font-body, inherit);
  font-size: var(--step-1);
  line-height: var(--leading-relaxed);
}

.single-job__content > *:first-child {
  margin-block-start: 0;
}

.single-job__content h2,
.single-job__content h3,
.single-job__content h4 {
  color: var(--color-text);
  font-family: var(--font-display, inherit);
}

.single-job__content ul,
.single-job__content ol {
  margin-block: 0;
  padding-inline-start: 1.5em;
}

.single-job__content ul {
  list-style-type: disc;
}

.single-job__content ol {
  list-style-type: decimal;
}

.single-job__content li {
  padding-inline-start: 0.25em;
}

.single-job__content li::marker {
  color: var(--color-gold, var(--color-accent));
}

.single-job__content li + li {
  margin-block-start: 0.55rem;
}

.single-job__content h2 + ul,
.single-job__content h2 + ol,
.single-job__content h3 + ul,
.single-job__content h3 + ol,
.single-job__content p + ul,
.single-job__content p + ol {
  margin-block-start: 0.85rem;
}

.single-job__content .wp-block-list,
.single-job__content ul.wp-block-list,
.single-job__content ol.wp-block-list {
  padding-inline-start: 1.5em;
}

.single-job__content a:not(.btn):not(.agency-btn) {
  color: var(--color-primary-mid, var(--color-primary));
}

.single-job__aside {
  min-width: 0;
}

.single-job__aside-card {
  display: grid;
  gap: 1rem;
  padding: 1.15rem 1.2rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--color-gold, var(--color-accent)) 30%, var(--color-border));
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--color-gold, var(--color-accent)) 9%, var(--color-surface-raised)) 0%,
      var(--color-surface-raised) 55%,
      color-mix(in srgb, var(--color-primary) 5%, var(--color-surface-raised)) 100%
    );
}

@media (min-width: 960px) {
  .single-job__aside-card {
    position: sticky;
    top: calc(var(--header-height, 4.5rem) + 1rem);
  }
}

.single-job__aside-kicker {
  margin: 0;
  color: var(--color-primary-mid, var(--color-primary));
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.single-job__aside-facts {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.single-job__aside-fact {
  display: grid;
  gap: 0.15rem;
  padding-block-end: 0.7rem;
  border-block-end: 1px solid color-mix(in srgb, var(--color-border) 85%, transparent);
}

.single-job__aside-fact:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.single-job__aside-fact dt {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.single-job__aside-fact dd {
  margin: 0;
  color: var(--color-text);
  font-size: 0.98rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.single-job__aside-apply {
  width: 100%;
  justify-content: center;
  text-align: center;
}

.single-job__aside-browse {
  color: var(--color-primary-mid, var(--color-primary));
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.single-job__aside-browse:hover,
.single-job__aside-browse:focus-visible {
  color: var(--color-gold, var(--color-accent));
  text-decoration: underline;
}

.single-job__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.single-job__actions .btn {
  min-height: 2.75rem;
}

@media (min-width: 960px) {
  .single-job__actions--inline {
    display: none;
  }
}

.single-job__mobile-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: calc(var(--z-sticky, 100) + 2);
  display: grid;
  /* Leave room for the floating contact dock on the trailing edge. */
  padding: 0.65rem 4.75rem 0.65rem 0.85rem;
  padding-block-end: calc(0.65rem + env(safe-area-inset-bottom, 0px));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-surface-raised) 72%, transparent) 0%,
      var(--color-surface-raised) 35%
    );
  border-block-start: 1px solid color-mix(in srgb, var(--color-gold, var(--color-accent)) 28%, var(--color-border));
  box-shadow: 0 -10px 28px color-mix(in srgb, #000 18%, transparent);
}

.single-job__mobile-bar .btn {
  width: 100%;
  justify-content: center;
  min-height: 2.85rem;
}

@media (min-width: 960px) {
  .single-job__mobile-bar {
    display: none;
  }

  .single-job {
    padding-block-end: 0;
  }
}

@media (max-width: 959.98px) {
  .single-job__aside {
    display: none;
  }
}

[data-theme="dark"] .single-job__aside-card {
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--color-gold, var(--color-accent)) 12%, var(--color-surface-raised)) 0%,
      var(--color-surface-raised) 58%
    );
}

[data-theme="dark"] .single-job__aside-fact dt {
  color: color-mix(in srgb, var(--color-muted) 90%, #fff);
}

[data-theme="dark"] .single-job__mobile-bar {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-surface-raised) 55%, transparent) 0%,
      color-mix(in srgb, var(--color-primary-dark, #0b1718) 92%, #000) 40%
    );
}

/* -----------------------------------------------------------------------------
 * Dark mode — restore contrast where ink was hardcoded for light surfaces
 * -------------------------------------------------------------------------- */

[data-theme="dark"] .prelect-dock__tab {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-accent) 18%, var(--color-surface)) 0%,
    color-mix(in srgb, var(--color-primary) 22%, var(--color-bg-muted)) 100%
  );
  color: var(--color-muted);
}

[data-theme="dark"] .prelect-dock__close {
  color: var(--color-text);
}

/*
 * Dock form pane stays white — keep dark ink (global dark-mode form/headline
 * rules otherwise paint light text on the white pane).
 */
[data-theme="dark"] .prelect-dock__form-pane {
  background: #ffffff;
  color: #0f1f21;
}

[data-theme="dark"] .prelect-dock__form-pane .prelect-dock__headline,
[data-theme="dark"] .prelect-dock__form-pane .prelect-dock__note,
[data-theme="dark"] .prelect-dock__form-pane .prelect-dock__consent,
[data-theme="dark"] .prelect-dock__form-pane .agency-form__field > label {
  background: #ffffff;
  color: #0f1f21;
  -webkit-text-fill-color: #0f1f21;
  border-color: color-mix(in srgb, #0f1f21 22%, #ffffff);
}

[data-theme="dark"] .prelect-dock__form-pane .agency-form__field:focus-within > label,
[data-theme="dark"] .prelect-dock__form-pane .agency-form__field.is-filled > label {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  background-color: var(--color-primary);
  border-color: var(--color-gold, var(--color-accent));
}

[data-theme="dark"] .prelect-dock__form-pane .prelect-dock__note,
[data-theme="dark"] .prelect-dock__form-pane .prelect-dock__consent {
  color: #4b6467;
  -webkit-text-fill-color: #4b6467;
}

[data-theme="dark"] .prelect-dock__form-pane .agency-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
[data-theme="dark"] .prelect-dock__form-pane .agency-form textarea,
[data-theme="dark"] .prelect-dock__form-pane .agency-form select {
  background: #ffffff;
  color: #0f1f21;
  -webkit-text-fill-color: #0f1f21;
  border-color: color-mix(in srgb, #0f1f21 22%, #ffffff);
}

[data-theme="dark"] .prelect-dock__form-pane .agency-form select option {
  background: #ffffff;
  color: #0f1f21;
}

[data-theme="dark"] .mega-drawer__group-heading {
  color: var(--color-gold-light, var(--color-accent));
  border-block-end-color: var(--color-gold, var(--color-accent));
}

[data-theme="dark"] .agency-block .agency-eyebrow {
  border-block-end-color: var(--color-gold, var(--color-accent));
}

[data-theme="dark"] .mega-drawer__link-desc {
  color: var(--color-muted);
}

[data-theme="dark"] .mega-drawer__overview-page {
  color: var(--color-primary-soft, var(--color-primary-light));
}

[data-theme="dark"] .mega-drawer__overview-word,
[data-theme="dark"] .mega-drawer__overview-arrow {
  color: var(--color-gold-light, var(--color-accent));
}

[data-theme="dark"] .mega-drawer__link-title {
  color: var(--color-text);
}

[data-theme="dark"] .prelect-dock__note,
[data-theme="dark"] .prelect-dock__consent {
  color: var(--color-muted);
}

[data-theme="dark"] .agency-form__disclaimer-dialog {
  background: var(--color-surface-raised);
  color: var(--color-text);
  border-color: color-mix(in srgb, var(--color-gold, var(--color-accent)) 40%, var(--color-border));
}

[data-theme="dark"] .agency-form__disclaimer-panel h3 {
  color: var(--color-gold-light, var(--color-accent));
}

[data-theme="dark"] .single-article__author a,
[data-theme="dark"] .single-article__meta,
[data-theme="dark"] .page-article .page-title,
[data-theme="dark"] .page-article .section__lead,
[data-theme="dark"] .prose,
[data-theme="dark"] .prose p,
[data-theme="dark"] .prose li,
[data-theme="dark"] .prose h2,
[data-theme="dark"] .prose h3,
[data-theme="dark"] .prose h4,
[data-theme="dark"] .prose strong,
[data-theme="dark"] .prose b,
[data-theme="dark"] .single-job__content,
[data-theme="dark"] .single-job__content p,
[data-theme="dark"] .single-job__content li,
[data-theme="dark"] .single-job__content h2,
[data-theme="dark"] .single-job__content h3,
[data-theme="dark"] .single-job__content h4,
[data-theme="dark"] .entry-content,
[data-theme="dark"] .entry-content p,
[data-theme="dark"] .entry-content li {
  color: var(--color-text);
}

[data-theme="dark"] .prose a:not(.btn):not(.agency-btn),
[data-theme="dark"] .single-job__content a:not(.btn):not(.agency-btn),
[data-theme="dark"] .entry-content a:not(.btn):not(.agency-btn) {
  color: var(--color-gold-light, var(--color-accent));
}

[data-theme="dark"] .prose .lead,
[data-theme="dark"] .prose figcaption,
[data-theme="dark"] .single-job__aside-fact dt,
[data-theme="dark"] .single-job__company,
[data-theme="dark"] .single-job__lead {
  color: var(--color-muted);
}

[data-theme="dark"] .agency-block .agency-card__text,
[data-theme="dark"] .agency-block .agency-head__lead,
[data-theme="dark"] .agency-block p,
[data-theme="dark"] .agency-block li,
[data-theme="dark"] .agency-block dd,
[data-theme="dark"] .agency-block .agency-stat__label,
[data-theme="dark"] .agency-block .agency-process__body,
[data-theme="dark"] .site-footer,
[data-theme="dark"] .site-footer p,
[data-theme="dark"] .site-footer li,
[data-theme="dark"] .site-footer a,
[data-theme="dark"] .archive-heading,
[data-theme="dark"] .archive-lead,
[data-theme="dark"] .job-row__meta,
[data-theme="dark"] .job-row__excerpt,
[data-theme="dark"] .card-job__meta,
[data-theme="dark"] .card-job__excerpt {
  color: var(--color-muted);
}

[data-theme="dark"] .agency-block .agency-head__title,
[data-theme="dark"] .agency-block .agency-card__title,
[data-theme="dark"] .agency-block .agency-stat__value,
[data-theme="dark"] .job-row__title,
[data-theme="dark"] .card-job__title,
[data-theme="dark"] .page-title,
[data-theme="dark"] .section__title {
  color: var(--color-text);
}

/* White stats cards on inverse bands keep dark ink in dark mode. */
[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat__value,
[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat .agency-counter,
[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat .agency-counter__value {
  color: var(--color-primary, #1d6066);
}

[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat__label,
[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat__note,
[data-theme="dark"] .agency-block--bg-inverse .agency-stats--highlight .agency-stat__desc {
  color: #0f1f21;
}

[data-theme="dark"] .empty-state__title,
[data-theme="dark"] .empty-state p {
  color: var(--color-text);
}

/* -----------------------------------------------------------------------------
 * Mobile QA pass — overflow, dock clearance, tighter chrome.
 * -------------------------------------------------------------------------- */
@media (max-width: 47.99em) {
  .site-main,
  .agency-block__inner,
  .mega-drawer__panel,
  .single-job__body {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .agency-block img,
  .agency-block video {
    max-width: 100%;
  }

  .prelect-dock {
    inset-inline-end: max(0.75rem, env(safe-area-inset-right));
    inset-block-end: max(0.75rem, env(safe-area-inset-bottom));
  }

  .single-job__mobile-bar {
    padding-inline: max(0.75rem, env(safe-area-inset-left)) max(0.75rem, env(safe-area-inset-right));
    padding-block-end: max(0.65rem, env(safe-area-inset-bottom));
  }

  .mega-drawer__panel {
    padding-inline: 1rem;
  }

  .site-footer__grid {
    gap: 1.5rem;
  }
}

/*
 * Final mobile dock pass — must come last so dark-mode / QA rules cannot
 * resurrect the centered modal card. Phones only; tablet+ unchanged.
 */
@media (max-width: 767.98px) {
  .prelect-dock__panel,
  .prelect-dock__panel:not([hidden]),
  .prelect-dock__panel.is-open {
    padding: 0 !important;
    place-items: stretch !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    display: block !important;
  }

  .prelect-dock__panel[hidden] {
    display: none !important;
  }

  .prelect-dock__split {
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) !important;
    transform: translate3d(100%, 0, 0) !important;
    opacity: 1 !important;
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .prelect-dock__panel.is-open .prelect-dock__split {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
  }

  .prelect-dock__brand-pane {
    display: none !important;
  }

  .prelect-dock__form-pane {
    height: 100% !important;
    max-height: none !important;
    min-height: 100% !important;
  }

  .prelect-dock__tabs {
    padding: 0.55rem 3.5rem 0.15rem 0.65rem !important;
  }

  .prelect-dock__panels {
    padding: 0.85rem 0.85rem 1.25rem !important;
  }

  .prelect-dock__close {
    inset-block-start: 0.5rem !important;
    inset-inline-end: 0.5rem !important;
    width: 2.35rem !important;
    height: 2.35rem !important;
    font-size: 1.35rem !important;
  }
}