:root {
  /* Brand colors sampled directly from the Blue Print Agencies logo */
  --accent-color: #00AEEF;
  --accent-hover: #00AEEF;
  --accent-orange: #F18121;
  --accent-orange-hover: #F18121;
  --dark-bg: #111111;
  --text-dark: #1a1a1a;
  --text-muted: #888888;
  --border-light: #e5e5e5;
  --font-main: 'Plus Jakarta Sans', sans-serif;
}

/* Base resets */
html {
  /* Body's overflow-x:hidden only clips body's OWN overflowing content.
     position:fixed elements (like the Chatway chat widget's injected
     box, which isn't part of our markup and isn't responsive) are
     positioned relative to the viewport/html, not body, so they can
     still push the whole document wider than the screen on mobile and
     make the entire page scroll sideways. Setting overflow-x:hidden
     here too closes that escape hatch at the root. */
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: var(--font-main);
  color: var(--text-dark);
  background-color: #ffffff;
  overflow-x: hidden;
  width: 100%;
}

a {
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Bootstrap's .container caps out at 1320px and never grows past it,
   which leaves large empty margins on wider laptop/desktop screens
   (e.g. 1600px-1920px, common on 17" displays). Let it grow a bit
   further on those larger viewports, in line with the wider
   1400px/1600px containers already used elsewhere on the site. */
@media (min-width: 1400px) {
  .container {
    max-width: 1360px;
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: 1500px;
  }
}

/* Color & Button Utilities */
.accent {
  color: var(--accent-color);
}

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

.btn-accent {
  background-color: var(--accent-color);
  color: #ffffff;
  border: none;
  font-weight: 700;
  border-radius: 50px;
  padding: 10px 24px;
  transition: all 0.3s ease;
}

.btn-accent:hover {
  background-color: var(--accent-orange-hover);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
}

.icon-btn {
  background: transparent;
  border: none;
  font-size: 1.1rem;
  color: var(--text-dark);
  cursor: pointer;
  padding: 6px 10px;
  transition: color 0.3s ease;
}

.icon-btn:hover {
  color: var(--accent-orange-hover);
}

/* ==========================================
   TOP INFO BAR
   ========================================== */
.topbar {
  background-color: var(--dark-bg);
  color: #ffffff;
  font-size: 0.85rem;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.topbar-container {
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
}

.topbar-left {
  display: flex;
  align-items: center;
}

.topbar-item {
  color: #bbbbbb;
  margin-right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.topbar-item i {
  color: var(--accent-color);
}

a.topbar-item:hover {
  color: var(--accent-orange-hover);
}

.topbar-right {
  display: flex;
  align-items: center;
}

.topbar-social a {
  color: #bbbbbb;
  margin-left: 12px;
  font-size: 0.9rem;
}

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

/* ==========================================
   NAVBAR & HEADER
   ========================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: #ffffff;
  transition: all 0.3s ease;
}

/* Accent underline now spans the full screen width, sitting under the
   whole header (logo + nav links), rather than just under the logo
   lockup. .site-header is already a positioned ancestor (position:
   sticky), so this absolutely-positioned line stretches edge-to-edge. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background-color: var(--accent-orange);
}

.site-header.scrolled {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  padding: 2px 0;
}

.navbar {
  padding: 22px 0;
}

.brand-text {
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.5px;
  color: var(--text-dark);
}

/* ============ NAVBAR LOGO: single full logo image ============ */
/* Uses the actual logo artwork (icon + "BLUE PRINT AGENCIES" +
   "Printers & Stationers" + the "Dealers in..." line, in the script
   typeface) as one image, rather than rebuilding the wordmark out of
   web fonts — guarantees the on-site logo always matches the artwork
   exactly, including the 3rd line that the old CSS lockup dropped. */
.navbar-brand {
  display: flex;
  align-items: center;
}

.brand-logo-full {
  height: 64px;
  width: auto;
  display: block;
  transition: height 0.3s ease;
}

.site-header.scrolled .brand-logo-full {
  height: 48px;
}

@media (max-width: 575.98px) {
  .brand-logo-full {
    height: 46px;
  }
}
.btn-cyan-square {
  background-color: var(--accent-color);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 1.2px;
  padding: 14px 28px;
  border-radius: 0px;
  display: inline-block;
  transition: all 0.3s ease;
  border: none;
}

.btn-cyan-square:hover {
  background-color: var(--accent-orange-hover);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}
.navbar-nav .nav-link {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-dark);
  padding: 8px 18px !important;
  position: relative;
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Hover: text lifts slightly and shifts to the accent color, while a
   two-tone gradient bar draws in from the center outward underneath it —
   distinct from the small dot that marks the current page below. */
.navbar-nav .nav-link:hover {
  color: var(--accent-color);
  transform: scale(1.2);
}

/* Active-page dot indicator (unchanged) — kept separate from the hover
   bar above so "current page" and "hovered page" read differently. */
.navbar-nav .nav-link.active {
  color: var(--accent-orange);
}

.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  background-color: var(--accent-color);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.navbar-nav .nav-link.active::after {
  opacity: 1;
}

/* ============ CUSTOM HAMBURGER TOGGLER ============ */
.custom-toggler {
  border: none;
  padding: 6px;
  background: transparent;
  box-shadow: none !important;
  z-index: 1100;
}

.hamburger-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  width: 28px;
  height: 20px;
}

.hamburger-line {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--text-dark);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}

.hamburger-line + .hamburger-line {
  margin-top: 6px;
}

/* The third bar sits shorter than the other two — the toggler's signature look */
.hamburger-line-3 {
  width: 60%;
}

/* Morph into a close (X) mark when the offcanvas menu is open */
.custom-toggler.active .hamburger-line-1 {
  transform: translateY(8px) rotate(45deg);
  width: 100%;
}

.custom-toggler.active .hamburger-line-2 {
  opacity: 0;
}

.custom-toggler.active .hamburger-line-3 {
  transform: translateY(-8px) rotate(-45deg);
  width: 100%;
}

/* ============ RIGHT-SIDE MOBILE NAV (OFFCANVAS) ============ */
#mainNav.offcanvas {
  /* widened to match the reference layout; caps out at 380px so it
     doesn't swallow the whole screen on narrower phones */
  --bs-offcanvas-width: min(85vw, 380px);
  /* white on large screens, where offcanvas-lg just renders this as
     an inline navbar rather than a sliding panel */
  background-color: #ffffff;
}

@media (max-width: 991.98px) {
  #mainNav.offcanvas {
    background-color: var(--dark-bg);
    background-image: linear-gradient(160deg, rgba(11, 15, 23, 0.93), rgba(17, 17, 17, 0.88) 55%, rgba(42, 170, 225, 0.25)),
      url('../images/Homepage.webp');
    background-size: cover;
    background-position: center;
    color: #ffffff;
  }
}

