/* ============================================================
   components.css — buttons, section heads, cards, chips, badges,
   breadcrumb, forms, CTA band, scroll-reveal. BEM throughout.
   ============================================================ */

/* ============================================================
   SCROLL REVEAL
   Hidden initial state applies ONLY when JS is present
   (html.js) AND the user allows motion. So no-JS users and
   reduced-motion users always see content — never hidden.
   ============================================================ */
.reveal { transition: opacity var(--transition-slow), transform var(--transition-slow); }
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal { opacity: 0; transform: translateY(22px); will-change: opacity, transform; }
  html.js .reveal.is-visible { opacity: 1; transform: none; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-block-size: 44px;
  padding-block: var(--space-sm);
  padding-inline: var(--space-lg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.btn:disabled, .btn.is-loading { opacity: .6; cursor: not-allowed; pointer-events: none; }

.btn--sm { min-block-size: 36px; padding-block: var(--space-xs); padding-inline: var(--space-md); font-size: var(--fs-sm); }
.btn--lg { min-block-size: 52px; padding-inline: var(--space-xl); font-size: var(--fs-lg); }
.btn--block { display: flex; inline-size: 100%; }

.btn--primary { background: var(--color-primary); color: var(--color-text-inverse); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--color-primary-deep); color: var(--color-text-inverse); box-shadow: var(--shadow-md); transform: translateY(-2px); }

.btn--secondary { background: var(--color-bg); color: var(--color-primary); border-color: var(--color-border-strong); }
.btn--secondary:hover { border-color: var(--color-primary); color: var(--color-primary-deep); transform: translateY(-2px); }

.btn--ghost { background: transparent; color: var(--color-primary); }
.btn--ghost:hover { background: var(--color-primary-soft); color: var(--color-primary-deep); }

.btn--accent { background: var(--color-primary-deep); color: var(--color-text-inverse); }
.btn--accent:hover { background: var(--color-accent-deep); color: var(--color-text-inverse); transform: translateY(-2px); }

/* On dark surfaces (footer / dark inverse contexts) */
.btn--on-dark { background: var(--color-text-inverse); color: var(--color-primary-deep); }
.btn--on-dark:hover { background: var(--color-accent); color: var(--color-primary-deep); transform: translateY(-2px); }

/* Outline button for dark imagery (hero slider) */
.btn--outline-light { background: transparent; color: var(--color-text-inverse); border-color: var(--color-border-light); }
.btn--outline-light:hover { background: var(--color-text-inverse); color: var(--color-primary-deep); border-color: var(--color-text-inverse); transform: translateY(-2px); }

.btn--icon {
  min-inline-size: 44px;
  padding-inline: 0;
  inline-size: 44px;
}
.btn__icon { transition: transform var(--transition-base); }
.btn:hover .btn__icon--arrow { transform: translateX(4px); }
[dir="rtl"] .btn:hover .btn__icon--arrow { transform: translateX(-4px); }

/* Spinner for loading state */
.btn__spinner {
  inline-size: 1em; block-size: 1em;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ============================================================
   ARROW TEXT LINK
   ============================================================ */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--color-primary);
}
.link-arrow .icon { inline-size: 1.15em; block-size: 1.15em; transition: transform var(--transition-base); }
.link-arrow:hover { color: var(--color-accent-deep); }
.link-arrow:hover .icon { transform: translateX(4px); }
[dir="rtl"] .link-arrow:hover .icon { transform: translateX(-4px); }

/* ============================================================
   SECTION HEAD (eyebrow + title + lede)
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-deep);
}
.eyebrow::before {
  content: "";
  inline-size: 28px;
  block-size: 2px;
  background: var(--gradient-accent);
}

.section-head { max-inline-size: 760px; margin-block-end: var(--space-2xl); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }
.section-head__title { margin-block-start: var(--space-md); }
.section-head__lede {
  margin-block-start: var(--space-md);
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: var(--color-text-muted);
}

.lede {
  font-size: var(--fs-lg);
  line-height: 1.75;
  color: var(--color-text-muted);
}

/* ============================================================
   ICON TILE
   ============================================================ */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 56px;
  block-size: 56px;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-deep);
  border: 1px solid var(--color-border);
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.icon-tile .icon { inline-size: 28px; block-size: 28px; }
.icon-tile--brand {
  background: var(--gradient-brand);
  color: var(--color-text-inverse);
  border-color: transparent;
}

