/* ═══════════════════════════════════════════════════════════════════
   ADM DEVELOPER — COMPONENTS
   Buttons, badges, cards, KPI tiles, form elements
   ═══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════
   BUTTONS
   ══════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.75rem;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.btn i { font-size: 1.1em; }

/* Primary — brand fill */
.btn--primary {
  background: var(--color-brand);
  color: #ffffff;
  border-color: var(--color-brand);
}

.btn--primary:hover {
  background: var(--color-brand-hover);
  color: #ffffff;
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

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

/* Secondary — outlined */
.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn--secondary:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: var(--color-brand-dim);
}

/* Yellow — secondary CTA colour */
.btn--yellow {
  background: var(--color-yellow);
  color: #000000;
  border-color: var(--color-yellow);
}

.btn--yellow:hover {
  background: var(--color-yellow);
  color: #000000;
  border-color: var(--color-yellow);
  box-shadow: 0 0 20px rgba(255, 212, 0, 0.25);
  transform: translateY(-1px);
}

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

.btn--yellow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 25%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 75%
  );
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}

.btn--yellow:hover::after {
  transform: translateX(100%);
}

/* Ghost — minimal */
.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
  padding-left: var(--space-3);
  padding-right: var(--space-3);
}

.btn--ghost:hover {
  color: var(--color-brand);
  background: var(--color-brand-dim);
}

/* Glass — glassmorphic */
.btn--glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  color: var(--color-text);
  border-color: var(--glass-border);
}

.btn--glass:hover {
  border-color: var(--color-border-brand);
  box-shadow: var(--shadow-glow);
}

/* Sizes */
.btn--sm {
  padding: 0.5rem 1rem;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}

.btn--lg {
  padding: 1rem 2.25rem;
  font-size: var(--font-size-base);
  border-radius: var(--radius-lg);
}

.btn--xl {
  padding: 1.125rem 2.75rem;
  font-size: var(--font-size-lg);
  border-radius: var(--radius-lg);
}

/* Icon-only button */
.btn--icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-md);
}

.btn--icon.btn--sm { width: 32px; height: 32px; }
.btn--icon.btn--lg { width: 48px; height: 48px; }

/* Button shimmer effect on hover */
.btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 25%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 75%
  );
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}

.btn--primary:hover::after {
  transform: translateX(100%);
}


/* ══════════════════════════════
   BADGES
   ══════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2em 0.6em;
  font-family: var(--font-mono);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-xs);
  border: 1px solid;
  white-space: nowrap;
  line-height: 1.4;
}

.badge--brand {
  background: var(--color-brand-dim);
  color: var(--color-brand);
  border-color: var(--color-border-brand);
}

.badge--blue {
  background: var(--color-blue-dim);
  color: var(--color-blue);
  border-color: rgba(43, 108, 176, 0.2);
}

.badge--green {
  background: var(--color-green-dim);
  color: var(--color-green);
  border-color: rgba(39, 103, 73, 0.2);
}

.badge--amber {
  background: var(--color-amber-dim);
  color: var(--color-amber);
  border-color: rgba(192, 86, 33, 0.2);
}

.badge--red {
  background: var(--color-red-dim);
  color: var(--color-red);
  border-color: rgba(197, 48, 48, 0.2);
}

.badge--purple {
  background: var(--color-purple-dim);
  color: var(--color-purple);
  border-color: rgba(107, 70, 193, 0.2);
}

.badge--neutral {
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

/* Dot indicator inside badge */
.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.badge__dot--pulse {
  animation: adm-pulse 2s ease-in-out infinite;
}

@keyframes adm-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px currentColor; }
  50% { opacity: 0.3; box-shadow: 0 0 2px currentColor; }
}


/* ══════════════════════════════
   CARDS
   ══════════════════════════════ */

/* Client logo grid — fills parent height, 3 columns */
.client-logos-wrap {
  width: 100%;
  height: 100%;
}

.client-logos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--space-3);
  height: 100%;
}

.client-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.client-logo-card__img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) ease,
              box-shadow var(--duration-base) ease;
}

