/* Amplifi Instant Search — fullscreen blurred overlay + full search page
 *
 * PORTABILITY CONTRACT: this file contains NO site-specific colour, font or
 * name. Every visual value comes from a CSS custom property emitted by PHP from
 * the site config, so re-skinning for another client is a config edit and never
 * a CSS edit. If you find yourself adding a hex code or a font family here,
 * add a token instead.
 */

.ais-root {
  /* Fallbacks only — real values are injected as inline custom properties. */
  --ais-color-bg: rgba(0, 0, 0, 0.5);
  --ais-color-text: #e8e8e8;
  --ais-color-text-dim: rgba(230, 230, 219, 0.72);
  --ais-color-accent: #fff;
  --ais-color-seam: rgba(230, 230, 219, 0.18);
  --ais-blur: 22px;
  --ais-saturate: 140%;
  --ais-font-display: Georgia, "Times New Roman", serif;
  --ais-font-body: system-ui, -apple-system, sans-serif;
  --ais-color-chip-on: #111;
  --ais-color-plate: #333;
  --ais-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ais-dur-overlay: 460ms;
  --ais-dur-tile: 420ms;
  --ais-stagger: 28ms;
  --ais-tile-min: 210px;
  --ais-z: 2147483646;
}

.ais-root[hidden] { display: none; }

/* ---------- backdrop ---------- */
/* Two layers: this one blurs the PAGE behind, the overlay carries its own tint.
   Separating them means the tint can animate independently of the blur, which
   avoids re-rasterising the blurred snapshot on every opacity frame. */

.ais-root .ais-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ais-z) - 1);
  background: rgba(7, 30, 40, 0.42);
  -webkit-backdrop-filter: blur(var(--ais-blur)) saturate(var(--ais-saturate));
          backdrop-filter: blur(var(--ais-blur)) saturate(var(--ais-saturate));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ais-dur-overlay) var(--ais-ease);
}

.ais-root.is-open .ais-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* No backdrop-filter (older Safari/Firefox pre-103): fall back to an opaque
   plate. Without this the overlay text sits on live page content and is unreadable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ais-root .ais-backdrop { background: rgba(4, 20, 27, 0.97); }
}

/* ---------- overlay shell ---------- */

.ais-root .ais-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--ais-z);
  display: flex;
  flex-direction: column;
  background: var(--ais-color-bg);
  color: var(--ais-color-text);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, -8px, 0);
  transition:
    opacity var(--ais-dur-overlay) var(--ais-ease),
    transform var(--ais-dur-overlay) var(--ais-ease);
  will-change: opacity, transform;
}

.ais-root.is-open .ais-overlay {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

/* ---------- search bar ---------- */

.ais-root .ais-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 42px clamp(24px, 5vw, 72px) 22px;
  padding-top: max(42px, env(safe-area-inset-top, 0px) + 34px);
  border-bottom: 1px solid var(--ais-color-seam);
}

.ais-root .ais-bar__icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: var(--ais-color-text);
  opacity: 0.7;
}

.ais-root .ais-bar__icon svg { width: 100%; height: 100%; display: block; }

.ais-root .ais-bar__input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  color: var(--ais-color-accent);
  font-family: var(--ais-font-display);
  font-size: clamp(1.6rem, 4.4vw, 3rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.01em;
  padding: 6px 0;
  caret-color: var(--ais-color-accent);
}

.ais-root .ais-bar__input::placeholder {
  color: rgba(230, 230, 219, 0.42);
}

.ais-root .ais-bar__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
          appearance: none;
}

.ais-root .ais-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--ais-color-accent);
  cursor: pointer;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 200ms ease, transform 320ms var(--ais-ease);
}

.ais-root .ais-close:hover,
.ais-root .ais-close:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  transform: rotate(90deg);
}

