/* ==========================================================================
   Dwitech — Global Stylesheet
   Table of contents:
   1. Custom properties / brand tokens
   2. Base & typography
   3. Layout utilities
   4. Buttons
   5. Header & navigation
   6. Hero video
   7. Section headings
   10. About section
   11. Why choose us
   13. CTA section
   14. Footer
   15. Breadcrumb / page header
   16. Forms
   20. Animations
   21. Directors grid
   22. FAQ accordion
   23. Partners / brand logos
   ========================================================================== */

/* 1. Custom properties / brand tokens
   ========================================================================== */
:root {
  --color-primary: #253774;
  --color-primary-dark: #1b2957;
  --color-primary-darker: #141d3f;
  --color-primary-light: #3c4f8f;
  --color-primary-50: #eef1f9;
  --color-primary-100: #dde3f3;

  --color-white: #ffffff;
  --color-gray-50: #f7f8fb;
  --color-gray-100: #eef0f5;
  --color-gray-200: #e2e6ee;
  --color-gray-300: #cbd1de;
  --color-gray-400: #9aa3b8;
  --color-gray-500: #707a92;
  --color-gray-600: #565f76;
  --color-gray-700: #3d4459;
  --color-gray-800: #262b3b;
  --color-dark: #10142a;

  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(16, 20, 42, 0.06);
  --shadow-md: 0 10px 30px rgba(16, 20, 42, 0.10);
  --shadow-lg: 0 24px 56px rgba(16, 20, 42, 0.16);

  --transition-base: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --header-height: 84px;
}

/* 2. Base & typography
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  color: var(--color-gray-700);
  background-color: var(--color-white);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main {
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-base);
  color: var(--color-dark);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.display-heading {
  font-weight: 800;
  letter-spacing: -0.02em;
}

p {
  margin-bottom: 1rem;
}

a {
  text-decoration: none;
  color: var(--color-primary);
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-primary-dark);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

::selection {
  background: var(--color-primary);
  color: var(--color-white);
}

.text-primary-brand { color: var(--color-primary) !important; }
.bg-primary-brand { background-color: var(--color-primary) !important; }
.bg-soft { background-color: var(--color-gray-50); }
.bg-primary-soft { background-color: var(--color-primary-50); }
.fw-800 { font-weight: 800 !important; }

:focus-visible {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 2px;
}

/* 3. Layout utilities
   ========================================================================== */
.section {
  padding: 5.5rem 0;
}

.section-sm {
  padding: 3.5rem 0;
}

.container {
  max-width: 1260px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-50);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  display: inline-block;
}

.section-lead {
  color: var(--color-gray-500);
  font-size: 1.05rem;
  max-width: 620px;
}

.divider-light {
  border-color: var(--color-gray-200);
  opacity: 1;
}

/* 4. Buttons
   ========================================================================== */
.btn {
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 0.75rem 1.75rem;
  transition: all var(--transition-base);
  border-width: 2px;
  letter-spacing: 0.01em;
}

.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
}

