/* =====================================================================
   custom.css - Faiz Al Arabia brand overrides (must be linked LAST)

   1. Colors and variables      6. About Us
   2. Fonts                     7. Products
   3. Header and logo           8. Partners page
   4. Home page                 9. Utilities (borders, social icons)
   5. (see 4)                  10. Reduced motion
   ===================================================================== */


/* =====================================================================
   1. COLORS AND VARIABLES
   ===================================================================== */
:root {
  --brand-primary: #0c8c8c;     /* teal: main buttons, headings, highlights */
  --brand-secondary: #0B1A30;   /* web black / navy: secondary blocks */
  --brand-bwhite: #f4f6f7;      /* page background, bone white */
  --brand-blacktxt: #1A2733;    /* text black */
  --brand-fagrey: #D9DADB;      /* text grey */
  --brand-dark1: #002633;       /* background of sections and divisions */
}

.background-dark1 { background-color: var(--brand-dark1) !important; }

body.background-bwhite,
.background-bwhite { background-color: var(--brand-bwhite) !important; }

.background-secondary { background-color: var(--brand-secondary); }

.background-primary,
.background-aqua { background-color: var(--brand-primary) !important; }

.text-primary,
.text-primary-hover:hover { color: var(--brand-primary) !important; }
.text-dark { color: var(--brand-blacktxt) !important; }

/* =====================================================================
   2. FONTS - Barlow (self-hosted)
   ===================================================================== */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('../font/barlow-v13-latin-100.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../font/barlow-v13-latin-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../font/barlow-v13-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../font/barlow-v13-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../font/barlow-v13-latin-800.woff2') format('woff2');
}


/* =====================================================================
   3. HEADER AND LOGO
   ===================================================================== */
.brand {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 14px;
  padding: 12px 16px;
}

.brand img {
  display: block !important;
  flex: 0 0 auto !important;
  max-width: none !important;
  margin: 0 !important;
}

.brand-logo {
  height: 64px !important;
  width: 64px !important;
  border-radius: 50%;
  object-fit: cover;
}

.brand-text {
  display: flex !important;
  flex-direction: column !important;   /* tagline sits below the name */
  flex: 0 1 auto;
  white-space: nowrap;
  color: #fff;
  font-size: 24px;                     /* size of the company name */
  line-height: 1.1;
}

.brand-name {
  font-size: 1em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.brand-tagline {
  font-size: 0.5em;                    /* 50% of the name */
  font-weight: 400;
  letter-spacing: 1px;
  margin-top: 4px;
  opacity: 0.85;
}

.brand-badge {
  height: 64px !important;
  width: auto !important;
}

@media (max-width: 768px) {
  nav.grid { flex-wrap: wrap !important; }
  .brand img { height: 48px !important; width: 48px !important; }
  .brand a:nth-child(2) { font-size: 18px !important; }   /* CHECK: may be unused, see notes */
}


/* =====================================================================
   4. HOME PAGE
   ===================================================================== */

/* ----- Hero carousel ----- */
.carousel-main .item.background-image {
  aspect-ratio: 1920 / 700;
  min-height: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .carousel-main .item.background-image { aspect-ratio: 4 / 3; }
}

/* Carousel arrows (Owl 2) */
.carousel-fade-transition .owl-nav button.owl-prev,
.carousel-fade-transition .owl-nav button.owl-next {
  width: 46px;
  height: 46px;
  padding: 9px;
  box-sizing: border-box;
  background: var(--brand-primary);
  border-radius: 50%;
  opacity: 0.9;
  transition: background 0.2s, opacity 0.2s;
}

.carousel-fade-transition .owl-nav button.owl-prev:hover,
.carousel-fade-transition .owl-nav button.owl-next:hover {
  background: var(--brand-secondary);
  opacity: 1;
}

.owl-arrow-svg {
  width: 28px;
  height: 28px;
  display: block;
  margin: 0 auto;
}

/* ----- Tiles and bullet lists ----- */
.service-icon {
  display: block;
  height: 200px;          /* badge images (ISO / ICV). Change to resize all of them */
  width: auto;
  max-width: 100%;
  margin: 0 auto 15px auto;
}

.icon-list1,
.icon-list2 {
  list-style: none;
  padding-left: 0;
  margin-bottom: 50px;    /* space after the list ends */
}

.icon-list1 li,
.icon-list2 li {
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 25px 25px;
  padding-left: 45px;
  font-size: 25px;        /* text size */
  line-height: 1.5;       /* spacing between lines */
  margin-bottom: 10px;
}

.icon-list1 li { background-image: url("../img/icons/bullet1.jpeg"); }
.icon-list2 li { background-image: url("../img/icons/bullet2.jpeg"); }

/* ----- Section spacing and moving heading ----- */
.section-slim1 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  margin-bottom: 0 !important;
}