.card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

/* Card with subtle brand gradient overlay */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(var(--color-brand-rgb), 0.02), transparent 55%);
  pointer-events: none;
}

/* Elevated card (lifts on hover) */
.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Glass card */
.card--glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-color: var(--glass-border);
}

/* Featured card with brand accent */
.card--featured {
  border-color: var(--color-border-brand);
}

.card--featured::before {
  background: linear-gradient(135deg, rgba(var(--color-brand-rgb), 0.05), transparent 55%);
}

/* Card title */
.card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

/* Card description */
.card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* Card meta */
.card__meta {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-muted);
}

/* Card image area */
.card__image {
  margin: calc(var(--space-6) * -1);
  margin-bottom: var(--space-6);
  overflow: hidden;
}

.card__image img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.card--hover:hover .card__image img {
  transform: scale(1.03);
}


/* ══════════════════════════════
   TESTIMONIAL CARDS
   ══════════════════════════════ */

.testimonial-card {
  padding: var(--space-12);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.testimonial-card__quote {
  font-size: 56px;
  color: var(--color-brand);
  line-height: 1;
  opacity: 0.4;
}

.testimonial-card__text {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-relaxed);
  color: var(--color-text);
  margin: 0;
  max-width: 760px;
}

.testimonial-card__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.testimonial-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 80px;
}

.testimonial-card__logo-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.testimonial-card__author-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin: 0;
}

.testimonial-card__author-title {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
  margin-top: var(--space-1);
}


/* ══════════════════════════════
   REVIEW BADGES
   ══════════════════════════════ */

.review-badge-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-6);
  min-height: 120px;
}

.review-badge-card__img {
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}


/* ══════════════════════════════
   TEAM CARDS
   ══════════════════════════════ */

.team-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team-card__photo {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  position: relative;
}

/* Quick bio revealed on hover over the photo */
.team-card__bio {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
  background: linear-gradient(to top, rgba(10,10,15,.94) 22%, rgba(10,10,15,.45) 62%, transparent);
  color: #fff;
  opacity: 0;
  transition: opacity var(--duration-base) ease;
  pointer-events: none;
}
.team-card__bio p {
  font-size: var(--font-size-sm);
  line-height: 1.5;
  margin: 0;
  color: #fff;
}
.team-card:hover .team-card__bio,
.team-card:focus-within .team-card__bio {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) { .team-card__bio { transition: none; } }

.team-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.team-card:hover .team-card__img {
  transform: scale(1.05);
}

.team-card__info {
  padding: 0 var(--space-2) var(--space-2);
}

.team-card__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.team-card__role {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.team-card__socials {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

.team-card__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 16px;
  transition: all var(--duration-fast) ease;
  text-decoration: none;
}

.team-card__social:hover {
  color: var(--color-brand);
  border-color: var(--color-brand);
  background: var(--color-brand-dim);
}


/* ══════════════════════════════
   SERVICE CARDS
   ══════════════════════════════ */

/* Card — fixed height, flex column, image shrinks on hover */
.svc-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  height: 420px;
  padding: var(--space-4);
  justify-content: flex-end;
}

/* Image — fills remaining space, shrinks on hover to make room */
.svc-card__image {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-sm);
  flex: 1 1 auto;
  min-height: 0;
  transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.svc-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Body anchored to bottom, never shrinks */
.svc-card__body {
  flex-shrink: 0;
  padding: var(--space-3) 0 0;
  display: flex;
  flex-direction: column;
}

.svc-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

/* Summary — collapsed by default, expands on hover */
.svc-card__summary {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease;
}

.svc-card__summary > p {
  min-height: 0;
  overflow: hidden;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
  padding-bottom: var(--space-2);
}

