/* ==========================================================================
   Vision Enterprises — Components
   Ref #CSG-WEB-2026

   The global shell (top bar, header, mobile menu, footer, floating buttons)
   plus every reusable piece: buttons, cards, badges, tables, forms, tabs,
   carousels, lightbox, ticker.

   Loads after base.css. Consumes tokens only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Icons
   -------------------------------------------------------------------------- */

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: none;
  color: inherit;
}

.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 28px; height: 28px; }
.icon--xl { width: 40px; height: 40px; }

/* --------------------------------------------------------------------------
   Buttons
   Charcoal on amber measures 8.37:1 — comfortably above AA. Amber is a fill
   colour here, never the text colour.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 13px var(--sp-5);
  border-radius: var(--radius-button);
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-button);
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  transition:
    background-color var(--t-hover) var(--ease),
    border-color var(--t-hover) var(--ease),
    color var(--t-hover) var(--ease),
    transform var(--t-hover) var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--ve-amber);
  color: var(--ve-charcoal);
  border-color: var(--ve-amber);
}

.btn--primary:hover {
  background: var(--ve-gold);
  border-color: var(--ve-gold);
  color: var(--ve-charcoal);
}

.btn--secondary {
  background: transparent;
  color: var(--ve-charcoal);
  border-color: var(--ve-charcoal);
}

.btn--secondary:hover {
  background: var(--ve-charcoal);
  color: var(--ve-on-dark);
}

/* On charcoal or over the hero video. */
.btn--ghost {
  background: transparent;
  color: var(--ve-cream);
  border-color: var(--ve-cream);
}

.btn--ghost:hover {
  background: var(--ve-cream);
  color: var(--ve-charcoal);
}

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

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Text link with a trailing arrow. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  color: var(--ve-amber-dk);
  text-decoration: none;
}

.link-arrow:hover {
  color: var(--ve-charcoal);
}

.link-arrow:hover .icon {
  transform: translateX(3px);
}

.link-arrow .icon {
  transition: transform var(--t-hover) var(--ease);
}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 5px 10px;
  border-radius: var(--radius-button);
  font-size: 12px;
  line-height: 1.4;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

/* Trust markers sit charcoal-on-cream rather than introducing a fifth colour,
   so credibility elements never compete with the brand. */
.badge--trust {
  background: var(--ve-cream);
  color: var(--ve-charcoal);
}

.badge--dept {
  background: var(--ve-charcoal);
  color: var(--ve-cream);
}

.badge--amber {
  background: var(--ve-amber);
  color: var(--ve-charcoal);
}

.badge--outline {
  border: 1px solid var(--ve-amber);
  color: var(--ve-amber-dk);
  background: transparent;
}

.badge--open {
  background: var(--ve-error);
  color: #fff;
}

.badge--year {
  background: transparent;
  color: var(--ve-text-muted);
  padding-inline: 0;
}

/* --------------------------------------------------------------------------
   Top bar
   Charcoal band above the header. Hidden below 768px — the ticker moves into
   the mobile menu instead.
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--ve-charcoal);
  color: var(--ve-on-dark-muted);
  font-size: 13px;
  line-height: 1.4;
  border-bottom: 1px solid var(--ve-rule-dark);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--topbar-h);
}

.topbar__left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  flex: 1;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: none;
}

.topbar__label {
  flex: none;
  background: var(--ve-amber);
  color: var(--ve-charcoal);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 3px;
}

.topbar a {
  color: var(--ve-on-dark-muted);
  text-decoration: none;
}

.topbar a:hover {
  color: var(--ve-gold);
}

.topbar__badges {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.topbar__badges img {
  height: 26px;
  width: auto;
  opacity: 0.92;
}

.topbar__call {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--fw-semibold);
  color: var(--ve-cream);
}

/* --------------------------------------------------------------------------
   Language toggle

   Appears in three places, and all three are wired by lang.js:
     1. the charcoal top bar        — desktop only
     2. the header, next to the     — below 1024px only, so switching language
        hamburger                     on a phone is one tap, no menu needed
     3. the mobile menu footer

   The BASE styling is the light one, because two of the three sit on a light
   surface. The top bar opts into the dark variant. Getting this the wrong way
   round puts cream text on the cream menu footer, which is invisible.
   -------------------------------------------------------------------------- */