.section-slim2 {
  padding-top: 60px !important;
  padding-bottom: 40px !important;
}

.marquee-text {
  animation: slide-bounce 7s ease-in-out infinite alternate;
}

@keyframes slide-bounce {
  from { transform: translateX(-20%); }
  to   { transform: translateX(40%); }
}

/* ----- Partner logo strip (scrolls right to left) ----- */
.logo-strip {
  overflow: hidden;                                  /* hides logos outside the strip */
  background: var(--brand-bwhite);
  border-top: 3px solid var(--brand-primary);
  border-bottom: 3px solid var(--brand-primary);
  padding: 15px 0;
}

.logo-track {
  display: flex;
  align-items: center;
  width: max-content;                                /* as wide as all logos */
  animation: logo-scroll 25s linear infinite;
}

.logo-item {
  flex: 0 0 auto;
  padding: 0 20px;                                   /* space between logos */
}

.logo-item img {
  width: 200px;
  height: 80px;
  display: block;
}

@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }              /* moves left by one full set */
}

.logo-strip:hover .logo-track { animation-play-state: paused; }

@media (max-width: 600px) {
  .logo-item { padding: 0 10px; }
  .logo-item img {
    width: 140px;
    height: 56px;                                    /* keeps the 5:2 ratio */
  }
}

/* ----- Industries We Serve ----- */
.industries {
  background: var(--brand-bwhite);
  padding: 40px 20px;
}

.industries-title { margin-bottom: 5px; }
.industries-subtitle { margin-bottom: 30px; }

.industry-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;                           /* centers the last row */
  gap: 25px;
  max-width: 1100px;
  margin: 0 auto;
}

.industry-card {
  flex: 0 1 calc(33.333% - 17px);                    /* 3 per row */
  box-sizing: border-box;
  background: #fff;
  border: 2px solid var(--brand-primary);
  border-top: 6px solid var(--brand-primary);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--brand-secondary);      /* 3D look */
  padding: 25px 20px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.industry-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--brand-secondary);
}

.industry-icon {
  width: 60px;
  height: 60px;
  display: block;
  margin: 0 auto 15px;
}

