/* ===================================================================
   RR Infotech — Home page styles
   =================================================================== */

:root {
  --navy-bg: #0a0e1a;
  --navy-bg-alt: #10172b;
  --navy-darker: #070a13;
  --clients-bg: #1e2843; /* noticeably lighter slate-navy — Clients' one-off contrast break, still within the dark theme */
  --navy-panel: #0d1428;
  --navy-panel-2: #10182e;
  --navy-border: #1c2740;
  --orange: #f5a623;
  --orange-dark: #d98c12;
  --text-light: #f4f6fb;
  --text-gray: #9aa3b8;
  --text-gray-dim: #7c8499;

  --blue: #4fb3ff;
  --green: #34d399;
  --cyan: #22d3ee;
  --purple: #a78bfa;

  --paper: #eef1f6;
  --ink: #101a30;
  --slate: #5b6472;

  --wa-green: #25d366;
  --wa-green-dark: #1ebe5b;

  --navbar-h: 84px;
  --navbar-topbar-h: 44px; /* "Follow us" strip above the main nav row, desktop/tablet only — see .navbar-topbar */
  --container-w: 1600px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Offset anchor-scroll targets so the fixed navbar never covers a section's top */
section[id] { scroll-margin-top: var(--navbar-h); }

body {
  margin: 0;
  background: var(--navy-bg);
  color: var(--text-light);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
button { font: inherit; }

/* ===================== NAVBAR ===================== */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: rgba(8, 11, 22, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background .3s ease, box-shadow .3s ease;
}

.navbar.scrolled {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  background: rgba(6, 9, 18, 0.97);
}

/* Slim "Follow us" strip stacked above the main nav row. Part of the same
   fixed header (not a separate element) so it can't get hidden underneath
   it or leave a gap on scroll; instead it collapses away via the navbar's
   existing .scrolled toggle (same scroll listener already in script.js —
   no new JS needed) so the compact scrolled header matches its prior
   height exactly. Desktop/tablet only, see the ≤991px override below. */
.navbar-topbar {
  height: var(--navbar-topbar-h);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(4, 6, 12, 0.5);
  transition: height .3s ease, opacity .3s ease, border-bottom-width .3s ease;
}

.navbar.scrolled .navbar-topbar {
  height: 0;
  opacity: 0;
  border-bottom-width: 0;
  pointer-events: none;
}

.navbar-topbar-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-gray-dim);
  letter-spacing: 0.2px;
}

.navbar-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  color: #fff;
  transition: filter .2s ease, transform .2s ease;
}

.navbar-social-link:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

/* Each platform's own official brand color, shown at all times (not just
   hover) — icon size/shape/spacing above is unchanged, only the fill. */
.navbar-social-link--facebook { background: #1877F2; }
.navbar-social-link--linkedin { background: #0A66C2; }
.navbar-social-link--instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

/* "Follow us" repeated inside the mobile off-canvas menu, since the
   .navbar-topbar strip above is desktop/tablet-only (hidden ≤991px to keep
   the compact mobile header uncluttered) — see the ≤991px block below for
   where this actually becomes visible. */
.mobile-nav-social { display: none; }

.navbar-inner {
  max-width: var(--container-w);
  height: var(--navbar-h);
  margin: 0 auto;
  width: 100%;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: height .3s ease;
}

.navbar.scrolled .navbar-inner {
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  transition: transform .25s ease;
}
.brand:hover { transform: translateY(-1px); }

.brand-logo {
  height: 47px;
  width: auto;
}

/* --- nav links --- */
.nav-links {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 34px;
}

.nav-link {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--text-light);
  padding: 8px 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: color .2s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}

.nav-link:hover { color: var(--orange); }
.nav-link:hover::after { transform: scaleX(1); }

.nav-link.active {
  color: var(--orange);
}
.nav-link.active::after { transform: scaleX(1); }

/* --- whatsapp button --- */
.whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: #191300;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 12px 22px;
  border-radius: 999px;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(245, 166, 35, 0.25);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.whatsapp-btn:hover {
  background: #ffb741;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(245, 166, 35, 0.4);
}

.whatsapp-btn--mobile { display: none; }

/* --- hamburger --- */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  z-index: 1100;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-light);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease, background .3s ease;
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 12, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 900;
}
.nav-overlay.show { opacity: 1; visibility: visible; }