.lang-toggle {
  display: inline-flex;
  border: 1px solid rgba(40, 31, 27, 0.24);
  border-radius: var(--radius-button);
  overflow: hidden;
  background: var(--ve-white);
}

.lang-toggle button {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--ve-text-muted);
  transition:
    background-color var(--t-hover) var(--ease),
    color var(--t-hover) var(--ease);
}

.lang-toggle button:hover {
  background: var(--ve-cream);
  color: var(--ve-charcoal);
}

.lang-toggle button[aria-pressed="true"] {
  background: var(--ve-amber);
  color: var(--ve-charcoal);
}

/* Dark variant — the charcoal top bar only. */
.topbar .lang-toggle {
  border-color: var(--ve-rule-dark);
  background: transparent;
}

.topbar .lang-toggle button {
  padding: 4px 10px;
  color: var(--ve-on-dark-muted);
}

.topbar .lang-toggle button:hover {
  background: rgba(248, 230, 197, 0.12);
  color: var(--ve-gold);
}

.topbar .lang-toggle button[aria-pressed="true"] {
  background: var(--ve-amber);
  color: var(--ve-charcoal);
}

/* Header variant — hidden on desktop, where the top bar already carries one. */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
}

.lang-toggle--header {
  display: none;
}

.lang-toggle--header button {
  /* Taller than the top-bar version — this one is tapped with a thumb.
     Gives a ~42px target, comfortably past the 24px WCAG minimum and close
     to the 44px both platform guidelines ask for. */
  padding: 11px 14px;
  font-size: 13px;
}

@media (max-width: 1023px) {
  .lang-toggle--header {
    display: inline-flex;
  }
}

/* --------------------------------------------------------------------------
   Ticker
   -------------------------------------------------------------------------- */

.ticker {
  overflow: hidden;
  min-width: 0;
  flex: 1;
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.ticker__track {
  display: flex;
  gap: var(--sp-8);
  width: max-content;
  animation: ticker-scroll 38s linear infinite;
}

.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track {
  animation-play-state: paused;
}

.ticker__item {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.ticker__ref {
  color: var(--ve-gold);
  font-weight: var(--fw-semibold);
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
    width: 100%;
    overflow-x: auto;
  }
}

/* --------------------------------------------------------------------------
   Sticky header
   88px resting, compacts to 64px after 80px of scroll with a shadow.
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--ve-white);
  border-bottom: 1px solid var(--ve-rule);
  transition: box-shadow var(--t-hover) var(--ease);
}

.site-header.is-compact {
  box-shadow: var(--shadow-rest);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  height: var(--header-h);
  transition: height var(--t-hover) var(--ease);
}

.site-header.is-compact .site-header__inner {
  height: var(--header-h-compact);
}

/*
  The logo must be allowed to SHRINK, not hold its width and push the row
  wider than the screen. With `flex: none` here the header row measured
  343px inside a 305px viewport on a 320px phone — logo 150 + language
  toggle 89 + hamburger 44 + gaps + 48px of gutter — and the whole document
  picked up a horizontal scrollbar.

  `flex: 0 1 auto` with `min-width: 0` lets it give way instead. The img keeps
  its width/height attributes for CLS, and max-width/height:auto preserve the
  aspect ratio while it scales down.
*/
.site-header__logo {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
}

.site-header__logo img {
  width: 180px;
  height: 48px;
  max-width: 100%;
  transition: transform var(--t-hover) var(--ease);
  transform-origin: left center;
}

.site-header.is-compact .site-header__logo img {
  transform: scale(0.86);
}

/* Seven flat items, no dropdowns. */
.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.nav__link {
  position: relative;
  display: inline-block;
  padding: var(--sp-2) 0;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--ve-charcoal);
  text-decoration: none;
  white-space: nowrap;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--ve-amber);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-hover) var(--ease);
}

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