/* ============================================================
   CARD (generic + variants)
   Uniform height via flex column; CTA pushed to bottom.
   ============================================================ */
.card {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
}
.card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--color-surface-2);
}
.card__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.card:hover .card__image { transform: scale(1.06); }
.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  flex: 1 1 auto;
}
.card__title { font-size: var(--fs-xl); }
.card__text { color: var(--color-text-muted); line-height: 1.7; }
.card__footer { margin-block-start: auto; padding-block-start: var(--space-sm); }

/* Feature card — image-led category card (links to a page) */
.feature-card { text-decoration: none; color: inherit; }
.feature-card .card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-card-veil);
  opacity: 0.75;
  transition: opacity var(--transition-base);
}
.feature-card:hover .card__media::after { opacity: 0.95; }
.feature-card__tag {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-start: var(--space-md);
  z-index: 1;
}

/* Solution / service card — icon-led, no image */
.s-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  block-size: 100%;
  padding: var(--space-xl);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  border-block-start: 3px solid var(--color-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.s-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-block-start-color: var(--color-accent);
}
.s-card:hover .icon-tile {
  background: var(--gradient-brand);
  color: var(--color-text-inverse);
  border-color: transparent;
}
.s-card__title { font-size: var(--fs-xl); }
.s-card__text { color: var(--color-text-muted); line-height: 1.7; }
.s-card__footer { margin-block-start: auto; }

/* Industry tile — compact icon + label */
.industry {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.industry:hover { transform: translateY(-4px); border-color: var(--color-accent); box-shadow: var(--shadow-md); }
.industry .icon { inline-size: 26px; block-size: 26px; color: var(--color-accent-deep); }
.industry__label { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-md); }

/* Brand card — placeholder logo plate + name + desc + tag + link */
.brand-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  block-size: 100%;
  padding: var(--space-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.brand-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--color-accent); }
.brand-card__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 96px;
  padding: var(--space-md);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}
.brand-card__logo { inline-size: 100%; block-size: 56px; object-fit: contain; }
.brand-card__name { font-size: var(--fs-lg); }
.brand-card__text { color: var(--color-text-muted); font-size: var(--fs-sm); line-height: 1.7; flex: 1 1 auto; }
.brand-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-block-start: auto; }

/* Value card — used for core values / why-choose / capabilities */
.value-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  block-size: 100%;
  padding: var(--space-xl);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--color-accent); }
.value-card:hover .icon-tile { background: var(--gradient-brand); color: var(--color-text-inverse); border-color: transparent; }
.value-card__title { font-size: var(--fs-lg); }
.value-card__text { color: var(--color-text-muted); line-height: 1.7; }

/* ============================================================
   CHIPS (main solutions strip)
   ============================================================ */
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text);
  transition: border-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
}
.chip:hover { border-color: var(--color-accent); color: var(--color-primary); transform: translateY(-2px); }
.chip .icon { inline-size: 18px; block-size: 18px; color: var(--color-accent-deep); }

/* ============================================================
   BADGE / TAG
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-sm);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--color-surface-2);
  color: var(--color-primary);
}
.tag--accent { background: var(--color-accent-soft); color: var(--color-accent-deep); }
.tag--on-media { background: var(--color-on-media); color: var(--color-primary-deep); box-shadow: var(--shadow-sm); }

/* ============================================================
   CHECK LIST
   ============================================================ */
.check-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.check-list__item { display: flex; align-items: flex-start; gap: var(--space-sm); line-height: 1.6; }
.check-list__item .icon { inline-size: 22px; block-size: 22px; color: var(--color-success); margin-block-start: 2px; }

/* ============================================================
   STAT
   ============================================================ */