.btn-primary-brand {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.btn-primary-brand:hover,
.btn-primary-brand:focus {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline-brand {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-outline-brand:hover,
.btn-outline-brand:focus {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-outline-light-brand {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--color-white);
}

.btn-outline-light-brand:hover,
.btn-outline-light-brand:focus {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-primary);
  transform: translateY(-2px);
}

/* Product card CTA — the card's single primary action. Solid Dwitech blue
   by default, inverting to a white/blue outline on hover. */
.btn-card-cta {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.btn-card-cta:hover,
.btn-card-cta:focus {
  background-color: var(--color-white);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-light-brand {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-primary);
}

.btn-light-brand:hover,
.btn-light-brand:focus {
  background-color: var(--color-gray-100);
  border-color: var(--color-gray-100);
  color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* 5. Header & navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--color-white);
  box-shadow: 0 1px 0 rgba(16, 20, 42, 0.06);
  transition: box-shadow var(--transition-base), padding var(--transition-base);
  /* The header's own height changes with .is-scrolled (100px logo vs
     68px); without this, scroll anchoring compensates for that resize by
     nudging window.scrollY, which is what fed the is-scrolled flicker
     loop in initStickyHeader (main.js) at the threshold boundary. */
  overflow-anchor: none;
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-md);
}

.topbar {
  background: var(--color-primary-darker);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
}

.topbar a {
  color: rgba(255, 255, 255, 0.85);
}

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

.topbar .topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Larger at the top of the page, shrinking to the compact size once
   .site-header picks up .is-scrolled (see initStickyHeader in main.js).
   width is left on auto — animating height alone is enough for the browser
   to recompute width every frame from the image's own aspect ratio, so the
   shrink/grow stays perfectly proportional with no distortion. */
.navbar-brand-logo {
  height: 100px;
  width: auto;
  transition: height 0.3s ease;
}

.site-header.is-scrolled .navbar-brand-logo {
  height: 68px;
}

.main-nav {
  padding: 0;
}

.main-nav .nav-link {
  font-weight: 600;
  color: var(--color-gray-700);
  padding: 0.6rem 1rem !important;
  position: relative;
}

.main-nav .nav-link.active,
.main-nav .nav-link:hover {
  color: var(--color-primary);
}

/* :not(.dropdown-toggle) is essential — the Category link is both a
   ".nav-link.active" (gets this underline) AND a ".dropdown-toggle" (gets
   its own ::after caret). CSS cascades per PROPERTY, not per rule, so
   without this exclusion the two rules' declarations merge into one
   broken hybrid pseudo-element (the underline's position:absolute +
   height:2px fights the caret's border-triangle), and the arrow
   effectively disappears. Keeping them on separate elements avoids the
   conflict entirely. */
.main-nav .nav-link.active:not(.dropdown-toggle)::after {
  content: '';
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.15rem;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.header-phone {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  color: var(--color-gray-800);
}

.header-phone .icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-50);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.header-phone small {
  display: block;
  font-weight: 500;
  color: var(--color-gray-500);
  font-size: 0.75rem;
}

.header-phone a {
  color: inherit;
  text-decoration: none;
}

.header-phone a:hover,
.header-phone a:focus-visible {
  color: var(--color-primary);
}

/* Desktop Category dropdown — opens on hover (and on keyboard focus), no
   click required. Bootstrap's dropdown JS is intentionally NOT attached to
   this toggle (no data-bs-toggle) so there is nothing to conflict with the
   hover behaviour below; the mobile version is a completely separate
   collapsible submenu inside the offcanvas menu (click/tap-based). */
.main-nav .nav-item.dropdown {
  position: relative;
}

/* Fully self-contained caret (not relying on Bootstrap's base
   .dropdown-toggle::after) so it can never be partially overridden by an
   unrelated ::after rule (e.g. the active-state underline) leaving a
   broken hybrid box behind. currentColor keeps it in sync with the link's
   own text color in every state (default grey, hover/active blue). */
.main-nav .nav-item.dropdown .dropdown-toggle::after {
  content: '';
  display: inline-block;
  position: static;
  width: 0;
  height: 0;
  margin-left: 0.4em;
  vertical-align: 0.15em;
  border-style: solid;
  border-width: 0.32em 0.28em 0;
  border-color: currentColor transparent transparent;
  background: none;
  border-radius: 0;
  transition: transform var(--transition-base);
}

.main-nav .nav-item.dropdown:hover .dropdown-toggle::after,
.main-nav .nav-item.dropdown:focus-within .dropdown-toggle::after {
  transform: rotate(180deg);
}

/* Invisible bridge closes the gap between the nav link and the menu so the
   hover state survives the cursor moving diagonally down into the list. */
.main-nav .nav-item.dropdown::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
}

.dropdown-menu-brand {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.6rem;
  min-width: 240px;
}

@media (min-width: 992px) {
  .dropdown-menu-brand {
    display: block;
    margin-top: 0.85rem !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
  }

  .main-nav .nav-item.dropdown:hover .dropdown-menu-brand,
  .main-nav .nav-item.dropdown:focus-within .dropdown-menu-brand {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

.dropdown-menu-brand .dropdown-item {
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.9rem;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--color-gray-700);
  transition: all var(--transition-base);
}

.dropdown-menu-brand .dropdown-item:hover,
.dropdown-menu-brand .dropdown-item:focus {
  background-color: var(--color-primary-50);
  color: var(--color-primary);
}

.dropdown-menu-brand .dropdown-item.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.dropdown-menu-brand hr.dropdown-divider {
  margin: 0.4rem 0.2rem;
  border-color: var(--color-gray-200);
}

/* Offcanvas mobile menu */
.offcanvas-brand {
  background: var(--color-primary);
  color: var(--color-white);
}

.offcanvas-brand .btn-close {
  filter: brightness(0) invert(1);
}

#mobileNav .nav-link {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-gray-800);
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-gray-100);
}

/* The contact info block right after this list already has its own
   border-top divider, so the last item's border-bottom would duplicate
   it as two close, parallel lines — drop it here only. */
