/* ==========================================================================
   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 and lightbox.

   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;
  /* A button that carries an e-mail address cannot wrap at a space, so let it
     break anywhere rather than push the page wider than a 320px phone. */
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
  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.
   -------------------------------------------------------------------------- */

.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);
}


/* The tender ticker used to sit on the left of this bar. With it gone this is
   the only group left, so it is pushed right to keep the bar looking as it
   did rather than drifting to the left edge. */
.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: none;
  margin-left: auto;
}


.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;
  }
}

/* --------------------------------------------------------------------------
   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: 500px;
  height: 100px;
  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);
}


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
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  justify-content: center;
  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);
}

.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--portrait {
  width: auto;
  height: min(76vh, 700px);
  aspect-ratio: 9 / 16;
  margin-inline: auto;
}

.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
   -------------------------------------------------------------------------- */

/* Charcoal with a little depth: two faint glows, amber top-right and gold
   top-left, both at low alpha so no new colour enters the palette. Text sits
   well above 4.5:1 on every part of it. */
.site-footer {
  background:
    radial-gradient(900px 380px at 90% -10%, rgba(250, 171, 24, 0.12), transparent 70%),
    radial-gradient(700px 320px at 2% 0%, rgba(255, 203, 4, 0.06), transparent 70%),
    var(--ve-charcoal);
  color: var(--ve-on-dark-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* The flat 4 px amber border becomes a line that warms from amber to gold and
   back, which reads as a finished edge rather than a stripe. */
.site-footer::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--ve-amber), var(--ve-gold) 50%, var(--ve-amber));
}

.site-footer h3 {
  position: relative;
  color: var(--ve-white);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-5);
}

/* A short amber underline, the same device the nav uses for the active page. */
.site-footer h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--ve-amber);
}

/* Two tiers. The brand band (logo and five points) runs across the top, then
   three columns that are all about the same height. With the brand folded
   into the columns it was twice as tall as its neighbours and left a dead
   block of charcoal under them. The contact column is the widest of the
   three: an e-mail address is one unbreakable token and used to snap in two
   at ".com" in a narrower column. */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr;
  gap: var(--sp-7) var(--sp-6);
  padding-block: var(--sp-7) var(--sp-8);
}

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

  /* Links and Services side by side; Contact gets a full row of its own. */
  .footer-grid > :last-child { grid-column: 1 / -1; }
}

@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);
}

/* Links ease a few pixels towards you on hover, a small cue that they are
   alive. The global reduced-motion rule switches the transition off. */
.footer-links a {
  display: inline-block;
  transition: color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease);
}

.footer-links a:hover {
  transform: translateX(4px);
}

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

/* Brand block: the logo, then the five points from the client's brief.
   The logo is the artwork's own 280 x 235 WebP shown at 140 px wide — twice
   the size the old SVG managed, and sharp even on a 2x screen. 200 px was
   tried and read as heavier than everything around it. */
.footer-brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: center;
  padding-block: var(--sp-9) var(--sp-8);
  border-bottom: 1px solid var(--ve-rule-dark);
}

.footer-logo {
  display: block;
  width: 140px;
  height: auto;
}

/* The credentials strip: five facts in a row, each a gold lead over a quiet
   description, divided by hairlines. The same five claims as the client's
   note, in a form the eye can take in at a glance. */
.footer-facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.footer-facts li {
  padding: var(--sp-1) var(--sp-5);
  border-left: 1px solid var(--ve-rule-dark);
}

.footer-fact__lead {
  display: block;
  margin-bottom: var(--sp-2);
  color: var(--ve-gold);
  font-size: 18px;
  line-height: 1.25;
  font-weight: var(--fw-black);
  letter-spacing: -0.01em;
}

.footer-fact__text {
  display: block;
  color: var(--ve-on-dark-muted);
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 1199px) {
  /* Not enough width for the logo and five columns side by side: the logo goes
     above the strip, which is how the client's note describes it anyway. */
  .footer-brand {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
    padding-block: var(--sp-8) var(--sp-7);
  }

  /* The logo's left edge lines up with the first fact's text, not its rule. */
  .footer-facts li:first-child { padding-left: 0; border-left: 0; }
}

@media (max-width: 1023px) {
  .footer-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--sp-5);
  }

  .footer-facts li:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
}