/* ===================== HERO ===================== */

.hero {
  position: relative;
  padding-top: calc(var(--navbar-h) + var(--navbar-topbar-h));
  overflow: hidden;
  background: var(--navy-bg);
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 7, 14, 0.35) 0%, rgba(5, 7, 14, 0.55) 38%, rgba(6, 9, 17, 0.92) 78%, var(--navy-bg) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto;
  padding: 130px 24px 70px;
  text-align: center;
}

.hero-tagline {
  color: var(--orange);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 22px;
}

.hero-heading {
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.18;
  font-weight: 800;
  color: #fff;
  margin: 0 0 24px;
  letter-spacing: -0.5px;
}

.hero-text {
  color: var(--text-gray);
  font-size: 16px;
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto;
}

/* ===================== FEATURE CARDS ===================== */

.feature-cards {
  position: relative;
  z-index: 2;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 35px 40px 60px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.feature-card {
  background: rgba(10, 14, 26, 0.88);
  border: 1px solid var(--navy-border);
  border-radius: 12px;
  padding: 30px 18px 26px;
  text-align: center;
  backdrop-filter: blur(6px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  background: rgba(14, 19, 36, 0.95);
}

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.card-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
}

.card-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-gray-dim);
  margin: 0;
}

.feature-card--blue    { border-color: rgba(79, 179, 255, 0.35); }
.feature-card--blue .card-icon    { color: var(--blue); }
.feature-card--blue:hover         { border-color: var(--blue); box-shadow: 0 14px 32px rgba(79, 179, 255, 0.18); }

.feature-card--orange  { border-color: rgba(245, 166, 35, 0.35); }
.feature-card--orange .card-icon  { color: var(--orange); }
.feature-card--orange:hover       { border-color: var(--orange); box-shadow: 0 14px 32px rgba(245, 166, 35, 0.18); }

.feature-card--green   { border-color: rgba(52, 211, 153, 0.35); }
.feature-card--green .card-icon   { color: var(--green); }
.feature-card--green:hover        { border-color: var(--green); box-shadow: 0 14px 32px rgba(52, 211, 153, 0.18); }

.feature-card--cyan    { border-color: rgba(34, 211, 238, 0.35); }
.feature-card--cyan .card-icon    { color: var(--cyan); }
.feature-card--cyan:hover         { border-color: var(--cyan); box-shadow: 0 14px 32px rgba(34, 211, 238, 0.18); }

.feature-card--purple  { border-color: rgba(167, 139, 250, 0.35); }
.feature-card--purple .card-icon  { color: var(--purple); }
.feature-card--purple:hover       { border-color: var(--purple); box-shadow: 0 14px 32px rgba(167, 139, 250, 0.18); }

/* ===================================================================
   HERO — FIT SINGLE VIEWPORT (DESKTOP ONLY, >= 992px)
   Mobile/tablet (<992px) keeps its original stacked, scrollable layout
   =================================================================== */

@media (min-width: 992px) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .hero-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 24px;
  }

  .hero-tagline {
    margin: 0 0 clamp(10px, 2vh, 22px);
  }

  .hero-heading {
    margin: 0 0 clamp(12px, 2.2vh, 24px);
  }

  .feature-cards {
    margin-top: auto;
    padding-bottom: 50px;
  }
}

/* ===================================================================
   RESPONSIVE
   =================================================================== */