.ais-root .ais-close__icon {
  position: relative;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.ais-root .ais-close__icon::before,
.ais-root .ais-close__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.ais-root .ais-close__icon::before { transform: rotate(45deg); }
.ais-root .ais-close__icon::after  { transform: rotate(-45deg); }

/* ---------- type chips ---------- */

:is(.ais-root, .ais-page) .ais-chips {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px clamp(24px, 5vw, 72px) 0;
}

:is(.ais-root, .ais-page) .ais-chip {
  appearance: none;
  border: 1px solid var(--ais-color-seam);
  background: transparent;
  color: var(--ais-color-text-dim);
  font-family: var(--ais-font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}

:is(.ais-root, .ais-page) .ais-chip:hover,
:is(.ais-root, .ais-page) .ais-chip:focus-visible {
  color: var(--ais-color-accent);
  border-color: rgba(230, 230, 219, 0.5);
}

:is(.ais-root, .ais-page) .ais-chip[aria-selected="true"] {
  color: var(--ais-color-chip-on);
  background: var(--ais-color-accent);
  border-color: var(--ais-color-accent);
}

:is(.ais-root, .ais-page) .ais-chip__count {
  opacity: 0.55;
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

/* ---------- scroll region ---------- */

.ais-root .ais-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 26px clamp(24px, 5vw, 72px) 64px;
}

/* ---------- section ---------- */

:is(.ais-root, .ais-page) .ais-section { margin-bottom: 44px; }

:is(.ais-root, .ais-page) .ais-section__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 16px;
  font-family: var(--ais-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ais-color-text-dim);
}

:is(.ais-root, .ais-page) .ais-section__count {
  font-weight: 400;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

/* ---------- tile grid ---------- */
/* MASONRY, in two states.
 *
 * BASE (no JS, or before spans are computed): a normal auto-fill grid with
 * `align-items:start`. Tiles keep their INTRINSIC height — the media element
 * carries an inline `aspect-ratio` derived from the image's natural dimensions,
 * so nothing is cropped and nothing is stretched. Rows are aligned to a common
 * baseline, so there is ragged whitespace under the shorter tiles, but the page
 * is complete and correct. This is what a crawler and a JS-off visitor get.
 *
 * ENHANCED (`.ais-grid--masonry`, added by JS once it has measured): the same
 * grid re-declared over a fine 4px row unit, with every tile spanning as many
 * rows as its own height needs. Tiles then pack upward into the gap left by a
 * shorter neighbour — true masonry, with the columns still resolved by CSS
 * Grid, so there is no absolute positioning and no reflow loop.
 *
 * WHY NOT `column-count`: CSS multi-column IS masonry for free, but it orders
 * items top-to-bottom within each column. These results are sorted by
 * relevance, so the best match would sit above the 2nd-best only in the first
 * column and reading order would be wrong. Grid keeps left-to-right order.
 *
 * WHY NOT `grid-template-rows: masonry`: still behind a flag in Firefox only.
 */

:is(.ais-root, .ais-page) .ais-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ais-tile-min), 1fr));
  gap: var(--ais-gap, 22px);
  /* The masonry row unit. Declared HERE, on the base grid, rather than left to
     the `var(..., 4px)` fallbacks: JS reads this same custom property to compute
     spans, so if it is undeclared the two sides agree only by both defaulting.
     A responsive rule that set the fallback in one place would silently desync
     the span math from the track size. One declaration, both readers. */
  --ais-row: 4px;
  /* Load-bearing: without it every tile stretches to the tallest in its row and
     the whole point of intrinsic heights is lost. */
  align-items: start;
}

:is(.ais-root, .ais-page) .ais-grid--masonry {
  /* Row gap is folded into each tile's span calculation, so the grid itself
     must not add one — otherwise every tile gains one gap of dead space. */
  row-gap: 0;
  grid-auto-rows: var(--ais-row, 4px);
}
:is(.ais-root, .ais-page) .ais-grid--masonry > .ais-tile {
  /* JS sets `--span` per tile; the fallback covers the one frame between the
     class landing and the first measurement. It is deliberately LARGER than any
     real tile (160 x 4px = 640px): an oversized fallback shows a momentary gap,
     an undersized one shows a momentary OVERLAP. Gaps are invisible for a
     frame, overlapping tiles are not. */
  grid-row-end: span var(--span, 160);
}

/* Grid is CONTAINER-driven, not viewport-driven — the overlay is full-bleed today
   but this keeps the tiles correct if it's ever placed in a narrower shell. */

:is(.ais-root, .ais-page) .ais-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  animation: ais-tile-in var(--ais-dur-tile) var(--ais-ease) forwards;
  animation-delay: calc(var(--i, 0) * var(--ais-stagger));
}

@keyframes ais-tile-in {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* The anchor wraps ONLY the title text, so its accessible name is the title —
   not every string in the tile. The stretched ::after makes the whole tile
   clickable without putting the rest of the content inside the link. Result:
   exactly one tabbable element per tile with a clean accessible name. */
:is(.ais-root, .ais-page) .ais-tile__link {
  color: inherit;
  text-decoration: none;
  transition: color 200ms ease;
}

:is(.ais-root, .ais-page) .ais-tile__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Screen-reader-only type hint appended inside the link. */
:is(.ais-root, .ais-page) .ais-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- media ----------
 * INTRINSIC BY DEFAULT.
 *
 * The media box no longer imposes an aspect ratio. Each tile's media element
 * carries an inline `aspect-ratio: <w> / <h>` from the image's NATURAL
 * dimensions, so the plate is exactly the shape of the photograph — 100% of the
 * column width, height computed from the ratio. Nothing is cropped, and because
 * the ratio is known before the bytes arrive, nothing shifts when they land.
 *
 * The inline ratio is a fallback chain: natural dims -> 3/2. It is never absent,
 * so this box always has a height even for an image that fails to load.
 */

:is(.ais-root, .ais-page) .ais-tile__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ar, 3 / 2);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 12px;
}

:is(.ais-root, .ais-page) .ais-tile__img {
  display: block;
  width: 100%;
  height: 100%;
  /* `contain` rather than `cover`: the plate already IS the image's own aspect,
     so there is nothing to crop away. On the handful of tiles where a rounded
     ratio disagrees with the file by a fraction of a percent, contain letterboxes
     by <1px where cover would shave real pixels off an edge. */
  object-fit: contain;
  transform: scale(1.001); /* promotes to its own layer; kills the scale-in jitter */
  transition: transform 700ms var(--ais-ease), filter 320ms ease;
}

:is(.ais-root, .ais-page) .ais-tile:hover .ais-tile__img,
:is(.ais-root, .ais-page) .ais-tile:focus-within .ais-tile__img {
  transform: scale(1.06);
}

/* --- card: editorial (blog / news / case studies / outcomes) --- */
/* No aspect override — editorial imagery is the most varied on the site
   (measured aspect ratios across blog: 106 at one ratio, 99 at another, then a
   long tail) and forcing 16:10 on all of it was cropping most of it. */