.nav__link[aria-current="page"] {
  color: var(--ve-charcoal);
}

.header-cta {
  flex: none;
}

.nav-toggle {
  display: none;
  padding: var(--sp-2);
  color: var(--ve-charcoal);
}

@media (max-width: 1023px) {
  .topbar { display: none; }
  .nav,
  .header-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header__inner { height: var(--header-h-compact); }
  .site-header__logo img { width: 150px; height: 40px; }
}

/*
  Small phones — 320 to 400px.

  Three things share this row and all three have to stay usable: the logo, the
  EN/HI toggle and the hamburger. Below 400px they no longer fit at full size,
  so the logo steps down and the gaps and toggle padding tighten. The toggle
  still clears a 40px tap target.
*/
@media (max-width: 400px) {
  .site-header__logo img { width: 118px; height: 32px; }

  .site-header__inner { gap: var(--sp-2); }

  .header-actions { gap: var(--sp-2); }

  .lang-toggle--header button {
    padding: 10px 9px;
    font-size: 12px;
  }

  .nav-toggle { padding: var(--sp-1); }
}

/* --------------------------------------------------------------------------
   Mobile menu — full-screen slide-in from the right.
   Focus is trapped while open, Escape and backdrop close it, body scroll is
   locked. main.js drives all of that.
   -------------------------------------------------------------------------- */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-menu);
  visibility: hidden;
}

.mobile-menu.is-open {
  visibility: visible;
}

.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: var(--ve-charcoal-80);
  opacity: 0;
  transition: opacity var(--t-hover) var(--ease);
}

.mobile-menu.is-open .mobile-menu__backdrop {
  opacity: 1;
}

.mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(88vw, 380px);
  background: var(--ve-white);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-hover) var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* iPhone notch and home indicator. */
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-menu.is-open .mobile-menu__panel {
  transform: translateX(0);
}

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--ve-rule);
}

.mobile-menu__nav {
  padding: var(--sp-4) var(--sp-5);
}

.mobile-menu__nav a {
  display: block;
  padding: var(--sp-4) 0;
  font-size: 18px;
  font-weight: var(--fw-semibold);
  color: var(--ve-charcoal);
  text-decoration: none;
  border-bottom: 1px solid var(--ve-rule);
}

.mobile-menu__nav a[aria-current="page"] {
  color: var(--ve-amber-dk);
}

.mobile-menu__foot {
  margin-top: auto;
  padding: var(--sp-5);
  background: var(--ve-cream);
}

.mobile-menu__ticker {
  font-size: var(--fs-small);
  color: var(--ve-text-muted);
  margin-bottom: var(--sp-4);
}

body.is-locked {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--ve-white);
  border: 1px solid var(--ve-rule);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-rest);
  transition:
    box-shadow var(--t-hover) var(--ease),
    transform var(--t-hover) var(--ease);
  display: flex;
  flex-direction: column;
}

.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.card__media {
  position: relative;
  background: var(--ve-cream);
}

.card__media img {
  width: 100%;
  height: auto;
}

.card__body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}

.card__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
  color: var(--ve-charcoal);
}

.card__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-size: var(--fs-small);
  color: var(--ve-text-muted);
}

.card__body p {
  color: var(--ve-text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.card--cream {
  background: var(--ve-cream);
  border-color: var(--ve-cream-deep);
}

.card--flat {
  box-shadow: none;
}

.card--flat:hover {
  transform: none;
  box-shadow: var(--shadow-rest);
}

/* Play affordance over a video thumbnail. */
.play-badge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(40, 31, 27, 0.28);
  transition: background-color var(--t-hover) var(--ease);
}

.card:hover .play-badge {
  background: rgba(40, 31, 27, 0.42);
}

.play-badge span {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--ve-amber);
  color: var(--ve-charcoal);
  display: grid;
  place-items: center;
}