.industry-name {
  color: var(--brand-secondary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.industry-text {
  color: var(--brand-blacktxt);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 992px) { .industry-card { flex: 0 1 calc(50% - 13px); } }   /* tablets: 2 per row */
@media (max-width: 600px) { .industry-card { flex: 0 1 100%; } }                /* phones: 1 per row */

/* ----- Why Faiz Al Arabia (trust) ----- */
.trust {
  background: var(--brand-secondary);
  padding: 50px 20px;
}

.trust-title {
  color: #fff;
  margin: 0 0 35px;
  position: relative;
  padding-bottom: 15px;
}

.trust-title::after {                                /* short teal line under the title */
  content: "";
  display: block;
  width: 70px;
  height: 4px;
  background: var(--brand-primary);
  border-radius: 2px;
  margin: 12px auto 0;
}

.trust-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

.trust-item {
  flex: 0 1 calc(33.333% - 20px);                    /* 3 per row */
  box-sizing: border-box;
  text-align: center;
  padding: 25px 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  transition: background 0.2s, border-color 0.2s;
}

.trust-item:hover {
  background: rgba(15, 139, 141, 0.2);               /* soft teal tint */
  border-color: var(--brand-primary);
}

.trust-badge {
  width: 60px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto 15px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

.trust-name {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 10px;
}

.trust-text {
  color: #d7e3ee;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 992px) { .trust-item { flex: 0 1 calc(50% - 15px); } }
@media (max-width: 600px) { .trust-item { flex: 0 1 100%; } }

/* ----- Application / product visual band ----- */
.visual-band {
  background: url("../img/application-pipeline.png") center / cover no-repeat;
  background-attachment: fixed;                      /* parallax */
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
}

.visual-overlay {                                    /* navy gradient keeps the text readable */
  width: 100%;
  min-height: 520px;
  box-sizing: border-box;
  padding: 70px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(
    180deg,
    rgba(19, 41, 75, 0.85) 0%,
    rgba(11, 26, 48, 0.70) 50%,
    rgba(11, 26, 48, 0.90) 100%
  );
}

.visual-kicker {
  color: var(--brand-primary);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 0 0 15px;
}

.visual-title {
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}

.visual-line {
  width: 90px;
  height: 4px;
  background: var(--brand-primary);
  border-radius: 2px;
  margin: 22px auto 40px;
}

.visual-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  margin-bottom: 40px;
}

.visual-point {
  width: 200px;
  padding: 25px 15px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.10);             /* glass effect */
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  backdrop-filter: blur(4px);
  transition: background 0.2s, transform 0.2s;
}

.visual-point:hover {
  background: rgba(15, 139, 141, 0.55);
  transform: translateY(-4px);
}

.visual-icon {
  width: 56px;
  height: 56px;
  display: block;
  margin: 0 auto 12px;
}

.visual-point h3 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
}

.visual-btn {
  display: inline-block;
  padding: 14px 34px;
  background: #d32f2f;                               /* red */
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s;
}

.visual-btn:hover {
  background: #b71c1c;
  color: #fff;
}

@media (max-width: 992px) {
  .visual-title { font-size: 36px; }
}

@media (max-width: 600px) {                          /* parallax is unreliable on phones */
  .visual-band { background-attachment: scroll; min-height: 0; }
  .visual-overlay { padding: 50px 15px; min-height: 0; }
  .visual-title { font-size: 28px; }
  .visual-point { width: 100%; max-width: 280px; }
}

/* ----- Global Reach (image band) ----- */
.global-band {
  background: url("../img/global-reach.jpeg") center / cover no-repeat;
}

.global-band-overlay {
  padding: 90px 20px;
  text-align: center;
  background: rgba(11, 26, 48, 0.78);
}

.global-band .global-line { margin: 20px auto 25px; }   /* CHECK: .global-line has no size or color, see notes */

.global-band-title {
  color: #fff;
  font-size: 42px;
  font-weight: 700;
  margin: 0;
}

.global-band-text {
  color: #e3ecf4;
  font-size: 18px;
  line-height: 1.7;
  max-width: 750px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .global-band-title { font-size: 28px; }
}


/* =====================================================================
   6. ABOUT US
   ===================================================================== */

/* ----- Hero (static image) ----- */
.about-hero {
  width: 100%;
  line-height: 0;                 /* removes the small gap under the image */
}

.about-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 700;
  object-fit: cover;
}

@media (max-width: 600px) {
  .about-hero img { aspect-ratio: 16 / 9; }
}

/* ----- Our Story ----- */
.our-story {
  background: var(--brand-bwhite);
  padding: 70px 20px;
}

.story-inner {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto;
}

.story-head {
  flex: 0 0 35%;
  position: sticky;               /* stays in view while the long text scrolls */
  top: 30px;
}