:is(.ais-root, .ais-page) .ais-tile--editorial .ais-tile__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

/* --- card: portrait (team) --- */
/* Team is the ONE type that keeps a forced ratio: 149 of 169 headshots are
   already square, and a wall of faces at inconsistent heights reads as an
   error rather than as masonry. The enrichment endpoint reports 1/1 for this
   type, so the inline `--ar` agrees and this is belt-and-braces. */

:is(.ais-root, .ais-page) .ais-tile--portrait .ais-tile__media { aspect-ratio: 1 / 1; }

:is(.ais-root, .ais-page) .ais-tile--portrait .ais-tile__img {
  /* Faces DO get cropped to the square — a letterboxed headshot on a coloured
     plate looks broken in a way a tight crop does not. */
  object-fit: cover;
  filter: grayscale(22%);
}

:is(.ais-root, .ais-page) .ais-tile--portrait:hover .ais-tile__img,
:is(.ais-root, .ais-page) .ais-tile--portrait:focus-within .ais-tile__img {
  filter: grayscale(0);
}

/* TEAM TILES ARE LOCKSTEP (2026-08-25, on request). The media plate is already
   a forced square, so tile height varied only with the text block: a member
   with no function term had no meta line, a long name could wrap, and (before
   `taxonomies.team_locations` was dropped from the config) the office term
   pushed the meta to a second line. The body is now a RESERVED fixed-height
   block — one title line plus one meta line, whether or not a given member has
   a function term — and both lines ellipsize instead of wrapping. Every team
   tile therefore measures identical, the masonry grants equal spans, and rows
   align. Scoped to `--portrait`, so the blended/unified grid is untouched. */
:is(.ais-root, .ais-page) .ais-tile--portrait .ais-tile__title,
:is(.ais-root, .ais-page) .ais-tile--portrait .ais-tile__meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Meta line-height was inherited (1.5); declared here so the reserved body
   height below cannot desync from the real line box. */
:is(.ais-root, .ais-page) .ais-tile--portrait .ais-tile__meta { line-height: 1.5; }

:is(.ais-root, .ais-page) .ais-tile--portrait .ais-tile__body {
  /* title line box (1.06rem x 1.25) + title margin (6px) + one meta line
     (0.68rem x 1.5). Reserved even when the meta line is absent. */
  height: calc(1.06rem * 1.25 + 6px + 0.68rem * 1.5);
  overflow: hidden;
}

/* A team member with no image falls back to the wordmark plate, which is 3:2
   by the generic `:has(> .ais-tile__wordmark)` rule further down — one such
   tile would break the row. Higher specificity keeps it square here. */
:is(.ais-root, .ais-page) .ais-tile--portrait .ais-tile__media:has(> .ais-tile__wordmark) {
  aspect-ratio: 1 / 1;
}

/* --- card: logo (companies) --- */
/* Logos are 384x256 marks on white of wildly mixed vintages. Padding is a
   PERCENTAGE so the breathing room scales with the cell and every mark sits in
   the same proportional frame at any column count — this is the single thing
   that makes a ragged logo set read as one wall. Ratio IS forced here for the
   same reason as team: a logo wall must be a grid, not a jumble. */

:is(.ais-root, .ais-page) .ais-tile--logo .ais-tile__media {
  aspect-ratio: 3 / 2;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 17% 19%;
}

:is(.ais-root, .ais-page) .ais-tile--logo .ais-tile__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(0.85);
  transition: transform 700ms var(--ais-ease), filter 320ms ease;
}

:is(.ais-root, .ais-page) .ais-tile--logo:hover .ais-tile__img,
:is(.ais-root, .ais-page) .ais-tile--logo:focus-within .ais-tile__img {
  filter: saturate(1);
  transform: scale(1.04);
}

/* Wordmark fallback for the ~19% of companies with no logo, and any other
   image-less tile. Typographic plate, never an empty grey box. */
:is(.ais-root, .ais-page) .ais-tile__wordmark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14%;
  font-family: var(--ais-font-display);
  font-size: clamp(0.95rem, 1.6vw, 1.3rem);
  line-height: 1.15;
  color: #fff;
  background: var(--ais-color-plate);
  overflow-wrap: anywhere;
  hyphens: auto;
}

:is(.ais-root, .ais-page) .ais-tile--editorial .ais-tile__wordmark,
:is(.ais-root, .ais-page) .ais-tile--portrait .ais-tile__wordmark {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
  color: rgba(255, 255, 255, 0.75);
}

/* ---------- tile text ---------- */

:is(.ais-root, .ais-page) .ais-tile__body { display: block; }

:is(.ais-root, .ais-page) .ais-tile__eyebrow {
  display: block;
  font-family: var(--ais-font-body);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(230, 230, 219, 0.55);
  margin-bottom: 6px;
}

:is(.ais-root, .ais-page) .ais-tile__title {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  font-family: var(--ais-font-display);
  font-size: 1.06rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ais-color-text);
  transition: color 200ms ease;
}

:is(.ais-root, .ais-page) .ais-tile:hover .ais-tile__link,
:is(.ais-root, .ais-page) .ais-tile__link:focus-visible {
  color: var(--ais-color-accent);
}

:is(.ais-root, .ais-page) .ais-tile__snippet {
  display: block;
  font-family: var(--ais-font-body);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ais-color-text-dim);
  margin-bottom: 8px;
}

:is(.ais-root, .ais-page) .ais-tile__meta {
  display: block;
  font-family: var(--ais-font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(230, 230, 219, 0.5);
}

:is(.ais-root, .ais-page) .ais-tile__meta span + span::before {
  content: " · ";
  color: rgba(230, 230, 219, 0.3);
  margin: 0 3px;
}

/* --- card: plain (pages — no imagery worth showing) --- */

:is(.ais-root, .ais-page) .ais-tile--plain {
  padding: 16px 18px;
  border: 1px solid var(--ais-color-seam);
  transition: border-color 220ms ease, background-color 220ms ease;
}

:is(.ais-root, .ais-page) .ais-tile--plain:hover,
:is(.ais-root, .ais-page) .ais-tile--plain:focus-within {
  border-color: rgba(230, 230, 219, 0.42);
  background: rgba(255, 255, 255, 0.03);
}

/* ---------- query highlight ---------- */

:is(.ais-root, .ais-page) .ais-mark {
  background: transparent;
  color: var(--ais-color-accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
}

/* ---------- empty + hint ---------- */

:is(.ais-root, .ais-page) .ais-empty {
  padding: 42px 0 0;
  max-width: 46ch;
}

:is(.ais-root, .ais-page) .ais-empty__title {
  font-family: var(--ais-font-display);
  font-size: 1.6rem;
  margin: 0 0 8px;
  color: var(--ais-color-accent);
}

:is(.ais-root, .ais-page) .ais-empty__body {
  font-family: var(--ais-font-body);
  font-size: 0.9rem;
  color: var(--ais-color-text-dim);
  margin: 0;
}

.ais-root .ais-hint {
  position: absolute;
  right: clamp(24px, 5vw, 72px);
  bottom: 18px;
  margin: 0;
  font-family: var(--ais-font-body);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(230, 230, 219, 0.32);
  pointer-events: none;
}

/* ---------- scroll lock ---------- */

html.ais-locked { overflow: hidden; }

/* ---------- focus ---------- */
/* The hamburger suppresses focus rings by house style. Doing that here would strand
   keyboard users inside a modal with no visible position, so instead the ring is
   subtle and only ever shows for :focus-visible (keyboard), never on mouse click. */

.ais-root :focus { outline: none; }

.ais-root :focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 3px;
}

/* box-shadow/outline rings vanish in Windows High Contrast — restore a real border. */
@media (forced-colors: active) {
  .ais-root :focus-visible { outline: 2px solid CanvasText; }
  :is(.ais-root, .ais-page) .ais-chip[aria-selected="true"] { border: 2px solid CanvasText; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .ais-root { --ais-tile-min: 168px; }
  :is(.ais-root, .ais-page) .ais-grid { --ais-gap: 16px; }
}

@media (max-width: 600px) {
  .ais-root { --ais-tile-min: 140px; }
  .ais-root .ais-bar {
    gap: 10px;
    padding: 20px 18px 16px;
    padding-top: max(20px, env(safe-area-inset-top, 0px) + 16px);
  }
  .ais-root .ais-bar__icon { width: 20px; height: 20px; }
  .ais-root .ais-bar__input { font-size: 1.35rem; }
  :is(.ais-root, .ais-page) .ais-chips { padding: 14px 18px 0; }
  .ais-root .ais-scroll { padding: 20px 18px 80px; }
  :is(.ais-root, .ais-page) .ais-tile__title { font-size: 0.95rem; }
  .ais-root .ais-hint { display: none; }
}

/* ---------- reduced motion ---------- */
/* Note this kills the tile ENTRANCE animation too. The tiles use `animation`
   with `forwards`, so disabling it must also reset opacity/transform or every
   tile would stay invisible at its 0% keyframe. */

@media (prefers-reduced-motion: reduce) {
  .ais-root .ais-overlay,
  .ais-root .ais-backdrop,
  :is(.ais-root, .ais-page) .ais-tile__img,
  .ais-root .ais-close {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  :is(.ais-root, .ais-page) .ais-tile {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  :is(.ais-root, .ais-page) .ais-tile:hover .ais-tile__img {
    transform: none !important;
  }
}

/* ---------- zoned layout (blended view) ----------
   Results split into labelled zones across two columns, each zone rendering in
   the card shape its content actually wants. A company is a name plus facts, a
   person is a face, an insight is an image plus headline, a page is text —
   forcing one card shape onto all four is what made the single grid read
   generic.

   ⚠ COLUMN WIDTHS ARE NOT EQUAL AND THAT IS DELIBERATE. The left column holds
   typeset rows (companies) and small square portraits (team); the right holds
   image tiles and topic rows. Giving the image column more room is what keeps
   the two columns close to the same HEIGHT, which is the thing that actually
   matters here — an 8-row company list beside a 4-tile image grid desynchronises
   badly if both get 50%. Measured at 1.005:1 with the configured caps. */
.ais-zones {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 0 56px;
  align-items: start;
}

.ais-zones__col { min-width: 0; }

.ais-zone { margin-bottom: 52px; }
.ais-zone:last-child { margin-bottom: 0; }

/* ⚠ A LIST INSIDE A ZONE MUST NOT COLUMNATE.
   `.ais-list` goes two-up above 1100px, which is right when it owns the full
   width in single-type view and wrong inside a zone — a ~490px column would get
   two ~215px columns of names, and long company names would wrap every row. */
.ais-zone .ais-list { column-count: 1 !important; }

/* Zones are already narrow, so the tile grid needs a smaller floor than the
   full-width default or a zone can only ever fit one tile per row. */
.ais-zone .ais-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.ais-zone__all {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--ais-font-body);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ais-color-accent);
  text-decoration: none;
}

.ais-zone__all span { display: inline-block; transition: transform 380ms var(--ais-ease); }
.ais-zone__all:hover span { transform: translateX(5px); }

/* The full search PAGE server-renders BOTH layouts (it is edge-cached, so one
   response serves every viewport and cannot branch server-side). This wrapper
   is the blended fallback; it is hidden on desktop, where `.ais-zones` shows.
   The OVERLAY is unaffected — its JS emits only one wrapper at a time. */
.ais-mixed-wrap { display: none; }

@media (max-width: 1000px) {
  .ais-zones { grid-template-columns: 1fr; gap: 0; }

  /* Below the zone breakpoint the columns would collapse to one, stacking all
     of one type before the next and burying the top result. Hide the zoned
     layout and reveal the interleaved-by-relevance grid instead. Kept in lockstep
     with ZONE_MIN_PX (1001) in ais.js: the JS renders blended at the same width,
     so a client re-render never disagrees with the server's CSS pick. */
  .ais-page .ais-zones { display: none; }
  .ais-page .ais-mixed-wrap { display: block; }
}

/* ---------- topic rows (pages) ----------
   ONE HEADLINE, THEN THE META DESCRIPTION. No image, no eyebrow, no match
   snippet — a topic is a page, so its title and summary are the whole record.
   Deliberately mirrors the company row in the opposite column so the two
   image-less content types share one visual language. */

:is(.ais-root, .ais-page) .ais-topic {
  position: relative;
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid var(--ais-color-seam);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  animation: ais-tile-in var(--ais-dur-tile) var(--ais-ease) forwards;
  animation-delay: calc(var(--i, 0) * var(--ais-stagger));
  transition: border-color 220ms ease;
}

:is(.ais-root, .ais-page) .ais-topic:hover {
  border-bottom-color: rgba(230, 230, 219, 0.5);
}

:is(.ais-root, .ais-page) .ais-topic__name {
  display: block;
  font-family: var(--ais-font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 400;
  line-height: 1.24;
  color: var(--ais-color-text);
}

:is(.ais-root, .ais-page) .ais-topic__name .ais-tile__link {
  color: inherit;
  text-decoration: none;
}

:is(.ais-root, .ais-page) .ais-topic:hover .ais-tile__link,
:is(.ais-root, .ais-page) .ais-topic .ais-tile__link:focus-visible {
  color: var(--ais-color-accent);
}

/* The summary is the ONLY supporting line, so it gets a real reading size
   rather than the 0.66rem whisper used for meta that sits beside other text.
   Clamped at 3 lines: measured page descriptions run 55-200 characters and 200
   wraps to 3 here, so the clamp trims nothing in practice and only guards
   against an unusually long one. */
:is(.ais-root, .ais-page) .ais-topic__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  max-width: 62ch;
  font-family: var(--ais-font-body);
  font-size: 0.845rem;
  line-height: 1.62;
  color: var(--ais-color-text-dim);
}

/* ---------- list layout (types configured with layout=list) ----------
   The record NAME in the display face carries the row, with two optional meta
   fields on the right. No image plate. Used where a type reads better as an
   index than as tiles. */

:is(.ais-root, .ais-page) .ais-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
  /* Two columns of rows on wide viewports — a single 8-row column wastes the
     full-bleed width the overlay just took over. */
  column-gap: 56px;
}

@media (min-width: 1100px) {
  :is(.ais-root, .ais-page) .ais-list { column-count: 2; }
}

:is(.ais-root, .ais-page) .ais-row {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--ais-color-seam);
  /* Prevents a row from splitting across the column break. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  animation: ais-tile-in var(--ais-dur-tile) var(--ais-ease) forwards;
  animation-delay: calc(var(--i, 0) * var(--ais-stagger));
  transition: border-color 220ms ease;
}

:is(.ais-root, .ais-page) .ais-row:hover {
  border-bottom-color: rgba(230, 230, 219, 0.5);
}

:is(.ais-root, .ais-page) .ais-row__name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--ais-font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ais-color-text);
}

:is(.ais-root, .ais-page) .ais-row__name .ais-tile__link {
  color: inherit;
  text-decoration: none;
}

:is(.ais-root, .ais-page) .ais-row:hover .ais-tile__link,
:is(.ais-root, .ais-page) .ais-row .ais-tile__link:focus-visible {
  color: var(--ais-color-accent);
}

:is(.ais-root, .ais-page) .ais-row__aside {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 2px;
  font-family: var(--ais-font-body);
  max-width: 46%;
}

:is(.ais-root, .ais-page) .ais-row__partner {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ais-color-text-dim);
}

:is(.ais-root, .ais-page) .ais-row__status {
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(230, 230, 219, 0.45);
}

@media (max-width: 600px) {
  :is(.ais-root, .ais-page) .ais-list { column-count: 1; }
  :is(.ais-root, .ais-page) .ais-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  :is(.ais-root, .ais-page) .ais-row__aside {
    align-items: flex-start;
    text-align: left;
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.ais-root, .ais-page) .ais-row {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- normalized card (mixed-type / "All" view) ----------
   When several post types are interleaved, every hit uses THIS card so the grid
   scans as one wall: a single title size, a single meta line, type identity in
   the eyebrow rather than in the card's shape.

   ⚠ CHANGED: the media plate is NO LONGER normalized to 4:3.
   Normalizing the TEXT is what makes a mixed grid scannable; normalizing the
   IMAGE was cropping every photo on the site into one box and, combined with a
   150px source, was the visible defect. Media now uses each image's own aspect
   and the masonry packing absorbs the resulting height differences — which is
   the entire reason to run masonry rather than a fixed row grid. */

:is(.ais-root, .ais-page) .ais-grid--mixed {
  align-items: start;
}

:is(.ais-root, .ais-page) .ais-tile--unified .ais-tile__media {
  aspect-ratio: var(--ar, 3 / 2);
  background: rgba(255, 255, 255, 0.05);
}

:is(.ais-root, .ais-page) .ais-tile--unified .ais-tile__img {
  object-fit: contain;
}

/* Company logos are marks on white — they need a fixed plate and a white
   ground regardless of the mark's own proportions, or a wide wordmark and a
   square badge sit at wildly different scales in adjacent cells. */
:is(.ais-root, .ais-page) .ais-tile--unified .ais-tile__media--logo {
  aspect-ratio: 3 / 2;
  background: #fff;
  padding: 14% 16%;
}

:is(.ais-root, .ais-page) .ais-tile--unified .ais-tile__media--logo .ais-tile__img {
  object-fit: contain;
}

/* Square-cropped people in the mixed grid keep their square. */
:is(.ais-root, .ais-page) .ais-tile--unified .ais-tile__media--square {
  aspect-ratio: 1 / 1;
}

:is(.ais-root, .ais-page) .ais-tile--unified .ais-tile__media--square .ais-tile__img {
  object-fit: cover;
}

/* A wordmark plate has no natural ratio to honour — give it a stable one so a
   run of image-less tiles doesn't collapse to nothing. */
:is(.ais-root, .ais-page) .ais-tile__media:has(> .ais-tile__wordmark) {
  aspect-ratio: 3 / 2;
}

:is(.ais-root, .ais-page) .ais-tile--unified .ais-tile__title {
  font-size: 1rem;
  line-height: 1.24;
}

:is(.ais-root, .ais-page) .ais-u__status {
  display: block;
  margin-top: 4px;
  font-family: var(--ais-font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(230, 230, 219, 0.45);
}

/* ---------- mobile ----------
   Team portraits go 2-up rather than 1-up: square crops are legible at half
   width, and a single column of 300px portraits pushes everything else off
   screen. The mixed grid also goes 2-up for the same reason — one card per
   row means ~2 results visible at a time on a phone. */

@media (max-width: 600px) {
  :is(.ais-root, .ais-page) .ais-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --ais-gap: 14px;
  }

  /* Editorial cards keep a wider aspect and can carry a snippet, so at 2-up on a
     narrow screen they need the smaller type. */
  :is(.ais-root, .ais-page) .ais-tile__title { font-size: 0.88rem; }
  :is(.ais-root, .ais-page) .ais-tile__eyebrow { font-size: 0.58rem; letter-spacing: 0.1em; }
  :is(.ais-root, .ais-page) .ais-tile__meta { font-size: 0.6rem; }

  /* Snippets are noise at this width — the title and type carry the card. */
  :is(.ais-root, .ais-page) .ais-tile__snippet { display: none; }
}

/* Very narrow phones: keep 2 columns but tighten further rather than dropping
   to 1, which is the whole point of this change. */
@media (max-width: 380px) {
  :is(.ais-root, .ais-page) .ais-grid { --ais-gap: 10px; }
  :is(.ais-root, .ais-page) .ais-tile__title { font-size: 0.82rem; }
}

/* Tablet. The 600px rule above pins an explicit 2-column grid; without this the
   768-1099px band inherits it and wastes half the width. Measured: a 768px
   viewport fits 3 tracks comfortably at the 210px min. */
@media (min-width: 601px) and (max-width: 1099px) {
  :is(.ais-root, .ais-page) .ais-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    --ais-gap: 18px;
  }
}