/*
  Icon card — services grid, values, differentiators.

  Where the card is itself an <a>, text-decoration has to be cancelled HERE.
  A descendant cannot remove a decoration its ancestor draws, so `text-
  decoration: none` on the .link-arrow inside was ignored and the heading,
  the paragraph and the link all carried the global link underline.
*/
.icon-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--ve-white);
  border: 1px solid var(--ve-rule);
  border-radius: var(--radius-card);
  height: 100%;
  text-decoration: none;
  color: inherit;
}

a.icon-card:hover {
  color: inherit;
  border-color: var(--ve-amber);
}

.icon-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-card);
  background: var(--ve-cream);
  color: var(--ve-amber-dk);
  display: grid;
  place-items: center;
  flex: none;
}

.icon-card h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

.icon-card p {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ve-text-muted);
}

.section--cream .icon-card {
  background: var(--ve-white);
}

.section--charcoal .icon-card {
  background: transparent;
  border-color: var(--ve-rule-dark);
}

.section--charcoal .icon-card__icon {
  background: rgba(250, 171, 24, 0.16);
  color: var(--ve-gold);
}

.section--charcoal .icon-card p {
  color: var(--ve-on-dark-muted);
}

/* --------------------------------------------------------------------------
   Statistics
   -------------------------------------------------------------------------- */

.stat {
  text-align: center;
}

.stat__figure {
  font-size: var(--fs-stat);
  line-height: 1.05;
  font-weight: var(--fw-black);
  color: var(--ve-amber-dk);
  font-variant-numeric: tabular-nums;
}

.section--charcoal .stat__figure {
  color: var(--ve-gold);
}

.stat__label {
  margin-top: var(--sp-2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--ve-text-muted);
}

.section--charcoal .stat__label {
  color: var(--ve-on-dark-muted);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ve-rule);
  border-radius: var(--radius-card);
  -webkit-overflow-scrolling: touch;
}

.table {
  min-width: 640px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.table th,
.table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--ve-rule);
  vertical-align: top;
}

.table thead th {
  background: var(--ve-cream);
  color: var(--ve-charcoal);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr:hover {
  background: rgba(248, 230, 197, 0.35);
}

.table__ref {
  font-weight: var(--fw-semibold);
  color: var(--ve-charcoal);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Forms
   Validation runs on blur, never on keystroke. Errors appear inline beneath
   the field in a red that clears 4.5:1 on white, and are never signalled by
   border colour alone — that fails for colour-blind users.
   -------------------------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--ve-charcoal);
}

.field__req {
  color: var(--ve-error);
  margin-left: 2px;
}

.field__hint {
  font-size: 12px;
  color: var(--ve-text-muted);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 12px var(--sp-4);
  background: var(--ve-white);
  border: 1px solid rgba(40, 31, 27, 0.28);
  border-radius: var(--radius-input);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--ve-charcoal);
  transition:
    border-color var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease);
}

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

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--ve-charcoal);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--ve-amber-dk);
  box-shadow: 0 0 0 3px rgba(179, 106, 0, 0.18);
}

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

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23281F1B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 18px;
  padding-right: var(--sp-8);
}

/* Error state carries three signals: border, icon and text. */
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea {
  border-color: var(--ve-error);
  background: var(--ve-error-bg);
}

.field__error {
  display: none;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ve-error);
  font-weight: var(--fw-semibold);
}

.field.has-error .field__error {
  display: flex;
}