#mobileNav .nav-item:last-child .nav-link {
  border-bottom: none;
}

#mobileNav .nav-link.active {
  color: var(--color-primary);
}

#mobileNav .nav-item {
  width: 100%;
}

/* Mobile Category submenu (collapsible, inside the offcanvas) */
.mobile-category-toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.mobile-category-toggle .chevron-icon {
  transition: transform var(--transition-base);
  font-size: 0.9rem;
  color: var(--color-gray-400);
}

.mobile-category-toggle[aria-expanded="true"] .chevron-icon {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.mobile-submenu {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0.75rem 0.75rem;
}

.mobile-submenu li a {
  display: block;
  padding: 0.7rem 0.5rem;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-gray-600);
  border-bottom: 1px solid var(--color-gray-100);
}

.mobile-submenu li:last-child a {
  border-bottom: none;
}

.mobile-submenu li a:hover,
.mobile-submenu li a.active {
  color: var(--color-primary);
}

/* 6. Hero video
   ========================================================================== */
/* Full-width autoplaying video hero.

   On mobile, a viewport-filling box is far taller/narrower than this 16:9
   footage, so object-fit: cover ends up cropping most of each shot's width
   away to fill that shape. Below 768px the hero is capped to a fixed,
   shorter height instead — close enough to the source aspect ratio that
   cover only trims a little off the sides, not most of the frame — and it
   still comfortably fits the first viewport with no scrolling needed.

   At 768px and up the viewport is wide enough that filling the screen
   height no longer forces heavy cropping, so the hero instead fills the
   full height below the header (set per breakpoint, since the topbar only
   shows at lg+ and the nav bar itself is a different height on mobile vs
   desktop), giving a proper full-width/full-height website hero there.

   object-position: center keeps each clip's subject matter — signage,
   shelving, product displays — centred rather than cropping from one
   fixed edge, at every size. */
.hero-video-section {
  position: relative;
  width: 100%;
  height: 55vh;
  min-height: 290px;
  max-height: 520px;
  overflow: hidden;
  background: var(--color-primary-darker);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Subtle, text-free finishing layer — a soft brand-navy wash plus a touch
   of extra darkening right at the top/bottom edges (a light vignette) to
   separate the video from the white header above and the section below,
   and to add a little depth/richness. Kept deliberately light so the
   footage itself stays the clear focus; pointer-events: none so it never
   interferes with the video element underneath. */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(16, 20, 42, 0.18) 0%, rgba(16, 20, 42, 0.02) 22%, rgba(16, 20, 42, 0.03) 78%, rgba(16, 20, 42, 0.2) 100%),
    rgba(37, 55, 116, 0.06);
  pointer-events: none;
}

@media (min-width: 768px) {
  .hero-video-section {
    --header-height: 112px;
    height: calc(100vh - var(--header-height));
    min-height: 320px;
    max-height: 900px;
  }
}

@media (min-width: 992px) {
  .hero-video-section {
    --header-height: 152px;
  }
}

/* 7. Section headings
   ========================================================================== */
.section-heading {
  margin-bottom: 3rem;
}

.section-heading .section-title {
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  margin-bottom: 0.9rem;
}

.section-heading.text-center {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* 10. About section
   ========================================================================== */
.about-media {
  position: relative;
}

.about-media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  aspect-ratio: 4 / 3.1;
  object-fit: cover;
}

.about-points {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0;
}

.about-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0.9rem;
  font-weight: 500;
  color: var(--color-gray-700);
}

.about-points li i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary-50);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

/* 11. Why choose us
   ========================================================================== */
.feature-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 2rem 1.6rem;
  height: 100%;
  transition: all var(--transition-base);
}

.feature-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px);
}

.feature-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  background: var(--color-primary-50);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 1.25rem;
  transition: all var(--transition-base);
}

.feature-card:hover .feature-icon {
  background: var(--color-primary);
  color: var(--color-white);
}

.feature-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.6rem;
}

.feature-card p {
  color: var(--color-gray-500);
  font-size: 0.92rem;
  margin-bottom: 0;
}

/* 13. CTA section
   ========================================================================== */
.cta-section {
  position: relative;
  background-color: var(--color-primary-darker);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(37, 55, 116, 0.96) 0%, rgba(20, 29, 63, 0.96) 100%);
}

.cta-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--color-white);
  max-width: 720px;
  margin: 0 auto;
}

.cta-content h2 {
  color: var(--color-white);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  margin-bottom: 1rem;
}