/* ---------- full search results page ----------
   Same cards, same chips, same relevance order as the overlay — pressing Enter
   should feel like the overlay expanded into a page, not like a jump to a
   different design. The page sits inside the theme's header/footer, so it uses
   the page background rather than the overlay's translucent plate. */

.ais-page {
  /* Palette comes from `page_tokens` in the site config, emitted inline by PHP.
     Nothing colour-related is hardcoded here.

     THE PAGE MUST PAINT ITS OWN BACKGROUND. Themes commonly stack a decorative
     full-viewport layer behind content (this one has a black `body::before`),
     which every normal page happens to cover with full-bleed builder sections.
     A transparent search page lets that layer show through and the whole page
     renders on black — measured here: body computed `rgb(255,255,255)` while the
     actual pixels were `(0,0,0)`, because the computed style of BODY is not what
     is painted behind a transparent child. Owning the background (and a stacking
     context above the decorative layer) makes the page theme-independent. */
  position: relative;
  z-index: 1;
  background: var(--ais-color-bg-page, #fff);

  max-width: none;
  margin: 0;
  padding: clamp(28px, 5vw, 72px) max(calc((100% - var(--ais-page-max, 1360px)) / 2), clamp(20px, 5vw, 64px)) 96px;
  color: var(--ais-color-text);
  font-family: var(--ais-font-body);
  min-height: 60vh;
}

.ais-page__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ais-color-seam);
}