.field__count {
  font-size: 12px;
  color: var(--ve-text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.field__count.is-over {
  color: var(--ve-error);
  font-weight: var(--fw-semibold);
}

/* Honeypot. Must stay empty — forms.js silently discards a filled one.
   Positioned off-screen rather than display:none so naive bots still see it. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-5);
}

.form-grid .field--full {
  grid-column: 1 / -1;
}

@media (max-width: 767px) {
  .form-grid { grid-template-columns: minmax(0, 1fr); }
}

.form-status {
  padding: var(--sp-5);
  border-radius: var(--radius-card);
  border: 1px solid;
}

.form-status--ok {
  background: var(--ve-success-bg);
  border-color: var(--ve-success);
  color: var(--ve-success);
}

.form-status--fail {
  background: var(--ve-error-bg);
  border-color: var(--ve-error);
  color: var(--ve-error);
}

.form-status h3 {
  color: inherit;
  margin-bottom: var(--sp-2);
}

.form-status p {
  color: var(--ve-text);
}

/* --------------------------------------------------------------------------
   Filter bar — portfolio
   -------------------------------------------------------------------------- */

.filter-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--ve-cream);
  border-radius: var(--radius-card);
}

@media (max-width: 1023px) { .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .filter-bar { grid-template-columns: minmax(0, 1fr); } }

.search-field {
  position: relative;
}

.search-field .icon {
  position: absolute;
  left: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ve-text-muted);
  pointer-events: none;
}

.search-field .input {
  padding-left: var(--sp-7);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  margin-top: var(--sp-4);
  min-height: 34px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 12px;
  background: var(--ve-charcoal);
  color: var(--ve-cream);
  border-radius: var(--radius-button);
  font-size: 13px;
  font-weight: var(--fw-semibold);
}

.chip button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  color: var(--ve-cream);
  transition: background-color var(--t-hover) var(--ease);
}

.chip button:hover {
  background: rgba(248, 230, 197, 0.2);
}

.result-count {
  font-size: var(--fs-small);
  color: var(--ve-text-muted);
}

.empty-state {
  text-align: center;
  padding: var(--sp-9) var(--sp-5);
}

.empty-state img {
  margin: 0 auto var(--sp-5);
}

/* --------------------------------------------------------------------------
   Tabs — team categories, tender archive toggle
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ve-rule);
  margin-bottom: var(--sp-7);
}

.tab {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  color: var(--ve-text-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition:
    color var(--t-hover) var(--ease),
    border-color var(--t-hover) var(--ease);
}

.tab:hover {
  color: var(--ve-charcoal);
}

.tab[aria-selected="true"] {
  color: var(--ve-charcoal);
  border-bottom-color: var(--ve-amber);
}

/* --------------------------------------------------------------------------
   Carousel — testimonials and the department logo strip
   -------------------------------------------------------------------------- */

.carousel {
  position: relative;
}

.carousel__viewport {
  overflow: hidden;
}

.carousel__track {
  display: flex;
  gap: var(--grid-gap);
  transition: transform var(--t-reveal) var(--ease);
  will-change: transform;
}

.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.carousel__btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ve-rule);
  border-radius: 50%;
  background: var(--ve-white);
  color: var(--ve-charcoal);
  transition:
    background-color var(--t-hover) var(--ease),
    color var(--t-hover) var(--ease);
}

.carousel__btn:hover {
  background: var(--ve-amber);
}

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

.carousel__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(40, 31, 27, 0.22);
  transition: background-color var(--t-hover) var(--ease);
}

.carousel__dot[aria-current="true"] {
  background: var(--ve-amber);
  width: 26px;
  border-radius: 5px;
}

/* Auto-scrolling department strip. Pauses on hover. */
.logo-strip {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
}

.logo-strip__track {
  display: flex;
  gap: var(--sp-7);
  width: max-content;
  align-items: center;
  animation: strip-scroll 46s linear infinite;
}

.logo-strip:hover .logo-strip__track,
.logo-strip:focus-within .logo-strip__track {
  animation-play-state: paused;
}

.logo-strip a {
  display: block;
  flex: none;
  border-radius: var(--radius-card);
  transition: transform var(--t-hover) var(--ease);
}