#mainNav .offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 20px 24px;
}

#mainNav .offcanvas-title {
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffffff;
}

#mainNav .offcanvas-body {
  padding: 24px;
}

/* Social icons + copyright pinned to the bottom of the mobile nav panel */
.offcanvas-footer {
  margin-top: auto;
  padding-top: 32px;
  text-align: center;
}

.offcanvas-social {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}

.offcanvas-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background-color: var(--accent-color);
  color: #ffffff;
  font-size: 0.95rem;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.offcanvas-social a:hover {
  background-color: #ffffff;
  color: var(--accent-orange-hover);
  transform: translateY(-2px);
}

.offcanvas-copyright {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  margin-bottom: 0;
}

@media (max-width: 991.98px) {
  #mainNav .navbar-nav {
    align-items: flex-start;
    width: 100%;
  }
  #mainNav .nav-link {
    display: block;
    width: 100%;
    padding: 14px 4px 14px 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff;
    transition: color 0.3s ease, padding-left 0.3s ease;
  }
  #mainNav .nav-link:hover,
  #mainNav .nav-link.active {
    color: var(--accent-color);
    padding-left: 28px !important;
  }
  /* Desktop's center-drawn underline bar doesn't suit a full-width
     vertical list, so it's swapped for a gradient bar that grows down
     the link's left edge instead — paired with the indent above. */
  #mainNav .nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    border-radius: 2px;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease;
  }
  #mainNav .nav-link:hover::before,
  #mainNav .nav-link.active::before {
    transform: scaleY(1);
  }
  #mainNav .nav-link::after {
    display: none;
  }
}

/* Dropdown styling */
.dropdown-menu {
  border: none;
  border-radius: 8px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  padding: 12px 0;
}

.dropdown-item {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 20px;
  color: var(--text-dark);
}

.dropdown-item:hover {
  background-color: rgba(37, 99, 235, 0.08);
  color: var(--accent-color);
}

/* Search Modal */
.search-modal-content {
  border: none;
  border-radius: 16px;
  background: #ffffff;
}

/* Write for us / Testimonial Modal */
.testimonial-modal-content {
  border: none;
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
}

.testimonial-modal-header {
  border-bottom: 1px solid var(--border-light);
  padding: 24px 24px 16px;
}

.testimonial-modal-header .modal-title {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text-dark);
}

.testimonial-alert {
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.9rem;
  margin-bottom: 18px;
}

.testimonial-alert-success {
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.testimonial-alert-error {
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

#testimonialForm .form-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-dark);
}

#testimonialForm .form-control {
  border-radius: 8px;
  border: 1px solid var(--border-light);
  padding: 10px 14px;
  font-size: 0.92rem;
}

#testimonialForm .form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(42, 170, 225, 0.15);
}

#testimonialForm .form-control.is-invalid {
  border-color: #dc3545;
}

#testimonialForm .invalid-feedback {
  display: block;
  font-size: 0.78rem;
  min-height: 1em;
}

/* Star rating: radios in reverse DOM order (5..1) displayed left-to-right
   via row-reverse, so CSS-only hover/checked highlighting works without JS */
.star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 6px;
}

.star-rating input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.star-rating label {
  color: #d8dbe3;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s ease, transform 0.15s ease;
}

.star-rating label:hover {
  transform: scale(1.1);
}

.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
  color: var(--accent-orange);
}

/* ==========================================
   FOOTER
   ========================================== */
.site-footer {
  background-color: var(--dark-bg);
  color: #ffffff;
  position: relative;
  z-index: 2;
  /* Same 60px diagonal slope used by .featured-header-bg, just shifted up
     further so the footer-top block overlaps at least half of the clients card above it */
  clip-path: polygon(0 0, 100% 60px, 100% 100%, 0 100%);
  margin-top: -280px;
  padding-top: 60px;
}

.footer-top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 130px;    /* was 48px via py-5 */
  padding-bottom: 130px; /* was 48px via py-5 */
}

@media (max-width: 767px) {
  .footer-top {
    padding-top: 46px;
    padding-bottom: 60px;
  }
}

.footer-about {
  color: #999999;
  font-size: 0.9rem;
  line-height: 1.7;
}

.footer-heading {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0;
  color: var(--accent-color);
}

.footer-help-title {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 14px;
}

.footer-help-email {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 400;
  color: #cfd2db;
}

.footer-help-email:hover {
  color: var(--accent-orange-hover);
}

.footer-heading-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.footer-heading-dash {
  width: 20px;
  height: 1px;
  background-color: var(--accent-color);
  display: inline-block;
}

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

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #999999;
  font-size: 0.9rem;
}

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

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  margin-right: 8px;
  transition: all 0.3s ease;
}

.footer-social a:hover {
  background-color: var(--accent-orange-hover);
  color: #ffffff;
  transform: translateY(-3px);
}

.newsletter-form {
  display: flex;
  gap: 8px;
}

.newsletter-form .form-control {
  border-radius: 50px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  padding: 10px 20px;
  font-size: 0.875rem;
}

.newsletter-form .form-control::placeholder {
  color: #777777;
}

.newsletter-form .form-control:focus {
  border-color: var(--accent-color);
  box-shadow: none;
}

.footer-contact {
  color: #999999;
  font-size: 0.875rem;
  margin-bottom: 6px;
}

.footer-contact a {
  color: #999999;
}

.footer-contact a:hover {
  color: var(--accent-orange-hover);
}

.footer-bottom {
  background-color: #0a0a0a;
  color: #777777;
  font-size: 0.85rem;
}

.back-to-top {
  /* floated out of the footer row and pinned to the bottom-right,
     offset enough to sit beside the WhatsApp bubble rather than
     overlapping it */
  position: fixed;
  right: 96px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--dark-bg);
  border: none;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  z-index: 1050;
  transition: all 0.3s ease;
}

.back-to-top:hover {
  background-color: var(--accent-orange-hover);
  transform: translateY(-3px);
}

@media (max-width: 575px) {
  .back-to-top {
    right: 84px;
    bottom: 16px;
    width: 40px;
    height: 40px;
  }
}

/* ============ FLOATING WHATSAPP BUTTON ============ */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #25d366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  z-index: 1050;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.whatsapp-float:hover {
  color: #ffffff;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.5);
}

@media (max-width: 575px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 50px;
    height: 50px;
    font-size: 1.4rem;
  }
}