.svc-card:hover .svc-card__summary {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* On hover, image gives up all flex space — shrinks as much as needed */
.svc-card:hover .svc-card__image {
  flex: 0 1 100%;
}


/* ══════════════════════════════
   CASE STUDY CARDS
   ══════════════════════════════ */

.cs-card {
  --cs-surface: #ffffff; /* cs-cards are always white in light mode (never follow a grey section surface); dark mode + dark/black/magenta sections override this below. Body + badge shelf share this token so they always match. */
  background: var(--cs-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) ease,
              box-shadow var(--duration-base) ease;
}

/* Dark mode: cards follow the dark surface token instead of staying white. */
html[data-theme="dark"] .cs-card { --cs-surface: var(--color-surface-1); }

.cs-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
}

.cs-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Image area */
.cs-card__image {
  position: relative;
  aspect-ratio: 16 / 14;
  overflow: hidden;
}

.cs-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.cs-card:hover .cs-card__img {
  transform: scale(1.05);
}

/* Category badge — white shelf flush to the card's left edge that flows up to
   cradle the pill, with ONE smooth concave shoulder on the right curving back
   into the image. Flush-left avoids any detached notch on the left. */
.cs-card__badge-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3; /* above .cs-card__img-overlay (z-index:1) so the .45 black tint never greys the white shelf */
  background: var(--cs-surface);
  border-radius: 0 24px 0 0;
  padding: 14px 22px 16px var(--space-6);
}

/* Single concave shoulder on the right — white flows out and down to the baseline */
.cs-card__badge-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -24px;
  width: 24px;
  height: 24px;
  background: var(--cs-surface);
  -webkit-mask: radial-gradient(circle at top right, transparent 24px, #000 24.5px);
          mask: radial-gradient(circle at top right, transparent 24px, #000 24.5px);
}

/* Magenta pill sits within the flowing shelf */
.cs-card__badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: #ffffff;
  background: var(--color-brand);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  white-space: nowrap;
}

/* Card body.
   The card is already full row height (grid stretch + height:100%), but with a
   body that did not grow, the Read More button landed wherever the title
   happened to end — two lines on one card, three on the next, so a row of
   cards read as a ragged edge. The body fills the card and the button pins to
   the bottom, exactly as the .adm-card row does. */
.cs-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* Client logo on the featured image, over a black overlay so it stays visible. */
.cs-card__img-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(0,0,0,.45); pointer-events: none; }
.cs-card__img-logo { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: var(--space-6); pointer-events: none; }
.cs-card__img-logo img { max-width: 72%; max-height: 84px; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); }

.cs-card__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug);
  color: var(--color-text);
  margin-bottom: var(--space-4);
  flex: 1;
  /* The card title falls back to campaign_name, which is a results-led sentence rather than a
     name: the two MotorcycleInsurance.org.uk ones run to 105 and 108 characters and pushed their
     cards far taller than the rest of the row. Three lines is enough to carry the result and the
     client; past that the card stops being scannable. Capped rather than truncated in PHP so the
     full sentence stays in the DOM for search engines and screen readers.
     Anything that needs a different cap sets .line-clamp-2 or .line-clamp-3 from utilities.css,
     which is enqueued after this file and therefore wins — the awards cards already do. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* The title is a flex item (flex: 1 above), and a flex item's display is blockified — Chrome
     turns -webkit-box into flow-root here, which it still clamps, but Safari is not guaranteed to.
     max-height caps the box at three lines whatever the browser does with the display value:
     3 lines x --line-height-snug (1.25) of the element's own font-size. */
  max-height: calc(3em * 1.25);
}

/* Client logo area */
.cs-card__client {
  margin-bottom: var(--space-4);
}

.cs-card__client-label {
  display: block;
  font-size: var(--font-size-2xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  margin-bottom: var(--space-2);
}

.cs-card__client-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-height: 48px;
  min-width: 96px;
  max-width: 160px;
}

.cs-card__client-logo {
  height: 28px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

html[data-theme="dark"] .cs-card__client-logo-wrap,
.adm-section--dark .cs-card__client-logo-wrap {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .cs-card__client-logo {
  mix-blend-mode: screen;
  filter: brightness(1.8);
}

.adm-section--magenta .cs-card__client-logo-wrap {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.95);
}

/* Read More CTA */
.cs-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  justify-content: center;
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) ease,
              color var(--duration-fast) ease;
}