.story-kicker {
  color: var(--brand-primary);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.story-title {
  color: var(--brand-secondary);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.story-line {
  width: 80px;
  height: 4px;
  background: var(--brand-primary);
  border-radius: 2px;
  margin: 22px 0 28px;
}

.story-badge {
  display: inline-block;
  padding: 14px 24px;
  background: var(--brand-secondary);
  border-radius: 16px;
  box-shadow: 5px 5px 0 var(--brand-primary);
}

.story-badge-small {
  display: block;
  color: #d7e3ee;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.story-badge-big {
  display: block;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

.story-body {
  flex: 1 1 0;
  min-width: 0;
}

.story-body p {
  color: var(--brand-blacktxt);
  font-size: 18px;
  line-height: 1.8;
  margin: 0 0 22px;
}

.story-body .story-lead {
  font-size: 21px;
  font-weight: 600;
  color: var(--brand-secondary);
  line-height: 1.6;
}

.story-closing {
  margin-top: 30px;
  padding: 28px 30px;
  background: var(--brand-secondary);
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  border-left: 8px solid var(--brand-primary);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--brand-primary);
}

@media (max-width: 992px) {
  .story-inner { flex-direction: column; gap: 35px; }
  .story-head {
    flex: none;
    position: static;
    text-align: center;
    width: 100%;
  }
  .story-line { margin-left: auto; margin-right: auto; }
  .story-title { font-size: 32px; }
}

@media (max-width: 600px) {
  .our-story { padding: 45px 15px; }
  .story-title { font-size: 26px; }
  .story-body p { font-size: 16px; }
  .story-body .story-lead { font-size: 18px; }
  .story-closing { font-size: 18px; padding: 22px 20px; }
}

/* ----- What We Promise ----- */
.promise {
  background: var(--brand-secondary);
  padding: 70px 20px;
}

.promise-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.promise-title {
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

.promise-line {
  width: 90px;
  height: 4px;
  background: var(--brand-primary);
  border-radius: 2px;
  margin: 20px auto 30px;
}

.promise-intro {
  color: #d7e3ee;
  font-size: 19px;
  line-height: 1.8;
  max-width: 850px;
  margin: 0 auto 50px;
}

.promise-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
}

.promise-card {
  flex: 0 1 calc(25% - 19px);                   /* 4 per row */
  box-sizing: border-box;
  background: #fff;
  border-top: 6px solid var(--brand-primary);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--brand-primary);   /* 3D look */
  padding: 30px 20px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.promise-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--brand-primary);
}

.promise-card-title {
  color: var(--brand-secondary);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.promise-card-text {
  color: var(--brand-blacktxt);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 992px) {
  .promise-card { flex: 0 1 calc(50% - 13px); }
  .promise-title { font-size: 32px; }
}

@media (max-width: 600px) {
  .promise { padding: 45px 15px; }
  .promise-title { font-size: 26px; }
  .promise-intro { font-size: 16px; margin-bottom: 35px; }
  .promise-card { flex: 0 1 100%; }
}


/* =====================================================================
   7. PRODUCTS - Product Categories (tabs)   [page not built yet]
   ===================================================================== */
.product-cats {
  background: var(--brand-bwhite);
  padding: 60px 20px;
}

.cats-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.cats-title {
  color: var(--brand-secondary);
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

.cats-line {
  width: 90px;
  height: 4px;
  background: var(--brand-primary);
  border-radius: 2px;
  margin: 20px auto 30px;
}

.cats-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 30px;
}

.cats-tab {
  padding: 13px 26px;
  background: #fff;
  color: var(--brand-secondary);
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  border: 2px solid var(--brand-primary);
  border-radius: 30px;                          /* pill shape */
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.cats-tab:hover {
  background: rgba(15, 139, 141, 0.12);
  transform: translateY(-2px);
}

.cats-tab.active {
  background: var(--brand-primary);
  color: #fff;
  box-shadow: 4px 4px 0 var(--brand-secondary);
}

.cats-tab:focus-visible {
  outline: 3px solid var(--brand-secondary);
  outline-offset: 2px;
}

.cats-panel {
  display: none;
  background: #fff;
  border: 2px solid var(--brand-primary);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--brand-secondary);
  padding: 30px;
  text-align: left;
}

.cats-panel.active { display: block; }

.cats-panel h3 {
  color: var(--brand-secondary);
  font-size: 26px;
  margin: 0 0 12px;
}

.cats-panel p {
  color: var(--brand-blacktxt);
  font-size: 18px;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 992px) {
  .cats-title { font-size: 32px; }
}

@media (max-width: 600px) {
  .product-cats { padding: 40px 15px; }
  .cats-title { font-size: 26px; }
  .cats-tabs { flex-direction: column; }        /* full-width buttons */
  .cats-tab { width: 100%; }
  .cats-panel { padding: 22px 18px; }
}


/* =====================================================================
   8. PARTNERS PAGE - logo matrix
   ===================================================================== */
.partners-section { padding: 20px 20px 60px; }

.partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);        /* 3 columns */
  gap: 25px;
  max-width: 900px;                             /* keeps the matrix centered and compact */
  margin: 0 auto;
}