/* Hero Typography Layout */
    .hero-section {
        padding-top: 60px;
        padding-bottom: 50px;
        background-color: #ffffff;
        height: 400px;
    }

    .hero-title {
        font-size: 2.5rem;
        font-weight: 800;
        color: #111111;
        line-height: 1.25;
        letter-spacing: -0.8px;
        max-width: 900px;
    }

    .hero-title .text-highlight {
        color: var(--accent-color);
    }

    .hero-subtitle {
        color: var(--accent-orange);
        font-size: 1.2rem;
        font-weight: 800;
        line-height: 1.6;
        margin-top: 10px;
    }

    /* Hero Media Wrapper */
    .hero-media-container {
        position: relative;
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 15px;
    }

    .hero-media-wrapper {
        position: relative;
        width: 100%;
        border-radius: 0px;
        overflow: visible;
    }

    .hero-media-container.container-fluid {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.hero-image-mask {
  width: 100%;
  overflow: hidden;
  display: block;
}

.hero-media-container .hero-image {
  width: 100%;
  height: 580px;
  object-fit: cover;
  display: block;
  animation: heroZoomPulse 12s ease-in-out infinite;
  will-change: transform;
}

/* Slow zoom in / zoom out (Ken Burns style) loop for the hero image */
@keyframes heroZoomPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media-container .hero-image {
    animation: none;
  }
}

    /* Centered Play Button */
    .play-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 64px;
        height: 64px;
        background-color: #ffffff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent-color);
        font-size: 1.8rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
        cursor: pointer;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        z-index: 5;
        border: none;
    }

    .play-btn i {
        margin-left: 3px;
    }

    /* Overlapping Contact Box (Floating Cyan Card) */
    .contact-overlay-box {
        position: absolute;
        top: -50px;
        right: 5%;
        background-color: var(--accent-color);
        color: #ffffff;
        padding: 36px 60px;
        z-index: 10;
        box-shadow: 0 15px 35px rgba(37, 99, 235, 0.25);
    }

    .contact-overlay-box .overlay-title {
        font-size: 1.1rem;
        font-weight: 700;
        line-height: 1.35;
        margin-bottom: 20px;
    }

    .contact-overlay-box .overlay-phone {
        font-size: 1.85rem;
        font-weight: 800;
        letter-spacing: -0.5px;
        margin-bottom: 0;
        white-space: nowrap;
    }

    /* Responsive Design */
    @media (max-width: 991px) {
        .hero-title {
            font-size: 2.4rem;
        }
        .hero-image {
            height: 380px;
        }
        .contact-overlay-box {
            position: relative;
            top: 0;
            right: 0;
            margin-top: 20px;
            text-align: center;
        }
    }

    @media (max-width: 767px) {
        .hero-section {
            padding-top: 32px;
            padding-bottom: 20px;
            height: auto;
        }
        .hero-title {
            font-size: 1.7rem;
        }
        .hero-subtitle {
            margin-top: 20px;
            font-size: 0.95rem;
        }
        .hero-image {
            height: 260px;
        }
        .contact-overlay-box {
            padding: 22px 28px;
        }
    }
    /* ==========================================
   WHAT WE DO / SERVICES SECTION
   Solid accent-blue background. The left intro text column has been
   removed, so the section is now just the 4 service cards, enlarged
   into a single full-width row that fills the section edge to edge.
   ========================================== */
.services-section {
  background-color: var(--accent-color);
  background-image: none;
  background-attachment: initial;
  background-position: initial;
  background-repeat: initial;
  color: #ffffff;
  padding: 100px 0 120px 0;
  position: relative;
  overflow: hidden;
}

/* Section Subtitle Line & Tag (still used by other sections) */
.section-tag-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tag-line {
  width: 24px;
  height: 1px;
  background-color: var(--accent-color);
  display: inline-block;
  transform: none;
  transform-origin: center;
}

.section-tag {
  color: var(--accent-color);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Cards — image sits on top at a fixed height (its original visual
   size), title/text now sit BELOW the image directly on the section's
   solid blue background instead of being overlaid on the photo. */
.service-card {
  position: relative;
  overflow: hidden;
  background-color: transparent;
  color: #ffffff;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
}

/* Image block — height matches the card's previous min-height so the
   photo keeps the same visual size it had before. Positioned so the
   icon chip can float on top of it as an overlay. */
.service-card-image {
  position: relative;
  width: 100%;
  height: 520px;
  background-color: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 15px 35px rgba(6, 10, 18, 0.22);
}

.service-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 0.4s ease;
}

.service-card:hover .service-card-image img {
  transform: scale(1.04);
}

/* Text block — plain, transparent, sits directly on the section's
   accent-blue background rather than on a card/photo backdrop. */
.service-card-body {
  padding: 28px 4px 0;
}

/* Icon sits on a solid dark chip, floated in the bottom-left corner of
   the image itself so it reads as part of the photo rather than the
   text block below it. */
.service-icon {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2;
  font-size: 2.1rem;
  color: var(--accent-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background-color: rgba(6, 10, 18, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.service-card:hover .service-icon {
  transform: scale(1.08);
}

.services-section .services-cards-grid > div:nth-child(2n) .service-icon {
  color: #ffffff;
}

.service-card-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 16px;
  line-height: 1.3;
}

.service-card-text {
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 380px;
  margin-bottom: 0;
}

/* Responsive Styling for Services */
@media (max-width: 991px) {
  .services-section {
    padding: 70px 0;
  }
  .service-card-image {
    height: 420px;
  }
}

@media (max-width: 767px) {
  .services-section {
    padding: 44px 0;
  }
  .service-card-image {
    height: 260px;
  }
  .service-card-body {
    padding: 20px 4px 0;
  }
  .service-icon {
    left: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
    font-size: 1.6rem;
  }
}

/* ---- "What We Do" cards: horizontal scroll strip on mobile ----
   Same pattern as the services-page flip-card strip: the column gets
   a right-edge fade hint (toggled off near the end of scroll by
   initScrollHint in main.js), and the grid becomes a snap-scrolling
   flex row of fixed-width cards instead of a 2-col grid.
   Fade updated to fade into the accent-blue section background. */
@media (max-width: 767px) {
  .services-cards-col {
    position: relative;
  }

  .services-cards-col::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 18px;
    width: 36px;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.25s ease;
  }

  .services-cards-col.scroll-end::after {
    opacity: 0;
  }

  .services-cards-grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 16px;
    padding: 4px 4px 18px 4px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .service-card-col {
    flex: 0 0 82%;
    max-width: 300px;
    scroll-snap-align: start;
  }

  /* Fix: without this, snapping the last card's LEFT edge to the strip's
     start (the default) can leave blank white track to its right, since
     there's no further card to fill that space. Snapping its RIGHT edge
     to the strip's end instead means it lands flush with nothing hanging
     off — no more trailing empty gap after the last card. */
  .service-card-col:last-child {
    scroll-snap-align: end;
  }
}

/* ==========================================
   FEATURED WORKS SECTION
   ========================================== */
.featured-section {
  background-color: #ffffff;
  padding-bottom: 100px;
  position: relative;
}

@media (max-width: 767px) {
  .featured-section {
    padding-bottom: 44px;
  }
}

/* Dark header strip that the image grid overlaps into */
.featured-header-bg {
  background-color: var(--accent-color);
  /* Kept as-is: since .services-section above it is now a solid
     accent-blue block (not part of the dark-canvas chain), this glow
     simply starts fresh at the top of this section instead of
     continuing seamlessly from a section above (previously the two
     dark sections shared one uninterrupted viewport-fixed glow). */

  background-attachment: fixed;
  background-position: top left;
  background-repeat: no-repeat;
  padding: 90px 0 150px 0;
  margin-bottom: -170px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 60px));
}