@media (max-width: 767px) {
  .footer-brand { padding-block: var(--sp-7) var(--sp-6); }

  .footer-facts {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  /* One column: the vertical hairlines become horizontal ones. */
  .footer-facts li,
  .footer-facts li:first-child,
  .footer-facts li:nth-child(3n + 1) {
    padding: var(--sp-4) 0;
    border-left: 0;
    border-top: 1px solid var(--ve-rule-dark);
  }

  .footer-facts li:first-child { border-top: 0; padding-top: 0; }
}

.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;
}

/* An e-mail address is one unbreakable token; without this it pushes the
   footer column wider than a 320px phone. */
.footer-contact a,
.footer-contact span {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Each phone number on its own line, so "+91" is never left behind on one line
   with the rest of the number on the next. */
.footer-contact__line {
  display: block;
  white-space: nowrap;
}

.footer-contact__line + .footer-contact__line {
  margin-top: var(--sp-1);
}

.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;
}

/* The base: one band across the full width, a shade darker than the rest of
   the footer, holding the copyright line and the agency credit. It reads as the
   footer's closing edge rather than a few loose items between hairlines. */
.footer-base {
  background: rgba(0, 0, 0, 0.24);
  border-top: 1px solid var(--ve-rule-dark);
}

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  font-size: 13px;
}

.footer-bottom > :first-child { justify-self: start; }

.footer-legal {
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) 28px;
}

/* Small amber dots between the links instead of nothing. */
.footer-legal a { position: relative; }

.footer-legal a + a::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ve-amber);
  transform: translateY(-50%);
}

.footer-social {
  justify-self: end;
  display: flex;
  gap: var(--sp-2);
  /* The WhatsApp and back-to-top buttons are fixed to the bottom-right of the
     screen, so at the very end of the page they sit exactly where this pill
     would. Keep it clear of that column. */
  margin-right: calc(var(--fab-size) + var(--sp-4));
}

/* A labelled pill. A lone icon in a bordered square looked like something
   missing; with its name it reads as a deliberate link. */
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 14px;
  border: 1px solid var(--ve-rule-dark);
  border-radius: var(--radius-button);
  color: var(--ve-cream);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  transition:
    background-color var(--t-hover) var(--ease),
    border-color var(--t-hover) var(--ease),
    color var(--t-hover) var(--ease);
}

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

@media (max-width: 899px) {
  .footer-bottom {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: var(--sp-4);
  }

  .footer-bottom > :first-child,
  .footer-legal,
  .footer-social { justify-self: center; }

  /* Centred, so it is nowhere near the buttons any more. */
  .footer-social { margin-right: 0; }
}

/* The agency credit is the last line on the page, and on a phone it spans
   nearly the full width, so the fixed WhatsApp and back-to-top buttons sat on
   top of it at the very end of the scroll. Narrowing it equally on both sides
   keeps it centred and wraps it short of the buttons' column, with no dead
   space left under the page. */
@media (max-width: 599px) {
  /* .footer-base in front for specificity: this block sits above the base
     .footer-credit rule, which would otherwise put the font size back to 13px. */
  .footer-base .footer-credit {
    padding-inline: 72px;
    font-size: 12px;
  }

  /* The sentence gets its own row, broken into two even lines, so the heart,
     "by" and the agency name form a tidy last line. Left to itself it ran right
     up to the WhatsApp button, or left a stray word on a line of its own. */
  .footer-base .footer-credit > span:first-child {
    flex: 0 0 100%;
    text-align: center;
    text-wrap: balance;
  }
}

/* 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);
}


/* =========================================================
   PDF INSIDE LIGHTBOX
========================================================= */

.lightbox__pdf-wrap {
  width: min(1100px, 92vw);
  height: 82vh;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
}

.lightbox__pdf {
  width: 100%;
  height: 100%;
  min-height: 500px;
  border: 0;
  display: block;
}

.lightbox__pdf-fallback {
  width: 100%;
  height: 100%;
  min-height: 500px;
  border: 0;
}


.social-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    font-size: 17px;
    line-height: 1;
    text-decoration: none;

    transition: transform 0.25s ease;
}

/* Original brand colors */
.social-links .facebook {
    color: #1877F2;
}

.social-links .instagram {
    color: #E4405F;
}

.social-links .youtube {
    color: #FF0000;
}

/* Small hover animation */
.social-links a:hover {
    transform: translateY(-2px);
}

.social-links .facebook:hover {
    color: #0C5DC7;
}

.social-links .instagram:hover {
    color: #C13584;
}

.social-links .youtube:hover {
    color: #CC0000;
}


.footer-certs {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}