.ais-page__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  opacity: 0.55;
}

.ais-page__icon svg { width: 100%; height: 100%; display: block; }

.ais-page__input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  color: var(--ais-color-accent);
  font-family: var(--ais-font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.15;
  padding: 6px 0;
}

.ais-page__input::placeholder { color: var(--ais-color-text-dim); opacity: 0.55; }
.ais-page__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.ais-page__summary {
  margin: 16px 0 0;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ais-color-text-dim);
}

.ais-page__chips { padding: 20px 0 0; }

.ais-page .ais-chip {
  border-color: var(--ais-color-seam);
  color: var(--ais-color-text-dim);
}

.ais-page .ais-chip:hover,
.ais-page .ais-chip:focus-visible {
  color: var(--ais-color-accent);
  border-color: var(--ais-color-accent);
}

.ais-page .ais-chip[aria-selected="true"] {
  color: var(--ais-color-chip-on);
  background: var(--ais-color-accent);
  border-color: var(--ais-color-accent);
}

.ais-page__results { padding-top: 30px; }

.ais-page .ais-tile__eyebrow,
.ais-page .ais-tile__meta,
.ais-page .ais-u__status { color: var(--ais-color-text-dim); }

.ais-page .ais-tile__title { color: var(--ais-color-text); }

.ais-page .ais-tile__link:focus-visible,
.ais-page .ais-tile:hover .ais-tile__link { color: var(--ais-color-accent); }