.cta-content p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  margin-bottom: 2rem;
}

.cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* 14. Footer
   ========================================================================== */
.site-footer {
  background: var(--color-primary-darker);
  color: rgba(255, 255, 255, 0.72);
}

.footer-top {
  padding: 4.5rem 0 3rem;
}

.footer-logo {
  height: 58px;
  width: auto;
  margin-bottom: 1.25rem;
}

.footer-about p {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.92rem;
}

.footer-social {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.5rem;
}

.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
}

.footer-social a:hover {
  background: var(--color-white);
  color: var(--color-primary);
  transform: translateY(-3px);
}

.footer-heading {
  color: var(--color-white);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.4rem;
  letter-spacing: 0.02em;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.8rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.92rem;
  transition: all var(--transition-base);
}

.footer-links a:hover {
  color: var(--color-white);
  padding-left: 4px;
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.72);
}

.footer-contact li a {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
  transition: color var(--transition-base);
}

.footer-contact li a:hover,
.footer-contact li a:focus {
  color: #ffffff;
}

.footer-contact li i {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.1);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.4rem 0;
  font-size: 0.85rem;
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.7);
}

.footer-bottom a:hover {
  color: var(--color-white);
}

.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition-base);
  z-index: 1040;
  border: none;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-primary-dark);
  color: var(--color-white);
}

/* 15. Breadcrumb / page header
   ========================================================================== */
.page-header {
  position: relative;
  background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-darker) 100%);
  padding: 3rem 0;
  color: var(--color-white);
  overflow: hidden;
}

.page-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.10), transparent 55%);
}

.page-header .container {
  position: relative;
  z-index: 2;
}

.page-header h1 {
  color: var(--color-white);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin-bottom: 0.6rem;
}

.page-header p {
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
  margin-bottom: 0;
}

/* Breadcrumb — a plain, purpose-built component, not Bootstrap's <ol>-based
   one. Bootstrap's version draws its separator as a float:left ::before
   pseudo-element on the <li>, which repeatedly caused baseline mismatches
   between linked items (<a>, inline) and the final plain-text item (no
   <a>). Rebuilt from scratch here as a flat row of real, visible elements —
   a link, a literal ">" separator span, a link, a separator, a current-page
   span — every single one an inline-flex box with identical line-height,
   so there is no pseudo-element geometry left to misalign. Same markup and
   classes are reused everywhere a breadcrumb appears in the site. */
.breadcrumb-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  column-gap: 0.45rem;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1;
  overflow: hidden;
}

.breadcrumb-nav a,
.breadcrumb-nav .breadcrumb-sep {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  flex: 0 0 auto;
  white-space: nowrap;
}

.breadcrumb-nav a {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition-base);
}

.breadcrumb-nav a:hover,
.breadcrumb-nav a:focus {
  color: var(--color-white);
}

.breadcrumb-nav .breadcrumb-sep {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8em;
}

/* Only the current-page item shrinks/truncates — Home and any category
   link before it always stay fully visible on their own natural width. */
.breadcrumb-nav .breadcrumb-current {
  display: inline-block;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-white);
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .breadcrumb-nav {
    font-size: 0.78rem;
  }
}

/* 16. Forms
   ========================================================================== */
.form-control,
.form-select {
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  color: var(--color-gray-800);
  transition: all var(--transition-base);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-50);
}

.form-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-gray-700);
  margin-bottom: 0.5rem;
}

.form-label .required {
  color: #c0392b;
}

textarea.form-control {
  resize: vertical;
  min-height: 140px;
}

.contact-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: var(--shadow-md);
}

.contact-info-card {
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  height: 100%;
}

.contact-info-card h3 {
  color: var(--color-white);
}

.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0;
}

.contact-info-list li {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.contact-info-list li .icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-info-list li strong {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.contact-info-list li span,
.contact-info-list li a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.92rem;
}

.contact-info-list li a:hover {
  color: var(--color-white);
}

.form-feedback-msg {
  display: none;
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  margin-top: 1rem;
}

.form-feedback-msg.show {
  display: block;
}

/* 20. Animations
   ========================================================================== */
[data-aos] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-aos].aos-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-aos] { opacity: 1; transform: none; transition: none; }
}

.empty-state {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--color-gray-500);
}