@media (max-width: 1200px) {
  .feature-cards { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 991px) {
  .navbar-topbar { display: none; }
  .hero { padding-top: var(--navbar-h); }

  .navbar-inner { padding: 0 20px; }

  .hamburger { display: flex; }

  .feature-cards { grid-template-columns: repeat(2, 1fr); }

  .whatsapp-btn--desktop { display: none; }

  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(320px, 82vw);
    background: var(--navy-panel);
    border-left: 1px solid var(--navy-border);
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 6px;
    padding: 100px 28px 40px;
    margin: 0;
    transform: translateX(100%);
    transition: transform .35s ease;
    z-index: 1000;
    overflow-y: auto;
  }

  .nav-links.open { transform: translateX(0); }

  .nav-link {
    width: 100%;
    padding: 14px 0;
    font-size: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .nav-link::after { display: none; }

  .whatsapp-btn--mobile {
    display: inline-flex;
    margin-top: 20px;
    width: 100%;
    justify-content: center;
  }

  .mobile-nav-social {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .mobile-nav-social-icons {
    display: flex;
    gap: 12px;
  }

  .hero-content { padding: 110px 20px 50px; }
  .feature-cards { padding: 35px 20px 50px; }

  /* Below 992px the hero isn't height-capped to the viewport (that flex/
     min-height:100vh treatment is desktop-only, see the min-width:992px
     block above), so .hero-bg's container runs tall — text + all 6 stacked
     feature cards. cover has to scale this wide 6-panel collage way up to
     fill that height, leaving only a ~10%-wide sliver of it visible, and
     the default center position was landing mid-way through an unrelated
     seam between panels. Shift the crop window onto the leftmost broadcast
     studio panel instead, so what little is visible reads as one
     recognizable scene rather than an abstract diagonal blur. background-
     size stays `cover` — desktop's rules above are untouched. */
  .hero-bg {
    background-size: cover;
    background-position: 12% center;
  }
}

@media (max-width: 680px) {
  .feature-cards { grid-template-columns: repeat(2, 1fr); }
  .hero-heading { letter-spacing: -0.2px; }
}

@media (max-width: 420px) {
  .feature-cards { grid-template-columns: 1fr; }
  .brand-logo { height: 40px; }
}

/* ===================================================================
   ABOUT SECTION — light background, dark navy text, orange accent
   =================================================================== */

.about-section {
  background: var(--paper);
  padding: 120px 0;
}

.about-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: stretch;
  gap: 64px;
}

.about-text {
  flex: 0 1 45%;
}

.about-media {
  flex: 0 1 55%;
  position: relative;
  display: flex;
  align-items: center;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.section-label span {
  color: var(--orange);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.section-label .label-line {
  display: inline-block;
  width: 36px;
  height: 2px;
  background: var(--orange);
}

.about-heading {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 0 0 18px;
}

.about-heading .accent { color: var(--orange); }

.heading-underline {
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--orange);
  margin-bottom: 28px;
}

.about-desc {
  color: var(--slate);
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 520px;
  text-align: justify;
  margin: 0 0 18px;
}

.about-image-frame {
  /* Sized to the slideshow photos' own ~3:2 native aspect ratio (they're
     946-950 x 592-642px source crops) rather than stretched to match the
     text column's height, which previously forced object-fit: cover to
     upscale ~1.9x on retina displays (the mismatched aspect made the box
     proportionally taller than the source photos) and looked soft/blurry.
     .about-media centers this shorter box vertically instead. */
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(16, 26, 48, 0.18);
}

.about-slideshow {
  position: absolute;
  inset: 0;
}

.about-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.about-slide.is-active {
  opacity: 1;
}

.about-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 9, 18, 0) 55%, rgba(5, 8, 16, 0.88) 100%);
}

.about-image-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 28px;
}

.about-slide-dots {
  position: absolute;
  top: 18px;
  right: 20px;
  display: flex;
  gap: 8px;
  z-index: 2;
}

.about-slide-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: background .3s ease, transform .3s ease;
}

.about-slide-dot.is-active {
  background: var(--orange);
  transform: scale(1.2);
}

.caption-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--orange);
  color: #191300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-image-caption p {
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.2px;
  margin: 0;
}

@media (max-width: 991px) {
  .about-section { padding: 80px 0; }

  .about-inner {
    flex-direction: column;
    padding: 0 20px;
    gap: 40px;
  }

  .about-text { flex: none; width: 100%; }

  .about-media {
    flex: none;
    width: 100%;
  }

  .about-desc { max-width: none; }
}

@media (max-width: 480px) {
  .about-image-caption {
    padding: 18px 20px;
    gap: 10px;
  }

  .about-image-caption p { font-size: 14px; }
}

/* ===================================================================
   SOLUTIONS SECTION — dark background, orange accent, card grid

   Dark-section rhythm: consecutive dark sections alternate between
   --navy-bg and --navy-bg-alt (a touch lighter/cooler) so each reads as
   its own block instead of blending into one long slab. The section
   after About (light, the one intentional break) starts back at the
   base --navy-bg; each dark section after that alternates. A dark
   section that follows ANOTHER dark section also gets the top seam
   treatment (soft gradient blend + .section-seam divider line — see
   .brands-section below) so the boundary stays visible. Keep this
   pattern going for future dark sections (Projects, ...).
   =================================================================== */