.cs-card:hover .cs-card__cta,
.svc-card:hover .cs-card__cta,
.card:hover .cs-card__cta {
  background: var(--color-text);
  color: var(--color-bg);
}

.cs-card__cta svg {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-fast) ease;
}

.cs-card:hover .cs-card__cta svg,
.svc-card:hover .cs-card__cta svg,
.card:hover .cs-card__cta svg {
  transform: translateX(3px);
}

/* Dark/black sections: drive the shared surface var so body + badge shelf stay in lock-step (solid, not translucent) */
.adm-section--dark .cs-card,
.adm-section--black .cs-card {
  --cs-surface: #16161c;
  border-color: rgba(255, 255, 255, 0.08);
}

.adm-section--dark .cs-card:hover,
.adm-section--black .cs-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
}


/* ══════════════════════════════
   KPI CARDS (dashboard-inspired)
   ══════════════════════════════ */

.kpi {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  position: relative;
  overflow: hidden;
  text-align: center;
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) ease;
}

.kpi:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
}

/* Glow orb in top-right corner */
.kpi__glow {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  opacity: 0.1;
  filter: blur(20px);
  pointer-events: none;
}

.kpi__label {
  display: block;
  font-size: var(--font-size-2xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  margin-top: var(--space-2);
  margin-bottom: 0;
}

.kpi__value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1;
  color: var(--color-text);
}

.kpi__trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
}

.kpi__trend--up { color: var(--color-green); }
.kpi__trend--down { color: var(--color-red); }


/* ══════════════════════════════
   FORM ELEMENTS
   ══════════════════════════════ */

.input,
.textarea,
.select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease;
}

.input:focus,
.textarea:focus,
.select:focus {
  border-color: rgba(var(--color-brand-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--color-brand-rgb), 0.1);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-text-muted);
}

.textarea {
  min-height: 120px;
  resize: vertical;
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b6b6b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}


/* ══════════════════════════════
   DIVIDERS
   ══════════════════════════════ */

.divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-6) 0;
}

.divider--brand {
  background: linear-gradient(90deg, var(--color-brand), transparent);
}


/* ══════════════════════════════
   AVATAR
   ══════════════════════════════ */

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
}

.avatar--sm { width: 32px; height: 32px; }
.avatar--lg { width: 64px; height: 64px; }
.avatar--xl { width: 96px; height: 96px; }

.avatar-group {
  display: flex;
}

.avatar-group .avatar {
  margin-left: -8px;
  border-color: var(--color-surface-1);
}

.avatar-group .avatar:first-child {
  margin-left: 0;
}


/* ══════════════════════════════
   PROGRESS BAR
   ══════════════════════════════ */

.progress {
  height: 4px;
  background: var(--color-surface-3);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  transition: width 0.65s var(--ease-spring);
}

.progress__bar--blue { background: var(--color-blue); }
.progress__bar--green { background: var(--color-green); }
.progress__bar--amber { background: var(--color-amber); }
.progress__bar--purple { background: var(--color-purple); }


/* ══════════════════════════════
   ACCORDION
   ══════════════════════════════ */

.adm-accordion__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.adm-accordion__item + .adm-accordion__item {
  margin-top: var(--space-2);
}

.adm-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-1);
  border: none;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: background var(--duration-fast) ease;
  gap: var(--space-4);
}

.adm-accordion__trigger:hover {
  background: var(--color-surface-2);
}

.adm-accordion__trigger i {
  transition: transform var(--duration-base) var(--ease-out);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.adm-accordion__item.is-open .adm-accordion__trigger i {
  transform: rotate(180deg);
}

.adm-accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease-out);
}

.adm-accordion__panel > div,
.adm-accordion__panel > .prose {
  padding: 0 var(--space-5) var(--space-5);
}


/* ══════════════════════════════
   TABS
   ══════════════════════════════ */

.adm-tabs__nav {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.adm-tabs__tab {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--duration-fast) ease;
  margin-bottom: -1px;
  white-space: nowrap;
  flex-shrink: 0;
}