.empty-state i {
  font-size: 2.5rem;
  color: var(--color-gray-300);
  margin-bottom: 1rem;
  display: block;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
  z-index: 2000;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

/* 21. Directors grid
   ========================================================================== */
.director-card {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

.director-card-img {
  position: relative;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: var(--color-gray-100);
}

.director-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s ease;
}

.director-card:hover .director-card-img img {
  transform: scale(1.08);
}

/* Soft gradient along the bottom edge of the photo so the card body feels
   like a continuation of the image rather than a hard seam. */
.director-card-img::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(0deg, rgba(8, 11, 26, 0.5) 0%, rgba(8, 11, 26, 0) 100%);
  pointer-events: none;
}

.director-card-body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.5rem 1.75rem;
}

/* A short accent bar that extends to full width on hover — the card's one
   "signature" detail, instead of a generic flat corporate tile. */
.director-card-body::before {
  content: '';
  display: block;
  width: 42px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  margin-bottom: 1rem;
  transform-origin: left center;
  transition: width var(--transition-base);
}

.director-card:hover .director-card-body::before {
  width: 72px;
}

.director-card-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 0.2rem;
}

.director-card-title {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.9rem;
}

.director-card-bio {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-gray-600);
  margin-bottom: 0;
}

/* 22. FAQ accordion
   ========================================================================== */
/* Custom-built, not Bootstrap's default accordion look — flat question
   rows on their own cards with a circular +/- control, rather than the
   stock bordered-group accordion. overflow-anchor: none pairs with
   initFaqScrollLock (main.js) to stop the browser nudging scroll position
   during the collapse height transition — the same drift documented next
   to initAccordionScrollLock's prior use on the product detail page. */
.faq-accordion {
  max-width: 880px;
  margin: 0 auto;
  overflow-anchor: none;
}

.faq-item {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  overflow: hidden;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.faq-item:last-child {
  margin-bottom: 0;
}

.faq-item:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-gray-300);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  text-align: left;
  background: none;
  border: 0;
  padding: 1.25rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-dark);
  cursor: pointer;
  transition: color var(--transition-base);
}

.faq-question:hover,
.faq-question[aria-expanded="true"] {
  color: var(--color-primary);
}

.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-primary-50);
  color: var(--color-primary);
  transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base);
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--transition-base);
}

.faq-icon::before {
  width: 14px;
  height: 2px;
}

.faq-icon::after {
  width: 2px;
  height: 14px;
}

.faq-question[aria-expanded="true"] .faq-icon {
  background: var(--color-primary);
  color: var(--color-white);
  transform: rotate(180deg);
}

.faq-question[aria-expanded="true"] .faq-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.faq-answer {
  padding: 0 1.5rem 1.5rem;
  color: var(--color-gray-600);
  font-size: 0.95rem;
  line-height: 1.75;
}

/* 23. Partners / brand logos
   ========================================================================== */
.partners-section .section-heading {
  margin-bottom: 2.5rem;
}

/* One structure, one slider, every screen size — a continuous auto-scroll
   marquee, pure CSS (no JS/library). The track renders the logos twice
   back-to-back; animating exactly to -50% moves it by one full set's
   width, so the loop point is invisible. This works the same whether
   there are 5 logos or 15 — nothing here depends on the count. A soft
   edge mask keeps logos from appearing to clip abruptly as they
   enter/exit, and the whole thing has a fixed height so nothing around it
   ever shifts while it plays. Only sizing below responds to viewport
   width — the slider itself is never switched on/off by a media query. */
.partners-marquee {
  overflow: hidden;
  width: 100%;
  height: 64px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.partners-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 2.25rem;
  height: 100%;
  animation: partnersMarquee 22s linear infinite;
}

.partners-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}

.partners-logo img {
  height: 100%;
  width: auto;
  max-width: 130px;
  object-fit: contain;
}

.partners-marquee:hover .partners-marquee-track,
.partners-marquee:active .partners-marquee-track {
  animation-play-state: paused;
}

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

@media (prefers-reduced-motion: reduce) {
  .partners-marquee-track {
    animation: none;
  }
}

/* Responsive sizing only (logo size, spacing, scroll speed) — the slider
   itself stays on at every width. */
@media (min-width: 576px) {
  .partners-marquee {
    height: 72px;
  }

  .partners-logo {
    height: 48px;
  }

  .partners-logo img {
    max-width: 140px;
  }

  .partners-marquee-track {
    gap: 3rem;
    animation-duration: 28s;
  }
}

@media (min-width: 1101px) {
  .partners-marquee {
    height: 88px;
  }

  .partners-logo {
    height: 56px;
  }

  .partners-logo img {
    max-width: 150px;
  }

  .partners-marquee-track {
    gap: 3.75rem;
    animation-duration: 34s;
  }
}