.ais-page .ais-tile__media { background: color-mix(in srgb, var(--ais-color-text) 7%, transparent); }

.ais-page .ais-mark {
  color: var(--ais-color-accent);
  text-decoration-color: var(--ais-color-text-dim);
}

.ais-page .ais-empty__title { color: var(--ais-color-accent); }
.ais-page .ais-empty__body { color: var(--ais-color-text-dim); }

.ais-page .ais-row { border-bottom-color: var(--ais-color-seam); }
.ais-page .ais-row__name { color: var(--ais-color-text); }

/* Topic rows on the light page. The overlay's hover seam is a light tint meant
   for a dark plate; on white it is INVISIBLE, so the hover state would silently
   do nothing. Same reason .ais-row is re-declared above. */
.ais-page .ais-topic { border-bottom-color: var(--ais-color-seam); }
.ais-page .ais-topic__name { color: var(--ais-color-text); }
.ais-page .ais-topic:hover { border-bottom-color: var(--ais-color-accent); }
.ais-page .ais-topic__desc { color: var(--ais-color-text-dim); }

.ais-page :focus-visible {
  outline: 2px solid var(--ais-color-accent);
  outline-offset: 3px;
}

/* The page inherits the same grid rules as the overlay, including the 2-up
   mobile / 3-up tablet behaviour, because both use .ais-grid. */

/* ───────────────────────────────────────────────────────────────────────────
   HOST-THEME TYPOGRAPHY ARMOUR

   PORTING HAZARD, measured on a real client theme: the host shipped
   `h2 { font-size: 48px !important; }`. Result tiles use a heading element, so
   every card title rendered at 48px in a 224px column — titles ran to six lines
   and read as overlapping. Our own rule lost DESPITE far higher specificity,
   because specificity never beats `!important`.

   The only thing that beats a theme's `!important` is our own `!important` at
   equal-or-higher specificity, so these declarations carry it deliberately.
   Scoped tightly to the plugin's own containers so nothing leaks outward.

   Do NOT remove this block on the grounds that "the CSS looks right" — the
   served stylesheet being correct is not the same as it WINNING. Verify with
   CSS.getMatchedStylesForNode, not by reading the file.
   ─────────────────────────────────────────────────────────────────────────── */