.adm-tabs__tab.is-active {
  color: var(--color-brand);
  border-bottom-color: var(--color-brand);
}

.adm-tabs__tab:hover {
  color: var(--color-text);
}

.adm-tabs__panel {
  display: none;
}

.adm-tabs__panel.is-active {
  display: block;
  animation: fadeInUp 0.3s var(--ease-out);
}


/* ══════════════════════════════
   VIDEO PLAYER
   ══════════════════════════════ */

.adm-video {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.adm-video__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.adm-video:hover .adm-video__poster {
  transform: scale(1.03);
}

.adm-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.adm-video__play-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(var(--color-brand-rgb), 0.9);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 0 30px rgba(var(--color-brand-rgb), 0.4);
  transition: transform var(--duration-base) var(--ease-spring);
}

.adm-video:hover .adm-video__play-btn {
  transform: scale(1.1);
}

.adm-video.is-playing .adm-video__play {
  display: none;
}

.adm-video__caption {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}


/* ══════════════════════════════
   CAROUSEL / SLIDER
   ══════════════════════════════ */

.adm-carousel {
  position: relative;
  overflow: hidden;
}

.adm-carousel__track {
  display: flex;
  gap: var(--space-6);
  transition: transform var(--duration-slow) var(--ease-out);
}

.adm-carousel__slide {
  flex-shrink: 0;
}

/* A flex track stretches every slide to the tallest one. On desktop, where several slides sit
   side by side, that is what you want — ragged card bottoms in a row look broken. On a phone
   only one slide is visible at a time, so there is nothing to line up with, and the stretch
   just pads every shorter review out to the height of the longest: measured on the homepage,
   36 review slides all forced to 1629px while the cards themselves ran 1269–1629px, leaving up
   to 360px of blank space under the short ones. One at a time, each slide takes its own height. */
@media (max-width: 860px) {
  .adm-carousel__track { align-items: flex-start; }
}

.adm-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.adm-carousel__prev,
.adm-carousel__next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface-1);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  flex-shrink: 0;
}

.adm-carousel__prev:hover,
.adm-carousel__next:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.adm-carousel__prev:disabled,
.adm-carousel__next:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.adm-carousel__dots {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.adm-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--color-border-strong);
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  padding: 0;
}

.adm-carousel__dot.is-active {
  background: var(--color-brand);
  width: 24px;
  border-radius: var(--radius-full);
}

/* Visible against dark / magenta sections */
.adm-section--dark .adm-carousel__dot,
.adm-section--magenta .adm-carousel__dot {
  background: rgba(255, 255, 255, 0.35);
}

.adm-section--dark .adm-carousel__dot:hover,
.adm-section--magenta .adm-carousel__dot:hover {
  background: rgba(255, 255, 255, 0.6);
}

.adm-section--dark .adm-carousel__dot.is-active { background: var(--color-brand); }
/* On magenta the brand dot vanishes against the brand bg — use solid white. */
.adm-section--magenta .adm-carousel__dot.is-active { background: #ffffff; }

/* Prev/next legibility on dark/magenta: hover must not flip to brand-magenta (invisible on magenta). */
.adm-section--dark .adm-carousel__prev, .adm-section--dark .adm-carousel__next,
.adm-section--black .adm-carousel__prev, .adm-section--black .adm-carousel__next,
.adm-section--magenta .adm-carousel__prev, .adm-section--magenta .adm-carousel__next {
  border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.10);
}
.adm-section--magenta .adm-carousel__prev:hover, .adm-section--magenta .adm-carousel__next:hover {
  border-color: #fff; color: #fff; background: rgba(255,255,255,.18);
}

/* Inline SVG icon sizing inside buttons */
.adm-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}


/* ══════════════════════════════
   AWARD LAUREL BADGE
   ══════════════════════════════ */

.adm-hero-award {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.adm-hero-award__text {
  text-align: center;
}

.adm-hero-award__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-mono);
  color: var(--color-text);
  margin: 0;
  line-height: var(--line-height-snug);
}