.solutions-section {
  background: var(--navy-bg);
  padding: 120px 0;
}

.solutions-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 40px;
}

.section-heading-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 680px;
  margin: 0 auto 56px;
}

.solutions-heading {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 0 0 18px;
}

.solutions-subtext {
  color: var(--text-gray);
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 560px;
  margin: 0;
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.solution-card {
  background: rgba(10, 14, 26, 0.88);
  border: 1px solid var(--navy-border);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(6px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

.solution-card:hover {
  transform: translateY(-6px);
  background: rgba(14, 19, 36, 0.95);
}

.solution-card-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.solution-card-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.solution-card:hover .solution-card-image img {
  transform: scale(1.06);
}

.solution-card-body {
  padding: 24px 22px 26px;
}

.solution-card-title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}

.solution-card-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-gray-dim);
  margin: 0;
}

.solution-card--blue    { border-color: rgba(79, 179, 255, 0.35); }
.solution-card--blue:hover    { border-color: var(--blue); box-shadow: 0 14px 32px rgba(79, 179, 255, 0.18); }

.solution-card--orange  { border-color: rgba(245, 166, 35, 0.35); }
.solution-card--orange:hover  { border-color: var(--orange); box-shadow: 0 14px 32px rgba(245, 166, 35, 0.18); }

.solution-card--green   { border-color: rgba(52, 211, 153, 0.35); }
.solution-card--green:hover   { border-color: var(--green); box-shadow: 0 14px 32px rgba(52, 211, 153, 0.18); }

.solution-card--cyan    { border-color: rgba(34, 211, 238, 0.35); }
.solution-card--cyan:hover    { border-color: var(--cyan); box-shadow: 0 14px 32px rgba(34, 211, 238, 0.18); }

.solution-card--purple  { border-color: rgba(167, 139, 250, 0.35); }
.solution-card--purple:hover  { border-color: var(--purple); box-shadow: 0 14px 32px rgba(167, 139, 250, 0.18); }

@media (max-width: 991px) {
  .solutions-section { padding: 80px 0; }
  .solutions-inner { padding: 0 20px; }
  .solutions-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .solutions-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   BRANDS SECTION — dark background, orange accent, scrolling wordmark strip
   =================================================================== */

/* Reusable seam for a dark section that follows another dark section:
   a soft gray-to-orange-to-gray hairline right at the boundary. Pair
   with a background that starts at the previous section's shade and
   eases into this section's own (see .brands-section below). */
.section-seam {
  position: relative;
}

.section-seam::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(154, 163, 184, 0.25) 20%,
    rgba(245, 166, 35, 0.4) 50%,
    rgba(154, 163, 184, 0.25) 80%,
    transparent
  );
  pointer-events: none;
}

.brands-section {
  background: linear-gradient(180deg, var(--navy-bg) 0, var(--navy-bg-alt) 90px);
  padding: 120px 0;
  overflow: hidden;
}

.brands-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 40px;
}

.brands-heading {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 0 0 18px;
}

.brands-subtext {
  color: var(--text-gray);
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 560px;
  margin: 0;
}

.marquee-wrap {
  position: relative;
  margin-top: 56px;
}

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* Sit outside .marquee so they're unaffected by its edge-fade mask (which
   would otherwise fade the buttons out too, since mask-image applies to
   everything painted inside the masked element, arrows included). */
.marquee-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 26, 0.55);
  border: 1px solid var(--navy-border);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}

.marquee-arrow:hover,
.marquee-arrow:focus-visible {
  background: var(--orange);
  border-color: var(--orange);
  color: #191300;
  transform: translateY(-50%) scale(1.06);
}