.featured-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
  letter-spacing: -0.5px;
  max-width: 720px;
}

/* .section-tag / .tag-line default to accent-color text, which is fine on
   the white sections that reuse them (e.g. testimonials) but disappears
   here since .featured-header-bg's own background is also accent-color.
   Override to white just inside this block so the tag stays visible. */
.featured-header-bg .section-tag {
  color: #ffffff;
}

.featured-header-bg .tag-line {
  background-color: #ffffff;
}

.featured-grid {
  position: relative;
  z-index: 2;
  align-items: flex-start;
}

.project-card {
  background-color: transparent;
}

/* Bottom row: single project card + View All CTA filling the other half */
.featured-grid-bottom {
  margin-top: 8px;
}

.featured-cta {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 0 20px 40px;
}

.featured-cta-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.3;
  margin-bottom: 16px;
}

.featured-cta-text {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 420px;
  margin-bottom: 28px;
}

/* Second project image is staggered downward for a more dynamic grid */
.project-card-offset {
  margin-top: 70px;
}

.project-image-wrapper {
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 20px;
}

.project-image {
  width: 100%;
  height: 560px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.project-card:hover .project-image {
  transform: scale(1.05);
}

.project-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.project-category {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* Responsive Styling for Featured Works */
@media (max-width: 767px) {
  .featured-header-bg {
    padding: 40px 0 120px 0;
    margin-bottom: -90px;
  }
  .featured-title {
    font-size: 1.7rem;
  }
  .project-card-offset {
    margin-top: 0;
  }
  .project-image {
    height: 260px;
  }
  .featured-cta {
    padding: 8px 0 0 0;
    text-align: center;
    align-items: center;
  }
  .featured-cta-text {
    max-width: none;
  }
}

/* ---- Featured Works (first 4 projects, plus Project 5 on mobile):
   horizontal scroll strip on mobile. On desktop Project 5 is hidden
   here (see the d-md-none / d-none d-md-block toggle in home.html) and
   stays paired with the "View All" CTA in the row below instead. ---- */
@media (max-width: 767px) {
  .featured-cards-col {
    position: relative;
  }

  .featured-cards-col::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 18px;
    width: 36px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.25s ease;
  }

  .featured-cards-col.scroll-end::after {
    opacity: 0;
  }

  .featured-cards-grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 16px;
    padding: 4px 4px 18px 4px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .featured-cards-grid .col-md-6 {
    flex: 0 0 82%;
    max-width: 320px;
    scroll-snap-align: start;
    margin-top: 0 !important;
  }

  /* Fix: same trailing-empty-space issue as the "What We Do" strip
     above — snap the last card's end (not start) to the strip's end
     so nothing is left hanging blank past it. */
  .featured-cards-grid .col-md-6:last-child {
    scroll-snap-align: end;
  }
}

/* ==========================================
   TESTIMONIALS SECTION
   ========================================== */
.testimonials-section {
  background-color: #ffffff;
  padding: 100px 0 110px 0;
  overflow: hidden;
}

.testimonials-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.3;
  letter-spacing: -0.5px;
  max-width: 420px;
}

/* Slider viewport: holds a fixed-height stack of 2-card pages that crossfade */
.testimonial-slider {
  position: relative;
  width: 100%;
}

.testimonial-pages {
  position: relative;
  min-height: 260px;
}

.testimonial-page {
  display: flex;
  gap: 24px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateX(50px);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s;
  pointer-events: none;
  z-index: 1;
}

.testimonial-page.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 2;
}

.testimonial-page.leaving {
  opacity: 0;
  visibility: visible;
  transform: translateX(-50px);
  z-index: 1;
}

/* Progress dots */
.testimonial-dots {
  display: flex;
  gap: 8px;
  margin-top: 28px;
}

.testimonial-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #dcdcdc;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.testimonial-dot.active {
  background-color: var(--accent-color);
  width: 22px;
  border-radius: 4px;
}

.testimonial-card {
  flex: 1 1 0;
  min-width: 0;
  background-color: #141a26;
  padding: 32px 30px;
  border-radius: 4px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.testimonial-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 2px;
}

.testimonial-role {
  font-size: 0.8rem;
  color: #8a90a3;
  margin-bottom: 0;
}

.testimonial-text {
  color: #a0a5b5;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .testimonials-section {
    padding: 70px 0;
  }
  .testimonials-title {
    max-width: none;
  }
  .testimonial-page {
    flex-direction: column;
  }
  .testimonial-pages {
    min-height: 480px;
  }
}

/* On phones, testimonials are flattened by JS into one card per page
   (see initTestimonialSlider in main.js) — mirrors the client logos carousel */
@media (max-width: 767px) {
  .testimonials-section {
    padding: 40px 0 48px 0;
  }
  .testimonials-title {
    font-size: 1.6rem;
  }
  .testimonial-page {
    flex-direction: row;
  }
  .testimonial-pages {
    min-height: 240px;
  }
  .testimonial-card {
    padding: 26px 22px;
  }
}

/* ==========================================
   CLIENTS SECTION (a boxed card sitting on the
   white background, same treatment as a testimonial card)
   ========================================== */
.clients-section {
  background-color: #ffffff;
  padding: 0 0 130px 0;
}

.clients-wide-container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
}

.clients-card {
  background-color: #ffffff;
  border-radius: 6px;
  padding: 24px 40px 28px;
  border: 1px solid #0b0f17;
  box-shadow: 0 25px 50px rgba(11, 15, 23, 0.1);
  position: relative;
  z-index: 3;
}

.clients-tag {
  text-align: center;
  color: #4a5064;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.clients-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px 48px;
}

/* Static, non-animated logo grid: all client logos shown at once,
   no carousel/paging/auto-rotate (see main.js, initClientsCarousel
   is left disabled for this markup). */
.clients-logos-static .client-logo {
  opacity: 1;
}

/* Carousel structure — built by JS (see initClientsCarousel in main.js)
   only when there are more than 5 logos to show. The viewport clips
   overflow so pages slide fully off-screen instead of just fading. */
.clients-logos-viewport {
  width: 100%;
  overflow: hidden;
}