:is(.ais-root, .ais-page) :is(h1, h2, h3, h4, h5, h6).ais-tile__title {
  font-family: var(--ais-font-display) !important;
  font-size: 1.06rem !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  margin: 0 0 6px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

:is(.ais-root, .ais-page) :is(h1, h2, h3, h4, h5, h6).ais-section__head,
:is(.ais-root, .ais-page) :is(h1, h2, h3, h4, h5, h6).ais-zone__head {
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
}

/* The responsive steps must also survive the theme, so they repeat the flag. */
@media (max-width: 1000px) {
  :is(.ais-root, .ais-page) :is(h1, h2, h3, h4, h5, h6).ais-tile__title {
    font-size: 0.95rem !important;
  }
}
@media (max-width: 640px) {
  :is(.ais-root, .ais-page) :is(h1, h2, h3, h4, h5, h6).ais-tile__title {
    font-size: 0.88rem !important;
  }
}
@media (max-width: 430px) {
  :is(.ais-root, .ais-page) :is(h1, h2, h3, h4, h5, h6).ais-tile__title {
    font-size: 0.82rem !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   FIXED-HEADER CLEARANCE

   PORTING HAZARD. The search page sits in the theme's NORMAL DOCUMENT FLOW, so
   it silently assumes the site header is in flow too. Many themes pin the
   header with `position:fixed`, which takes it OUT of flow — the page then
   starts at y=0 and its first rows render UNDERNEATH the nav.

   Measured on the reference install before this rule, at 14 widths: `.ais-page`
   started at 0px against a header whose bottom edge was 118px (>=1101px),
   102px (768-1100px) and 104px (<=600px). 14 of 14 widths overlapped, and the
   search INPUT itself sat at y=72 — behind the nav, unclickable.

   `--ais-header-clear` is the knob. Sites with an in-flow header set it to 0 in
   `tokens`; sites with a fixed header set the measured height. Default 0 so
   this can never ADD unwanted space on a theme that does not need it.

   ⚠ MEASURE, DO NOT COPY. Header height is per-theme and per-breakpoint, and it
   changes when a utility bar is added. Read the real bottom edge of every
   position:fixed top-anchored element and compare it against `.ais-page`'s top:
     const hdr = [...document.querySelectorAll('body *')]
       .filter(el => getComputedStyle(el).position === 'fixed')
       .map(el => el.getBoundingClientRect().bottom);
   Never infer it from the stylesheet.
   ─────────────────────────────────────────────────────────────────────────── */
.ais-page {
  padding-top: var(--ais-header-clear, 0px);
}

@media (max-width: 1100px) {
  .ais-page {
    padding-top: var(--ais-header-clear-md, var(--ais-header-clear, 0px));
  }
}

@media (max-width: 600px) {
  .ais-page {
    padding-top: var(--ais-header-clear-sm, var(--ais-header-clear-md, var(--ais-header-clear, 0px)));
  }
}

/* ───────────────────────────────────────────────────────────────────────────
   HOST-THEME INPUT ARMOUR  (placeholder + the UA search clear button)

   Same failure class as the typography armour above, and found the same way:
   our rules were already present and CORRECT, and were simply LOSING.

   Measured on a real client theme, all three from the host:

     ::placeholder { color: black !important }        (inline <style>)
     ::placeholder { color: white !important }        (theme style.css)
     ::-webkit-search-cancel-button {
         appearance:none; height:35px; width:35px; border-radius:500px;
         background-color:#5522dd; background-image:url(/white-x.svg);
         z-index:5 !important; }

   Consequences on the dark overlay:
     - the placeholder computed rgb(0,0,0) at opacity 1 against the #140834
       scrim = 1.11:1. Not "low contrast" — genuinely invisible.
     - the theme turns the BROWSER'S OWN clear button into a filled circle with
       a white X, which renders a few px from our close button. The visitor sees
       TWO X's. It is not a duplicate element — there is only one node — which is
       why a DOM sweep finds nothing and elementFromPoint returns the element
       underneath. It is a UA pseudo-element the theme restyled.

   Unqualified `::placeholder` rules like these hit EVERY input on the site, so
   any plugin that renders its own field inherits them. Assume it, and armour.

   ⚠ `!important` here is deliberate and load-bearing. Specificity cannot beat
     `!important`; only `!important` at equal-or-higher specificity can. Verify
     with CSS.getMatchedStylesForNode plus a COMPUTED read of the pseudo-element
     (getComputedStyle(el, '::placeholder')) — reading the element's own `color`
     measures the TYPED text, not the placeholder, and will mislead you.
   ─────────────────────────────────────────────────────────────────────────── */

/* --- placeholder ---------------------------------------------------------- */
.ais-root .ais-bar__input::placeholder {
  color: var(--ais-color-text-dim, rgba(255, 255, 255, 0.62)) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--ais-color-text-dim, rgba(255, 255, 255, 0.62)) !important;
}

.ais-page .ais-page__input::placeholder,
.ais-page__input::placeholder {
  color: var(--ais-color-text-dim, rgba(26, 26, 26, 0.62)) !important;
  opacity: 1 !important;
  -webkit-text-fill-color: var(--ais-color-text-dim, rgba(26, 26, 26, 0.62)) !important;
}

/* --- the browser's own clear button --------------------------------------- */
/* Suppressed outright: the overlay ships its own close control, and a themed
   UA button next to it reads as a duplicate. Every property the theme sets is
   neutralised, not just `appearance` — a background-image and a border-radius
   still paint on a zero-appearance button. */
.ais-root .ais-bar__input::-webkit-search-cancel-button,
.ais-root .ais-bar__input::-webkit-search-decoration,
.ais-root .ais-bar__input::-webkit-search-results-button,
.ais-root .ais-bar__input::-webkit-search-results-decoration,
.ais-page .ais-page__input::-webkit-search-cancel-button,
.ais-page .ais-page__input::-webkit-search-decoration,
.ais-page__input::-webkit-search-cancel-button,
.ais-page__input::-webkit-search-decoration {
  -webkit-appearance: none !important;
          appearance: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  background: none !important;
  background-image: none !important;
  border-radius: 0 !important;
  pointer-events: none !important;
}

/* Firefox/Edge equivalents. */
.ais-root .ais-bar__input::-ms-clear,
.ais-page__input::-ms-clear {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Belt-and-braces for the vendor autocomplete (see killVendorAutocomplete in
   the JS). CSS alone is not sufficient — the vendor rebuilds and re-shows the
   panel on every keystroke — but it closes the gap between the keystroke and
   our handler, which is exactly the flash the visitor was seeing.

   ⚠ Target the DROPDOWN, never `.algolia-autocomplete`: the vendor WRAPS THE
     INPUT ITSELF in that element, so hiding the wrapper hides the field the
     visitor is typing into. */
body.ais-vendor-suppressed .aa-dropdown-menu,
body.ais-vendor-suppressed .ds-dropdown-menu {
  display: none !important;
}