.partner-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  box-sizing: border-box;
  padding: 20px;
  background: #fff;
  border: 2px solid var(--brand-primary);
  border-radius: 20px;
  box-shadow: 5px 5px 0 var(--brand-secondary);
  transition: transform 0.2s, box-shadow 0.2s;
}

.partner-cell:hover {                           /* small lift, same as the other cards */
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--brand-secondary);
}

.partner-cell img {
  display: block;
  max-width: 100%;
  max-height: 90px;                             /* logo size: lower to shrink further */
  width: auto;
  height: auto;
}

@media (max-width: 600px) {
  .partners-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
  .partner-cell { height: 120px; padding: 15px; }
  .partner-cell img { max-height: 70px; }
}

/* =====================================================================
   9. UTILITIES
   ===================================================================== */
.text-left { text-align: left !important; }

a:focus-visible {                               /* keyboard focus visibility */
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* ----- Social icons (inline SVG) ----- */
.social-svg {
  width: 100px;
  height: 100px;
  display: block;
  margin: 0 auto;
  fill: #fff;
}

/* ----- Border styles (Prepared by SHARASH) -----
   Radius guide: 8px slight, 20px clearly curved, 40px very round, 50% oval or circle */
.border0 {                                      /* normal teal border */
  border: 2px solid var(--brand-primary);
  border-radius: 20px;
}

.border1 {                                      /* normal grey border */
  border: 2px solid var(--brand-fagrey);
  border-radius: 20px;
}

.border2 {                                      /* classic bevel (ridge) */
  border: 8px ridge var(--brand-primary);
  border-radius: 20px;
}

.border3 {                                      /* raised 3D box with solid shadow */
  border: 2px solid var(--brand-primary);
  border-radius: 20px;
  padding: 15px;
  box-shadow: 6px 6px 0 var(--brand-secondary);
}

.border4 {                                      /* soft, realistic depth */
  border: 2px solid var(--brand-primary);
  border-radius: 20px;
  padding: 15px;
  box-shadow: 0 8px 20px rgba(11, 26, 48, 0.25);
}

.border5 {                                      /* inner and outer bevel */
  border: 2px solid var(--brand-primary);
  border-radius: 8px;
  padding: 15px;
  box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.6),
    inset -2px -2px 4px rgba(0, 0, 0, 0.15),
    6px 6px 12px rgba(11, 26, 48, 0.3);
}

.border6 { transition: transform 0.2s, box-shadow 0.2s; }   /* lift on hover */

.border6:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--brand-secondary);
}


/* =====================================================================
   10. REDUCED MOTION - for visitors who turn animations off
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .marquee-text { animation: none; transform: none; }
  .logo-track { animation: none; }
  .visual-band { background-attachment: scroll; }
  .industry-card,
  .trust-item,
  .visual-point,
  .promise-card,
  .cats-tab,
  .partner-cell { transition: none; }
}