.clients-logos-track {
  display: flex;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.clients-logos-page {
  display: flex;
  flex: 0 0 100%;
  min-width: 0;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.client-logo {
  height: 80px;
  width: auto;
  opacity: 0.75;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.client-logo:hover {
  opacity: 1;
  transform: translateY(-2px);
}

@media (max-width: 767px) {
  .clients-section {
    padding: 0 0 36px 0;
  }
  .clients-card {
    padding: 20px 20px 22px;
  }
  .clients-wide-container {
    padding: 0 12px;
  }
  .clients-logos,
  .clients-logos-page {
    gap: 16px 28px;
  }
  .client-logo {
    height: 44px;
  }
  .site-footer {
    clip-path: polygon(0 0, 100% 35px, 100% 100%, 0 100%);
    margin-top: -110px;
    padding-top: 42px;
  }
}
/* ==========================================
   ABOUT — HERO / MISSION SECTION
   ========================================== */
.about-hero-section {
  background-color: #ffffff;
  padding: 60px 0 2px 0;
  min-height: 640px;
  position: relative;
  z-index: 3;
}

.about-hero-description {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 620px;
}

.about-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-feature-item {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.about-feature-icon {
  min-width: 18px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
}

.about-feature-item span.feature-label {
  color: var(--text-dark);
  font-weight: 600;
  font-size: 0.95rem;
}

.about-image-col {
  padding-left: 0;
  display: flex;
}

@media (min-width: 992px) {
  .about-text-col {
    /* pulls the left column further left, toward the container edge */
    margin-left: -50px;
  }

  .about-image-col {
    /* extra gap on top of the row's own gutter, widening the space
       between the text column and the image column */
    padding-left: 200px;
  }
}

.about-hero-media {
  position: relative;
  /* image no longer bleeds past the container edge; instead it keeps a
     small, even 10px reveal of space on both its left and right sides */
  margin-left: 100px;
  margin-right: -10px;
  width: 100%;
  height: 100%;
  /* backdrop shows through the empty space left around the image now
     that it's shown in full via object-fit: contain below */
  background-color: #ffffff
  border-radius: 4px;
}

.about-hero-image {
  width: 100%;
  height: 600px;
  /* "contain" instead of "cover" so the full photo is visible — nothing
     cropped off the edges — rather than filling and clipping the box */
  object-fit: contain;
  object-position: center;
  border-radius: 4px;
  display: block;
}

.about-years-badge {
  position: absolute;
  bottom: -45px;
  /* hang mostly over the image, with just enough spilling past its
     left edge to catch the left column / gap — matching the reference
     screenshot, where the badge sits low and left on the picture rather
     than centered on the column seam */
  left: -80px;
  background-color: var(--accent-color);
  color: #ffffff;
  padding: 24px 30px;
  text-align: center;
  z-index: 5;
  box-shadow: 0 15px 35px rgba(42, 170, 225, 0.3);
}

.about-years-badge .years-number {
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

.about-years-badge .years-label {
  font-size: 0.8rem;
  font-weight: 500;
  opacity: 0.9;
}

@media (max-width: 991px) {
  .about-hero-section {
    padding: 70px 0 0 0;
    /* let the section hug its content instead of forcing 640px, which
       left a blank white gap before the stats section on short screens */
    min-height: auto;
  }
  .about-hero-media {
    margin-left: 0;
    margin-right: 0;
  }
  .about-hero-image {
    height: 340px;
    margin-bottom: 0;
  }
  .about-years-badge {
    /* straddle the seam: half over the bottom of the hero image, half
       over the top of the stats section right below it */
    position: absolute;
    bottom: -40px;
    left: 20px;
    transform: none;
    margin-top: 0;
    width: fit-content;
    padding: 18px 22px;
  }
}

/* ==========================================
   ABOUT — STATS SECTION + CORE VALUES DARK BAND
   Both live inside .dark-canvas-region so a single canvas can paint
   continuously behind them; neither section paints its own dark
   background color anymore — the canvas (and its void color) IS the
   background for this whole stretch.
   ========================================== */
.dark-canvas-region {
  position: relative;
  background-color: #0b0f17;
  overflow: hidden;
}

.stats-particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* height is set in px by main.js to exactly match stats-section's
     height + the values dark band's height, so the tunnel covers the
     full dark stretch and stops precisely where the white area starts */
  z-index: 0;
  pointer-events: none;
  display: block;
}

.stats-section {
  padding: 110px 0 70px 0;
  position: relative;
  z-index: 1;
}

.stats-section .container {
  position: relative;
  z-index: 1;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 2.75rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 10px;
}

.stat-label {
  color: var(--accent-color);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 767px) {
  .stats-section {
    padding: 60px 0;
  }
  .stat-number {
    font-size: 1.7rem;
  }
  .stat-item {
    margin-bottom: 20px;
  }
}

/* ==========================================
   ABOUT — CORE VALUES SECTION
   Styled after the "Our Expert Team" grid: the dark band behind the
   heading and card tops is now a real element (.values-dark-band)
   rather than a background color, so its height can be measured by
   main.js and the canvas can be sized to match exactly. The section
   itself stays white beneath the band, and every card is a single,
   uniformly dark, readable card that pops off the seam.
   ========================================== */
.values-section {
  position: relative;
  /* No background-color here on purpose: a solid fill across the whole
     section would paint over the canvas no matter how tall it's drawn.
     .values-white-fill (below) supplies the white backdrop, but only
     from the card midpoint down — the area above it stays transparent
     so .dark-canvas-region's canvas shows through. */
  padding: 70px 0 90px 0;
  z-index: 1;
}

.values-dark-band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Fallback height before JS runs. main.js now overrides this inline,
     stretching the band down to the vertical midpoint of the first
     value-card so the shared canvas behind it covers exactly the top
     half of the core value cards. This element paints nothing itself —
     it exists purely so JS can measure/set a height with
     getBoundingClientRect(); .values-white-fill uses the same number. */
  height: 300px;
  background-color: transparent;
  z-index: 0;
  pointer-events: none;
}

.values-white-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Fallback before JS runs; main.js overrides this inline to match
     .values-dark-band's computed height exactly, so the white panel
     starts right at the cards' vertical midpoint. */
  top: 300px;
  background-color: #ffffff;
  z-index: 0;
  pointer-events: none;
}

.values-section .container {
  position: relative;
  z-index: 1;
  /* widen the section beyond Bootstrap's default container so the
     4-card row has more room to breathe and the gutter between
     cards reads as a bigger gap */
  max-width: 1280px;
}

.value-cards-row {
  margin: 0;
}

.value-card {
  position: relative;
  background-color: #0b0f17;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  text-align: left;
  height: 100%;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(11, 15, 23, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* dark gradient scrim over the background photo so the icon and copy
   stay readable, strongest at the bottom where the text sits */
.value-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 12, 24, 0.55) 0%, rgba(6, 12, 24, 0.55) 40%, rgba(6, 12, 24, 0.92) 100%);
  z-index: 0;
}

.value-card-icon-wrap,
.value-card-body {
  position: relative;
  z-index: 1;
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 50px rgba(11, 15, 23, 0.28);
}

.value-card-quality {
  background-image: url('../images/office-signage.jpg');
}

.value-card-integrity {
  background-image: url('../images/Business-Cards.jpg');
}

.value-card-timeliness {
  background-image: url('../images/Hoodie-branding.jpg');
}

.value-card-innovation {
  background-image: url('../images/car-branding.jpg');
}

.value-card-icon-wrap {
  padding: 60px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.value-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: rgba(42, 170, 225, 0.14);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.value-card-body {
  padding: 18px 24px 34px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.value-title {
  color: #ffffff;
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 6px;
}

.value-text {
  color: #9096a7;
  font-size: 0.8rem;
  line-height: 1.55;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .values-section {
    padding: 60px 0 70px 0;
  }
  .values-dark-band {
    height: 220px;
  }
  .values-white-fill {
    top: 220px;
  }
  .value-card {
    min-height: 320px;
  }
  .value-card-icon-wrap {
    padding: 30px 0;
  }
}

/* ==========================================
   SERVICES — HERO SECTION
   White background, left intro column, right column holds 6 cards in
   3 staggered flex columns (2 cards stacked per column). Each card is
   a 3D flip: front face is dark, hovering rotates it 180deg to reveal
   an accent-colored back face.
   ========================================== */
.services-hero-section {
  background-color: #ffffff;
  padding: 100px 0 70px 0;
}

.services-hero-title {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.25;
  letter-spacing: -0.5px;
  max-width: 480px;
}

.services-hero-title .text-highlight {
  color: var(--accent-color);
}

.services-hero-description {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 420px;
}

.service-flip-grid {
  display: flex;
  gap: 24px;
}

.service-flip-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Staggers columns 2 and 3 downward for the offset grid look used
   throughout the rest of the site (see .service-col-offset,
   .project-card-offset). */
.service-flip-col:nth-child(2) {
  margin-top: 48px;
}

.service-flip-col:nth-child(3) {
  margin-top: 24px;
}

.service-flip-card {
  height: 320px;
  perspective: 1200px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}

/* Hover flips the card (desktop). Touch devices get the same effect
   via the .is-flipped class, toggled on tap by main.js. */
.service-flip-card:hover .flip-card-inner,
.service-flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 6px;
  padding: 36px 26px;
  display: flex;
  flex-direction: column;
}

.flip-card-front {
  background-color: #ffffff;
  background-image:
    linear-gradient(180deg, rgba(11, 15, 23, 0.35) 0%, rgba(11, 15, 23, 0.9) 100%),
    var(--card-img);
  background-size: cover;
  background-position: center;
  justify-content: flex-start;
}

.flip-card-back {
  background-color: var(--accent-color);
  background-image:
    linear-gradient(180deg, rgba(42, 170, 225, 0.82) 0%, rgba(20, 90, 130, 0.94) 100%),
    var(--card-img);
  background-size: cover;
  background-position: center;
  transform: rotateY(180deg);
  justify-content: space-between;
}

.flip-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 26px;
}

.flip-card-front .flip-card-icon {
  background-color: rgba(42, 170, 225, 0.14);
  color: var(--accent-color);
}

.flip-card-back .flip-card-icon {
  background-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

/* Static caption sitting below each flip card. Unlike the card itself,
   this never rotates — it always shows the service's name regardless
   of hover/flip state. */
.flip-card-caption {
  padding-top: 16px;
}

.flip-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.3;
  margin-bottom: 0;
}

/* Title/description were removed; the flip cards now show only the
   icon on the front and the icon + "Contact us" link on the back. */

.flip-card-link {
  color: #ffffff;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.flip-card-link:hover {
  color: #ffffff;
  text-decoration: underline;
  gap: 10px;
}

.flip-card-link i {
  transition: transform 0.25s ease;
}

.flip-card-link:hover i {
  transform: translateX(3px);
}

@media (max-width: 991px) {
  .services-hero-section {
    padding: 70px 0 50px 0;
  }
  .services-hero-title,
  .services-hero-description {
    max-width: none;
  }
  .service-flip-grid {
    flex-wrap: wrap;
  }
  .service-flip-col {
    flex: 1 1 45%;
  }
  .service-flip-col:nth-child(2),
  .service-flip-col:nth-child(3) {
    margin-top: 0;
  }
}

/* Phones: swap the 3-column staggered grid for a single horizontally
   scrolling, snap-aligned strip of all 6 cards — one card at a time,
   with the next card peeking in at the edge as a scroll affordance. */
@media (max-width: 767px) {
  .services-hero-cards-col {
    position: relative;
  }

  /* Soft fade hinting there's more to scroll to the right; fades out
     once the strip is scrolled near its end (see initScrollHint
     in main.js, which toggles .scroll-end on this column) */
  .services-hero-cards-col::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 18px;
    width: 36px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #ffffff);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.25s ease;
  }

  .services-hero-cards-col.scroll-end::after {
    opacity: 0;
  }

  .service-flip-grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 16px;
    padding: 4px 4px 18px 4px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* Removes the column wrapper from layout (keeping it in the DOM for
     any JS/semantics) so its two stacked card+caption items become
     direct scroll items instead of a vertical pair. Well supported on
     modern mobile Safari/Chrome. */
  .service-flip-col {
    display: contents;
  }

  /* Each scroll item is the card plus its caption, so the title
     travels with the image as the strip scrolls. */
  .service-flip-item {
    flex: 0 0 78%;
    max-width: 300px;
    scroll-snap-align: start;
  }

  .service-flip-card {
    height: 260px;
  }

  /* Fix: the last item was snapping its LEFT edge to the strip's start,
     which — with no further item to fill the remainder — left a block
     of blank white track visible to its right once fully scrolled.
     Snapping its RIGHT edge to the strip's end instead means it lands
     flush against the end with nothing left over.

     NOTE: because .service-flip-col uses display:contents above, it is
     removed from the *rendered* box tree but NOT from the DOM tree that
     :last-child matches against. A bare ".service-flip-item:last-child"
     therefore matches the last item in EVERY column (items 2, 4, and 6),
     not just the true last item in the scroll strip. Having three items
     fight for the "end" snap point is exactly what produced the stray
     white gap on the right after scrolling — the browser could rest on
     item 4's end instead of the real final item, leaving track un-
     scrolled beyond it. Scoping the selector to only the last item of
     the last column targets item 6 alone and fixes it. */
  .service-flip-col:last-child .service-flip-item:last-child {
    scroll-snap-align: end;
  }
}

@media (max-width: 380px) {
  .service-flip-item {
    flex-basis: 85%;
  }
}

/* ==========================================
   SERVICES — FEATURE / PROCESS SLIDESHOW SECTION
   Dark band with diagonal top AND bottom edges, pulled up under the
   hero's bottom row of cards the same way .site-footer overlaps the
   clients card above it. margin-bottom leaves clear white space
   before the CTA section instead of the two butting up against
   each other. The dark band's height/padding/margins are controlled
   entirely by this section — the slideshow inside never resizes it.
   ========================================== */
.services-feature-section {
  color: #ffffff;
  position: relative;
  z-index: 1;
  margin-top: -90px;
  margin-bottom: 150px;
  padding: 130px 0 100px 0;
}

.services-feature-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #0b0f17;
  clip-path: polygon(0 0, 100% 90px, 100% 100%, 0 calc(100% - 90px));
  z-index: -1;
}

.feature-media-col {
  position: relative;
}

/* Wrapper keeps the exact same absolute position/size as the original
   single-image version — only its children changed (stacked slides
   instead of one <img>), so the image positioning and section height
   are unaffected by the slideshow. */
.feature-media-wrapper {
  position: absolute;
  top: -170px;
  left: 0;
  right: 60px;
  width: 700px;
  height: 400px;
  border-radius: 4px;
  overflow: hidden;
  pointer-events: none;
}

/* Each slide stacks in the same box; only opacity/transform differ,
   so swapping slides never changes the wrapper's size. */
.feature-slide-image {
  position: absolute;
  inset: 0;
  width: 550px;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  pointer-events: auto;
}

.feature-slide-image.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 2;
}

/* Outgoing slide keeps travelling the direction it entered from,
   instead of reversing — reads as one continuous left-to-right sweep */
.feature-slide-image.leaving {
  opacity: 0;
  transform: translateX(60px);
  z-index: 1;
}

/* Text mirrors the image: enters from the right, exits to the left,
   so image and copy always move toward each other in sync */
.feature-slide-text-wrapper {
  position: relative;
  min-height: 260px;
}

.feature-slide-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateX(60px);
  transition: opacity 0.7s ease, transform 0.7s ease, visibility 0.7s;
  pointer-events: none;
}

.feature-slide-text.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 2;
}

.feature-slide-text.leaving {
  opacity: 0;
  visibility: visible;
  transform: translateX(-60px);
  z-index: 1;
}

.feature-slide-dots {
  display: flex;
  gap: 8px;
  margin-top: 32px;
}

.feature-slide-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.25);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.feature-slide-dot.active {
  background-color: var(--accent-color);
  width: 22px;
  border-radius: 4px;
}

.services-feature-title {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
  letter-spacing: -0.5px;
  max-width: 480px;
}

.services-feature-text {
  color: #a0a5b5;
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 460px;
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .services-feature-section {
    /* pulled up further so the dark band reaches behind the bottom row
       of hero flip-cards above it, rather than leaving a white gap.
       Negative z-index drops it behind the (normal-flow, unpositioned)
       hero section so the cards render on top of the overlap instead
       of being covered by it. */
    margin-top: -90px;
    margin-bottom: 40px;
    padding: 140px 0 100px 0;
    z-index: -1;
  }
  .services-feature-section::before {
    /* bottom edge now slopes the same direction as the top edge
       (right side higher on both), a true parallelogram like desktop
       instead of a zigzag */
    clip-path: polygon(0 0, 100% 40px, 100% 100%, 0 calc(100% - 40px));
  }
  .feature-media-col {
    position: static;
    margin-bottom: 30px;
    order: 2;
  }
  .services-feature-section .col-lg-6:not(.feature-media-col) {
    order: 1;
  }
  .feature-media-wrapper {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    height: 300px;
    clip-path: none;
  }
  .services-feature-title {
    max-width: none;
  }
  .services-feature-text {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .feature-slide-text-wrapper {
    min-height: 300px;
  }
}

/* ==========================================
   SERVICES — CTA SECTION (over footer top)
   Same treatment as .clients-card (dark card sitting on white,
   overlapped by the footer below it) but taller, with a heading,
   copy, and a button instead of client logos.
   ========================================== */
.services-cta-section {
  background-color: #ffffff;
  padding: 0 0 130px 0;
}

.services-cta-header {
  text-align: center;
  margin-bottom: 48px;
}

.services-cta-tag {
  text-align: center;
  color: #7a8094;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.services-cta-title {
  color: #0b0f17;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 0;
}

.services-cta-title .text-highlight {
  color: var(--accent-color);
}

.services-cta-card {
  background-color: #0b0f17;
  border-radius: 6px;
  padding: 64px 48px;
  text-align: center;
  box-shadow: 0 25px 50px rgba(11, 15, 23, 0.15);
  position: relative;
  z-index: 3;
}

.services-cta-text {
  color: #a0a5b5;
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 32px auto;
}

@media (max-width: 767px) {
  .services-cta-section {
    padding: 0 0 30px 0;
  }
  .services-cta-header {
    margin-bottom: 32px;
  }
  .services-cta-card {
    padding: 48px 24px;
  }
  .services-cta-title {
    font-size: 1.6rem;
  }
}
/* ==========================================
   PRODUCTS SECTION
   3-per-row bordered card grid with a WhatsApp
   "Get a Quote" button, and a category dropdown filter
   (replaces the old pill-button row).
   ========================================== */
.products-section {
  background-color: #ffffff;
  padding: 20px 0;
}

.products-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -0.5px;
}

/* Category select: centered pill dropdown standing in for the old
   row of filter buttons */
.products-filter {
  display: flex;
  justify-content: center;
}

.products-category-select {
  width: 100%;
  max-width: 320px;
  border: 1px solid var(--border-light);
  border-radius: 50px;
  padding: 13px 42px 13px 22px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark);
  background-color: #ffffff;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232AAAE1' stroke-width='1.8' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.products-category-select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(42, 170, 225, 0.15);
}

.product-card {
  height: 100%;
  border: 1px solid #e6e8ee;
  border-radius: 6px;
  padding: 16px 16px 24px 16px;
  text-align: center;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.product-card:hover {
  box-shadow: 0 15px 35px rgba(11, 15, 23, 0.08);
  transform: translateY(-4px);
  border-color: transparent;
}

.product-image-wrapper {
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}

.product-image {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

.product-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 18px;
}

.product-quote-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Pagination — square boxes with a teal active state, matching the
   rest of the site's accent color. */
.products-pagination {
  margin-top: 56px;
}

.products-pagination .page-item {
  margin: 0 4px;
}

.products-pagination .page-link {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid #e6e8ee;
  background-color: #ffffff;
  color: var(--text-dark);
  font-weight: 700;
  font-size: 0.9rem;
}

.products-pagination .page-item.active .page-link {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #ffffff;
}

.products-pagination .page-link:hover {
  border-color: var(--accent-orange-hover);
  color: var(--accent-color);
}

.products-pagination .page-item.active .page-link:hover {
  color: #ffffff;
}

@media (max-width: 767px) {
  .products-section {
    padding: 70px 0;
  }
  .products-title {
    font-size: 1.7rem;
  }
  .product-image {
    height: 220px;
  }
}

/* ==========================================
   PRODUCTS — CATEGORY PICKER (landing view)
   Shown instead of the product grid when the products page is
   visited with no ?category= in the URL. Each tile is a link that
   navigates to the filtered product grid for that category.
   ========================================== */
.category-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.category-tile {
  display: flex;
  flex-direction: column;
}

.category-tile:hover .category-tile-label,
.category-tile:focus-visible .category-tile-label {
  color: var(--accent, #b3892f);
}

.category-tile-image {
  position: relative;
  display: block;
  min-height: 200px;
  border-radius: 8px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-image: var(--tile-img);
  transition: transform 0.3s ease;
}

.category-tile:hover .category-tile-image,
.category-tile:focus-visible .category-tile-image {
  transform: translateY(-4px);
}

.category-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.25) 100%);
  transition: background 0.3s ease;
}

.category-tile:hover .category-tile-overlay,
.category-tile:focus-visible .category-tile-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.35) 100%);
}

.category-tile-label {
  display: block;
  color: var(--text-dark);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
  padding: 14px 20px;
  transition: color 0.3s ease;
}

.products-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-dark);
  font-weight: 700;
  font-size: 0.9rem;
}

.products-back-btn:hover {
  color: var(--accent-color);
}

@media (max-width: 991px) {
  .category-picker-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 575px) {
  .category-picker-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .category-tile-image {
    min-height: 150px;
  }
  .category-tile-label {
    font-size: 0.9rem;
    padding: 10px 14px;
  }
}

/* ==========================================
   CONTACT — MAP HERO + WIDE OVERLAPPING CARD
   Card floats over the map's bottom edge like a business card laid
   on the map, wide enough to nearly fill the container.
   ========================================== */
.contact-hero-section {
  background-color: #ffffff;
  padding: 60px 0 600px 0; /* bottom padding reserves room for the overlapping card */
  position: relative;
}

.contact-map-container {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 15px;
}

.contact-map-wrapper {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(11, 15, 23, 0.15);
}

.contact-map-iframe {
  width: 100%;
  height: 620px;
  border: 0;
  display: block;
  /* Dark-map effect without needing the Maps JS API / styled API key */
  filter: invert(92%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

/* Wide floating card, centered, overlapping up over the map */
.contact-card {
  position: absolute;
  left: 50%;
  bottom: -390px;
  transform: translateX(-50%);
  width: 96%;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(11, 15, 23, 0.2);
  display: grid;
  grid-template-columns: 380px 1fr;
  overflow: hidden;
  z-index: 10;
}

/* LEFT: contact details panel */
.contact-info-panel {
  background-color: var(--dark-bg);
  color: #ffffff;
  padding: 52px 44px;
  display: flex;
  flex-direction: column;
}

.contact-info-tag {
  margin-bottom: 12px;
}

.contact-info-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 32px;
}

.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 26px;
}

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

.contact-info-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(42, 170, 225, 0.16);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.contact-info-text {
  color: #c7cad3;
  font-size: 0.9rem;
  line-height: 1.6;
}

.contact-info-text a {
  color: #ffffff;
  font-weight: 600;
}

.contact-info-text a:hover {
  color: var(--accent-orange-hover);
}

.contact-info-social {
  margin-top: auto;
  display: flex;
  gap: 10px;
}

.contact-info-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.contact-info-social a:hover {
  background-color: var(--accent-color);
  transform: translateY(-3px);
}

/* RIGHT: contact form panel */
.contact-form-panel {
  background-color: #ffffff;
  padding: 52px 48px;
}

.contact-form-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-dark);
  line-height: 1.3;
  margin-bottom: 28px;
}

.contact-form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

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

.contact-form-group-full {
  flex: 1 1 100%;
}

.contact-form-control {
  width: 100%;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 14px 18px;
  font-size: 0.9rem;
  font-family: var(--font-main);
  color: var(--text-dark);
  background-color: #fbfbfc;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form-control::placeholder {
  color: #a3a7b3;
}

.contact-form-control:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(42, 170, 225, 0.12);
  background-color: #ffffff;
}

.contact-form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888888' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 40px;
}

.contact-form-control[id="contactDepartment"]:invalid,
.contact-form-select option[value=""] {
  color: #a3a7b3;
}

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

.contact-form-submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  cursor: pointer;
}

.contact-form-status {
  margin: 14px 0 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  min-height: 1.2em;
}

.contact-form-status.is-success {
  color: #1d9a5c;
}

.contact-form-status.is-error {
  color: #d9463f;
}

/* Responsive */
@media (max-width: 991px) {
  .contact-hero-section {
    padding: 50px 0 60px 0;
  }
  .contact-map-iframe {
    height: 380px;
  }
  .contact-card {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    width: 100%;
    margin-top: -60px;
    grid-template-columns: 1fr;
  }
  .contact-info-panel,
  .contact-form-panel {
    padding: 40px 28px;
  }
  .contact-form-panel {
    order: 1;
  }
  .contact-info-panel {
    order: 2;
  }
  .contact-info-social {
    margin-top: 32px;
  }
}

@media (max-width: 575px) {
  .contact-form-row {
    flex-direction: column;
    gap: 16px;
  }
  .contact-map-iframe {
    height: 300px;
  }
}

.cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #ddd;
  box-shadow: 0 -2px 10px rgba(0,0,0,.08);
  padding: 1rem;
  z-index: 1080;
  transform: translateY(100%);
  transition: transform .3s ease;
}
.cookie-consent-banner.show { transform: translateY(0); }
.cookie-consent-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
}
.cookie-consent-actions { display: flex; gap: .5rem; flex-shrink: 0; }

.cookie-consent-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: .5rem;
}

/* ==========================================
   PLAIN CONTENT PAGES (privacy policy, terms, etc.)
   These pages don't end in a tall dark section like the homepage does,
   so .site-footer's -280px pull-up needs extra bottom padding here to
   land on empty space instead of covering the last bit of content.
   ========================================== */
.static-page-content {
  padding-bottom: 320px;
}

@media (max-width: 767px) {
  .static-page-content {
    /* matches the mobile .site-footer override: margin-top: -110px */
    padding-bottom: 150px;
  }
}