.adm-hero-award__event {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-mono);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text);
  margin: var(--space-1) 0 0;
}

.adm-laurel {
  flex-shrink: 0;
  color: var(--color-text);
  width: 16px;
  height: auto;
}

[data-bg="Dark"] .adm-laurel,
.adm-section--dark .adm-laurel {
  color: #ffffff;
}

/* Magenta sections: white laurel + white text */
[data-bg="Magenta"] .adm-laurel,
[data-bg="Purple"] .adm-laurel,
.adm-section--magenta .adm-laurel {
  color: #ffffff;
}

.adm-section--dark .adm-hero-award__name,
.adm-section--dark .adm-hero-award__event,
.adm-section--magenta .adm-hero-award__name,
.adm-section--magenta .adm-hero-award__event {
  color: #ffffff;
}

/* Hero with a background image (darkish overlay) — force white laurels
   so the badge stays visible over the overlaid image regardless of bg_colour. */
.adm-hero-casestudy.adm-section--has-bg-image[data-bg="Dark"] .adm-laurel,
.adm-hero-casestudy.adm-section--has-bg-image[data-bg="Magenta"] .adm-laurel {
  color: #ffffff;
}

/* Form card (hero form) — glass effect */
.adm-form-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-color: var(--glass-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.adm-form-card__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-6);
  text-align: center;
}


/* ══════════════════════════════
   CONTACT FORM 7 STYLING
   Premium SaaS-inspired form design.
   ══════════════════════════════ */

.wpcf7 {
  width: 100%;
}

.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Labels */
.wpcf7-form label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

/* All text inputs, email, tel, url, number */
/* CF7 wraps each control in an inline <span>, so any width set on the wrap is ignored and the
   control shrink-wraps. Make the wrap a block once, globally, so every imported form's controls can
   fill their column. */
.wpcf7-form .wpcf7-form-control-wrap { display: block; width: 100%; }

/* CF7 groups fields in <fieldset>, which the browser gives a `2px groove` border (the stray grey box
   around the whitepaper form) and `min-width: min-content` — the latter is a long-standing quirk that
   stops flex/grid descendants sizing correctly, which is why the two name columns collapsed to 192px
   while the full-width email column measured 774px in the same form. */
.wpcf7-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Imported forms carry Bootstrap grid classes, but Bootstrap's grid CSS is not loaded here — so
   `.row` computes to flex while `.col-*` children keep `flex: 0 1 auto`, i.e. shrink-to-fit. Widths
   therefore tracked the LABEL text rather than the grid: the long "in-person meeting" question filled
   the row while the short "remote setting" one collapsed to ~300px.
   Important: this form uses `col-md-12` for BOTH single fields and side-by-side pairs, so the class
   cannot tell them apart — the only reliable signal is how many columns share the row. Hence the
   child-count selectors. Do NOT add `flex-wrap: wrap` here: it lets the pairs drop onto separate
   lines and collapses the whole form to one column. */