/* Drawn at 160x80; shown a quarter larger on desktop, where the strip sits in
   a band of its own and the department names were the smallest type on the
   page. The intrinsic attributes stay as they are, so nothing shifts. */
.logo-strip img {
  width: 200px;
  height: 100px;
}

@media (max-width: 767px) {
  .logo-strip img {
    width: 160px;
    height: 80px;
  }
}

.logo-strip a:hover {
  transform: translateY(-3px);
}

@keyframes strip-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-strip { overflow-x: auto; mask-image: none; }
  .logo-strip__track { animation: none; }
}

/* Testimonial */
.testimonial {
  background: var(--ve-white);
  border: 1px solid var(--ve-rule);
  border-radius: var(--radius-card);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  height: 100%;
}

.testimonial__quote {
  color: var(--ve-amber);
}

.testimonial blockquote {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ve-charcoal);
}

.testimonial__person {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--ve-rule);
}

.testimonial__person img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-avatar);
  flex: none;
}

.testimonial__name {
  font-weight: var(--fw-semibold);
  color: var(--ve-charcoal);
  font-size: var(--fs-small);
}

.testimonial__role {
  font-size: 13px;
  color: var(--ve-text-muted);
}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background: rgba(40, 31, 27, 0.94);
}

.lightbox.is-open {
  display: flex;
}

.lightbox__stage {
  position: relative;
  width: min(1100px, 100%);
  max-height: 86vh;
}

.lightbox__stage img {
  width: 100%;
  height: auto;
  max-height: 86vh;
  object-fit: contain;
  margin-inline: auto;
  border-radius: var(--radius-card);
}

.lightbox__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.lightbox__frame iframe,
.lightbox__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  color: var(--ve-cream);
  font-size: var(--fs-small);
}

.lightbox__btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(248, 230, 197, 0.14);
  color: var(--ve-cream);
  transition: background-color var(--t-hover) var(--ease);
}

.lightbox__btn:hover {
  background: var(--ve-amber);
  color: var(--ve-charcoal);
}

.lightbox__close {
  position: absolute;
  top: calc(-1 * var(--sp-7));
  right: 0;
}

.lightbox__nav {
  display: flex;
  gap: var(--sp-2);
}

/* --------------------------------------------------------------------------
   Floating buttons — WhatsApp above back-to-top in the stacking order
   -------------------------------------------------------------------------- */

.fab-stack {
  position: fixed;
  right: var(--sp-5);
  bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
  z-index: var(--z-fab);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--sp-3);
  align-items: center;
}

.fab {
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ve-amber);
  color: var(--ve-charcoal);
  box-shadow: var(--shadow-hover);
  transition:
    background-color var(--t-hover) var(--ease),
    transform var(--t-hover) var(--ease);
}

.fab:hover {
  background: var(--ve-gold);
  color: var(--ve-charcoal);
  transform: translateY(-2px);
}

/*
  WhatsApp — the brand's own colours, white mark on #25D366.

  CLIENT-DIRECTED, and it carries one known accessibility cost: a white glyph
  on #25D366 measures 1.98:1, below the 3:1 that WCAG 1.4.11 asks of the
  graphic that identifies a control. This is the authentic WhatsApp mark and
  was chosen deliberately over an accessible substitute. Do not "fix" it by
  darkening the fill without checking with the client first.

  What IS handled here: the button's own boundary. #25D366 against a white
  page is 1.98:1, so the circle would dissolve into any white section. The
  darker #128C7E ring below sits at 4.14:1 against white and 3.37:1 against
  cream, giving the control a visible edge everywhere without altering the
  colour anyone actually perceives.

  If the glyph contrast ever has to pass as well, the options are a charcoal
  glyph on the same fill (8.13:1) or dropping the fill to #1DA851 (3.10:1 with
  white) — both change the look, so both are the client's call.
*/
.fab--whatsapp {
  background: #25D366;
  color: #FFFFFF;
  box-shadow:
    0 0 0 1.5px #128C7E,
    var(--shadow-hover);
}