.marquee-arrow--prev { left: 12px; }
.marquee-arrow--next { right: 12px; }

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 20px;
  animation: marquee-scroll 50s linear infinite;
  /* Starts paused: script.js only un-pauses (adds .is-ready) once every
     logo image has actually finished loading and it has measured the
     track's true width and set the correct animation-duration. This means
     the animation only ever starts once, already at the right speed, and
     never needs correcting mid-flight — changing animation-duration on an
     animation that's already running reinterprets elapsed time against the
     new duration, which causes a visible backward jump (confirmed while
     building this fix). Promotes to its own GPU compositing layer via
     will-change too: mobile browsers combining an animated transform with
     the parent .marquee's mask-image otherwise tend to fall back to
     software repaint, which also reads as stutter.

     Pause-on-hover and the arrow-nudge pause/resume are BOTH driven from
     script.js through the Web Animations API handle on this element
     (anim.pause()/.play()/.currentTime), not this CSS animation-play-state
     property directly — mixing a CSS :hover rule with script-driven
     pause/resume on the same animation is a known source of the two
     control paths fighting each other, so there's a single source of
     truth instead. */
  animation-play-state: paused;
  will-change: transform;
}

.marquee-track.is-ready {
  animation-play-state: running;
}

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

.brand-logo-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  padding: 0 20px;
  box-sizing: border-box;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(16, 26, 48, 0.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Fixed logo height keeps every brand mark the same visual size regardless of
   its source aspect ratio; max-width is a safety net sized to clear even the
   widest wordmark logo (Genelec, ~5.83:1) at full height, so nothing shrinks. */
.brand-logo-card img {
  height: 48px;
  width: auto;
  max-width: 285px;
  object-fit: contain;
}

.brand-logo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

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

@media (max-width: 991px) {
  .brands-section { padding: 80px 0; }
  .brands-inner { padding: 0 20px; }
  .marquee-wrap { margin-top: 44px; }
}

@media (max-width: 680px) {
  .marquee-arrow { width: 38px; height: 38px; }
  .marquee-arrow--prev { left: 6px; }
  .marquee-arrow--next { right: 6px; }
}

@media (max-width: 480px) {
  .brand-logo-card { height: 62px; padding: 0 16px; }
  .brand-logo-card img { height: 34px; max-width: 200px; }
}

/* ===================================================================
   CLIENTS SECTION — dark background, orange accent, static tile grid
   =================================================================== */

.clients-section {
  background: var(--paper);
  padding: 120px 0;
}

.clients-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 40px;
}

.clients-heading {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 0 0 18px;
}

.clients-subtext {
  color: var(--slate);
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 560px;
  margin: 0;
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}

.client-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  padding: 20px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(16, 26, 48, 0.08);
  text-align: center;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease,
              border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.clients-grid.is-visible .client-tile {
  opacity: 1;
  transform: translateY(0);
}

.client-tile:hover {
  border-color: var(--orange);
  background: #fff;
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 0 28px rgba(245, 166, 35, 0.22), 0 14px 32px rgba(245, 166, 35, 0.12);
}

.client-tile img {
  height: 52px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .client-tile {
    opacity: 1;
    transform: none;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
  }
}

@media (max-width: 991px) {
  .clients-section { padding: 80px 0; }
  .clients-inner { padding: 0 20px; }
  .clients-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .clients-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .client-tile { min-height: 84px; padding: 16px; }
  .client-tile img { height: 38px; }
}

/* ===================================================================
   CONTACT SECTION — dark background, orange accent, info + form
   =================================================================== */

.contact-section {
  background: linear-gradient(180deg, var(--clients-bg) 0, var(--navy-bg-alt) 90px);
  padding: 120px 0;
}

.contact-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.contact-heading {
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 0 0 18px;
}

.contact-intro {
  color: var(--text-gray);
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 480px;
  margin: 0 0 32px;
}

/* --- contact detail rows --- */
.contact-detail-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-detail {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(10, 14, 26, 0.88);
  border: 1px solid var(--navy-border);
  border-radius: 14px;
  padding: 16px 18px;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.contact-detail:hover {
  border-color: var(--orange);
  background: rgba(14, 19, 36, 0.95);
  transform: translateY(-2px);
}

.contact-detail-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(245, 166, 35, 0.12);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-detail-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.contact-detail-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-gray-dim);
}

.contact-detail-value {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

/* --- enquiry form --- */
.contact-form-card {
  background: rgba(10, 14, 26, 0.6);
  border: 1px solid var(--navy-border);
  border-radius: 20px;
  padding: 40px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 28px;
}

.form-row {
  display: flex;
  gap: 16px;
}

.form-group {
  flex: 1 1 0;
  min-width: 0;
}

.input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon-wrap svg {
  position: absolute;
  left: 15px;
  color: var(--text-gray-dim);
  pointer-events: none;
}

.form-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--navy-border);
  border-radius: 10px;
  padding: 13px 16px 13px 42px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.form-textarea {
  padding-left: 16px;
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
}