@media (min-width: 768px) {
  /* `.row` computes to FLEX in some contexts (vacancy apply form, where another rule wins on
     specificity) and GRID in others (the blog whitepaper form). Flex properties are ignored on grid
     items and grid-template-columns is ignored on flex containers, so BOTH have to be declared —
     a flex-only fix left the whitepaper columns at 193px, and a grid-only fix put the vacancy form
     back to shrink-to-fit. Either way the sizing is driven by how many columns share the row. */
  .wpcf7-form .row { column-gap: var(--space-4); align-items: start; }
  .wpcf7-form .row:has(> [class*="col-"]:only-child) { grid-template-columns: 1fr; }
  .wpcf7-form .row:has(> [class*="col-"]:first-child:nth-last-child(2)) { grid-template-columns: 1fr 1fr; }
  .wpcf7-form .row > [class*="col-"] { min-width: 0; }
  .wpcf7-form .row > [class*="col-"]:only-child { flex: 1 1 100%; }
  .wpcf7-form .row > [class*="col-"]:first-child:nth-last-child(2),
  .wpcf7-form .row > [class*="col-"]:first-child:nth-last-child(2) ~ [class*="col-"] { flex: 1 1 50%; }
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-email,
.wpcf7-form .wpcf7-tel,
.wpcf7-form .wpcf7-url,
.wpcf7-form .wpcf7-number,
.wpcf7-form .wpcf7-date,
/* select + textarea were missing here, so imported forms (the vacancy apply form) rendered
   shrink-to-fit dropdowns and a half-width message box next to full-width text inputs. */
.wpcf7-form select,
.wpcf7-form textarea,
.wpcf7-form .wpcf7-select,
.wpcf7-form .wpcf7-textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.8rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
  -webkit-appearance: none;
  appearance: none;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form input[type="date"]:focus,
.wpcf7-form .wpcf7-text:focus,
.wpcf7-form .wpcf7-email:focus,
.wpcf7-form .wpcf7-tel:focus {
  border-color: rgba(var(--color-brand-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--color-brand-rgb), 0.08);
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: var(--color-text-muted);
}

/* Textarea */
.wpcf7-form textarea,
.wpcf7-form .wpcf7-textarea {
  width: 100%;
  min-height: 120px;
  padding: 0.8rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  resize: vertical;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.wpcf7-form textarea:focus,
.wpcf7-form .wpcf7-textarea:focus {
  border-color: rgba(var(--color-brand-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--color-brand-rgb), 0.08);
}

/* Select / dropdown */
.wpcf7-form select,
.wpcf7-form .wpcf7-select {
  width: 100%;
  padding: 0.8rem 2.5rem 0.8rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%236b6b6b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition: border-color var(--duration-fast) ease;
}

.wpcf7-form select:focus {
  border-color: rgba(var(--color-brand-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--color-brand-rgb), 0.08);
}

/* Checkboxes and radios */
.wpcf7-form .wpcf7-checkbox,
.wpcf7-form .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.wpcf7-form .wpcf7-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.wpcf7-form .wpcf7-list-item input[type="checkbox"],
.wpcf7-form .wpcf7-list-item input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-brand);
  cursor: pointer;
}

/* File upload */
.wpcf7-form input[type="file"] {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  padding: var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  width: 100%;
  cursor: pointer;
  background: var(--color-surface-2);
}

/* Submit button */
.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0.9rem 2rem;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: #ffffff;
  background: var(--color-brand);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  position: relative;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form .wpcf7-submit:hover {
  background: var(--color-brand-hover);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.wpcf7-form input[type="submit"]:active {
  transform: translateY(0);
}

/* Hero form card — yellow submit button */
.adm-form-card input[type="submit"],
.adm-form-card .wpcf7-submit {
  background: var(--color-yellow);
  color: #000000;
  border-color: var(--color-yellow);
}

.adm-form-card input[type="submit"]:hover,
.adm-form-card .wpcf7-submit:hover {
  background: var(--color-yellow);
  color: #000000;
  border-color: var(--color-yellow);
  box-shadow: 0 0 20px rgba(255, 212, 0, 0.25);
}

/* Shimmer on submit button */
.wpcf7-form input[type="submit"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.15) 50%, transparent 75%);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}

.wpcf7-form input[type="submit"]:hover::after {
  transform: translateX(100%);
}

/* Spinner (loading state) */
.wpcf7-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(var(--color-brand-rgb), 0.2);
  border-top-color: var(--color-brand);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: var(--space-2);
}

/* Validation states */
.wpcf7-not-valid {
  border-color: var(--color-red) !important;
  box-shadow: 0 0 0 3px rgba(197, 48, 48, 0.08) !important;
}

.wpcf7-not-valid-tip {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-red);
  margin-top: var(--space-1);
  font-weight: var(--font-weight-medium);
}

/* Success / error messages */

/*
 * The response box must occupy no space until it actually holds a message.
 *
 * CF7 only applies display:none for form.init / .resetting / .submitting. In every other state
 * (sent, invalid, unaccepted, failed, aborted, spam) our !important padding and margin below,
 * plus CF7's own 2px border, render an empty ~50px box directly under the submit button - the
 * gap at the bottom of the hero form card. Keying off :empty fixes it for every state at once
 * rather than chasing CF7's state classes, which change between versions.
 */