.fab--whatsapp:hover {
  background: #1EBE5A;
  color: #FFFFFF;
  box-shadow:
    0 0 0 1.5px #075E54,
    var(--shadow-hover);
}

.fab--top {
  width: 44px;
  height: 44px;
  background: var(--ve-charcoal);
  color: var(--ve-cream);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--t-hover) var(--ease),
    visibility var(--t-hover) var(--ease),
    transform var(--t-hover) var(--ease);
}

.fab--top.is-visible {
  opacity: 1;
  visibility: visible;
}

.fab--top:hover {
  background: var(--ve-charcoal);
  color: var(--ve-gold);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--ve-charcoal);
  color: var(--ve-on-dark-muted);
  border-top: 4px solid var(--ve-amber);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.site-footer h3 {
  color: var(--ve-white);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--sp-7) var(--sp-6);
  padding-block: var(--sp-8);
}

@media (max-width: 1023px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}

.site-footer a {
  color: var(--ve-on-dark-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--ve-gold);
}

.footer-links li + li {
  margin-top: var(--sp-3);
}

.footer-tagline {
  margin-top: var(--sp-4);
  max-width: 34ch;
}

.footer-contact li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}

.footer-contact li + li {
  margin-top: var(--sp-3);
}

.footer-contact .icon {
  color: var(--ve-amber);
  margin-top: 2px;
}

.footer-certs {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-block: var(--sp-5);
  border-top: 1px solid var(--ve-rule-dark);
}

.footer-certs img {
  height: 40px;
  width: auto;
}

.footer-districts {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-left: auto;
}

.footer-districts img {
  width: 84px;
  height: 92px;
}

.footer-social {
  display: flex;
  gap: var(--sp-2);
}

.footer-social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ve-rule-dark);
  border-radius: var(--radius-button);
  transition:
    background-color var(--t-hover) var(--ease),
    color var(--t-hover) var(--ease);
}

.footer-social a:hover {
  background: var(--ve-amber);
  color: var(--ve-charcoal);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-block: var(--sp-5);
  border-top: 1px solid var(--ve-rule-dark);
  font-size: 13px;
}

.footer-legal {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* Agency credit — the last line on every page. */
.footer-credit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-block: var(--sp-4);
  border-top: 1px solid var(--ve-rule-dark);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ve-on-dark-muted);
}

/* Colour is the fallback: where the heart renders as a plain glyph rather than
   an emoji, it still reads as a heart and not as punctuation. */
.footer-credit__heart {
  color: #FF5A5A;
}

.footer-credit a {
  color: var(--ve-white);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.footer-credit a:hover {
  color: var(--ve-gold);
}

.footer-credit__by {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-credit__by img {
  width: 20px;
  height: 20px;
  flex: none;
}

/* --------------------------------------------------------------------------
   Page hero — compact hero used by every page except Home
   -------------------------------------------------------------------------- */

.page-hero {
  background: var(--ve-cream);
  padding-block: var(--sp-8);
  border-bottom: 1px solid var(--ve-cream-deep);
}

.page-hero__inner {
  max-width: 72ch;
}

.page-hero p {
  margin-top: var(--sp-3);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ve-text-muted);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  color: var(--ve-text-muted);
  margin-bottom: var(--sp-3);
}

.breadcrumb a {
  color: var(--ve-text-muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--ve-amber-dk);
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  background: var(--ve-amber);
  padding-block: var(--sp-8);
}

.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.cta-band h2,
.cta-band p {
  color: var(--ve-charcoal);
}

.cta-band p {
  margin-top: var(--sp-2);
}

.cta-band .btn--primary {
  background: var(--ve-charcoal);
  border-color: var(--ve-charcoal);
  color: var(--ve-cream);
}

.cta-band .btn--primary:hover {
  background: var(--ve-white);
  border-color: var(--ve-white);
  color: var(--ve-charcoal);
}