.form-input::placeholder {
  color: var(--text-gray-dim);
}

.form-input:focus {
  outline: none;
  border-color: var(--orange);
  background: rgba(245, 166, 35, 0.05);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.12);
}

.form-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--orange);
  color: #191300;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 16px 22px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.form-submit-btn:hover {
  background: #ffb741;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(245, 166, 35, 0.35);
}

.form-note {
  font-size: 12.5px;
  color: var(--text-gray-dim);
  line-height: 1.6;
  text-align: center;
  margin: 0;
}

.form-note a {
  color: var(--orange);
  text-decoration: underline;
}

@media (max-width: 991px) {
  .contact-section { padding: 80px 0; }
  .contact-inner { grid-template-columns: 1fr; padding: 0 20px; gap: 48px; }
  .contact-form-card { padding: 28px; }
}

@media (max-width: 560px) {
  .form-row { flex-direction: column; }
  .contact-form-card { padding: 22px; }
}

/* ===================================================================
   FOOTER
   =================================================================== */

.site-footer {
  background: var(--navy-darker);
  border-top: 1px solid var(--navy-border);
  padding: 24px 0;
}

.site-footer-inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-copy,
.footer-tagline {
  font-size: 13px;
  color: var(--text-gray-dim);
  margin: 0;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Size/shape/placement only — brand color + fill come from the shared
   .navbar-social-link--facebook/--instagram/--linkedin classes (same ones
   the header strip uses) so the two never need separate color logic. */
.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  transition: transform .25s ease, filter .25s ease;
}

.footer-social-link:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}

/* Reserve clearance on the right so the tagline never sits under the fixed
   floating WhatsApp widget (60px FAB + 24px offset) at any viewport width
   where the footer stays in its row layout. */
@media (min-width: 992px) {
  .site-footer-inner { padding-right: 110px; }
}

@media (max-width: 991px) {
  .site-footer-inner {
    flex-direction: column;
    text-align: center;
    padding: 0 20px;
  }
}

/* ===================================================================
   FLOATING WHATSAPP WIDGET — persistent bottom-right FAB + expanding
   chat popup, visible above all sections while scrolling
   =================================================================== */

.wa-widget {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

/* Hide while the mobile nav menu is open — the open menu (and its expanded
   dropdown) can grow tall enough to sit right where the FAB is fixed,
   overlapping the ENQUIRY button/links underneath it. */
body.nav-open .wa-widget {
  display: none;
}

.wa-fab {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: var(--wa-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(37, 211, 102, 0.38), 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  flex-shrink: 0;
}

.wa-fab:hover {
  background: var(--wa-green-dark);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.46), 0 6px 16px rgba(0, 0, 0, 0.32);
}

.wa-popup {
  width: 300px;
  max-width: calc(100vw - 48px);
  background: var(--navy-panel);
  border: 1px solid var(--navy-border);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.97);
  transform-origin: bottom right;
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
}

.wa-popup.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.wa-popup-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px;
  background: var(--navy-panel-2);
  border-bottom: 1px solid var(--navy-border);
}

.wa-popup-logo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-sizing: border-box;
  padding: 4px;
  background: #fff;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
}

.wa-popup-headtext {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.wa-popup-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: .02em;
}

.wa-popup-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-gray);
}

.wa-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wa-green);
  box-shadow: 0 0 6px rgba(37, 211, 102, 0.7);
  flex-shrink: 0;
}

.wa-popup-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s ease, color .2s ease;
}

.wa-popup-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-light);
}

.wa-popup-body {
  padding: 18px 16px 6px;
}

.wa-bubble {
  background: var(--paper);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.6;
  padding: 12px 14px;
  border-radius: 12px 12px 12px 4px;
  max-width: 90%;
}

.wa-popup-start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px;
  padding: 12px 16px;
  background: var(--wa-green);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  transition: background .2s ease, transform .2s ease;
}

.wa-popup-start:hover {
  background: var(--wa-green-dark);
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  .wa-widget { right: 16px; bottom: 16px; }
  .wa-fab { width: 54px; height: 54px; }
  .wa-popup { width: 280px; }
}