.wpcf7 form .wpcf7-response-output:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
}

.wpcf7-response-output {
  margin: var(--space-4) 0 0 !important;
  padding: var(--space-3) var(--space-4) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-medium) !important;
}

.wpcf7-mail-sent-ok,
.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--color-green) !important;
  background: var(--color-green-dim) !important;
  color: var(--color-green) !important;
}

.wpcf7-validation-errors,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  border-color: var(--color-red) !important;
  background: var(--color-red-dim) !important;
  color: var(--color-red) !important;
}

.wpcf7 form.failed .wpcf7-response-output {
  border-color: var(--color-amber) !important;
  background: var(--color-amber-dim) !important;
  color: var(--color-amber) !important;
}

/* Acceptance checkbox */
.wpcf7-form .wpcf7-acceptance {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Two-column form layout helper */
.wpcf7-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 480px) {
  .wpcf7-form .form-row {
    grid-template-columns: 1fr;
  }
}

/* ── Dark section form overrides ── */
.adm-section--dark .wpcf7-form input[type="text"],
.adm-section--dark .wpcf7-form input[type="email"],
.adm-section--dark .wpcf7-form input[type="tel"],
.adm-section--dark .wpcf7-form input[type="url"],
.adm-section--dark .wpcf7-form input[type="number"],
.adm-section--dark .wpcf7-form textarea,
.adm-section--dark .wpcf7-form select,
[data-bg="Dark"] .wpcf7-form input[type="text"],
[data-bg="Dark"] .wpcf7-form input[type="email"],
[data-bg="Dark"] .wpcf7-form input[type="tel"],
[data-bg="Dark"] .wpcf7-form input[type="url"],
[data-bg="Dark"] .wpcf7-form input[type="number"],
[data-bg="Dark"] .wpcf7-form textarea,
[data-bg="Dark"] .wpcf7-form select {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.adm-section--dark .wpcf7-form input::placeholder,
.adm-section--dark .wpcf7-form textarea::placeholder,
[data-bg="Dark"] .wpcf7-form input::placeholder,
[data-bg="Dark"] .wpcf7-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.adm-section--dark .wpcf7-form label,
[data-bg="Dark"] .wpcf7-form label {
  color: rgba(255, 255, 255, 0.8);
}

.adm-section--dark .wpcf7-form input[type="file"],
[data-bg="Dark"] .wpcf7-form input[type="file"] {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}
/* ── cs-card on Dark/Black sections: CTA + badge shelf must follow the dark card ── */
.adm-section--dark .cs-card__cta,
.adm-section--black .cs-card__cta {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.adm-section--dark .cs-card:hover .cs-card__cta,
.adm-section--black .cs-card:hover .cs-card__cta {
  background: #ffffff;
  color: #0a0a0a;
}
/* Badge shelf now inherits --cs-surface from .cs-card, so it always equals the card body in
   every context (light, dark-mode token remap, and dark/black sections). No hardcoded colour needed. */
/* Client logo wrap stays white (logos need a light plate) — keep as-is */


/* FAQ author attribution — a byline, not body copy: smaller, quieter, ruled off above. */
.adm-faq-byline {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.adm-faq-byline strong { color: var(--color-text); font-weight: var(--font-weight-medium); }
.adm-faq-byline em { font-style: normal; opacity: .8; }


/* Vacancy apply: the form has gone (Ben para 81), so the copy takes the full column rather than
   sitting in a two-up grid with an empty half. */
.adm-vacancy__apply-copy--full { max-width: 62ch; }
.adm-vacancy__apply-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.adm-vacancy__apply-note { margin-top: var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
/* Centred alignment comes from the section's own Content alignment control (adds .text-center),
   so the measure-capped copy block and the button row follow it instead of staying left. */
.text-center .adm-vacancy__apply-copy--full { margin-inline: auto; }
.text-center .adm-vacancy__apply-actions { justify-content: center; }