.stat__value { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-3xl); color: var(--color-primary); line-height: 1; }
.stat__label { margin-block-start: var(--space-xs); color: var(--color-text-muted); font-size: var(--fs-sm); }

/* ============================================================
   BREADCRUMB  (Fix 6 — block-only padding so it never clobbers
   the .container inline padding / auto-centering it is paired with)
   ============================================================ */
.breadcrumb { padding-block: var(--space-md); }
.breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: var(--fs-sm); }
.breadcrumb__item { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-text-muted); }
.breadcrumb__link { color: var(--color-text-muted); }
.breadcrumb__link:hover { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb__item[aria-current="page"] { color: var(--color-text); font-weight: 600; }
.breadcrumb__sep { color: var(--color-border-strong); }
.breadcrumb__sep .icon { inline-size: 16px; block-size: 16px; }
[dir="rtl"] .breadcrumb__sep .icon { transform: scaleX(-1); }

/* ============================================================
   PANEL / SURFACE BLOCK
   ============================================================ */
.panel {
  padding: var(--space-2xl);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.panel--surface { background: var(--color-surface); }

/* ============================================================
   CTA BAND (light — accent-framed, never dark)
   ============================================================ */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 992px) { .cta-band { grid-template-columns: 1.4fr 1fr; } }
.cta-band::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 6px;
  background: var(--gradient-brand);
}
.cta-band__title { font-size: clamp(var(--fs-xl), 3vw, var(--fs-3xl)); }
.cta-band__text { margin-block-start: var(--space-md); color: var(--color-text-muted); font-size: var(--fs-lg); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.cta-band__contact { display: flex; flex-direction: column; gap: var(--space-md); }

/* Contact line (icon + text), reused across pages */
.contact-line { display: flex; align-items: center; gap: var(--space-sm); }
.contact-line .icon { inline-size: 22px; block-size: 22px; color: var(--color-accent-deep); }
.contact-line__text { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-lg); color: var(--color-text); }
.contact-line__text:hover { color: var(--color-primary); }

/* ============================================================
   FORM
   ============================================================ */
.form__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width: 640px) { .form__grid--2 { grid-template-columns: 1fr 1fr; } }
.form__group { display: flex; flex-direction: column; gap: var(--space-xs); margin-block-end: var(--space-md); }
.form__group--span { grid-column: 1 / -1; }
.form__label { font-family: var(--font-heading); font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); }
.form__req { color: var(--color-danger); }
.form__input {
  padding-block: var(--space-sm);
  padding-inline: var(--space-md);
  min-block-size: 44px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--fs-md);
  color: var(--color-text);
  background: var(--color-bg);
  inline-size: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form__input--textarea { min-block-size: 140px; line-height: 1.6; }
.form__input::placeholder { color: var(--color-text-muted); opacity: 0.7; }
.form__input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.form__input.is-invalid { border-color: var(--color-danger); }
.form__input.is-invalid:focus { box-shadow: 0 0 0 3px var(--color-danger-soft); }
.form__hint { font-size: var(--fs-sm); color: var(--color-text-muted); }
.form__error { font-size: var(--fs-sm); font-weight: 500; color: var(--color-danger); display: flex; align-items: center; gap: var(--space-xs); }
.form__error .icon { inline-size: 16px; block-size: 16px; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-block-start: var(--space-sm); }

/* Form status messages */
.form__status { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); font-size: var(--fs-sm); display: flex; align-items: flex-start; gap: var(--space-sm); }
.form__status .icon { inline-size: 20px; block-size: 20px; margin-block-start: 1px; }
.form__status--success { background: var(--color-success-tint); color: var(--color-success); border: 1px solid var(--color-success-line); }
.form__status--error { background: var(--color-danger-tint); color: var(--color-danger); border: 1px solid var(--color-danger-line); }

/* ============================================================
   MEDIA FIGURE (rounded, framed image)
   ============================================================ */
.media-rounded {
  inline-size: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  object-fit: cover;
}

/* ============================================================
   MAP EMBED (responsive iframe wrapper)
   ============================================================ */
.map-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
.map-embed iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }